124 lines
3.2 KiB
TypeScript
124 lines
3.2 KiB
TypeScript
import { createScope } from '../src'
|
|
import { ExampleSection } from './ssr/helpers'
|
|
|
|
const { define } = createScope('Button')
|
|
|
|
const Button = define('Root', {
|
|
base: 'button',
|
|
|
|
padding: "12px 24px",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 8,
|
|
background: "#3b82f6",
|
|
color: "white",
|
|
border: "none",
|
|
borderRadius: 8,
|
|
fontSize: 16,
|
|
fontWeight: 600,
|
|
cursor: "pointer",
|
|
transition: "all 0.2s ease",
|
|
userSelect: "none",
|
|
boxShadow: "0 4px 6px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
transform: "translateY(0)",
|
|
|
|
states: {
|
|
":not(:disabled):hover": {
|
|
transform: 'translateY(-2px)',
|
|
filter: 'brightness(1.05)'
|
|
},
|
|
":not(:disabled):active": {
|
|
transform: 'translateY(1px)',
|
|
boxShadow: '0 2px 3px rgba(0, 0, 0, 0.2)'
|
|
},
|
|
},
|
|
|
|
variants: {
|
|
intent: {
|
|
primary: {
|
|
background: "#3b82f6",
|
|
color: "white",
|
|
boxShadow: "0 4px 6px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
secondary: {
|
|
background: "#f3f4f6",
|
|
color: "#374151",
|
|
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)",
|
|
},
|
|
danger: {
|
|
background: "#ef4444",
|
|
color: "white",
|
|
boxShadow: "0 4px 6px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
ghost: {
|
|
background: "transparent",
|
|
color: "#aaa",
|
|
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1)",
|
|
border: "1px solid #eee",
|
|
},
|
|
},
|
|
size: {
|
|
small: {
|
|
padding: "8px 16px",
|
|
fontSize: 14,
|
|
},
|
|
large: {
|
|
padding: "16px 32px",
|
|
fontSize: 18,
|
|
},
|
|
},
|
|
disabled: {
|
|
opacity: 0.5,
|
|
cursor: "not-allowed",
|
|
},
|
|
},
|
|
})
|
|
|
|
const ButtonRow = define('Row', {
|
|
display: 'flex',
|
|
gap: 16,
|
|
flexWrap: 'wrap',
|
|
alignItems: 'center',
|
|
})
|
|
|
|
export const ButtonExamplesContent = () => (
|
|
<>
|
|
<ExampleSection title="Intents">
|
|
<ButtonRow>
|
|
<Button intent="primary">Primary</Button>
|
|
<Button intent="secondary">Secondary</Button>
|
|
<Button intent="danger">Danger</Button>
|
|
<Button intent="ghost">Ghost</Button>
|
|
</ButtonRow>
|
|
</ExampleSection >
|
|
|
|
<ExampleSection title="Sizes">
|
|
<ButtonRow>
|
|
<Button size="small">Small Button</Button>
|
|
<Button>Medium Button</Button>
|
|
<Button size="large">Large Button</Button>
|
|
</ButtonRow>
|
|
</ExampleSection>
|
|
|
|
<ExampleSection title="Sizes">
|
|
<ButtonRow>
|
|
<Button intent="primary" size="small">Small Primary</Button>
|
|
<Button intent="secondary" size="small">Small Secondary</Button>
|
|
<Button intent="danger" size="large">Large Danger</Button>
|
|
<Button intent="ghost" size="large">Large Ghost</Button>
|
|
</ButtonRow>
|
|
</ExampleSection>
|
|
|
|
<ExampleSection title="Disabled">
|
|
<ButtonRow>
|
|
<Button disabled>Default Disabled</Button>
|
|
<Button intent="primary" disabled>Primary Disabled</Button>
|
|
<Button intent="secondary" disabled>Secondary Disabled</Button>
|
|
<Button intent="danger" disabled>Danger Disabled</Button>
|
|
<Button intent="ghost" disabled>Ghost Disabled</Button>
|
|
</ButtonRow>
|
|
</ExampleSection>
|
|
</>
|
|
)
|