daleui 0.0.0 → 0.0.3

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,190 @@
+import React, { type ButtonHTMLAttributes } from "react";
+import { css, cva } from "../../../styled-system/css";
+import type { Tone } from "../../tokens/colors";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+export interface CheckboxProps
+  extends Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    "type" | "onChange" | "checked" | "value" | "required"
+  > {
+  /** 라벨 */
+  label: React.ReactNode;
+  /** 체크박스의 값 */
+  value?: string;
+  /** 색조 */
+  tone?: Tone;
+  /** 체크박스 비활성화 여부 */
+  disabled?: boolean;
+  /** 체크박스 선택 여부 */
+  checked?: boolean;
+  /** 필수 입력 여부 */
+  required?: boolean;
+  /** 변경 이벤트 핸들러 */
+  onChange?: (checked: boolean, value?: string) => void;
+}
+
+/**
+ * - `tone` 속성으로 체크박스의 색상 강조를 지정할 수 있습니다.
+ * - `disabled` 속성을 사용하여 체크박스를 비활성화할 수 있습니다.
+ * - `value` 속성을 통해 체크박스에 값을 지정할 수 있습니다.
+ * - `required` 속성을 사용하여 필수 입력 항목으로 지정할 수 있습니다.
+ */
+export const Checkbox = ({
+  label,
+  value,
+  tone = "neutral",
+  disabled,
+  checked,
+  required,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  return (
+    <label
+      className={css({
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        cursor: "pointer",
+        color: "text",
+      })}
+    >
+      <CheckboxPrimitive.Root
+        checked={checked}
+        required={required}
+        onCheckedChange={(checked) => {
+          onChange?.(checked === true, value);
+        }}
+        disabled={disabled}
+        className={styles({ tone })}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator
+          className={css({
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          })}
+        >
+          <Check size={16} />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {label}
+      {required && <span className={css({ color: "text.danger" })}>*</span>}
+    </label>
+  );
+};
+
+const styles = cva({
+  base: {
+    appearance: "none",
+    margin: "0",
+    backgroundColor: "transparent",
+    border: "3px solid",
+    borderColor: "border",
+    borderRadius: "4px",
+    width: "1.5rem",
+    height: "1.5rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    transition: "0.2s",
+    outline: "none",
+    "&:hover": {
+      backgroundColor: "bg.hover",
+    },
+    "&:focus": {
+      outline: "3px solid",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      "&:hover": {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+  variants: {
+    tone: {
+      neutral: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg",
+          borderColor: "border",
+          color: "text",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg",
+          borderColor: "border",
+        },
+        "&:focus": {
+          outlineColor: "border",
+        },
+      },
+      accent: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg.accent",
+          borderColor: "border.accent",
+          color: "text.accent",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg.accent",
+          borderColor: "border.accent",
+        },
+      },
+      danger: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg.danger",
+          borderColor: "border.danger",
+          color: "text.danger",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg.danger",
+          borderColor: "border.danger",
+        },
+      },
+      warning: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg.warning",
+          borderColor: "border.warning",
+          color: "text.warning",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg.warning",
+          borderColor: "border.warning",
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      tone: "accent",
+      css: {
+        "&:focus": {
+          outlineColor: "border.accent",
+        },
+      },
+    },
+    {
+      tone: "danger",
+      css: {
+        "&:focus": {
+          outlineColor: "border.danger",
+        },
+      },
+    },
+    {
+      tone: "warning",
+      css: {
+        "&:focus": {
+          outlineColor: "border.warning",
+        },
+      },
+    },
+  ],
+});

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" },
+};