@jbpark/ui-kit 2.4.0 → 2.5.0

package/dist/Menu.d.mts

@@ -41,8 +41,8 @@ type ClickEventHandler = (params: {
 }) => void;
 declare const MENU_CLASSNAMES: string[];
 type SelectionMap = ReadonlyMap<React.Key, boolean>;
-declare function buildSelectionMap(items: MenuItem[], selectedKeysSet: ReadonlySet<React.Key>): SelectionMap;
-declare function findKey(menu: MenuItem, targetKeys: ReadonlySet<React.Key>): boolean;
+declare const buildSelectionMap: (items: MenuItem[], selectedKeysSet: ReadonlySet<React.Key>) => SelectionMap;
+declare const findKey: (menu: MenuItem, targetKeys: ReadonlySet<React.Key>) => boolean;
 declare const Menu: ({
   items,
   mode,

package/dist/Menu.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.mts","names":[],"sources":["../src/components/molecules/Menu/index.tsx"],"mappings":";;;UAQiB,QAAA;EACf,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,IAAA;EACA,IAAA;EACA,QAAA,GAAW,QAAA;AAAA;AAAA,UAGI,KAAA;EACf,IAAA;EACA,YAAA,GAAe,KAAA,CAAM,GAAA;EACrB,mBAAA,GAAsB,KAAA,CAAM,GAAA;EAC5B,YAAA,GAAe,YAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;IACE,QAAA;IACA,OAAA;IACA,IAAA;IACA,KAAA;EAAA;EAGF,MAAA;IACE,QAAA,GAAW,KAAA,CAAM,aAAA;IACjB,OAAA,GAAU,KAAA,CAAM,aAAA;IAChB,IAAA,GAAO,KAAA,CAAM,aAAA;IACb,KAAA,GAAQ,KAAA,CAAM,aAAA;EAAA;EAGhB,OAAA,GAAU,iBAAA;EACV,QAAA,GAAW,iBAAA;AAAA;AAAA,UAGI,SAAA,SAEb,KAAA,EACA,IAAA,CAAK,KAAA,CAAM,wBAAA;EACb,KAAA,GAAQ,QAAA;AAAA;AAAA,KAGE,iBAAA,IAAqB,MAAA;EAC/B,QAAA,EAAU,KAAA,CAAM,UAAA;EAChB,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,OAAA,EAAS,KAAA,CAAM,GAAA;EACf,IAAA,EAAM,QAAA;AAAA;AAAA,cAGK,eAAA;AAAA,KAQD,YAAA,GAAe,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,iBAE7B,iBAAA,CACd,KAAA,EAAO,QAAA,IACP,eAAA,EAAiB,WAAA,CAAY,KAAA,CAAM,GAAA,IAClC,YAAA;AAAA,iBAea,OAAA,CACd,IAAA,EAAM,QAAA,EACN,UAAA,EAAY,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAiB1B,IAAA;EAAQ,KAAA;EAAA,IAAA;EAAA,mBAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAaX,SAAA,KAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Menu.d.mts","names":[],"sources":["../src/components/molecules/Menu/index.tsx"],"mappings":";;;UAQiB,QAAA;EACf,KAAA,EAAO,KAAA,CAAM,SAAA;EACb,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,IAAA;EACA,IAAA;EACA,QAAA,GAAW,QAAA;AAAA;AAAA,UAGI,KAAA;EACf,IAAA;EACA,YAAA,GAAe,KAAA,CAAM,GAAA;EACrB,mBAAA,GAAsB,KAAA,CAAM,GAAA;EAC5B,YAAA,GAAe,YAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;IACE,QAAA;IACA,OAAA;IACA,IAAA;IACA,KAAA;EAAA;EAGF,MAAA;IACE,QAAA,GAAW,KAAA,CAAM,aAAA;IACjB,OAAA,GAAU,KAAA,CAAM,aAAA;IAChB,IAAA,GAAO,KAAA,CAAM,aAAA;IACb,KAAA,GAAQ,KAAA,CAAM,aAAA;EAAA;EAGhB,OAAA,GAAU,iBAAA;EACV,QAAA,GAAW,iBAAA;AAAA;AAAA,UAGI,SAAA,SAEb,KAAA,EACA,IAAA,CAAK,KAAA,CAAM,wBAAA;EACb,KAAA,GAAQ,QAAA;AAAA;AAAA,KAGE,iBAAA,IAAqB,MAAA;EAC/B,QAAA,EAAU,KAAA,CAAM,UAAA;EAChB,GAAA,EAAK,KAAA,CAAM,GAAA;EACX,OAAA,EAAS,KAAA,CAAM,GAAA;EACf,IAAA,EAAM,QAAA;AAAA;AAAA,cAGK,eAAA;AAAA,KAQD,YAAA,GAAe,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAEhC,iBAAA,GACX,KAAA,EAAO,QAAA,IACP,eAAA,EAAiB,WAAA,CAAY,KAAA,CAAM,GAAA,MAClC,YAAA;AAAA,cAeU,OAAA,GACX,IAAA,EAAM,QAAA,EACN,UAAA,EAAY,WAAA,CAAY,KAAA,CAAM,GAAA;AAAA,cAiB1B,IAAA;EAAQ,KAAA;EAAA,IAAA;EAAA,mBAAA;EAAA,YAAA,EAAA,aAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,YAAA;EAAA,OAAA;EAAA,QAAA,EAAA,SAAA;EAAA,GAAA;AAAA,GAaX,SAAA,KAAS,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Menu.mjs

@@ -12,7 +12,7 @@ const MENU_CLASSNAMES = [
 	"shadow-md",
 	"rounded-md"
 ];
-function buildSelectionMap(items, selectedKeysSet) {
+const buildSelectionMap = (items, selectedKeysSet) => {
 	const map = /* @__PURE__ */ new Map();
 	const dfs = (node) => {
 		const self = selectedKeysSet.has(node.key);
@@ -23,14 +23,14 @@ function buildSelectionMap(items, selectedKeysSet) {
 	};
 	items.forEach(dfs);
 	return map;
-}
-function findKey(menu, targetKeys) {
+};
+const findKey = (menu, targetKeys) => {
 	if (targetKeys.has(menu.key)) return true;
 	if (menu.children && Array.isArray(menu.children)) {
 		for (const child of menu.children) if (findKey(child, targetKeys)) return true;
 	}
 	return false;
-}
+};
 const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }) => {
 	const controlled = _selectedKeys !== void 0;
 	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys ?? []);

package/dist/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","names":[],"sources":["../src/components/molecules/Menu/index.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './Item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n    // open?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n    // open?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Props,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.MouseEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'p-0',\n  'bg-white',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport function buildSelectionMap(\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n}\n\nexport function findKey(\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n}\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const controlled = _selectedKeys !== undefined;\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState<\n    React.Key[]\n  >(defaultSelectedKeys ?? []);\n\n  const selectedKeys = controlled\n    ? (_selectedKeys as React.Key[])\n    : uncontrolledSelectedKeys;\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n\n  const onSelect = (params: {\n    domEvent: React.MouseEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    if (!controlled) {\n      setUncontrolledSelectedKeys([params.key]);\n    }\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...props}\n    >\n      {items?.map(item => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          selectedKeys={selectedKeys}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CAED;AAID,SAAgB,kBACd,OACA,iBACc;CACd,MAAM,sBAAM,IAAI,KAAyB;CAEzC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,IAAI;EAC1C,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,MAAM,CAAC,IAAI;EACrE,MAAM,aAAa,QAAQ;AAC3B,MAAI,IAAI,KAAK,KAAK,WAAW;AAC7B,SAAO;;AAGT,OAAM,QAAQ,IAAI;AAClB,QAAO;;AAGT,SAAgB,QACd,MACA,YACS;AACT,KAAI,WAAW,IAAI,KAAK,IAAI,CAC1B,QAAO;AAGT,KAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,EAC/C;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,QAAQ,OAAO,WAAW,CAC5B,QAAO;;AAKb,QAAO;;AAGT,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,EAAE,EACxB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,aAAa,kBAAkB;CACrC,MAAM,CAAC,0BAA0B,+BAA+B,SAE9D,uBAAuB,EAAE,CAAC;CAE5B,MAAM,eAAe,aAChB,gBACD;CAEJ,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,EAAE,CAAC,EAC5C,CAAC,aAAa,CACf;CAED,MAAM,eAAe,cACb,kBAAkB,SAAS,EAAE,EAAE,gBAAgB,EACrD,CAAC,OAAO,gBAAgB,CACzB;CAED,MAAM,YAAY,WAKZ;AACJ,MAAI,CAAC,WACH,6BAA4B,CAAC,OAAO,IAAI,CAAC;AAE3C,cAAY,OAAO;;AAGrB,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,UACD;EACD,GAAI;YAEH,OAAO,KAAI,SACV,8BAAC;GACC;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,IAAI;GACL;GACA;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;IACV,CACF;GACC"}
+{"version":3,"file":"Menu.mjs","names":[],"sources":["../src/components/molecules/Menu/index.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './Item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n    // open?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n    // open?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Props,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.MouseEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'p-0',\n  'bg-white',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const controlled = _selectedKeys !== undefined;\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState<\n    React.Key[]\n  >(defaultSelectedKeys ?? []);\n\n  const selectedKeys = controlled\n    ? (_selectedKeys as React.Key[])\n    : uncontrolledSelectedKeys;\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n\n  const onSelect = (params: {\n    domEvent: React.MouseEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    if (!controlled) {\n      setUncontrolledSelectedKeys([params.key]);\n    }\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...props}\n    >\n      {items?.map(item => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          selectedKeys={selectedKeys}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CAED;AAID,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,KAAyB;CAEzC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,IAAI;EAC1C,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,MAAM,CAAC,IAAI;EACrE,MAAM,aAAa,QAAQ;AAC3B,MAAI,IAAI,KAAK,KAAK,WAAW;AAC7B,SAAO;;AAGT,OAAM,QAAQ,IAAI;AAClB,QAAO;;AAGT,MAAa,WACX,MACA,eACY;AACZ,KAAI,WAAW,IAAI,KAAK,IAAI,CAC1B,QAAO;AAGT,KAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,EAC/C;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,QAAQ,OAAO,WAAW,CAC5B,QAAO;;AAKb,QAAO;;AAGT,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,EAAE,EACxB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,aAAa,kBAAkB;CACrC,MAAM,CAAC,0BAA0B,+BAA+B,SAE9D,uBAAuB,EAAE,CAAC;CAE5B,MAAM,eAAe,aAChB,gBACD;CAEJ,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,EAAE,CAAC,EAC5C,CAAC,aAAa,CACf;CAED,MAAM,eAAe,cACb,kBAAkB,SAAS,EAAE,EAAE,gBAAgB,EACrD,CAAC,OAAO,gBAAgB,CACzB;CAED,MAAM,YAAY,WAKZ;AACJ,MAAI,CAAC,WACH,6BAA4B,CAAC,OAAO,IAAI,CAAC;AAE3C,cAAY,OAAO;;AAGrB,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,UACD;EACD,GAAI;YAEH,OAAO,KAAI,SACV,8BAAC;GACC;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,IAAI;GACL;GACA;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;IACV,CACF;GACC"}

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

@@ -10,8 +10,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Core = Button$1;
 const variantClasses = {
 	solid: "",
-	outlined: cn("border border-[rgb(var(--btn-border)/0.5)]", "bg-background text-foreground", "hover:bg-accent"),
-	dashed: cn("border border-dashed border-[rgb(var(--btn-border)/0.5)]", "bg-background text-foreground", "hover:bg-accent"),
+	outlined: cn("border border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]", "bg-background text-foreground", "hover:bg-accent"),
+	dashed: cn("border border-dashed border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]", "bg-background text-foreground", "hover:bg-accent"),
 	filled: cn("bg-muted text-foreground", "hover:bg-muted/80"),
 	text: cn("bg-transparent text-foreground", "hover:bg-accent"),
 	link: cn("bg-transparent text-primary", "underline-offset-4 hover:underline", "hover:bg-primary/10")
@@ -54,7 +54,7 @@ const Button = ({ icon, className, type = "default", variant, size = "middle", c
 			"active:bg-(--btn-bg-active)",
 			"text-(--btn-fg)",
 			"border-(--btn-border)"
-		] : ["text-(--btn-bg)", "border-[rgb(var(--btn-border)/0.5)]"]), className),
+		] : ["text-(--btn-bg)", "border-[color-mix(in_oklch,var(--btn-border),transparent_50%)]"]), className),
 		onMouseDown: (e) => {
 			e.preventDefault();
 			onMouseDown?.(e);

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' | '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"}
+{"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-[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"}

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

@@ -36,7 +36,7 @@ declare const Skeleton: {
     height,
     children,
     ...props
-  }: Props): string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+  }: Props): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | null | undefined;
   Button: ({
     className,
     ...props

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"mappings":";;;;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAA;;;;;;;;;;;;;;;KAeH,KAAA,wCAAK,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/Skeleton/index.tsx"],"mappings":";;;;;;UAYiB,KAAA,SAAc,KAAA,CAAM,wBAAA;EACnC,MAAA;EACA,OAAA;EACA,MAAA;EACA,IAAA;EACA,KAAA;EACA,GAAA;EACA,SAAA;EACA,KAAA;EACA,MAAA;EACA,UAAA;IACE,OAAA;IACA,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAUE,QAAA;EAAA;;;;;;;;;;;;;;;KAeH,KAAA,wCAAK,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,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"}

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

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

@@ -11,17 +11,21 @@ const { Switch: Core } = switch_exports;
 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"
+		track: "h-8! w-12!",
+		handle: "size-6!",
+		handleChecked: "data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-26px)]",
+		fontSize: "text-xs",
+		marginChecked: "mr-7 ml-2",
+		marginUnchecked: "mr-2 ml-7"
 	},
 	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"
+		track: "h-6! w-10!",
+		handle: "size-5!",
+		handleChecked: "data-[state=unchecked]:left-0.5 data-[state=checked]:left-[calc(100%-22px)]",
+		fontSize: "text-[10px]",
+		marginChecked: "mr-6 ml-1.5",
+		marginUnchecked: "mr-1.5 ml-6"
 	}
 };
 const Switch = ({ className, classNames, size = "medium", defaultChecked, checked: _checked, onChange: _onChange = () => {}, checkedChildren, unCheckedChildren, ...props }) => {
@@ -37,18 +41,15 @@ const Switch = ({ className, classNames, size = "medium", defaultChecked, checke
 	return /* @__PURE__ */ jsx(Core, {
 		checked,
 		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),
+		className: cn("relative", config.track, hasChildren && "w-auto! overflow-hidden", className, classNames?.track),
+		handleClassName: cn(config.handle, "!absolute top-1/2 !-translate-y-1/2 !translate-x-0", "transition-[left] duration-200 will-change-[left]", config.handleChecked, classNames?.handle),
 		onCheckedChange: (checked) => {
 			onChange(checked);
 		},
 		...props,
 		children: hasChildren && /* @__PURE__ */ jsxs("span", {
-			className: cn("grid leading-none text-white transition-[margin] duration-200", config.fontSize, checked ? config.marginChecked : config.marginUnchecked),
+			className: cn(`grid leading-none text-white transition-[margin] duration-200
+            will-change-[margin]`, 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

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

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

@@ -40,7 +40,7 @@ declare const List: {
     classNames,
     renderItem,
     ...props
-  }: Props<T>): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element;
+  }: Props<T>): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;
   Item: ({
     children,
     className,

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/List/index.tsx"],"mappings":";;;;;;UAWU,KAAA,YAAiB,IAAA,CACzB,KAAA,CAAM,wBAAA;EAGN,OAAA;EACA,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA;EAC1C,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,UAAA;IACE,KAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,MAAA;IACE,OAAA;IACA,OAAA;IACA,MAAA,GAAS,KAAA,CAAM,SAAA;IACf,OAAA,GAAU,wBAAA;IACV,IAAA;EAAA;EAEF,IAAA,GAAO,CAAA;EACP,UAAA,IAAc,IAAA,EAAM,CAAA,EAAG,KAAA,aAAkB,KAAA,CAAM,SAAA;AAAA;AAAA,cAG3C,IAAA;EAAA;IAAS,OAAA;IAAA,WAAA;IAAA,MAAA;IAAA,MAAA;IAAA,KAAA;IAAA,KAAA;IAAA,MAAA;IAAA,IAAA;IAAA,SAAA;IAAA,UAAA;IAAA,UAAA;IAAA,GAAA;EAAA,GAaZ,KAAA,CAAM,CAAA,sCAAE,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/organisms/List/index.tsx"],"mappings":";;;;;;UAWU,KAAA,YAAiB,IAAA,CACzB,KAAA,CAAM,wBAAA;EAGN,OAAA;EACA,WAAA,GAAc,KAAA,CAAM,cAAA,QAAsB,QAAA;EAC1C,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,UAAA;IACE,KAAA;IACA,MAAA;IACA,IAAA;EAAA;EAEF,MAAA;IACE,OAAA;IACA,OAAA;IACA,MAAA,GAAS,KAAA,CAAM,SAAA;IACf,OAAA,GAAU,wBAAA;IACV,IAAA;EAAA;EAEF,IAAA,GAAO,CAAA;EACP,UAAA,IAAc,IAAA,EAAM,CAAA,EAAG,KAAA,aAAkB,KAAA,CAAM,SAAA;AAAA;AAAA,cAG3C,IAAA;EAAA;IAAS,OAAA;IAAA,WAAA;IAAA,MAAA;IAAA,MAAA;IAAA,KAAA;IAAA,KAAA;IAAA,MAAA;IAAA,IAAA;IAAA,SAAA;IAAA,UAAA;IAAA,UAAA;IAAA,GAAA;EAAA,GAaZ,KAAA,CAAM,CAAA,sCAAE,kBAAA,CAAA,GAAA,CAAA,OAAA,GAAA,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"}

package/dist/index.d.mts

@@ -27,4 +27,8 @@ import { Swiper } from "./components/organisms/Swiper/index.mjs";
 import "./components/organisms/index.mjs";
 import { Layout } from "./components/templates/Layout/index.mjs";
 import "./components/templates/index.mjs";
-export { Button, Card, Checkbox, Collapse, ColorPicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Swiper, Switch, Typography };
+import { ThemeConfig, ThemeToken } from "./providers/ConfigProvider/types.mjs";
+import { useConfig } from "./providers/ConfigProvider/ConfigContext.mjs";
+import { ConfigProvider, Props } from "./providers/ConfigProvider/index.mjs";
+import "./providers/index.mjs";
+export { Button, Card, Checkbox, Collapse, ColorPicker, ConfigProvider, Props as ConfigProviderProps, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Swiper, Switch, ThemeConfig, ThemeToken, Typography, useConfig };

package/dist/index.mjs

@@ -28,5 +28,8 @@ import Swiper from "./components/organisms/Swiper/index.mjs";
 import "./components/organisms/index.mjs";
 import Layout from "./components/templates/Layout/index.mjs";
 import "./components/templates/index.mjs";
+import { useConfig } from "./providers/ConfigProvider/ConfigContext.mjs";
+import ConfigProvider from "./providers/ConfigProvider/index.mjs";
+import "./providers/index.mjs";
 
-export { Button, Card, Checkbox, Collapse, ColorPicker, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Swiper, Switch, Typography };
+export { Button, Card, Checkbox, Collapse, ColorPicker, ConfigProvider, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Swiper, Switch, Typography, useConfig };

package/dist/providers/ConfigProvider/ConfigContext.d.mts

@@ -0,0 +1,8 @@
+import { ConfigContextValue } from "./types.mjs";
+import "react";
+
+//#region src/providers/ConfigProvider/ConfigContext.d.ts
+declare const useConfig: () => ConfigContextValue;
+//#endregion
+export { useConfig };
+//# sourceMappingURL=ConfigContext.d.mts.map

package/dist/providers/ConfigProvider/ConfigContext.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigContext.d.mts","names":[],"sources":["../../../src/providers/ConfigProvider/ConfigContext.ts"],"mappings":";;;;cAUa,SAAA,QAAS,kBAAA"}

package/dist/providers/ConfigProvider/ConfigContext.mjs

@@ -0,0 +1,11 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/providers/ConfigProvider/ConfigContext.ts
+const ConfigContext = createContext({ theme: {} });
+const useConfig = () => useContext(ConfigContext);
+
+//#endregion
+export { ConfigContext, useConfig };
+//# sourceMappingURL=ConfigContext.mjs.map

package/dist/providers/ConfigProvider/ConfigContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigContext.mjs","names":[],"sources":["../../../src/providers/ConfigProvider/ConfigContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type { ConfigContextValue } from './types';\n\nexport const ConfigContext = createContext<ConfigContextValue>({\n  theme: {},\n});\n\nexport const useConfig = () => useContext(ConfigContext);\n"],"mappings":";;;;;AAMA,MAAa,gBAAgB,cAAkC,EAC7D,OAAO,EAAE,EACV,CAAC;AAEF,MAAa,kBAAkB,WAAW,cAAc"}

package/dist/providers/ConfigProvider/index.d.mts

@@ -0,0 +1,18 @@
+import { ThemeConfig, ThemeToken } from "./types.mjs";
+import { useConfig } from "./ConfigContext.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/providers/ConfigProvider/index.d.ts
+interface Props {
+  theme?: ThemeConfig;
+  className?: string;
+  children: React.ReactNode;
+}
+declare const ConfigProvider: ({
+  theme,
+  className,
+  children
+}: Props) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ConfigProvider, type Props };
+//# sourceMappingURL=index.d.mts.map

package/dist/providers/ConfigProvider/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../src/providers/ConfigProvider/index.tsx"],"mappings":";;;;;UAmDU,KAAA;EACR,KAAA,GAAQ,WAAA;EACR,SAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGZ,cAAA;EAAkB,KAAA;EAAA,SAAA;EAAA;AAAA,GAAqC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/providers/ConfigProvider/index.mjs

@@ -0,0 +1,67 @@
+'use client';
+
+import { cn } from "../../utils.mjs";
+import { ConfigContext, useConfig } from "./ConfigContext.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/providers/ConfigProvider/index.tsx
+const tokenToCssVar = {
+	colorPrimary: "--primary",
+	colorPrimaryForeground: "--primary-foreground",
+	colorBackground: "--background",
+	colorForeground: "--foreground",
+	colorCard: "--card",
+	colorCardForeground: "--card-foreground",
+	colorPopover: "--popover",
+	colorPopoverForeground: "--popover-foreground",
+	colorSecondary: "--secondary",
+	colorSecondaryForeground: "--secondary-foreground",
+	colorMuted: "--muted",
+	colorMutedForeground: "--muted-foreground",
+	colorAccent: "--accent",
+	colorAccentForeground: "--accent-foreground",
+	colorDestructive: "--destructive",
+	colorBorder: "--border",
+	colorInput: "--input",
+	colorRing: "--ring",
+	borderRadius: "--radius"
+};
+const buildCssVars = (token) => {
+	if (!token) return {};
+	const vars = {};
+	for (const [key, value] of Object.entries(token)) {
+		if (value === void 0) continue;
+		const cssVar = tokenToCssVar[key];
+		if (cssVar) vars[cssVar] = value;
+	}
+	return vars;
+};
+const ConfigProvider = ({ theme = {}, className, children }) => {
+	const parent = useConfig();
+	const mergedTheme = useMemo(() => ({
+		...parent.theme,
+		...theme,
+		token: {
+			...parent.theme.token,
+			...theme.token
+		}
+	}), [parent.theme, theme]);
+	const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);
+	const cssVars = useMemo(() => buildCssVars(mergedTheme.token), [mergedTheme.token]);
+	const hasCssVars = Object.keys(cssVars).length > 0;
+	const hasDarkMode = mergedTheme.dark !== void 0;
+	const needsWrapper = hasCssVars || hasDarkMode || className;
+	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
+		value: contextValue,
+		children: needsWrapper ? /* @__PURE__ */ jsx("div", {
+			className: cn(mergedTheme.dark && "dark", className),
+			style: hasCssVars ? cssVars : void 0,
+			children
+		}) : children
+	});
+};
+
+//#endregion
+export { ConfigProvider as default };
+//# sourceMappingURL=index.mjs.map

package/dist/providers/ConfigProvider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/providers/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { ConfigContext, useConfig } from './ConfigContext';\nimport type { ThemeConfig, ThemeToken } from './types';\n\nconst tokenToCssVar: Record<keyof ThemeToken, string> = {\n  colorPrimary: '--primary',\n  colorPrimaryForeground: '--primary-foreground',\n  colorBackground: '--background',\n  colorForeground: '--foreground',\n  colorCard: '--card',\n  colorCardForeground: '--card-foreground',\n  colorPopover: '--popover',\n  colorPopoverForeground: '--popover-foreground',\n  colorSecondary: '--secondary',\n  colorSecondaryForeground: '--secondary-foreground',\n  colorMuted: '--muted',\n  colorMutedForeground: '--muted-foreground',\n  colorAccent: '--accent',\n  colorAccentForeground: '--accent-foreground',\n  colorDestructive: '--destructive',\n  colorBorder: '--border',\n  colorInput: '--input',\n  colorRing: '--ring',\n  borderRadius: '--radius',\n};\n\nconst buildCssVars = (token?: ThemeToken): React.CSSProperties => {\n  if (!token) {\n    return {};\n  }\n\n  const vars: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(token)) {\n    if (value === undefined) {\n      continue;\n    }\n    const cssVar = tokenToCssVar[key as keyof ThemeToken];\n    if (cssVar) {\n      vars[cssVar] = value;\n    }\n  }\n\n  return vars as React.CSSProperties;\n};\n\ninterface Props {\n  theme?: ThemeConfig;\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst ConfigProvider = ({ theme = {}, className, children }: Props) => {\n  const parent = useConfig();\n\n  const mergedTheme = useMemo<ThemeConfig>(\n    () => ({\n      ...parent.theme,\n      ...theme,\n      token: {\n        ...parent.theme.token,\n        ...theme.token,\n      },\n    }),\n    [parent.theme, theme],\n  );\n\n  const contextValue = useMemo(() => ({ theme: mergedTheme }), [mergedTheme]);\n\n  const cssVars = useMemo(\n    () => buildCssVars(mergedTheme.token),\n    [mergedTheme.token],\n  );\n\n  const hasCssVars = Object.keys(cssVars).length > 0;\n  const hasDarkMode = mergedTheme.dark !== undefined;\n  const needsWrapper = hasCssVars || hasDarkMode || className;\n\n  return (\n    <ConfigContext.Provider value={contextValue}>\n      {needsWrapper ? (\n        <div\n          className={cn(mergedTheme.dark && 'dark', className)}\n          style={hasCssVars ? cssVars : undefined}\n        >\n          {children}\n        </div>\n      ) : (\n        children\n      )}\n    </ConfigContext.Provider>\n  );\n};\n\nexport default ConfigProvider;\nexport { useConfig };\nexport type { Props, ThemeConfig, ThemeToken };\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAkD;CACtD,cAAc;CACd,wBAAwB;CACxB,iBAAiB;CACjB,iBAAiB;CACjB,WAAW;CACX,qBAAqB;CACrB,cAAc;CACd,wBAAwB;CACxB,gBAAgB;CAChB,0BAA0B;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,kBAAkB;CAClB,aAAa;CACb,YAAY;CACZ,WAAW;CACX,cAAc;CACf;AAED,MAAM,gBAAgB,UAA4C;AAChE,KAAI,CAAC,MACH,QAAO,EAAE;CAGX,MAAM,OAA+B,EAAE;AAEvC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,UAAU,OACZ;EAEF,MAAM,SAAS,cAAc;AAC7B,MAAI,OACF,MAAK,UAAU;;AAInB,QAAO;;AAST,MAAM,kBAAkB,EAAE,QAAQ,EAAE,EAAE,WAAW,eAAsB;CACrE,MAAM,SAAS,WAAW;CAE1B,MAAM,cAAc,eACX;EACL,GAAG,OAAO;EACV,GAAG;EACH,OAAO;GACL,GAAG,OAAO,MAAM;GAChB,GAAG,MAAM;GACV;EACF,GACD,CAAC,OAAO,OAAO,MAAM,CACtB;CAED,MAAM,eAAe,eAAe,EAAE,OAAO,aAAa,GAAG,CAAC,YAAY,CAAC;CAE3E,MAAM,UAAU,cACR,aAAa,YAAY,MAAM,EACrC,CAAC,YAAY,MAAM,CACpB;CAED,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,SAAS;CACjD,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,eAAe,cAAc,eAAe;AAElD,QACE,oBAAC,cAAc;EAAS,OAAO;YAC5B,eACC,oBAAC;GACC,WAAW,GAAG,YAAY,QAAQ,QAAQ,UAAU;GACpD,OAAO,aAAa,UAAU;GAE7B;IACG,GAEN;GAEqB"}

package/dist/providers/ConfigProvider/types.d.mts

@@ -0,0 +1,32 @@
+//#region src/providers/ConfigProvider/types.d.ts
+interface ThemeToken {
+  colorPrimary?: string;
+  colorPrimaryForeground?: string;
+  colorBackground?: string;
+  colorForeground?: string;
+  colorCard?: string;
+  colorCardForeground?: string;
+  colorPopover?: string;
+  colorPopoverForeground?: string;
+  colorSecondary?: string;
+  colorSecondaryForeground?: string;
+  colorMuted?: string;
+  colorMutedForeground?: string;
+  colorAccent?: string;
+  colorAccentForeground?: string;
+  colorDestructive?: string;
+  colorBorder?: string;
+  colorInput?: string;
+  colorRing?: string;
+  borderRadius?: string;
+}
+interface ThemeConfig {
+  token?: ThemeToken;
+  dark?: boolean;
+}
+interface ConfigContextValue {
+  theme: ThemeConfig;
+}
+//#endregion
+export { ConfigContextValue, ThemeConfig, ThemeToken };
+//# sourceMappingURL=types.d.mts.map

package/dist/providers/ConfigProvider/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/ConfigProvider/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EAGA,YAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EACR,IAAA;AAAA;AAAA,UAGe,kBAAA;EACf,KAAA,EAAO,WAAA;AAAA"}

package/dist/providers/index.d.mts

@@ -0,0 +1,3 @@
+import { ThemeConfig, ThemeToken } from "./ConfigProvider/types.mjs";
+import { useConfig } from "./ConfigProvider/ConfigContext.mjs";
+import { ConfigProvider, Props } from "./ConfigProvider/index.mjs";

package/dist/providers/index.mjs

@@ -0,0 +1,4 @@
+import { useConfig } from "./ConfigProvider/ConfigContext.mjs";
+import ConfigProvider from "./ConfigProvider/index.mjs";
+
+export {  };

package/dist/style.css

@@ -353,17 +353,17 @@
   .mt-auto {
     margin-top: auto;
   }
-  .mr-0\.5 {
-    margin-right: calc(var(--spacing) * 0.5);
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
   }
-  .mr-1 {
-    margin-right: calc(var(--spacing) * 1);
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
   }
-  .mr-3\.5 {
-    margin-right: calc(var(--spacing) * 3.5);
+  .mr-6 {
+    margin-right: calc(var(--spacing) * 6);
   }
-  .mr-4\.5 {
-    margin-right: calc(var(--spacing) * 4.5);
+  .mr-7 {
+    margin-right: calc(var(--spacing) * 7);
   }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
@@ -371,20 +371,20 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-  .ml-0\.5 {
-    margin-left: calc(var(--spacing) * 0.5);
+  .ml-1\.5 {
+    margin-left: calc(var(--spacing) * 1.5);
   }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
-  .ml-3\.5 {
-    margin-left: calc(var(--spacing) * 3.5);
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
   }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
-  .ml-4\.5 {
-    margin-left: calc(var(--spacing) * 4.5);
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
+  .ml-7 {
+    margin-left: calc(var(--spacing) * 7);
   }
   .box-content {
     box-sizing: content-box;
@@ -428,10 +428,18 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5\! {
+    width: calc(var(--spacing) * 5) !important;
+    height: calc(var(--spacing) * 5) !important;
+  }
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-6\! {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -456,9 +464,15 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
+  .h-6\! {
+    height: calc(var(--spacing) * 6) !important;
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-8\! {
+    height: calc(var(--spacing) * 8) !important;
+  }
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
@@ -495,9 +509,15 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
+  .w-10\! {
+    width: calc(var(--spacing) * 10) !important;
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-12\! {
+    width: calc(var(--spacing) * 12) !important;
+  }
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
@@ -835,8 +855,11 @@
   .border-\(--btn-border\) {
     border-color: var(--btn-border);
   }
-  .border-\[rgb\(var\(--btn-border\)\/0\.5\)\] {
-    border-color: rgb(var(--btn-border)/0.5);
+  .border-\[color-mix\(in_oklch\,var\(--btn-border\)\,transparent_50\%\)\] {
+    border-color: var(--btn-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklch,var(--btn-border),transparent 50%);
+    }
   }
   .border-current {
     border-color: currentcolor;
@@ -1046,11 +1069,8 @@
     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;
+  .text-\[10px\] {
+    font-size: 10px;
   }
   .leading-5\.75 {
     --tw-leading: calc(var(--spacing) * 5.75);
@@ -1255,6 +1275,12 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .will-change-\[left\] {
+    will-change: left;
+  }
+  .will-change-\[margin\] {
+    will-change: margin;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2135,14 +2161,14 @@
       }
     }
   }
-  .data-\[state\=checked\]\:left-\[calc\(100\%-12px\)\] {
+  .data-\[state\=checked\]\:left-\[calc\(100\%-22px\)\] {
     &[data-state="checked"] {
-      left: calc(100% - 12px);
+      left: calc(100% - 22px);
     }
   }
-  .data-\[state\=checked\]\:left-\[calc\(100\%-16px\)\] {
+  .data-\[state\=checked\]\:left-\[calc\(100\%-26px\)\] {
     &[data-state="checked"] {
-      left: calc(100% - 16px);
+      left: calc(100% - 26px);
     }
   }
   .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
@@ -2176,9 +2202,9 @@
       color: var(--muted-foreground);
     }
   }
-  .data-\[state\=unchecked\]\:left-0 {
+  .data-\[state\=unchecked\]\:left-0\.5 {
     &[data-state="unchecked"] {
-      left: calc(var(--spacing) * 0);
+      left: calc(var(--spacing) * 0.5);
     }
   }
   .data-\[state\=unchecked\]\:translate-x-0 {
@@ -2746,69 +2772,53 @@
   }
   [data-slot='button'][data-color='default'] {
     --btn-bg: var(--muted);
-    --btn-border: 107 114 128;
+    --btn-border: var(--muted-foreground);
   }
   [data-slot='button'][data-color='primary'] {
     --btn-bg: var(--primary);
-    --btn-border: var(--primary);
     --btn-fg: var(--primary-foreground);
   }
   [data-slot='button'][data-color='danger'] {
     --btn-bg: var(--destructive);
-    --btn-border: 239 68 68;
-    --btn-fg: white;
   }
   [data-slot='button'][data-color='blue'] {
     --btn-bg: #3b82f6;
-    --btn-border: 59 130 246;
   }
   [data-slot='button'][data-color='purple'] {
     --btn-bg: #a855f7;
-    --btn-border: 168 85 247;
   }
   [data-slot='button'][data-color='cyan'] {
     --btn-bg: #06b6d4;
-    --btn-border: 6 182 212;
   }
   [data-slot='button'][data-color='green'] {
     --btn-bg: #22c55e;
-    --btn-border: 34 197 94;
   }
   [data-slot='button'][data-color='magenta'] {
     --btn-bg: #d946ef;
-    --btn-border: 217 70 239;
   }
   [data-slot='button'][data-color='pink'] {
     --btn-bg: #ec4899;
-    --btn-border: 236 72 153;
   }
   [data-slot='button'][data-color='red'] {
     --btn-bg: #ef4444;
-    --btn-border: 239 68 68;
   }
   [data-slot='button'][data-color='orange'] {
     --btn-bg: #f97316;
-    --btn-border: 249 115 22;
   }
   [data-slot='button'][data-color='yellow'] {
     --btn-bg: #eab308;
-    --btn-border: 234 179 8;
   }
   [data-slot='button'][data-color='volcano'] {
     --btn-bg: #ea580c;
-    --btn-border: 234 88 12;
   }
   [data-slot='button'][data-color='geekblue'] {
     --btn-bg: #6366f1;
-    --btn-border: 99 102 241;
   }
   [data-slot='button'][data-color='lime'] {
     --btn-bg: #84cc16;
-    --btn-border: 132 204 22;
   }
   [data-slot='button'][data-color='gold'] {
     --btn-bg: #f59e0b;
-    --btn-border: 245 158 11;
   }
 }
 @property --tw-translate-x {

package/dist/utils.d.mts

@@ -2,8 +2,8 @@ import * as React$1 from "react";
 import { ClassValue } from "clsx";
 
 //#region src/lib/utils/index.d.ts
-declare function cn(...inputs: ClassValue[]): string;
-declare function renderConditional<T extends React$1.ReactNode>(value: T, wrapper?: (value: NonNullable<T>) => React$1.ReactNode): React$1.ReactNode;
+declare const cn: (...inputs: ClassValue[]) => string;
+declare const renderConditional: <T extends React$1.ReactNode>(value: T, wrapper?: (value: NonNullable<T>) => React$1.ReactNode) => React$1.ReactNode;
 //#endregion
 export { cn, renderConditional };
 //# sourceMappingURL=utils.d.mts.map

package/dist/utils.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.mts","names":[],"sources":["../src/lib/utils/index.ts"],"mappings":";;;;iBAKgB,EAAA,CAAA,GAAM,MAAA,EAAQ,UAAA;AAAA,iBAId,iBAAA,WAA4B,OAAA,CAAM,SAAA,CAAA,CAChD,KAAA,EAAO,CAAA,EACP,OAAA,IAAW,KAAA,EAAO,WAAA,CAAY,CAAA,MAAO,OAAA,CAAM,SAAA,GAC1C,OAAA,CAAM,SAAA"}
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../src/lib/utils/index.ts"],"mappings":";;;;cAKa,EAAA,MAAS,MAAA,EAAQ,UAAA;AAAA,cAIjB,iBAAA,aAA+B,OAAA,CAAM,SAAA,EAChD,KAAA,EAAO,CAAA,EACP,OAAA,IAAW,KAAA,EAAO,WAAA,CAAY,CAAA,MAAO,OAAA,CAAM,SAAA,KAC1C,OAAA,CAAM,SAAA"}

package/dist/utils.mjs

@@ -3,14 +3,14 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 //#region src/lib/utils/index.ts
-function cn(...inputs) {
+const cn = (...inputs) => {
 	return twMerge(clsx(inputs));
-}
-function renderConditional(value, wrapper) {
+};
+const renderConditional = (value, wrapper) => {
 	if (value === null || value === void 0) return null;
 	if (React$1.isValidElement(value)) return value;
 	return wrapper ? wrapper(value) : value;
-}
+};
 
 //#endregion
 export { cn, renderConditional };

package/dist/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":["React"],"sources":["../src/lib/utils/index.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function renderConditional<T extends React.ReactNode>(\n  value: T,\n  wrapper?: (value: NonNullable<T>) => React.ReactNode,\n): React.ReactNode {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (React.isValidElement(value)) {\n    return value;\n  }\n\n  return wrapper ? wrapper(value as NonNullable<T>) : value;\n}\n"],"mappings":";;;;;AAKA,SAAgB,GAAG,GAAG,QAAsB;AAC1C,QAAO,QAAQ,KAAK,OAAO,CAAC;;AAG9B,SAAgB,kBACd,OACA,SACiB;AACjB,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO;AAGT,KAAIA,QAAM,eAAe,MAAM,CAC7B,QAAO;AAGT,QAAO,UAAU,QAAQ,MAAwB,GAAG"}
+{"version":3,"file":"utils.mjs","names":["React"],"sources":["../src/lib/utils/index.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n\nexport const renderConditional = <T extends React.ReactNode>(\n  value: T,\n  wrapper?: (value: NonNullable<T>) => React.ReactNode,\n): React.ReactNode => {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (React.isValidElement(value)) {\n    return value;\n  }\n\n  return wrapper ? wrapper(value as NonNullable<T>) : value;\n};\n"],"mappings":";;;;;AAKA,MAAa,MAAM,GAAG,WAAyB;AAC7C,QAAO,QAAQ,KAAK,OAAO,CAAC;;AAG9B,MAAa,qBACX,OACA,YACoB;AACpB,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO;AAGT,KAAIA,QAAM,eAAe,MAAM,CAC7B,QAAO;AAGT,QAAO,UAAU,QAAQ,MAAwB,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.4.0",
+  "version": "2.5.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",