daleui 0.0.2 → 0.0.5

package/dist/components/Card/Card.js

@@ -0,0 +1,132 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { createContext as b, useContext as f } from "react";
+import { Icon as d } from "../Icon/Icon.js";
+import { Link as p } from "../Link/Link.js";
+import "../../css-QiVVeZaw.js";
+import { c as a } from "../../cx-DN21T1EH.js";
+import { c as s } from "../../cva-BrKodHDH.js";
+import { Text as l } from "../Text/Text.js";
+const c = b(null), u = () => {
+  const r = f(c);
+  if (!r)
+    throw new Error("Card 컴포넌트는 Card.Root 내부에서 사용되어야 합니다.");
+  return r;
+};
+function C({
+  tone: r = "neutral",
+  outline: e = !1,
+  className: o,
+  children: n,
+  ...i
+}) {
+  return /* @__PURE__ */ t(c.Provider, { value: { tone: r }, children: /* @__PURE__ */ t(
+    "article",
+    {
+      className: a(k({ tone: r, outline: e }), o),
+      ...i,
+      children: n
+    }
+  ) });
+}
+function x({ className: r, children: e, ...o }) {
+  return /* @__PURE__ */ t("div", { className: a(w(), r), ...o, children: e });
+}
+function g({ name: r, size: e = "lg", ...o }) {
+  const { tone: n } = u();
+  return /* @__PURE__ */ t("div", { className: a(z()), children: /* @__PURE__ */ t(d, { name: r, size: e, tone: n, "aria-label": r, ...o }) });
+}
+function y({ children: r, ...e }) {
+  return /* @__PURE__ */ t(l, { size: "lg", weight: "semibold", as: "p", ...e, children: r });
+}
+function h({ children: r, ...e }) {
+  return /* @__PURE__ */ t(l, { size: "md", as: "p", ...e, children: r });
+}
+function v({ children: r, href: e, external: o, ...n }) {
+  const { tone: i } = u();
+  return /* @__PURE__ */ m(
+    p,
+    {
+      href: e,
+      size: "lg",
+      tone: i,
+      underline: !1,
+      external: o,
+      ...n,
+      children: [
+        r,
+        o && /* @__PURE__ */ t(d, { name: "externalLink", tone: i, size: "sm" })
+      ]
+    }
+  );
+}
+const k = s({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: "24",
+    p: "24",
+    px: "16",
+    borderRadius: "md",
+    bg: "bg.neutral"
+  },
+  variants: {
+    outline: {
+      true: {
+        borderWidth: "sm"
+      },
+      false: {
+        borderWidth: "0"
+      }
+    },
+    tone: {
+      neutral: {
+        borderColor: "border.neutral"
+      },
+      brand: {
+        borderColor: "border.brand"
+      }
+    }
+  }
+}), w = s({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4",
+    width: "100%"
+  }
+}), z = s({
+  base: {
+    display: "inline-flex",
+    p: "12",
+    borderRadius: "md",
+    bg: "bg.brand"
+  }
+}), B = Object.assign(C, {
+  /**
+   * Card의 제목과 설명을 감싸는 컨테이너입니다.
+   * 제목과 설명 사이의 간격을 관리합니다.
+   */
+  Body: x,
+  /**
+   * Card의 아이콘을 표시합니다. Card 바로 아래에 배치하며,
+   * tone은 Card로부터 자동으로 전달받습니다.
+   */
+  Icon: g,
+  /**
+   * Card의 제목을 표시합니다. CardBody 안에서 사용합니다.
+   */
+  Title: y,
+  /**
+   * Card의 설명을 표시합니다. CardBody 안에서 CardTitle 아래에 사용합니다.
+   */
+  Description: h,
+  /**
+   * Card 하단에 링크를 표시합니다. tone은 Card로부터 자동으로 전달받으며,
+   * external prop이 true일 경우 외부 링크 아이콘이 자동으로 추가됩니다.
+   */
+  Link: v
+});
+export {
+  B as Card
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { Tone } from "../../tokens/colors";
+export interface CheckboxProps {
+    /** 체크박스 라벨 텍스트 */
+    label?: React.ReactNode;
+    /** 체크박스의 name 속성 */
+    name?: string;
+    /** 체크 상태 (controlled 모드) */
+    checked?: boolean;
+    /** 초기 체크 상태 (uncontrolled 모드) */
+    defaultChecked?: boolean;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 에러 상태 (테두리 + 체크 아이콘 + 라벨 모두 붉은색) */
+    invalid?: boolean;
+    /** 체크박스의 색조 */
+    tone?: Tone;
+    /** 필수 입력 표시 (라벨 옆에 * 표시) */
+    required?: boolean;
+    /** 체크 상태 변경 시 호출되는 콜백 */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * - `label` 속성으로 체크박스의 라벨을 지정할 수 있습니다.
+ * - `name` 속성으로 체크박스의 form에서 사용할 name 속성을 지정할 수 있습니다.
+ * - `checked` 속성으로 체크박스의 체크 상태를 제어할 수 있습니다.
+ * - `defaultChecked` 속성으로 체크박스의 초기 체크 상태를 설정할 수 있습니다.
+ * - `disabled` 속성으로 체크박스를 비활성화할 수 있습니다.
+ * - `invalid` 속성으로 체크박스의 에러 상태를 지정할 수 있습니다.
+ * - `tone` 속성으로 체크박스의 색상 강조를 지정할 수 있습니다.
+ * - `required` 속성으로 체크박스의 필수 입력 여부를 지정할 수 있습니다.
+ * - `onChange` 속성으로 체크박스의 체크 상태 변경 시 호출되는 콜백을 지정할 수 있습니다.
+ */
+export declare const Checkbox: ({ label, name, checked, defaultChecked, disabled, invalid, tone, required, onChange, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;