@jbpark/ui-kit 2.11.3 → 2.12.0

package/dist/Button.mjs

@@ -47,7 +47,7 @@ const Button = ({ icon, className, type = "default", variant, size = "middle", c
 		disabled,
 		variant: "default",
 		"data-color": computedColor,
-		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[resolvedVariant], sizesClasses[size || "medium"], iconOnly && ["p-0", iconClasses[size || "medium"]], shapesClasses[shape || "default"], block && "w-full", colored && (resolvedVariant === "solid" ? [
+		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[resolvedVariant], sizesClasses[size], iconOnly && ["p-0", iconClasses[size]], shapesClasses[shape || "default"], block && "w-full", colored && (resolvedVariant === "solid" ? [
 			"bg-(--btn-bg)",
 			"hover:bg-(--btn-bg-hover)",
 			"active:bg-(--btn-bg-active)",

package/dist/Button.mjs.map

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

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

@@ -10,7 +10,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/checkbox/checkbox.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
 const { Label: CoreLabel } = label_exports;
-const Checkbox = ({ placement = "left", value: _value, children, className, icons, disabled, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
+const Checkbox = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
 	const id = useId();
 	const controlled = _checked !== void 0;
@@ -32,10 +32,20 @@ const Checkbox = ({ placement = "left", value: _value, children, className, icon
 			}
 		}),
 		/* @__PURE__ */ jsx("span", {
+			role: "checkbox",
+			"aria-checked": checked,
+			"aria-disabled": disabled,
+			tabIndex: disabled ? -1 : 0,
 			className: cn(cursorClassName, disabled && "opacity-50"),
 			onClick: () => {
 				document.getElementById(id)?.click();
 			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					document.getElementById(id)?.click();
+				}
+			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(SquareCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Square, {})
 		}),
 		children && /* @__PURE__ */ jsx("label", {

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

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

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

@@ -5,9 +5,10 @@ type OptionValue = string | number | boolean;
 type Option = {
   label: string;
   value: OptionValue;
+  disabled?: boolean;
 };
 type Options = string[] | number[] | boolean[] | Option[];
-interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value'> {
+interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' | 'defaultValue' | 'value'> {
   options?: Options;
   orientation?: 'vertical' | 'horizontal';
   placement?: 'left' | 'right';
@@ -24,7 +25,8 @@ declare const Group: ({
   options: _options,
   defaultValue,
   value: _value,
-  onChange: _onChange
+  onChange: _onChange,
+  ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Group, OptionValue };

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

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

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

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/checkbox/group.tsx
-const Group = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], defaultValue, value: _value, onChange: _onChange = () => {} }) => {
+const Group = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || []);
 	const controlled = _value !== void 0;
 	const value = controlled ? _value : uncontrolledValue;
@@ -20,6 +20,7 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 		_onChange(nextValue);
 	};
 	return /* @__PURE__ */ jsx("ul", {
+		...props,
 		className: cn(orientation === "vertical" ? "space-y-2" : "flex gap-2", className),
 		children: options.map((item) => {
 			const checked = value.includes(item.value);
@@ -30,6 +31,7 @@ const Group = ({ orientation = "vertical", placement = "left", className, classN
 					className: cn(classNames?.item),
 					value: item.value,
 					checked,
+					disabled: item.disabled,
 					onChange: (checked) => onChange(checked, item.value),
 					children: item.label
 				})

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

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

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

@@ -22,7 +22,15 @@ const ColorPicker = ({ defaultValue, value: _value, showText, onChange: _onChang
 			onChange
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
+			role: "button",
+			tabIndex: 0,
 			className: cn("inline-flex items-center", "rounded border p-0.5"),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					e.currentTarget.click();
+				}
+			},
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cn("size-6 cursor-pointer rounded border", "shadow-sm"),
 				style: { backgroundColor: value }

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../src/components/atoms/color-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Popover from './popover';\n\ninterface Props {\n  defaultValue?: string;\n  value?: string;\n  showText?: boolean;\n  onChange?: (color: string) => void;\n}\n\nconst ColorPicker = ({\n  defaultValue,\n  value: _value,\n  showText,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n    defaultValue || '#fff',\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const onChange = (color: string) => {\n    if (!controlled) {\n      setUncontrolledValue(color);\n    }\n    _onChange(color);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<HexColorPicker color={value} onChange={onChange} />}\n    >\n      <div\n        className={cn(\n          'inline-flex items-center',\n          'rounded border p-0.5',\n          //\n        )}\n      >\n        <div\n          className={cn(\n            'size-6 cursor-pointer rounded border',\n            'shadow-sm',\n            //\n          )}\n          style={{ backgroundColor: value }}\n        />\n        {showText && (\n          <span className=\"px-1 font-mono text-sm font-medium\">\n            {value.toUpperCase()}\n          </span>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,eAAe,EACnB,cACA,OAAO,QACP,UACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,gBAAgB,OACjB;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,UAAkB;AAClC,MAAI,CAAC,WACH,sBAAqB,MAAM;AAE7B,YAAU,MAAM;;AAGlB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAe,OAAO;GAAiB;IAAY;YAE7D,qBAAC;GACC,WAAW,GACT,4BACA,uBAED;cAED,oBAAC;IACC,WAAW,GACT,wCACA,YAED;IACD,OAAO,EAAE,iBAAiB,OAAO;KACjC,EACD,YACC,oBAAC;IAAK,WAAU;cACb,MAAM,aAAa;KACf;IAEL;GACE"}
+{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../src/components/atoms/color-picker.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { HexColorPicker } from 'react-colorful';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Popover from './popover';\n\ninterface Props {\n  defaultValue?: string;\n  value?: string;\n  showText?: boolean;\n  onChange?: (color: string) => void;\n}\n\nconst ColorPicker = ({\n  defaultValue,\n  value: _value,\n  showText,\n  onChange: _onChange = () => {},\n}: Props) => {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n    defaultValue || '#fff',\n  );\n\n  const controlled = _value !== undefined;\n  const value = controlled ? _value : uncontrolledValue;\n\n  const onChange = (color: string) => {\n    if (!controlled) {\n      setUncontrolledValue(color);\n    }\n    _onChange(color);\n  };\n\n  return (\n    <Popover\n      placement=\"bottomLeft\"\n      content={<HexColorPicker color={value} onChange={onChange} />}\n    >\n      <div\n        role=\"button\"\n        tabIndex={0}\n        className={cn(\n          'inline-flex items-center',\n          'rounded border p-0.5',\n          //\n        )}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            e.currentTarget.click();\n          }\n        }}\n      >\n        <div\n          className={cn(\n            'size-6 cursor-pointer rounded border',\n            'shadow-sm',\n            //\n          )}\n          style={{ backgroundColor: value }}\n        />\n        {showText && (\n          <span className=\"px-1 font-mono text-sm font-medium\">\n            {value.toUpperCase()}\n          </span>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport default ColorPicker;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,eAAe,EACnB,cACA,OAAO,QACP,UACA,UAAU,kBAAkB,SACjB;CACX,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,gBAAgB,OACjB;CAED,MAAM,aAAa,WAAW;CAC9B,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,YAAY,UAAkB;AAClC,MAAI,CAAC,WACH,sBAAqB,MAAM;AAE7B,YAAU,MAAM;;AAGlB,QACE,oBAAC;EACC,WAAU;EACV,SAAS,oBAAC;GAAe,OAAO;GAAiB;IAAY;YAE7D,qBAAC;GACC,MAAK;GACL,UAAU;GACV,WAAW,GACT,4BACA,uBAED;GACD,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,OAAE,cAAc,OAAO;;;cAI3B,oBAAC;IACC,WAAW,GACT,wCACA,YAED;IACD,OAAO,EAAE,iBAAiB,OAAO;KACjC,EACD,YACC,oBAAC;IAAK,WAAU;cACb,MAAM,aAAa;KACf;IAEL;GACE"}

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

@@ -10,16 +10,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/input/search.tsx
 const { Input: Core } = input_exports;
 const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onChange, onSearch: _onSearch, ...props }) => {
-	const internalRef = useRef(null);
-	const inputRef = ref || internalRef;
+	const inputRef = useRef(null);
+	const setRefs = (node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
 	const [uncontrolledHasValue, setUncontrolledHasValue] = useState(!!defaultValue);
 	const hasValue = value !== void 0 ? !!value : uncontrolledHasValue;
 	const onClear = () => {
-		if (inputRef.current) {
+		if (!inputRef.current) return;
+		if (value === void 0) {
 			inputRef.current.value = "";
-			if (value === void 0) setUncontrolledHasValue(false);
-			onChange?.({ target: { value: "" } });
+			setUncontrolledHasValue(false);
 		}
+		onChange?.({ target: { value: "" } });
 	};
 	const onSearch = () => {
 		if (inputRef.current) _onSearch?.(inputRef.current.value);
@@ -29,7 +34,7 @@ const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onCh
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("relative grow", "inline-flex items-center"),
 			children: [/* @__PURE__ */ jsx(Core, {
-				ref: inputRef,
+				ref: setRefs,
 				inputMode: "search",
 				type: "search",
 				enterKeyHint: "search",
@@ -44,9 +49,12 @@ const Search$1 = ({ ref, className, defaultValue, value, allowClear = true, onCh
 					if (e.key === "Enter") onSearch();
 				},
 				...props
-			}), /* @__PURE__ */ jsx(CircleX, {
-				className: cn("absolute right-2 size-4", "shrink-0 cursor-pointer", (!allowClear || !hasValue) && "hidden"),
-				onClick: onClear
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "지우기",
+				className: cn("absolute right-2", "shrink-0 cursor-pointer", (!allowClear || !hasValue) && "hidden"),
+				onClick: onClear,
+				children: /* @__PURE__ */ jsx(CircleX, { className: "size-4" })
 			})]
 		}), /* @__PURE__ */ jsx(Button, {
 			icon: /* @__PURE__ */ jsx(Search, {}),

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 { 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  allowClear = true,\n  onChange,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const internalRef = useRef<HTMLInputElement>(null);\n  const inputRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (inputRef.current) {\n      inputRef.current.value = '';\n\n      if (value === undefined) {\n        setUncontrolledHasValue(false);\n      }\n\n      const event = {\n        target: { value: '' },\n      } as React.ChangeEvent<HTMLInputElement>;\n      onChange?.(event);\n    }\n  };\n\n  const onSearch = () => {\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          ref={inputRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\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            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n          {...props}\n        />\n        <CircleX\n          className={cn(\n            'absolute right-2 size-4',\n            'shrink-0 cursor-pointer',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        />\n      </div>\n      <Button\n        icon={<SearchOutlined />}\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":";;;;;;;;;;AAWA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,aAAa,MACb,UACA,UAAU,WACV,GAAG,YACQ;CACX,MAAM,cAAc,OAAyB,KAAK;CAClD,MAAM,WAAY,OAA6C;CAE/D,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,aAAa;CAC1B,MAAM,WAAW,UAAU,SAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;AACpB,MAAI,SAAS,SAAS;AACpB,YAAS,QAAQ,QAAQ;AAEzB,OAAI,UAAU,OACZ,yBAAwB,MAAM;AAMhC,cAHc,EACZ,QAAQ,EAAE,OAAO,IAAI,EACtB,CACgB;;;CAIrB,MAAM,iBAAiB;AACrB,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,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACb,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,SAAI,EAAE,QAAQ,QACZ,WAAU;;IAGd,GAAI;KACJ,EACF,oBAAC;IACC,WAAW,GACT,2BACA,4BACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;KACT;IACE,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACxB,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 { 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  allowClear = true,\n  onChange,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const setRefs = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n\n    if (typeof ref === 'function') {\n      ref(node);\n    } else if (ref) {\n      ref.current = node;\n    }\n  };\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    const event = {\n      target: { value: '' },\n    } as React.ChangeEvent<HTMLInputElement>;\n    onChange?.(event);\n  };\n\n  const onSearch = () => {\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          ref={setRefs}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\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            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n          {...props}\n        />\n        <button\n          type=\"button\"\n          aria-label=\"지우기\"\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\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":";;;;;;;;;;AAWA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,aAAa,MACb,UACA,UAAU,WACV,GAAG,YACQ;CACX,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,WAAW,SAAkC;AACjD,WAAS,UAAU;AAEnB,MAAI,OAAO,QAAQ,WACjB,KAAI,KAAK;WACA,IACT,KAAI,UAAU;;CAIlB,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;;AAMhC,aAHc,EACZ,QAAQ,EAAE,OAAO,IAAI,EACtB,CACgB;;CAGnB,MAAM,iBAAiB;AACrB,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,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACb,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,SAAI,EAAE,QAAQ,QACZ,WAAU;;IAGd,GAAI;KACJ,EACF,oBAAC;IACC,MAAK;IACL,cAAW;IACX,WAAW,GACT,oBACA,4BACC,CAAC,cAAc,CAAC,aAAa,SAC/B;IACD,SAAS;cAET,oBAAC,WAAQ,WAAU,WAAW;KACvB;IACL,EACN,oBAAC;GACC,MAAM,oBAACC,WAAiB;GACxB,WAAW,GACT,kBACA,SAED;GACD,SAAS;IACT;GACE;;AAIV,SAAO,cAAc"}

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

@@ -12,7 +12,8 @@ declare const Popover: ({
   placement,
   className,
   content,
-  children
+  children,
+  ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Popover };

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.mts","names":[],"sources":["../../../src/components/atoms/popover.tsx"],"mappings":";;;KAOK,SAAA;AAAA,UAcK,KAAA,SAAc,IAAA,CACtB,KAAA,CAAM,wBAAA;EAGN,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,SAAA,GAAY,SAAA;EACZ,OAAA,EAAS,KAAA,CAAM,SAAA;AAAA;AAAA,cAkNX,OAAA;EAAW,KAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA;AAAA,GAMd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"popover.d.mts","names":[],"sources":["../../../src/components/atoms/popover.tsx"],"mappings":";;;KAOK,SAAA;AAAA,UAcK,KAAA,SAAc,IAAA,CACtB,KAAA,CAAM,wBAAA;EAGN,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,SAAA,GAAY,SAAA;EACZ,OAAA,EAAS,KAAA,CAAM,SAAA;AAAA;AAAA,cAkNX,OAAA;EAAW,KAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAOd,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/popover.mjs

@@ -203,11 +203,12 @@ const arrowStyles = {
 		rightFill
 	].join(" ")
 };
-const Popover = ({ title, placement = "top", className, content, children }) => {
+const Popover = ({ title, placement = "top", className, content, children, ...props }) => {
 	return /* @__PURE__ */ jsxs(CorePopover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
 		children
 	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		...props,
 		align: placementMap[placement].align,
 		side: placementMap[placement].side,
 		sideOffset: 16,

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

@@ -1 +1 @@
-{"version":3,"file":"popover.mjs","names":["popover"],"sources":["../../../src/components/atoms/popover.tsx"],"sourcesContent":["import { popover } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Typography from './typography';\n\nconst { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\ninterface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title' | 'content'\n> {\n  title?: React.ReactNode;\n  placement?: Placement;\n  content: React.ReactNode;\n}\n\nconst placementMap = {\n  top: {\n    side: 'top',\n    align: 'center',\n  },\n  left: {\n    side: 'left',\n    align: 'center',\n  },\n  right: {\n    side: 'right',\n    align: 'center',\n  },\n  bottom: {\n    side: 'bottom',\n    align: 'center',\n  },\n  topLeft: {\n    side: 'top',\n    align: 'start',\n  },\n  topRight: {\n    side: 'top',\n    align: 'end',\n  },\n  bottomLeft: {\n    side: 'bottom',\n    align: 'start',\n  },\n  bottomRight: {\n    side: 'bottom',\n    align: 'end',\n  },\n  leftTop: {\n    side: 'left',\n    align: 'start',\n  },\n  leftBottom: {\n    side: 'left',\n    align: 'end',\n  },\n  rightTop: {\n    side: 'right',\n    align: 'start',\n  },\n  rightBottom: {\n    side: 'right',\n    align: 'end',\n  },\n} as const;\n\nconst beforeBase = 'before:content-[\"\"] before:absolute before:h-0 before:w-0';\nconst afterBase = 'after:content-[\"\"] after:absolute after:h-0 after:w-0';\n\nconst vBorderShape =\n  'before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent';\nconst hBorderShape =\n  'before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent';\nconst vFillShape =\n  'after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent';\nconst hFillShape =\n  'after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent';\n\nconst topBorder = 'before:border-t-[9px] before:border-t-border';\nconst bottomBorder = 'before:border-b-[9px] before:border-b-border';\nconst leftBorder = 'before:border-l-[9px] before:border-l-border';\nconst rightBorder = 'before:border-r-[9px] before:border-r-border';\nconst topFill = 'after:border-t-8 after:border-t-popover';\nconst bottomFill = 'after:border-b-8 after:border-b-popover';\nconst leftFill = 'after:border-l-8 after:border-l-popover';\nconst rightFill = 'after:border-r-8 after:border-r-popover';\n\nconst arrowStyles: Record<Placement, string> = {\n  top: [\n    'absolute left-1/2 -translate-x-1/2 top-full',\n    beforeBase,\n    'before:top-0 before:left-1/2 before:-translate-x-1/2',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:left-1/2 after:-translate-x-1/2',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  topLeft: [\n    'absolute left-4 top-full',\n    beforeBase,\n    'before:top-0 before:left-0',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:left-px',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  topRight: [\n    'absolute right-4 top-full',\n    beforeBase,\n    'before:top-0 before:right-0',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:right-px',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  bottom: [\n    'absolute left-1/2 -translate-x-1/2 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:left-1/2 before:-translate-x-1/2',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:left-1/2 after:-translate-x-1/2',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  bottomLeft: [\n    'absolute left-4 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:left-0',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:left-px',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  bottomRight: [\n    'absolute right-4 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:right-0',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:right-px',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  left: [\n    'absolute top-1/2 -translate-y-1/2 left-full',\n    beforeBase,\n    'before:left-0 before:top-1/2 before:-translate-y-1/2',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:top-1/2 after:-translate-y-1/2',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  leftTop: [\n    'absolute top-4 left-full',\n    beforeBase,\n    'before:left-0 before:top-0',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:top-px',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  leftBottom: [\n    'absolute bottom-4 left-full',\n    beforeBase,\n    'before:left-0 before:bottom-0',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:bottom-px',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  right: [\n    'absolute top-1/2 -translate-y-1/2 right-full',\n    beforeBase,\n    'before:right-0 before:top-1/2 before:-translate-y-1/2',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:top-1/2 after:-translate-y-1/2',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n  rightTop: [\n    'absolute top-4 right-full',\n    beforeBase,\n    'before:right-0 before:top-0',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:top-px',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n  rightBottom: [\n    'absolute bottom-4 right-full',\n    beforeBase,\n    'before:right-0 before:bottom-0',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:bottom-px',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n};\n\nconst Popover = ({\n  title,\n  placement = 'top',\n  className,\n  content,\n  children,\n}: Props) => {\n  return (\n    <CorePopover>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        align={placementMap[placement].align}\n        side={placementMap[placement].side}\n        sideOffset={16}\n        className={cn('relative w-auto', className)}\n      >\n        {renderConditional(title, v => (\n          <Typography.Title level={6}>{v}</Typography.Title>\n        ))}\n        {content}\n        <div className={cn(arrowStyles[placement])} />\n      </PopoverContent>\n    </CorePopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;AAKA,MAAM,EAAE,SAAS,aAAa,gBAAgB,mBAAmBA;AAyBjE,MAAM,eAAe;CACnB,KAAK;EACH,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACR;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,eACJ;AACF,MAAM,eACJ;AACF,MAAM,aACJ;AACF,MAAM,aACJ;AAEF,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,YAAY;AAElB,MAAM,cAAyC;CAC7C,KAAK;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACZ;AAED,MAAM,WAAW,EACf,OACA,YAAY,OACZ,WACA,SACA,eACW;AACX,QACE,qBAAC,0BACC,oBAAC;EAAe;EAAS;GAA0B,EACnD,qBAAC;EACC,OAAO,aAAa,WAAW;EAC/B,MAAM,aAAa,WAAW;EAC9B,YAAY;EACZ,WAAW,GAAG,mBAAmB,UAAU;;GAE1C,kBAAkB,QAAO,MACxB,oBAAC,WAAW;IAAM,OAAO;cAAI;KAAqB,CAClD;GACD;GACD,oBAAC,SAAI,WAAW,GAAG,YAAY,WAAW,GAAI;;GAC/B,IACL"}
+{"version":3,"file":"popover.mjs","names":["popover"],"sources":["../../../src/components/atoms/popover.tsx"],"sourcesContent":["import { popover } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Typography from './typography';\n\nconst { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\ninterface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'title' | 'content'\n> {\n  title?: React.ReactNode;\n  placement?: Placement;\n  content: React.ReactNode;\n}\n\nconst placementMap = {\n  top: {\n    side: 'top',\n    align: 'center',\n  },\n  left: {\n    side: 'left',\n    align: 'center',\n  },\n  right: {\n    side: 'right',\n    align: 'center',\n  },\n  bottom: {\n    side: 'bottom',\n    align: 'center',\n  },\n  topLeft: {\n    side: 'top',\n    align: 'start',\n  },\n  topRight: {\n    side: 'top',\n    align: 'end',\n  },\n  bottomLeft: {\n    side: 'bottom',\n    align: 'start',\n  },\n  bottomRight: {\n    side: 'bottom',\n    align: 'end',\n  },\n  leftTop: {\n    side: 'left',\n    align: 'start',\n  },\n  leftBottom: {\n    side: 'left',\n    align: 'end',\n  },\n  rightTop: {\n    side: 'right',\n    align: 'start',\n  },\n  rightBottom: {\n    side: 'right',\n    align: 'end',\n  },\n} as const;\n\nconst beforeBase = 'before:content-[\"\"] before:absolute before:h-0 before:w-0';\nconst afterBase = 'after:content-[\"\"] after:absolute after:h-0 after:w-0';\n\nconst vBorderShape =\n  'before:border-l-[9px] before:border-r-[9px] before:border-l-transparent before:border-r-transparent';\nconst hBorderShape =\n  'before:border-t-[9px] before:border-b-[9px] before:border-t-transparent before:border-b-transparent';\nconst vFillShape =\n  'after:border-l-8 after:border-r-8 after:border-l-transparent after:border-r-transparent';\nconst hFillShape =\n  'after:border-t-8 after:border-b-8 after:border-t-transparent after:border-b-transparent';\n\nconst topBorder = 'before:border-t-[9px] before:border-t-border';\nconst bottomBorder = 'before:border-b-[9px] before:border-b-border';\nconst leftBorder = 'before:border-l-[9px] before:border-l-border';\nconst rightBorder = 'before:border-r-[9px] before:border-r-border';\nconst topFill = 'after:border-t-8 after:border-t-popover';\nconst bottomFill = 'after:border-b-8 after:border-b-popover';\nconst leftFill = 'after:border-l-8 after:border-l-popover';\nconst rightFill = 'after:border-r-8 after:border-r-popover';\n\nconst arrowStyles: Record<Placement, string> = {\n  top: [\n    'absolute left-1/2 -translate-x-1/2 top-full',\n    beforeBase,\n    'before:top-0 before:left-1/2 before:-translate-x-1/2',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:left-1/2 after:-translate-x-1/2',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  topLeft: [\n    'absolute left-4 top-full',\n    beforeBase,\n    'before:top-0 before:left-0',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:left-px',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  topRight: [\n    'absolute right-4 top-full',\n    beforeBase,\n    'before:top-0 before:right-0',\n    vBorderShape,\n    topBorder,\n    afterBase,\n    'after:-top-px after:right-px',\n    vFillShape,\n    topFill,\n  ].join(' '),\n  bottom: [\n    'absolute left-1/2 -translate-x-1/2 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:left-1/2 before:-translate-x-1/2',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:left-1/2 after:-translate-x-1/2',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  bottomLeft: [\n    'absolute left-4 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:left-0',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:left-px',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  bottomRight: [\n    'absolute right-4 bottom-full',\n    beforeBase,\n    'before:bottom-0 before:right-0',\n    vBorderShape,\n    bottomBorder,\n    afterBase,\n    'after:-bottom-px after:right-px',\n    vFillShape,\n    bottomFill,\n  ].join(' '),\n  left: [\n    'absolute top-1/2 -translate-y-1/2 left-full',\n    beforeBase,\n    'before:left-0 before:top-1/2 before:-translate-y-1/2',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:top-1/2 after:-translate-y-1/2',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  leftTop: [\n    'absolute top-4 left-full',\n    beforeBase,\n    'before:left-0 before:top-0',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:top-px',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  leftBottom: [\n    'absolute bottom-4 left-full',\n    beforeBase,\n    'before:left-0 before:bottom-0',\n    hBorderShape,\n    leftBorder,\n    afterBase,\n    'after:-left-px after:bottom-px',\n    hFillShape,\n    leftFill,\n  ].join(' '),\n  right: [\n    'absolute top-1/2 -translate-y-1/2 right-full',\n    beforeBase,\n    'before:right-0 before:top-1/2 before:-translate-y-1/2',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:top-1/2 after:-translate-y-1/2',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n  rightTop: [\n    'absolute top-4 right-full',\n    beforeBase,\n    'before:right-0 before:top-0',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:top-px',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n  rightBottom: [\n    'absolute bottom-4 right-full',\n    beforeBase,\n    'before:right-0 before:bottom-0',\n    hBorderShape,\n    rightBorder,\n    afterBase,\n    'after:-right-px after:bottom-px',\n    hFillShape,\n    rightFill,\n  ].join(' '),\n};\n\nconst Popover = ({\n  title,\n  placement = 'top',\n  className,\n  content,\n  children,\n  ...props\n}: Props) => {\n  return (\n    <CorePopover>\n      <PopoverTrigger asChild>{children}</PopoverTrigger>\n      <PopoverContent\n        {...props}\n        align={placementMap[placement].align}\n        side={placementMap[placement].side}\n        sideOffset={16}\n        className={cn('relative w-auto', className)}\n      >\n        {renderConditional(title, v => (\n          <Typography.Title level={6}>{v}</Typography.Title>\n        ))}\n        {content}\n        <div className={cn(arrowStyles[placement])} />\n      </PopoverContent>\n    </CorePopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;AAKA,MAAM,EAAE,SAAS,aAAa,gBAAgB,mBAAmBA;AAyBjE,MAAM,eAAe;CACnB,KAAK;EACH,MAAM;EACN,OAAO;EACR;CACD,MAAM;EACJ,MAAM;EACN,OAAO;EACR;CACD,OAAO;EACL,MAAM;EACN,OAAO;EACR;CACD,QAAQ;EACN,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACD,SAAS;EACP,MAAM;EACN,OAAO;EACR;CACD,YAAY;EACV,MAAM;EACN,OAAO;EACR;CACD,UAAU;EACR,MAAM;EACN,OAAO;EACR;CACD,aAAa;EACX,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,aAAa;AACnB,MAAM,YAAY;AAElB,MAAM,eACJ;AACF,MAAM,eACJ;AACF,MAAM,aACJ;AACF,MAAM,aACJ;AAEF,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,YAAY;AAElB,MAAM,cAAyC;CAC7C,KAAK;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACX,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI;CACZ;AAED,MAAM,WAAW,EACf,OACA,YAAY,OACZ,WACA,SACA,UACA,GAAG,YACQ;AACX,QACE,qBAAC,0BACC,oBAAC;EAAe;EAAS;GAA0B,EACnD,qBAAC;EACC,GAAI;EACJ,OAAO,aAAa,WAAW;EAC/B,MAAM,aAAa,WAAW;EAC9B,YAAY;EACZ,WAAW,GAAG,mBAAmB,UAAU;;GAE1C,kBAAkB,QAAO,MACxB,oBAAC,WAAW;IAAM,OAAO;cAAI;KAAqB,CAClD;GACD;GACD,oBAAC,SAAI,WAAW,GAAG,YAAY,WAAW,GAAI;;GAC/B,IACL"}

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

@@ -13,7 +13,8 @@ declare const Progress: ({
   value,
   className,
   direction,
-  classNames
+  classNames,
+  ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Progress };

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.mts","names":[],"sources":["../../../src/components/atoms/progress.tsx"],"mappings":";;;UAKiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,KAAA;EACA,SAAA;EACA,UAAA;IACE,UAAA;IACA,GAAA;EAAA;AAAA;AAAA,cAIE,QAAA;EAAY,KAAA;EAAA,SAAA;EAAA,SAAA;EAAA;AAAA,GAMf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"progress.d.mts","names":[],"sources":["../../../src/components/atoms/progress.tsx"],"mappings":";;;UAKiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,KAAA;EACA,SAAA;EACA,UAAA;IACE,UAAA;IACA,GAAA;EAAA;AAAA;AAAA,cAIE,QAAA;EAAY,KAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAMf,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/progress.mjs

@@ -4,11 +4,12 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/progress.tsx
 const { Progress: Core } = progress_exports;
-const Progress = ({ value, className, direction = "horizontal", classNames }) => {
+const Progress = ({ value, className, direction = "horizontal", classNames, ...props }) => {
 	const isHorizontal = direction === "horizontal";
 	const dimension = isHorizontal ? "width" : "height";
 	const normalizedValue = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
 	return /* @__PURE__ */ jsx(Core, {
+		...props,
 		value: normalizedValue,
 		className: cn(isHorizontal ? "h-4 w-full" : "flex h-full w-4 flex-col justify-end", className, classNames?.background),
 		barClassName: cn("flex-none", classNames?.bar),

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

@@ -1 +1 @@
-{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { progress } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  value: number;\n  direction?: 'horizontal' | 'vertical';\n  classNames?: {\n    background?: string;\n    bar?: string;\n  };\n}\n\nconst Progress = ({\n  value,\n  className,\n  direction = 'horizontal',\n  classNames,\n  //\n}: Props) => {\n  const isHorizontal = direction === 'horizontal';\n  const dimension = isHorizontal ? 'width' : 'height';\n  const normalizedValue = Number.isFinite(value)\n    ? Math.min(100, Math.max(0, value))\n    : 0;\n\n  return (\n    <Core\n      value={normalizedValue}\n      className={cn(\n        isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n        className,\n        classNames?.background,\n        //\n      )}\n      barClassName={cn('flex-none', classNames?.bar)}\n      barStyle={{\n        transform: 'none',\n        [dimension]: `${normalizedValue}%`,\n        //\n      }}\n    />\n  );\n};\n\nexport default Progress;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,UAAU,SAASA;AAW3B,MAAM,YAAY,EAChB,OACA,WACA,YAAY,cACZ,iBAEW;CACX,MAAM,eAAe,cAAc;CACnC,MAAM,YAAY,eAAe,UAAU;CAC3C,MAAM,kBAAkB,OAAO,SAAS,MAAM,GAC1C,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,GACjC;AAEJ,QACE,oBAAC;EACC,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,WAEb;EACD,cAAc,GAAG,aAAa,YAAY,IAAI;EAC9C,UAAU;GACR,WAAW;IACV,YAAY,GAAG,gBAAgB;GAEjC;GACD"}
+{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { progress } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  value: number;\n  direction?: 'horizontal' | 'vertical';\n  classNames?: {\n    background?: string;\n    bar?: string;\n  };\n}\n\nconst Progress = ({\n  value,\n  className,\n  direction = 'horizontal',\n  classNames,\n  ...props\n}: Props) => {\n  const isHorizontal = direction === 'horizontal';\n  const dimension = isHorizontal ? 'width' : 'height';\n  const normalizedValue = Number.isFinite(value)\n    ? Math.min(100, Math.max(0, value))\n    : 0;\n\n  return (\n    <Core\n      {...props}\n      value={normalizedValue}\n      className={cn(\n        isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n        className,\n        classNames?.background,\n        //\n      )}\n      barClassName={cn('flex-none', classNames?.bar)}\n      barStyle={{\n        transform: 'none',\n        [dimension]: `${normalizedValue}%`,\n        //\n      }}\n    />\n  );\n};\n\nexport default Progress;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,UAAU,SAASA;AAW3B,MAAM,YAAY,EAChB,OACA,WACA,YAAY,cACZ,YACA,GAAG,YACQ;CACX,MAAM,eAAe,cAAc;CACnC,MAAM,YAAY,eAAe,UAAU;CAC3C,MAAM,kBAAkB,OAAO,SAAS,MAAM,GAC1C,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,GACjC;AAEJ,QACE,oBAAC;EACC,GAAI;EACJ,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,WAEb;EACD,cAAc,GAAG,aAAa,YAAY,IAAI;EAC9C,UAAU;GACR,WAAW;IACV,YAAY,GAAG,gBAAgB;GAEjC;GACD"}

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

@@ -8,7 +8,7 @@ type Option = {
   disabled?: boolean;
 };
 type Options = string[] | number[] | boolean[] | Option[];
-interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value'> {
+interface Props extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'onChange' | 'defaultValue' | 'value'> {
   options?: Options;
   orientation?: 'vertical' | 'horizontal';
   placement?: 'left' | 'right';
@@ -33,7 +33,8 @@ declare const RadioGroup: ({
   disabled,
   defaultValue,
   value: _value,
-  onChange: _onChange
+  onChange: _onChange,
+  ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { OptionValue, RadioGroup };

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":";;;KASY,WAAA;AAAA,KAEP,MAAA;EACH,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGG,OAAA,qCAA4C,MAAA;AAAA,UAEhC,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,MAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EACR,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,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA;AAAA,GAajB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"group.d.mts","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"mappings":";;;KASY,WAAA;AAAA,KAEP,MAAA;EACH,KAAA;EACA,KAAA,EAAO,WAAA;EACP,QAAA;AAAA;AAAA,KAGG,OAAA,qCAA4C,MAAA;AAAA,UAEhC,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,OAAA,GAAU,OAAA;EACV,WAAA;EACA,SAAA;EACA,UAAA,GAAa,MAAA;EACb,YAAA,GAAe,WAAA;EACf,KAAA,GAAQ,WAAA;EACR,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,UAAA;EAAA,WAAA;EAAA,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAcjB,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/radio/group.tsx
-const RadioGroup = ({ orientation = "horizontal", placement = "left", className, classNames = {}, options: _options = [], optionType = "default", buttonStyle = "solid", size, disabled, defaultValue, value: _value, onChange: _onChange = () => {} }) => {
+const RadioGroup = ({ orientation = "horizontal", placement = "left", className, classNames = {}, options: _options = [], optionType = "default", buttonStyle = "solid", size, disabled, defaultValue, value: _value, onChange: _onChange = () => {}, ...props }) => {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const controlled = _value !== void 0;
 	const value = controlled ? _value : uncontrolledValue;
@@ -22,6 +22,7 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 		_onChange(optionValue);
 	};
 	return /* @__PURE__ */ jsx("ul", {
+		...props,
 		className: cn("flex gap-4", className, orientation === "vertical" && "flex-col", isButton && "gap-0"),
 		children: options.map((item, index) => {
 			const checked = value === item.value;
@@ -39,7 +40,7 @@ const RadioGroup = ({ orientation = "horizontal", placement = "left", className,
 					className: cn(classNames?.item),
 					value: item.value,
 					checked,
-					disabled: item.disabled,
+					disabled: disabled || item.disabled,
 					onChange: (checked) => onChange(checked, item.value),
 					children: item.label
 				})

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

@@ -1 +1 @@
-{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport Radio from './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<'div'>,\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  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  return (\n    <ul\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                placement={placement}\n                className={cn(classNames?.item)}\n                value={item.value}\n                checked={checked}\n                disabled={item.disabled}\n                onChange={checked => onChange(checked, item.value)}\n              >\n                {item.label}\n              </Radio>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;AAoCA,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,SACjB;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;;AAGxB,QACE,oBAAC;EACC,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;KACY;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,KAAK;KACf,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACA;MA5BL,OAAO,KAAK,MAAM,CA8BpB;IAEP;GACC"}
+{"version":3,"file":"group.mjs","names":[],"sources":["../../../../src/components/atoms/radio/group.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport Radio from './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  return (\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                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\nexport default RadioGroup;\n"],"mappings":";;;;;;;;;AAoCA,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;;AAGxB,QACE,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;KACY;KACX,WAAW,GAAG,YAAY,KAAK;KAC/B,OAAO,KAAK;KACH;KACT,UAAU,YAAY,KAAK;KAC3B,WAAU,YAAW,SAAS,SAAS,KAAK,MAAM;eAEjD,KAAK;MACA;MA5BL,OAAO,KAAK,MAAM,CA8BpB;IAEP;GACC"}

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

@@ -10,7 +10,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#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, onChange: _onChange = () => {}, ...props }) => {
+const Radio = ({ placement = "left", value: _value = "", children, className, icons, disabled, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
 	const id = useId();
 	const controlled = _checked !== void 0;
@@ -32,10 +32,20 @@ const Radio = ({ placement = "left", value: _value, children, className, icons,
 			}
 		}),
 		/* @__PURE__ */ jsx("span", {
+			role: "radio",
+			"aria-checked": checked,
+			"aria-disabled": disabled,
+			tabIndex: disabled ? -1 : 0,
 			className: cn(cursorClassName, disabled && "opacity-50"),
 			onClick: () => {
 				document.getElementById(id)?.click();
 			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					document.getElementById(id)?.click();
+				}
+			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(CircleCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Circle, {})
 		}),
 		children && /* @__PURE__ */ jsx("label", {

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 { 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 { 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  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  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const id = useId();\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"radio\"\n        checked={checked}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          document.getElementById(id)?.click();\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  ) : (\n    <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n      <Field\n        orientation=\"horizontal\"\n        className={cn(\n          'flex gap-2',\n          placement === 'right' && 'flex-row-reverse',\n        )}\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    </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":";;;;;;;;;;AAWA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAe9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,QACP,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,KAAK,OAAO;CAClB,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;aAGrC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,oBAAC;EAAK,OAAO,UAAU,KAAK;EAAI,qBAAqB,SAAS,KAAK;YACjE,qBAAC;GACC,aAAY;GACZ,WAAW,GACT,cACA,cAAc,WAAW,mBAC1B;GACD,iBAAe;cAEf,oBAAC;IAAK,OAAO;IAAQ;IAAa;IAAmB;KAAY,EACjE,oBAAC;IAAW,SAAS;IAAI,WAAW;IACjC;KACU;IACP;GACH;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 { 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 { 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  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  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [uncontrolledChecked, setUncontrolledChecked] = useState<boolean>(\n    defaultChecked || false,\n  );\n\n  const id = useId();\n  const controlled = _checked !== undefined;\n  const checked = controlled ? _checked : uncontrolledChecked;\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    if (!controlled) {\n      setUncontrolledChecked(next);\n    }\n    _onChange(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"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  ) : (\n    <Core value={checked ? id : ''} onValueChange={() => onChange(true)}>\n      <Field\n        orientation=\"horizontal\"\n        className={cn(\n          'flex gap-2',\n          placement === 'right' && 'flex-row-reverse',\n        )}\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    </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":";;;;;;;;;;AAWA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAe9B,MAAM,SAAS,EACb,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,KAAK,OAAO;CAClB,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,aAAa,WAAW;CAExC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,MAAI,CAAC,WACH,wBAAuB,KAAK;AAE9B,YAAU,KAAK;;CAGjB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACI;GACT,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,eAAe,GAAG,EAAE,OAAO;;GAEtC,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,eAAe,GAAG,EAAE,OAAO;;;aAIvC,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,oBAAC;EAAK,OAAO,UAAU,KAAK;EAAI,qBAAqB,SAAS,KAAK;YACjE,qBAAC;GACC,aAAY;GACZ,WAAW,GACT,cACA,cAAc,WAAW,mBAC1B;GACD,iBAAe;cAEf,oBAAC;IAAK,OAAO;IAAQ;IAAa;IAAmB;KAAY,EACjE,oBAAC;IAAW,SAAS;IAAI,WAAW;IACjC;KACU;IACP;GACH;AAGT,QACE,oBAAC;EACC,WAAW,GACT,qBACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG"}

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
@@ -7,8 +8,9 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
 declare const Spin: ({
   spinning,
   className,
+  children,
   ...props
-}: Props) => react_jsx_runtime0.JSX.Element | null;
+}: 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;
 //#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,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"spin.d.mts","names":[],"sources":["../../../src/components/atoms/spin.tsx"],"mappings":";;;;UAIiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,QAAA;AAAA;AAAA,cAGI,IAAA;EAAQ,QAAA;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAA6C,KAAA,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"}