@sth87/shadcn-design-system 0.0.35 → 0.1.0

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

@@ -60,9 +60,9 @@ function be(o) {
   const {
     value: e,
     size: t = 200,
-    level: s = "M",
+    level: n = "M",
     margin: i = 1,
-    quality: n = 0.92,
+    quality: s = 0.92,
     backgroundColor: r = "#ffffff",
     foregroundColor: a = "#000000",
     onError: d,
@@ -97,9 +97,9 @@ function be(o) {
     }
   }), [P, x]), S = l.useMemo(
     () => ({
-      errorCorrectionLevel: s,
+      errorCorrectionLevel: n,
       type: "image/png",
-      quality: n,
+      quality: s,
       margin: i,
       color: {
         dark: a,
@@ -107,16 +107,16 @@ function be(o) {
       },
       width: t
     }),
-    [s, i, a, r, t, n]
+    [n, i, a, r, t, s]
   ), q = l.useMemo(() => e ? JSON.stringify({
     value: e,
     size: t,
-    level: s,
+    level: n,
     margin: i,
-    quality: n,
+    quality: s,
     foregroundColor: a,
     backgroundColor: r
-  }) : "", [e, s, i, a, r, t, n]), z = l.useCallback(
+  }) : "", [e, n, i, a, r, t, s]), z = l.useCallback(
     async (c) => {
       if (!e || !c) return;
       const C = p.getState();
@@ -161,13 +161,13 @@ function be(o) {
     () => ({
       value: e,
       size: t,
-      level: s,
+      level: n,
       margin: i,
       backgroundColor: r,
       foregroundColor: a,
       canvasRef: k
     }),
-    [e, t, r, a, s, i]
+    [e, t, r, a, n, i]
   );
   l.useLayoutEffect(() => {
     if (q) {
@@ -183,7 +183,7 @@ function be(o) {
     {
       "data-slot": "qr-code",
       ...b,
-      className: w(Q, "relative flex flex-col items-center gap-2"),
+      className: w(Q, "ds:relative ds:flex ds:flex-col ds:items-center ds:gap-2"),
       style: {
         "--qr-code-size": `${t}px`,
         ...m
@@ -193,41 +193,41 @@ function be(o) {
   ) }) });
 }
 function D(o) {
-  const { asChild: e, className: t, ref: s, ...i } = o, n = N(G), r = h((R) => R.generationKey), a = I(s, n.canvasRef);
+  const { asChild: e, className: t, ref: n, ...i } = o, s = N(G), r = h((R) => R.generationKey), a = I(n, s.canvasRef);
   return /* @__PURE__ */ v(
     e ? y : "canvas",
     {
       "data-slot": "qr-code-canvas",
       ...i,
       ref: a,
-      width: n.size,
-      height: n.size,
+      width: s.size,
+      height: s.size,
       className: w(
-        "relative max-h-(--qr-code-size) max-w-(--qr-code-size)",
-        !r && "invisible",
+        "ds:relative ds:max-h-(--qr-code-size) ds:max-w-(--qr-code-size)",
+        !r && "ds:invisible",
         t
       )
     }
   );
 }
 function Pe(o) {
-  const { asChild: e, className: t, style: s, ...i } = o, n = N(K), r = h((d) => d.svgString);
+  const { asChild: e, className: t, style: n, ...i } = o, s = N(K), r = h((d) => d.svgString);
   return r ? /* @__PURE__ */ v(
     e ? y : "div",
     {
       "data-slot": "qr-code-svg",
       ...i,
       className: w(
-        "relative max-h-(--qr-code-size) max-w-(--qr-code-size)",
+        "ds:relative ds:max-h-(--qr-code-size) ds:max-w-(--qr-code-size)",
         t
       ),
-      style: { width: n.size, height: n.size, ...s },
+      style: { width: s.size, height: s.size, ...n },
       dangerouslySetInnerHTML: { __html: r }
     }
   ) : null;
 }
 function Ne(o) {
-  const { alt: e = "QR Code", asChild: t, className: s, ...i } = o, n = N(_), r = h((d) => d.dataUrl);
+  const { alt: e = "QR Code", asChild: t, className: n, ...i } = o, s = N(_), r = h((d) => d.dataUrl);
   return r ? /* @__PURE__ */ v(
     t ? y : "img",
     {
@@ -235,11 +235,11 @@ function Ne(o) {
       ...i,
       src: r,
       alt: e,
-      width: n.size,
-      height: n.size,
+      width: s.size,
+      height: s.size,
       className: w(
-        "relative max-h-(--qr-code-size) max-w-(--qr-code-size)",
-        s
+        "ds:relative ds:max-h-(--qr-code-size) ds:max-w-(--qr-code-size)",
+        n
       )
     }
   ) : null;
@@ -248,9 +248,9 @@ function Qe(o) {
   const {
     filename: e = "qrcode",
     format: t = "png",
-    asChild: s,
+    asChild: n,
     className: i,
-    children: n,
+    children: s,
     ...r
   } = o, a = h((m) => m.dataUrl), d = h((m) => m.svgString), R = l.useCallback(
     (m) => {
@@ -268,46 +268,46 @@ function Qe(o) {
     [a, d, e, t, r.onClick]
   );
   return /* @__PURE__ */ v(
-    s ? y : "button",
+    n ? y : "button",
     {
       type: "button",
       "data-slot": "qr-code-download",
       ...r,
-      className: w("max-w-(--qr-code-size)", i),
+      className: w("ds:max-w-(--qr-code-size)", i),
       onClick: R,
-      children: n ?? `Download ${t.toUpperCase()}`
+      children: s ?? `Download ${t.toUpperCase()}`
     }
   );
 }
 function ke(o) {
-  const { asChild: e, className: t, ...s } = o;
+  const { asChild: e, className: t, ...n } = o;
   return /* @__PURE__ */ v(
     e ? y : "div",
     {
       "data-slot": "qr-code-overlay",
-      ...s,
+      ...n,
       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",
+        "ds:-translate-x-1/2 ds:-translate-y-1/2 ds:absolute ds:top-1/2 ds:left-1/2 ds:flex ds:items-center ds:justify-center ds:rounded-sm ds:bg-background",
         t
       )
     }
   );
 }
 function qe(o) {
-  const { asChild: e, className: t, style: s, ...i } = o, n = N($), r = h((m) => m.dataUrl), a = h((m) => m.svgString), d = h((m) => m.generationKey);
+  const { asChild: e, className: t, style: n, ...i } = o, s = N($), r = h((m) => m.dataUrl), a = h((m) => m.svgString), d = h((m) => m.generationKey);
   return r || a || d ? null : /* @__PURE__ */ v(
     e ? y : "div",
     {
       "data-slot": "qr-code-skeleton",
       ...i,
       className: w(
-        "absolute max-h-(--qr-code-size) max-w-(--qr-code-size) animate-pulse bg-accent",
+        "ds:absolute ds:max-h-(--qr-code-size) ds:max-w-(--qr-code-size) ds:animate-pulse ds:bg-accent",
         t
       ),
       style: {
-        width: n.size,
-        height: n.size,
-        ...s
+        width: s.size,
+        height: s.size,
+        ...n
       }
     }
   );

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

@@ -1 +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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"}
+{"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, \"ds:relative ds:flex ds:flex-col ds:items-center ds: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        \"ds:relative ds:max-h-(--qr-code-size) ds:max-w-(--qr-code-size)\",\n        !generationKey && \"ds: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        \"ds:relative ds:max-h-(--qr-code-size) ds: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        \"ds:relative ds:max-h-(--qr-code-size) ds: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(\"ds: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        \"ds:-translate-x-1/2 ds:-translate-y-1/2 ds:absolute ds:top-1/2 ds:left-1/2 ds:flex ds:items-center ds:justify-center ds:rounded-sm ds: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        \"ds:absolute ds:max-h-(--qr-code-size) ds:max-w-(--qr-code-size) ds:animate-pulse ds: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/Radio/Radio.js

@@ -1,5 +1,5 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import d from "react";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import p from "react";
 import { RadioGroup as f, RadioGroupItem as I } from "../../packages/ui/src/components/radio-group.js";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
@@ -32,25 +32,25 @@ import "../../packages/ui/src/components/sidebar.js";
 import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
-const c = d.forwardRef(
-  (l, p) => {
-    const { label: o, variant: r = "option", rootClassName: t, ...i } = l, a = d.useId();
-    return /* @__PURE__ */ s("div", { className: n("flex items-center space-x-2", t), children: [
-      /* @__PURE__ */ e(I, { ref: p, id: a, ...i }),
+const c = p.forwardRef(
+  (s, d) => {
+    const { label: o, variant: r = "option", rootClassName: t, ...i } = s, a = p.useId();
+    return /* @__PURE__ */ l("div", { className: n("ds:flex ds:items-center ds:space-x-2", t), children: [
+      /* @__PURE__ */ e(I, { ref: d, id: a, ...i }),
       r === "option" && o && /* @__PURE__ */ e(
         "label",
         {
           htmlFor: a,
-          className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          className: "ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70",
           children: o
         }
       ),
-      r === "button-group" && o && /* @__PURE__ */ e("span", { className: "sr-only", children: o })
+      r === "button-group" && o && /* @__PURE__ */ e("span", { className: "ds:sr-only", children: o })
     ] });
   }
 );
 c.displayName = "RadioItem";
-const u = d.forwardRef((l, p) => {
+const u = p.forwardRef((s, d) => {
   const {
     options: o,
     label: r,
@@ -64,13 +64,13 @@ const u = d.forwardRef((l, p) => {
     className: R,
     rootClassName: v,
     disabled: g
-  } = l;
-  return /* @__PURE__ */ s("div", { className: n("flex flex-col gap-1.5", v), children: [
-    r && /* @__PURE__ */ e("label", { className: "text-sm font-medium", children: r }),
-    /* @__PURE__ */ s(
+  } = s;
+  return /* @__PURE__ */ l("div", { className: n("ds:flex ds:flex-col ds:gap-1.5", v), children: [
+    r && /* @__PURE__ */ e("label", { className: "ds:text-sm ds:font-medium", children: r }),
+    /* @__PURE__ */ l(
       f,
       {
-        ref: p,
+        ref: d,
         value: b,
         onValueChange: N,
         variant: i,
@@ -92,7 +92,7 @@ const u = d.forwardRef((l, p) => {
         ]
       }
     ),
-    t && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: t })
+    t && /* @__PURE__ */ e("p", { className: "ds:text-xs ds:text-muted-foreground", children: t })
   ] });
 });
 u.displayName = "Radio";

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

@@ -1 +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\nexport type 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\nexport type 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 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;"}
+{"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\nexport type 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(\"ds:flex ds:items-center ds:space-x-2\", rootClassName)}>\n        <SRadioGroupItem ref={ref} id={id} {...itemProps} />\n        {variant === \"option\" && label && (\n          <label\n            htmlFor={id}\n            className=\"ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n          >\n            {label}\n          </label>\n        )}\n        {variant === \"button-group\" && label && (\n          <span className=\"ds:sr-only\">{label}</span>\n        )}\n      </div>\n    );\n  }\n);\n\nRadioItem.displayName = \"RadioItem\";\n\nexport type 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(\"ds:flex ds:flex-col ds:gap-1.5\", rootClassName)}>\n      {label && <label className=\"ds:text-sm ds: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=\"ds:text-xs ds: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 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,wCAAwCH,CAAa,GACtE,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,cAAc,UAAAA,EAAA,CAAM;AAAA,IAAA,GAExC;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,kCAAkCH,CAAa,GAC/D,UAAA;AAAA,IAAAF,KAAS,gBAAAM,EAAC,SAAA,EAAM,WAAU,6BAA6B,UAAAN,GAAM;AAAA,IAE9D,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,uCAAuC,UAAAI,EAAA,CAAW;AAAA,EAAA,GAEnE;AAEJ,CAAC;AAODF,EAAM,cAAc;AAEpBA,EAAM,QAAQW;AACdX,EAAM,OAAOZ;"}