@jbpark/ui-kit 3.6.0 → 3.8.0

package/dist/Card.d.mts

@@ -18,5 +18,5 @@ declare const Card: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Card as default };
+export { Props, Card as default };
 //# sourceMappingURL=Card.d.mts.map

package/dist/Card.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.mts","names":[],"sources":["../src/components/molecules/card.tsx"],"mappings":";;;UAEU,KAAA,SAAc,IAAA,CAAK,KAAA,CAAM,qBAAA;EACjC,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA;EACA,UAAA;IACE,KAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIE,IAAA;EAAQ,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAOX,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Card.d.mts","names":[],"sources":["../src/components/molecules/card.tsx"],"mappings":";;;UAEiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,qBAAA;EAGN,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,OAAA;EACA,UAAA;IACE,KAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIE,IAAA;EAAQ,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAOX,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":[],"sources":["../src/components/molecules/card.tsx"],"sourcesContent":["import { cn, renderConditional } from '@repo/ui/utils';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {\n  title?: React.ReactNode;\n  variant?: 'outlined' | 'borderless';\n  classNames?: {\n    title?: string;\n    body?: string;\n  };\n}\n\nconst Card = ({\n  title,\n  children,\n  className,\n  classNames,\n  variant = 'outlined',\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'w-full',\n        'rounded-lg p-4',\n        'bg-card text-card-foreground shadow-sm transition-all',\n        variant === 'outlined' && 'border-border border',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <div\n          className={cn(\n            'mb-4 font-bold',\n            classNames?.title,\n            //\n          )}\n        >\n          {v}\n        </div>\n      ))}\n      <div\n        className={cn(\n          classNames?.body,\n          //\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;AAWA,MAAM,QAAQ,EACZ,OACA,UACA,WACA,YACA,UAAU,YACV,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,UACA,kBACA,yDACA,YAAY,cAAc,wBAC1B,UAED;EACD,GAAI;aAEH,kBAAkB,QAAO,MACxB,oBAAC;GACC,WAAW,GACT,kBACA,YAAY,MAEb;aAEA;IACG,CACN,EACF,oBAAC;GACC,WAAW,GACT,YAAY,KAEb;GAEA;IACG;GACF"}
+{"version":3,"file":"Card.mjs","names":[],"sources":["../src/components/molecules/card.tsx"],"sourcesContent":["import { cn, renderConditional } from '@repo/ui/utils';\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithRef<'div'>,\n  'title'\n> {\n  title?: React.ReactNode;\n  variant?: 'outlined' | 'borderless';\n  classNames?: {\n    title?: string;\n    body?: string;\n  };\n}\n\nconst Card = ({\n  title,\n  children,\n  className,\n  classNames,\n  variant = 'outlined',\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'w-full',\n        'rounded-lg p-4',\n        'bg-card text-card-foreground shadow-sm transition-all',\n        variant === 'outlined' && 'border-border border',\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderConditional(title, v => (\n        <div\n          className={cn(\n            'mb-4 font-bold',\n            classNames?.title,\n            //\n          )}\n        >\n          {v}\n        </div>\n      ))}\n      <div\n        className={cn(\n          classNames?.body,\n          //\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n"],"mappings":";;;;AAcA,MAAM,QAAQ,EACZ,OACA,UACA,WACA,YACA,UAAU,YACV,GAAG,YACQ;AACX,QACE,qBAAC;EACC,WAAW,GACT,UACA,kBACA,yDACA,YAAY,cAAc,wBAC1B,UAED;EACD,GAAI;aAEH,kBAAkB,QAAO,MACxB,oBAAC;GACC,WAAW,GACT,kBACA,YAAY,MAEb;aAEA;IACG,CACN,EACF,oBAAC;GACC,WAAW,GACT,YAAY,KAEb;GAEA;IACG;GACF"}

package/dist/Space.d.mts

@@ -30,5 +30,5 @@ declare const Space: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Space as default };
+export { Props, Space as default };
 //# sourceMappingURL=Space.d.mts.map

package/dist/Space.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Space.d.mts","names":[],"sources":["../src/components/molecules/space.tsx"],"mappings":";;;UAMU,KAAA,SAAc,KAAA,CAAM,qBAAA;EAC5B,OAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,WAAA;EACA,IAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,IAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAiBE,KAAA;EAAS,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,IAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Space.d.mts","names":[],"sources":["../src/components/molecules/space.tsx"],"mappings":";;;UAMiB,KAAA,SAAc,KAAA,CAAM,qBAAA;EACnC,OAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,WAAA;EACA,IAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,IAAA;IACE,IAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAiBE,KAAA;EAAS,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,KAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,IAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,GAcZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Space.mjs

@@ -19,7 +19,9 @@ const Space = ({ loading, loader, children, size = "middle", orientation = "hori
 	const [x, y] = typeof size === "string" ? sizes[size] || [0, 0] : Array.isArray(size) ? size : [size, size];
 	const count = Children.count(children);
 	if (loading) return /* @__PURE__ */ jsx("div", {
-		className: cn(className),
+		className: cn(hidden && "hidden", className),
+		style,
+		...props,
 		children: loader || /* @__PURE__ */ jsx(Skeleton, {})
 	});
 	return /* @__PURE__ */ jsx("div", {

package/dist/Space.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Space.mjs","names":[],"sources":["../src/components/molecules/space.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\n\ninterface Props extends React.ComponentPropsWithRef<'div'> {\n  loading?: boolean;\n  loader?: React.ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'middle' | 'large' | number | number[];\n  align?: 'start' | 'end' | 'center' | 'baseline';\n  wrap?: boolean;\n  split?: React.ReactNode;\n  grid?: {\n    rows?: number;\n    cols?: number;\n  };\n}\n\nconst sizes: Record<string, number[]> = {\n  small: [4, 4],\n  middle: [8, 8],\n  large: [16, 16],\n};\n\nconst aligns: Record<string, string> = {\n  start: 'items-start text-start',\n  end: 'items-end text-end',\n  center: 'items-center text-center',\n  baseline: 'items-baseline text-baseline',\n};\n\nconst Space = ({\n  loading,\n  loader,\n  children,\n  size = 'middle',\n  orientation = 'horizontal',\n  align = 'center',\n  wrap = false,\n  split,\n  className,\n  grid,\n  hidden,\n  style,\n  ...props\n}: Props) => {\n  const [x, y] =\n    typeof size === 'string'\n      ? sizes[size] || [0, 0]\n      : Array.isArray(size)\n        ? size\n        : [size, size];\n  const count = Children.count(children);\n\n  if (loading) {\n    return <div className={cn(className)}>{loader || <Skeleton />}</div>;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-nowrap',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        wrap && 'flex-wrap',\n        aligns[align],\n        grid && 'grid',\n        hidden && 'hidden',\n        className,\n      )}\n      style={{\n        columnGap: x,\n        rowGap: y,\n        gridTemplateRows: grid?.rows\n          ? `repeat(${grid.rows}, minmax(0, 1fr))`\n          : undefined,\n        gridTemplateColumns: grid?.cols\n          ? `repeat(${grid.cols}, minmax(0, 1fr))`\n          : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <>\n          {child}\n          {split && i < count - 1 && split}\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport default Space;\n"],"mappings":";;;;;;AAoBA,MAAM,QAAkC;CACtC,OAAO,CAAC,GAAG,EAAE;CACb,QAAQ,CAAC,GAAG,EAAE;CACd,OAAO,CAAC,IAAI,GAAG;CAChB;AAED,MAAM,SAAiC;CACrC,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CACX;AAED,MAAM,SAAS,EACb,SACA,QACA,UACA,OAAO,UACP,cAAc,cACd,QAAQ,UACR,OAAO,OACP,OACA,WACA,MACA,QACA,OACA,GAAG,YACQ;CACX,MAAM,CAAC,GAAG,KACR,OAAO,SAAS,WACZ,MAAM,SAAS,CAAC,GAAG,EAAE,GACrB,MAAM,QAAQ,KAAK,GACjB,OACA,CAAC,MAAM,KAAK;CACpB,MAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,KAAI,QACF,QAAO,oBAAC;EAAI,WAAW,GAAG,UAAU;YAAG,UAAU,oBAAC,aAAW;GAAO;AAGtE,QACE,oBAAC;EACC,WAAW,GACT,oBACA,gBAAgB,eAAe,aAAa,YAC5C,QAAQ,aACR,OAAO,QACP,QAAQ,QACR,UAAU,UACV,UACD;EACD,OAAO;GACL,WAAW;GACX,QAAQ;GACR,kBAAkB,MAAM,OACpB,UAAU,KAAK,KAAK,qBACpB;GACJ,qBAAqB,MAAM,OACvB,UAAU,KAAK,KAAK,qBACpB;GACJ,GAAG;GACJ;EACD,GAAI;YAEH,SAAS,IAAI,WAAW,OAAO,MAC9B,8CACG,OACA,SAAS,IAAI,QAAQ,KAAK,SAC1B,CACH;GACE"}
+{"version":3,"file":"Space.mjs","names":[],"sources":["../src/components/molecules/space.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Skeleton from '../atoms/skeleton';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  loading?: boolean;\n  loader?: React.ReactNode;\n  orientation?: 'horizontal' | 'vertical';\n  size?: 'small' | 'middle' | 'large' | number | number[];\n  align?: 'start' | 'end' | 'center' | 'baseline';\n  wrap?: boolean;\n  split?: React.ReactNode;\n  grid?: {\n    rows?: number;\n    cols?: number;\n  };\n}\n\nconst sizes: Record<string, number[]> = {\n  small: [4, 4],\n  middle: [8, 8],\n  large: [16, 16],\n};\n\nconst aligns: Record<string, string> = {\n  start: 'items-start text-start',\n  end: 'items-end text-end',\n  center: 'items-center text-center',\n  baseline: 'items-baseline text-baseline',\n};\n\nconst Space = ({\n  loading,\n  loader,\n  children,\n  size = 'middle',\n  orientation = 'horizontal',\n  align = 'center',\n  wrap = false,\n  split,\n  className,\n  grid,\n  hidden,\n  style,\n  ...props\n}: Props) => {\n  const [x, y] =\n    typeof size === 'string'\n      ? sizes[size] || [0, 0]\n      : Array.isArray(size)\n        ? size\n        : [size, size];\n  const count = Children.count(children);\n\n  if (loading) {\n    return (\n      <div\n        className={cn(hidden && 'hidden', className)}\n        style={style}\n        {...props}\n      >\n        {loader || <Skeleton />}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-nowrap',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        wrap && 'flex-wrap',\n        aligns[align],\n        grid && 'grid',\n        hidden && 'hidden',\n        className,\n      )}\n      style={{\n        columnGap: x,\n        rowGap: y,\n        gridTemplateRows: grid?.rows\n          ? `repeat(${grid.rows}, minmax(0, 1fr))`\n          : undefined,\n        gridTemplateColumns: grid?.cols\n          ? `repeat(${grid.cols}, minmax(0, 1fr))`\n          : undefined,\n        ...style,\n      }}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <>\n          {child}\n          {split && i < count - 1 && split}\n        </>\n      ))}\n    </div>\n  );\n};\n\nexport default Space;\n"],"mappings":";;;;;;AAoBA,MAAM,QAAkC;CACtC,OAAO,CAAC,GAAG,EAAE;CACb,QAAQ,CAAC,GAAG,EAAE;CACd,OAAO,CAAC,IAAI,GAAG;CAChB;AAED,MAAM,SAAiC;CACrC,OAAO;CACP,KAAK;CACL,QAAQ;CACR,UAAU;CACX;AAED,MAAM,SAAS,EACb,SACA,QACA,UACA,OAAO,UACP,cAAc,cACd,QAAQ,UACR,OAAO,OACP,OACA,WACA,MACA,QACA,OACA,GAAG,YACQ;CACX,MAAM,CAAC,GAAG,KACR,OAAO,SAAS,WACZ,MAAM,SAAS,CAAC,GAAG,EAAE,GACrB,MAAM,QAAQ,KAAK,GACjB,OACA,CAAC,MAAM,KAAK;CACpB,MAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,KAAI,QACF,QACE,oBAAC;EACC,WAAW,GAAG,UAAU,UAAU,UAAU;EACrC;EACP,GAAI;YAEH,UAAU,oBAAC,aAAW;GACnB;AAIV,QACE,oBAAC;EACC,WAAW,GACT,oBACA,gBAAgB,eAAe,aAAa,YAC5C,QAAQ,aACR,OAAO,QACP,QAAQ,QACR,UAAU,UACV,UACD;EACD,OAAO;GACL,WAAW;GACX,QAAQ;GACR,kBAAkB,MAAM,OACpB,UAAU,KAAK,KAAK,qBACpB;GACJ,qBAAqB,MAAM,OACvB,UAAU,KAAK,KAAK,qBACpB;GACJ,GAAG;GACJ;EACD,GAAI;YAEH,SAAS,IAAI,WAAW,OAAO,MAC9B,8CACG,OACA,SAAS,IAAI,QAAQ,KAAK,SAC1B,CACH;GACE"}

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":";;;;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"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/checkbox/group.tsx"],"mappings":";;;;UAkBiB,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,7 +2,7 @@
 
 import { cn } from "../../../utils.mjs";
 import Checkbox from "./checkbox.mjs";
-import { normalizeOptions } from "../option-group.mjs";
+import { normalizeOptions, warnOnDuplicateOptionValues } from "../option-group.mjs";
 import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
 
@@ -14,13 +14,14 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 		onChange: _onChange
 	});
 	const options = normalizeOptions(_options);
+	warnOnDuplicateOptionValues(options, "Checkbox.Group");
 	const onChange = (checked, optionValue) => {
 		setValue(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
 	};
 	return /* @__PURE__ */ jsx("ul", {
 		...props,
 		className: cn(orientation === "vertical" ? "space-y-2" : "flex gap-2", className),
-		children: options.map((item) => {
+		children: options.map((item, index) => {
 			const checked = value.includes(item.value);
 			return /* @__PURE__ */ jsx("li", {
 				className: cn("flex", classNames?.wrapper),
@@ -34,7 +35,7 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 					onChange: (checked) => onChange(checked, item.value),
 					children: item.label
 				})
-			}, String(item.value));
+			}, `${index}-${String(item.value)}`);
 		})
 	});
 };

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 { 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"}
+{"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  warnOnDuplicateOptionValues,\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  warnOnDuplicateOptionValues(options, 'Checkbox.Group');\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, index) => {\n        const checked = value.includes(item.value);\n\n        return (\n          <li\n            key={`${index}-${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":";;;;;;;;;AAkCA,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;AACpD,6BAA4B,SAAS,iBAAiB;CAEtD,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,MAAc,UAAU;GACpC,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,GAAG,MAAM,GAAG,OAAO,KAAK,MAAM,GAchC;IAEP;GACC"}

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

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

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":";;;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"}
+{"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;EACZ,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA;AAAA;AAAA,cAGZ,WAAA;EAAe,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,SAAA;EAAA,QAAA,EAAA,SAAA;EAAA,IAAA,EAAA,KAAA;EAAA,WAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAWlB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -7,18 +7,25 @@ import { useControllableState } from "@jbpark/use-hooks";
 import { HexColorPicker } from "react-colorful";
 
 //#region src/components/atoms/color-picker.tsx
-const ColorPicker = ({ defaultValue, value: _value, showText, disabled, className, onChange: _onChange = () => {}, ...props }) => {
+const ColorPicker = ({ defaultValue, value: _value, showText, disabled, className, onChange: _onChange = () => {}, open: _open, defaultOpen, onOpenChange, ...props }) => {
 	const [value, setValue] = useControllableState({
 		value: _value,
 		defaultValue: defaultValue ?? "#fff",
 		onChange: _onChange
 	});
+	const [open, setOpen] = useControllableState({
+		value: _open,
+		defaultValue: defaultOpen ?? false,
+		onChange: onOpenChange
+	});
 	const onChange = (color) => {
 		if (disabled) return;
 		setValue(color);
 	};
 	return /* @__PURE__ */ jsx(Popover, {
 		placement: "bottomLeft",
+		open,
+		onOpenChange: setOpen,
 		content: /* @__PURE__ */ jsx(HexColorPicker, {
 			color: value,
 			onChange

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 { 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"}
+{"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' | 'open'\n> {\n  defaultValue?: string;\n  value?: string;\n  showText?: boolean;\n  disabled?: boolean;\n  onChange?: (color: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst ColorPicker = ({\n  defaultValue,\n  value: _value,\n  showText,\n  disabled,\n  className,\n  onChange: _onChange = () => {},\n  open: _open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: Props) => {\n  const [value, setValue] = useControllableState<string>({\n    value: _value,\n    defaultValue: defaultValue ?? '#fff',\n    onChange: _onChange,\n  });\n  const [open, setOpen] = useControllableState<boolean>({\n    value: _open,\n    defaultValue: defaultOpen ?? false,\n    onChange: onOpenChange,\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      open={open}\n      onOpenChange={setOpen}\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":";;;;;;;;;AAwBA,MAAM,eAAe,EACnB,cACA,OAAO,QACP,UACA,UACA,WACA,UAAU,kBAAkB,IAC5B,MAAM,OACN,aACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAA6B;EACrD,OAAO;EACP,cAAc,gBAAgB;EAC9B,UAAU;EACX,CAAC;CACF,MAAM,CAAC,MAAM,WAAW,qBAA8B;EACpD,OAAO;EACP,cAAc,eAAe;EAC7B,UAAU;EACX,CAAC;CAEF,MAAM,YAAY,UAAkB;AAClC,MAAI,SACF;AAEF,WAAS,MAAM;;AAGjB,QACE,oBAAC;EACC,WAAU;EACJ;EACN,cAAc;EACd,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/option-group.mjs

@@ -3,7 +3,17 @@ const normalizeOptions = (options) => options.map((item) => typeof item === "obj
 	label: `${item}`,
 	value: item
 });
+const warnOnDuplicateOptionValues = (options, componentName) => {
+	if (globalThis.process?.env?.NODE_ENV === "production") return;
+	const seen = /* @__PURE__ */ new Set();
+	const duplicates = /* @__PURE__ */ new Set();
+	for (const option of options) {
+		if (seen.has(option.value)) duplicates.add(option.value);
+		seen.add(option.value);
+	}
+	if (duplicates.size > 0) console.warn(`${componentName}: duplicate option value(s) [${[...duplicates].map((v) => JSON.stringify(v)).join(", ")}] — options sharing a value render as if selecting one selects all of them, since selection is matched by value.`);
+};
 
 //#endregion
-export { normalizeOptions };
+export { normalizeOptions, warnOnDuplicateOptionValues };
 //# sourceMappingURL=option-group.mjs.map

package/dist/components/atoms/option-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"option-group.mjs","names":[],"sources":["../../../src/components/atoms/option-group.ts"],"sourcesContent":["export type OptionValue = string | number | boolean;\n\nexport interface Option {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n}\n\nexport type Options = string[] | number[] | boolean[] | Option[];\n\nexport interface OptionGroupClassNames {\n  wrapper?: string;\n  item?: string;\n}\n\nexport const normalizeOptions = (options: Options): Option[] =>\n  options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n"],"mappings":";AAeA,MAAa,oBAAoB,YAC/B,QAAQ,KAAI,SACV,OAAO,SAAS,WACZ,OACA;CACE,OAAO,GAAG;CACV,OAAO;CACR,CACN"}
+{"version":3,"file":"option-group.mjs","names":[],"sources":["../../../src/components/atoms/option-group.ts"],"sourcesContent":["export type OptionValue = string | number | boolean;\n\nexport interface Option {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n}\n\nexport type Options = string[] | number[] | boolean[] | Option[];\n\nexport interface OptionGroupClassNames {\n  wrapper?: string;\n  item?: string;\n}\n\nexport const normalizeOptions = (options: Options): Option[] =>\n  options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n\n// Radio.Group/Checkbox.Group both key selection off `value` (Radix's\n// RadioGroup matches items by it, and Checkbox.Group tests membership via\n// `value.includes(...)`), so two options sharing a value aren't just a\n// React list-key collision — they become indistinguishable to the\n// component's own selection logic, e.g. both rendering aria-checked=true\n// together. A duplicate is virtually always a caller mistake (two radios\n// for the \"same\" value can't be meaningfully different choices), so warn\n// instead of silently accepting it.\nexport const warnOnDuplicateOptionValues = (\n  options: Option[],\n  componentName: string,\n) => {\n  const nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } })\n    .process?.env?.NODE_ENV;\n\n  if (nodeEnv === 'production') {\n    return;\n  }\n\n  const seen = new Set<OptionValue>();\n  const duplicates = new Set<OptionValue>();\n\n  for (const option of options) {\n    if (seen.has(option.value)) {\n      duplicates.add(option.value);\n    }\n    seen.add(option.value);\n  }\n\n  if (duplicates.size > 0) {\n    console.warn(\n      `${componentName}: duplicate option value(s) [${[...duplicates].map(v => JSON.stringify(v)).join(', ')}] — options sharing a value render as if selecting one selects all of them, since selection is matched by value.`,\n    );\n  }\n};\n"],"mappings":";AAeA,MAAa,oBAAoB,YAC/B,QAAQ,KAAI,SACV,OAAO,SAAS,WACZ,OACA;CACE,OAAO,GAAG;CACV,OAAO;CACR,CACN;AAUH,MAAa,+BACX,SACA,kBACG;AAIH,KAHiB,WACd,SAAS,KAAK,aAED,aACd;CAGF,MAAM,uBAAO,IAAI,KAAkB;CACnC,MAAM,6BAAa,IAAI,KAAkB;AAEzC,MAAK,MAAM,UAAU,SAAS;AAC5B,MAAI,KAAK,IAAI,OAAO,MAAM,CACxB,YAAW,IAAI,OAAO,MAAM;AAE9B,OAAK,IAAI,OAAO,MAAM;;AAGxB,KAAI,WAAW,OAAO,EACpB,SAAQ,KACN,GAAG,cAAc,+BAA+B,CAAC,GAAG,WAAW,CAAC,KAAI,MAAK,KAAK,UAAU,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,kHACxG"}

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

@@ -1 +1 @@
-{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;;UAwBiB,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,UAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA,EAAO,WAAA;AAAA;AAAA,cAGf,UAAA;EAAc,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,IAAA;EAAA,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAejB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;;UAyBiB,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,UAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,QAAA,IAAY,KAAA,EAAO,WAAA;AAAA;AAAA,cAGf,UAAA;EAAc,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,OAAA,EAAA,QAAA;EAAA,IAAA;EAAA,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAejB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -3,7 +3,7 @@
 import { cn } from "../../../utils.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import Button from "../../../Button.mjs";
-import { normalizeOptions } from "../option-group.mjs";
+import { normalizeOptions, warnOnDuplicateOptionValues } from "../option-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
 import Radio from "./radio.mjs";
 import { useId } from "react";
@@ -19,6 +19,7 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 		onChange: _onChange
 	});
 	const options = normalizeOptions(_options);
+	warnOnDuplicateOptionValues(options, "Radio.Group");
 	const isButton = optionType === "button";
 	const onChange = (checked, optionValue) => {
 		if (!checked) return;
@@ -60,7 +61,7 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 					onChange: (checked) => onChange(checked, item.value),
 					children: item.label
 				})
-			}, String(item.value));
+			}, `${index}-${String(item.value)}`);
 		})
 	});
 	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {

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

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":["radio"],"sources":["../../../../src/components/atoms/radio/group.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n} from '../option-group';\nimport { RadioGroupContext } from './context';\nimport Radio from './radio';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\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 — participates in `FormData` when set. */\n  name?: string;\n  optionType?: 'default' | 'button';\n  buttonStyle?: 'solid' | 'outlined';\n  size?: 'small' | 'middle' | 'large';\n  disabled?: boolean;\n  onChange?: (value: OptionValue) => void;\n}\n\nconst RadioGroup = ({\n  orientation = 'horizontal',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  optionType = 'default',\n  buttonStyle = 'solid',\n  size,\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,\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n\n  const isButton = optionType === 'button';\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    if (!checked) {\n      return;\n    }\n    setValue(optionValue);\n  };\n\n  // A single Radix radiogroup root owns every option so that arrow keys move\n  // focus across the whole group. `id` stays index-derived (for DOM\n  // id/label pairing), but Radix itself now addresses/submits items by\n  // their real (stringified) `value` — see radio.tsx.\n  const baseId = useId();\n  const getOptionId = (index: number) => `${baseId}-${index}`;\n  const checkedItemValue = value === undefined ? '' : String(value);\n\n  const onValueChange = (itemValue: string) => {\n    const item = options.find(option => String(option.value) === itemValue);\n\n    if (!item) {\n      return;\n    }\n\n    onChange(true, item.value);\n  };\n\n  const list = (\n    <ul\n      {...props}\n      className={cn(\n        'flex gap-4',\n        className,\n        orientation === 'vertical' && 'flex-col',\n        isButton && 'gap-0',\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value === item.value;\n\n        return (\n          <li\n            key={String(item.value)}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            {isButton ? (\n              // `asChild` gives the Button real radio semantics (role,\n              // aria-checked, roving tabindex, arrow-key nav, click/keyboard\n              // selection via the shared Core's onValueChange below) instead\n              // of a plain list of buttons with none of that.\n              <Item\n                asChild\n                value={String(item.value)}\n                disabled={disabled || item.disabled}\n              >\n                <Button\n                  variant={checked ? buttonStyle : 'outlined'}\n                  size={size}\n                  disabled={disabled || item.disabled}\n                  className={cn(\n                    // The `solid` variant (the checked item, by default)\n                    // renders no border at all while `outlined` (every\n                    // unchecked item) renders a 1px one — reserving the\n                    // border unconditionally keeps every option's box the\n                    // same size regardless of which variant it's in.\n                    'rounded-none border',\n                    checked &&\n                      (buttonStyle === 'outlined'\n                        ? 'border-primary'\n                        : 'border-transparent'),\n                    index === 0 &&\n                      (orientation === 'vertical'\n                        ? 'rounded-t-lg'\n                        : 'rounded-l-lg'),\n                    index === options.length - 1 &&\n                      (orientation === 'vertical'\n                        ? 'rounded-b-lg'\n                        : 'rounded-r-lg'),\n                  )}\n                >\n                  {item.label}\n                </Button>\n              </Item>\n            ) : (\n              <Radio\n                id={getOptionId(index)}\n                placement={placement}\n                className={cn(classNames?.item)}\n                value={item.value}\n                checked={checked}\n                disabled={disabled || item.disabled}\n                onChange={checked => onChange(checked, item.value)}\n              >\n                {item.label}\n              </Radio>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  return (\n    <RadioGroupContext.Provider value={true}>\n      <Core\n        className=\"block\"\n        name={name}\n        value={checkedItemValue}\n        onValueChange={onValueChange}\n      >\n        {list}\n      </Core>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AAuBnD,MAAM,cAAc,EAClB,cAAc,cACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,MACA,aAAa,WACb,cAAc,SACd,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAkC;EAC1D,OAAO;EACP;EACA,UAAU;EACX,CAAC;CAEF,MAAM,UAAoB,iBAAiB,SAAS;CAEpD,MAAM,WAAW,eAAe;CAEhC,MAAM,YAAY,SAAkB,gBAA6B;AAC/D,MAAI,CAAC,QACH;AAEF,WAAS,YAAY;;CAOvB,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,UAAkB,GAAG,OAAO,GAAG;CACpD,MAAM,mBAAmB,UAAU,SAAY,KAAK,OAAO,MAAM;CAEjE,MAAM,iBAAiB,cAAsB;EAC3C,MAAM,OAAO,QAAQ,MAAK,WAAU,OAAO,OAAO,MAAM,KAAK,UAAU;AAEvE,MAAI,CAAC,KACH;AAGF,WAAS,MAAM,KAAK,MAAM;;CAG5B,MAAM,OACJ,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,cACA,WACA,gBAAgB,cAAc,YAC9B,YAAY,QACb;YAEA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,UAAU,KAAK;AAE/B,UACE,oBAAC;IAEC,WAAW,GAAG,QAAQ,YAAY,QAAQ;cAEzC,WAKC,oBAAC;KACC;KACA,OAAO,OAAO,KAAK,MAAM;KACzB,UAAU,YAAY,KAAK;eAE3B,oBAAC;MACC,SAAS,UAAU,cAAc;MAC3B;MACN,UAAU,YAAY,KAAK;MAC3B,WAAW,GAMT,uBACA,YACG,gBAAgB,aACb,mBACA,uBACN,UAAU,MACP,gBAAgB,aACb,iBACA,iBACN,UAAU,QAAQ,SAAS,MACxB,gBAAgB,aACb,iBACA,gBACP;gBAEA,KAAK;OACC;MACJ,GAEP,oBAAC;KACC,IAAI,YAAY,MAAM;KACX;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACA;MApDL,OAAO,KAAK,MAAM,CAsDpB;IAEP;GACC;AAGP,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC;GACC,WAAU;GACJ;GACN,OAAO;GACQ;aAEd;IACI;GACoB"}
+{"version":3,"file":"group.mjs","names":["radio"],"sources":["../../../../src/components/atoms/radio/group.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport {\n  type Option,\n  type OptionGroupClassNames,\n  type OptionValue,\n  type Options,\n  normalizeOptions,\n  warnOnDuplicateOptionValues,\n} from '../option-group';\nimport { RadioGroupContext } from './context';\nimport Radio from './radio';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\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 — participates in `FormData` when set. */\n  name?: string;\n  optionType?: 'default' | 'button';\n  buttonStyle?: 'solid' | 'outlined';\n  size?: 'small' | 'middle' | 'large';\n  disabled?: boolean;\n  onChange?: (value: OptionValue) => void;\n}\n\nconst RadioGroup = ({\n  orientation = 'horizontal',\n  placement = 'left',\n  className,\n  classNames = {},\n  options: _options = [],\n  name,\n  optionType = 'default',\n  buttonStyle = 'solid',\n  size,\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,\n    onChange: _onChange,\n  });\n\n  const options: Option[] = normalizeOptions(_options);\n  warnOnDuplicateOptionValues(options, 'Radio.Group');\n\n  const isButton = optionType === 'button';\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    if (!checked) {\n      return;\n    }\n    setValue(optionValue);\n  };\n\n  // A single Radix radiogroup root owns every option so that arrow keys move\n  // focus across the whole group. `id` stays index-derived (for DOM\n  // id/label pairing), but Radix itself now addresses/submits items by\n  // their real (stringified) `value` — see radio.tsx.\n  const baseId = useId();\n  const getOptionId = (index: number) => `${baseId}-${index}`;\n  const checkedItemValue = value === undefined ? '' : String(value);\n\n  const onValueChange = (itemValue: string) => {\n    const item = options.find(option => String(option.value) === itemValue);\n\n    if (!item) {\n      return;\n    }\n\n    onChange(true, item.value);\n  };\n\n  const list = (\n    <ul\n      {...props}\n      className={cn(\n        'flex gap-4',\n        className,\n        orientation === 'vertical' && 'flex-col',\n        isButton && 'gap-0',\n      )}\n    >\n      {options.map((item: Option, index) => {\n        const checked = value === item.value;\n\n        return (\n          <li\n            key={`${index}-${String(item.value)}`}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            {isButton ? (\n              // `asChild` gives the Button real radio semantics (role,\n              // aria-checked, roving tabindex, arrow-key nav, click/keyboard\n              // selection via the shared Core's onValueChange below) instead\n              // of a plain list of buttons with none of that.\n              <Item\n                asChild\n                value={String(item.value)}\n                disabled={disabled || item.disabled}\n              >\n                <Button\n                  variant={checked ? buttonStyle : 'outlined'}\n                  size={size}\n                  disabled={disabled || item.disabled}\n                  className={cn(\n                    // The `solid` variant (the checked item, by default)\n                    // renders no border at all while `outlined` (every\n                    // unchecked item) renders a 1px one — reserving the\n                    // border unconditionally keeps every option's box the\n                    // same size regardless of which variant it's in.\n                    'rounded-none border',\n                    checked &&\n                      (buttonStyle === 'outlined'\n                        ? 'border-primary'\n                        : 'border-transparent'),\n                    index === 0 &&\n                      (orientation === 'vertical'\n                        ? 'rounded-t-lg'\n                        : 'rounded-l-lg'),\n                    index === options.length - 1 &&\n                      (orientation === 'vertical'\n                        ? 'rounded-b-lg'\n                        : 'rounded-r-lg'),\n                  )}\n                >\n                  {item.label}\n                </Button>\n              </Item>\n            ) : (\n              <Radio\n                id={getOptionId(index)}\n                placement={placement}\n                className={cn(classNames?.item)}\n                value={item.value}\n                checked={checked}\n                disabled={disabled || item.disabled}\n                onChange={checked => onChange(checked, item.value)}\n              >\n                {item.label}\n              </Radio>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  return (\n    <RadioGroupContext.Provider value={true}>\n      <Core\n        className=\"block\"\n        name={name}\n        value={checkedItemValue}\n        onValueChange={onValueChange}\n      >\n        {list}\n      </Core>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AAuBnD,MAAM,cAAc,EAClB,cAAc,cACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,MACA,aAAa,WACb,cAAc,SACd,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,OAAO,YAAY,qBAAkC;EAC1D,OAAO;EACP;EACA,UAAU;EACX,CAAC;CAEF,MAAM,UAAoB,iBAAiB,SAAS;AACpD,6BAA4B,SAAS,cAAc;CAEnD,MAAM,WAAW,eAAe;CAEhC,MAAM,YAAY,SAAkB,gBAA6B;AAC/D,MAAI,CAAC,QACH;AAEF,WAAS,YAAY;;CAOvB,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,UAAkB,GAAG,OAAO,GAAG;CACpD,MAAM,mBAAmB,UAAU,SAAY,KAAK,OAAO,MAAM;CAEjE,MAAM,iBAAiB,cAAsB;EAC3C,MAAM,OAAO,QAAQ,MAAK,WAAU,OAAO,OAAO,MAAM,KAAK,UAAU;AAEvE,MAAI,CAAC,KACH;AAGF,WAAS,MAAM,KAAK,MAAM;;CAG5B,MAAM,OACJ,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,cACA,WACA,gBAAgB,cAAc,YAC9B,YAAY,QACb;YAEA,QAAQ,KAAK,MAAc,UAAU;GACpC,MAAM,UAAU,UAAU,KAAK;AAE/B,UACE,oBAAC;IAEC,WAAW,GAAG,QAAQ,YAAY,QAAQ;cAEzC,WAKC,oBAAC;KACC;KACA,OAAO,OAAO,KAAK,MAAM;KACzB,UAAU,YAAY,KAAK;eAE3B,oBAAC;MACC,SAAS,UAAU,cAAc;MAC3B;MACN,UAAU,YAAY,KAAK;MAC3B,WAAW,GAMT,uBACA,YACG,gBAAgB,aACb,mBACA,uBACN,UAAU,MACP,gBAAgB,aACb,iBACA,iBACN,UAAU,QAAQ,SAAS,MACxB,gBAAgB,aACb,iBACA,gBACP;gBAEA,KAAK;OACC;MACJ,GAEP,oBAAC;KACC,IAAI,YAAY,MAAM;KACX;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACA;MApDL,GAAG,MAAM,GAAG,OAAO,KAAK,MAAM,GAsDhC;IAEP;GACC;AAGP,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC;GACC,WAAU;GACJ;GACN,OAAO;GACQ;aAEd;IACI;GACoB"}

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

@@ -1,3 +1,4 @@
+import * as react from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/spin.d.ts
@@ -9,7 +10,7 @@ declare const Spin: ({
   className,
   children,
   ...props
-}: Props) => react_jsx_runtime0.JSX.Element | null;
+}: Props) => string | number | bigint | true | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { Spin };
 //# sourceMappingURL=spin.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"spin.d.mts","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"mappings":";;;UAIiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,QAAA;AAAA;AAAA,cAGI,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAA6C,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"spin.d.mts","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"mappings":";;;;UAIiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,QAAA;AAAA;AAAA,cAGI,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAA6C,KAAA,uCAAK,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/spin.mjs

@@ -14,13 +14,14 @@ const Spin = ({ spinning, className, children, ...props }) => {
 			children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" })
 		});
 	}
+	if (!spinning) return children;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(spinning && "pointer-events-none opacity-50"),
+			className: "pointer-events-none opacity-50",
 			children
-		}), spinning && /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsx("div", {
 			role: "status",
 			"aria-label": "로딩 중",
 			className: "absolute inset-0 flex items-center justify-center",

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

@@ -1 +1 @@
-{"version":3,"file":"spin.mjs","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  spinning?: boolean;\n}\n\nconst Spin = ({ spinning, className, children, ...props }: Props) => {\n  // With no children there's nothing to render at all while idle — unlike\n  // the branch below, there's no wrapper for `className`/`props` to land\n  // on regardless, so returning null here isn't the same bug.\n  if (!children) {\n    if (!spinning) {\n      return null;\n    }\n\n    return (\n      <div\n        role=\"status\"\n        aria-label=\"로딩 중\"\n        className={cn('flex h-full items-center justify-center', className)}\n        {...props}\n      >\n        <Loader2 className=\"animate-spin\" />\n      </div>\n    );\n  }\n\n  // `className`/rest props always land on this one wrapper regardless of\n  // `spinning`, instead of applying to the icon in one branch and being\n  // dropped entirely in another.\n  return (\n    <div className={cn('relative', className)} {...props}>\n      <div className={cn(spinning && 'pointer-events-none opacity-50')}>\n        {children}\n      </div>\n      {spinning && (\n        <div\n          role=\"status\"\n          aria-label=\"로딩 중\"\n          className=\"absolute inset-0 flex items-center justify-center\"\n        >\n          <Loader2 className=\"animate-spin\" />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Spin;\n"],"mappings":";;;;;AAQA,MAAM,QAAQ,EAAE,UAAU,WAAW,UAAU,GAAG,YAAmB;AAInE,KAAI,CAAC,UAAU;AACb,MAAI,CAAC,SACH,QAAO;AAGT,SACE,oBAAC;GACC,MAAK;GACL,cAAW;GACX,WAAW,GAAG,2CAA2C,UAAU;GACnE,GAAI;aAEJ,oBAAC,WAAQ,WAAU,iBAAiB;IAChC;;AAOV,QACE,qBAAC;EAAI,WAAW,GAAG,YAAY,UAAU;EAAE,GAAI;aAC7C,oBAAC;GAAI,WAAW,GAAG,YAAY,iCAAiC;GAC7D;IACG,EACL,YACC,oBAAC;GACC,MAAK;GACL,cAAW;GACX,WAAU;aAEV,oBAAC,WAAQ,WAAU,iBAAiB;IAChC;GAEJ"}
+{"version":3,"file":"spin.mjs","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  spinning?: boolean;\n}\n\nconst Spin = ({ spinning, className, children, ...props }: Props) => {\n  // With no children there's nothing to render at all while idle — unlike\n  // the branch below, there's no wrapper for `className`/`props` to land\n  // on regardless, so returning null here isn't the same bug.\n  if (!children) {\n    if (!spinning) {\n      return null;\n    }\n\n    return (\n      <div\n        role=\"status\"\n        aria-label=\"로딩 중\"\n        className={cn('flex h-full items-center justify-center', className)}\n        {...props}\n      >\n        <Loader2 className=\"animate-spin\" />\n      </div>\n    );\n  }\n\n  // Idle: return children as-is rather than inserting a wrapper div, same\n  // policy Skeleton follows and for the same reason — a wrapper here could\n  // produce invalid markup (e.g. inside a <tr>/<li>) or break flex/grid\n  // child layout. className/props only ever describe the spinning overlay\n  // below, so there's nothing for them to apply to while idle.\n  if (!spinning) {\n    return children;\n  }\n\n  return (\n    <div className={cn('relative', className)} {...props}>\n      <div className=\"pointer-events-none opacity-50\">{children}</div>\n      <div\n        role=\"status\"\n        aria-label=\"로딩 중\"\n        className=\"absolute inset-0 flex items-center justify-center\"\n      >\n        <Loader2 className=\"animate-spin\" />\n      </div>\n    </div>\n  );\n};\n\nexport default Spin;\n"],"mappings":";;;;;AAQA,MAAM,QAAQ,EAAE,UAAU,WAAW,UAAU,GAAG,YAAmB;AAInE,KAAI,CAAC,UAAU;AACb,MAAI,CAAC,SACH,QAAO;AAGT,SACE,oBAAC;GACC,MAAK;GACL,cAAW;GACX,WAAW,GAAG,2CAA2C,UAAU;GACnE,GAAI;aAEJ,oBAAC,WAAQ,WAAU,iBAAiB;IAChC;;AASV,KAAI,CAAC,SACH,QAAO;AAGT,QACE,qBAAC;EAAI,WAAW,GAAG,YAAY,UAAU;EAAE,GAAI;aAC7C,oBAAC;GAAI,WAAU;GAAkC;IAAe,EAChE,oBAAC;GACC,MAAK;GACL,cAAW;GACX,WAAU;aAEV,oBAAC,WAAQ,WAAU,iBAAiB;IAChC;GACF"}

package/dist/components/molecules/collapse.d.mts

@@ -33,5 +33,5 @@ declare const Collapse: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Collapse };
+export { Collapse, Props };
 //# sourceMappingURL=collapse.d.mts.map

package/dist/components/molecules/collapse.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.mts","names":[],"sources":["../../../src/components/molecules/collapse.tsx"],"mappings":";;;;UAUU,IAAA;EACR,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,QAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,UAGR,KAAA,SAAc,IAAA,CACtB,KAAA,CAAM,wBAAA;EAGN,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,UAAA,GAAa,KAAA,CAAM,SAAA;EACnB,UAAA;IACE,IAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,gBAAA;EACA,SAAA;EACA,QAAA,IAAY,IAAA;AAAA;AAAA,cAGR,QAAA;EAAY,UAAA;EAAA,SAAA;EAAA,KAAA;EAAA,SAAA;EAAA,UAAA;EAAA,gBAAA;EAAA,SAAA,EAAA,UAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAUf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"collapse.d.mts","names":[],"sources":["../../../src/components/molecules/collapse.tsx"],"mappings":";;;;UAUU,IAAA;EACR,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,QAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,UAGD,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,KAAA,GAAQ,IAAA;EACR,SAAA;EACA,UAAA,GAAa,KAAA,CAAM,SAAA;EACnB,UAAA;IACE,IAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,gBAAA;EACA,SAAA;EACA,QAAA,IAAY,IAAA;AAAA;AAAA,cAGR,QAAA;EAAY,UAAA;EAAA,SAAA;EAAA,KAAA;EAAA,SAAA;EAAA,UAAA;EAAA,gBAAA;EAAA,SAAA,EAAA,UAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAUf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/collapse.mjs

@@ -26,7 +26,7 @@ const Collapse = ({ expandIcon, accordion = false, items = [], className, classN
 		...props,
 		className,
 		...accordionProps,
-		children: items.map(({ label, children, disabled }, key) => /* @__PURE__ */ jsxs(AccordionItem, {
+		children: items.map(({ key, label, children, disabled }) => /* @__PURE__ */ jsxs(AccordionItem, {
 			value: `${key}`,
 			className: cn("border-none", classNames?.item),
 			disabled,

package/dist/components/molecules/collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.mjs","names":["accordion"],"sources":["../../../src/components/molecules/collapse.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { accordion } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =\n  accordion;\n\ninterface Item {\n  key: React.Key;\n  label: React.ReactNode;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\ninterface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'defaultValue' | 'value' | 'dir'\n> {\n  items?: Item[];\n  accordion?: boolean;\n  expandIcon?: React.ReactNode;\n  classNames?: {\n    item?: string;\n    header?: string;\n    body?: string;\n  };\n  defaultActiveKey?: string[] | number[];\n  activeKey?: string[] | number[];\n  onChange?: (keys: string[]) => void;\n}\n\nconst Collapse = ({\n  expandIcon,\n  accordion = false,\n  items = [],\n  className,\n  classNames,\n  defaultActiveKey,\n  activeKey: _activeKey,\n  onChange: _onChange,\n  ...props\n}: Props) => {\n  const controlled = _activeKey !== undefined;\n\n  const accordionProps = accordion\n    ? {\n        type: 'single' as const,\n        onValueChange: (value: string) => {\n          _onChange?.(value ? [value] : []);\n        },\n        ...(controlled\n          ? { value: `${_activeKey?.[0] ?? ''}` }\n          : { defaultValue: `${defaultActiveKey?.[0] ?? ''}` }),\n      }\n    : {\n        type: 'multiple' as const,\n        onValueChange: (values: string[]) => {\n          _onChange?.(values);\n        },\n        ...(controlled\n          ? { value: _activeKey?.map(key => `${key}`) }\n          : { defaultValue: defaultActiveKey?.map(key => `${key}`) }),\n      };\n\n  return (\n    <Accordion {...props} className={className} {...accordionProps}>\n      {items.map(({ label, children, disabled }, key) => (\n        <AccordionItem\n          key={key}\n          value={`${key}`}\n          className={cn(\n            'border-none',\n            classNames?.item,\n            //\n          )}\n          disabled={disabled}\n        >\n          <AccordionTrigger\n            className={cn(\n              'hover:no-underline',\n              classNames?.header,\n              disabled && 'cursor-no-drop opacity-50',\n              //\n            )}\n            expandIcon={expandIcon}\n            disabled={disabled}\n          >\n            {label}\n          </AccordionTrigger>\n          <AccordionContent\n            className={cn(\n              classNames?.body,\n              //\n            )}\n          >\n            {children}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n\nexport default Collapse;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,WAAW,eAAe,kBAAkB,qBAClDA;AA0BF,MAAM,YAAY,EAChB,YACA,YAAY,OACZ,QAAQ,EAAE,EACV,WACA,YACA,kBACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,aAAa,eAAe;CAElC,MAAM,iBAAiB,YACnB;EACE,MAAM;EACN,gBAAgB,UAAkB;AAChC,eAAY,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;;EAEnC,GAAI,aACA,EAAE,OAAO,GAAG,aAAa,MAAM,MAAM,GACrC,EAAE,cAAc,GAAG,mBAAmB,MAAM,MAAM;EACvD,GACD;EACE,MAAM;EACN,gBAAgB,WAAqB;AACnC,eAAY,OAAO;;EAErB,GAAI,aACA,EAAE,OAAO,YAAY,KAAI,QAAO,GAAG,MAAM,EAAE,GAC3C,EAAE,cAAc,kBAAkB,KAAI,QAAO,GAAG,MAAM,EAAE;EAC7D;AAEL,QACE,oBAAC;EAAU,GAAI;EAAkB;EAAW,GAAI;YAC7C,MAAM,KAAK,EAAE,OAAO,UAAU,YAAY,QACzC,qBAAC;GAEC,OAAO,GAAG;GACV,WAAW,GACT,eACA,YAAY,KAEb;GACS;cAEV,oBAAC;IACC,WAAW,GACT,sBACA,YAAY,QACZ,YAAY,4BAEb;IACW;IACF;cAET;KACgB,EACnB,oBAAC;IACC,WAAW,GACT,YAAY,KAEb;IAEA;KACgB;KA5Bd,IA6BS,CAChB;GACQ"}
+{"version":3,"file":"collapse.mjs","names":["accordion"],"sources":["../../../src/components/molecules/collapse.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { accordion } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =\n  accordion;\n\ninterface Item {\n  key: React.Key;\n  label: React.ReactNode;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'defaultValue' | 'value' | 'dir'\n> {\n  items?: Item[];\n  accordion?: boolean;\n  expandIcon?: React.ReactNode;\n  classNames?: {\n    item?: string;\n    header?: string;\n    body?: string;\n  };\n  defaultActiveKey?: string[] | number[];\n  activeKey?: string[] | number[];\n  onChange?: (keys: string[]) => void;\n}\n\nconst Collapse = ({\n  expandIcon,\n  accordion = false,\n  items = [],\n  className,\n  classNames,\n  defaultActiveKey,\n  activeKey: _activeKey,\n  onChange: _onChange,\n  ...props\n}: Props) => {\n  const controlled = _activeKey !== undefined;\n\n  const accordionProps = accordion\n    ? {\n        type: 'single' as const,\n        onValueChange: (value: string) => {\n          _onChange?.(value ? [value] : []);\n        },\n        ...(controlled\n          ? { value: `${_activeKey?.[0] ?? ''}` }\n          : { defaultValue: `${defaultActiveKey?.[0] ?? ''}` }),\n      }\n    : {\n        type: 'multiple' as const,\n        onValueChange: (values: string[]) => {\n          _onChange?.(values);\n        },\n        ...(controlled\n          ? { value: _activeKey?.map(key => `${key}`) }\n          : { defaultValue: defaultActiveKey?.map(key => `${key}`) }),\n      };\n\n  return (\n    <Accordion {...props} className={className} {...accordionProps}>\n      {items.map(({ key, label, children, disabled }) => (\n        <AccordionItem\n          key={key}\n          value={`${key}`}\n          className={cn(\n            'border-none',\n            classNames?.item,\n            //\n          )}\n          disabled={disabled}\n        >\n          <AccordionTrigger\n            className={cn(\n              'hover:no-underline',\n              classNames?.header,\n              disabled && 'cursor-no-drop opacity-50',\n              //\n            )}\n            expandIcon={expandIcon}\n            disabled={disabled}\n          >\n            {label}\n          </AccordionTrigger>\n          <AccordionContent\n            className={cn(\n              classNames?.body,\n              //\n            )}\n          >\n            {children}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n\nexport default Collapse;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,WAAW,eAAe,kBAAkB,qBAClDA;AA0BF,MAAM,YAAY,EAChB,YACA,YAAY,OACZ,QAAQ,EAAE,EACV,WACA,YACA,kBACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,aAAa,eAAe;CAElC,MAAM,iBAAiB,YACnB;EACE,MAAM;EACN,gBAAgB,UAAkB;AAChC,eAAY,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;;EAEnC,GAAI,aACA,EAAE,OAAO,GAAG,aAAa,MAAM,MAAM,GACrC,EAAE,cAAc,GAAG,mBAAmB,MAAM,MAAM;EACvD,GACD;EACE,MAAM;EACN,gBAAgB,WAAqB;AACnC,eAAY,OAAO;;EAErB,GAAI,aACA,EAAE,OAAO,YAAY,KAAI,QAAO,GAAG,MAAM,EAAE,GAC3C,EAAE,cAAc,kBAAkB,KAAI,QAAO,GAAG,MAAM,EAAE;EAC7D;AAEL,QACE,oBAAC;EAAU,GAAI;EAAkB;EAAW,GAAI;YAC7C,MAAM,KAAK,EAAE,KAAK,OAAO,UAAU,eAClC,qBAAC;GAEC,OAAO,GAAG;GACV,WAAW,GACT,eACA,YAAY,KAEb;GACS;cAEV,oBAAC;IACC,WAAW,GACT,sBACA,YAAY,QACZ,YAAY,4BAEb;IACW;IACF;cAET;KACgB,EACnB,oBAAC;IACC,WAAW,GACT,YAAY,KAEb;IAEA;KACgB;KA5Bd,IA6BS,CAChB;GACQ"}

package/dist/components/molecules/dropdown.d.mts

@@ -6,7 +6,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 type ChangeEventHandler = (open: boolean) => void;
 interface Props extends React.ComponentPropsWithoutRef<'div'> {
   open?: boolean;
-  trigger?: string;
+  trigger?: 'hover' | 'click';
   menu?: MenuProps;
   onOpenChange?: ChangeEventHandler;
 }
@@ -22,5 +22,5 @@ declare const Dropdown: ({
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Dropdown };
+export { Dropdown, Props };
 //# sourceMappingURL=dropdown.d.mts.map

package/dist/components/molecules/dropdown.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;;;;KAUK,kBAAA,IAAsB,IAAA;AAAA,UAEjB,KAAA,SAAc,KAAA,CAAM,wBAAA;EAC5B,IAAA;EACA,OAAA;EACA,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,kBAAA;AAAA;AAAA,cAGX,QAAA;EAAY,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA,EAAA,KAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,YAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;;;;KAWK,kBAAA,IAAsB,IAAA;AAAA,UAEV,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,IAAA;EACA,OAAA;EACA,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,kBAAA;AAAA;AAAA,cAGX,QAAA;EAAY,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,IAAA,EAAA,KAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,YAAA;EAAA,YAAA;EAAA,GAAA;AAAA,GAUf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/molecules/dropdown.mjs

@@ -2,23 +2,25 @@
 
 import { cn } from "../../utils.mjs";
 import Menu from "./menu/menu.mjs";
-import { useState } from "react";
+import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 import { AnimatePresence, motion } from "motion/react";
 
 //#region src/components/molecules/dropdown.tsx
 const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange: _onOpenChange = () => {}, className, onMouseEnter, onMouseLeave, ...props }) => {
-	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
-	const controlled = _open !== void 0;
-	const open = controlled ? _open : uncontrolledOpen;
+	const [open, onOpenChange] = useControllableState({
+		value: _open,
+		defaultValue: false,
+		onChange: _onOpenChange
+	});
 	const isClickTrigger = trigger === "click";
-	const onOpenChange = (nextOpen) => {
-		if (!controlled) setUncontrolledOpen(nextOpen);
-		_onOpenChange(nextOpen);
-	};
+	const menuId = useId();
+	const containerRef = useRef(null);
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: cn("relative z-0", "inline-block cursor-pointer", className),
+		ref: containerRef,
+		className: cn("relative", "inline-block cursor-pointer", className),
 		onMouseEnter: (event) => {
 			onMouseEnter?.(event);
 			if (isClickTrigger) return;
@@ -30,8 +32,11 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 			onOpenChange(false);
 		},
 		children: [/* @__PURE__ */ jsx("div", {
+			role: isClickTrigger ? "button" : void 0,
+			tabIndex: isClickTrigger ? 0 : void 0,
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
+			"aria-controls": open ? menuId : void 0,
 			onClick: () => {
 				if (!isClickTrigger) return;
 				onOpenChange(!open);
@@ -40,11 +45,18 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 				if (isClickTrigger) return;
 				onOpenChange(true);
 			},
-			onBlur: () => {
-				onOpenChange(false);
+			onBlur: (e) => {
+				if (!containerRef.current?.contains(e.relatedTarget)) onOpenChange(false);
 			},
 			onKeyDown: (e) => {
-				if (e.key === "Escape") onOpenChange(false);
+				if (e.key === "Escape") {
+					onOpenChange(false);
+					return;
+				}
+				if (isClickTrigger && (e.key === "Enter" || e.key === " ")) {
+					e.preventDefault();
+					onOpenChange(!open);
+				}
 			},
 			children
 		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(motion.div, {
@@ -64,6 +76,7 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 			transition: { duration: .1 },
 			children: /* @__PURE__ */ jsx(Menu, {
 				...menu,
+				id: menuId,
 				onMouseDown: (e) => {
 					e.preventDefault();
 				}

package/dist/components/molecules/dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\ninterface Props extends React.ComponentPropsWithoutRef<'div'> {\n  open?: boolean;\n  trigger?: string;\n  menu?: MenuProps;\n  onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n  children,\n  menu,\n  trigger = 'hover',\n  open: _open,\n  onOpenChange: _onOpenChange = () => {},\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: Props) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(false);\n\n  const controlled = _open !== undefined;\n  const open = controlled ? _open : uncontrolledOpen;\n\n  const isClickTrigger = trigger === 'click';\n\n  const onOpenChange = (nextOpen: boolean) => {\n    if (!controlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    _onOpenChange(nextOpen);\n  };\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        'relative z-0',\n        'inline-block cursor-pointer',\n        className,\n        //\n      )}\n      onMouseEnter={event => {\n        onMouseEnter?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(true);\n      }}\n      onMouseLeave={event => {\n        onMouseLeave?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(false);\n      }}\n    >\n      <div\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={() => {\n          if (!isClickTrigger) {\n            return;\n          }\n          onOpenChange(!open);\n        }}\n        onFocus={() => {\n          if (isClickTrigger) {\n            return;\n          }\n          onOpenChange(true);\n        }}\n        onBlur={() => {\n          onOpenChange(false);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Escape') {\n            onOpenChange(false);\n          }\n        }}\n      >\n        {children}\n      </div>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            className={cn(\n              'absolute top-full pt-2',\n              //\n            )}\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.1 }}\n          >\n            <Menu\n              {...menu}\n              onMouseDown={e => {\n                e.preventDefault();\n              }}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;AAmBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,WACA,cACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,MAAM;CAExE,MAAM,aAAa,UAAU;CAC7B,MAAM,OAAO,aAAa,QAAQ;CAElC,MAAM,iBAAiB,YAAY;CAEnC,MAAM,gBAAgB,aAAsB;AAC1C,MAAI,CAAC,WACH,qBAAoB,SAAS;AAE/B,gBAAc,SAAS;;AAGzB,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GACT,gBACA,+BACA,UAED;EACD,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,iBAAc;GACd,iBAAe;GACf,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,eAAe;AACb,QAAI,eACF;AAEF,iBAAa,KAAK;;GAEpB,cAAc;AACZ,iBAAa,MAAM;;GAErB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,SACZ,cAAa,MAAM;;GAItB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}
+{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  open?: boolean;\n  trigger?: 'hover' | 'click';\n  menu?: MenuProps;\n  onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n  children,\n  menu,\n  trigger = 'hover',\n  open: _open,\n  onOpenChange: _onOpenChange = () => {},\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: Props) => {\n  const [open, onOpenChange] = useControllableState<boolean>({\n    value: _open,\n    defaultValue: false,\n    onChange: _onOpenChange,\n  });\n\n  const isClickTrigger = trigger === 'click';\n  const menuId = useId();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      {...props}\n      ref={containerRef}\n      className={cn(\n        'relative',\n        'inline-block cursor-pointer',\n        className,\n        //\n      )}\n      onMouseEnter={event => {\n        onMouseEnter?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(true);\n      }}\n      onMouseLeave={event => {\n        onMouseLeave?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(false);\n      }}\n    >\n      <div\n        role={isClickTrigger ? 'button' : undefined}\n        tabIndex={isClickTrigger ? 0 : undefined}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={open ? menuId : undefined}\n        onClick={() => {\n          if (!isClickTrigger) {\n            return;\n          }\n          onOpenChange(!open);\n        }}\n        onFocus={() => {\n          if (isClickTrigger) {\n            return;\n          }\n          onOpenChange(true);\n        }}\n        onBlur={e => {\n          // Without this check, moving focus from the trigger into the\n          // menu itself (e.g. via Tab) closed the dropdown before the\n          // user could ever reach it — the mouse path avoided the same\n          // bug only by way of onMouseDown's preventDefault below, which\n          // does nothing for keyboard focus. Mirrors the containment\n          // check menu/item/item.tsx already uses for the same reason.\n          if (!containerRef.current?.contains(e.relatedTarget as Node)) {\n            onOpenChange(false);\n          }\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Escape') {\n            onOpenChange(false);\n            return;\n          }\n          if (isClickTrigger && (e.key === 'Enter' || e.key === ' ')) {\n            e.preventDefault();\n            onOpenChange(!open);\n          }\n        }}\n      >\n        {children}\n      </div>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            className={cn(\n              'absolute top-full pt-2',\n              //\n            )}\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.1 }}\n          >\n            <Menu\n              {...menu}\n              id={menuId}\n              onMouseDown={e => {\n                e.preventDefault();\n              }}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,WACA,cACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,MAAM,gBAAgB,qBAA8B;EACzD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CAEF,MAAM,iBAAiB,YAAY;CACnC,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,OAAuB,KAAK;AAEjD,QACE,qBAAC;EACC,GAAI;EACJ,KAAK;EACL,WAAW,GACT,YACA,+BACA,UAED;EACD,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,MAAM,iBAAiB,WAAW;GAClC,UAAU,iBAAiB,IAAI;GAC/B,iBAAc;GACd,iBAAe;GACf,iBAAe,OAAO,SAAS;GAC/B,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,eAAe;AACb,QAAI,eACF;AAEF,iBAAa,KAAK;;GAEpB,SAAQ,MAAK;AAOX,QAAI,CAAC,aAAa,SAAS,SAAS,EAAE,cAAsB,CAC1D,cAAa,MAAM;;GAGvB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,UAAU;AACtB,kBAAa,MAAM;AACnB;;AAEF,QAAI,mBAAmB,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAM;AAC1D,OAAE,gBAAgB;AAClB,kBAAa,CAAC,KAAK;;;GAItB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,IAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}

package/dist/components/molecules/index.d.mts

@@ -1,10 +1,13 @@
-import Card from "../../Card.mjs";
-import { Menu } from "./menu/menu.mjs";
+import Card, { Props } from "../../Card.mjs";
+import { Menu, Props as Props$1 } from "./menu/menu.mjs";
 import "../../Menu.mjs";
+import { Props as Props$2 } from "./reveals/reveals.mjs";
 import Reveals from "../../Reveals.mjs";
-import Space from "../../Space.mjs";
-import { Collapse } from "./collapse.mjs";
-import { Dropdown } from "./dropdown.mjs";
+import Space, { Props as Props$3 } from "../../Space.mjs";
+import { Collapse, Props as Props$4 } from "./collapse.mjs";
+import { Dropdown, Props as Props$5 } from "./dropdown.mjs";
+import { Props as Props$6 } from "./marquees/marquees.mjs";
 import { Marquees } from "./marquees/index.mjs";
+import { Props as Props$7 } from "./splitter/splitter.mjs";
 import { Splitter } from "./splitter/index.mjs";
-import { Upload, UploadFile } from "./upload.mjs";
+import { Props as Props$8, Upload, UploadFile } from "./upload.mjs";

package/dist/components/molecules/marquees/item.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"mappings":";;;UAQiB,SAAA;EACf,GAAA,GAAM,KAAA,CAAM,GAAA;EACZ,KAAA;EACA,QAAA;EACA,KAAA;EACA,YAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;AAAA,UAGF,KAAA,SACP,IAAA,CAAK,KAAA,CAAM,wBAAA,iBAAyC,SAAA;EAC5D,KAAA;AAAA;AAAA,cAGI,IAAA;EAAQ,KAAA,EAAA,MAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA,EAAA,MAAA;EAAA,YAAA;EAAA;AAAA,GAOX,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"mappings":";;;UAOiB,SAAA;EACf,GAAA,GAAM,KAAA,CAAM,GAAA;EACZ,KAAA;EACA,QAAA;EACA,KAAA;EACA,YAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA;AAAA,UAGF,KAAA,SACP,IAAA,CAAK,KAAA,CAAM,wBAAA,iBAAyC,SAAA;EAC5D,KAAA;AAAA;AAAA,cAYI,IAAA;EAAQ,KAAA,EAAA,MAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA,EAAA,MAAA;EAAA,YAAA;EAAA;AAAA,GAOX,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}