@jbpark/ui-kit 3.2.1 → 3.4.0

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, useState } from 'react';\n\nimport { radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport { RadioGroupContext } from './context';\nimport Radio from './radio';\n\nconst { RadioGroup: Core } = radio;\n\nexport type OptionValue = string | number | boolean;\n\ntype Option = {\n  label: string;\n  value: OptionValue;\n  disabled?: boolean;\n};\n\ntype Options = string[] | number[] | boolean[] | Option[];\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'ul'>,\n  'onChange' | 'defaultValue' | 'value'\n> {\n  options?: Options;\n  orientation?: 'vertical' | 'horizontal';\n  placement?: 'left' | 'right';\n  classNames?: Record<string, string>;\n  defaultValue?: OptionValue;\n  value?: OptionValue;\n  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  optionType = 'default',\n  buttonStyle = 'solid',\n  size,\n  disabled,\n  defaultValue,\n  value: _value,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<\n    OptionValue | undefined\n  >(defaultValue);\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const options: Option[] = _options.map(item =>\n    typeof item === 'object'\n      ? item\n      : {\n          label: `${item}`,\n          value: item,\n        },\n  );\n\n  const isButton = optionType === 'button';\n\n  const onChange = (checked: boolean, optionValue: OptionValue) => {\n    if (!checked) {\n      return;\n    }\n    if (!controlled) {\n      setUncontrolledValue(optionValue);\n    }\n    _onChange(optionValue);\n  };\n\n  // A single Radix radiogroup root owns every option so that arrow keys move\n  // focus across the whole group. Radix addresses items by string value, so\n  // each option gets a deterministic id derived from a stable base id.\n  const baseId = useId();\n  const getOptionId = (index: number) => `${baseId}-${index}`;\n  const checkedIndex = options.findIndex(item => item.value === value);\n  const checkedId = checkedIndex === -1 ? '' : getOptionId(checkedIndex);\n\n  const onValueChange = (optionId: string) => {\n    const item = options.find((_, index) => getOptionId(index) === optionId);\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              <Button\n                variant={checked ? buttonStyle : 'outlined'}\n                size={size}\n                className={cn(\n                  'rounded-none',\n                  index === 0 && 'rounded-l-lg',\n                  index === options.length - 1 && 'rounded-r-lg',\n                  checked && buttonStyle === 'outlined' && 'border-primary',\n                )}\n                disabled={disabled || item.disabled}\n                onClick={() => onChange(true, item.value)}\n              >\n                {item.label}\n              </Button>\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  // `optionType='button'` renders `Button`s instead of radios, so it keeps the\n  // plain list and stays out of the Radix radiogroup entirely.\n  if (isButton) {\n    return list;\n  }\n\n  return (\n    <RadioGroupContext.Provider value={true}>\n      <Core className=\"block\" value={checkedId} onValueChange={onValueChange}>\n        {list}\n      </Core>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,EAAE,YAAY,SAASA;AA6B7B,MAAM,cAAc,EAClB,cAAc,cACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,aAAa,WACb,cAAc,SACd,MACA,UACA,cACA,OAAO,QACP,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAEhD,aAAa;CAEf,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,UAAoB,SAAS,KAAI,SACrC,OAAO,SAAS,WACZ,OACA;EACE,OAAO,GAAG;EACV,OAAO;EACR,CACN;CAED,MAAM,WAAW,eAAe;CAEhC,MAAM,YAAY,SAAkB,gBAA6B;AAC/D,MAAI,CAAC,QACH;AAEF,MAAI,CAAC,WACH,sBAAqB,YAAY;AAEnC,YAAU,YAAY;;CAMxB,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,UAAkB,GAAG,OAAO,GAAG;CACpD,MAAM,eAAe,QAAQ,WAAU,SAAQ,KAAK,UAAU,MAAM;CACpE,MAAM,YAAY,iBAAiB,KAAK,KAAK,YAAY,aAAa;CAEtE,MAAM,iBAAiB,aAAqB;EAC1C,MAAM,OAAO,QAAQ,MAAM,GAAG,UAAU,YAAY,MAAM,KAAK,SAAS;AAExE,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,WACC,oBAAC;KACC,SAAS,UAAU,cAAc;KAC3B;KACN,WAAW,GACT,gBACA,UAAU,KAAK,gBACf,UAAU,QAAQ,SAAS,KAAK,gBAChC,WAAW,gBAAgB,cAAc,iBAC1C;KACD,UAAU,YAAY,KAAK;KAC3B,eAAe,SAAS,MAAM,KAAK,MAAM;eAExC,KAAK;MACC,GAET,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;MA7BL,OAAO,KAAK,MAAM,CA+BpB;IAEP;GACC;AAKP,KAAI,SACF,QAAO;AAGT,QACE,oBAAC,kBAAkB;EAAS,OAAO;YACjC,oBAAC;GAAK,WAAU;GAAQ,OAAO;GAA0B;aACtD;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} 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"}

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

@@ -1,6 +1,7 @@
 import { RadioGroup } from "../../../core/radio-group.mjs";
 import "../../../core.mjs";
-import { OptionValue } from "./group.mjs";
+import { OptionValue } from "../option-group.mjs";
+import "./group.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/radio/radio.d.ts
@@ -10,6 +11,8 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Core>, 'onCha
   defaultChecked?: boolean;
   checked?: boolean;
   value?: OptionValue;
+  /** Native form field name — participates in `FormData` when set. */
+  name?: string;
   disabled?: boolean;
   /**
    * Id shared by the underlying control and its label. Generated internally
@@ -17,10 +20,10 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Core>, 'onCha
    * single Radix root can address each option.
    */
   id?: string;
-  icons?: {
+  icons?: Partial<{
     checked: React.ReactNode;
     unchecked: React.ReactNode;
-  };
+  }>;
   onChange?: (checked: boolean) => void;
 }
 declare const Radio: ({
@@ -33,6 +36,7 @@ declare const Radio: ({
   defaultChecked,
   checked: _checked,
   id: _id,
+  name,
   onChange: _onChange,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"mappings":";;;;;;cAYoB,IAAA,SAAI,UAAA;AAAA,UAGP,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA,QAAgC,IAAA;EAGtC,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EAXsB;;AAGxB;;;EAcE,EAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,KAAA;EAAS,SAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,EAAA,EAAA,GAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAYZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"radio.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"mappings":";;;;;;;cAaoB,IAAA,SAAI,UAAA;AAAA,UAGP,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA,QAAgC,IAAA;EAGtC,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EAV8C;EAYtD,IAAA;EACA,QAAA;EAbsD;AAGxD;;;;EAgBE,EAAA;EACA,KAAA,GAAQ,OAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EAC7D,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,KAAA;EAAS,SAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA;EAAA,SAAA;EAAA,KAAA;EAAA,QAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,EAAA,EAAA,GAAA;EAAA,IAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAaZ,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -5,31 +5,34 @@ import { field_exports } from "../../../core/field.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
 import { Circle, CircleCheck } from "lucide-react";
-import { useContext, useId, useState } from "react";
+import { useContext, useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/radio/radio.tsx
 const { RadioGroup: Core, RadioGroupItem: Item } = radio_group_exports;
 const { Field, FieldLabel } = field_exports;
-const Radio = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, id: _id, onChange: _onChange = () => {}, ...props }) => {
-	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
+const Radio = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, id: _id, name, onChange: _onChange = () => {}, ...props }) => {
+	const [checked, setChecked] = useControllableState({
+		value: _checked,
+		defaultValue: defaultChecked ?? false,
+		onChange: _onChange
+	});
 	const generatedId = useId();
 	const id = _id ?? generatedId;
+	const itemValue = String(_value);
 	const grouped = useContext(RadioGroupContext);
-	const controlled = _checked !== void 0;
-	const checked = controlled ? _checked : uncontrolledChecked;
 	const cursorClassName = disabled ? "cursor-not-allowed" : "cursor-pointer";
 	const onChange = (next) => {
 		if (disabled) return;
-		if (!controlled) setUncontrolledChecked(next);
-		_onChange(next);
+		setChecked(next);
 	};
 	const renderField = /* @__PURE__ */ jsxs(Field, {
 		orientation: "horizontal",
 		className: cn("flex gap-2", placement === "right" && "flex-row-reverse"),
 		"data-disabled": disabled,
 		children: [/* @__PURE__ */ jsx(Item, {
-			value: id,
+			value: itemValue,
 			id,
 			checked,
 			disabled
@@ -44,7 +47,10 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 			id,
 			hidden: true,
 			type: "radio",
+			name,
+			value: itemValue,
 			checked,
+			disabled,
 			onChange: (e) => {
 				onChange(e.target.checked);
 			}
@@ -56,12 +62,12 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 			tabIndex: disabled ? -1 : 0,
 			className: cn(cursorClassName, disabled && "opacity-50"),
 			onClick: () => {
-				document.getElementById(id)?.click();
+				onChange(true);
 			},
 			onKeyDown: (e) => {
 				if (e.key === "Enter" || e.key === " ") {
 					e.preventDefault();
-					document.getElementById(id)?.click();
+					onChange(true);
 				}
 			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(CircleCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Circle, {})
@@ -72,7 +78,8 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 			children
 		})
 	] }) : grouped ? renderField : /* @__PURE__ */ jsx(Core, {
-		value: checked ? id : "",
+		name,
+		value: checked ? itemValue : "",
 		onValueChange: () => onChange(true),
 		children: renderField
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useId, useState } from 'react';\n\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { field, radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { RadioGroupContext } from './context';\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<typeof Core>,\n  'onChange' | 'value'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  disabled?: boolean;\n  /**\n   * Id shared by the underlying control and its label. Generated internally\n   * when omitted. `RadioGroup` passes a deterministic id so that the group's\n   * single Radix root can address each option.\n   */\n  id?: string;\n  icons?: { checked: React.ReactNode; unchecked: React.ReactNode };\n  onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  id: _id,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const generatedId = useId();\n  const id = _id ?? generatedId;\n  const grouped = useContext(RadioGroupContext);\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  // When rendered inside a `RadioGroup`, the group owns the single shared\n  // `Core` (Radix radiogroup root) so that arrow keys move focus across every\n  // option. A standalone `Radio` still has to provide its own root.\n  const renderField = (\n    <Field\n      orientation=\"horizontal\"\n      className={cn('flex gap-2', placement === 'right' && 'flex-row-reverse')}\n      data-disabled={disabled}\n    >\n      <Item value={id} id={id} checked={checked} disabled={disabled} />\n      <FieldLabel htmlFor={id} className={cursorClassName}>\n        {children}\n      </FieldLabel>\n    </Field>\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"radio\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            document.getElementById(id)?.click();\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <CircleCheck />)\n          : (icons.unchecked ?? <Circle />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : grouped ? (\n    renderField\n  ) : (\n    <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n      {renderField}\n    </Core>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAqB9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,IAAI,KACJ,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,OAAO;CAClB,MAAM,UAAU,WAAW,kBAAkB;CAC7C,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAMjB,MAAM,cACJ,qBAAC;EACC,aAAY;EACZ,WAAW,GAAG,cAAc,cAAc,WAAW,mBAAmB;EACxE,iBAAe;aAEf,oBAAC;GAAK,OAAO;GAAQ;GAAa;GAAmB;IAAY,EACjE,oBAAC;GAAW,SAAS;GAAI,WAAW;GACjC;IACU;GACP;CAGV,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;GAEtC,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,eAAe,GAAG,EAAE,OAAO;;;aAIvC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GACD,UACF,cAEA,oBAAC;EAAK,OAAO,UAAU,KAAK;EAAI,qBAAqB,SAAS,KAAK;YAChE;GACI;AAGT,QACE,oBAAC;EACC,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG"}
+{"version":3,"file":"radio.mjs","names":["radio","field"],"sources":["../../../../src/components/atoms/radio/radio.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useId } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { Circle, CircleCheck } from 'lucide-react';\n\nimport { field, radio } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { RadioGroupContext } from './context';\nimport { type OptionValue } from './group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<typeof Core>,\n  'onChange' | 'value'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  /**\n   * Id shared by the underlying control and its label. Generated internally\n   * when omitted. `RadioGroup` passes a deterministic id so that the group's\n   * single Radix root can address each option.\n   */\n  id?: string;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Radio = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  id: _id,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const generatedId = useId();\n  const id = _id ?? generatedId;\n  // Radix identifies/submits an item by its `value`, which is separate from\n  // `id` (used only for the DOM id/label pairing) — stringified since Radix\n  // requires a string, while `OptionValue` also allows number/boolean.\n  const itemValue = String(_value);\n  const grouped = useContext(RadioGroupContext);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  // When rendered inside a `RadioGroup`, the group owns the single shared\n  // `Core` (Radix radiogroup root) so that arrow keys move focus across every\n  // option. A standalone `Radio` still has to provide its own root.\n  const renderField = (\n    <Field\n      orientation=\"horizontal\"\n      className={cn('flex gap-2', placement === 'right' && 'flex-row-reverse')}\n      data-disabled={disabled}\n    >\n      <Item value={itemValue} id={id} checked={checked} disabled={disabled} />\n      <FieldLabel htmlFor={id} className={cursorClassName}>\n        {children}\n      </FieldLabel>\n    </Field>\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"radio\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(true);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onChange(true);\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <CircleCheck />)\n          : (icons.unchecked ?? <Circle />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : grouped ? (\n    renderField\n  ) : (\n    <Core\n      name={name}\n      value={checked ? itemValue : ''}\n      onValueChange={() => onChange(true)}\n    >\n      {renderField}\n    </Core>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAuB9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,IAAI,KACJ,MACA,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;EACX,CAAC;CAEF,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,OAAO;CAIlB,MAAM,YAAY,OAAO,OAAO;CAChC,MAAM,UAAU,WAAW,kBAAkB;CAE7C,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,aAAW,KAAK;;CAMlB,MAAM,cACJ,qBAAC;EACC,aAAY;EACZ,WAAW,GAAG,cAAc,cAAc,WAAW,mBAAmB;EACxE,iBAAe;aAEf,oBAAC;GAAK,OAAO;GAAe;GAAa;GAAmB;IAAY,EACxE,oBAAC;GAAW,SAAS;GAAI,WAAW;GACjC;IACU;GACP;CAGV,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,KAAK;;GAEhB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,KAAK;;;aAIjB,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GACD,UACF,cAEA,oBAAC;EACO;EACN,OAAO,UAAU,YAAY;EAC7B,qBAAqB,SAAS,KAAK;YAElC;GACI;AAGT,QACE,oBAAC;EACC,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG"}

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

@@ -13,7 +13,7 @@ interface OptionGroup {
   label: React.ReactNode;
   options: Option[];
 }
-interface Props extends React.ComponentProps<typeof Core> {
+interface Props extends Omit<React.ComponentProps<typeof Core>, 'onValueChange'> {
   placeholder?: string;
   className?: string;
   options?: (Option | OptionGroup)[];

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/atoms/select.tsx"],"mappings":";;;;;;cAMU,IAAA,SAAI,QAAA;AAAA,UASJ,MAAA;EACR,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,KAAA;AAAA;AAAA,UAGQ,WAAA;EACR,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,OAAA,EAAS,MAAA;AAAA;AAAA,UAOD,KAAA,SAAc,KAAA,CAAM,cAAA,QAAsB,IAAA;EAClD,WAAA;EACA,SAAA;EACA,OAAA,IAAW,MAAA,GAAS,WAAA;EACpB,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,MAAA;EAAU,SAAA;EAAA,WAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAMb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"select.d.mts","names":[],"sources":["../../../src/components/atoms/select.tsx"],"mappings":";;;;;;cAMU,IAAA,SAAI,QAAA;AAAA,UASJ,MAAA;EACR,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,KAAA;AAAA;AAAA,UAGQ,WAAA;EACR,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,OAAA,EAAS,MAAA;AAAA;AAAA,UAOM,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,cAAA,QAAsB,IAAA;EAG5B,WAAA;EACA,SAAA;EACA,OAAA,IAAW,MAAA,GAAS,WAAA;EACpB,QAAA,IAAY,KAAA;AAAA;AAAA,cAGR,MAAA;EAAU,SAAA;EAAA,WAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAMb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { select } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst {\n  Select: Core,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} = select;\n\ninterface Option {\n  label: React.ReactNode;\n  value: string;\n}\n\ninterface OptionGroup {\n  label: React.ReactNode;\n  options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\ninterface Props extends React.ComponentProps<typeof Core> {\n  placeholder?: string;\n  className?: string;\n  options?: (Option | OptionGroup)[];\n  onChange?: (value: string) => void;\n}\n\nconst Select = ({\n  className,\n  placeholder,\n  options,\n  onChange,\n  ...props\n}: Props) => {\n  return (\n    <Core onValueChange={onChange} {...props}>\n      <SelectTrigger className={cn('w-full max-w-48', className)}>\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options?.map((option, index) =>\n          isGroup(option) ? (\n            <SelectGroup key={index}>\n              <SelectLabel>{option.label}</SelectLabel>\n              {option.options.map(item => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ) : (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ),\n        )}\n      </SelectContent>\n    </Core>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;AAKA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAYJ,MAAM,WAAW,WAAwD;AACvE,QAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,QAAQ;;AAU7D,MAAM,UAAU,EACd,WACA,aACA,SACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC;EAAK,eAAe;EAAU,GAAI;aACjC,oBAAC;GAAc,WAAW,GAAG,mBAAmB,UAAU;aACxD,oBAAC,eAAyB,cAAe;IAC3B,EAChB,oBAAC,2BACE,SAAS,KAAK,QAAQ,UACrB,QAAQ,OAAO,GACb,qBAAC,0BACC,oBAAC,yBAAa,OAAO,QAAoB,EACxC,OAAO,QAAQ,KAAI,SAClB,oBAAC;GAA4B,OAAO,KAAK;aACtC,KAAK;KADS,KAAK,MAET,CACb,KANc,MAOJ,GAEd,oBAAC;GAA8B,OAAO,OAAO;aAC1C,OAAO;KADO,OAAO,MAEX,CAEhB,GACa;GACX"}
+{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { select } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst {\n  Select: Core,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} = select;\n\ninterface Option {\n  label: React.ReactNode;\n  value: string;\n}\n\ninterface OptionGroup {\n  label: React.ReactNode;\n  options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'onValueChange'\n> {\n  placeholder?: string;\n  className?: string;\n  options?: (Option | OptionGroup)[];\n  onChange?: (value: string) => void;\n}\n\nconst Select = ({\n  className,\n  placeholder,\n  options,\n  onChange,\n  ...props\n}: Props) => {\n  return (\n    <Core onValueChange={onChange} {...props}>\n      <SelectTrigger className={cn('w-full max-w-48', className)}>\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options?.map((option, index) =>\n          isGroup(option) ? (\n            <SelectGroup key={index}>\n              <SelectLabel>{option.label}</SelectLabel>\n              {option.options.map(item => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ) : (\n            <SelectItem key={option.value} value={option.value}>\n              {option.label}\n            </SelectItem>\n          ),\n        )}\n      </SelectContent>\n    </Core>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;AAKA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAYJ,MAAM,WAAW,WAAwD;AACvE,QAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,QAAQ;;AAa7D,MAAM,UAAU,EACd,WACA,aACA,SACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC;EAAK,eAAe;EAAU,GAAI;aACjC,oBAAC;GAAc,WAAW,GAAG,mBAAmB,UAAU;aACxD,oBAAC,eAAyB,cAAe;IAC3B,EAChB,oBAAC,2BACE,SAAS,KAAK,QAAQ,UACrB,QAAQ,OAAO,GACb,qBAAC,0BACC,oBAAC,yBAAa,OAAO,QAAoB,EACxC,OAAO,QAAQ,KAAI,SAClB,oBAAC;GAA4B,OAAO,KAAK;aACtC,KAAK;KADS,KAAK,MAET,CACb,KANc,MAOJ,GAEd,oBAAC;GAA8B,OAAO,OAAO;aAC1C,OAAO;KADO,OAAO,MAEX,CAEhB,GACa;GACX"}

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

@@ -5,8 +5,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/skeleton/button.tsx
 const Button = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(Skeleton, {
-		className: cn("h-9 w-15", "rounded-2xl", className),
-		...props
+		...props,
+		className: cn("h-9 w-15", "rounded-2xl", className)
 	});
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"button.mjs","names":[],"sources":["../../../../src/components/atoms/skeleton/button.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Skeleton, { type Props as SkeletonProps } from './skeleton';\n\nconst Button = ({ className, ...props }: SkeletonProps) => {\n  return (\n    <Skeleton\n      className={cn(\n        'h-9 w-15',\n        'rounded-2xl',\n        className,\n        //\n      )}\n      {...props}\n    />\n  );\n};\nexport default Button;\n"],"mappings":";;;;;AAIA,MAAM,UAAU,EAAE,WAAW,GAAG,YAA2B;AACzD,QACE,oBAAC;EACC,WAAW,GACT,YACA,eACA,UAED;EACD,GAAI;GACJ"}
+{"version":3,"file":"button.mjs","names":[],"sources":["../../../../src/components/atoms/skeleton/button.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport Skeleton, { type Props as SkeletonProps } from './skeleton';\n\nconst Button = ({ className, ...props }: SkeletonProps) => {\n  return (\n    <Skeleton\n      {...props}\n      className={cn(\n        'h-9 w-15',\n        'rounded-2xl',\n        className,\n        //\n      )}\n    />\n  );\n};\nexport default Button;\n"],"mappings":";;;;;AAIA,MAAM,UAAU,EAAE,WAAW,GAAG,YAA2B;AACzD,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GACT,YACA,eACA,UAED;GACD"}

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

@@ -17,7 +17,7 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"aria-label": "로딩 중",
-		className: cn("flex items-center gap-3"),
+		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", {
 			className: cn("flex grow", direction === "vertical" && "flex-col", classNames.wrapper),
@@ -26,7 +26,7 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
 				const itemWidth = getValueAtIndex(width, index);
 				const itemHeight = getValueAtIndex(height, index);
 				return /* @__PURE__ */ jsx(Core, {
-					className: cn("rounded-md", !active && "animate-none", SIZES[size], className, classNames.item),
+					className: cn("rounded-md", !active && "animate-none", SIZES[size], classNames.item),
 					style: {
 						...style,
 						width: itemWidth,

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  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"로딩 중\"\n      className={cn(\n        'flex items-center gap-3',\n        //\n      )}\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                className,\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;AACX,KAAI,CAAC,QACH,QAAO,YAAY;AAGrB,QACE,qBAAC;EACC,MAAK;EACL,cAAW;EACX,WAAW,GACT,0BAED;EACD,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,WACA,WAAW,KAEZ;KACD,OAAO;MACL,GAAG;MACH,OAAO;MACP,QAAQ;MACT;OAbI,MAcL;KAEJ;IACE;GACF"}
+{"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"}

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

@@ -1,4 +1,3 @@
-import * as react from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/spin.d.ts
@@ -10,7 +9,7 @@ declare const Spin: ({
   className,
   children,
   ...props
-}: Props) => string | number | bigint | boolean | 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;
+}: Props) => 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,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":"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"}

package/dist/components/atoms/spin.mjs

@@ -4,21 +4,23 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/spin.tsx
 const Spin = ({ spinning, className, children, ...props }) => {
-	if (!spinning) return children ?? null;
-	if (!children) return /* @__PURE__ */ jsx("div", {
-		role: "status",
-		"aria-label": "로딩 중",
-		className: cn("flex h-full items-center justify-center"),
-		...props,
-		children: /* @__PURE__ */ jsx(Loader2, { className: cn("animate-spin", className) })
-	});
+	if (!children) {
+		if (!spinning) return null;
+		return /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-label": "로딩 중",
+			className: cn("flex h-full items-center justify-center", className),
+			...props,
+			children: /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" })
+		});
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none opacity-50",
+			className: cn(spinning && "pointer-events-none opacity-50"),
 			children
-		}), /* @__PURE__ */ jsx("div", {
+		}), spinning && /* @__PURE__ */ jsx("div", {
 			role: "status",
 			"aria-label": "로딩 중",
 			className: "absolute inset-0 flex items-center justify-center",

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

@@ -1 +1 @@
-{"version":3,"file":"spin.mjs","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"sourcesContent":["import { Loader2 } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  spinning?: boolean;\n}\n\nconst Spin = ({ spinning, className, children, ...props }: Props) => {\n  if (!spinning) {\n    return children ?? null;\n  }\n\n  if (!children) {\n    return (\n      <div\n        role=\"status\"\n        aria-label=\"로딩 중\"\n        className={cn(\n          'flex h-full items-center justify-center',\n          //\n        )}\n        {...props}\n      >\n        <Loader2\n          className={cn(\n            'animate-spin',\n            className,\n            //\n          )}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative',\n        className,\n        //\n      )}\n      {...props}\n    >\n      <div className=\"pointer-events-none opacity-50\">{children}</div>\n      <div\n        role=\"status\"\n        aria-label=\"로딩 중\"\n        className=\"absolute inset-0 flex items-center justify-center\"\n      >\n        <Loader2 className=\"animate-spin\" />\n      </div>\n    </div>\n  );\n};\n\nexport default Spin;\n"],"mappings":";;;;;AAQA,MAAM,QAAQ,EAAE,UAAU,WAAW,UAAU,GAAG,YAAmB;AACnE,KAAI,CAAC,SACH,QAAO,YAAY;AAGrB,KAAI,CAAC,SACH,QACE,oBAAC;EACC,MAAK;EACL,cAAW;EACX,WAAW,GACT,0CAED;EACD,GAAI;YAEJ,oBAAC,WACC,WAAW,GACT,gBACA,UAED,GACD;GACE;AAIV,QACE,qBAAC;EACC,WAAW,GACT,YACA,UAED;EACD,GAAI;aAEJ,oBAAC;GAAI,WAAU;GAAkC;IAAe,EAChE,oBAAC;GACC,MAAK;GACL,cAAW;GACX,WAAU;aAEV,oBAAC,WAAQ,WAAU,iBAAiB;IAChC;GACF"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/atoms/switch.tsx"],"mappings":";;;UAgCU,KAAA,SAAc,IAAA,CACtB,KAAA,CAAM,wBAAA;EAGN,UAAA;IACE,KAAA;IACA,MAAA;EAAA;EAEF,IAAA;EACA,cAAA;EACA,OAAA;EACA,QAAA;EACA,QAAA,IAAY,OAAA;EACZ,eAAA,GAAkB,KAAA,CAAM,SAAA;EACxB,iBAAA,GAAoB,KAAA,CAAM,SAAA;AAAA;AAAA,cAGtB,MAAA;EAAU,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,QAAA,EAAA,SAAA;EAAA,eAAA;EAAA,iBAAA;EAAA,GAAA;AAAA,GAUb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../../src/components/atoms/switch.tsx"],"mappings":";;;UAgCiB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,UAAA;IACE,KAAA;IACA,MAAA;EAAA;EAEF,IAAA;EACA,cAAA;EACA,OAAA;EACA,QAAA;EACA,QAAA,IAAY,OAAA;EACZ,eAAA,GAAkB,KAAA,CAAM,SAAA;EACxB,iBAAA,GAAoB,KAAA,CAAM,SAAA;AAAA;AAAA,cAGtB,MAAA;EAAU,SAAA;EAAA,UAAA;EAAA,IAAA;EAAA,cAAA;EAAA,OAAA,EAAA,QAAA;EAAA,QAAA,EAAA,SAAA;EAAA,eAAA;EAAA,iBAAA;EAAA,GAAA;AAAA,GAUb,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/switch.mjs

@@ -2,8 +2,8 @@
 
 import { cn } from "../../utils.mjs";
 import { switch_exports } from "../../core/switch.mjs";
-import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/switch.tsx
 const { Switch: Core } = switch_exports;
@@ -28,13 +28,11 @@ const sizeConfig = {
 	}
 };
 const Switch = ({ className, classNames, size = "medium", defaultChecked, checked: _checked, onChange: _onChange = () => {}, checkedChildren, unCheckedChildren, ...props }) => {
-	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
-	const controlled = _checked !== void 0;
-	const checked = controlled ? _checked : uncontrolledChecked;
-	const onChange = (next) => {
-		if (!controlled) setUncontrolledChecked(next);
-		_onChange(next);
-	};
+	const [checked, onChange] = useControllableState({
+		value: _checked,
+		defaultValue: defaultChecked ?? false,
+		onChange: _onChange
+	});
 	const hasChildren = !!(checkedChildren || unCheckedChildren);
 	const config = sizeConfig[size];
 	return /* @__PURE__ */ jsx(Core, {

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

@@ -1 +1 @@
-{"version":3,"file":"switch.mjs","names":["switchComponent"],"sources":["../../../src/components/atoms/switch.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { switchComponent } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Switch: Core } = switchComponent;\n\nconst sizeConfig = {\n  medium: {\n    core: 'default' as const,\n    track: 'h-8! w-12!',\n    handle: 'size-6!',\n    handleChecked:\n      'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]',\n    fontSize: 'text-xs',\n    marginChecked: 'mr-7 ml-2',\n    marginUnchecked: 'mr-2 ml-7',\n  },\n  small: {\n    core: 'sm' as const,\n    track: 'h-6! w-10!',\n    handle: 'size-5!',\n    handleChecked:\n      'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-22px)]',\n    fontSize: 'text-[10px]',\n    marginChecked: 'mr-6 ml-1.5',\n    marginUnchecked: 'mr-1.5 ml-6',\n  },\n};\n\ninterface Props extends Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'onChange'\n> {\n  classNames?: {\n    track?: string;\n    handle?: string;\n  };\n  size?: 'small' | 'medium';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean) => void;\n  checkedChildren?: React.ReactNode;\n  unCheckedChildren?: React.ReactNode;\n}\n\nconst Switch = ({\n  className,\n  classNames,\n  size = 'medium',\n  defaultChecked,\n  checked: _checked,\n  onChange: _onChange = () => {},\n  checkedChildren,\n  unCheckedChildren,\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const onChange = (next: boolean) => {\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const hasChildren = !!(checkedChildren || unCheckedChildren);\n  const config = sizeConfig[size];\n\n  return (\n    <Core\n      checked={checked}\n      size={config.core}\n      className={cn(\n        'relative',\n        config.track,\n        hasChildren && 'w-auto! overflow-hidden',\n        className,\n        classNames?.track,\n        //\n      )}\n      handleClassName={cn(\n        config.handle,\n        '!absolute top-1/2 !-translate-y-1/2 !translate-x-0',\n        'transition-[left] duration-200 will-change-[left]',\n        config.handleChecked,\n        classNames?.handle,\n        //\n      )}\n      onCheckedChange={checked => {\n        onChange(checked);\n      }}\n      {...props}\n    >\n      {hasChildren && (\n        <span\n          className={cn(\n            `grid leading-none text-white transition-[margin] duration-200\n            will-change-[margin]`,\n            config.fontSize,\n            checked ? config.marginChecked : config.marginUnchecked,\n            //\n          )}\n        >\n          <span\n            className={cn(\n              'col-start-1 row-start-1 transition-opacity duration-200',\n              checked ? 'opacity-100' : 'opacity-0',\n            )}\n          >\n            {checkedChildren}\n          </span>\n          <span\n            className={cn(\n              'col-start-1 row-start-1 transition-opacity duration-200',\n              checked ? 'opacity-0' : 'opacity-100',\n            )}\n          >\n            {unCheckedChildren}\n          </span>\n        </span>\n      )}\n    </Core>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,QAAQ,SAASA;AAEzB,MAAM,aAAa;CACjB,QAAQ;EACN,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;EAClB;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;EAClB;CACF;AAmBD,MAAM,UAAU,EACd,WACA,YACA,OAAO,UACP,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,iBACA,mBACA,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,YAAY,SAAkB;AAClC,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,cAAc,CAAC,EAAE,mBAAmB;CAC1C,MAAM,SAAS,WAAW;AAE1B,QACE,oBAAC;EACU;EACT,MAAM,OAAO;EACb,WAAW,GACT,YACA,OAAO,OACP,eAAe,2BACf,WACA,YAAY,MAEb;EACD,iBAAiB,GACf,OAAO,QACP,sDACA,qDACA,OAAO,eACP,YAAY,OAEb;EACD,kBAAiB,YAAW;AAC1B,YAAS,QAAQ;;EAEnB,GAAI;YAEH,eACC,qBAAC;GACC,WAAW,GACT;mCAEA,OAAO,UACP,UAAU,OAAO,gBAAgB,OAAO,gBAEzC;cAED,oBAAC;IACC,WAAW,GACT,2DACA,UAAU,gBAAgB,YAC3B;cAEA;KACI,EACP,oBAAC;IACC,WAAW,GACT,2DACA,UAAU,cAAc,cACzB;cAEA;KACI;IACF;GAEJ"}
+{"version":3,"file":"switch.mjs","names":["switchComponent"],"sources":["../../../src/components/atoms/switch.tsx"],"sourcesContent":["'use client';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { switchComponent } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Switch: Core } = switchComponent;\n\nconst sizeConfig = {\n  medium: {\n    core: 'default' as const,\n    track: 'h-8! w-12!',\n    handle: 'size-6!',\n    handleChecked:\n      'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]',\n    fontSize: 'text-xs',\n    marginChecked: 'mr-7 ml-2',\n    marginUnchecked: 'mr-2 ml-7',\n  },\n  small: {\n    core: 'sm' as const,\n    track: 'h-6! w-10!',\n    handle: 'size-5!',\n    handleChecked:\n      'data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-22px)]',\n    fontSize: 'text-[10px]',\n    marginChecked: 'mr-6 ml-1.5',\n    marginUnchecked: 'mr-1.5 ml-6',\n  },\n};\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'button'>,\n  'onChange'\n> {\n  classNames?: {\n    track?: string;\n    handle?: string;\n  };\n  size?: 'small' | 'medium';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  disabled?: boolean;\n  onChange?: (checked: boolean) => void;\n  checkedChildren?: React.ReactNode;\n  unCheckedChildren?: React.ReactNode;\n}\n\nconst Switch = ({\n  className,\n  classNames,\n  size = 'medium',\n  defaultChecked,\n  checked: _checked,\n  onChange: _onChange = () => {},\n  checkedChildren,\n  unCheckedChildren,\n  ...props\n}: Props) => {\n  const [checked, onChange] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const hasChildren = !!(checkedChildren || unCheckedChildren);\n  const config = sizeConfig[size];\n\n  return (\n    <Core\n      checked={checked}\n      size={config.core}\n      className={cn(\n        'relative',\n        config.track,\n        hasChildren && 'w-auto! overflow-hidden',\n        className,\n        classNames?.track,\n        //\n      )}\n      handleClassName={cn(\n        config.handle,\n        '!absolute top-1/2 !-translate-y-1/2 !translate-x-0',\n        'transition-[left] duration-200 will-change-[left]',\n        config.handleChecked,\n        classNames?.handle,\n        //\n      )}\n      onCheckedChange={checked => {\n        onChange(checked);\n      }}\n      {...props}\n    >\n      {hasChildren && (\n        <span\n          className={cn(\n            `grid leading-none text-white transition-[margin] duration-200\n            will-change-[margin]`,\n            config.fontSize,\n            checked ? config.marginChecked : config.marginUnchecked,\n            //\n          )}\n        >\n          <span\n            className={cn(\n              'col-start-1 row-start-1 transition-opacity duration-200',\n              checked ? 'opacity-100' : 'opacity-0',\n            )}\n          >\n            {checkedChildren}\n          </span>\n          <span\n            className={cn(\n              'col-start-1 row-start-1 transition-opacity duration-200',\n              checked ? 'opacity-0' : 'opacity-100',\n            )}\n          >\n            {unCheckedChildren}\n          </span>\n        </span>\n      )}\n    </Core>\n  );\n};\n\nexport default Switch;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,QAAQ,SAASA;AAEzB,MAAM,aAAa;CACjB,QAAQ;EACN,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;EAClB;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACP,QAAQ;EACR,eACE;EACF,UAAU;EACV,eAAe;EACf,iBAAiB;EAClB;CACF;AAmBD,MAAM,UAAU,EACd,WACA,YACA,OAAO,UACP,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,iBACA,mBACA,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,YAAY,qBAA8B;EACxD,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;EACX,CAAC;CAEF,MAAM,cAAc,CAAC,EAAE,mBAAmB;CAC1C,MAAM,SAAS,WAAW;AAE1B,QACE,oBAAC;EACU;EACT,MAAM,OAAO;EACb,WAAW,GACT,YACA,OAAO,OACP,eAAe,2BACf,WACA,YAAY,MAEb;EACD,iBAAiB,GACf,OAAO,QACP,sDACA,qDACA,OAAO,eACP,YAAY,OAEb;EACD,kBAAiB,YAAW;AAC1B,YAAS,QAAQ;;EAEnB,GAAI;YAEH,eACC,qBAAC;GACC,WAAW,GACT;mCAEA,OAAO,UACP,UAAU,OAAO,gBAAgB,OAAO,gBAEzC;cAED,oBAAC;IACC,WAAW,GACT,2DACA,UAAU,gBAAgB,YAC3B;cAEA;KACI,EACP,oBAAC;IACC,WAAW,GACT,2DACA,UAAU,cAAc,cACzB;cAEA;KACI;IACF;GAEJ"}

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

@@ -1,4 +1,5 @@
 import { Drawer, Props } from "./drawer.mjs";
 import { List } from "./list/index.mjs";
 import { Modal } from "./modal.mjs";
-import { Swiper } from "./swiper/index.mjs";
+import { Swiper } from "./swiper/index.mjs";
+import { StaticProps, Toast } from "./toast.mjs";

package/dist/components/organisms/toast.d.mts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/organisms/toast.d.ts
+type ToastType = 'info' | 'success' | 'error' | 'warning';
+interface Props {
+  type?: ToastType;
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  closable?: boolean;
+  action?: React.ReactNode;
+  className?: string;
+  onClose?: () => void;
+}
+interface StaticProps extends Props {
+  id?: string;
+  duration?: number;
+  container?: HTMLElement;
+}
+declare const Toast: {
+  ({
+    type,
+    title,
+    description,
+    icon,
+    closable,
+    action,
+    className,
+    onClose
+  }: Props): react_jsx_runtime0.JSX.Element;
+  destroy(id?: string): void;
+  destroyAll(): void;
+  info(title: React.ReactNode, props?: TriggerOptions): string | undefined;
+  success(title: React.ReactNode, props?: TriggerOptions): string | undefined;
+  error(title: React.ReactNode, props?: TriggerOptions): string | undefined;
+  warning(title: React.ReactNode, props?: TriggerOptions): string | undefined;
+};
+type TriggerOptions = Omit<StaticProps, 'type' | 'title'>;
+//#endregion
+export { StaticProps, Toast };
+//# sourceMappingURL=toast.d.mts.map

package/dist/components/organisms/toast.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../../src/components/organisms/toast.tsx"],"mappings":";;;KAaK,SAAA;AAAA,UAEY,KAAA;EACf,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,IAAA,GAAO,KAAA,CAAM,SAAA;EACb,QAAA;EACA,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,SAAA;EACA,OAAA;AAAA;AAAA,UAGQ,WAAA,SAAoB,KAAA;EAC5B,EAAA;EACA,QAAA;EACA,SAAA,GAAY,WAAA;AAAA;AAAA,cA6DR,KAAA;EAAA;;;;;;;;;KASH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cAmKa,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;iBAEtB,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;eAE3B,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;iBAEvB,KAAA,CAAM,SAAA,EAAS,KAAA,GAAU,cAAA;AAAA;AAAA,KAR5C,cAAA,GAAiB,IAAA,CAAK,WAAA"}