diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 8fa8716..6415102 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -18,7 +18,7 @@ "@storybook/addon-interactions": "^8.2.5", "@storybook/addon-links": "^8.2.5", "@storybook/addon-onboarding": "^8.2.5", - "@storybook/addon-themes": "^8.2.6", + "@storybook/addon-themes": "^8.2.5", "@storybook/blocks": "^8.2.5", "@storybook/react": "^8.2.5", "@storybook/react-vite": "^8.2.5", diff --git a/apps/storybook/src/stories/button/Button.mdx b/apps/storybook/src/stories/button/Button.mdx index c8480e2..5ddd7d5 100644 --- a/apps/storybook/src/stories/button/Button.mdx +++ b/apps/storybook/src/stories/button/Button.mdx @@ -47,7 +47,7 @@ There are 3 sizes: `sm`, `md` and `lg`. source={{ format: true, code: ` -
+ @@ -57,7 +57,7 @@ There are 3 sizes: `sm`, `md` and `lg`. -
+ `, }} /> @@ -66,12 +66,14 @@ There are 3 sizes: `sm`, `md` and `lg`. There are 3 types: `solid`, `outline` and `link`. +(The link style has not been implemented yet.) + + @@ -81,7 +83,7 @@ There are 3 types: `solid`, `outline` and `link`. - + `, }} /> @@ -95,11 +97,9 @@ By using the `disabled` prop, you can quickly and easily convey to your users th source={{ format: true, code: ` -
-
`, }} /> @@ -113,11 +113,27 @@ Use the defined color codes in the system to change the background for the butto source={{ format: true, code: ` -
-
+ `, + }} +/> + +### [Renders as a link](#button-asChild) + +Use the `asChild` prop to render the button as a link. + + + + Yorkie UI + + `, }} /> diff --git a/apps/storybook/src/stories/button/Button.stories.tsx b/apps/storybook/src/stories/button/Button.stories.tsx index 0e6aea5..eed9216 100644 --- a/apps/storybook/src/stories/button/Button.stories.tsx +++ b/apps/storybook/src/stories/button/Button.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Button } from '@yorkie-ui/core'; +import { Button, Flex } from '@yorkie-ui/core'; const meta = { title: 'COMPONENTS / Button', component: Button, @@ -39,7 +39,23 @@ const meta = { }, colorPalette: { control: { type: 'radio' }, - options: ['accent', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'gray', 'white', 'transparent'], + options: [ + 'accent', + 'neutral', + 'success', + 'info', + 'warning', + 'danger', + 'red', + 'orange', + 'yellow', + 'green', + 'blue', + 'purple', + 'gray', + 'white', + 'transparent', + ], description: 'Apply a predefined color palette to the button', table: { defaultValue: { summary: 'accent' }, @@ -69,7 +85,7 @@ export const Basic: Story = { export const Sizes: Story = { render: (args) => { return ( - <> + @@ -79,7 +95,7 @@ export const Sizes: Story = { - + ); }, }; @@ -87,7 +103,7 @@ export const Sizes: Story = { export const Variant: Story = { render: (args) => { return ( - <> + @@ -97,7 +113,7 @@ export const Variant: Story = { - + ); }, }; @@ -125,3 +141,17 @@ export const ColorPalette: Story = { ); }, }; + +export const AsChild: Story = { + render: (args) => { + return ( + <> + + + ); + }, +}; diff --git a/apps/storybook/src/stories/flex/Flex.mdx b/apps/storybook/src/stories/flex/Flex.mdx new file mode 100644 index 0000000..a4a9d81 --- /dev/null +++ b/apps/storybook/src/stories/flex/Flex.mdx @@ -0,0 +1,36 @@ +# Flex + +import { Controls, Canvas, Meta } from '@storybook/blocks'; +import * as FlexStories from './Flex.stories'; + + + +- [Import](#import) +- [Overview](#overview) +- [Props](#props) + +## Import + +```jsx +import { Flex } from 'yorkie-ui'; +``` + +## Overview + + + + + + + `, + }} +/> + +## Props + + diff --git a/apps/storybook/src/stories/flex/Flex.stories.tsx b/apps/storybook/src/stories/flex/Flex.stories.tsx new file mode 100644 index 0000000..d3e30eb --- /dev/null +++ b/apps/storybook/src/stories/flex/Flex.stories.tsx @@ -0,0 +1,62 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Flex, Button } from '@yorkie-ui/core'; + +const propertyHorizontal = ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']; +const propertyVertical = ['flex-start', 'flex-end', 'center', 'baseline', 'stretch']; + +const meta = { + title: 'LAYOUT / Flex', + component: Flex, + argTypes: { + direction: { + options: ['row', 'row-reverse', 'column', 'column-reverse'], + control: { type: 'radio' }, + description: 'The direction of the flex container.', + }, + justifyContent: { + options: propertyHorizontal, + mapping: propertyHorizontal, + control: { + type: 'radio', + labels: propertyHorizontal, + }, + description: 'Used to align child elements along the main axis of the container.', + }, + alignItems: { + options: propertyVertical, + mapping: propertyVertical, + control: { + type: 'radio', + labels: propertyVertical, + }, + description: 'Used to align child elements along the main axis of the container.', + }, + gap: { + control: { type: 'number' }, + description: 'Controlling the gutters between grid and flexbox items.', + }, + }, + args: { + direction: 'row', + gap: '0', + justifyContent: 'flex-start', + alignItems: 'stretch', + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Overview: Story = { + render: (args) => { + return ( + + + + + + + ); + }, +}; diff --git a/packages/core/panda.config.ts b/packages/core/panda.config.ts index 6fe0617..4218c3d 100644 --- a/packages/core/panda.config.ts +++ b/packages/core/panda.config.ts @@ -21,6 +21,54 @@ export default defineConfig({ colorPalette: ['*'], }, }, + { + properties: { + hideFrom: ['*'], + hideBelow: ['*'], + }, + }, + { + properties: { + display: ['none', 'inline', 'block', 'flex', 'inline-block', 'inline-flex'], + flex: ['*', '1', '2', '3', '4'], + flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'], + flexWrap: ['nowrap', 'wrap', 'wrap-reverse'], + gap: ['*'], + justifyContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'], + alignItems: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'], + order: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], + }, + responsive: true, + }, + { + properties: { + zIndex: ['*'], + position: ['relative', 'absolute', 'fixed', 'sticky', 'scroll'], + top: ['*'], + left: ['*'], + right: ['*'], + bottom: ['*'], + }, + responsive: true, + }, + { + properties: { + width: ['*'], + minWidth: ['*'], + height: ['*'], + minHeight: ['*'], + marginTop: ['*'], + marginBottom: ['*'], + marginLeft: ['*'], + marginRight: ['*'], + marginX: ['*'], + paddingTop: ['*'], + paddingBottom: ['*'], + paddingLeft: ['*'], + paddingRight: ['*'], + }, + responsive: true, + }, ], }, minify: true, diff --git a/packages/core/panda/theme/breakpoints.ts b/packages/core/panda/theme/breakpoints.ts index 58abc73..5bd960a 100644 --- a/packages/core/panda/theme/breakpoints.ts +++ b/packages/core/panda/theme/breakpoints.ts @@ -1,7 +1,6 @@ export const breakpoints = { sm: '640px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', -} + md: '1024px', + lg: '1280px', + xl: '1920px', +}; diff --git a/packages/core/panda/theme/semantic-tokens/colors.ts b/packages/core/panda/theme/semantic-tokens/colors.ts new file mode 100644 index 0000000..6f2f108 --- /dev/null +++ b/packages/core/panda/theme/semantic-tokens/colors.ts @@ -0,0 +1,420 @@ +import { defineSemanticTokens } from '@pandacss/dev'; + +export const colors = defineSemanticTokens.colors({ + gray: { + '000': { + value: { base: '{colors.Primitives.Gray.000}', _dark: '{colors.Primitives.Gray.900}' }, + }, + '050': { + value: { base: '{colors.Primitives.Gray.050}', _dark: '{colors.Primitives.Gray.800}' }, + }, + '100': { + value: { base: '{colors.Primitives.Gray.100}', _dark: '{colors.Primitives.Gray.700}' }, + }, + '200': { + value: { base: '{colors.Primitives.Gray.200}', _dark: '{colors.Primitives.Gray.600}' }, + }, + '300': { + value: { base: '{colors.Primitives.Gray.300}', _dark: '{colors.Primitives.Gray.500}' }, + }, + '400': { + value: { base: '{colors.Primitives.Gray.400}', _dark: '{colors.Primitives.Gray.400}' }, + }, + '500': { + value: { base: '{colors.Primitives.Gray.500}', _dark: '{colors.Primitives.Gray.300}' }, + }, + '600': { + value: { base: '{colors.Primitives.Gray.600}', _dark: '{colors.Primitives.Gray.200}' }, + }, + '700': { + value: { base: '{colors.Primitives.Gray.700}', _dark: '{colors.Primitives.Gray.100}' }, + }, + '800': { + value: { base: '{colors.Primitives.Gray.800}', _dark: '{colors.Primitives.Gray.050}' }, + }, + '900': { + value: { base: '{colors.Primitives.Gray.900}', _dark: '{colors.Primitives.Gray.000}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, + alpha: { value: { base: '{colors.gray.050}', _dark: '{colors.gray.050}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.gray.900}', _dark: '{colors.gray.900}' } }, + alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, + alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, + }, + }, + red: { + '400': { + value: { base: '{colors.Primitives.Red.400}', _dark: '{colors.Primitives.Red.800}' }, + }, + '600': { + value: { base: '{colors.Primitives.Red.600}', _dark: '{colors.Primitives.Red.600}' }, + }, + '800': { + value: { base: '{colors.Primitives.Red.800}', _dark: '{colors.Primitives.Red.400}' }, + }, + A800: { + value: { base: '{colors.Primitives.Red.A800}', _dark: '{colors.Primitives.Red.A400}' }, + }, + A600: { + value: { base: '{colors.Primitives.Red.A600}', _dark: '{colors.Primitives.Red.A600}' }, + }, + A400: { + value: { base: '{colors.Primitives.Red.A400}', _dark: '{colors.Primitives.Red.A800}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, + alpha: { value: { base: '{colors.red.A400}', _dark: '{colors.red.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.red.800}', _dark: '{colors.red.800}' } }, + alpha: { value: { base: '{colors.red.A600}', _dark: '{colors.red.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.red.800}', _dark: '{colors.red.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, + alpha: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, + }, + }, + orange: { + '400': { + value: { base: '{colors.Primitives.Orange.400}', _dark: '{colors.Primitives.Orange.800}' }, + }, + '600': { + value: { base: '{colors.Primitives.Orange.600}', _dark: '{colors.Primitives.Orange.600}' }, + }, + '800': { + value: { base: '{colors.Primitives.Orange.800}', _dark: '{colors.Primitives.Orange.400}' }, + }, + A800: { + value: { base: '{colors.Primitives.Orange.A800}', _dark: '{colors.Primitives.Orange.A400}' }, + }, + A600: { + value: { base: '{colors.Primitives.Orange.A600}', _dark: '{colors.Primitives.Orange.A600}' }, + }, + A400: { + value: { base: '{colors.Primitives.Orange.A400}', _dark: '{colors.Primitives.Orange.A800}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, + alpha: { value: { base: '{colors.orange.A400}', _dark: '{colors.orange.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, + alpha: { value: { base: '{colors.orange.A600}', _dark: '{colors.orange.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, + alpha: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, + }, + }, + yellow: { + '400': { + value: { base: '{colors.Primitives.Yellow.400}', _dark: '{colors.Primitives.Yellow.800}' }, + }, + '600': { + value: { base: '{colors.Primitives.Yellow.600}', _dark: '{colors.Primitives.Yellow.600}' }, + }, + '800': { + value: { base: '{colors.Primitives.Yellow.800}', _dark: '{colors.Primitives.Yellow.400}' }, + }, + A800: { + value: { base: '{colors.Primitives.Yellow.A800}', _dark: '{colors.Primitives.Yellow.A400}' }, + }, + A600: { + value: { base: '{colors.Primitives.Yellow.A600}', _dark: '{colors.Primitives.Yellow.A600}' }, + }, + A400: { + value: { base: '{colors.Primitives.Yellow.A400}', _dark: '{colors.Primitives.Yellow.A800}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, + alpha: { value: { base: '{colors.yellow.A400}', _dark: '{colors.yellow.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.yellow.800}', _dark: '{colors.yellow.800}' } }, + alpha: { value: { base: '{colors.yellow.A600}', _dark: '{colors.yellow.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.yellow.800}', _dark: '{colors.yellow.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, + alpha: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, + }, + }, + green: { + '400': { + value: { base: '{colors.Primitives.Green.400}', _dark: '{colors.Primitives.Green.800}' }, + }, + '600': { + value: { base: '{colors.Primitives.Green.600}', _dark: '{colors.Primitives.Green.600}' }, + }, + '800': { + value: { base: '{colors.Primitives.Green.800}', _dark: '{colors.Primitives.Green.400}' }, + }, + A800: { + value: { base: '{colors.Primitives.Green.A800}', _dark: '{colors.Primitives.Green.A400}' }, + }, + A600: { + value: { base: '{colors.Primitives.Green.A600}', _dark: '{colors.Primitives.Green.A600}' }, + }, + A400: { + value: { base: '{colors.Primitives.Green.A400}', _dark: '{colors.Primitives.Green.A800}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, + alpha: { value: { base: '{colors.green.A400}', _dark: '{colors.green.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.green.800}', _dark: '{colors.green.800}' } }, + alpha: { value: { base: '{colors.green.A600}', _dark: '{colors.green.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.green.800}', _dark: '{colors.green.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, + alpha: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, + }, + }, + blue: { + '400': { + value: { base: '{colors.Primitives.Blue.400}', _dark: '{colors.Primitives.Blue.800}' }, + }, + '600': { + value: { base: '{colors.Primitives.Blue.600}', _dark: '{colors.Primitives.Blue.600}' }, + }, + '800': { + value: { base: '{colors.Primitives.Blue.800}', _dark: '{colors.Primitives.Blue.400}' }, + }, + A800: { + value: { base: '{colors.Primitives.Blue.A800}', _dark: '{colors.Primitives.Blue.A400}' }, + }, + A600: { + value: { base: '{colors.Primitives.Blue.A600}', _dark: '{colors.Primitives.Blue.A600}' }, + }, + A400: { + value: { base: '{colors.Primitives.Blue.A400}', _dark: '{colors.Primitives.Blue.A800}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, + alpha: { value: { base: '{colors.blue.A400}', _dark: '{colors.blue.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.blue.800}', _dark: '{colors.blue.800}' } }, + alpha: { value: { base: '{colors.blue.A600}', _dark: '{colors.blue.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.blue.800}', _dark: '{colors.blue.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, + alpha: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, + }, + }, + purple: { + '400': { + value: { base: '{colors.Primitives.Purple.400}', _dark: '{colors.Primitives.Purple.800}' }, + }, + '600': { + value: { base: '{colors.Primitives.Purple.600}', _dark: '{colors.Primitives.Purple.600}' }, + }, + '800': { + value: { base: '{colors.Primitives.Purple.800}', _dark: '{colors.Primitives.Purple.400}' }, + }, + A800: { + value: { base: '{colors.Primitives.Purple.A800}', _dark: '{colors.Primitives.Purple.A400}' }, + }, + A600: { + value: { base: '{colors.Primitives.Purple.A600}', _dark: '{colors.Primitives.Purple.A600}' }, + }, + A400: { + value: { base: '{colors.Primitives.Purple.A400}', _dark: '{colors.Primitives.Purple.A800}' }, + }, + default: { + DEFAULT: { value: { base: '{colors.purple.600}', _dark: '{colors.purple.600}' } }, + alpha: { value: { base: '{colors.purple.A400}', _dark: '{colors.purple.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.purple.800}', _dark: '{colors.purple.800}' } }, + alpha: { value: { base: '{colors.purple.A600}', _dark: '{colors.purple.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.purple.800}', _dark: '{colors.purple.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.purple.600}', _dark: '{colors.purple.600}' } }, + alpha: { value: { base: '{colors.purple.600}', _dark: '{colors.purple.600}' } }, + }, + }, + white: { + default: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, + alpha: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, + }, + }, + transparent: { + default: { + DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } }, + alpha: { value: { base: 'transparent', _dark: 'transparent' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, + alpha: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, + }, + }, + disabled: { + default: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + fg: { value: { base: '{colors.gray.300}', _dark: '{colors.gray.300}' } }, + border: { value: { base: '{colors.gray.300}', _dark: '{colors.gray.300}' } }, + }, + accent: { + default: { + DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, + alpha: { value: { base: '{colors.orange.A400}', _dark: '{colors.orange.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, + alpha: { value: { base: '{colors.orange.A600}', _dark: '{colors.orange.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, + alpha: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, + }, + }, + neutral: { + default: { + DEFAULT: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, + alpha: { value: { base: '{colors.gray.050}', _dark: '{colors.gray.050}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.gray.900}', _dark: '{colors.gray.900}' } }, + alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, + alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, + }, + }, + success: { + default: { + DEFAULT: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, + alpha: { value: { base: '{colors.green.A400}', _dark: '{colors.green.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.green.800}', _dark: '{colors.green.800}' } }, + alpha: { value: { base: '{colors.green.A600}', _dark: '{colors.green.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.green.800}', _dark: '{colors.green.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, + alpha: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, + }, + }, + info: { + default: { + DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, + alpha: { value: { base: '{colors.blue.A400}', _dark: '{colors.blue.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.blue.800}', _dark: '{colors.blue.800}' } }, + alpha: { value: { base: '{colors.blue.A600}', _dark: '{colors.blue.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.blue.800}', _dark: '{colors.blue.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, + alpha: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, + }, + }, + warning: { + default: { + DEFAULT: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, + alpha: { value: { base: '{colors.yellow.A400}', _dark: '{colors.yellow.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.yellow.800}', _dark: '{colors.yellow.800}' } }, + alpha: { value: { base: '{colors.yellow.A600}', _dark: '{colors.yellow.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.yellow.800}', _dark: '{colors.yellow.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, + alpha: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, + }, + }, + danger: { + default: { + DEFAULT: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, + alpha: { value: { base: '{colors.red.A400}', _dark: '{colors.red.A400}' } }, + }, + emphasized: { + DEFAULT: { value: { base: '{colors.red.800}', _dark: '{colors.red.800}' } }, + alpha: { value: { base: '{colors.red.A600}', _dark: '{colors.red.A600}' } }, + }, + fg: { + DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, + alpha: { value: { base: '{colors.red.800}', _dark: '{colors.red.800}' } }, + }, + border: { + DEFAULT: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, + alpha: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, + }, + }, +}); diff --git a/packages/core/panda/theme/semantic-tokens/index.ts b/packages/core/panda/theme/semantic-tokens/index.ts index dfaa095..6a114ee 100644 --- a/packages/core/panda/theme/semantic-tokens/index.ts +++ b/packages/core/panda/theme/semantic-tokens/index.ts @@ -1,359 +1,10 @@ import { defineSemanticTokens } from '@pandacss/dev'; import { shadows } from './shadows'; +import { colors } from './colors'; export const createSemanticTokens = () => { return defineSemanticTokens({ - colors: { - gray: { - '000': { - value: { base: '{colors.Primitives.Gray.000}', _dark: '{colors.Primitives.Gray.900}' }, - }, - '050': { - value: { base: '{colors.Primitives.Gray.050}', _dark: '{colors.Primitives.Gray.800}' }, - }, - '100': { - value: { base: '{colors.Primitives.Gray.100}', _dark: '{colors.Primitives.Gray.700}' }, - }, - '200': { - value: { base: '{colors.Primitives.Gray.200}', _dark: '{colors.Primitives.Gray.600}' }, - }, - '300': { - value: { base: '{colors.Primitives.Gray.300}', _dark: '{colors.Primitives.Gray.500}' }, - }, - '400': { - value: { base: '{colors.Primitives.Gray.400}', _dark: '{colors.Primitives.Gray.400}' }, - }, - '500': { - value: { base: '{colors.Primitives.Gray.500}', _dark: '{colors.Primitives.Gray.300}' }, - }, - '600': { - value: { base: '{colors.Primitives.Gray.600}', _dark: '{colors.Primitives.Gray.200}' }, - }, - '700': { - value: { base: '{colors.Primitives.Gray.700}', _dark: '{colors.Primitives.Gray.100}' }, - }, - '800': { - value: { base: '{colors.Primitives.Gray.800}', _dark: '{colors.Primitives.Gray.050}' }, - }, - '900': { - value: { base: '{colors.Primitives.Gray.900}', _dark: '{colors.Primitives.Gray.000}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, - alpha: { value: { base: '{colors.gray.050}', _dark: '{colors.gray.050}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.gray.900}', _dark: '{colors.gray.900}' } }, - alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.gray.800}', _dark: '{colors.gray.800}' } }, - alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, - }, - }, - red: { - '400': { - value: { base: '{colors.Primitives.Red.400}', _dark: '{colors.Primitives.Red.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Red.600}', _dark: '{colors.Primitives.Red.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Red.800}', _dark: '{colors.Primitives.Red.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Red.A800}', _dark: '{colors.Primitives.Red.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Red.A600}', _dark: '{colors.Primitives.Red.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Red.A400}', _dark: '{colors.Primitives.Red.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, - alpha: { value: { base: '{colors.red.A400}', _dark: '{colors.red.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.red.800}', _dark: '{colors.red.800}' } }, - alpha: { value: { base: '{colors.red.A600}', _dark: '{colors.red.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.red.800}', _dark: '{colors.red.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, - alpha: { value: { base: '{colors.red.600}', _dark: '{colors.red.600}' } }, - }, - }, - orange: { - '400': { - value: { base: '{colors.Primitives.Orange.400}', _dark: '{colors.Primitives.Orange.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Orange.600}', _dark: '{colors.Primitives.Orange.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Orange.800}', _dark: '{colors.Primitives.Orange.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Orange.A800}', _dark: '{colors.Primitives.Orange.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Orange.A600}', _dark: '{colors.Primitives.Orange.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Orange.A400}', _dark: '{colors.Primitives.Orange.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, - alpha: { value: { base: '{colors.orange.A400}', _dark: '{colors.orange.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, - alpha: { value: { base: '{colors.orange.A600}', _dark: '{colors.orange.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, - alpha: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, - }, - }, - yellow: { - '400': { - value: { base: '{colors.Primitives.Yellow.400}', _dark: '{colors.Primitives.Yellow.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Yellow.600}', _dark: '{colors.Primitives.Yellow.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Yellow.800}', _dark: '{colors.Primitives.Yellow.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Yellow.A800}', _dark: '{colors.Primitives.Yellow.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Yellow.A600}', _dark: '{colors.Primitives.Yellow.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Yellow.A400}', _dark: '{colors.Primitives.Yellow.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, - alpha: { value: { base: '{colors.yellow.A400}', _dark: '{colors.yellow.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.yellow.800}', _dark: '{colors.yellow.800}' } }, - alpha: { value: { base: '{colors.yellow.A600}', _dark: '{colors.yellow.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.yellow.800}', _dark: '{colors.yellow.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, - alpha: { value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.600}' } }, - }, - }, - green: { - '400': { - value: { base: '{colors.Primitives.Green.400}', _dark: '{colors.Primitives.Green.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Green.600}', _dark: '{colors.Primitives.Green.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Green.800}', _dark: '{colors.Primitives.Green.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Green.A800}', _dark: '{colors.Primitives.Green.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Green.A600}', _dark: '{colors.Primitives.Green.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Green.A400}', _dark: '{colors.Primitives.Green.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, - alpha: { value: { base: '{colors.green.A400}', _dark: '{colors.green.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.green.800}', _dark: '{colors.green.800}' } }, - alpha: { value: { base: '{colors.green.A600}', _dark: '{colors.green.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.green.800}', _dark: '{colors.green.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, - alpha: { value: { base: '{colors.green.600}', _dark: '{colors.green.600}' } }, - }, - }, - blue: { - '400': { - value: { base: '{colors.Primitives.Blue.400}', _dark: '{colors.Primitives.Blue.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Blue.600}', _dark: '{colors.Primitives.Blue.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Blue.800}', _dark: '{colors.Primitives.Blue.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Blue.A800}', _dark: '{colors.Primitives.Blue.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Blue.A600}', _dark: '{colors.Primitives.Blue.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Blue.A400}', _dark: '{colors.Primitives.Blue.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, - alpha: { value: { base: '{colors.blue.A400}', _dark: '{colors.blue.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.blue.800}', _dark: '{colors.blue.800}' } }, - alpha: { value: { base: '{colors.blue.A600}', _dark: '{colors.blue.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.blue.800}', _dark: '{colors.blue.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, - alpha: { value: { base: '{colors.blue.600}', _dark: '{colors.blue.600}' } }, - }, - }, - purple: { - '400': { - value: { base: '{colors.Primitives.Purple.400}', _dark: '{colors.Primitives.Purple.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Purple.600}', _dark: '{colors.Primitives.Purple.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Purple.800}', _dark: '{colors.Primitives.Purple.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Purple.A800}', _dark: '{colors.Primitives.Purple.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Purple.A600}', _dark: '{colors.Primitives.Purple.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Purple.A400}', _dark: '{colors.Primitives.Purple.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.purple.600}', _dark: '{colors.purple.600}' } }, - alpha: { value: { base: '{colors.purple.A400}', _dark: '{colors.purple.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.purple.800}', _dark: '{colors.purple.800}' } }, - alpha: { value: { base: '{colors.purple.A600}', _dark: '{colors.purple.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.purple.800}', _dark: '{colors.purple.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.purple.600}', _dark: '{colors.purple.600}' } }, - alpha: { value: { base: '{colors.purple.600}', _dark: '{colors.purple.600}' } }, - }, - }, - white: { - default: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, - alpha: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, - }, - }, - transparent: { - default: { - DEFAULT: { value: { base: 'transparent', _dark: 'transparent' } }, - alpha: { value: { base: 'transparent', _dark: 'transparent' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - alpha: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, - alpha: { value: { base: '{colors.gray.600}', _dark: '{colors.gray.600}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - alpha: { value: { base: '{colors.gray.400}', _dark: '{colors.gray.400}' } }, - }, - }, - disabled: { - default: { value: { base: '{colors.gray.100}', _dark: '{colors.gray.100}' } }, - fg: { value: { base: '{colors.gray.300}', _dark: '{colors.gray.300}' } }, - border: { value: { base: '{colors.gray.300}', _dark: '{colors.gray.300}' } }, - }, - accent: { - '400': { - value: { base: '{colors.Primitives.Orange.400}', _dark: '{colors.Primitives.Orange.800}' }, - }, - '600': { - value: { base: '{colors.Primitives.Orange.600}', _dark: '{colors.Primitives.Orange.600}' }, - }, - '800': { - value: { base: '{colors.Primitives.Orange.800}', _dark: '{colors.Primitives.Orange.400}' }, - }, - A800: { - value: { base: '{colors.Primitives.Orange.A800}', _dark: '{colors.Primitives.Orange.A400}' }, - }, - A600: { - value: { base: '{colors.Primitives.Orange.A600}', _dark: '{colors.Primitives.Orange.A600}' }, - }, - A400: { - value: { base: '{colors.Primitives.Orange.A400}', _dark: '{colors.Primitives.Orange.A800}' }, - }, - default: { - DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, - alpha: { value: { base: '{colors.orange.A400}', _dark: '{colors.orange.A400}' } }, - }, - emphasized: { - DEFAULT: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, - alpha: { value: { base: '{colors.orange.A600}', _dark: '{colors.orange.A600}' } }, - }, - fg: { - DEFAULT: { value: { base: '{colors.gray.000}', _dark: '{colors.gray.000}' } }, - alpha: { value: { base: '{colors.orange.800}', _dark: '{colors.orange.800}' } }, - }, - border: { - DEFAULT: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, - alpha: { value: { base: '{colors.orange.600}', _dark: '{colors.orange.600}' } }, - }, - }, - logo: { - yellow: { value: { base: '{colors.Primitives.Yellow.600}', _dark: '{colors.Primitives.Yellow.600}' } }, - gray: { value: { base: '{colors.Primitives.Gray.800}', _dark: '{colors.Primitives.Gray.800}' } }, - text: { Gray: { value: { base: '{colors.Primitives.Gray.900}', _dark: '{colors.Primitives.Gray.000}' } } }, - }, - }, + colors, shadows, }); }; diff --git a/packages/core/panda/theme/semantic-tokens/shadows.ts b/packages/core/panda/theme/semantic-tokens/shadows.ts index 38d4c74..6ad2823 100644 --- a/packages/core/panda/theme/semantic-tokens/shadows.ts +++ b/packages/core/panda/theme/semantic-tokens/shadows.ts @@ -1,40 +1,3 @@ import { defineSemanticTokens } from '@pandacss/dev'; -export const shadows = defineSemanticTokens.shadows({ - // xs: { - // value: { - // base: '0px 1px 2px {colors.gray.a5}, 0px 0px 1px {colors.gray.a7}', - // _dark: '0px 1px 1px {colors.black.a12}, 0px 0px 1px inset {colors.gray.a7}', - // }, - // }, - // sm: { - // value: { - // base: '0px 2px 4px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', - // _dark: '0px 2px 4px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', - // }, - // }, - // md: { - // value: { - // base: '0px 4px 8px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', - // _dark: '0px 4px 8px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', - // }, - // }, - // lg: { - // value: { - // base: '0px 8px 16px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', - // _dark: '0px 8px 16px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', - // }, - // }, - // xl: { - // value: { - // base: '0px 16px 24px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', - // _dark: '0px 16px 24px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', - // }, - // }, - // '2xl': { - // value: { - // base: '0px 24px 40px {colors.gray.a3}, 0px 0px 1px {colors.gray.a7}', - // _dark: '0px 24px 40px {colors.black.a10}, 0px 0px 1px inset {colors.gray.a7}', - // }, - // }, -}); +export const shadows = defineSemanticTokens.shadows({}); diff --git a/packages/core/panda/theme/tokens/z-index.ts b/packages/core/panda/theme/tokens/z-index.ts index cdc37e6..eb51f98 100644 --- a/packages/core/panda/theme/tokens/z-index.ts +++ b/packages/core/panda/theme/tokens/z-index.ts @@ -1,4 +1,4 @@ -import { defineTokens } from '@pandacss/dev' +import { defineTokens } from '@pandacss/dev'; export const zIndex = defineTokens.zIndex({ hide: { @@ -7,6 +7,9 @@ export const zIndex = defineTokens.zIndex({ base: { value: 0, }, + float: { + value: 1, + }, docked: { value: 10, }, @@ -37,4 +40,4 @@ export const zIndex = defineTokens.zIndex({ tooltip: { value: 1800, }, -}) +}); diff --git a/packages/core/src/button/Button.tsx b/packages/core/src/button/Button.tsx index b167a4c..8d1130b 100644 --- a/packages/core/src/button/Button.tsx +++ b/packages/core/src/button/Button.tsx @@ -1,9 +1,11 @@ import { ark } from '@ark-ui/react'; -import { ButtonVariantProps, button } from '../../styled-system/recipes'; -import { styled, HTMLStyledProps } from '../../styled-system/jsx'; +import { button } from '../../styled-system/recipes'; +import { styled } from '../../styled-system/jsx'; +import type { ComponentProps } from '../../styled-system/types'; + import { forwardRef } from 'react'; -export type ButtonProps = HTMLStyledProps<'button'> & ButtonVariantProps; +export type ButtonProps = ComponentProps; const StyledButton = styled(ark.button, button); diff --git a/packages/core/src/flex/Flex.tsx b/packages/core/src/flex/Flex.tsx new file mode 100644 index 0000000..255bdbf --- /dev/null +++ b/packages/core/src/flex/Flex.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from 'react'; +import { styled, type HTMLStyledProps } from '../../styled-system/jsx'; +import { flex, FlexProperties } from '../../styled-system/patterns'; + +export type FlexProps = HTMLStyledProps<'div'> & FlexProperties; + +export const Flex = forwardRef((props: FlexProps, ref) => { + const { align, justify, direction, wrap, basis, grow, shrink, className = '', ...rest } = props; + return ( + + ); +}); diff --git a/packages/core/src/flex/index.ts b/packages/core/src/flex/index.ts new file mode 100644 index 0000000..b393c34 --- /dev/null +++ b/packages/core/src/flex/index.ts @@ -0,0 +1,3 @@ +import { Flex } from './Flex'; + +export { Flex }; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index eaf5eea..7ef61cc 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1 +1,2 @@ export * from './button'; +export * from './flex'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3852417..f3e4b54 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,7 +30,7 @@ importers: specifier: ^8.2.5 version: 8.2.5(react@18.3.1)(storybook@8.2.5(@babel/preset-env@7.24.8(@babel/core@7.24.9))) '@storybook/addon-themes': - specifier: ^8.2.6 + specifier: ^8.2.5 version: 8.2.6(storybook@8.2.5(@babel/preset-env@7.24.8(@babel/core@7.24.9))) '@storybook/blocks': specifier: ^8.2.5 @@ -8383,7 +8383,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -8407,7 +8407,7 @@ snapshots: enhanced-resolve: 5.17.0 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -8429,7 +8429,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5