@jbpark/ui-kit 2.3.4 → 2.4.0

package/dist/components/atoms/Button/index.d.mts

@@ -5,13 +5,15 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 //#region src/components/atoms/Button/index.d.ts
 type ButtonProps = Props$1;
 type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
-interface Props extends Omit<ButtonProps, 'size' | 'variant'> {
+interface Props extends Omit<ButtonProps, 'size' | 'variant' | 'type'> {
   icon?: React.ReactNode;
   block?: boolean;
   danger?: boolean;
   disabled?: boolean;
   size?: 'small' | 'middle' | 'large';
+  type?: 'primary' | 'default' | 'dashed' | 'text' | 'link';
   variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';
+  shape?: 'default' | 'circle' | 'round';
   color?: PresetColors | 'default' | 'primary' | 'danger';
   loading?: boolean | {
     icon: React.ReactNode;
@@ -20,9 +22,11 @@ interface Props extends Omit<ButtonProps, 'size' | 'variant'> {
 declare const Button: ({
   icon,
   className,
+  type,
   variant,
   size,
   color,
+  shape,
   block,
   disabled,
   loading,

package/dist/components/atoms/Button/index.d.mts.map

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

package/dist/components/atoms/Button/index.mjs

@@ -16,26 +16,39 @@ const variantClasses = {
 	text: cn("bg-transparent text-foreground", "hover:bg-accent"),
 	link: cn("bg-transparent text-primary", "underline-offset-4 hover:underline", "hover:bg-primary/10")
 };
+const typeToVariant = {
+	primary: "solid",
+	default: "outlined",
+	dashed: "dashed",
+	text: "text",
+	link: "link"
+};
 const sizesClasses = {
 	small: "h-6 px-3 text-sm",
 	middle: "h-8 px-4 text-base",
 	large: "h-10 px-5 text-lg"
 };
-const iconSizes = {
-	small: "size-6",
-	middle: "size-8",
-	large: "size-10"
+const iconClasses = {
+	small: `size-6 [&_svg:not([class*='size-'])]:size-3`,
+	middle: `size-8 [&_svg:not([class*='size-'])]:size-4`,
+	large: `size-10 [&_svg:not([class*='size-'])]:size-5`
+};
+const shapesClasses = {
+	default: "rounded-sm",
+	circle: "rounded-full",
+	round: "rounded-2xl"
 };
-const Button = ({ icon, className, variant = "solid", size = "middle", color = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+const Button = ({ icon, className, type = "default", variant, size = "middle", color = "default", shape = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
 	const iconOnly = icon && !children;
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
+	const resolvedVariant = variant ?? typeToVariant[type] ?? "solid";
 	const displayIcon = loading ? typeof loading === "object" ? loading.icon : /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : icon;
 	return /* @__PURE__ */ jsxs(Core, {
 		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[variant || "solid"], sizesClasses[size || "middle"], iconOnly && iconSizes[size || "middle"], block && "w-full", colored && (variant === "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 || "medium"], iconOnly && ["p-0", iconClasses[size || "medium"]], shapesClasses[shape || "default"], block && "w-full", colored && (resolvedVariant === "solid" ? [
 			"bg-(--btn-bg)",
 			"hover:bg-(--btn-bg-hover)",
 			"active:bg-(--btn-bg-active)",

package/dist/components/atoms/Button/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["button.Button"],"sources":["../../../../src/components/atoms/Button/index.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'> {\n  icon?: React.ReactNode;\n  block?: boolean;\n  danger?: boolean;\n  disabled?: boolean;\n  size?: 'small' | 'middle' | 'large';\n  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';\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-[rgb(var(--btn-border)/0.5)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[rgb(var(--btn-border)/0.5)]',\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 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 iconSizes: Record<string, string> = {\n  small: 'size-6',\n  middle: 'size-8',\n  large: 'size-10',\n};\n\nconst Button = ({\n  icon,\n  className,\n  variant = 'solid',\n  size = 'middle',\n  color = '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\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[variant || 'solid'],\n        sizesClasses[size || 'middle'],\n        iconOnly && iconSizes[size || 'middle'],\n        block && 'w-full',\n        colored &&\n          (variant === '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-[rgb(var(--btn-border)/0.5)]',\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;AA6Bb,MAAM,iBAAyC;CAC7C,OAAO;CACP,UAAU,GACR,8CACA,iCACA,kBACD;CACD,QAAQ,GACN,4DACA,iCACA,kBACD;CACD,QAAQ,GAAG,4BAA4B,oBAAoB;CAC3D,MAAM,GAAG,kCAAkC,kBAAkB;CAC7D,MAAM,GACJ,+BACA,sCACA,sBACD;CACF;AAED,MAAM,eAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,YAAoC;CACxC,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,MAAM,UAAU,EACd,MACA,WACA,UAAU,SACV,OAAO,UACP,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;CAEnD,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,WAAW,UAC1B,aAAa,QAAQ,WACrB,YAAY,UAAU,QAAQ,WAC9B,SAAS,UACT,YACG,YAAY,UACT;GACE;GACA;GACA;GACA;GACA;GACD,GACD,CACE,mBACA,sCAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}
+{"version":3,"file":"index.mjs","names":["button.Button"],"sources":["../../../../src/components/atoms/Button/index.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-[rgb(var(--btn-border)/0.5)]',\n    'bg-background text-foreground',\n    'hover:bg-accent',\n  ),\n  dashed: cn(\n    'border border-dashed border-[rgb(var(--btn-border)/0.5)]',\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-[rgb(var(--btn-border)/0.5)]',\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,8CACA,iCACA,kBACD;CACD,QAAQ,GACN,4DACA,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,sCAED,GACP,UAED;EACD,cAAa,MAAK;AAChB,KAAE,gBAAgB;AAClB,iBAAc,EAAE;;EAElB,GAAI;aAEH,aACA;GACI"}

package/dist/components/atoms/Checkbox/Group/index.d.mts

@@ -1,7 +1,7 @@
-import { OptionValue } from "../index.mjs";
 import "react/jsx-runtime";
 
 //#region src/components/atoms/Checkbox/Group/index.d.ts
+type OptionValue = string | number | boolean;
 type Option = {
   label: string;
   value: OptionValue;
@@ -17,5 +17,5 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' |
   onChange?: (values: OptionValue[]) => void;
 }
 //#endregion
-export { Props };
+export { OptionValue, Props };
 //# sourceMappingURL=index.d.mts.map

package/dist/components/atoms/Checkbox/Group/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/atoms/Checkbox/Group/index.tsx"],"mappings":";;;;KAMK,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"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/atoms/Checkbox/Group/index.tsx"],"mappings":";;;KAMY,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"}

package/dist/components/atoms/Checkbox/Group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/atoms/Checkbox/Group/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Checkbox, { type OptionValue } from '..';\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":";;;;;;AA0BA,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":"index.mjs","names":[],"sources":["../../../../../src/components/atoms/Checkbox/Group/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Checkbox from '..';\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":";;;;;;AA4BA,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"}

package/dist/components/atoms/Checkbox/index.d.mts

@@ -1,8 +1,7 @@
-import { Props as Props$1 } from "./Group/index.mjs";
+import { OptionValue, Props as Props$1 } from "./Group/index.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/Checkbox/index.d.ts
-type OptionValue = string | number | boolean;
 interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
   placement?: 'left' | 'right';
   defaultChecked?: boolean;
@@ -41,5 +40,5 @@ declare const Checkbox: {
   }: Props$1) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { Checkbox, OptionValue };
+export { Checkbox };
 //# sourceMappingURL=index.d.mts.map

package/dist/components/atoms/Checkbox/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"mappings":";;;;KAcY,WAAA;AAAA,UAEK,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,QAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"mappings":";;;;UAciB,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA;EAGN,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,QAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/Checkbox/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/Checkbox/index.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 Group from './Group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport type OptionValue = string | number | boolean;\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 = '',\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 reactId = useId();\n\n  const id = typeof value === 'boolean' || !value ? reactId : String(value);\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\nCheckbox.Group = Group;\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CAEvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,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,4CACE,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;;AAIV,SAAS,QAAQ"}
+{"version":3,"file":"index.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/Checkbox/index.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 Group, { 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 = '',\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 reactId = useId();\n\n  const id = typeof value === 'boolean' || !value ? reactId : String(value);\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\nCheckbox.Group = Group;\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAgB7B,MAAM,YAAY,EAChB,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CAEvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,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,4CACE,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;;AAIV,SAAS,QAAQ"}

package/dist/components/atoms/Radio/Group/index.d.mts

@@ -1,10 +1,11 @@
-import { OptionValue } from "../index.mjs";
 import "react/jsx-runtime";
 
 //#region src/components/atoms/Radio/Group/index.d.ts
+type OptionValue = string | number | boolean;
 type Option = {
   label: string;
   value: OptionValue;
+  disabled?: boolean;
 };
 type Options = string[] | number[] | boolean[] | Option[];
 interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value'> {
@@ -14,8 +15,12 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' |
   classNames?: Record<string, string>;
   defaultValue?: OptionValue;
   value?: OptionValue;
+  optionType?: 'default' | 'button';
+  buttonStyle?: 'solid' | 'outlined';
+  size?: 'small' | 'middle' | 'large';
+  disabled?: boolean;
   onChange?: (value: OptionValue) => void;
 }
 //#endregion
-export { Props };
+export { OptionValue, Props };
 //# sourceMappingURL=index.d.mts.map

package/dist/components/atoms/Radio/Group/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/atoms/Radio/Group/index.tsx"],"mappings":";;;;KAMK,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,KAAA,EAAO,WAAA;AAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../../src/components/atoms/Radio/Group/index.tsx"],"mappings":";;;KAOY,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"}

package/dist/components/atoms/Radio/Group/index.mjs

@@ -1,10 +1,12 @@
 import { cn } from "../../../../utils.mjs";
+import Button from "../../Button/index.mjs";
 import Radio from "../index.mjs";
+import "../../../../index.mjs";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/atoms/Radio/Group/index.tsx
-const RadioGroup = ({ orientation = "vertical", placement = "left", className, classNames = {}, options: _options = [], 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 = () => {} }) => {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const controlled = _value !== void 0;
 	const value = controlled ? _value : uncontrolledValue;
@@ -12,22 +14,31 @@ const RadioGroup = ({ orientation = "vertical", placement = "left", className, c
 		label: `${item}`,
 		value: item
 	});
+	const isButton = optionType === "button";
 	const onChange = (checked, optionValue) => {
 		if (!checked) return;
 		if (!controlled) setUncontrolledValue(optionValue);
 		_onChange(optionValue);
 	};
 	return /* @__PURE__ */ jsx("ul", {
-		className: cn(orientation === "vertical" ? "space-y-2" : "flex gap-2", className),
-		children: options.map((item) => {
+		className: cn("flex gap-4", className, orientation === "vertical" && "flex-col", isButton && "gap-0"),
+		children: options.map((item, index) => {
 			const checked = value === item.value;
 			return /* @__PURE__ */ jsx("li", {
 				className: cn("flex", classNames?.wrapper),
-				children: /* @__PURE__ */ jsx(Radio, {
+				children: isButton ? /* @__PURE__ */ jsx(Button, {
+					variant: checked ? buttonStyle : "outlined",
+					size,
+					className: cn("rounded-none", index === 0 && "rounded-l-lg", index === options.length - 1 && "rounded-r-lg", checked && buttonStyle === "outlined" && "border-primary"),
+					disabled: disabled || item.disabled,
+					onClick: () => onChange(true, item.value),
+					children: item.label
+				}) : /* @__PURE__ */ jsx(Radio, {
 					placement,
 					className: cn(classNames?.item),
 					value: item.value,
 					checked,
+					disabled: item.disabled,
 					onChange: (checked) => onChange(checked, item.value),
 					children: item.label
 				})

package/dist/components/atoms/Radio/Group/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/atoms/Radio/Group/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Radio, { OptionValue } from '..';\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?: (value: OptionValue) => void;\n}\n\nconst RadioGroup = ({\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<\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 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        orientation === 'vertical' ? 'space-y-2' : 'flex gap-2',\n        className,\n      )}\n    >\n      {options.map((item: Option) => {\n        const checked = value === item.value;\n\n        return (\n          <li\n            key={String(item.value)}\n            className={cn('flex', classNames?.wrapper)}\n          >\n            <Radio\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            </Radio>\n          </li>\n        );\n      })}\n    </ul>\n  );\n};\n\nexport default RadioGroup;\n"],"mappings":";;;;;;AA0BA,MAAM,cAAc,EAClB,cAAc,YACd,YAAY,QACZ,WACA,aAAa,EAAE,EACf,SAAS,WAAW,EAAE,EACtB,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,YAAY,SAAkB,gBAA6B;AAC/D,MAAI,CAAC,QACH;AAEF,MAAI,CAAC,WACH,sBAAqB,YAAY;AAEnC,YAAU,YAAY;;AAGxB,QACE,oBAAC;EACC,WAAW,GACT,gBAAgB,aAAa,cAAc,cAC3C,UACD;YAEA,QAAQ,KAAK,SAAiB;GAC7B,MAAM,UAAU,UAAU,KAAK;AAE/B,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;MACA;MAXH,OAAO,KAAK,MAAM,CAYpB;IAEP;GACC"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../src/components/atoms/Radio/Group/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Button } from '@repo/ui';\nimport { cn } from '@repo/ui/utils';\n\nimport Radio from '..';\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":";;;;;;;;AAkCA,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"}

package/dist/components/atoms/Radio/index.d.mts

@@ -1,11 +1,10 @@
 import { RadioGroup } from "../../../core/radio-group.mjs";
 import "../../../core.mjs";
-import { Props as Props$1 } from "./Group/index.mjs";
+import { OptionValue, Props as Props$1 } from "./Group/index.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/atoms/Radio/index.d.ts
 declare const Core: typeof RadioGroup;
-type OptionValue = string | number | boolean;
 interface Props extends Omit<React.ComponentPropsWithoutRef<typeof Core>, 'onChange' | 'value'> {
   placement?: 'left' | 'right';
   defaultChecked?: boolean;
@@ -37,11 +36,15 @@ declare const Radio: {
     className,
     classNames,
     options: _options,
+    optionType,
+    buttonStyle,
+    size,
+    disabled,
     defaultValue,
     value: _value,
     onChange: _onChange
   }: Props$1) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { OptionValue, Radio };
+export { Radio };
 //# sourceMappingURL=index.d.mts.map

package/dist/components/atoms/Radio/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Radio/index.tsx"],"mappings":";;;;;;cAWoB,IAAA,SAAI,UAAA;AAAA,KAGZ,WAAA;AAAA,UAEK,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA,QAAgC,IAAA;EAGtC,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,KAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Radio/index.tsx"],"mappings":";;;;;;cAWoB,IAAA,SAAI,UAAA;AAAA,UAGP,KAAA,SAAc,IAAA,CAC7B,KAAA,CAAM,wBAAA,QAAgC,IAAA;EAGtC,SAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA,GAAQ,WAAA;EACR,QAAA;EACA,KAAA;IAAU,OAAA,EAAS,KAAA,CAAM,SAAA;IAAW,SAAA,EAAW,KAAA,CAAM,SAAA;EAAA;EACrD,QAAA,IAAY,OAAA;AAAA;AAAA,cAGR,KAAA;EAAA;;;;;;;;;;;KAWH,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/atoms/Radio/index.mjs

@@ -51,7 +51,7 @@ const Radio = ({ placement = "left", value = "", children, className, icons, dis
 		onValueChange: () => onChange(true),
 		children: /* @__PURE__ */ jsxs(Field, {
 			orientation: "horizontal",
-			className: cn("flex", placement === "right" && "flex-row-reverse"),
+			className: cn("flex gap-2", placement === "right" && "flex-row-reverse"),
 			"data-disabled": disabled,
 			children: [/* @__PURE__ */ jsx(Item, {
 				value: id,
@@ -60,12 +60,13 @@ const Radio = ({ placement = "left", value = "", children, className, icons, dis
 				disabled
 			}), /* @__PURE__ */ jsx(FieldLabel, {
 				htmlFor: id,
+				className: cursorClassName,
 				children
 			})]
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center gap-x-2", icons && placement === "right" && "flex-row-reverse", cursorClassName, className),
+		className: cn("flex items-center", icons && placement === "right" && "flex-row-reverse", cursorClassName, className),
 		...props,
 		children: renderContent
 	});

package/dist/components/atoms/Radio/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["radio","field","Group"],"sources":["../../../../src/components/atoms/Radio/index.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 Group from './Group';\n\nconst { RadioGroup: Core, RadioGroupItem: Item } = radio;\nconst { Field, FieldLabel } = field;\n\nexport type OptionValue = string | number | boolean;\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 = '',\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 reactId = useId();\n  const id = typeof value === 'boolean' || !value ? reactId : String(value);\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('flex', placement === 'right' && 'flex-row-reverse')}\n        data-disabled={disabled}\n      >\n        <Item value={id} id={id} checked={checked} disabled={disabled} />\n        <FieldLabel htmlFor={id}>{children}</FieldLabel>\n      </Field>\n    </Core>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        icons && placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nRadio.Group = Group;\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAiB9B,MAAM,SAAS,EACb,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CACvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,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,GAAG,QAAQ,cAAc,WAAW,mBAAmB;GAClE,iBAAe;cAEf,oBAAC;IAAK,OAAO;IAAQ;IAAa;IAAmB;KAAY,EACjE,oBAAC;IAAW,SAAS;IAAK;KAAsB;IAC1C;GACH;AAGT,QACE,oBAAC;EACC,WAAW,GACT,6BACA,SAAS,cAAc,WAAW,oBAClC,iBACA,UAED;EACD,GAAI;YAEH;GACG;;AAIV,MAAM,QAAQC"}
+{"version":3,"file":"index.mjs","names":["radio","field","Group"],"sources":["../../../../src/components/atoms/Radio/index.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 Group, { 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 = '',\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 reactId = useId();\n  const id = typeof value === 'boolean' || !value ? reactId : String(value);\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\nRadio.Group = Group;\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAWA,MAAM,EAAE,YAAY,MAAM,gBAAgB,SAASA;AACnD,MAAM,EAAE,OAAO,eAAeC;AAe9B,MAAM,SAAS,EACb,YAAY,QACZ,QAAQ,IACR,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,kBAAkB,MACnB;CAED,MAAM,UAAU,OAAO;CACvB,MAAM,KAAK,OAAO,UAAU,aAAa,CAAC,QAAQ,UAAU,OAAO,MAAM;CACzE,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;;AAIV,MAAM,QAAQC"}

package/dist/components/atoms/Switch/index.d.mts

@@ -6,17 +6,23 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'button'>, 'onChange
     track?: string;
     handle?: string;
   };
+  size?: 'small' | 'medium';
   defaultChecked?: boolean;
   checked?: boolean;
   disabled?: boolean;
   onChange?: (checked: boolean) => void;
+  checkedChildren?: React.ReactNode;
+  unCheckedChildren?: React.ReactNode;
 }
 declare const Switch: ({
   className,
   classNames,
+  size,
   defaultChecked,
   checked: _checked,
   onChange: _onChange,
+  checkedChildren,
+  unCheckedChildren,
   ...props
 }: Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/components/atoms/Switch/index.d.mts.map

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

package/dist/components/atoms/Switch/index.mjs

@@ -4,11 +4,27 @@ import { cn } from "../../../utils.mjs";
 import { switch_exports } from "../../../core/switch.mjs";
 import "../../../core.mjs";
 import { useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/atoms/Switch/index.tsx
 const { Switch: Core } = switch_exports;
-const Switch = ({ className, classNames, defaultChecked, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
+const sizeConfig = {
+	medium: {
+		core: "default",
+		handleChecked: "data-[state=unchecked]:left-0 data-[state=checked]:left-[calc(100%-16px)]",
+		fontSize: "text-[9px]",
+		marginChecked: "mr-4.5 ml-1",
+		marginUnchecked: "mr-1 ml-4.5"
+	},
+	small: {
+		core: "sm",
+		handleChecked: "data-[state=unchecked]:left-0 data-[state=checked]:left-[calc(100%-12px)]",
+		fontSize: "text-[7px]",
+		marginChecked: "mr-3.5 ml-0.5",
+		marginUnchecked: "mr-0.5 ml-3.5"
+	}
+};
+const Switch = ({ className, classNames, size = "medium", defaultChecked, checked: _checked, onChange: _onChange = () => {}, checkedChildren, unCheckedChildren, ...props }) => {
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked || false);
 	const controlled = _checked !== void 0;
 	const checked = controlled ? _checked : uncontrolledChecked;
@@ -16,14 +32,31 @@ const Switch = ({ className, classNames, defaultChecked, checked: _checked, onCh
 		if (!controlled) setUncontrolledChecked(next);
 		_onChange(next);
 	};
+	const hasChildren = !!(checkedChildren || unCheckedChildren);
+	const config = sizeConfig[size];
 	return /* @__PURE__ */ jsx(Core, {
 		checked,
-		className: cn("h-8.5 w-13", className, classNames?.track),
-		handleClassName: cn("h-7 w-7", "data-[state=checked]:translate-x-5", "data-[state=unchecked]:translate-x-[2px]", classNames?.handle),
+		size: config.core,
+		className: cn("relative", hasChildren && "w-auto! overflow-hidden", className, classNames?.track),
+		handleClassName: cn(hasChildren && [
+			"!absolute top-1/2 !-translate-y-1/2 !translate-x-0",
+			"transition-[left] duration-200",
+			config.handleChecked
+		], classNames?.handle),
 		onCheckedChange: (checked) => {
 			onChange(checked);
 		},
-		...props
+		...props,
+		children: hasChildren && /* @__PURE__ */ jsxs("span", {
+			className: cn("grid leading-none text-white transition-[margin] duration-200", config.fontSize, checked ? config.marginChecked : config.marginUnchecked),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("col-start-1 row-start-1 transition-opacity duration-200", checked ? "opacity-100" : "opacity-0"),
+				children: checkedChildren
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("col-start-1 row-start-1 transition-opacity duration-200", checked ? "opacity-0" : "opacity-100"),
+				children: unCheckedChildren
+			})]
+		})
 	});
 };
 

package/dist/components/atoms/Switch/index.mjs.map

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

package/dist/core/switch.d.mts

@@ -8,11 +8,13 @@ declare namespace switch_d_exports {
 }
 interface CustomProps {
   handleClassName?: string;
+  children?: React$1.ReactNode;
 }
 declare function Switch({
   className,
   size,
   handleClassName,
+  children,
   ...props
 }: React$1.ComponentProps<typeof SwitchPrimitive.Root> & {
   size?: 'sm' | 'default';

package/dist/core/switch.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.mts","names":[],"sources":["../../src/core/switch.tsx"],"mappings":";;;;;;;;UAQU,WAAA;EACR,eAAA;AAAA;AAAA,iBAGO,MAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,eAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA;EAC7C,IAAA;AAAA,IACE,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../src/core/switch.tsx"],"mappings":";;;;;;;;UAQU,WAAA;EACR,eAAA;EACA,QAAA,GAAW,OAAA,CAAM,SAAA;AAAA;AAAA,iBAGV,MAAA,CAAA;EACP,SAAA;EACA,IAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA;EAC7C,IAAA;AAAA,IACE,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/core/switch.mjs

@@ -3,13 +3,13 @@
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 //#region src/core/switch.tsx
 var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch });
-function Switch({ className, size = "default", handleClassName, ...props }) {
-	return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
+function Switch({ className, size = "default", handleClassName, children, ...props }) {
+	return /* @__PURE__ */ jsxs(SwitchPrimitive.Root, {
 		"data-slot": "switch",
 		"data-size": size,
 		className: cn(`peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input
@@ -21,7 +21,7 @@ function Switch({ className, size = "default", handleClassName, ...props }) {
         data-[size=default]:h-[1.15rem] data-[size=default]:w-8
         data-[size=sm]:h-3.5 data-[size=sm]:w-6`, className),
 		...props,
-		children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+		children: [/* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
 			"data-slot": "switch-thumb",
 			className: cn(`bg-background dark:data-[state=unchecked]:bg-foreground
           dark:data-[state=checked]:bg-primary-foreground pointer-events-none
@@ -30,7 +30,7 @@ function Switch({ className, size = "default", handleClassName, ...props }) {
           group-data-[size=sm]/switch:size-3
           data-[state=checked]:translate-x-[calc(100%-2px)]
           data-[state=unchecked]:translate-x-0`, handleClassName)
-		})
+		}), children]
 	});
 }
 

package/dist/core/switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/core/switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\n\nimport { cn } from '@repo/ui/utils';\n\ninterface CustomProps {\n  handleClassName?: string;\n}\n\nfunction Switch({\n  className,\n  size = 'default',\n  handleClassName,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: 'sm' | 'default';\n} & CustomProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        `peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\n        focus-visible:border-ring focus-visible:ring-ring/50\n        dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex\n        shrink-0 items-center rounded-full border border-transparent shadow-xs\n        transition-all outline-none focus-visible:ring-[3px]\n        disabled:cursor-not-allowed disabled:opacity-50\n        data-[size=default]:h-[1.15rem] data-[size=default]:w-8\n        data-[size=sm]:h-3.5 data-[size=sm]:w-6`,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          `bg-background dark:data-[state=unchecked]:bg-foreground\n          dark:data-[state=checked]:bg-primary-foreground pointer-events-none\n          block rounded-full ring-0 transition-transform\n          group-data-[size=default]/switch:size-4\n          group-data-[size=sm]/switch:size-3\n          data-[state=checked]:translate-x-[calc(100%-2px)]\n          data-[state=unchecked]:translate-x-0`,\n          handleClassName,\n        )}\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;AAYA,SAAS,OAAO,EACd,WACA,OAAO,WACP,iBACA,GAAG,SAGY;AACf,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,aAAW;EACX,WAAW,GACT;;;;;;;kDAQA,UACD;EACD,GAAI;YAEJ,oBAAC,gBAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;iDAOA,gBACD;IACD;GACmB"}
+{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/core/switch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch';\n\nimport { cn } from '@repo/ui/utils';\n\ninterface CustomProps {\n  handleClassName?: string;\n  children?: React.ReactNode;\n}\n\nfunction Switch({\n  className,\n  size = 'default',\n  handleClassName,\n  children,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: 'sm' | 'default';\n} & CustomProps) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        `peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\n        focus-visible:border-ring focus-visible:ring-ring/50\n        dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex\n        shrink-0 items-center rounded-full border border-transparent shadow-xs\n        transition-all outline-none focus-visible:ring-[3px]\n        disabled:cursor-not-allowed disabled:opacity-50\n        data-[size=default]:h-[1.15rem] data-[size=default]:w-8\n        data-[size=sm]:h-3.5 data-[size=sm]:w-6`,\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          `bg-background dark:data-[state=unchecked]:bg-foreground\n          dark:data-[state=checked]:bg-primary-foreground pointer-events-none\n          block rounded-full ring-0 transition-transform\n          group-data-[size=default]/switch:size-4\n          group-data-[size=sm]/switch:size-3\n          data-[state=checked]:translate-x-[calc(100%-2px)]\n          data-[state=unchecked]:translate-x-0`,\n          handleClassName,\n        )}\n      />\n      {children}\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n"],"mappings":";;;;;;;;;;AAaA,SAAS,OAAO,EACd,WACA,OAAO,WACP,iBACA,UACA,GAAG,SAGY;AACf,QACE,qBAAC,gBAAgB;EACf,aAAU;EACV,aAAW;EACX,WAAW,GACT;;;;;;;kDAQA,UACD;EACD,GAAI;aAEJ,oBAAC,gBAAgB;GACf,aAAU;GACV,WAAW,GACT;;;;;;iDAOA,gBACD;IACD,EACD;GACoB"}

package/dist/style.css

@@ -215,6 +215,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!absolute {
+    position: absolute !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -302,6 +305,12 @@
   .col-span-3 {
     grid-column: span 3 / span 3;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -344,15 +353,39 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mr-0\.5 {
+    margin-right: calc(var(--spacing) * 0.5);
+  }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .mr-3\.5 {
+    margin-right: calc(var(--spacing) * 3.5);
+  }
+  .mr-4\.5 {
+    margin-right: calc(var(--spacing) * 4.5);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .ml-0\.5 {
+    margin-left: calc(var(--spacing) * 0.5);
+  }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .ml-3\.5 {
+    margin-left: calc(var(--spacing) * 3.5);
+  }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .ml-4\.5 {
+    margin-left: calc(var(--spacing) * 4.5);
+  }
   .box-content {
     box-sizing: content-box;
   }
@@ -423,15 +456,9 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-8\.5 {
-    height: calc(var(--spacing) * 8.5);
-  }
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
@@ -468,15 +495,9 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
-  .w-13 {
-    width: calc(var(--spacing) * 13);
-  }
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
@@ -504,6 +525,9 @@
   .w-auto {
     width: auto;
   }
+  .w-auto\! {
+    width: auto !important;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -555,6 +579,10 @@
   .origin-\(--radix-select-content-transform-origin\) {
     transform-origin: var(--radix-select-content-transform-origin);
   }
+  .\!translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0) !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -563,6 +591,10 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .\!-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1) !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -665,6 +697,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -757,10 +792,18 @@
     border-top-left-radius: 30px !important;
     border-top-right-radius: 30px !important;
   }
+  .rounded-l-lg {
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
   .rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-r-lg {
+    border-top-right-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+  }
   .rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -804,6 +847,9 @@
   .border-input {
     border-color: var(--input);
   }
+  .border-primary {
+    border-color: var(--primary);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1000,6 +1046,12 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[7px\] {
+    font-size: 7px;
+  }
+  .text-\[9px\] {
+    font-size: 9px;
+  }
   .leading-5\.75 {
     --tw-leading: calc(var(--spacing) * 5.75);
     line-height: calc(var(--spacing) * 5.75);
@@ -1101,12 +1153,18 @@
   .underline-offset-8 {
     text-underline-offset: 8px;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1160,6 +1218,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[left\] {
+    transition-property: left;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[margin\] {
+    transition-property: margin;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2067,10 +2135,14 @@
       }
     }
   }
-  .data-\[state\=checked\]\:translate-x-5 {
+  .data-\[state\=checked\]\:left-\[calc\(100\%-12px\)\] {
     &[data-state="checked"] {
-      --tw-translate-x: calc(var(--spacing) * 5);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+      left: calc(100% - 12px);
+    }
+  }
+  .data-\[state\=checked\]\:left-\[calc\(100\%-16px\)\] {
+    &[data-state="checked"] {
+      left: calc(100% - 16px);
     }
   }
   .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
@@ -2104,15 +2176,14 @@
       color: var(--muted-foreground);
     }
   }
-  .data-\[state\=unchecked\]\:translate-x-0 {
+  .data-\[state\=unchecked\]\:left-0 {
     &[data-state="unchecked"] {
-      --tw-translate-x: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+      left: calc(var(--spacing) * 0);
     }
   }
-  .data-\[state\=unchecked\]\:translate-x-\[2px\] {
+  .data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state="unchecked"] {
-      --tw-translate-x: 2px;
+      --tw-translate-x: calc(var(--spacing) * 0);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2444,6 +2515,12 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-5 {
+    & svg:not([class*='size-']) {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
     & svg:not([class*='text-']) {
       color: var(--muted-foreground);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",