@jbpark/ui-kit 5.1.0 → 5.2.0

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

@@ -4,9 +4,9 @@ import { cn } from "../../../utils.mjs";
 import { checkbox_exports } from "../../../core/checkbox.mjs";
 import { label_exports } from "../../../core/label.mjs";
 import { Square, SquareCheck } from "lucide-react";
-import { useId } from "react";
+import { useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useControllableState } from "@jbpark/use-hooks";
+import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/checkbox/checkbox.tsx
 const { Checkbox: CoreCheckbox } = checkbox_exports;
@@ -24,6 +24,14 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 		if (disabled) return;
 		setChecked(next);
 	};
+	const iconTriggerRef = useRef(null);
+	useKeyPress(["Enter", "space"], (event) => {
+		event.preventDefault();
+		onChange(!checked);
+	}, {
+		target: iconTriggerRef,
+		enabled: !!icons && !disabled
+	});
 	const renderContent = icons ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx("input", {
 			id,
@@ -38,6 +46,7 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 			}
 		}),
 		/* @__PURE__ */ jsx("span", {
+			ref: iconTriggerRef,
 			role: "checkbox",
 			"aria-checked": checked,
 			"aria-disabled": disabled,
@@ -46,12 +55,6 @@ const Checkbox = ({ placement = "left", value: _value = "", children, className,
 			onClick: () => {
 				onChange(!checked);
 			},
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					onChange(!checked);
-				}
-			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(SquareCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Square, {})
 		}),
 		children && /* @__PURE__ */ jsx("label", {

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onChange(!checked);\n          }\n        }}\n      >\n        {checked\n          ? (icons.checked ?? <SquareCheck />)\n          : (icons.unchecked ?? <Square />)}\n      </span>\n      {children && (\n        <label\n          className={cn(cursorClassName, disabled && 'opacity-50')}\n          htmlFor={id}\n        >\n          {children}\n        </label>\n      )}\n    </>\n  ) : (\n    <>\n      <CoreCheckbox\n        id={id}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        className={cn(cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;EACX,CAAC;CAEF,MAAM,KAAK,OAAO;CAClB,MAAM,YAAY,OAAO,OAAO;CAEhC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,aAAW,KAAK;;CAGlB,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,CAAC,QAAQ;;GAEpB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,OAAE,gBAAgB;AAClB,cAAS,CAAC,QAAQ;;;aAIrB,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,8CACE,oBAAC;EACK;EACE;EACN,OAAO;EACE;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG"}
+{"version":3,"file":"checkbox.mjs","names":["checkbox","label"],"sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { Square, SquareCheck } from 'lucide-react';\n\nimport { checkbox, label } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport { type OptionValue } from './group';\n\nconst { Checkbox: CoreCheckbox } = checkbox;\nconst { Label: CoreLabel } = label;\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange'\n> {\n  placement?: 'left' | 'right';\n  defaultChecked?: boolean;\n  checked?: boolean;\n  value?: OptionValue;\n  /** Native form field name — participates in `FormData` when set. */\n  name?: string;\n  disabled?: boolean;\n  icons?: Partial<{ checked: React.ReactNode; unchecked: React.ReactNode }>;\n  children?: React.ReactNode;\n  onChange?: (checked: boolean) => void;\n}\n\nconst Checkbox = ({\n  placement = 'left',\n  value: _value = '',\n  children,\n  className,\n  icons,\n  disabled,\n  defaultChecked,\n  checked: _checked,\n  name,\n  onChange: _onChange = () => {},\n  ...props\n}: Props) => {\n  const [checked, setChecked] = useControllableState<boolean>({\n    value: _checked,\n    defaultValue: defaultChecked ?? false,\n    onChange: _onChange,\n  });\n\n  const id = useId();\n  const itemValue = String(_value);\n\n  const cursorClassName = disabled ? 'cursor-not-allowed' : 'cursor-pointer';\n\n  const onChange = (next: boolean) => {\n    if (disabled) {\n      return;\n    }\n\n    setChecked(next);\n  };\n\n  const iconTriggerRef = useRef<HTMLSpanElement>(null);\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onChange(!checked);\n    },\n    { target: iconTriggerRef, enabled: !!icons && !disabled },\n  );\n\n  const renderContent = icons ? (\n    <>\n      <input\n        id={id}\n        hidden\n        type=\"checkbox\"\n        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        onChange={e => {\n          onChange(e.target.checked);\n        }}\n      />\n      <span\n        ref={iconTriggerRef}\n        role=\"checkbox\"\n        aria-checked={checked}\n        aria-disabled={disabled}\n        tabIndex={disabled ? -1 : 0}\n        className={cn(cursorClassName, disabled && 'opacity-50')}\n        onClick={() => {\n          onChange(!checked);\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        name={name}\n        value={itemValue}\n        checked={checked}\n        disabled={disabled}\n        className={cn(cursorClassName)}\n        onCheckedChange={onChange}\n      />\n      {children && (\n        <CoreLabel htmlFor={id} className={cn(cursorClassName, 'text-left')}>\n          {children}\n        </CoreLabel>\n      )}\n    </>\n  );\n\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-x-2',\n        placement === 'right' && 'flex-row-reverse',\n        cursorClassName,\n        className,\n        //\n      )}\n      {...props}\n    >\n      {renderContent}\n    </div>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,EAAE,UAAU,iBAAiBA;AACnC,MAAM,EAAE,OAAO,cAAcC;AAkB7B,MAAM,YAAY,EAChB,YAAY,QACZ,OAAO,SAAS,IAChB,UACA,WACA,OACA,UACA,gBACA,SAAS,UACT,MACA,UAAU,kBAAkB,IAC5B,GAAG,YACQ;CACX,MAAM,CAAC,SAAS,cAAc,qBAA8B;EAC1D,OAAO;EACP,cAAc,kBAAkB;EAChC,UAAU;EACX,CAAC;CAEF,MAAM,KAAK,OAAO;CAClB,MAAM,YAAY,OAAO,OAAO;CAEhC,MAAM,kBAAkB,WAAW,uBAAuB;CAE1D,MAAM,YAAY,SAAkB;AAClC,MAAI,SACF;AAGF,aAAW,KAAK;;CAGlB,MAAM,iBAAiB,OAAwB,KAAK;AAEpD,aACE,CAAC,SAAS,QAAQ,GAClB,UAAS;AACP,QAAM,gBAAgB;AACtB,WAAS,CAAC,QAAQ;IAEpB;EAAE,QAAQ;EAAgB,SAAS,CAAC,CAAC,SAAS,CAAC;EAAU,CAC1D;CAED,MAAM,gBAAgB,QACpB;EACE,oBAAC;GACK;GACJ;GACA,MAAK;GACC;GACN,OAAO;GACE;GACC;GACV,WAAU,MAAK;AACb,aAAS,EAAE,OAAO,QAAQ;;IAE5B;EACF,oBAAC;GACC,KAAK;GACL,MAAK;GACL,gBAAc;GACd,iBAAe;GACf,UAAU,WAAW,KAAK;GAC1B,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,eAAe;AACb,aAAS,CAAC,QAAQ;;aAGnB,UACI,MAAM,WAAW,oBAAC,gBAAc,GAChC,MAAM,aAAa,oBAAC,WAAS;IAC7B;EACN,YACC,oBAAC;GACC,WAAW,GAAG,iBAAiB,YAAY,aAAa;GACxD,SAAS;GAER;IACK;KAET,GAEH,8CACE,oBAAC;EACK;EACE;EACN,OAAO;EACE;EACC;EACV,WAAW,GAAG,gBAAgB;EAC9B,iBAAiB;GACjB,EACD,YACC,oBAAC;EAAU,SAAS;EAAI,WAAW,GAAG,iBAAiB,YAAY;EAChE;GACS,IAEb;AAGL,QACE,oBAAC;EACC,WAAW,GACT,6BACA,cAAc,WAAW,oBACzB,iBACA,UAED;EACD,GAAI;YAEH;GACG"}

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

@@ -5,9 +5,9 @@ import { field_exports } from "../../../core/field.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
 import { Circle, CircleCheck } from "lucide-react";
-import { useContext, useId } from "react";
+import { useContext, useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useControllableState } from "@jbpark/use-hooks";
+import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 
 //#region src/components/atoms/radio/radio.tsx
 const { RadioGroup: Core, RadioGroupItem: Item } = radio_group_exports;
@@ -27,6 +27,14 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 		if (disabled) return;
 		setChecked(next);
 	};
+	const iconTriggerRef = useRef(null);
+	useKeyPress(["Enter", "space"], (event) => {
+		event.preventDefault();
+		onChange(true);
+	}, {
+		target: iconTriggerRef,
+		enabled: !!icons && !disabled
+	});
 	const renderField = /* @__PURE__ */ jsxs(Field, {
 		orientation: "horizontal",
 		className: cn("flex gap-2", placement === "right" && "flex-row-reverse"),
@@ -56,6 +64,7 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 			}
 		}),
 		/* @__PURE__ */ jsx("span", {
+			ref: iconTriggerRef,
 			role: "radio",
 			"aria-checked": checked,
 			"aria-disabled": disabled,
@@ -64,12 +73,6 @@ const Radio = ({ placement = "left", value: _value = "", children, className, ic
 			onClick: () => {
 				onChange(true);
 			},
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					onChange(true);
-				}
-			},
 			children: checked ? icons.checked ?? /* @__PURE__ */ jsx(CircleCheck, {}) : icons.unchecked ?? /* @__PURE__ */ jsx(Circle, {})
 		}),
 		children && /* @__PURE__ */ jsx("label", {

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

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

package/dist/components/molecules/dropdown.mjs

@@ -4,7 +4,7 @@ import { cn } from "../../utils.mjs";
 import Menu from "./menu/menu.mjs";
 import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useControllableState } from "@jbpark/use-hooks";
+import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 import { AnimatePresence, motion } from "motion/react";
 
 //#region src/components/molecules/dropdown.tsx
@@ -17,6 +17,17 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 	const isClickTrigger = trigger === "click";
 	const menuId = useId();
 	const containerRef = useRef(null);
+	const triggerRef = useRef(null);
+	useKeyPress("esc", () => {
+		onOpenChange(false);
+	}, { target: triggerRef });
+	useKeyPress(["Enter", "space"], (event) => {
+		event.preventDefault();
+		onOpenChange(!open);
+	}, {
+		target: triggerRef,
+		enabled: isClickTrigger
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		ref: containerRef,
@@ -32,6 +43,7 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 			onOpenChange(false);
 		},
 		children: [/* @__PURE__ */ jsx("div", {
+			ref: triggerRef,
 			role: isClickTrigger ? "button" : void 0,
 			tabIndex: isClickTrigger ? 0 : void 0,
 			"aria-haspopup": "menu",
@@ -48,16 +60,6 @@ const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange
 			onBlur: (e) => {
 				if (!containerRef.current?.contains(e.relatedTarget)) onOpenChange(false);
 			},
-			onKeyDown: (e) => {
-				if (e.key === "Escape") {
-					onOpenChange(false);
-					return;
-				}
-				if (isClickTrigger && (e.key === "Enter" || e.key === " ")) {
-					e.preventDefault();
-					onOpenChange(!open);
-				}
-			},
 			children
 		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(motion.div, {
 			className: cn("absolute top-full z-50 pt-2"),

package/dist/components/molecules/dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  open?: boolean;\n  trigger?: 'hover' | 'click';\n  menu?: MenuProps;\n  onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n  children,\n  menu,\n  trigger = 'hover',\n  open: _open,\n  onOpenChange: _onOpenChange = () => {},\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: Props) => {\n  const [open, onOpenChange] = useControllableState<boolean>({\n    value: _open,\n    defaultValue: false,\n    onChange: _onOpenChange,\n  });\n\n  const isClickTrigger = trigger === 'click';\n  const menuId = useId();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      {...props}\n      ref={containerRef}\n      className={cn(\n        'relative',\n        'inline-block cursor-pointer',\n        className,\n        //\n      )}\n      onMouseEnter={event => {\n        onMouseEnter?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(true);\n      }}\n      onMouseLeave={event => {\n        onMouseLeave?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(false);\n      }}\n    >\n      <div\n        role={isClickTrigger ? 'button' : undefined}\n        tabIndex={isClickTrigger ? 0 : undefined}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={open ? menuId : undefined}\n        onClick={() => {\n          if (!isClickTrigger) {\n            return;\n          }\n          onOpenChange(!open);\n        }}\n        onFocus={() => {\n          if (isClickTrigger) {\n            return;\n          }\n          onOpenChange(true);\n        }}\n        onBlur={e => {\n          // Without this check, moving focus from the trigger into the\n          // menu itself (e.g. via Tab) closed the dropdown before the\n          // user could ever reach it — the mouse path avoided the same\n          // bug only by way of onMouseDown's preventDefault below, which\n          // does nothing for keyboard focus. Mirrors the containment\n          // check menu/item/item.tsx already uses for the same reason.\n          if (!containerRef.current?.contains(e.relatedTarget as Node)) {\n            onOpenChange(false);\n          }\n        }}\n        onKeyDown={e => {\n          if (e.key === 'Escape') {\n            onOpenChange(false);\n            return;\n          }\n          if (isClickTrigger && (e.key === 'Enter' || e.key === ' ')) {\n            e.preventDefault();\n            onOpenChange(!open);\n          }\n        }}\n      >\n        {children}\n      </div>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            className={cn(\n              'absolute top-full z-50 pt-2',\n              //\n            )}\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.1 }}\n          >\n            <Menu\n              {...menu}\n              id={menuId}\n              onMouseDown={e => {\n                e.preventDefault();\n              }}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,WACA,cACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,MAAM,gBAAgB,qBAA8B;EACzD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CAEF,MAAM,iBAAiB,YAAY;CACnC,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,OAAuB,KAAK;AAEjD,QACE,qBAAC;EACC,GAAI;EACJ,KAAK;EACL,WAAW,GACT,YACA,+BACA,UAED;EACD,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,MAAM,iBAAiB,WAAW;GAClC,UAAU,iBAAiB,IAAI;GAC/B,iBAAc;GACd,iBAAe;GACf,iBAAe,OAAO,SAAS;GAC/B,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,eAAe;AACb,QAAI,eACF;AAEF,iBAAa,KAAK;;GAEpB,SAAQ,MAAK;AAOX,QAAI,CAAC,aAAa,SAAS,SAAS,EAAE,cAAsB,CAC1D,cAAa,MAAM;;GAGvB,YAAW,MAAK;AACd,QAAI,EAAE,QAAQ,UAAU;AACtB,kBAAa,MAAM;AACnB;;AAEF,QAAI,mBAAmB,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAM;AAC1D,OAAE,gBAAgB;AAClB,kBAAa,CAAC,KAAK;;;GAItB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,8BAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,IAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}
+{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useRef } from 'react';\n\nimport { useControllableState, useKeyPress } from '@jbpark/use-hooks';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  open?: boolean;\n  trigger?: 'hover' | 'click';\n  menu?: MenuProps;\n  onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n  children,\n  menu,\n  trigger = 'hover',\n  open: _open,\n  onOpenChange: _onOpenChange = () => {},\n  className,\n  onMouseEnter,\n  onMouseLeave,\n  ...props\n}: Props) => {\n  const [open, onOpenChange] = useControllableState<boolean>({\n    value: _open,\n    defaultValue: false,\n    onChange: _onOpenChange,\n  });\n\n  const isClickTrigger = trigger === 'click';\n  const menuId = useId();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n\n  useKeyPress(\n    'esc',\n    () => {\n      onOpenChange(false);\n    },\n    { target: triggerRef },\n  );\n\n  useKeyPress(\n    ['Enter', 'space'],\n    event => {\n      event.preventDefault();\n      onOpenChange(!open);\n    },\n    { target: triggerRef, enabled: isClickTrigger },\n  );\n\n  return (\n    <div\n      {...props}\n      ref={containerRef}\n      className={cn(\n        'relative',\n        'inline-block cursor-pointer',\n        className,\n        //\n      )}\n      onMouseEnter={event => {\n        onMouseEnter?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(true);\n      }}\n      onMouseLeave={event => {\n        onMouseLeave?.(event);\n        if (isClickTrigger) {\n          return;\n        }\n        onOpenChange(false);\n      }}\n    >\n      <div\n        ref={triggerRef}\n        role={isClickTrigger ? 'button' : undefined}\n        tabIndex={isClickTrigger ? 0 : undefined}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={open ? menuId : undefined}\n        onClick={() => {\n          if (!isClickTrigger) {\n            return;\n          }\n          onOpenChange(!open);\n        }}\n        onFocus={() => {\n          if (isClickTrigger) {\n            return;\n          }\n          onOpenChange(true);\n        }}\n        onBlur={e => {\n          // Without this check, moving focus from the trigger into the\n          // menu itself (e.g. via Tab) closed the dropdown before the\n          // user could ever reach it — the mouse path avoided the same\n          // bug only by way of onMouseDown's preventDefault below, which\n          // does nothing for keyboard focus. Mirrors the containment\n          // check menu/item/item.tsx already uses for the same reason.\n          if (!containerRef.current?.contains(e.relatedTarget as Node)) {\n            onOpenChange(false);\n          }\n        }}\n      >\n        {children}\n      </div>\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            className={cn(\n              'absolute top-full z-50 pt-2',\n              //\n            )}\n            initial={{ opacity: 0, y: -10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -10 }}\n            transition={{ duration: 0.1 }}\n          >\n            <Menu\n              {...menu}\n              id={menuId}\n              onMouseDown={e => {\n                e.preventDefault();\n              }}\n            />\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,WACA,cACA,cACA,GAAG,YACQ;CACX,MAAM,CAAC,MAAM,gBAAgB,qBAA8B;EACzD,OAAO;EACP,cAAc;EACd,UAAU;EACX,CAAC;CAEF,MAAM,iBAAiB,YAAY;CACnC,MAAM,SAAS,OAAO;CACtB,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,aAAa,OAAuB,KAAK;AAE/C,aACE,aACM;AACJ,eAAa,MAAM;IAErB,EAAE,QAAQ,YAAY,CACvB;AAED,aACE,CAAC,SAAS,QAAQ,GAClB,UAAS;AACP,QAAM,gBAAgB;AACtB,eAAa,CAAC,KAAK;IAErB;EAAE,QAAQ;EAAY,SAAS;EAAgB,CAChD;AAED,QACE,qBAAC;EACC,GAAI;EACJ,KAAK;EACL,WAAW,GACT,YACA,+BACA,UAED;EACD,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,eAAc,UAAS;AACrB,kBAAe,MAAM;AACrB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,KAAK;GACL,MAAM,iBAAiB,WAAW;GAClC,UAAU,iBAAiB,IAAI;GAC/B,iBAAc;GACd,iBAAe;GACf,iBAAe,OAAO,SAAS;GAC/B,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,eAAe;AACb,QAAI,eACF;AAEF,iBAAa,KAAK;;GAEpB,SAAQ,MAAK;AAOX,QAAI,CAAC,aAAa,SAAS,SAAS,EAAE,cAAsB,CAC1D,cAAa,MAAM;;GAItB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,8BAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,IAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}

package/dist/components/molecules/menu/item/item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"item.mjs","names":[],"sources":["../../../../../src/components/molecules/menu/item/item.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { ChevronDown } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { MENU_CLASSNAMES, MenuItem, Props } from '../menu';\nimport Label from './label';\n\ninterface ItemProps extends Props, MenuItem {\n  itemKey: React.Key;\n  keyPath: React.Key[];\n  root?: boolean;\n  index: number;\n}\nconst OFFSET: [number, number] = [8, 8];\nconst INLINE_OFFSET = 16;\n\nconst STYLES = {\n  hover: {\n    classes: ['hover:underline', 'hover:underline-offset-8'],\n  },\n  open: {\n    classes: ['underline', 'underline-offset-8'],\n  },\n} as const;\n\nconst getItemClasses = (\n  root: boolean,\n  isHorizontal: boolean,\n  isInline: boolean,\n  hasChildren: boolean,\n  customClasses?: string,\n) =>\n  cn(\n    'px-4 py-2',\n    'cursor-pointer',\n    'whitespace-nowrap',\n    root && isHorizontal ? 'inline-flex' : 'flex',\n    ...(root\n      ? [\n          'h-full',\n          'rounded-none border-transparent',\n          hasChildren && 'hover:border-current',\n          isHorizontal ? 'border-b-2' : 'border-r-2',\n          isInline && 'border-none',\n        ]\n      : ['rounded-md', ...STYLES.hover.classes]),\n    customClasses,\n  );\n\nconst Item = ({\n  itemKey,\n  keyPath,\n  root = false,\n  index,\n  mode,\n  label,\n  children,\n  selectionMap,\n  classNames,\n  styles,\n  offset = OFFSET,\n  inlineOffset = INLINE_OFFSET,\n  onClick,\n  onSelect,\n  ...props\n}: ItemProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n\n  const itemRef = useRef<HTMLLIElement | null>(null);\n\n  const isHorizontal = mode === 'horizontal';\n  const isInline = mode === 'inline';\n\n  const [left, top] = offset;\n\n  const selected = selectionMap?.get(itemKey) ?? false;\n\n  const item = {\n    ...props,\n    label,\n    key: itemKey,\n    children,\n  };\n\n  const itemClassNames = getItemClasses(\n    root,\n    isHorizontal,\n    isInline,\n    !!children?.length,\n    root ? classNames?.rootItem : classNames?.item,\n  );\n\n  const handleSelect = (domEvent: React.SyntheticEvent) => {\n    domEvent.stopPropagation();\n\n    if (isInline) {\n      setOpen(!open);\n    }\n\n    const params = {\n      domEvent,\n      key: itemKey,\n      keyPath,\n      item,\n    };\n\n    onClick?.(params);\n\n    if (!selected) {\n      onSelect?.(params);\n    }\n  };\n\n  // Roving tabindex (WAI-ARIA menu pattern): only the first item in each\n  // menu/submenu level is a Tab stop (below); arrow keys move real DOM\n  // focus between sibling <li>s within that same level, which is what\n  // ends up mattering for actual keyboard use even though — unlike a\n  // fully state-tracked implementation — focus resets to the first item\n  // if the user Tabs out and back in rather than resuming where they left\n  // off.\n  const handleKeyDown = (domEvent: React.KeyboardEvent) => {\n    if (domEvent.key === 'Enter' || domEvent.key === ' ') {\n      domEvent.preventDefault();\n      handleSelect(domEvent);\n      return;\n    }\n\n    if (domEvent.key === 'Escape') {\n      if (children?.length && open) {\n        domEvent.stopPropagation();\n        setOpen(false);\n      }\n      return;\n    }\n\n    const isNext = isHorizontal\n      ? domEvent.key === 'ArrowRight'\n      : domEvent.key === 'ArrowDown';\n    const isPrev = isHorizontal\n      ? domEvent.key === 'ArrowLeft'\n      : domEvent.key === 'ArrowUp';\n\n    if (!isNext && !isPrev) {\n      return;\n    }\n\n    domEvent.preventDefault();\n    const sibling = isNext\n      ? itemRef.current?.nextElementSibling\n      : itemRef.current?.previousElementSibling;\n    sibling?.querySelector<HTMLElement>('[role=\"menuitem\"]')?.focus();\n  };\n\n  const childrenContainerClassNames = cn(\n    isInline ? 'relative overflow-hidden' : 'absolute min-w-[200px]',\n    !isInline && root && isHorizontal\n      ? 'left-0 top-full pt-2 pl-0'\n      : !isInline\n        ? 'left-full top-0 pl-2 pt-0'\n        : 'pl-4',\n  );\n\n  const childrenContainerStyle = isInline\n    ? {\n        paddingLeft: inlineOffset,\n      }\n    : root && isHorizontal\n      ? {\n          paddingTop: top,\n        }\n      : {\n          paddingLeft: left,\n        };\n\n  return (\n    <li\n      ref={itemRef}\n      role=\"none\"\n      className={cn(\n        'group',\n        'relative',\n        root && isHorizontal ? 'inline-block' : 'block',\n      )}\n      onMouseEnter={() => {\n        if (isInline) {\n          return;\n        }\n        setOpen(true);\n      }}\n      onMouseLeave={() => {\n        if (isInline) {\n          return;\n        }\n        setOpen(false);\n      }}\n      onFocus={() => {\n        if (isInline) {\n          return;\n        }\n        setOpen(true);\n      }}\n      onBlur={e => {\n        if (isInline) {\n          return;\n        }\n        if (!itemRef.current?.contains(e.relatedTarget as Node)) {\n          setOpen(false);\n        }\n      }}\n    >\n      <div\n        role=\"menuitem\"\n        tabIndex={index === 0 ? 0 : -1}\n        aria-expanded={children?.length ? open : undefined}\n        aria-haspopup={children?.length ? 'menu' : undefined}\n        aria-current={selected ? true : undefined}\n        className={cn(\n          itemClassNames,\n          ...(selected\n            ? root\n              ? ['border-current']\n              : [...STYLES.open.classes, ...STYLES.hover.classes]\n            : root && !!children?.length\n              ? ['group-hover:border-current']\n              : []),\n          //\n        )}\n        style={root ? styles?.rootItem : styles?.item}\n        onClick={handleSelect}\n        onKeyDown={handleKeyDown}\n      >\n        <div\n          className={cn(\n            'w-full',\n            'inline-flex items-center justify-between',\n            //\n          )}\n        >\n          <Label className={cn(classNames?.label)} style={styles?.label}>\n            {label}\n          </Label>\n          {!root && !isInline && !!children?.length && (\n            <ChevronDown className={cn('-rotate-90')} />\n          )}\n          {isInline && !!children?.length && (\n            <ChevronDown\n              className={cn(\n                'transition-all',\n                open ? '-rotate-180' : 'rotate-0',\n              )}\n            />\n          )}\n        </div>\n      </div>\n      <AnimatePresence>\n        {!!children?.length && open && (\n          <motion.div\n            className={cn(\n              childrenContainerClassNames,\n              //\n            )}\n            style={childrenContainerStyle}\n            initial={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n            animate={isInline ? { height: 'auto', opacity: 1 } : { opacity: 1 }}\n            exit={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n            transition={{ duration: 0.2 }}\n          >\n            <ul\n              role=\"menu\"\n              className={cn(\n                MENU_CLASSNAMES,\n                isInline && 'shadow-none',\n                classNames?.subMenu,\n                //\n              )}\n              style={styles?.subMenu}\n            >\n              {children.map((child, childIndex) => (\n                <Item\n                  {...child}\n                  key={child.key}\n                  itemKey={child.key}\n                  keyPath={[...keyPath, child.key]}\n                  index={childIndex}\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          </motion.div>\n        )}\n      </AnimatePresence>\n    </li>\n  );\n};\n\nexport default Item;\n"],"mappings":"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"}
+{"version":3,"file":"item.mjs","names":[],"sources":["../../../../../src/components/molecules/menu/item/item.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { ChevronDown } from 'lucide-react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { MENU_CLASSNAMES, MenuItem, Props } from '../menu';\nimport Label from './label';\n\ninterface ItemProps extends Props, MenuItem {\n  itemKey: React.Key;\n  keyPath: React.Key[];\n  root?: boolean;\n  index: number;\n}\nconst OFFSET: [number, number] = [8, 8];\nconst INLINE_OFFSET = 16;\n\nconst STYLES = {\n  hover: {\n    classes: ['hover:underline', 'hover:underline-offset-8'],\n  },\n  open: {\n    classes: ['underline', 'underline-offset-8'],\n  },\n} as const;\n\nconst getItemClasses = (\n  root: boolean,\n  isHorizontal: boolean,\n  isInline: boolean,\n  hasChildren: boolean,\n  customClasses?: string,\n) =>\n  cn(\n    'px-4 py-2',\n    'cursor-pointer',\n    'whitespace-nowrap',\n    root && isHorizontal ? 'inline-flex' : 'flex',\n    ...(root\n      ? [\n          'h-full',\n          'rounded-none border-transparent',\n          hasChildren && 'hover:border-current',\n          isHorizontal ? 'border-b-2' : 'border-r-2',\n          isInline && 'border-none',\n        ]\n      : ['rounded-md', ...STYLES.hover.classes]),\n    customClasses,\n  );\n\nconst Item = ({\n  itemKey,\n  keyPath,\n  root = false,\n  index,\n  mode,\n  label,\n  children,\n  selectionMap,\n  classNames,\n  styles,\n  offset = OFFSET,\n  inlineOffset = INLINE_OFFSET,\n  onClick,\n  onSelect,\n  ...props\n}: ItemProps) => {\n  const [open, setOpen] = useState<boolean>(false);\n\n  const itemRef = useRef<HTMLLIElement | null>(null);\n\n  const isHorizontal = mode === 'horizontal';\n  const isInline = mode === 'inline';\n\n  const [left, top] = offset;\n\n  const selected = selectionMap?.get(itemKey) ?? false;\n\n  const item = {\n    ...props,\n    label,\n    key: itemKey,\n    children,\n  };\n\n  const itemClassNames = getItemClasses(\n    root,\n    isHorizontal,\n    isInline,\n    !!children?.length,\n    root ? classNames?.rootItem : classNames?.item,\n  );\n\n  const handleSelect = (domEvent: React.SyntheticEvent) => {\n    domEvent.stopPropagation();\n\n    if (isInline) {\n      setOpen(!open);\n    }\n\n    const params = {\n      domEvent,\n      key: itemKey,\n      keyPath,\n      item,\n    };\n\n    onClick?.(params);\n\n    if (!selected) {\n      onSelect?.(params);\n    }\n  };\n\n  // Roving tabindex (WAI-ARIA menu pattern): only the first item in each\n  // menu/submenu level is a Tab stop (below); arrow keys move real DOM\n  // focus between sibling <li>s within that same level, which is what\n  // ends up mattering for actual keyboard use even though — unlike a\n  // fully state-tracked implementation — focus resets to the first item\n  // if the user Tabs out and back in rather than resuming where they left\n  // off.\n  //\n  // Deliberately not `useKeyPress` (unlike dropdown.tsx's trigger and\n  // radio.tsx/checkbox.tsx's icon mode, #229's action item 5): that hook\n  // is a static combo -> handler binding, one listener per combo. This\n  // handler is a single stateful branch — Enter/Space select, Escape\n  // conditionally closes a submenu and stops the event from also closing\n  // an ancestor Dropdown, and the arrow-key branch reads `itemRef` at\n  // fire time to focus a *sibling* `<li>`. Splitting that into 3-4\n  // separate useKeyPress calls (each its own listener) per menu item\n  // wouldn't fix a bug — the existing logic is already correct — it would\n  // just multiply listeners across every item in a menu for no benefit.\n  const handleKeyDown = (domEvent: React.KeyboardEvent) => {\n    if (domEvent.key === 'Enter' || domEvent.key === ' ') {\n      domEvent.preventDefault();\n      handleSelect(domEvent);\n      return;\n    }\n\n    if (domEvent.key === 'Escape') {\n      if (children?.length && open) {\n        domEvent.stopPropagation();\n        setOpen(false);\n      }\n      return;\n    }\n\n    const isNext = isHorizontal\n      ? domEvent.key === 'ArrowRight'\n      : domEvent.key === 'ArrowDown';\n    const isPrev = isHorizontal\n      ? domEvent.key === 'ArrowLeft'\n      : domEvent.key === 'ArrowUp';\n\n    if (!isNext && !isPrev) {\n      return;\n    }\n\n    domEvent.preventDefault();\n    const sibling = isNext\n      ? itemRef.current?.nextElementSibling\n      : itemRef.current?.previousElementSibling;\n    sibling?.querySelector<HTMLElement>('[role=\"menuitem\"]')?.focus();\n  };\n\n  const childrenContainerClassNames = cn(\n    isInline ? 'relative overflow-hidden' : 'absolute min-w-[200px]',\n    !isInline && root && isHorizontal\n      ? 'left-0 top-full pt-2 pl-0'\n      : !isInline\n        ? 'left-full top-0 pl-2 pt-0'\n        : 'pl-4',\n  );\n\n  const childrenContainerStyle = isInline\n    ? {\n        paddingLeft: inlineOffset,\n      }\n    : root && isHorizontal\n      ? {\n          paddingTop: top,\n        }\n      : {\n          paddingLeft: left,\n        };\n\n  return (\n    <li\n      ref={itemRef}\n      role=\"none\"\n      className={cn(\n        'group',\n        'relative',\n        root && isHorizontal ? 'inline-block' : 'block',\n      )}\n      onMouseEnter={() => {\n        if (isInline) {\n          return;\n        }\n        setOpen(true);\n      }}\n      onMouseLeave={() => {\n        if (isInline) {\n          return;\n        }\n        setOpen(false);\n      }}\n      onFocus={() => {\n        if (isInline) {\n          return;\n        }\n        setOpen(true);\n      }}\n      onBlur={e => {\n        if (isInline) {\n          return;\n        }\n        if (!itemRef.current?.contains(e.relatedTarget as Node)) {\n          setOpen(false);\n        }\n      }}\n    >\n      <div\n        role=\"menuitem\"\n        tabIndex={index === 0 ? 0 : -1}\n        aria-expanded={children?.length ? open : undefined}\n        aria-haspopup={children?.length ? 'menu' : undefined}\n        aria-current={selected ? true : undefined}\n        className={cn(\n          itemClassNames,\n          ...(selected\n            ? root\n              ? ['border-current']\n              : [...STYLES.open.classes, ...STYLES.hover.classes]\n            : root && !!children?.length\n              ? ['group-hover:border-current']\n              : []),\n          //\n        )}\n        style={root ? styles?.rootItem : styles?.item}\n        onClick={handleSelect}\n        onKeyDown={handleKeyDown}\n      >\n        <div\n          className={cn(\n            'w-full',\n            'inline-flex items-center justify-between',\n            //\n          )}\n        >\n          <Label className={cn(classNames?.label)} style={styles?.label}>\n            {label}\n          </Label>\n          {!root && !isInline && !!children?.length && (\n            <ChevronDown className={cn('-rotate-90')} />\n          )}\n          {isInline && !!children?.length && (\n            <ChevronDown\n              className={cn(\n                'transition-all',\n                open ? '-rotate-180' : 'rotate-0',\n              )}\n            />\n          )}\n        </div>\n      </div>\n      <AnimatePresence>\n        {!!children?.length && open && (\n          <motion.div\n            className={cn(\n              childrenContainerClassNames,\n              //\n            )}\n            style={childrenContainerStyle}\n            initial={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n            animate={isInline ? { height: 'auto', opacity: 1 } : { opacity: 1 }}\n            exit={isInline ? { height: 0, opacity: 0 } : { opacity: 0 }}\n            transition={{ duration: 0.2 }}\n          >\n            <ul\n              role=\"menu\"\n              className={cn(\n                MENU_CLASSNAMES,\n                isInline && 'shadow-none',\n                classNames?.subMenu,\n                //\n              )}\n              style={styles?.subMenu}\n            >\n              {children.map((child, childIndex) => (\n                <Item\n                  {...child}\n                  key={child.key}\n                  itemKey={child.key}\n                  keyPath={[...keyPath, child.key]}\n                  index={childIndex}\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          </motion.div>\n        )}\n      </AnimatePresence>\n    </li>\n  );\n};\n\nexport default Item;\n"],"mappings":"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"}

package/dist/core/badge.d.mts

@@ -8,7 +8,7 @@ declare namespace badge_d_exports {
   export { Badge, Props, badgeVariants };
 }
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+  variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;

package/dist/core/button.d.mts

@@ -8,7 +8,7 @@ declare namespace button_d_exports {
   export { Button, Props, buttonVariants };
 }
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+  variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | null | undefined;
   size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "5.1.0",
+  "version": "5.2.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",
@@ -127,7 +127,7 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@jbpark/use-hooks": "^3.0.0",
+    "@jbpark/use-hooks": "^4.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",