@jbpark/ui-kit 3.7.0 → 4.0.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.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 (\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"}
+{"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/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,GAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAMd,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":";;;;;UAaiB,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

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from "../../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
 import FloatButton from "./float-button.mjs";
 import { ArrowUp } from "lucide-react";
 import { useRef } from "react";
@@ -9,11 +10,12 @@ import { useMergedRef, useWindowScroll } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/float-button/back-top.tsx
 const BackTop = ({ ref, visibilityHeight = 450, className, onClick, ...props }) => {
+	const { locale } = useConfig();
 	const buttonRef = useRef(null);
 	const { y } = useWindowScroll(buttonRef);
 	return /* @__PURE__ */ jsx(FloatButton, {
 		ref: useMergedRef(buttonRef, ref),
-		"aria-label": "맨 위로",
+		"aria-label": locale.backToTop ?? DEFAULT_LOCALE.backToTop,
 		icon: /* @__PURE__ */ jsx(ArrowUp, {}),
 		className: cn(className, (!y || visibilityHeight > y) && "hidden"),
 		onClick: (e) => {

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 { type MouseEvent, useRef } from 'react';\n\nimport { useMergedRef, 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 mergedRef = useMergedRef(buttonRef, ref);\n\n  return (\n    <FloatButton\n      ref={mergedRef}\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;AAIxC,QACE,oBAAC;EACC,KAJc,aAAa,WAAW,IAAI;EAK1C,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"}
+{"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 { useMergedRef, useWindowScroll } from '@jbpark/use-hooks';\nimport { ArrowUp } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\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 { locale } = useConfig();\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 mergedRef = useMergedRef(buttonRef, ref);\n\n  return (\n    <FloatButton\n      ref={mergedRef}\n      aria-label={locale.backToTop ?? DEFAULT_LOCALE.backToTop}\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":";;;;;;;;;;;AAkBA,MAAM,WAAW,EACf,KACA,mBAAmB,KACnB,WACA,SACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,YAAY,OAA0B,KAAK;CAKjD,MAAM,EAAE,MAAM,gBAAgB,UAAU;AAIxC,QACE,oBAAC;EACC,KAJc,aAAa,WAAW,IAAI;EAK1C,cAAY,OAAO,aAAa,eAAe;EAC/C,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/search.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";;;UAciB,KAAA,SAAc,KAAA,CAAM,qBAAA;EACnC,UAAA;EACA,QAAA,IACE,CAAA,EAAG,KAAA,CAAM,WAAA,CAAY,gBAAA;IAAsB,MAAA;MAAU,KAAA;IAAA;EAAA;EAEvD,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,MAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";;;UAeiB,KAAA,SAAc,KAAA,CAAM,qBAAA;EACnC,UAAA;EACA,QAAA,IACE,CAAA,EAAG,KAAA,CAAM,WAAA,CAAY,gBAAA;IAAsB,MAAA;MAAU,KAAA;IAAA;EAAA;EAEvD,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,MAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -3,6 +3,7 @@
 import { cn } from "../../../utils.mjs";
 import { input_exports } from "../../../core/input.mjs";
 import Button from "../../../Button.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
 import { CircleX, Search } from "lucide-react";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,6 +12,7 @@ import { useMergedRef } from "@jbpark/use-hooks";
 //#region src/components/atoms/input/search.tsx
 const { Input: Core } = input_exports;
 const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear = true, onChange, onKeyDown: _onKeyDown, onSearch: _onSearch, ...props }) => {
+	const { locale } = useConfig();
 	const inputRef = useRef(null);
 	const mergedRef = useMergedRef(inputRef, ref);
 	const [uncontrolledHasValue, setUncontrolledHasValue] = useState(!!defaultValue);
@@ -51,7 +53,7 @@ const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear =
 				}
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": "지우기",
+				"aria-label": locale.clear ?? DEFAULT_LOCALE.clear,
 				disabled,
 				className: cn("absolute right-2", "shrink-0 cursor-pointer", "disabled:cursor-not-allowed disabled:opacity-50", (!allowClear || !hasValue) && "hidden"),
 				onClick: onClear,

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

@@ -1 +1 @@
-{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { input } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onChange?: (\n    e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n  ) => void;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (!inputRef.current) {\n      return;\n    }\n\n    if (value === undefined) {\n      inputRef.current.value = '';\n      setUncontrolledHasValue(false);\n    }\n\n    onChange?.({ target: { value: '' } });\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          aria-label=\"지우기\"\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,YAAY,aAAa,UAAU,IAAI;CAE7C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,aAAa;CAC1B,MAAM,WAAW,UAAU,SAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;AACpB,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,UAAU,QAAW;AACvB,YAAS,QAAQ,QAAQ;AACzB,2BAAwB,MAAM;;AAGhC,aAAW,EAAE,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;;CAGvC,MAAM,iBAAiB;AACrB,MAAI,SACF;AAEF,MAAI,SAAS,QACX,aAAY,SAAS,QAAQ,MAAM;;AAIvC,QACE,qBAAC;EACC,WAAW,GACT,qBACA,cACA,UAED;aAED,qBAAC;GACC,WAAW,GACT,iBACA,2BAED;cAED,oBAAC;IACC,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,wCAED;IACM;IACO;IACd,WAAU,MAAK;AACb,SAAI,UAAU,OACZ,yBAAwB,CAAC,CAAC,EAAE,OAAO,MAAM;AAE3C,gBAAW,EAAE;;IAEf,YAAW,MAAK;AACd,kBAAa,EAAE;AACf,SAAI,EAAE,QAAQ,QACZ,WAAU;;KAGd,EACF,oBAAC;IACC,MAAK;IACL,cAAW;IACD;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;cAET,oBAAC,WAAQ,WAAU,WAAW;KACvB;IACL,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACd;GACV,WAAW,GACT,kBACA,SAED;GACD,SAAS;IACT;GACE;;AAIV,SAAO,cAAc"}
+{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { input } from '@repo/ui/core';\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onChange?: (\n    e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n  ) => void;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (!inputRef.current) {\n      return;\n    }\n\n    if (value === undefined) {\n      inputRef.current.value = '';\n      setUncontrolledHasValue(false);\n    }\n\n    onChange?.({ target: { value: '' } });\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,YAAY,aAAa,UAAU,IAAI;CAE7C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,aAAa;CAC1B,MAAM,WAAW,UAAU,SAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;AACpB,MAAI,CAAC,SAAS,QACZ;AAGF,MAAI,UAAU,QAAW;AACvB,YAAS,QAAQ,QAAQ;AACzB,2BAAwB,MAAM;;AAGhC,aAAW,EAAE,QAAQ,EAAE,OAAO,IAAI,EAAE,CAAC;;CAGvC,MAAM,iBAAiB;AACrB,MAAI,SACF;AAEF,MAAI,SAAS,QACX,aAAY,SAAS,QAAQ,MAAM;;AAIvC,QACE,qBAAC;EACC,WAAW,GACT,qBACA,cACA,UAED;aAED,qBAAC;GACC,WAAW,GACT,iBACA,2BAED;cAED,oBAAC;IACC,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,wCAED;IACM;IACO;IACd,WAAU,MAAK;AACb,SAAI,UAAU,OACZ,yBAAwB,CAAC,CAAC,EAAE,OAAO,MAAM;AAE3C,gBAAW,EAAE;;IAEf,YAAW,MAAK;AACd,kBAAa,EAAE;AACf,SAAI,EAAE,QAAQ,QACZ,WAAU;;KAGd,EACF,oBAAC;IACC,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IACjC;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;cAET,oBAAC,WAAQ,WAAU,WAAW;KACvB;IACL,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACd;GACV,WAAW,GACT,kBACA,SAED;GACD,SAAS;IACT;GACE;;AAIV,SAAO,cAAc"}

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/skeleton/skeleton.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";;;;UASiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAY,MAAA;EAAA,OAAA;EAAA,MAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,GAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAef,KAAA,0CAAK,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"}
+{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAY,MAAA;EAAA,OAAA;EAAA,MAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,GAAA;EAAA,SAAA;EAAA,UAAA;EAAA,KAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAef,KAAA,0CAAK,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/skeleton/skeleton.mjs

@@ -1,5 +1,8 @@
+'use client';
+
 import { cn } from "../../../utils.mjs";
 import { skeleton_exports } from "../../../core/skeleton.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../../providers/Config/context.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/skeleton/skeleton.tsx
@@ -13,10 +16,11 @@ const SIZES = {
 	large: "w-72 h-8"
 };
 const Skeleton = ({ active = true, loading = true, avatar, size = "default", direction = "vertical", count = 1, gap = 6, className, classNames = {}, style, width, height, children, ...props }) => {
+	const { locale } = useConfig();
 	if (!loading) return children ?? null;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
-		"aria-label": "로딩 중",
+		"aria-label": locale.loading ?? DEFAULT_LOCALE.loading,
 		className: cn("flex items-center gap-3", className),
 		...props,
 		children: [avatar && /* @__PURE__ */ jsx(Core, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["import { skeleton } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n  return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  active?: boolean;\n  loading?: boolean;\n  avatar?: boolean;\n  size?: 'default' | 'small' | 'large';\n  count?: number;\n  gap?: number;\n  direction?: 'horizontal' | 'vertical';\n  width?: string | number | (string | number)[];\n  height?: string | number | (string | number)[];\n  classNames?: {\n    wrapper?: string;\n    avatar?: string;\n    item?: string;\n  };\n}\n\nconst SIZES = {\n  small: 'w-48 h-4',\n  default: 'w-60 h-6',\n  large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n  active = true,\n  loading = true,\n  avatar,\n  size = 'default',\n  direction = 'vertical',\n  count = 1,\n  gap = 6,\n  className,\n  classNames = {},\n  style,\n  width,\n  height,\n  children,\n  ...props\n}: Props) => {\n  // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n  // is meant to swap in arbitrary real content once loading finishes,\n  // which can include elements with strict parent requirements (e.g. a\n  // `<tr>`), so adding a wrapper div could produce invalid markup.\n  // `className`/`style`/rest props only ever describe the skeleton's own\n  // placeholder markup, so there's nothing for them to apply to here.\n  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"로딩 중\"\n      className={cn('flex items-center gap-3', className)}\n      {...props}\n    >\n      {avatar && (\n        <Core\n          className={cn(\n            'h-12 w-12',\n            'rounded-xl',\n            !active && 'animate-none',\n            classNames.avatar,\n          )}\n        />\n      )}\n      <div\n        className={cn(\n          'flex grow',\n          direction === 'vertical' && 'flex-col',\n          classNames.wrapper,\n        )}\n        style={{\n          gap,\n        }}\n      >\n        {Array.from({ length: count }).map((_, index) => {\n          const itemWidth = getValueAtIndex(width, index);\n          const itemHeight = getValueAtIndex(height, index);\n\n          return (\n            <Core\n              key={index}\n              className={cn(\n                'rounded-md',\n                !active && 'animate-none',\n                SIZES[size],\n                classNames.item,\n                //\n              )}\n              style={{\n                ...style,\n                width: itemWidth,\n                height: itemHeight,\n              }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;AAC7D,QAAO,MAAM,QAAQ,MAAM,GAAI,MAAM,UAAU,MAAM,KAAM;;AAoB7D,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,EAAE,EACf,OACA,OACA,QACA,UACA,GAAG,YACQ;AAOX,KAAI,CAAC,QACH,QAAO,YAAY;AAGrB,QACE,qBAAC;EACC,MAAK;EACL,cAAW;EACX,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;aAEH,UACC,oBAAC,QACC,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,OACZ,GACD,EAEJ,oBAAC;GACC,WAAW,GACT,aACA,cAAc,cAAc,YAC5B,WAAW,QACZ;GACD,OAAO,EACL,KACD;aAEA,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,MAAM;IAC/C,MAAM,aAAa,gBAAgB,QAAQ,MAAM;AAEjD,WACE,oBAAC;KAEC,WAAW,GACT,cACA,CAAC,UAAU,gBACX,MAAM,OACN,WAAW,KAEZ;KACD,OAAO;MACL,GAAG;MACH,OAAO;MACP,QAAQ;MACT;OAZI,MAaL;KAEJ;IACE;GACF"}
+{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { skeleton } from '@repo/ui/core';\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n  return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  active?: boolean;\n  loading?: boolean;\n  avatar?: boolean;\n  size?: 'default' | 'small' | 'large';\n  count?: number;\n  gap?: number;\n  direction?: 'horizontal' | 'vertical';\n  width?: string | number | (string | number)[];\n  height?: string | number | (string | number)[];\n  classNames?: {\n    wrapper?: string;\n    avatar?: string;\n    item?: string;\n  };\n}\n\nconst SIZES = {\n  small: 'w-48 h-4',\n  default: 'w-60 h-6',\n  large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n  active = true,\n  loading = true,\n  avatar,\n  size = 'default',\n  direction = 'vertical',\n  count = 1,\n  gap = 6,\n  className,\n  classNames = {},\n  style,\n  width,\n  height,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n  // is meant to swap in arbitrary real content once loading finishes,\n  // which can include elements with strict parent requirements (e.g. a\n  // `<tr>`), so adding a wrapper div could produce invalid markup.\n  // `className`/`style`/rest props only ever describe the skeleton's own\n  // placeholder markup, so there's nothing for them to apply to here.\n  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n      className={cn('flex items-center gap-3', className)}\n      {...props}\n    >\n      {avatar && (\n        <Core\n          className={cn(\n            'h-12 w-12',\n            'rounded-xl',\n            !active && 'animate-none',\n            classNames.avatar,\n          )}\n        />\n      )}\n      <div\n        className={cn(\n          'flex grow',\n          direction === 'vertical' && 'flex-col',\n          classNames.wrapper,\n        )}\n        style={{\n          gap,\n        }}\n      >\n        {Array.from({ length: count }).map((_, index) => {\n          const itemWidth = getValueAtIndex(width, index);\n          const itemHeight = getValueAtIndex(height, index);\n\n          return (\n            <Core\n              key={index}\n              className={cn(\n                'rounded-md',\n                !active && 'animate-none',\n                SIZES[size],\n                classNames.item,\n                //\n              )}\n              style={{\n                ...style,\n                width: itemWidth,\n                height: itemHeight,\n              }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;;;AAMA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;AAC7D,QAAO,MAAM,QAAQ,MAAM,GAAI,MAAM,UAAU,MAAM,KAAM;;AAoB7D,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;CACR;AAED,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,EAAE,EACf,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,WAAW;AAQ9B,KAAI,CAAC,QACH,QAAO,YAAY;AAGrB,QACE,qBAAC;EACC,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;aAEH,UACC,oBAAC,QACC,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,OACZ,GACD,EAEJ,oBAAC;GACC,WAAW,GACT,aACA,cAAc,cAAc,YAC5B,WAAW,QACZ;GACD,OAAO,EACL,KACD;aAEA,MAAM,KAAK,EAAE,QAAQ,OAAO,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,MAAM;IAC/C,MAAM,aAAa,gBAAgB,QAAQ,MAAM;AAEjD,WACE,oBAAC;KAEC,WAAW,GACT,cACA,CAAC,UAAU,gBACX,MAAM,OACN,WAAW,KAEZ;KACD,OAAO;MACL,GAAG;MACH,OAAO;MACP,QAAQ;MACT;OAZI,MAaL;KAEJ;IACE;GACF"}

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":";;;;UAOiB,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

@@ -1,28 +1,34 @@
+'use client';
+
 import { cn } from "../../utils.mjs";
+import { DEFAULT_LOCALE, useConfig } from "../../providers/Config/context.mjs";
 import { Loader2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/spin.tsx
 const Spin = ({ spinning, className, children, ...props }) => {
+	const { locale } = useConfig();
+	const loadingLabel = locale.loading ?? DEFAULT_LOCALE.loading;
 	if (!children) {
 		if (!spinning) return null;
 		return /* @__PURE__ */ jsx("div", {
 			role: "status",
-			"aria-label": "로딩 중",
+			"aria-label": loadingLabel,
 			className: cn("flex h-full items-center justify-center", className),
 			...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": "로딩 중",
+			"aria-label": loadingLabel,
 			className: "absolute inset-0 flex items-center justify-center",
 			children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" })
 		})]

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":["'use client';\n\nimport { Loader2 } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\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  const { locale } = useConfig();\n  const loadingLabel = locale.loading ?? DEFAULT_LOCALE.loading;\n\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={loadingLabel}\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={loadingLabel}\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":";;;;;;;;AAWA,MAAM,QAAQ,EAAE,UAAU,WAAW,UAAU,GAAG,YAAmB;CACnE,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,eAAe,OAAO,WAAW,eAAe;AAKtD,KAAI,CAAC,UAAU;AACb,MAAI,CAAC,SACH,QAAO;AAGT,SACE,oBAAC;GACC,MAAK;GACL,cAAY;GACZ,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,cAAY;GACZ,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.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(({ 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"}
+{"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