daleui 0.0.2 → 0.0.5

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,151 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { useState as u } from "react";
+import "../../css-QiVVeZaw.js";
+import { c as t } from "../../cva-BrKodHDH.js";
+import { Icon as c } from "../Icon/Icon.js";
+function w({
+  invalid: l = !1,
+  disabled: e = !1,
+  placeholder: a = "패스워드를 입력해주세요.",
+  ref: n,
+  ...d
+}) {
+  const [r, i] = u(!1), s = () => {
+    e || i(!r);
+  };
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      className: g({
+        state: l ? "error" : void 0
+      }),
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ref: n,
+            type: r ? "text" : "password",
+            placeholder: a,
+            disabled: e,
+            className: p(),
+            "aria-label": "패스워드",
+            "aria-invalid": l ? !0 : void 0,
+            ...d
+          }
+        ),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            onClick: s,
+            disabled: e,
+            className: f({ disabled: e }),
+            "aria-pressed": r,
+            "aria-label": r ? "패스워드 숨기기" : "패스워드 보기",
+            children: /* @__PURE__ */ o(c, { name: r ? "eye" : "eyeOff", size: "md", tone: "neutral" })
+          }
+        )
+      ]
+    }
+  );
+}
+const g = t({
+  base: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    height: "12",
+    paddingX: "12",
+    gap: "8",
+    borderWidth: "md",
+    borderStyle: "solid",
+    borderRadius: "sm",
+    backgroundColor: "appBg",
+    borderColor: "border.neutral",
+    "&:hover": {
+      borderColor: "border.neutral.hover"
+    },
+    "&:active": {
+      borderColor: "border.neutral.active"
+    },
+    "&:focus-within": {
+      borderColor: "border.neutral",
+      outlineStyle: "solid",
+      outlineWidth: "lg",
+      outlineColor: "border.brand.focus",
+      outlineOffset: "2px"
+    },
+    "&:has(input:disabled)": {
+      cursor: "not-allowed",
+      backgroundColor: "bg.neutral.disabled",
+      borderColor: "border.neutral.disabled",
+      borderTopWidth: "md",
+      borderTopColor: "border.neutral.disabled",
+      color: "fg.neutral.disabled"
+    }
+  },
+  variants: {
+    state: {
+      error: {
+        borderColor: "border.danger",
+        "&:focus-within": {
+          borderColor: "border.danger"
+        },
+        "&:hover": {
+          borderColor: "border.danger"
+        },
+        "&:active": {
+          borderColor: "border.danger"
+        }
+      }
+    }
+  }
+}), p = t({
+  base: {
+    flex: "1",
+    border: "none",
+    outline: "none",
+    color: "fg.neutral.default",
+    fontSize: "md",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    letterSpacing: "balanced",
+    "&::placeholder": {
+      color: "fg.neutral.placeholder"
+    },
+    "&:disabled": {
+      cursor: "not-allowed",
+      color: "fg.neutral.disabled",
+      "&::placeholder": {
+        color: "fg.neutral.disabled"
+      }
+    }
+  }
+}), f = t({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "bg.neutral.hover"
+    },
+    "&:active": {
+      backgroundColor: "bg.neutral.active"
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        "&:hover": {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  }
+});
+export {
+  w as PasswordInput
+};

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,82 @@
+import { type ReactNode } from "react";
+import type { Tone } from "../../tokens/colors";
+export interface RadioGroupProps {
+    /**
+     * 라디오 버튼 요소들
+     */
+    children: ReactNode;
+    /**
+     * 동일 그룹의 라디오 버튼들이 공유하는 이름입니다.
+     */
+    name: string;
+    /**
+     * 라디오 그룹을 설명하는 텍스트입니다.
+     */
+    label: string;
+    /**
+     * 컴포넌트가 처음 렌더링될 때 선택되는 값입니다.
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * 외부에서 선택 값을 직접 제어할 때 사용합니다.
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * 사용자가 선택을 변경할 때 호출되는 콜백입니다.
+     * @default undefined
+     */
+    onChange?: (value: string) => void;
+    /**
+     * true이면 모든 라디오 버튼이 비활성화되어 상호작용이 불가합니다.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 라디오 버튼의 배치 방향입니다. 'horizontal'은 가로, 'vertical'은 세로입니다.
+     * @default undefined
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * 색상 강조를 지정합니다.
+     * @default "neutral"
+     */
+    tone?: Tone;
+}
+/**
+ * 라디오 버튼 그룹 컴포넌트입니다.
+ *
+ * 사용자가 제한된 선택지 중 하나만 선택해야 할 때 사용합니다.
+ * 특히 선택지가 2-5개로 적고 모든 옵션을 한눈에 보여주어야 할 때 적합합니다.
+ *
+ * 선택지가 많은 경우(6개 이상)에는 대신 [Select](?path=/docs/components-select--docs) 컴포넌트 사용을 권장합니다.
+ *
+ * @example
+ * <RadioGroup name="fruits" label="좋아하는 과일을 선택하세요">
+ *   <Radio value="apple">사과</Radio>
+ *   <Radio value="banana">바나나</Radio>
+ *   <Radio value="orange">오렌지</Radio>
+ * </RadioGroup>
+ */
+export declare function RadioGroup({ children, name, label, defaultValue, value, onChange, disabled, orientation, tone, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioProps {
+    /**
+     * 라디오 버튼의 값입니다.
+     */
+    value: string;
+    /**
+     * 라벨 등 자식 요소를 표시합니다.
+     */
+    children?: ReactNode;
+    /**
+     * true이면 이 라디오 버튼이 비활성화됩니다.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * DOM 요소에 대한 ref입니다.
+     */
+    ref?: React.Ref<HTMLInputElement>;
+}
+export declare function Radio({ value, children, disabled, ref }: RadioProps): import("react/jsx-runtime").JSX.Element;