@pylerai/design-system 1.2.4 → 2.0.0

package/dist/components/ui/tabs.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as h } from "react/jsx-runtime";
+import { cn as T } from "../../lib/utils.js";
+import * as o from "react";
+const A = o.createContext(null);
+function I() {
+  const e = o.useContext(A);
+  if (!e) throw new Error("TabsTrigger must be used within Tabs");
+  return e;
+}
+const R = o.forwardRef(
+  ({
+    value: e,
+    defaultValue: t = "",
+    onValueChange: d,
+    variant: l = "underline",
+    children: i,
+    className: c
+  }, f) => {
+    const [x, p] = o.useState(t), g = e !== void 0, b = g ? e : x, m = o.useId(), [w, s] = o.useState(() => /* @__PURE__ */ new Set()), y = o.useCallback((u) => (s((a) => {
+      if (a.has(u)) return a;
+      const r = new Set(a);
+      return r.add(u), r;
+    }), () => s((a) => {
+      if (!a.has(u)) return a;
+      const r = new Set(a);
+      return r.delete(u), r;
+    })), []), k = (u) => {
+      g || p(u), d == null || d(u);
+    }, n = o.useMemo(
+      () => ({ value: b, onValueChange: k, variant: l, baseId: m, panels: w, registerPanel: y }),
+      // handleChange 는 렌더마다 새로 만들어지지만 참조하는 값이 아래 의존성에 모두 들어 있다
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [b, g, d, l, m, w, y]
+    );
+    return /* @__PURE__ */ h(A.Provider, { value: n, children: /* @__PURE__ */ h("div", { ref: f, className: T("flex flex-col", c), children: i }) });
+  }
+);
+R.displayName = "Tabs";
+const P = o.forwardRef(
+  ({ children: e, className: t }, d) => {
+    const { variant: l } = I();
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: d,
+        role: "tablist",
+        className: T(
+          "flex items-center",
+          l === "underline" && "gap-5",
+          l === "outline" && "gap-1",
+          l === "round" && "bg-ds-surface-strong p-1 rounded-lg",
+          t
+        ),
+        children: e
+      }
+    );
+  }
+);
+P.displayName = "TabsList";
+const S = o.forwardRef(
+  ({ value: e, disabled: t, children: d, className: l, onClick: i, onKeyDown: c, ...f }, x) => {
+    const { value: p, onValueChange: g, variant: b, baseId: m, panels: w } = I(), s = p === e, y = w.has(e), k = (n) => {
+      if (c == null || c(n), n.defaultPrevented || !["ArrowRight", "ArrowLeft", "Home", "End"].includes(n.key)) return;
+      const a = n.currentTarget.closest('[role="tablist"]'), r = Array.from(
+        (a == null ? void 0 : a.querySelectorAll('[role="tab"]:not([disabled])')) ?? []
+      );
+      if (r.length === 0) return;
+      n.preventDefault();
+      const N = r.indexOf(n.currentTarget), $ = n.key === "Home" ? 0 : n.key === "End" ? r.length - 1 : n.key === "ArrowRight" ? (N + 1 + r.length) % r.length : (N - 1 + r.length) % r.length;
+      r[$].focus(), r[$].click();
+    };
+    return /* @__PURE__ */ h(
+      "button",
+      {
+        ref: x,
+        role: "tab",
+        type: "button",
+        id: `${m}-tab-${e}`,
+        "aria-selected": s,
+        "aria-controls": y ? `${m}-panel-${e}` : void 0,
+        tabIndex: s ? 0 : -1,
+        disabled: t,
+        onClick: (n) => {
+          t || g(e), i == null || i(n);
+        },
+        onKeyDown: k,
+        className: T(
+          "inline-flex items-center justify-center whitespace-nowrap shrink-0 transition-colors focus-visible:outline-none",
+          b === "underline" && [
+            "h-11 text-body-2-sb",
+            s && !t && "border-b-2 border-ds-text-strong text-ds-text-strong",
+            !s && !t && "text-ds-text-normal",
+            t && "text-ds-text-disabled cursor-not-allowed"
+          ],
+          b === "box" && [
+            "h-10 px-3 rounded-lg text-body-3-m",
+            s && !t && "bg-ds-surface-normal text-ds-text-strong",
+            !s && !t && "bg-ds-background-default text-ds-text-normal",
+            t && "bg-ds-background-default text-ds-text-disabled cursor-not-allowed"
+          ],
+          b === "outline" && [
+            "h-8 px-3 rounded-full text-body-4-m",
+            s && !t && "bg-ds-surface-normal text-ds-text-strong",
+            !s && !t && "bg-ds-background-default border border-ds-line-normal text-ds-text-normal",
+            t && "bg-ds-background-default border border-ds-line-normal text-ds-text-disabled cursor-not-allowed"
+          ],
+          b === "round" && [
+            "h-7 px-2.5 rounded text-body-4-r",
+            s && !t && "bg-ds-surface-alternative text-ds-text-strong",
+            !s && !t && "bg-ds-surface-strong text-ds-text-normal",
+            t && "bg-ds-surface-strong text-ds-text-disabled cursor-not-allowed"
+          ],
+          l
+        ),
+        ...f,
+        children: d
+      }
+    );
+  }
+);
+S.displayName = "TabsTrigger";
+const E = o.forwardRef(
+  ({ value: e, children: t, className: d }, l) => {
+    const { value: i, baseId: c, registerPanel: f } = I(), x = i === e;
+    return o.useEffect(() => {
+      if (x)
+        return f(e);
+    }, [x, e, f]), x ? /* @__PURE__ */ h(
+      "div",
+      {
+        ref: l,
+        role: "tabpanel",
+        id: `${c}-panel-${e}`,
+        "aria-labelledby": `${c}-tab-${e}`,
+        tabIndex: 0,
+        className: T("mt-4", d),
+        children: t
+      }
+    ) : null;
+  }
+);
+E.displayName = "TabsContent";
+export {
+  R as Tabs,
+  E as TabsContent,
+  P as TabsList,
+  S as TabsTrigger
+};

package/dist/components/ui/tag.d.ts

@@ -1,5 +1,6 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
-export type TagSize = "medium" | "small" | "xsmall";
+export type TagSize = Extract<DsSize, "md" | "sm" | "xs">;
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: TagSize;
 }

package/dist/components/ui/tag.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { cn as p } from "../../lib/utils.js";
+import * as i from "react";
+const x = {
+  md: { padding: "px-2 py-1", text: "text-body-3-r" },
+  sm: { padding: "px-2 py-0.5", text: "text-body-4-r" },
+  xs: { padding: "px-2 py-0.5", text: "text-label-1-r" }
+}, l = i.forwardRef(
+  ({ size: t = "md", className: e, children: r, ...s }, d) => {
+    const { padding: n, text: a } = x[t];
+    return /* @__PURE__ */ o(
+      "span",
+      {
+        ref: d,
+        className: p(
+          "inline-flex items-center justify-center border border-ds-line-strong rounded-full bg-ds-background-default text-ds-text-strong whitespace-nowrap",
+          n,
+          a,
+          e
+        ),
+        ...s,
+        children: r
+      }
+    );
+  }
+);
+l.displayName = "Tag";
+export {
+  l as Tag
+};

package/dist/components/ui/tips.d.ts

@@ -1,6 +1,7 @@
+import { DsSize } from '../../lib/size';
 import * as React from "react";
 export type TipsColor = "white" | "black";
-export type TipsSize = "medium" | "small";
+export type TipsSize = Extract<DsSize, "md" | "sm">;
 export interface TipsProps extends React.HTMLAttributes<HTMLDivElement> {
     color?: TipsColor;
     size?: TipsSize;

package/dist/components/ui/tips.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+import * as a from "react";
+const x = a.forwardRef(
+  ({ color: e = "white", size: t = "md", className: r, children: d, ...o }, i) => /* @__PURE__ */ p(
+    "div",
+    {
+      ref: i,
+      className: s(
+        "inline-flex flex-col items-start justify-center rounded-[8px] shadow-[0px_5px_16px_0px_rgba(0,0,0,0.05)]",
+        t === "md" ? "px-2.5 py-2" : "px-2 py-1.5",
+        e === "black" ? "bg-ds-primitive-black text-white" : "bg-ds-background-default border border-ds-line-normal text-ds-text-strong",
+        t === "md" ? "text-body-4-r" : "text-label-1-r",
+        r
+      ),
+      ...o,
+      children: d
+    }
+  )
+);
+x.displayName = "Tips";
+export {
+  x as Tips
+};

package/dist/components/ui/toast.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { CautionIcon as a, NegativeIcon as m, PositiveIcon as l, ChevronRightIcon as p } from "../../lib/icons.js";
+import { cn as u } from "../../lib/utils.js";
+import { toast as s, Toaster as x } from "sonner";
+function r({ icon: t, message: o }) {
+  return /* @__PURE__ */ i("div", { className: "bg-ds-primitive-black flex items-center gap-1.5 p-3 rounded-lg w-[336px]", children: [
+    t,
+    /* @__PURE__ */ e("p", { className: "text-white text-body-2-r flex-1 min-w-0", children: o })
+  ] });
+}
+function f({ position: t = "bottom-center" }) {
+  return /* @__PURE__ */ e(
+    x,
+    {
+      position: t,
+      toastOptions: { unstyled: !0, classNames: { toast: "!p-0 !bg-transparent !shadow-none !border-none" } }
+    }
+  );
+}
+const g = {
+  success: (t, o) => s.custom(() => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(l, {}), message: t }), o),
+  error: (t, o) => s.custom(() => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(m, {}), message: t }), o),
+  caution: (t, o) => s.custom(() => /* @__PURE__ */ e(r, { icon: /* @__PURE__ */ e(a, {}), message: t }), o)
+};
+function c({
+  icon: t,
+  message: o,
+  action: n
+}) {
+  return /* @__PURE__ */ i("div", { className: "bg-ds-primitive-black flex items-center gap-1.5 px-3 py-4 rounded-lg w-[336px] shadow-[0px_5px_16px_0px_rgba(0,0,0,0.05)]", children: [
+    t,
+    /* @__PURE__ */ e("p", { className: "text-white text-body-2-r flex-1 min-w-0", children: o }),
+    n && /* @__PURE__ */ i(
+      "button",
+      {
+        type: "button",
+        onClick: n.onClick,
+        className: u(
+          "inline-flex items-center shrink-0 text-white text-body-3-m whitespace-nowrap",
+          n.withIcon ? "gap-0.5" : ""
+        ),
+        children: [
+          n.label,
+          n.withIcon && /* @__PURE__ */ e(p, {})
+        ]
+      }
+    )
+  ] });
+}
+const k = {
+  success: (t, o, n) => s.custom(
+    () => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(l, {}), message: t, action: o }),
+    n
+  ),
+  error: (t, o, n) => s.custom(
+    () => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(m, {}), message: t, action: o }),
+    n
+  ),
+  caution: (t, o, n) => s.custom(
+    () => /* @__PURE__ */ e(c, { icon: /* @__PURE__ */ e(a, {}), message: t, action: o }),
+    n
+  )
+};
+export {
+  c as SnackbarContent,
+  f as Toaster,
+  k as snackbar,
+  g as toast
+};

package/dist/components/ui/toggle.d.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
-export interface ToggleProps {
+export interface ToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "type"> {
     checked?: boolean;
     neutral?: boolean;
     disabled?: boolean;
     onChange?: (checked: boolean) => void;
-    className?: string;
 }
 declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 export { Toggle };

package/dist/components/ui/toggle.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+import * as p from "react";
+const b = p.forwardRef(
+  ({ checked: r, neutral: l, disabled: o, onChange: t, className: i, ...a }, e) => {
+    const m = l ? "left-[11px]" : r ? "left-[17px]" : "left-[3px]", u = o ? r ? "bg-ds-primary-blue-disabled" : "bg-ds-line-normal" : r ? "bg-ds-primary-blue-normal" : "bg-ds-line-normal";
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        ref: e,
+        type: "button",
+        role: "switch",
+        "aria-checked": l ? "mixed" : r,
+        disabled: o,
+        onClick: () => !o && (t == null ? void 0 : t(!r)),
+        className: s(
+          "relative inline-flex h-6 w-10 shrink-0 rounded-full border border-ds-line-normal transition-colors",
+          o && !r ? "bg-ds-surface-normal" : "bg-ds-background-default",
+          o ? "cursor-not-allowed" : "cursor-pointer",
+          i
+        ),
+        ...a,
+        children: /* @__PURE__ */ n(
+          "span",
+          {
+            className: s(
+              "absolute top-1/2 -translate-y-1/2 h-[18px] w-[18px] rounded-full transition-all duration-200",
+              m,
+              u
+            )
+          }
+        )
+      }
+    );
+  }
+);
+b.displayName = "Toggle";
+export {
+  b as Toggle
+};

package/dist/components/ui/use-modal.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs as a, jsx as f } from "react/jsx-runtime";
+import * as c from "react";
+import { InformationModal as x, ActionModal as w, ContentModal as P } from "./modal.js";
+const p = c.createContext(null);
+let h = 0;
+function C() {
+  return `modal-${++h}`;
+}
+function y({ children: o }) {
+  const [b, s] = c.useState([]), i = c.useCallback((e, n) => {
+    s((r) => {
+      const t = r.find((u) => u.id === e);
+      return t == null || t.resolve(n), r.filter((u) => u.id !== e);
+    });
+  }, []), l = c.useCallback((e) => new Promise((n) => {
+    const r = C();
+    s((t) => [...t, { ...e, id: r, type: "information", resolve: n }]);
+  }), []), M = c.useCallback((e) => new Promise((n) => {
+    const r = C();
+    s((t) => [...t, { ...e, id: r, type: "action", resolve: n }]);
+  }), []), L = c.useCallback((e) => new Promise((n) => {
+    const r = C();
+    s((t) => [...t, { ...e, id: r, type: "content", resolve: n }]);
+  }), []);
+  return /* @__PURE__ */ a(p.Provider, { value: { openInformationModal: l, openActionModal: M, openContentModal: L }, children: [
+    o,
+    b.map((e) => e.type === "information" ? /* @__PURE__ */ f(
+      x,
+      {
+        open: !0,
+        title: e.title,
+        description: e.description,
+        confirmLabel: e.confirmLabel,
+        onConfirm: () => {
+          var n;
+          (n = e.onConfirm) == null || n.call(e), i(e.id, !0);
+        },
+        onClose: () => i(e.id, !1)
+      },
+      e.id
+    ) : e.type === "action" ? /* @__PURE__ */ f(
+      w,
+      {
+        open: !0,
+        title: e.title,
+        description: e.description,
+        cancelLabel: e.cancelLabel,
+        confirmLabel: e.confirmLabel,
+        onCancel: () => {
+          var n;
+          (n = e.onCancel) == null || n.call(e), i(e.id, !1);
+        },
+        onConfirm: () => {
+          var n;
+          (n = e.onConfirm) == null || n.call(e), i(e.id, !0);
+        },
+        onClose: () => i(e.id, !1)
+      },
+      e.id
+    ) : /* @__PURE__ */ f(
+      P,
+      {
+        open: !0,
+        title: e.title,
+        description: e.description,
+        size: e.size,
+        cancelLabel: e.cancelLabel,
+        confirmLabel: e.confirmLabel,
+        onCancel: () => {
+          var n;
+          (n = e.onCancel) == null || n.call(e), i(e.id, !1);
+        },
+        onConfirm: () => {
+          var n;
+          (n = e.onConfirm) == null || n.call(e), i(e.id, !0);
+        },
+        onClose: () => i(e.id, !1),
+        children: e.content
+      },
+      e.id
+    ))
+  ] });
+}
+function I() {
+  const o = c.useContext(p);
+  if (!o)
+    throw new Error("useModal must be used within a ModalProvider");
+  return o;
+}
+export {
+  y as ModalProvider,
+  I as useModal
+};

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { PYLER_LIGHT_COLOR_TOKENS, flatPylerLightTokens, PYLER_LIGHT_GROUP_ORDER
 export type { HexColor, DsCssVar, PylerLightCssVar, PylerLightGroup, PylerLightFlatToken, } from './tokens/pyler-light';
 export { PYLER_TYPOGRAPHY_STYLE } from './tokens/typography';
 export type { PylerTypographyStyleKey, PylerTypographyScale, PylerTypographyUtilityClass, } from './tokens/typography';
+export type { DsSize } from './lib/size';
 export { Button, ButtonIndicator, buttonVariants } from './components/ui/button';
 export type { ButtonProps, ButtonIndicatorProps } from './components/ui/button';
 export { InputField, TextField } from './components/ui/input';