daleui 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "daleui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "repository": "github:DaleStudy/daleui",
   "license": "MIT",
@@ -28,40 +28,40 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "axe-playwright": "^2.0.3",
     "chromatic": "^11.25.1",
-    "lucide-react": "^0.474.0",
+    "lucide-react": "^0.486.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@eslint/js": "^9.19.0",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.23.0",
     "@faker-js/faker": "^9.4.0",
-    "@pandacss/dev": "^0.51.1",
-    "@storybook/addon-a11y": "^8.5.2",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
-    "@storybook/addon-links": "^8.5.2",
-    "@storybook/addon-themes": "^8.5.2",
-    "@storybook/blocks": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-vite": "^8.5.2",
-    "@storybook/test": "^8.5.2",
-    "@storybook/test-runner": "^0.21.0",
+    "@pandacss/dev": "^0.53.3",
+    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-links": "^8.6.11",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-vite": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/test-runner": "^0.22.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.19.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "eslint-plugin-storybook": "^0.11.2",
-    "globals": "^15.14.0",
-    "happy-dom": "^16.7.3",
-    "storybook": "^8.5.2",
+    "globals": "^16.0.0",
+    "happy-dom": "^17.4.4",
+    "storybook": "^8.6.11",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.22.0",
+    "typescript-eslint": "^8.28.0",
     "vite": "^6.0.11",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.4"

package/panda.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "@pandacss/dev";
 import { globalCss } from "./src/styles/globalCss";
 import { colors, semanticColors } from "./src/tokens/colors";
+import { spacing, semanticSpacing } from "./src/tokens/spacing";
 import {
   textStyles,
   fonts,
@@ -49,9 +50,11 @@ export default defineConfig({
         fontSizes,
         letterSpacings,
         lineHeights,
+        spacing,
       },
       semanticTokens: {
         colors: semanticColors,
+        spacing: semanticSpacing,
       },
     },
   },

package/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ export const Basic: StoryObj<typeof Button> = {};
 export const Variants: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} variant="solid">
           솔리드 버튼
         </Button>
@@ -41,7 +41,7 @@ export const Variants: StoryObj<typeof Button> = {
 export const Tones: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} tone="neutral">
           중립 색조
         </Button>
@@ -70,7 +70,7 @@ export const Tones: StoryObj<typeof Button> = {
 export const Sizes: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} size="sm">
           작은 버튼
         </Button>
@@ -96,7 +96,7 @@ export const Sizes: StoryObj<typeof Button> = {
 export const Disabled: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} disabled>
           비활성화 버튼
         </Button>

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { type HTMLAttributes } from "react";
-import { css, cva } from "../../../styled-system/css";
+import { cva } from "../../../styled-system/css";
 import type { Tone } from "../../tokens/colors";
 
 type ButtonVariant = "solid" | "outline";
@@ -42,7 +42,7 @@ export const Button = ({
 }: ButtonProps) => {
   return (
     <button
-      className={css(styles.raw({ tone, variant, size }), baseStyles)}
+      className={styles({ tone, variant, size })}
       type={type}
       onClick={onClick}
       disabled={disabled}
@@ -53,43 +53,42 @@ export const Button = ({
   );
 };
 
-const baseStyles = {
-  appearance: "none",
-  margin: "0",
-  fontWeight: 500,
-  textAlign: "center",
-  textDecoration: "none",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: ["auto", "100%"],
-  borderRadius: "10px",
-  cursor: "pointer",
-  transition: "0.2s",
-  lineHeight: "1",
-  outline: "0",
-  "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed",
-  },
-};
-
 const styles = cva({
   base: {
-    padding: "0.7rem 3rem",
+    appearance: "none",
+    margin: "0",
+    fontWeight: 500,
+    textAlign: "center",
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: ["auto", "100%"],
+    borderRadius: "10px",
+    cursor: "pointer",
+    transition: "0.2s",
+    lineHeight: "1",
+    outline: "0",
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
   },
   variants: {
     size: {
       sm: {
-        padding: "0.5rem 1.5rem",
+        px: "px.sm",
+        py: "py.sm",
         fontSize: "sm",
       },
       md: {
-        padding: "0.7rem 2rem",
+        px: "px.md",
+        py: "py.md",
         fontSize: "md",
       },
       lg: {
-        padding: "1rem 2.5rem",
+        px: "px.lg",
+        py: "py.lg",
         fontSize: "lg",
       },
     },

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -18,7 +18,7 @@ export const Basic: StoryObj<typeof Checkbox> = {};
 export const Tones: StoryObj<typeof Checkbox> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Checkbox {...args} id="neutral" label="중립 색조" tone="neutral" />
         <Checkbox {...args} id="accent" label="강조 색조" tone="accent" />
         <Checkbox {...args} id="danger" label="위험 색조" tone="danger" />
@@ -39,7 +39,7 @@ export const Tones: StoryObj<typeof Checkbox> = {
 export const States: StoryObj<typeof Checkbox> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Checkbox {...args} id="checked" label="체크된 상태" checked={true} />
         <Checkbox
           {...args}
@@ -63,7 +63,7 @@ export const States: StoryObj<typeof Checkbox> = {
 export const Disabled: StoryObj<typeof Checkbox> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Checkbox
           {...args}
           id="disabled-checked"
@@ -94,7 +94,7 @@ export const Disabled: StoryObj<typeof Checkbox> = {
 export const Required: StoryObj<typeof Checkbox> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Checkbox {...args} id="required" label="필수 체크박스" required />
         <Checkbox {...args} id="optional" label="선택 체크박스" />
       </div>
@@ -113,7 +113,7 @@ export const Required: StoryObj<typeof Checkbox> = {
 export const WithValue: StoryObj<typeof Checkbox> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Checkbox
           {...args}
           id="value-example"

package/src/components/Heading/Heading.stories.tsx

@@ -18,7 +18,7 @@ export const Basic: StoryObj<typeof Heading> = {};
 export const Levels: StoryObj<typeof Heading> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Heading {...args} level={1}>
           1 단계
         </Heading>
@@ -53,7 +53,7 @@ export const Levels: StoryObj<typeof Heading> = {
 export const Contrasts: StoryObj<typeof Heading> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Heading {...args} muted>
           낮은 명암비
         </Heading>

package/src/components/Icon/Icon.stories.tsx

@@ -25,7 +25,7 @@ export const Basic: StoryObj<typeof Icon> = {
 export const Sizes: StoryObj<typeof Icon> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Icon {...args} size="xs" />
         <Icon {...args} size="sm" />
         <Icon {...args} size="md" />
@@ -48,7 +48,7 @@ export const Sizes: StoryObj<typeof Icon> = {
 export const Tones: StoryObj<typeof Icon> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Icon {...args} tone="neutral" />
         <Icon {...args} tone="accent" />
         <Icon {...args} tone="danger" />
@@ -69,7 +69,7 @@ export const Tones: StoryObj<typeof Icon> = {
 export const Contrasts: StoryObj<typeof Icon> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Text {...args} muted>
           낮은 <Icon name="moon" /> 명암비
         </Text>

package/src/components/Text/Text.stories.tsx

@@ -17,7 +17,7 @@ export const Basic: StoryObj<typeof Text> = {};
 export const Tones: StoryObj<typeof Text> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Text {...args} tone="neutral">
           중립 색조
         </Text>
@@ -46,7 +46,7 @@ export const Tones: StoryObj<typeof Text> = {
 export const Contrasts: StoryObj<typeof Text> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "6" })}>
+      <div className={vstack({ gap: "gap.md" })}>
         <Text {...args} muted>
           낮은 명암비
         </Text>

package/src/tokens/spacing.ts

@@ -0,0 +1,65 @@
+import type { Tokens, SemanticTokens } from "@pandacss/types";
+
+export const semanticSpacing: SemanticTokens["spacing"] = {
+  px: {
+    sm: {
+      value: "{spacing.6}", // 1.5rem
+    },
+    md: {
+      value: "{spacing.8}", // 2rem
+    },
+    lg: {
+      value: "{spacing.10}", // 2.5rem
+    },
+  },
+  py: {
+    sm: {
+      value: "{spacing.2}", // 0.5rem
+    },
+    md: {
+      value: "{spacing.3}", // 0.75rem
+    },
+    lg: {
+      value: "{spacing.4}", // 1rem
+    },
+  },
+  gap: {
+    sm: {
+      value: "{spacing.4}", // 1rem
+    },
+    md: {
+      value: "{spacing.6}", // 1.5rem
+    },
+    lg: {
+      value: "{spacing.8}", // 2rem
+    },
+  },
+};
+
+export const spacing: Tokens["spacing"] = {
+  0: { value: "0rem" },
+  0.5: { value: "0.125rem" },
+  1: { value: "0.25rem" },
+  1.5: { value: "0.375rem" },
+  2: { value: "0.5rem" },
+  2.5: { value: "0.625rem" },
+  3: { value: "0.75rem" },
+  3.5: { value: "0.875rem" },
+  4: { value: "1rem" },
+  5: { value: "1.25rem" },
+  6: { value: "1.5rem" },
+  7: { value: "1.75rem" },
+  8: { value: "2rem" },
+  9: { value: "2.25rem" },
+  10: { value: "2.5rem" },
+  11: { value: "2.75rem" },
+  12: { value: "3rem" },
+  14: { value: "3.5rem" },
+  16: { value: "4rem" },
+  20: { value: "5rem" },
+  24: { value: "6rem" },
+  28: { value: "7rem" },
+  32: { value: "8rem" },
+  36: { value: "9rem" },
+  40: { value: "10rem" },
+};