@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/QrCode/QrCode.js

@@ -0,0 +1,300 @@
+import { jsx as v } from "react/jsx-runtime";
+import { Slot as p, cn as w, useComposedRefs as I } from "@dsui/ui/index";
+import * as l from "react";
+const O = "QRCode", G = "QRCodeCanvas", K = "QRCodeSvg", _ = "QRCodeImage", $ = "QRCodeSkeleton";
+function E(n) {
+  const e = l.useRef(null);
+  return e.current === null && (e.current = n()), e;
+}
+const L = l.createContext(null);
+function R(n) {
+  const e = l.useContext(L);
+  if (!e)
+    throw new Error(`\`useQRCode\` must be used within \`${O}\``);
+  const t = l.useCallback(
+    () => n(e.getState()),
+    [e, n]
+  );
+  return l.useSyncExternalStore(e.subscribe, t, t);
+}
+const U = l.createContext(null);
+function N(n) {
+  const e = l.useContext(U);
+  if (!e)
+    throw new Error(`\`${n}\` must be used within \`${O}\``);
+  return e;
+}
+function T(n) {
+  const {
+    value: e,
+    size: t = 200,
+    level: s = "M",
+    margin: a = 1,
+    quality: r = 0.92,
+    backgroundColor: o = "#ffffff",
+    foregroundColor: i = "#000000",
+    onError: d,
+    onGenerated: S,
+    className: Q,
+    style: u,
+    asChild: m,
+    ...b
+  } = n, k = l.useRef(null), P = E(() => /* @__PURE__ */ new Set()), x = E(() => ({
+    dataUrl: null,
+    svgString: null,
+    isGenerating: !1,
+    error: null,
+    generationKey: ""
+  })), C = l.useMemo(() => ({
+    subscribe: (c) => (P.current.add(c), () => P.current.delete(c)),
+    getState: () => x.current,
+    setState: (c, h) => {
+      Object.is(x.current[c], h) || (x.current[c] = h, C.notify());
+    },
+    setStates: (c) => {
+      let h = !1;
+      for (const f of Object.keys(c)) {
+        const g = c[f];
+        g !== void 0 && !Object.is(x.current[f], g) && (Object.assign(x.current, { [f]: g }), h = !0);
+      }
+      h && C.notify();
+    },
+    notify: () => {
+      for (const c of P.current)
+        c();
+    }
+  }), [P, x]), y = l.useMemo(
+    () => ({
+      errorCorrectionLevel: s,
+      type: "image/png",
+      quality: r,
+      margin: a,
+      color: {
+        dark: i,
+        light: o
+      },
+      width: t
+    }),
+    [s, a, i, o, t, r]
+  ), q = l.useMemo(() => e ? JSON.stringify({
+    value: e,
+    size: t,
+    level: s,
+    margin: a,
+    quality: r,
+    foregroundColor: i,
+    backgroundColor: o
+  }) : "", [e, s, a, i, o, t, r]), z = l.useCallback(
+    async (c) => {
+      if (!e || !c) return;
+      const h = C.getState();
+      if (!(h.isGenerating || h.generationKey === c)) {
+        C.setStates({
+          isGenerating: !0,
+          error: null
+        });
+        try {
+          const f = (await import("qrcode")).default;
+          let g = null;
+          try {
+            g = await f.toDataURL(e, y);
+          } catch {
+            g = null;
+          }
+          k.current && await f.toCanvas(k.current, e, y);
+          const j = await f.toString(e, {
+            errorCorrectionLevel: y.errorCorrectionLevel,
+            margin: y.margin,
+            color: y.color,
+            width: y.width,
+            type: "svg"
+          });
+          C.setStates({
+            dataUrl: g,
+            svgString: j,
+            isGenerating: !1,
+            generationKey: c
+          }), S?.();
+        } catch (f) {
+          const g = f instanceof Error ? f : new Error("Failed to generate QR code");
+          C.setStates({
+            error: g,
+            isGenerating: !1
+          }), d?.(g);
+        }
+      }
+    },
+    [e, y, C, d, S]
+  ), M = l.useMemo(
+    () => ({
+      value: e,
+      size: t,
+      level: s,
+      margin: a,
+      backgroundColor: o,
+      foregroundColor: i,
+      canvasRef: k
+    }),
+    [e, t, o, i, s, a]
+  );
+  l.useLayoutEffect(() => {
+    if (q) {
+      const c = requestAnimationFrame(() => {
+        z(q);
+      });
+      return () => cancelAnimationFrame(c);
+    }
+  }, [q, z]);
+  const A = m ? p : "div";
+  return /* @__PURE__ */ v(L.Provider, { value: C, children: /* @__PURE__ */ v(U.Provider, { value: M, children: /* @__PURE__ */ v(
+    A,
+    {
+      "data-slot": "qr-code",
+      ...b,
+      className: w(Q, "relative flex flex-col items-center gap-2"),
+      style: {
+        "--qr-code-size": `${t}px`,
+        ...u
+      },
+      children: b?.children ? b.children : /* @__PURE__ */ v(D, {})
+    }
+  ) }) });
+}
+function D(n) {
+  const { asChild: e, className: t, ref: s, ...a } = n, r = N(G), o = R((S) => S.generationKey), i = I(s, r.canvasRef);
+  return /* @__PURE__ */ v(
+    e ? p : "canvas",
+    {
+      "data-slot": "qr-code-canvas",
+      ...a,
+      ref: i,
+      width: r.size,
+      height: r.size,
+      className: w(
+        "relative max-h-(--qr-code-size) max-w-(--qr-code-size)",
+        !o && "invisible",
+        t
+      )
+    }
+  );
+}
+function V(n) {
+  const { asChild: e, className: t, style: s, ...a } = n, r = N(K), o = R((d) => d.svgString);
+  return o ? /* @__PURE__ */ v(
+    e ? p : "div",
+    {
+      "data-slot": "qr-code-svg",
+      ...a,
+      className: w(
+        "relative max-h-(--qr-code-size) max-w-(--qr-code-size)",
+        t
+      ),
+      style: { width: r.size, height: r.size, ...s },
+      dangerouslySetInnerHTML: { __html: o }
+    }
+  ) : null;
+}
+function H(n) {
+  const { alt: e = "QR Code", asChild: t, className: s, ...a } = n, r = N(_), o = R((d) => d.dataUrl);
+  return o ? /* @__PURE__ */ v(
+    t ? p : "img",
+    {
+      "data-slot": "qr-code-image",
+      ...a,
+      src: o,
+      alt: e,
+      width: r.size,
+      height: r.size,
+      className: w(
+        "relative max-h-(--qr-code-size) max-w-(--qr-code-size)",
+        s
+      )
+    }
+  ) : null;
+}
+function J(n) {
+  const {
+    filename: e = "qrcode",
+    format: t = "png",
+    asChild: s,
+    className: a,
+    children: r,
+    ...o
+  } = n, i = R((u) => u.dataUrl), d = R((u) => u.svgString), S = l.useCallback(
+    (u) => {
+      if (o.onClick?.(u), u.defaultPrevented) return;
+      const m = document.createElement("a");
+      if (t === "png" && i)
+        m.href = i, m.download = `${e}.png`;
+      else if (t === "svg" && d) {
+        const b = new Blob([d], { type: "image/svg+xml" });
+        m.href = URL.createObjectURL(b), m.download = `${e}.svg`;
+      } else
+        return;
+      document.body.appendChild(m), m.click(), document.body.removeChild(m), t === "svg" && d && URL.revokeObjectURL(m.href);
+    },
+    [i, d, e, t, o.onClick]
+  );
+  return /* @__PURE__ */ v(
+    s ? p : "button",
+    {
+      type: "button",
+      "data-slot": "qr-code-download",
+      ...o,
+      className: w("max-w-(--qr-code-size)", a),
+      onClick: S,
+      children: r ?? `Download ${t.toUpperCase()}`
+    }
+  );
+}
+function W(n) {
+  const { asChild: e, className: t, ...s } = n;
+  return /* @__PURE__ */ v(
+    e ? p : "div",
+    {
+      "data-slot": "qr-code-overlay",
+      ...s,
+      className: w(
+        "-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex items-center justify-center rounded-sm bg-background",
+        t
+      )
+    }
+  );
+}
+function X(n) {
+  const { asChild: e, className: t, style: s, ...a } = n, r = N($), o = R((u) => u.dataUrl), i = R((u) => u.svgString), d = R((u) => u.generationKey);
+  return o || i || d ? null : /* @__PURE__ */ v(
+    e ? p : "div",
+    {
+      "data-slot": "qr-code-skeleton",
+      ...a,
+      className: w(
+        "absolute max-h-(--qr-code-size) max-w-(--qr-code-size) animate-pulse bg-accent",
+        t
+      ),
+      style: {
+        width: r.size,
+        height: r.size,
+        ...s
+      }
+    }
+  );
+}
+export {
+  D as Canvas,
+  J as Download,
+  H as Image,
+  W as Overlay,
+  T as QRCode,
+  D as QRCodeCanvas,
+  J as QRCodeDownload,
+  H as QRCodeImage,
+  W as QRCodeOverlay,
+  X as QRCodeSkeleton,
+  V as QRCodeSvg,
+  T as Root,
+  X as Skeleton,
+  V as Svg,
+  R as useQRCode
+};
+//# sourceMappingURL=QrCode.js.map

package/dist/esm/components/QrCode/QrCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode.js","sources":["../../../../src/components/QrCode/QrCode.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, Slot, useComposedRefs } from \"@dsui/ui/index\";\nimport * as React from \"react\";\n\nconst ROOT_NAME = \"QRCode\";\nconst CANVAS_NAME = \"QRCodeCanvas\";\nconst SVG_NAME = \"QRCodeSvg\";\nconst IMAGE_NAME = \"QRCodeImage\";\nconst SKELETON_NAME = \"QRCodeSkeleton\";\n\ntype QRCodeLevel = \"L\" | \"M\" | \"Q\" | \"H\";\n\ninterface QRCodeCanvasOpts {\n  errorCorrectionLevel: QRCodeLevel;\n  type?: \"image/png\" | \"image/jpeg\" | \"image/webp\";\n  quality?: number;\n  margin?: number;\n  color?: {\n    dark: string;\n    light: string;\n  };\n  width?: number;\n  rendererOpts?: {\n    quality?: number;\n  };\n}\n\nfunction useLazyRef<T>(fn: () => T) {\n  const ref = React.useRef<T | null>(null);\n\n  if (ref.current === null) {\n    ref.current = fn();\n  }\n\n  return ref as React.RefObject<T>;\n}\n\ninterface StoreState {\n  dataUrl: string | null;\n  svgString: string | null;\n  isGenerating: boolean;\n  error: Error | null;\n  generationKey: string;\n}\n\ninterface Store {\n  subscribe: (callback: () => void) => () => void;\n  getState: () => StoreState;\n  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;\n  setStates: (updates: Partial<StoreState>) => void;\n  notify: () => void;\n}\n\ninterface QRCodeContextValue {\n  value: string;\n  size: number;\n  margin: number;\n  level: QRCodeLevel;\n  backgroundColor: string;\n  foregroundColor: string;\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n}\n\nconst StoreContext = React.createContext<Store | null>(null);\n\nfunction useStore<T>(selector: (state: StoreState) => T): T {\n  const store = React.useContext(StoreContext);\n  if (!store) {\n    throw new Error(`\\`useQRCode\\` must be used within \\`${ROOT_NAME}\\``);\n  }\n\n  const getSnapshot = React.useCallback(\n    () => selector(store.getState()),\n    [store, selector],\n  );\n\n  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n}\n\nconst QRCodeContext = React.createContext<QRCodeContextValue | null>(null);\n\nfunction useQRCodeContext(consumerName: string) {\n  const context = React.useContext(QRCodeContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` must be used within \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface QRCodeRootProps extends Omit<React.ComponentProps<\"div\">, \"onError\"> {\n  value: string;\n  size?: number;\n  level?: QRCodeLevel;\n  margin?: number;\n  quality?: number;\n  backgroundColor?: string;\n  foregroundColor?: string;\n  onError?: (error: Error) => void;\n  onGenerated?: () => void;\n  asChild?: boolean;\n}\n\nfunction QRCodeRoot(props: QRCodeRootProps) {\n  const {\n    value,\n    size = 200,\n    level = \"M\",\n    margin = 1,\n    quality = 0.92,\n    backgroundColor = \"#ffffff\",\n    foregroundColor = \"#000000\",\n    onError,\n    onGenerated,\n    className,\n    style,\n    asChild,\n    ...rootProps\n  } = props;\n\n  const canvasRef = React.useRef<HTMLCanvasElement>(null);\n\n  const listenersRef = useLazyRef(() => new Set<() => void>());\n  const stateRef = useLazyRef<StoreState>(() => ({\n    dataUrl: null,\n    svgString: null,\n    isGenerating: false,\n    error: null,\n    generationKey: \"\",\n  }));\n\n  const store = React.useMemo<Store>(() => {\n    return {\n      subscribe: (cb) => {\n        listenersRef.current.add(cb);\n        return () => listenersRef.current.delete(cb);\n      },\n      getState: () => stateRef.current,\n      setState: (key, value) => {\n        if (Object.is(stateRef.current[key], value)) return;\n        stateRef.current[key] = value;\n        store.notify();\n      },\n      setStates: (updates) => {\n        let hasChanged = false;\n\n        for (const key of Object.keys(updates) as Array<keyof StoreState>) {\n          const value = updates[key];\n          if (value !== undefined && !Object.is(stateRef.current[key], value)) {\n            Object.assign(stateRef.current, { [key]: value });\n            hasChanged = true;\n          }\n        }\n\n        if (hasChanged) {\n          store.notify();\n        }\n      },\n      notify: () => {\n        for (const cb of listenersRef.current) {\n          cb();\n        }\n      },\n    };\n  }, [listenersRef, stateRef]);\n\n  const canvasOpts = React.useMemo<QRCodeCanvasOpts>(\n    () => ({\n      errorCorrectionLevel: level,\n      type: \"image/png\",\n      quality,\n      margin,\n      color: {\n        dark: foregroundColor,\n        light: backgroundColor,\n      },\n      width: size,\n    }),\n    [level, margin, foregroundColor, backgroundColor, size, quality],\n  );\n\n  const generationKey = React.useMemo(() => {\n    if (!value) return \"\";\n\n    return JSON.stringify({\n      value,\n      size,\n      level,\n      margin,\n      quality,\n      foregroundColor,\n      backgroundColor,\n    });\n  }, [value, level, margin, foregroundColor, backgroundColor, size, quality]);\n\n  const onQRCodeGenerate = React.useCallback(\n    async (targetGenerationKey: string) => {\n      if (!value || !targetGenerationKey) return;\n\n      const currentState = store.getState();\n      if (\n        currentState.isGenerating ||\n        currentState.generationKey === targetGenerationKey\n      )\n        return;\n\n      store.setStates({\n        isGenerating: true,\n        error: null,\n      });\n\n      try {\n        const QRCode = (await import(\"qrcode\")).default;\n\n        let dataUrl: string | null = null;\n\n        try {\n          dataUrl = await QRCode.toDataURL(value, canvasOpts);\n        } catch {\n          dataUrl = null;\n        }\n\n        if (canvasRef.current) {\n          await QRCode.toCanvas(canvasRef.current, value, canvasOpts);\n        }\n\n        const svgString = await QRCode.toString(value, {\n          errorCorrectionLevel: canvasOpts.errorCorrectionLevel,\n          margin: canvasOpts.margin,\n          color: canvasOpts.color,\n          width: canvasOpts.width,\n          type: \"svg\",\n        });\n\n        store.setStates({\n          dataUrl,\n          svgString,\n          isGenerating: false,\n          generationKey: targetGenerationKey,\n        });\n\n        onGenerated?.();\n      } catch (error) {\n        const parsedError =\n          error instanceof Error\n            ? error\n            : new Error(\"Failed to generate QR code\");\n        store.setStates({\n          error: parsedError,\n          isGenerating: false,\n        });\n        onError?.(parsedError);\n      }\n    },\n    [value, canvasOpts, store, onError, onGenerated],\n  );\n\n  const contextValue = React.useMemo<QRCodeContextValue>(\n    () => ({\n      value,\n      size,\n      level,\n      margin,\n      backgroundColor,\n      foregroundColor,\n      canvasRef,\n    }),\n    [value, size, backgroundColor, foregroundColor, level, margin],\n  );\n\n  React.useLayoutEffect(() => {\n    if (generationKey) {\n      const rafId = requestAnimationFrame(() => {\n        onQRCodeGenerate(generationKey);\n      });\n\n      return () => cancelAnimationFrame(rafId);\n    }\n  }, [generationKey, onQRCodeGenerate]);\n\n  const RootPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <StoreContext.Provider value={store}>\n      <QRCodeContext.Provider value={contextValue}>\n        <RootPrimitive\n          data-slot=\"qr-code\"\n          {...rootProps}\n          className={cn(className, \"relative flex flex-col items-center gap-2\")}\n          style={\n            {\n              \"--qr-code-size\": `${size}px`,\n              ...style,\n            } as React.CSSProperties\n          }\n        >\n          {rootProps?.children ? rootProps.children : <QRCodeCanvas />}\n        </RootPrimitive>\n      </QRCodeContext.Provider>\n    </StoreContext.Provider>\n  );\n}\n\ninterface QRCodeCanvasProps extends React.ComponentProps<\"canvas\"> {\n  asChild?: boolean;\n}\n\nfunction QRCodeCanvas(props: QRCodeCanvasProps) {\n  const { asChild, className, ref, ...canvasProps } = props;\n\n  const context = useQRCodeContext(CANVAS_NAME);\n  const generationKey = useStore((state) => state.generationKey);\n\n  const composedRef = useComposedRefs(ref, context.canvasRef);\n\n  const CanvasPrimitive = asChild ? Slot : \"canvas\";\n\n  return (\n    <CanvasPrimitive\n      data-slot=\"qr-code-canvas\"\n      {...canvasProps}\n      ref={composedRef}\n      width={context.size}\n      height={context.size}\n      className={cn(\n        \"relative max-h-(--qr-code-size) max-w-(--qr-code-size)\",\n        !generationKey && \"invisible\",\n        className,\n      )}\n    />\n  );\n}\n\ninterface QRCodeSvgProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction QRCodeSvg(props: QRCodeSvgProps) {\n  const { asChild, className, style, ...svgProps } = props;\n\n  const context = useQRCodeContext(SVG_NAME);\n  const svgString = useStore((state) => state.svgString);\n\n  if (!svgString) return null;\n\n  const SvgPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <SvgPrimitive\n      data-slot=\"qr-code-svg\"\n      {...svgProps}\n      className={cn(\n        \"relative max-h-(--qr-code-size) max-w-(--qr-code-size)\",\n        className,\n      )}\n      style={{ width: context.size, height: context.size, ...style }}\n      dangerouslySetInnerHTML={{ __html: svgString }}\n    />\n  );\n}\n\ninterface QRCodeImageProps extends React.ComponentProps<\"img\"> {\n  asChild?: boolean;\n}\n\nfunction QRCodeImage(props: QRCodeImageProps) {\n  const { alt = \"QR Code\", asChild, className, ...imageProps } = props;\n\n  const context = useQRCodeContext(IMAGE_NAME);\n  const dataUrl = useStore((state) => state.dataUrl);\n\n  if (!dataUrl) return null;\n\n  const ImagePrimitive = asChild ? Slot : \"img\";\n\n  return (\n    <ImagePrimitive\n      data-slot=\"qr-code-image\"\n      {...imageProps}\n      src={dataUrl}\n      alt={alt}\n      width={context.size}\n      height={context.size}\n      className={cn(\n        \"relative max-h-(--qr-code-size) max-w-(--qr-code-size)\",\n        className,\n      )}\n    />\n  );\n}\n\ninterface QRCodeDownloadProps extends React.ComponentProps<\"button\"> {\n  filename?: string;\n  format?: \"png\" | \"svg\";\n  asChild?: boolean;\n}\n\nfunction QRCodeDownload(props: QRCodeDownloadProps) {\n  const {\n    filename = \"qrcode\",\n    format = \"png\",\n    asChild,\n    className,\n    children,\n    ...buttonProps\n  } = props;\n\n  const dataUrl = useStore((state) => state.dataUrl);\n  const svgString = useStore((state) => state.svgString);\n\n  const onClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      buttonProps.onClick?.(event);\n      if (event.defaultPrevented) return;\n\n      const link = document.createElement(\"a\");\n\n      if (format === \"png\" && dataUrl) {\n        link.href = dataUrl;\n        link.download = `${filename}.png`;\n      } else if (format === \"svg\" && svgString) {\n        const blob = new Blob([svgString], { type: \"image/svg+xml\" });\n        link.href = URL.createObjectURL(blob);\n        link.download = `${filename}.svg`;\n      } else {\n        return;\n      }\n\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n\n      if (format === \"svg\" && svgString) {\n        URL.revokeObjectURL(link.href);\n      }\n    },\n    [dataUrl, svgString, filename, format, buttonProps.onClick],\n  );\n\n  const ButtonPrimitive = asChild ? Slot : \"button\";\n\n  return (\n    <ButtonPrimitive\n      type=\"button\"\n      data-slot=\"qr-code-download\"\n      {...buttonProps}\n      className={cn(\"max-w-(--qr-code-size)\", className)}\n      onClick={onClick}\n    >\n      {children ?? `Download ${format.toUpperCase()}`}\n    </ButtonPrimitive>\n  );\n}\n\ninterface QRCodeOverlayProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction QRCodeOverlay(props: QRCodeOverlayProps) {\n  const { asChild, className, ...overlayProps } = props;\n\n  const OverlayPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <OverlayPrimitive\n      data-slot=\"qr-code-overlay\"\n      {...overlayProps}\n      className={cn(\n        \"-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 flex items-center justify-center rounded-sm bg-background\",\n        className,\n      )}\n    />\n  );\n}\n\ninterface QRCodeSkeletonProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\nfunction QRCodeSkeleton(props: QRCodeSkeletonProps) {\n  const { asChild, className, style, ...skeletonProps } = props;\n\n  const context = useQRCodeContext(SKELETON_NAME);\n  const dataUrl = useStore((state) => state.dataUrl);\n  const svgString = useStore((state) => state.svgString);\n  const generationKey = useStore((state) => state.generationKey);\n\n  const isLoaded = dataUrl || svgString || generationKey;\n\n  if (isLoaded) return null;\n\n  const SkeletonPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <SkeletonPrimitive\n      data-slot=\"qr-code-skeleton\"\n      {...skeletonProps}\n      className={cn(\n        \"absolute max-h-(--qr-code-size) max-w-(--qr-code-size) animate-pulse bg-accent\",\n        className,\n      )}\n      style={{\n        width: context.size,\n        height: context.size,\n        ...style,\n      }}\n    />\n  );\n}\n\nexport {\n  QRCodeRoot as Root,\n  QRCodeCanvas as Canvas,\n  QRCodeSvg as Svg,\n  QRCodeImage as Image,\n  QRCodeOverlay as Overlay,\n  QRCodeSkeleton as Skeleton,\n  QRCodeDownload as Download,\n  //\n  QRCodeRoot as QRCode,\n  QRCodeCanvas,\n  QRCodeSvg,\n  QRCodeImage,\n  QRCodeOverlay,\n  QRCodeSkeleton,\n  QRCodeDownload,\n  //\n  useStore as useQRCode,\n  //\n  type QRCodeRootProps as QRCodeProps,\n};\n"],"names":["ROOT_NAME","CANVAS_NAME","SVG_NAME","IMAGE_NAME","SKELETON_NAME","useLazyRef","fn","ref","React","StoreContext","useStore","selector","store","getSnapshot","QRCodeContext","useQRCodeContext","consumerName","context","QRCodeRoot","props","value","size","level","margin","quality","backgroundColor","foregroundColor","onError","onGenerated","className","style","asChild","rootProps","canvasRef","listenersRef","stateRef","cb","key","updates","hasChanged","canvasOpts","generationKey","onQRCodeGenerate","targetGenerationKey","currentState","QRCode","dataUrl","svgString","error","parsedError","contextValue","rafId","RootPrimitive","Slot","jsx","cn","QRCodeCanvas","canvasProps","state","composedRef","useComposedRefs","QRCodeSvg","svgProps","QRCodeImage","alt","imageProps","QRCodeDownload","filename","format","children","buttonProps","onClick","event","link","blob","QRCodeOverlay","overlayProps","QRCodeSkeleton","skeletonProps"],"mappings":"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"}

package/dist/esm/components/QrCode/index.js

@@ -0,0 +1,16 @@
+import { Root as o, Download as e, Skeleton as a, Overlay as s, Image as d, Svg as C, Canvas as n } from "./QrCode.js";
+import { useQRCode as r } from "./QrCode.js";
+const t = Object.assign(o, {
+  Canvas: n,
+  Svg: C,
+  Image: d,
+  Overlay: s,
+  Skeleton: a,
+  Download: e
+});
+export {
+  t as QRCode,
+  t as QrCode,
+  r as useQRCode
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/QrCode/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/QrCode/index.ts"],"sourcesContent":["import {\n  Root,\n  Canvas,\n  Svg,\n  Image,\n  Overlay,\n  Skeleton,\n  Download,\n  useQRCode,\n  type QRCodeProps,\n} from \"./QrCode\";\n\nconst QRCode = Object.assign(Root, {\n  Canvas,\n  Svg,\n  Image,\n  Overlay,\n  Skeleton,\n  Download,\n});\n\nexport { QRCode, QRCode as QrCode };\n\n// Export hook và type\nexport { useQRCode };\nexport type { QRCodeProps };\n"],"names":["QRCode","Root","Canvas","Svg","Image","Overlay","Skeleton","Download"],"mappings":";;AAYA,MAAMA,IAAS,OAAO,OAAOC,GAAM;AAAA,EAAA,QACjCC;AAAAA,EAAA,KACAC;AAAAA,EAAA,OACAC;AAAAA,EAAA,SACAC;AAAAA,EAAA,UACAC;AAAAA,EAAA,UACAC;AACF,CAAC;"}

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,74 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import n from "react";
+import { RadioGroup as f, RadioGroupItem as I } from "@dsui/ui/components/radio-group";
+import { cn as c } from "@dsui/ui/index";
+const p = n.forwardRef(
+  (d, i) => {
+    const { label: e, variant: l = "option", rootClassName: o, ...s } = d, r = n.useId();
+    return /* @__PURE__ */ m("div", { className: c("flex items-center space-x-2", o), children: [
+      /* @__PURE__ */ a(I, { ref: i, id: r, ...s }),
+      l === "option" && e && /* @__PURE__ */ a(
+        "label",
+        {
+          htmlFor: r,
+          className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          children: e
+        }
+      ),
+      l === "button-group" && e && /* @__PURE__ */ a("span", { className: "sr-only", children: e })
+    ] });
+  }
+);
+p.displayName = "RadioItem";
+const u = n.forwardRef((d, i) => {
+  const {
+    options: e,
+    label: l,
+    helperText: o,
+    variant: s = "option",
+    size: r = "default",
+    color: x,
+    value: b,
+    onValueChange: N,
+    children: h,
+    className: R,
+    rootClassName: v,
+    disabled: g
+  } = d;
+  return /* @__PURE__ */ m("div", { className: c("flex flex-col gap-1.5", v), children: [
+    l && /* @__PURE__ */ a("label", { className: "text-sm font-medium", children: l }),
+    /* @__PURE__ */ m(
+      f,
+      {
+        ref: i,
+        value: b,
+        onValueChange: N,
+        variant: s,
+        className: c(R),
+        children: [
+          e && e.map((t) => /* @__PURE__ */ a(
+            p,
+            {
+              value: t.value,
+              label: t.label,
+              disabled: g || t.disabled,
+              variant: s,
+              size: r,
+              color: x
+            },
+            t.value
+          )),
+          h
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ a("p", { className: "text-xs text-muted-foreground", children: o })
+  ] });
+});
+u.displayName = "Radio";
+u.Group = f;
+u.Item = p;
+export {
+  u as default
+};
+//# sourceMappingURL=Radio.js.map

package/dist/esm/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  RadioGroupItem as SRadioGroupItem,\n  RadioGroup as SRadioGroup,\n  type RadioGroupProps,\n  type RadioGroupItemProps,\n} from \"@dsui/ui/components/radio-group\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype RadioItemProps = RadioGroupItemProps & {\n  label?: React.ReactNode;\n  variant?: \"option\" | \"button-group\";\n  size?: \"default\" | \"sm\" | \"lg\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  rootClassName?: string;\n};\n\nconst RadioItem = React.forwardRef<HTMLButtonElement, RadioItemProps>(\n  (props, ref) => {\n    const { label, variant = \"option\", rootClassName, ...itemProps } = props;\n    const id = React.useId();\n\n    return (\n      <div className={cn(\"flex items-center space-x-2\", rootClassName)}>\n        <SRadioGroupItem ref={ref} id={id} {...itemProps} />\n        {variant === \"option\" && label && (\n          <label\n            htmlFor={id}\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {variant === \"button-group\" && label && (\n          <span className=\"sr-only\">{label}</span>\n        )}\n      </div>\n    );\n  },\n);\n\nRadioItem.displayName = \"RadioItem\";\n\ntype RadioProps = {\n  options?: Array<{\n    label: React.ReactNode;\n    value: string;\n    disabled?: boolean;\n  }>;\n  label?: React.ReactNode;\n  helperText?: React.ReactNode;\n  variant?: \"option\" | \"button-group\";\n  size?: \"default\" | \"sm\" | \"lg\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  value?: string;\n  onValueChange?: (value: string) => void;\n  children?: React.ReactNode;\n  className?: string;\n  rootClassName?: string;\n  disabled?: boolean;\n} & RadioGroupProps;\n\nconst Radio = React.forwardRef<HTMLDivElement, RadioProps>((props, ref) => {\n  const {\n    options,\n    label,\n    helperText,\n    variant = \"option\",\n    size = \"default\",\n    color,\n    value,\n    onValueChange,\n    children,\n    className,\n    rootClassName,\n    disabled,\n  } = props;\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", rootClassName)}>\n      {label && <label className=\"text-sm font-medium\">{label}</label>}\n\n      <SRadioGroup\n        ref={ref}\n        value={value}\n        onValueChange={onValueChange}\n        variant={variant}\n        className={cn(className)}\n      >\n        {options &&\n          options.map((option) => (\n            <RadioItem\n              key={option.value}\n              value={option.value}\n              label={option.label}\n              disabled={disabled || option.disabled}\n              variant={variant}\n              size={size}\n              color={color}\n            />\n          ))}\n        {children}\n      </SRadioGroup>\n\n      {helperText && (\n        <p className=\"text-xs text-muted-foreground\">{helperText}</p>\n      )}\n    </div>\n  );\n}) as React.ForwardRefExoticComponent<\n  RadioProps & React.RefAttributes<HTMLDivElement>\n> & {\n  Group: typeof SRadioGroup;\n  Item: typeof RadioItem;\n};\n\nRadio.displayName = \"Radio\";\n\nRadio.Group = SRadioGroup;\nRadio.Item = RadioItem;\n\nexport default Radio;\nexport { type RadioProps, type RadioGroupProps, type RadioGroupItemProps };\n"],"names":["RadioItem","React","props","ref","label","variant","rootClassName","itemProps","id","cn","jsx","SRadioGroupItem","Radio","options","helperText","size","color","value","onValueChange","children","className","disabled","jsxs","SRadioGroup","option"],"mappings":";;;;AAyBA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CAACC,GAAOC,MAAQ;AACd,UAAM,EAAE,OAAAC,GAAO,SAAAC,IAAU,UAAU,eAAAC,GAAe,GAAGC,MAAcL,GAC7DM,IAAKP,EAAM,MAAA;AAEjB,6BACG,OAAA,EAAI,WAAWQ,EAAG,+BAA+BH,CAAa,GAC7D,UAAA;AAAA,MAAA,gBAAAI,EAACC,GAAA,EAAgB,KAAAR,GAAU,IAAAK,GAAS,GAAGD,EAAA,CAAW;AAAA,MACjDF,MAAY,YAAYD,KACvB,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASF;AAAA,UACT,WAAU;AAAA,UAET,UAAAJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,MAAY,kBAAkBD,uBAC5B,QAAA,EAAK,WAAU,WAAW,UAAAA,EAAA,CAAM;AAAA,IAAA,GAErC;AAAA,EAEJ;AACF;AAEAJ,EAAU,cAAc;AA6BxB,MAAMY,IAAQX,EAAM,WAAuC,CAACC,GAAOC,MAAQ;AACzE,QAAM;AAAA,IACJ,SAAAU;AAAA,IACA,OAAAT;AAAA,IACA,YAAAU;AAAA,IACA,SAAAT,IAAU;AAAA,IACV,MAAAU,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAd;AAAA,IACA,UAAAe;AAAA,EAAA,IACEnB;AAEJ,2BACG,OAAA,EAAI,WAAWO,EAAG,yBAAyBH,CAAa,GACtD,UAAA;AAAA,IAAAF,KAAS,gBAAAM,EAAC,SAAA,EAAM,WAAU,uBAAuB,UAAAN,GAAM;AAAA,IAExD,gBAAAkB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAApB;AAAA,QACA,OAAAc;AAAA,QACA,eAAAC;AAAA,QACA,SAAAb;AAAA,QACA,WAAWI,EAAGW,CAAS;AAAA,QAEtB,UAAA;AAAA,UAAAP,KACCA,EAAQ,IAAI,CAACW,MACX,gBAAAd;AAAA,YAACV;AAAA,YAAA;AAAA,cAEC,OAAOwB,EAAO;AAAA,cACd,OAAOA,EAAO;AAAA,cACd,UAAUH,KAAYG,EAAO;AAAA,cAC7B,SAAAnB;AAAA,cACA,MAAAU;AAAA,cACA,OAAAC;AAAA,YAAA;AAAA,YANKQ,EAAO;AAAA,UAAA,CAQf;AAAA,UACFL;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGFL,KACC,gBAAAJ,EAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAI,EAAA,CAAW;AAAA,EAAA,GAE7D;AAEJ,CAAC;AAODF,EAAM,cAAc;AAEpBA,EAAM,QAAQW;AACdX,EAAM,OAAOZ;"}

package/dist/esm/components/Rate/Rate.js

@@ -0,0 +1,191 @@
+import { jsx as l, jsxs as y, Fragment as V } from "react/jsx-runtime";
+import Q, { useState as x, useRef as W } from "react";
+import { StarHalf as X, Star as Y } from "lucide-react";
+import { cn as D } from "@dsui/ui/lib/utils";
+const Z = Q.forwardRef(
+  ({
+    count: c = 5,
+    value: N,
+    defaultValue: _ = 0,
+    allowHalf: a = !1,
+    allowClear: k = !0,
+    size: i = "middle",
+    color: b = "warning",
+    character: f,
+    className: A,
+    style: E,
+    disabled: s = !1,
+    autoFocus: F = !1,
+    keyboard: L = !0,
+    tooltips: m,
+    onChange: v,
+    onHoverChange: M,
+    onFocus: $,
+    onBlur: j,
+    onKeyDown: B
+  }, u) => {
+    const [K, p] = x(_), [o, R] = x(null), C = W(null), n = N !== void 0 ? N : K, S = {
+      small: 20,
+      middle: 24,
+      large: 32
+    }, H = {
+      primary: "text-primary [&_svg]:fill-primary",
+      secondary: "text-secondary [&_svg]:fill-secondary",
+      accent: "text-accent [&_svg]:fill-accent",
+      destructive: "text-destructive [&_svg]:fill-destructive",
+      muted: "text-muted-foreground [&_svg]:fill-muted-foreground",
+      success: "text-success [&_svg]:fill-success",
+      error: "text-error [&_svg]:fill-error",
+      warning: "text-yellow-400 [&_svg]:fill-yellow-400"
+    }, d = (e, r) => {
+      if (s) return;
+      const t = r ? e + 0.5 : e + 1;
+      k && t === n ? (p(0), v?.(0)) : (p(t), v?.(t));
+    }, h = (e, r) => {
+      if (s) return;
+      const t = r ? e + 0.5 : e + 1;
+      R(t), M?.(t);
+    }, P = () => {
+      R(null), M?.(0);
+    }, T = (e) => {
+      if (!L || s) return;
+      B?.(e);
+      const r = a ? 0.5 : 1;
+      let t = n;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          e.preventDefault(), t = Math.min(n + r, c);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          e.preventDefault(), t = Math.max(n - r, 0);
+          break;
+        case "Home":
+          e.preventDefault(), t = a ? 0.5 : 1;
+          break;
+        case "End":
+          e.preventDefault(), t = c;
+          break;
+        default:
+          return;
+      }
+      p(t), v?.(t);
+    }, U = () => {
+      $?.();
+    }, q = () => {
+      j?.();
+    }, z = (e) => {
+      const r = o !== null ? o : n;
+      return r >= e + 1 ? 100 : r > e && r < e + 1 ? (r - e) * 100 : 0;
+    }, G = (e) => {
+      if (!a) return !1;
+      const t = (o !== null ? o : n) - e;
+      return t > 0 && t <= 0.5;
+    }, g = (e = !1) => typeof f == "function" ? f({
+      count: c,
+      value: n,
+      defaultValue: _,
+      allowHalf: a,
+      allowClear: k,
+      size: i,
+      disabled: s
+    }) : e ? /* @__PURE__ */ l(X, { className: "w-full h-full" }) : f || /* @__PURE__ */ l(Y, { className: "w-full h-full" }), J = (e) => {
+      if (!(!m || !m[e]))
+        return m[e];
+    };
+    return /* @__PURE__ */ l(
+      "div",
+      {
+        ref: (e) => {
+          C.current = e, typeof u == "function" ? u(e) : u && (u.current = e);
+        },
+        className: D(
+          "inline-flex items-center gap-1",
+          s && "opacity-50 cursor-not-allowed",
+          !s && "cursor-pointer",
+          A
+        ),
+        style: E,
+        onMouseLeave: P,
+        onKeyDown: T,
+        onFocus: U,
+        onBlur: q,
+        tabIndex: s ? -1 : 0,
+        role: "slider",
+        "aria-label": "Rate",
+        "aria-valuemin": 0,
+        "aria-valuemax": c,
+        "aria-valuenow": n,
+        "aria-disabled": s,
+        autoFocus: F,
+        children: Array.from({ length: c }, (e, r) => {
+          const t = z(r), w = J(r), O = G(r);
+          return /* @__PURE__ */ y("div", { className: "relative group", title: w, children: [
+            /* @__PURE__ */ y(
+              "div",
+              {
+                className: "relative inline-flex",
+                style: {
+                  width: `${S[i]}px`,
+                  height: `${S[i]}px`
+                },
+                children: [
+                  /* @__PURE__ */ l("div", { className: "text-muted-foreground/30 pointer-events-none", children: g(!1) }),
+                  t > 0 && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: D(
+                        "absolute inset-0 pointer-events-none",
+                        H[b]
+                      ),
+                      children: O ? g(!0) : /* @__PURE__ */ l(
+                        "div",
+                        {
+                          className: "overflow-hidden",
+                          style: { width: `${t}%` },
+                          children: g(!1)
+                        }
+                      )
+                    }
+                  ),
+                  !s && /* @__PURE__ */ l(V, { children: a ? /* @__PURE__ */ y(V, { children: [
+                    /* @__PURE__ */ l(
+                      "div",
+                      {
+                        className: "absolute inset-0 w-1/2 cursor-pointer",
+                        onClick: () => d(r, !0),
+                        onMouseEnter: () => h(r, !0)
+                      }
+                    ),
+                    /* @__PURE__ */ l(
+                      "div",
+                      {
+                        className: "absolute inset-0 left-1/2 w-1/2 cursor-pointer",
+                        onClick: () => d(r, !1),
+                        onMouseEnter: () => h(r, !1)
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: "absolute inset-0 cursor-pointer",
+                      onClick: () => d(r, !1),
+                      onMouseEnter: () => h(r, !1)
+                    }
+                  ) })
+                ]
+              }
+            ),
+            w && (o === r + 1 || a && o === r + 0.5) && /* @__PURE__ */ l("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs bg-foreground text-background rounded whitespace-nowrap z-10", children: w })
+          ] }, r);
+        })
+      }
+    );
+  }
+);
+Z.displayName = "Rate";
+export {
+  Z as default
+};
+//# sourceMappingURL=Rate.js.map