@jbpark/ui-kit 3.3.0 → 3.4.0

package/dist/Button.d.mts

@@ -11,8 +11,19 @@ interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {
   danger?: boolean;
   disabled?: boolean;
   size?: 'small' | 'middle' | 'large';
+  /**
+   * antd-style visual preset. Maps to a `variant` internally — passing
+   * both `type` and `variant` lets `variant` win, so it can override the
+   * preset for one-off cases without needing every value duplicated here.
+   */
   type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
   variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';
+  /**
+   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate
+   * from the antd-style `type` above. Defaults to `'button'` so a Button
+   * placed inside a `<form>` doesn't submit it unless explicitly opted in.
+   */
+  htmlType?: 'button' | 'submit' | 'reset';
   shape?: 'default' | 'circle' | 'round';
   color?: PresetColors | 'default' | 'primary' | 'danger';
   loading?: boolean | {
@@ -24,6 +35,7 @@ declare const Button: ({
   className,
   type,
   variant,
+  htmlType,
   size,
   color,
   shape,

package/dist/Button.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;KAQK,WAAA,GAAc,OAAA;AAAA,KAEd,YAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,WAAA;EAClC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA,GAAQ,YAAA;EACR,OAAA;IAAsB,IAAA,EAAM,KAAA,CAAM,SAAA;EAAA;AAAA;AAAA,cAkD9B,MAAA;EAAU,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAeb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Button.d.mts","names":[],"sources":["../src/components/atoms/button.tsx"],"mappings":";;;;;KAQK,WAAA,GAAc,OAAA;AAAA,KAEd,YAAA;AAAA,UAeY,KAAA,SAAc,IAAA,CAAK,WAAA;EAClC,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,KAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EAtB6B;AAAA;;;;EA4B7B,IAAA;EACA,OAAA;EAZqB;;;;;EAkBrB,QAAA;EACA,KAAA;EACA,KAAA,GAAQ,YAAA;EACR,OAAA;IAAsB,IAAA,EAAM,KAAA,CAAM,SAAA;EAAA;AAAA;AAAA,cAkD9B,MAAA;EAAU,IAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,WAAA;EAAA,GAAA;AAAA,GAgBb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Button.mjs

@@ -37,14 +37,17 @@ const shapesClasses = {
 	circle: "rounded-full",
 	round: "rounded-2xl"
 };
-const Button = ({ icon, className, type = "default", variant, size = "middle", color = "default", shape = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+const Button = ({ icon, className, type = "default", variant, htmlType = "button", size = "middle", color = "default", shape = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
 	const iconOnly = icon && !children;
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
 	const resolvedVariant = variant ?? typeToVariant[type] ?? "solid";
+	const isLoading = !!loading;
 	const displayIcon = loading ? typeof loading === "object" ? loading.icon : /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : icon;
 	return /* @__PURE__ */ jsxs(Core, {
-		disabled,
+		type: htmlType,
+		disabled: disabled || isLoading,
+		"aria-busy": isLoading,
 		variant: "default",
 		"data-color": computedColor,
 		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[resolvedVariant], sizesClasses[size], iconOnly && ["p-0", iconClasses[size]], shapesClasses[shape || "default"], block && "w-full", colored && (resolvedVariant === "solid" ? [

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      disabled={disabled}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size],\n        iconOnly && ['p-0', iconClasses[size]],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;AAOA,MAAM,OAAOA;AA+Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAE1D,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACW;EACV,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,OACb,YAAY,CAAC,OAAO,YAAY,MAAM,EACtC,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}
+{"version":3,"file":"Button.mjs","names":["button.Button"],"sources":["../src/components/atoms/button.tsx"],"sourcesContent":["'use client';\n\nimport { LoaderCircle } from 'lucide-react';\n\nimport { button } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst Core = button.Button;\ntype ButtonProps = button.Props;\n\ntype PresetColors =\n  | 'blue'\n  | 'purple'\n  | 'cyan'\n  | 'green'\n  | 'magenta'\n  | 'pink'\n  | 'red'\n  | 'orange'\n  | 'yellow'\n  | 'volcano'\n  | 'geekblue'\n  | 'lime'\n  | 'gold';\n\nexport interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  /**\n   * antd-style visual preset. Maps to a `variant` internally — passing\n   * both `type` and `variant` lets `variant` win, so it can override the\n   * preset for one-off cases without needing every value duplicated here.\n   */\n  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\n  /**\n   * Native `<button>` `type` (`button`/`submit`/`reset`), kept separate\n   * from the antd-style `type` above. Defaults to `'button'` so a Button\n   * placed inside a `<form>` doesn't submit it unless explicitly opted in.\n   */\n  htmlType?: 'button' | 'submit' | 'reset';\n  shape?: 'default' | 'circle' | 'round';\n  color?: PresetColors | 'default' | 'primary' | 'danger';\n  loading?: boolean | { icon: React.ReactNode };\n}\n\nconst variantClasses: Record<string, string> = {\n  solid: '',\n  outlined: cn(\n    'border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  filled: cn('bg-muted text-foreground', 'hover:bg-muted/80'),\n  text: cn('bg-transparent text-foreground', 'hover:bg-accent'),\n  link: cn(\n    'bg-transparent text-primary',\n    'underline-offset-4 hover:underline',\n    'hover:bg-primary/10',\n  ),\n};\n\nconst typeToVariant: Record<string, string> = {\n  primary: 'solid',\n  default: 'outlined',\n  dashed: 'dashed',\n  text: 'text',\n  link: 'link',\n};\n\nconst sizesClasses: Record<string, string> = {\n  small: 'h-6 px-3 text-sm',\n  middle: 'h-8 px-4 text-base',\n  large: 'h-10 px-5 text-lg',\n};\n\nconst iconClasses: Record<string, string> = {\n  small: `size-6 [&_svg:not([class*='size-'])]:size-3`,\n  middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,\n  large: `size-10 [&_svg:not([class*='size-'])]:size-5`,\n};\n\nconst shapesClasses = {\n  default: 'rounded-sm',\n  circle: 'rounded-full',\n  round: 'rounded-2xl',\n};\n\nconst Button = ({\n  icon,\n  className,\n  type = 'default',\n  variant,\n  htmlType = 'button',\n  size = 'middle',\n  color = 'default',\n  shape = 'default',\n  block = false,\n  disabled,\n  loading,\n  danger,\n  children,\n  onMouseDown,\n  ...props\n}: Props) => {\n  const iconOnly = icon && !children;\n  const computedColor = danger ? 'danger' : color;\n  const colored = computedColor && computedColor !== 'default';\n  const resolvedVariant = variant ?? typeToVariant[type] ?? 'solid';\n  const isLoading = !!loading;\n\n  const displayIcon = loading ? (\n    typeof loading === 'object' ? (\n      loading.icon\n    ) : (\n      <LoaderCircle className=\"animate-spin\" />\n    )\n  ) : (\n    icon\n  );\n\n  return (\n    <Core\n      type={htmlType}\n      disabled={disabled || isLoading}\n      aria-busy={isLoading}\n      variant=\"default\"\n      data-color={computedColor}\n      className={cn(\n        'inline-flex items-center justify-center gap-x-2',\n        'rounded-lg',\n        'cursor-pointer',\n        'h-auto py-0',\n        'transition-all',\n        variantClasses[resolvedVariant],\n        sizesClasses[size],\n        iconOnly && ['p-0', iconClasses[size]],\n        shapesClasses[shape || 'default'],\n        block && 'w-full',\n        colored &&\n          (resolvedVariant === 'solid'\n            ? [\n                'bg-(--btn-bg)',\n                'hover:bg-(--btn-bg-hover)',\n                'active:bg-(--btn-bg-active)',\n                'text-(--btn-fg)',\n                'border-(--btn-border)',\n              ]\n            : [\n                'text-(--btn-bg)',\n                'border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]',\n                //\n              ]),\n        className,\n        //\n      )}\n      onMouseDown={e => {\n        onMouseDown?.(e);\n      }}\n      {...props}\n    >\n      {displayIcon}\n      {children}\n    </Core>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;;AAOA,MAAM,OAAOA;AA0Cb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,yEACA,iCACA,kBACD;CACD,QAAQ,GACN,uFACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,gBAAwC;CAC5C,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;CACP;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,cAAsC;CAC1C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,gBAAgB;CACpB,SAAS;CACT,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,OAAO,WACP,SACA,WAAW,UACX,OAAO,UACP,QAAQ,WACR,QAAQ,WACR,QAAQ,OACR,UACA,SACA,QACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,WAAW,QAAQ,CAAC;CAC1B,MAAM,gBAAgB,SAAS,WAAW;CAC1C,MAAM,UAAU,iBAAiB,kBAAkB;CACnD,MAAM,kBAAkB,WAAW,cAAc,SAAS;CAC1D,MAAM,YAAY,CAAC,CAAC;CAEpB,MAAM,cAAc,UAClB,OAAO,YAAY,WACjB,QAAQ,OAER,oBAAC,gBAAa,WAAU,iBAAiB,GAG3C;AAGF,QACE,qBAAC;EACC,MAAM;EACN,UAAU,YAAY;EACtB,aAAW;EACX,SAAQ;EACR,cAAY;EACZ,WAAW,GACT,mDACA,cACA,kBACA,eACA,kBACA,eAAe,kBACf,aAAa,OACb,YAAY,CAAC,OAAO,YAAY,MAAM,EACtC,cAAc,SAAS,YACvB,SAAS,UACT,YACG,oBAAoB,UACjB;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,iEAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}

package/dist/components/atoms/checkbox/checkbox.d.mts

@@ -1,4 +1,5 @@
-import { OptionValue } from "./group.mjs";
+import { OptionValue } from "../option-group.mjs";
+import "./group.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/checkbox/checkbox.d.ts
@@ -7,11 +8,13 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'>
   defaultChecked?: boolean;
   checked?: boolean;
   value?: OptionValue;
+  /** Native form field name — participates in `FormData` when set. */
+  name?: string;
   disabled?: boolean;
-  icons?: {
+  icons?: Partial<{
     checked: React.ReactNode;
     unchecked: React.ReactNode;
-  };
+  }>;
   children?: React.ReactNode;
   onChange?: (checked: boolean) => void;
 }
@@ -24,6 +27,7 @@ declare const Checkbox: ({
   disabled,
   defaultChecked,
   checked: _checked,
+  name,
   onChange: _onChange,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;

package/dist/components/atoms/checkbox/checkbox.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"mappings":";;;;UAciB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,QAAA;EAAY,SAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAWf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"mappings":";;;;;UAeiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EAPa;EASrB,IAAA;EACA,QAAA;EACA,KAAA,GAAQ,OAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EAC7D,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,QAAA;EAAY,SAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,IAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAYf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/checkbox/checkbox.mjs

@@ -4,29 +4,35 @@ import { cn } from "../../../utils.mjs";
 import { checkbox_exports } from "../../../core/checkbox.mjs";
 import { label_exports } from "../../../core/label.mjs";
 import { Square, SquareCheck } from "lucide-react";
-import { useId, useState } from "react";
+import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/checkbox/checkbox.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
 const { Label: CoreLabel } = label_exports;
-const Checkbox = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
-	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
+const Checkbox = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, name, onChange: _onChange = () => {}, ...props }) => {
+	const [checked, setChecked] = useControllableState({
+		value: _checked,
+		defaultValue: defaultChecked ?? false,
+		onChange: _onChange
+	});
 	const id = useId();
-	const controlled = _checked !== void 0;
-	const checked = controlled ? _checked : uncontrolledChecked;
+	const itemValue = String(_value);
 	const cursorClassName = disabled ? "cursor-not-allowed" : "cursor-pointer";
 	const onChange = (next) => {
 		if (disabled) return;
-		if (!controlled) setUncontrolledChecked(next);
-		_onChange(next);
+		setChecked(next);
 	};
 	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("input", {
 			id,
 			hidden: true,
 			type: "checkbox",
+			name,
+			value: itemValue,
 			checked,
+			disabled,
 			onChange: (e) => {
 				onChange(e.target.checked);
 			}
@@ -38,12 +44,12 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 			tabIndex: disabled ? -1 : 0,
 			className: cn(cursorClassName, disabled && "opacity-50"),
 			onClick: () => {
-				document.getElementById(id)?.click();
+				onChange(!checked);
 			},
 			onKeyDown: (e) => {
 				if (e.key === "Enter" || e.key === " ") {
 					e.preventDefault();
-					document.getElementById(id)?.click();
+					onChange(!checked);
 				}
 			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(SquareCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Square, {})
@@ -55,6 +61,8 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 		})
 	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CoreCheckbox, {
 		id,
+		name,
+		value: itemValue,
 		checked,
 		disabled,
 		className: cn(cursorClassName),

package/dist/components/atoms/checkbox/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState } from 'react';\n\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  disabled?: boolean;\n  icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const id = useId();\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            document.getElementById(id)?.click();\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        checked={checked}\n        disabled={disabled}\n        className={cn(cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAgB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,KAAK,OAAO;CAClB,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;GAEtC,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,eAAe,GAAG,EAAE,OAAO;;;aAIvC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,8CACE,oBAAC;EACK;EACK;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG"}
+{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onChange(!checked);\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        className={cn(cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;EACX,CAAC;CAEF,MAAM,KAAK,OAAO;CAClB,MAAM,YAAY,OAAO,OAAO;CAEhC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,aAAW,KAAK;;CAGlB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,CAAC,QAAQ;;GAEpB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,CAAC,QAAQ;;;aAIrB,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,8CACE,oBAAC;EACK;EACE;EACN,OAAO;EACE;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG"}

package/dist/components/atoms/checkbox/group.d.mts

@@ -1,20 +1,17 @@
+import { OptionGroupClassNames, OptionValue, Options } from "../option-group.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/checkbox/group.d.ts
-type OptionValue = string | number | boolean;
-type Option = {
-  label: string;
-  value: OptionValue;
-  disabled?: boolean;
-};
-type Options = string[] | number[] | boolean[] | Option[];
 interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' | 'defaultValue' | 'value'> {
   options?: Options;
   orientation?: 'vertical' | 'horizontal';
   placement?: 'left' | 'right';
-  classNames?: Record<string, string>;
+  classNames?: OptionGroupClassNames;
   defaultValue?: OptionValue[];
   value?: OptionValue[];
+  /** Native form field name, shared across every option's checkbox. */
+  name?: string;
+  disabled?: boolean;
   onChange?: (values: OptionValue[]) => void;
 }
 declare const Group: ({
@@ -23,11 +20,13 @@ declare const Group: ({
   className,
   classNames,
   options: _options,
+  name,
+  disabled,
   defaultValue,
   value: _value,
   onChange: _onChange,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Group, OptionValue };
+export { Group };
 //# sourceMappingURL=group.d.mts.map

package/dist/components/atoms/checkbox/group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"mappings":";;;KAQY,WAAA;AAAA,KAEP,MAAA;EACH,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGG,OAAA,qCAA4C,MAAA;AAAA,UAEhC,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,MAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EACR,QAAA,IAAY,MAAA,EAAQ,WAAA;AAAA;AAAA,cAGhB,KAAA;EAAS,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAUZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"mappings":";;;;UAiBiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,qBAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EAFK;EAIb,IAAA;EACA,QAAA;EACA,QAAA,IAAY,MAAA,EAAQ,WAAA;AAAA;AAAA,cAGhB,KAAA;EAAS,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAYZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/checkbox/group.mjs

@@ -2,22 +2,20 @@
 
 import { cn } from "../../../utils.mjs";
 import Checkbox from "./checkbox.mjs";
-import { useState } from "react";
+import { normalizeOptions } from "../option-group.mjs";
 import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/checkbox/group.tsx
-const Group = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || []);
-	const controlled = _value !== void 0;
-	const value = controlled ? _value : uncontrolledValue;
-	const options = _options.map((item) => typeof item === "object" ? item : {
-		label: `${item}`,
-		value: item
+const Group = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], name, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
+	const [value, setValue] = useControllableState({
+		value: _value,
+		defaultValue: defaultValue ?? [],
+		onChange: _onChange
 	});
+	const options = normalizeOptions(_options);
 	const onChange = (checked, optionValue) => {
-		const nextValue = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
-		if (!controlled) setUncontrolledValue(nextValue);
-		_onChange(nextValue);
+		setValue(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
 	};
 	return /* @__PURE__ */ jsx("ul", {
 		...props,
@@ -29,9 +27,10 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 				children: /* @__PURE__ */ jsx(Checkbox, {
 					placement,
 					className: cn(classNames?.item),
+					name,
 					value: item.value,
 					checked,
-					disabled: item.disabled,
+					disabled: disabled || item.disabled,
 					onChange: (checked) => onChange(checked, item.value),
 					children: item.label
 				})

package/dist/components/atoms/checkbox/group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Checkbox from './checkbox';\n\nexport type OptionValue = string | number | boolean;\n\ntype Option = {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n};\n\ntype Options = string[] | number[] | boolean[] | Option[];\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: Record<string, string>;\n  defaultValue?: OptionValue[];\n  value?: OptionValue[];\n  onChange?: (values: OptionValue[]) => void;\n}\n\nconst Group = ({\n  orientation = 'vertical',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<OptionValue[]>(\n    defaultValue || [],\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const options: Option[] = _options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    const nextValue = checked\n      ? [...value, optionValue]\n      : value.filter(v => v !== optionValue);\n\n    if (!controlled) {\n      setUncontrolledValue(nextValue);\n    }\n    _onChange(nextValue);\n  };\n\n  return (\n    <ul\n      {...props}\n      className={cn(\n        orientation === 'vertical' ? 'space-y-2' : 'flex gap-2',\n        className,\n      )}\n    >\n      {options.map((item: Option) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={String(item.value)}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            <Checkbox\n              placement={placement}\n              className={cn(classNames?.item)}\n              value={item.value}\n              checked={checked}\n              disabled={item.disabled}\n              onChange={checked => onChange(checked, item.value)}\n            >\n              {item.label}\n            </Checkbox>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default Group;\n"],"mappings":";;;;;;;;AA+BA,MAAM,SAAS,EACb,cAAc,YACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,gBAAgB,EAAE,CACnB;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,UAAoB,SAAS,KAAI,SACrC,OAAO,SAAS,WACZ,OACA;EACE,OAAO,GAAG;EACV,OAAO;EACR,CACN;CAED,MAAM,YAAY,SAAkB,gBAA6B;EAC/D,MAAM,YAAY,UACd,CAAC,GAAG,OAAO,YAAY,GACvB,MAAM,QAAO,MAAK,MAAM,YAAY;AAExC,MAAI,CAAC,WACH,sBAAqB,UAAU;AAEjC,YAAU,UAAU;;AAGtB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,gBAAgB,aAAa,cAAc,cAC3C,UACD;YAEA,QAAQ,KAAK,SAAiB;GAC7B,MAAM,UAAU,MAAM,SAAS,KAAK,MAAM;AAE1C,UACE,oBAAC;IAEC,WAAW,GAAG,QAAQ,YAAY,QAAQ;cAE1C,oBAAC;KACY;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,KAAK;KACf,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACG;MAZN,OAAO,KAAK,MAAM,CAapB;IAEP;GACC"}
+{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n} from '../option-group';\nimport Checkbox from './checkbox';\n\nexport type { OptionValue };\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: OptionGroupClassNames;\n  defaultValue?: OptionValue[];\n  value?: OptionValue[];\n  /** Native form field name, shared across every option's checkbox. */\n  name?: string;\n  disabled?: boolean;\n  onChange?: (values: OptionValue[]) => void;\n}\n\nconst Group = ({\n  orientation = 'vertical',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<OptionValue[]>({\n    value: _value,\n    defaultValue: defaultValue ?? [],\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    const nextValue = checked\n      ? [...value, optionValue]\n      : value.filter(v => v !== optionValue);\n\n    setValue(nextValue);\n  };\n\n  return (\n    <ul\n      {...props}\n      className={cn(\n        orientation === 'vertical' ? 'space-y-2' : 'flex gap-2',\n        className,\n      )}\n    >\n      {options.map((item: Option) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={String(item.value)}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            <Checkbox\n              placement={placement}\n              className={cn(classNames?.item)}\n              name={name}\n              value={item.value}\n              checked={checked}\n              disabled={disabled || item.disabled}\n              onChange={checked => onChange(checked, item.value)}\n            >\n              {item.label}\n            </Checkbox>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default Group;\n"],"mappings":";;;;;;;;;AAiCA,MAAM,SAAS,EACb,cAAc,YACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAoC;EAC5D,OAAO;EACP,cAAc,gBAAgB,EAAE;EAChC,UAAU;EACX,CAAC;CAEF,MAAM,UAAoB,iBAAiB,SAAS;CAEpD,MAAM,YAAY,SAAkB,gBAA6B;AAK/D,WAJkB,UACd,CAAC,GAAG,OAAO,YAAY,GACvB,MAAM,QAAO,MAAK,MAAM,YAAY,CAErB;;AAGrB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,gBAAgB,aAAa,cAAc,cAC3C,UACD;YAEA,QAAQ,KAAK,SAAiB;GAC7B,MAAM,UAAU,MAAM,SAAS,KAAK,MAAM;AAE1C,UACE,oBAAC;IAEC,WAAW,GAAG,QAAQ,YAAY,QAAQ;cAE1C,oBAAC;KACY;KACX,WAAW,GAAG,YAAY,KAAK;KACzB;KACN,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACG;MAbN,OAAO,KAAK,MAAM,CAcpB;IAEP;GACC"}

package/dist/components/atoms/color-picker.d.mts

@@ -1,17 +1,21 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/color-picker.d.ts
-interface Props {
+interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value' | 'onClick' | 'onKeyDown'> {
   defaultValue?: string;
   value?: string;
   showText?: boolean;
+  disabled?: boolean;
   onChange?: (color: string) => void;
 }
 declare const ColorPicker: ({
   defaultValue,
   value: _value,
   showText,
-  onChange: _onChange
+  disabled,
+  className,
+  onChange: _onChange,
+  ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ColorPicker };

package/dist/components/atoms/color-picker.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.mts","names":[],"sources":["../../../src/components/atoms/color-picker.tsx"],"mappings":";;;UASU,KAAA;EACR,YAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,WAAA;EAAe,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,QAAA,EAAA;AAAA,GAKlB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"color-picker.d.mts","names":[],"sources":["../../../src/components/atoms/color-picker.tsx"],"mappings":";;;UAUiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,YAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,WAAA;EAAe,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAQlB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/color-picker.mjs

@@ -2,18 +2,20 @@
 
 import { cn } from "../../utils.mjs";
 import Popover from "./popover.mjs";
-import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 import { HexColorPicker } from "react-colorful";
 
 //#region src/components/atoms/color-picker.tsx
-const ColorPicker = ({ defaultValue, value: _value, showText, onChange: _onChange = () => {} }) => {
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || "#fff");
-	const controlled = _value !== void 0;
-	const value = controlled ? _value : uncontrolledValue;
+const ColorPicker = ({ defaultValue, value: _value, showText, disabled, className, onChange: _onChange = () => {}, ...props }) => {
+	const [value, setValue] = useControllableState({
+		value: _value,
+		defaultValue: defaultValue ?? "#fff",
+		onChange: _onChange
+	});
 	const onChange = (color) => {
-		if (!controlled) setUncontrolledValue(color);
-		_onChange(color);
+		if (disabled) return;
+		setValue(color);
 	};
 	return /* @__PURE__ */ jsx(Popover, {
 		placement: "bottomLeft",
@@ -23,16 +25,22 @@ const ColorPicker = ({ defaultValue, value: _value, showText, onChange: _onChang
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
 			role: "button",
-			tabIndex: 0,
-			className: cn("inline-flex items-center", "rounded border p-0.5"),
+			tabIndex: disabled ? -1 : 0,
+			"aria-disabled": disabled,
+			className: cn("inline-flex items-center", "rounded border p-0.5", disabled && "cursor-not-allowed opacity-50", className),
+			...props,
+			onClick: (e) => {
+				if (disabled) e.preventDefault();
+			},
 			onKeyDown: (e) => {
+				if (disabled) return;
 				if (e.key === "Enter" || e.key === " ") {
 					e.preventDefault();
 					e.currentTarget.click();
 				}
 			},
 			children: [/* @__PURE__ */ jsx("div", {
-				className: cn("size-6 cursor-pointer rounded border", "shadow-sm"),
+				className: cn("size-6 rounded border", "shadow-sm", disabled ? "cursor-not-allowed" : "cursor-pointer"),
 				style: { backgroundColor: value }
 			}), showText && /* @__PURE__ */ jsx("span", {
 				className: "px-1 font-mono text-sm font-medium",

package/dist/components/atoms/color-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../src/components/atoms/color-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Popover from './popover';\n\ninterface Props {\n  defaultValue?: string;\n  value?: string;\n  showText?: boolean;\n  onChange?: (color: string) => void;\n}\n\nconst ColorPicker = ({\n  defaultValue,\n  value: _value,\n  showText,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n    defaultValue || '#fff',\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const onChange = (color: string) => {\n    if (!controlled) {\n      setUncontrolledValue(color);\n    }\n    _onChange(color);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<HexColorPicker color={value} onChange={onChange} />}\n    >\n      <div\n        role=\"button\"\n        tabIndex={0}\n        className={cn(\n          'inline-flex items-center',\n          'rounded border p-0.5',\n          //\n        )}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.currentTarget.click();\n          }\n        }}\n      >\n        <div\n          className={cn(\n            'size-6 cursor-pointer rounded border',\n            'shadow-sm',\n            //\n          )}\n          style={{ backgroundColor: value }}\n        />\n        {showText && (\n          <span className=\"px-1 font-mono text-sm font-medium\">\n            {value.toUpperCase()}\n          </span>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,eAAe,EACnB,cACA,OAAO,QACP,UACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,gBAAgB,OACjB;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,UAAkB;AAClC,MAAI,CAAC,WACH,sBAAqB,MAAM;AAE7B,YAAU,MAAM;;AAGlB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAe,OAAO;GAAiB;IAAY;YAE7D,qBAAC;GACC,MAAK;GACL,UAAU;GACV,WAAW,GACT,4BACA,uBAED;GACD,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,OAAE,cAAc,OAAO;;;cAI3B,oBAAC;IACC,WAAW,GACT,wCACA,YAED;IACD,OAAO,EAAE,iBAAiB,OAAO;KACjC,EACD,YACC,oBAAC;IAAK,WAAU;cACb,MAAM,aAAa;KACf;IAEL;GACE"}
+{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../src/components/atoms/color-picker.tsx"],"sourcesContent":["'use client';\n\nimport { HexColorPicker } from 'react-colorful';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Popover from './popover';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'defaultValue' | 'value' | 'onClick' | 'onKeyDown'\n> {\n  defaultValue?: string;\n  value?: string;\n  showText?: boolean;\n  disabled?: boolean;\n  onChange?: (color: string) => void;\n}\n\nconst ColorPicker = ({\n  defaultValue,\n  value: _value,\n  showText,\n  disabled,\n  className,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<string>({\n    value: _value,\n    defaultValue: defaultValue ?? '#fff',\n    onChange: _onChange,\n  });\n\n  const onChange = (color: string) => {\n    if (disabled) {\n      return;\n    }\n    setValue(color);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<HexColorPicker color={value} onChange={onChange} />}\n    >\n      <div\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-disabled={disabled}\n        className={cn(\n          'inline-flex items-center',\n          'rounded border p-0.5',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n        onClick={e => {\n          if (disabled) {\n            e.preventDefault();\n          }\n        }}\n        onKeyDown={e => {\n          if (disabled) {\n            return;\n          }\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.currentTarget.click();\n          }\n        }}\n      >\n        <div\n          className={cn(\n            'size-6 rounded border',\n            'shadow-sm',\n            disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n          )}\n          style={{ backgroundColor: value }}\n        />\n        {showText && (\n          <span className=\"px-1 font-mono text-sm font-medium\">\n            {value.toUpperCase()}\n          </span>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;AAqBA,MAAM,eAAe,EACnB,cACA,OAAO,QACP,UACA,UACA,WACA,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP,cAAc,gBAAgB;EAC9B,UAAU;EACX,CAAC;CAEF,MAAM,YAAY,UAAkB;AAClC,MAAI,SACF;AAEF,WAAS,MAAM;;AAGjB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAe,OAAO;GAAiB;IAAY;YAE7D,qBAAC;GACC,MAAK;GACL,UAAU,WAAW,KAAK;GAC1B,iBAAe;GACf,WAAW,GACT,4BACA,wBACA,YAAY,iCACZ,UACD;GACD,GAAI;GACJ,UAAS,MAAK;AACZ,QAAI,SACF,GAAE,gBAAgB;;GAGtB,YAAW,MAAK;AACd,QAAI,SACF;AAEF,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,OAAE,cAAc,OAAO;;;cAI3B,oBAAC;IACC,WAAW,GACT,yBACA,aACA,WAAW,uBAAuB,iBACnC;IACD,OAAO,EAAE,iBAAiB,OAAO;KACjC,EACD,YACC,oBAAC;IAAK,WAAU;cACb,MAAM,aAAa;KACf;IAEL;GACE"}

package/dist/components/atoms/date-picker.d.mts

@@ -6,6 +6,7 @@ interface Props {
   value?: Date;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
   onChange?: (date: Date | undefined) => void;
 }
 declare const DatePicker: ({
@@ -13,6 +14,7 @@ declare const DatePicker: ({
   value: _value,
   placeholder,
   className,
+  disabled,
   onChange: _onChange
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/atoms/date-picker.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../../src/components/atoms/date-picker.tsx"],"mappings":";;;UAeU,KAAA;EACR,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,WAAA;EACA,SAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;AAAA;AAAA,cAGd,UAAA;EAAc,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,WAAA;EAAA,SAAA;EAAA,QAAA,EAAA;AAAA,GAMjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../../src/components/atoms/date-picker.tsx"],"mappings":";;;UAgBU,KAAA;EACR,YAAA,GAAe,IAAA;EACf,KAAA,GAAQ,IAAA;EACR,WAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;AAAA;AAAA,cAGd,UAAA;EAAc,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,WAAA;EAAA,SAAA;EAAA,QAAA;EAAA,QAAA,EAAA;AAAA,GAOjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/date-picker.mjs

@@ -7,29 +7,35 @@ import Popover from "./popover.mjs";
 import { CalendarIcon } from "lucide-react";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 import { format } from "date-fns";
 
 //#region src/components/atoms/date-picker.tsx
 const { Calendar } = calendar_exports;
-const DatePicker = ({ defaultValue, value: _value, placeholder = "Pick a date", className, onChange: _onChange = () => {} }) => {
-	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-	const controlled = _value !== void 0;
-	const value = controlled ? _value : uncontrolledValue;
-	const onChange = (date) => {
-		if (!controlled) setUncontrolledValue(date);
-		_onChange(date);
-	};
+const DatePicker = ({ defaultValue, value: _value, placeholder = "Pick a date", className, disabled, onChange: _onChange = () => {} }) => {
+	const [value, onChange] = useControllableState({
+		value: _value,
+		defaultValue,
+		onChange: _onChange
+	});
+	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsx(Popover, {
 		placement: "bottomLeft",
+		open,
+		onOpenChange: setOpen,
 		content: /* @__PURE__ */ jsx(Calendar, {
 			mode: "single",
 			selected: value,
-			onSelect: onChange
+			onSelect: (date) => {
+				onChange(date);
+				setOpen(false);
+			}
 		}),
 		children: /* @__PURE__ */ jsx(Button, {
 			type: "default",
 			icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
 			"data-empty": !value,
+			disabled,
 			className: cn("w-full justify-start text-left font-normal", "data-[empty=true]:text-muted-foreground", className),
 			children: value ? format(value, "PPP") : placeholder
 		})

package/dist/components/atoms/date-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.mjs","names":["calendar"],"sources":["../../../src/components/atoms/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\n\nimport { calendar } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\nimport Popover from './popover';\n\nconst { Calendar } = calendar;\n\ninterface Props {\n  defaultValue?: Date;\n  value?: Date;\n  placeholder?: string;\n  className?: string;\n  onChange?: (date: Date | undefined) => void;\n}\n\nconst DatePicker = ({\n  defaultValue,\n  value: _value,\n  placeholder = 'Pick a date',\n  className,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<Date | undefined>(\n    defaultValue,\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const onChange = (date: Date | undefined) => {\n    if (!controlled) {\n      setUncontrolledValue(date);\n    }\n    _onChange(date);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<Calendar mode=\"single\" selected={value} onSelect={onChange} />}\n    >\n      <Button\n        type=\"default\"\n        icon={<CalendarIcon />}\n        data-empty={!value}\n        className={cn(\n          'w-full justify-start text-left font-normal',\n          'data-[empty=true]:text-muted-foreground',\n          className,\n          //\n        )}\n      >\n        {value ? format(value, 'PPP') : placeholder}\n      </Button>\n    </Popover>\n  );\n};\n\nexport default DatePicker;\nexport type { Props };\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAE,aAAaA;AAUrB,MAAM,cAAc,EAClB,cACA,OAAO,QACP,cAAc,eACd,WACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,aACD;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,SAA2B;AAC3C,MAAI,CAAC,WACH,sBAAqB,KAAK;AAE5B,YAAU,KAAK;;AAGjB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAS,MAAK;GAAS,UAAU;GAAO,UAAU;IAAY;YAExE,oBAAC;GACC,MAAK;GACL,MAAM,oBAAC,iBAAe;GACtB,cAAY,CAAC;GACb,WAAW,GACT,8CACA,2CACA,UAED;aAEA,QAAQ,OAAO,OAAO,MAAM,GAAG;IACzB;GACD"}
+{"version":3,"file":"date-picker.mjs","names":["calendar"],"sources":["../../../src/components/atoms/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { format } from 'date-fns';\nimport { CalendarIcon } from 'lucide-react';\n\nimport { calendar } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from './button';\nimport Popover from './popover';\n\nconst { Calendar } = calendar;\n\ninterface Props {\n  defaultValue?: Date;\n  value?: Date;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  onChange?: (date: Date | undefined) => void;\n}\n\nconst DatePicker = ({\n  defaultValue,\n  value: _value,\n  placeholder = 'Pick a date',\n  className,\n  disabled,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [value, onChange] = useControllableState<Date | undefined>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      open={open}\n      onOpenChange={setOpen}\n      content={\n        <Calendar\n          mode=\"single\"\n          selected={value}\n          onSelect={date => {\n            onChange(date);\n            setOpen(false);\n          }}\n        />\n      }\n    >\n      <Button\n        type=\"default\"\n        icon={<CalendarIcon />}\n        data-empty={!value}\n        disabled={disabled}\n        className={cn(\n          'w-full justify-start text-left font-normal',\n          'data-[empty=true]:text-muted-foreground',\n          className,\n          //\n        )}\n      >\n        {value ? format(value, 'PPP') : placeholder}\n      </Button>\n    </Popover>\n  );\n};\n\nexport default DatePicker;\nexport type { Props };\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,EAAE,aAAaA;AAWrB,MAAM,cAAc,EAClB,cACA,OAAO,QACP,cAAc,eACd,WACA,UACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,OAAO,YAAY,qBAAuC;EAC/D,OAAO;EACP;EACA,UAAU;EACX,CAAC;CACF,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;AAEvC,QACE,oBAAC;EACC,WAAU;EACJ;EACN,cAAc;EACd,SACE,oBAAC;GACC,MAAK;GACL,UAAU;GACV,WAAU,SAAQ;AAChB,aAAS,KAAK;AACd,YAAQ,MAAM;;IAEhB;YAGJ,oBAAC;GACC,MAAK;GACL,MAAM,oBAAC,iBAAe;GACtB,cAAY,CAAC;GACH;GACV,WAAW,GACT,8CACA,2CACA,UAED;aAEA,QAAQ,OAAO,OAAO,MAAM,GAAG;IACzB;GACD"}

package/dist/components/atoms/float-button/back-top.d.mts

@@ -8,6 +8,7 @@ interface Props extends Props$1 {
   onClick?: (e: MouseEvent<HTMLElement>) => void;
 }
 declare const BackTop: ({
+  ref,
   visibilityHeight,
   className,
   onClick,

package/dist/components/atoms/float-button/back-top.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"back-top.d.mts","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"mappings":";;;;;UAYiB,KAAA,SAAc,OAAA;EAC7B,gBAAA;EACA,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,WAAA;AAAA;AAAA,cAGrB,OAAA;EAAW,gBAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAKd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"back-top.d.mts","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"mappings":";;;;;UAYiB,KAAA,SAAc,OAAA;EAC7B,gBAAA;EACA,OAAA,IAAW,CAAA,EAAG,UAAA,CAAW,WAAA;AAAA;AAAA,cAGrB,OAAA;EAAW,GAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAMd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/float-button/back-top.mjs

@@ -3,18 +3,26 @@
 import { cn } from "../../../utils.mjs";
 import FloatButton from "./float-button.mjs";
 import { ArrowUp } from "lucide-react";
+import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useWindowScroll } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/float-button/back-top.tsx
-const BackTop = ({ visibilityHeight = 450, className, onClick, ...props }) => {
-	const { y } = useWindowScroll();
+const BackTop = ({ ref, visibilityHeight = 450, className, onClick, ...props }) => {
+	const buttonRef = useRef(null);
+	const { y } = useWindowScroll(buttonRef);
+	const setRefs = (node) => {
+		buttonRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
 	return /* @__PURE__ */ jsx(FloatButton, {
+		ref: setRefs,
 		"aria-label": "맨 위로",
 		icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 		className: cn(className, (!y || visibilityHeight > y) && "hidden"),
 		onClick: (e) => {
-			window.scrollTo({
+			(buttonRef.current?.ownerDocument.defaultView ?? window).scrollTo({
 				left: 0,
 				top: 0,
 				behavior: "smooth"

package/dist/components/atoms/float-button/back-top.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { MouseEvent } from 'react';\n\nimport { useWindowScroll } from '@jbpark/use-hooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n  visibilityHeight?: number;\n  onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n  visibilityHeight = 450,\n  className,\n  onClick,\n  ...props\n}: Props) => {\n  const { y } = useWindowScroll();\n\n  return (\n    <FloatButton\n      aria-label=\"맨 위로\"\n      icon={<ArrowUp />}\n      className={cn(\n        className,\n        (!y || visibilityHeight > y) && 'hidden',\n        //\n      )}\n      onClick={e => {\n        window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAW,EACf,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,EAAE,MAAM,iBAAiB;AAE/B,QACE,oBAAC;EACC,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AACZ,UAAO,SAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACxD,aAAU,EAAE;;EAEd,GAAI;GACJ"}
+{"version":3,"file":"back-top.mjs","names":[],"sources":["../../../../src/components/atoms/float-button/back-top.tsx"],"sourcesContent":["'use client';\n\nimport { type MouseEvent, useRef } from 'react';\n\nimport { useWindowScroll } from '@jbpark/use-hooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { type Props as ButtonProps } from '../button';\nimport FloatButton from './float-button';\n\nexport interface Props extends ButtonProps {\n  visibilityHeight?: number;\n  onClick?: (e: MouseEvent<HTMLElement>) => void;\n}\n\nconst BackTop = ({\n  ref,\n  visibilityHeight = 450,\n  className,\n  onClick,\n  ...props\n}: Props) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Track/scroll whichever window actually renders this button — not\n  // necessarily the host `window`, since this can be portaled into an\n  // iframe (e.g. live-editor's Renderer).\n  const { y } = useWindowScroll(buttonRef);\n\n  const setRefs = (node: HTMLButtonElement | null) => {\n    buttonRef.current = node;\n\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\n\n  return (\n    <FloatButton\n      ref={setRefs}\n      aria-label=\"맨 위로\"\n      icon={<ArrowUp />}\n      className={cn(\n        className,\n        (!y || visibilityHeight > y) && 'hidden',\n        //\n      )}\n      onClick={e => {\n        const view = buttonRef.current?.ownerDocument.defaultView ?? window;\n        view.scrollTo({ left: 0, top: 0, behavior: 'smooth' });\n        onClick?.(e);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default BackTop;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,WAAW,EACf,KACA,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,YAAY,OAA0B,KAAK;CAKjD,MAAM,EAAE,MAAM,gBAAgB,UAAU;CAExC,MAAM,WAAW,SAAmC;AAClD,YAAU,UAAU;AAEpB,MAAI,OAAO,QAAQ,WACjB,KAAI,KAAK;WACA,IACT,KAAI,UAAU;;AAIlB,QACE,oBAAC;EACC,KAAK;EACL,cAAW;EACX,MAAM,oBAAC,YAAU;EACjB,WAAW,GACT,YACC,CAAC,KAAK,mBAAmB,MAAM,SAEjC;EACD,UAAS,MAAK;AAEZ,IADa,UAAU,SAAS,cAAc,eAAe,QACxD,SAAS;IAAE,MAAM;IAAG,KAAK;IAAG,UAAU;IAAU,CAAC;AACtD,aAAU,EAAE;;EAEd,GAAI;GACJ"}

package/dist/components/atoms/input/input.d.mts

@@ -2,8 +2,9 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/input/input.d.ts
 declare const Input: ({
+  ref,
   ...props
-}: React.ComponentPropsWithoutRef<"input">) => react_jsx_runtime0.JSX.Element;
+}: React.ComponentPropsWithRef<"input">) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Input };
 //# sourceMappingURL=input.d.mts.map

package/dist/components/atoms/input/input.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.mts","names":[],"sources":["../../../../src/components/atoms/input/input.tsx"],"mappings":";;;cAIM,KAAA;EAAA,GAAS;AAAA,GAAc,KAAA,CAAM,wBAAA,cAAiC,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"input.d.mts","names":[],"sources":["../../../../src/components/atoms/input/input.tsx"],"mappings":";;;cAIM,KAAA;EAAS,GAAA;EAAA,GAAA;AAAA,GAAmB,KAAA,CAAM,qBAAA,cAA8B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/input/input.mjs

@@ -3,8 +3,11 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/input/input.tsx
 const { Input: Core } = input_exports;
-const Input = ({ ...props }) => {
-	return /* @__PURE__ */ jsx(Core, { ...props });
+const Input = ({ ref, ...props }) => {
+	return /* @__PURE__ */ jsx(Core, {
+		ref,
+		...props
+	});
 };
 
 //#endregion