@jbpark/ui-kit 10.1.0 → 10.2.0

package/dist/components/atoms/input/number.d.mts

@@ -0,0 +1,23 @@
+import { ComponentSize } from "../../../providers/config/types.mjs";
+import * as React$1 from "react";
+import { NumberField, NumberFieldRoot } from "@base-ui/react/number-field";
+//#region src/components/atoms/input/number.d.ts
+interface Props extends Omit<React$1.ComponentProps<typeof NumberField.Root>, 'children' | 'onValueChange'> {
+  /** Visible input label. Alternatively, pair `id` with an external label. */
+  label?: string;
+  /** Called with the numeric value (or null when cleared). */
+  onChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
+  placeholder?: string;
+  size?: ComponentSize;
+  classNames?: {
+    label?: string;
+    group?: string;
+    input?: string;
+    decrement?: string;
+    increment?: string;
+  };
+}
+declare const Number: ({ ref, id, label, onChange, placeholder, size, className, classNames, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: Props) => React$1.JSX.Element;
+//#endregion
+export { Props, Number as default };
+//# sourceMappingURL=number.d.mts.map

package/dist/components/atoms/input/number.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.d.mts","names":[],"sources":["../../../../src/components/atoms/input/number.tsx"],"mappings":";;;;UAmBiB,cAAc,KAC7B,QAAM,sBAAsB,YAAY;;EAIxC;;EAEA,YACE,sBACA,cAAc,gBAAgB;EAEhC;EACA,OAAO;EACP;IACE;IACA;IACA;IACA;IACA;;;cAIE,WAAU,KAAA,IAAA,OAAA,UAAA,aAAA,MAAA,WAAA,0BAAA,8BAAA,oCAAA,oBAAA,SAab,UAAK,QAAA,IAAA"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../../../utils.mjs";
+import { useConfig } from "../../../providers/config/context.mjs";
+import Button from "../../../Button.mjs";
+import Input from "./input.mjs";
+import { Minus, Plus } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/atoms/input/number.tsx
+const sizes = {
+	small: "h-8",
+	middle: "h-9",
+	large: "h-10"
+};
+const Number = ({ ref, id, label, onChange, placeholder, size, className, classNames, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) => {
+	const generatedId = React$1.useId();
+	const inputId = id ?? generatedId;
+	const { componentSize } = useConfig();
+	const resolvedSize = size ?? componentSize ?? "middle";
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		...props,
+		ref,
+		id: inputId,
+		onValueChange: onChange,
+		"data-slot": "input-number",
+		className: cn("w-full", className),
+		children: [label && /* @__PURE__ */ jsx("label", {
+			htmlFor: inputId,
+			className: cn("mb-1.5 block text-sm font-medium", classNames?.label),
+			children: label
+		}), /* @__PURE__ */ jsxs(NumberField.Group, {
+			className: cn(`border-input focus-within:border-ring focus-within:ring-ring/50 flex
+          w-full items-stretch overflow-hidden rounded-md border shadow-xs
+          focus-within:ring-[3px]`, sizes[resolvedSize], classNames?.group),
+			children: [
+				/* @__PURE__ */ jsx(NumberField.Decrement, {
+					"aria-label": "Decrease value",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small",
+						icon: /* @__PURE__ */ jsx(Minus, {}),
+						className: cn("h-full! rounded-none px-2!", classNames?.decrement)
+					})
+				}),
+				/* @__PURE__ */ jsx(NumberField.Input, {
+					render: /* @__PURE__ */ jsx(Input, {}),
+					placeholder,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					"aria-describedby": ariaDescribedBy,
+					className: cn(`h-full min-w-0 flex-1 rounded-none border-0 text-center shadow-none
+            focus-visible:ring-0`, classNames?.input)
+				}),
+				/* @__PURE__ */ jsx(NumberField.Increment, {
+					"aria-label": "Increase value",
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						size: "small",
+						icon: /* @__PURE__ */ jsx(Plus, {}),
+						className: cn("h-full! rounded-none px-2!", classNames?.increment)
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { Number as default };
+
+//# sourceMappingURL=number.mjs.map

package/dist/components/atoms/input/number.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.mjs","names":["React"],"sources":["../../../../src/components/atoms/input/number.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { NumberField, type NumberFieldRoot } from '@base-ui/react/number-field';\nimport { Minus, Plus } from 'lucide-react';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../button';\nimport Input from './input';\n\nconst sizes: Record<ComponentSize, string> = {\n  small: 'h-8',\n  middle: 'h-9',\n  large: 'h-10',\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof NumberField.Root>,\n  'children' | 'onValueChange'\n> {\n  /** Visible input label. Alternatively, pair `id` with an external label. */\n  label?: string;\n  /** Called with the numeric value (or null when cleared). */\n  onChange?: (\n    value: number | null,\n    eventDetails: NumberFieldRoot.ChangeEventDetails,\n  ) => void;\n  placeholder?: string;\n  size?: ComponentSize;\n  classNames?: {\n    label?: string;\n    group?: string;\n    input?: string;\n    decrement?: string;\n    increment?: string;\n  };\n}\n\nconst Number = ({\n  ref,\n  id,\n  label,\n  onChange,\n  placeholder,\n  size,\n  className,\n  classNames,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: Props) => {\n  const generatedId = React.useId();\n  const inputId = id ?? generatedId;\n  const { componentSize } = useConfig();\n  const resolvedSize = size ?? componentSize ?? 'middle';\n\n  return (\n    <NumberField.Root\n      {...props}\n      ref={ref}\n      id={inputId}\n      onValueChange={onChange}\n      data-slot=\"input-number\"\n      className={cn('w-full', className)}\n    >\n      {label && (\n        <label\n          htmlFor={inputId}\n          className={cn('mb-1.5 block text-sm font-medium', classNames?.label)}\n        >\n          {label}\n        </label>\n      )}\n      <NumberField.Group\n        className={cn(\n          `border-input focus-within:border-ring focus-within:ring-ring/50 flex\n          w-full items-stretch overflow-hidden rounded-md border shadow-xs\n          focus-within:ring-[3px]`,\n          sizes[resolvedSize],\n          classNames?.group,\n          //\n        )}\n      >\n        <NumberField.Decrement\n          aria-label=\"Decrease value\"\n          render={\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              icon={<Minus />}\n              className={cn(\n                'h-full! rounded-none px-2!',\n                classNames?.decrement,\n              )}\n            />\n          }\n        />\n        <NumberField.Input\n          render={<Input />}\n          placeholder={placeholder}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={cn(\n            `h-full min-w-0 flex-1 rounded-none border-0 text-center shadow-none\n            focus-visible:ring-0`,\n            classNames?.input,\n            //\n          )}\n        />\n        <NumberField.Increment\n          aria-label=\"Increase value\"\n          render={\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              icon={<Plus />}\n              className={cn(\n                'h-full! rounded-none px-2!',\n                classNames?.increment,\n              )}\n            />\n          }\n        />\n      </NumberField.Group>\n    </NumberField.Root>\n  );\n};\n\nexport default Number;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,QAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAwBA,MAAM,UAAU,EACd,KACA,IACA,OACA,UACA,aACA,MACA,WACA,YACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,YACQ;CACX,MAAM,cAAcA,QAAM,MAAM;CAChC,MAAM,UAAU,MAAM;CACtB,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,OACE,qBAAC,YAAY,MAAb;EACE,GAAI;EACC;EACL,IAAI;EACJ,eAAe;EACf,aAAU;EACV,WAAW,GAAG,UAAU,SAAS;EANnC,UAAA,CAQG,SACC,oBAAC,SAAD;GACE,SAAS;GACT,WAAW,GAAG,oCAAoC,YAAY,KAAK;GAElE,UAAA;EACI,CAAA,GAET,qBAAC,YAAY,OAAb;GACE,WAAW,GACT;;oCAGA,MAAM,eACN,YAAY,KAEd;GARF,UAAA;IAUE,oBAAC,YAAY,WAAb;KACE,cAAW;KACX,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAM,oBAAC,OAAD,CAAQ,CAAA;MACd,WAAW,GACT,8BACA,YAAY,SACd;KACD,CAAA;IAEJ,CAAA;IACD,oBAAC,YAAY,OAAb;KACE,QAAQ,oBAAC,OAAD,CAAQ,CAAA;KACH;KACb,cAAY;KACZ,mBAAiB;KACjB,oBAAkB;KAClB,WAAW,GACT;mCAEA,YAAY,KAEd;IACD,CAAA;IACD,oBAAC,YAAY,WAAb;KACE,cAAW;KACX,QACE,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,MAAM,oBAAC,MAAD,CAAO,CAAA;MACb,WAAW,GACT,8BACA,YAAY,SACd;KACD,CAAA;IAEJ,CAAA;GACgB;EACH,CAAA,CAAA;;AAEtB"}

package/dist/components/atoms/input/search.d.mts

@@ -1,11 +1,6 @@
 //#region src/components/atoms/input/search.d.ts
 interface Props extends React.ComponentPropsWithRef<'input'> {
   allowClear?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement> | {
-    target: {
-      value: string;
-    };
-  }) => void;
   onSearch?: (value: string) => void;
 }
 declare const Search: {

package/dist/components/atoms/input/search.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";UAeiB,cAAc,MAAM;EACnC;EACA,YACE,GAAG,MAAM,YAAY;IAAsB;MAAU;;;EAEvD,YAAY;;cAGR;KAWH,KAAA,WAAA,cAAA,OAAA,UAAA,YAAA,UAAA,WAAA,YAAA,UAAA,cAAA,SAAA,wBAAK,IAAA"}
+{"version":3,"file":"search.d.mts","names":[],"sources":["../../../../src/components/atoms/input/search.tsx"],"mappings":";UAeiB,cAAc,MAAM;EACnC;EACA,YAAY;;cAGR;KAWH,KAAA,WAAA,cAAA,OAAA,UAAA,YAAA,UAAA,WAAA,YAAA,UAAA,cAAA,SAAA,wBAAK,IAAA"}

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

@@ -3,8 +3,8 @@ import { cn } from "../../../utils.mjs";
 import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
 import { input_exports } from "../../../core/input.mjs";
 import Button from "../../../Button.mjs";
-import { useRef, useState } from "react";
 import { CircleX, Search } from "lucide-react";
+import { useRef, useState } from "react";
 import { useMergedRef } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/input/search.tsx
@@ -16,12 +16,10 @@ const Search$1 = ({ ref, className, defaultValue, value, disabled, allowClear =
 	const [uncontrolledHasValue, setUncontrolledHasValue] = useState(!!defaultValue);
 	const hasValue = value !== void 0 ? !!value : uncontrolledHasValue;
 	const onClear = () => {
-		if (!inputRef.current) return;
-		if (value === void 0) {
-			inputRef.current.value = "";
-			setUncontrolledHasValue(false);
-		}
-		onChange?.({ target: { value: "" } });
+		const input = inputRef.current;
+		if (!input) return;
+		(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), "value")?.set)?.call(input, "");
+		input.dispatchEvent(new Event("input", { bubbles: true }));
 	};
 	const onSearch = () => {
 		if (disabled) return;

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

@@ -1 +1 @@
-{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { input } from '../../../core';\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onChange?: (\n    e: React.ChangeEvent<HTMLInputElement> | { target: { value: string } },\n  ) => void;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    if (!inputRef.current) {\n      return;\n    }\n\n    if (value === undefined) {\n      inputRef.current.value = '';\n      setUncontrolledHasValue(false);\n    }\n\n    onChange?.({ target: { value: '' } });\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      data-slot=\"input-search\"\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          data-slot=\"input-search-clear\"\n          aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,EAAE,OAAO,SAASA;AAUxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,YAAY,aAAa,UAAU,GAAG;CAE5C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,YAAY;CACzB,MAAM,WAAW,UAAU,KAAA,IAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;EACpB,IAAI,CAAC,SAAS,SACZ;EAGF,IAAI,UAAU,KAAA,GAAW;GACvB,SAAS,QAAQ,QAAQ;GACzB,wBAAwB,KAAK;EAC/B;EAEA,WAAW,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,CAAC;CACtC;CAEA,MAAM,iBAAiB;EACrB,IAAI,UACF;EAEF,IAAI,SAAS,SACX,YAAY,SAAS,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qBACA,cACA,SAEF;EAPF,UAAA,CASE,qBAAC,OAAD;GACE,WAAW,GACT,iBACA,0BAEF;GALF,UAAA,CAOE,oBAAC,MAAD;IACE,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,uCAEF;IACO;IACO;IACd,WAAU,MAAK;KACb,IAAI,UAAU,KAAA,GACZ,wBAAwB,CAAC,CAAC,EAAE,OAAO,KAAK;KAE1C,WAAW,CAAC;IACd;IACA,YAAW,MAAK;KACd,aAAa,CAAC;KACd,IAAI,EAAE,QAAQ,SACZ,SAAS;IAEb;GACD,CAAA,GACD,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,cAAY,OAAO,SAAS,eAAe;IACjC;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,QAChC;IACA,SAAS;IAET,UAAA,oBAAC,SAAD,EAAS,WAAU,SAAU,CAAA;GACvB,CAAA,CACL;EACL,CAAA,GAAA,oBAAC,QAAD;GACE,MAAM,oBAACC,QAAD,CAAiB,CAAA;GACb;GACV,WAAW,GACT,kBACA,QAEF;GACA,SAAS;EACV,CAAA,CACE;;AAET;AAEA,SAAO,cAAc"}
+{"version":3,"file":"search.mjs","names":["input","Search","SearchOutlined"],"sources":["../../../../src/components/atoms/input/search.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useState } from 'react';\n\nimport { useMergedRef } from '@jbpark/use-hooks';\nimport { CircleX, Search as SearchOutlined } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { input } from '../../../core';\nimport Button from '../button';\n\nconst { Input: Core } = input;\n\nexport interface Props extends React.ComponentPropsWithRef<'input'> {\n  allowClear?: boolean;\n  onSearch?: (value: string) => void;\n}\n\nconst Search = ({\n  ref,\n  className,\n  defaultValue,\n  value,\n  disabled,\n  allowClear = true,\n  onChange,\n  onKeyDown: _onKeyDown,\n  onSearch: _onSearch,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const mergedRef = useMergedRef(inputRef, ref);\n\n  const [uncontrolledHasValue, setUncontrolledHasValue] =\n    useState(!!defaultValue);\n  const hasValue = value !== undefined ? !!value : uncontrolledHasValue;\n\n  const onClear = () => {\n    const input = inputRef.current;\n\n    if (!input) {\n      return;\n    }\n\n    // Use the native setter so React detects the value change and emits the\n    // same ChangeEvent as typing, including for controlled inputs.\n    const setter = Object.getOwnPropertyDescriptor(\n      Object.getPrototypeOf(input),\n      'value',\n    )?.set;\n\n    setter?.call(input, '');\n    input.dispatchEvent(new Event('input', { bubbles: true }));\n  };\n\n  const onSearch = () => {\n    if (disabled) {\n      return;\n    }\n    if (inputRef.current) {\n      _onSearch?.(inputRef.current.value);\n    }\n  };\n\n  return (\n    <div\n      data-slot=\"input-search\"\n      className={cn(\n        'flex items-center',\n        'rounded-md',\n        className,\n        //\n      )}\n    >\n      <div\n        className={cn(\n          'relative grow',\n          'inline-flex items-center',\n          //\n        )}\n      >\n        <Core\n          {...props}\n          ref={mergedRef}\n          inputMode=\"search\"\n          type=\"search\"\n          enterKeyHint=\"search\"\n          disabled={disabled}\n          className={cn(\n            'rounded-r-none',\n            '[&::-webkit-search-cancel-button]:hidden',\n            '[&::-webkit-search-decoration]:hidden',\n            //\n          )}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={e => {\n            if (value === undefined) {\n              setUncontrolledHasValue(!!e.target.value);\n            }\n            onChange?.(e);\n          }}\n          onKeyDown={e => {\n            _onKeyDown?.(e);\n            if (e.key === 'Enter') {\n              onSearch();\n            }\n          }}\n        />\n        <button\n          type=\"button\"\n          data-slot=\"input-search-clear\"\n          aria-label={locale.clear ?? DEFAULT_LOCALE.clear}\n          disabled={disabled}\n          className={cn(\n            'absolute right-2',\n            'shrink-0 cursor-pointer',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            (!allowClear || !hasValue) && 'hidden',\n          )}\n          onClick={onClear}\n        >\n          <CircleX className=\"size-4\" />\n        </button>\n      </div>\n      <Button\n        icon={<SearchOutlined />}\n        disabled={disabled}\n        className={cn(\n          'rounded-l-none',\n          'size-9',\n          //\n        )}\n        onClick={onSearch}\n      />\n    </div>\n  );\n};\n\nSearch.displayName = 'Search';\n\nexport default Search;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,EAAE,OAAO,SAASA;AAOxB,MAAMC,YAAU,EACd,KACA,WACA,cACA,OACA,UACA,aAAa,MACb,UACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,YAAY,aAAa,UAAU,GAAG;CAE5C,MAAM,CAAC,sBAAsB,2BAC3B,SAAS,CAAC,CAAC,YAAY;CACzB,MAAM,WAAW,UAAU,KAAA,IAAY,CAAC,CAAC,QAAQ;CAEjD,MAAM,gBAAgB;EACpB,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,OACH;EAUF,CALe,OAAO,yBACpB,OAAO,eAAe,KAAK,GAC3B,OACF,CAAC,EAAE,IAAA,EAEK,KAAK,OAAO,EAAE;EACtB,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;CAC3D;CAEA,MAAM,iBAAiB;EACrB,IAAI,UACF;EAEF,IAAI,SAAS,SACX,YAAY,SAAS,QAAQ,KAAK;CAEtC;CAEA,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qBACA,cACA,SAEF;EAPF,UAAA,CASE,qBAAC,OAAD;GACE,WAAW,GACT,iBACA,0BAEF;GALF,UAAA,CAOE,oBAAC,MAAD;IACE,GAAI;IACJ,KAAK;IACL,WAAU;IACV,MAAK;IACL,cAAa;IACH;IACV,WAAW,GACT,kBACA,4CACA,uCAEF;IACO;IACO;IACd,WAAU,MAAK;KACb,IAAI,UAAU,KAAA,GACZ,wBAAwB,CAAC,CAAC,EAAE,OAAO,KAAK;KAE1C,WAAW,CAAC;IACd;IACA,YAAW,MAAK;KACd,aAAa,CAAC;KACd,IAAI,EAAE,QAAQ,SACZ,SAAS;IAEb;GACD,CAAA,GACD,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,cAAY,OAAO,SAAS,eAAe;IACjC;IACV,WAAW,GACT,oBACA,2BACA,oDACC,CAAC,cAAc,CAAC,aAAa,QAChC;IACA,SAAS;IAET,UAAA,oBAAC,SAAD,EAAS,WAAU,SAAU,CAAA;GACvB,CAAA,CACL;EACL,CAAA,GAAA,oBAAC,QAAD;GACE,MAAM,oBAACC,QAAD,CAAiB,CAAA;GACb;GACV,WAAW,GACT,kBACA,QAEF;GACA,SAAS;EACV,CAAA,CACE;;AAET;AAEA,SAAO,cAAc"}

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

@@ -1,13 +1,15 @@
 //#region src/components/atoms/progress.d.ts
 interface Props extends React.ComponentPropsWithoutRef<'div'> {
   value: number;
+  orientation?: 'horizontal' | 'vertical';
+  /** @deprecated Use `orientation`. */
   direction?: 'horizontal' | 'vertical';
   classNames?: {
     background?: string;
     bar?: string;
   };
 }
-declare const Progress: ({ value, className, direction, classNames, ...props }: Props) => import("react").JSX.Element;
+declare const Progress: ({ value, className, orientation, direction, classNames, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 export { Props, Progress as default };
 //# sourceMappingURL=progress.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.mts","names":[],"sources":["../../../src/components/atoms/progress.tsx"],"mappings":";UAMiB,cAAc,MAAM;EACnC;EACA;EACA;IACE;IACA;;;cAIE,aAAY,OAAA,WAAA,WAAA,eAAA,SAMf,0BAAK,IAAA"}
+{"version":3,"file":"progress.d.mts","names":[],"sources":["../../../src/components/atoms/progress.tsx"],"mappings":";UAMiB,cAAc,MAAM;EACnC;EACA;;EAEA;EACA;IACE;IACA;;;cAIE,aAAY,OAAA,WAAA,aAAA,WAAA,eAAA,SAOf,0BAAK,IAAA"}

package/dist/components/atoms/progress.mjs

@@ -3,8 +3,8 @@ import { progress_exports } from "../../core/progress.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/progress.tsx
 const { Progress: Core } = progress_exports;
-const Progress = ({ value, className, direction = "horizontal", classNames, ...props }) => {
-	const isHorizontal = direction === "horizontal";
+const Progress = ({ value, className, orientation, direction = "horizontal", classNames, ...props }) => {
+	const isHorizontal = (orientation ?? direction) === "horizontal";
 	const normalizedValue = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;
 	return /* @__PURE__ */ jsx(Core, {
 		...props,

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

@@ -1 +1 @@
-{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport { progress } from '../../core';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  value: number;\n  direction?: 'horizontal' | 'vertical';\n  classNames?: {\n    background?: string;\n    bar?: string;\n  };\n}\n\nconst Progress = ({\n  value,\n  className,\n  direction = 'horizontal',\n  classNames,\n  ...props\n}: Props) => {\n  const isHorizontal = direction === 'horizontal';\n  const normalizedValue = Number.isFinite(value)\n    ? Math.min(100, Math.max(0, value))\n    : 0;\n\n  return (\n    <Core\n      {...props}\n      value={normalizedValue}\n      className={cn(\n        isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n        className,\n        classNames?.background,\n        //\n      )}\n      barClassName={cn('flex-none', classNames?.bar)}\n      barStyle={\n        isHorizontal\n          ? { width: `${normalizedValue}%` }\n          : { width: '100%', height: `${normalizedValue}%` }\n      }\n    />\n  );\n};\n\nexport default Progress;\n"],"mappings":";;;;AAIA,MAAM,EAAE,UAAU,SAASA;AAW3B,MAAM,YAAY,EAChB,OACA,WACA,YAAY,cACZ,YACA,GAAG,YACQ;CACX,MAAM,eAAe,cAAc;CACnC,MAAM,kBAAkB,OAAO,SAAS,KAAK,IACzC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAChC;CAEJ,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,UAEd;EACA,cAAc,GAAG,aAAa,YAAY,GAAG;EAC7C,UACE,eACI,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAC/B;GAAE,OAAO;GAAQ,QAAQ,GAAG,gBAAgB;EAAG;CAEtD,CAAA;AAEL"}
+{"version":3,"file":"progress.mjs","names":["progress"],"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nimport { progress } from '../../core';\n\nconst { Progress: Core } = progress;\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  value: number;\n  orientation?: 'horizontal' | 'vertical';\n  /** @deprecated Use `orientation`. */\n  direction?: 'horizontal' | 'vertical';\n  classNames?: {\n    background?: string;\n    bar?: string;\n  };\n}\n\nconst Progress = ({\n  value,\n  className,\n  orientation,\n  direction = 'horizontal',\n  classNames,\n  ...props\n}: Props) => {\n  const isHorizontal = (orientation ?? direction) === 'horizontal';\n  const normalizedValue = Number.isFinite(value)\n    ? Math.min(100, Math.max(0, value))\n    : 0;\n\n  return (\n    <Core\n      {...props}\n      value={normalizedValue}\n      className={cn(\n        isHorizontal ? 'h-4 w-full' : 'flex h-full w-4 flex-col justify-end',\n        className,\n        classNames?.background,\n        //\n      )}\n      barClassName={cn('flex-none', classNames?.bar)}\n      barStyle={\n        isHorizontal\n          ? { width: `${normalizedValue}%` }\n          : { width: '100%', height: `${normalizedValue}%` }\n      }\n    />\n  );\n};\n\nexport default Progress;\n"],"mappings":";;;;AAIA,MAAM,EAAE,UAAU,SAASA;AAa3B,MAAM,YAAY,EAChB,OACA,WACA,aACA,YAAY,cACZ,YACA,GAAG,YACQ;CACX,MAAM,gBAAgB,eAAe,eAAe;CACpD,MAAM,kBAAkB,OAAO,SAAS,KAAK,IACzC,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,IAChC;CAEJ,OACE,oBAAC,MAAD;EACE,GAAI;EACJ,OAAO;EACP,WAAW,GACT,eAAe,eAAe,wCAC9B,WACA,YAAY,UAEd;EACA,cAAc,GAAG,aAAa,YAAY,GAAG;EAC7C,UACE,eACI,EAAE,OAAO,GAAG,gBAAgB,GAAG,IAC/B;GAAE,OAAO;GAAQ,QAAQ,GAAG,gBAAgB;EAAG;CAEtD,CAAA;AAEL"}

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

@@ -3,8 +3,8 @@ import { cn } from "../../../utils.mjs";
 import { field_exports } from "../../../core/field.mjs";
 import { radio_group_exports } from "../../../core/radio-group.mjs";
 import { RadioGroupContext } from "./context.mjs";
-import { useContext, useId, useRef } from "react";
 import { Circle, CircleCheck } from "lucide-react";
+import { useContext, useId, useRef } from "react";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/radio/radio.tsx

package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts

@@ -16,9 +16,14 @@ interface Props {
   toolbar?: boolean | ToolbarPreset[];
   /** Extra buttons appended after the built-in presets. */
   toolbarItems?: ToolbarItem[];
+  /** Called after each document edit with the current HTML. */
+  onUpdate?: (value: string) => void;
+  /** Called when the editor loses focus with the current HTML. */
+  onCommit?: (value: string) => void;
+  /** @deprecated Use `onCommit` for the existing blur-only behavior. */
   onChange?: (value: string) => void;
 }
-declare const RichTextEditor: ({ value, placeholder, className, classNames, toolbar, toolbarItems, onChange }: Props) => import("react").JSX.Element;
+declare const RichTextEditor: ({ value, placeholder, className, classNames, toolbar, toolbarItems, onUpdate, onCommit, onChange }: Props) => import("react").JSX.Element;
 //#endregion
 export { Props, RichTextEditor as default };
 //# sourceMappingURL=rich-text-editor.d.mts.map

package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.d.mts","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"mappings":";;UAgBiB;EACf;EACA;EACA;EACA;IACE;IACA;;;;;;;EAOF,oBAAoB;;EAEpB,eAAe;EACf,YAAY;;cAGR,mBAAkB,OAAA,aAAA,WAAA,YAAA,SAAA,cAAA,YAQrB,0BAAK,IAAA"}
+{"version":3,"file":"rich-text-editor.d.mts","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"mappings":";;UAgBiB;EACf;EACA;EACA;EACA;IACE;IACA;;;;;;;EAOF,oBAAoB;;EAEpB,eAAe;;EAEf,YAAY;;EAEZ,YAAY;;EAEZ,YAAY;;cAGR,mBAAkB,OAAA,aAAA,WAAA,YAAA,SAAA,cAAA,UAAA,UAAA,YAUrB,0BAAK,IAAA"}

package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs

@@ -10,7 +10,7 @@ import { TextStyleKit } from "@tiptap/extension-text-style";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 //#region src/components/atoms/rich-text-editor/rich-text-editor.tsx
-const RichTextEditor = ({ value = "", placeholder = "Enter text...", className, classNames, toolbar = false, toolbarItems, onChange }) => {
+const RichTextEditor = ({ value = "", placeholder = "Enter text...", className, classNames, toolbar = false, toolbarItems, onUpdate, onCommit, onChange }) => {
 	const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];
 	const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;
 	const editor = useEditor({
@@ -25,8 +25,13 @@ const RichTextEditor = ({ value = "", placeholder = "Enter text...", className,
 			})
 		],
 		content: value,
+		onUpdate: ({ editor: e }) => {
+			onUpdate?.(e.getHTML());
+		},
 		onBlur: ({ editor: e }) => {
-			onChange?.(e.getHTML());
+			const html = e.getHTML();
+			onCommit?.(html);
+			onChange?.(html);
 		},
 		shouldRerenderOnTransaction: showToolbar
 	});

package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TextStyleKit } from '@tiptap/extension-text-style';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RICH_TEXT_CONTENT_CLASSES } from './content-classes';\nimport Toolbar from './toolbar';\nimport { DEFAULT_TOOLBAR_PRESETS } from './toolbar-presets';\nimport type { ToolbarItem, ToolbarPreset } from './types';\n\nexport interface Props {\n  value?: string;\n  placeholder?: string;\n  className?: string;\n  classNames?: {\n    toolbar?: string;\n    content?: string;\n  };\n  /**\n   * `true` shows every built-in preset; an array shows only the listed\n   * presets, in the given order. Omitted or `false` renders no toolbar,\n   * matching the original (toolbar-less) output.\n   */\n  toolbar?: boolean | ToolbarPreset[];\n  /** Extra buttons appended after the built-in presets. */\n  toolbarItems?: ToolbarItem[];\n  onChange?: (value: string) => void;\n}\n\nconst RichTextEditor = ({\n  value = '',\n  placeholder = 'Enter text...',\n  className,\n  classNames,\n  toolbar = false,\n  toolbarItems,\n  onChange,\n}: Props) => {\n  const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];\n  const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;\n\n  const editor = useEditor({\n    // SSR renders every exported component without effects running, so the\n    // editor must not touch the DOM during that first pass — deferring\n    // creation to mount keeps `renderToStaticMarkup` from throwing.\n    immediatelyRender: false,\n    extensions: [\n      StarterKit,\n      Placeholder.configure({ placeholder }),\n      TextStyleKit.configure({\n        fontFamily: false,\n        lineHeight: false,\n        backgroundColor: false,\n      }),\n    ],\n    content: value,\n    onBlur: ({ editor: e }) => {\n      onChange?.(e.getHTML());\n    },\n    // @tiptap/react v3 only re-renders on selection/transaction changes when\n    // explicitly opted in — the toolbar's isActive()/getAttributes() reads\n    // need that to reflect the caret position live.\n    shouldRerenderOnTransaction: showToolbar,\n  });\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const current = editor.getHTML();\n\n    if (current !== value) {\n      editor.commands.setContent(value, { emitUpdate: false });\n    }\n  }, [value, editor]);\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      className={cn(\n        'border-input bg-background text-foreground rounded border text-sm',\n        className,\n        //\n      )}\n    >\n      {showToolbar && editor && (\n        <Toolbar\n          editor={editor}\n          presets={presets}\n          items={toolbarItems}\n          className={classNames?.toolbar}\n        />\n      )}\n      <div\n        data-slot=\"rich-text-editor-content\"\n        className={cn(\n          'min-h-20 px-3 py-2',\n          RICH_TEXT_CONTENT_CLASSES,\n          classNames?.content,\n          //\n        )}\n      >\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,kBAAkB,EACtB,QAAQ,IACR,cAAc,iBACd,WACA,YACA,UAAU,OACV,cACA,eACW;CACX,MAAM,UAAU,YAAY,OAAO,0BAA0B,WAAW,CAAC;CACzE,MAAM,cAAc,QAAQ,SAAS,MAAM,cAAc,UAAU,KAAK;CAExE,MAAM,SAAS,UAAU;EAIvB,mBAAmB;EACnB,YAAY;GACV;GACA,YAAY,UAAU,EAAE,YAAY,CAAC;GACrC,aAAa,UAAU;IACrB,YAAY;IACZ,YAAY;IACZ,iBAAiB;GACnB,CAAC;EACH;EACA,SAAS;EACT,SAAS,EAAE,QAAQ,QAAQ;GACzB,WAAW,EAAE,QAAQ,CAAC;EACxB;EAIA,6BAA6B;CAC/B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,QACH;EAKF,IAFgB,OAAO,QAEb,MAAM,OACd,OAAO,SAAS,WAAW,OAAO,EAAE,YAAY,MAAM,CAAC;CAE3D,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,SAEF;EANF,UAAA,CAQG,eAAe,UACd,oBAAC,SAAD;GACU;GACC;GACT,OAAO;GACP,WAAW,YAAY;EACxB,CAAA,GAEH,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,sBACA,2BACA,YAAY,OAEd;GAEA,UAAA,oBAAC,eAAD,EAAuB,OAAS,CAAA;EAC7B,CAAA,CACF;;AAET"}
+{"version":3,"file":"rich-text-editor.mjs","names":[],"sources":["../../../../src/components/atoms/rich-text-editor/rich-text-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport Placeholder from '@tiptap/extension-placeholder';\nimport { TextStyleKit } from '@tiptap/extension-text-style';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { RICH_TEXT_CONTENT_CLASSES } from './content-classes';\nimport Toolbar from './toolbar';\nimport { DEFAULT_TOOLBAR_PRESETS } from './toolbar-presets';\nimport type { ToolbarItem, ToolbarPreset } from './types';\n\nexport interface Props {\n  value?: string;\n  placeholder?: string;\n  className?: string;\n  classNames?: {\n    toolbar?: string;\n    content?: string;\n  };\n  /**\n   * `true` shows every built-in preset; an array shows only the listed\n   * presets, in the given order. Omitted or `false` renders no toolbar,\n   * matching the original (toolbar-less) output.\n   */\n  toolbar?: boolean | ToolbarPreset[];\n  /** Extra buttons appended after the built-in presets. */\n  toolbarItems?: ToolbarItem[];\n  /** Called after each document edit with the current HTML. */\n  onUpdate?: (value: string) => void;\n  /** Called when the editor loses focus with the current HTML. */\n  onCommit?: (value: string) => void;\n  /** @deprecated Use `onCommit` for the existing blur-only behavior. */\n  onChange?: (value: string) => void;\n}\n\nconst RichTextEditor = ({\n  value = '',\n  placeholder = 'Enter text...',\n  className,\n  classNames,\n  toolbar = false,\n  toolbarItems,\n  onUpdate,\n  onCommit,\n  onChange,\n}: Props) => {\n  const presets = toolbar === true ? DEFAULT_TOOLBAR_PRESETS : toolbar || [];\n  const showToolbar = presets.length > 0 || (toolbarItems?.length ?? 0) > 0;\n\n  const editor = useEditor({\n    // SSR renders every exported component without effects running, so the\n    // editor must not touch the DOM during that first pass — deferring\n    // creation to mount keeps `renderToStaticMarkup` from throwing.\n    immediatelyRender: false,\n    extensions: [\n      StarterKit,\n      Placeholder.configure({ placeholder }),\n      TextStyleKit.configure({\n        fontFamily: false,\n        lineHeight: false,\n        backgroundColor: false,\n      }),\n    ],\n    content: value,\n    onUpdate: ({ editor: e }) => {\n      onUpdate?.(e.getHTML());\n    },\n    onBlur: ({ editor: e }) => {\n      const html = e.getHTML();\n\n      onCommit?.(html);\n      onChange?.(html);\n    },\n    // @tiptap/react v3 only re-renders on selection/transaction changes when\n    // explicitly opted in — the toolbar's isActive()/getAttributes() reads\n    // need that to reflect the caret position live.\n    shouldRerenderOnTransaction: showToolbar,\n  });\n\n  useEffect(() => {\n    if (!editor) {\n      return;\n    }\n\n    const current = editor.getHTML();\n\n    if (current !== value) {\n      editor.commands.setContent(value, { emitUpdate: false });\n    }\n  }, [value, editor]);\n\n  return (\n    <div\n      data-slot=\"rich-text-editor\"\n      className={cn(\n        'border-input bg-background text-foreground rounded border text-sm',\n        className,\n        //\n      )}\n    >\n      {showToolbar && editor && (\n        <Toolbar\n          editor={editor}\n          presets={presets}\n          items={toolbarItems}\n          className={classNames?.toolbar}\n        />\n      )}\n      <div\n        data-slot=\"rich-text-editor-content\"\n        className={cn(\n          'min-h-20 px-3 py-2',\n          RICH_TEXT_CONTENT_CLASSES,\n          classNames?.content,\n          //\n        )}\n      >\n        <EditorContent editor={editor} />\n      </div>\n    </div>\n  );\n};\n\nexport default RichTextEditor;\n"],"mappings":";;;;;;;;;;;;AAwCA,MAAM,kBAAkB,EACtB,QAAQ,IACR,cAAc,iBACd,WACA,YACA,UAAU,OACV,cACA,UACA,UACA,eACW;CACX,MAAM,UAAU,YAAY,OAAO,0BAA0B,WAAW,CAAC;CACzE,MAAM,cAAc,QAAQ,SAAS,MAAM,cAAc,UAAU,KAAK;CAExE,MAAM,SAAS,UAAU;EAIvB,mBAAmB;EACnB,YAAY;GACV;GACA,YAAY,UAAU,EAAE,YAAY,CAAC;GACrC,aAAa,UAAU;IACrB,YAAY;IACZ,YAAY;IACZ,iBAAiB;GACnB,CAAC;EACH;EACA,SAAS;EACT,WAAW,EAAE,QAAQ,QAAQ;GAC3B,WAAW,EAAE,QAAQ,CAAC;EACxB;EACA,SAAS,EAAE,QAAQ,QAAQ;GACzB,MAAM,OAAO,EAAE,QAAQ;GAEvB,WAAW,IAAI;GACf,WAAW,IAAI;EACjB;EAIA,6BAA6B;CAC/B,CAAC;CAED,gBAAgB;EACd,IAAI,CAAC,QACH;EAKF,IAFgB,OAAO,QAEb,MAAM,OACd,OAAO,SAAS,WAAW,OAAO,EAAE,YAAY,MAAM,CAAC;CAE3D,GAAG,CAAC,OAAO,MAAM,CAAC;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qEACA,SAEF;EANF,UAAA,CAQG,eAAe,UACd,oBAAC,SAAD;GACU;GACC;GACT,OAAO;GACP,WAAW,YAAY;EACxB,CAAA,GAEH,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,sBACA,2BACA,YAAY,OAEd;GAEA,UAAA,oBAAC,eAAD,EAAuB,OAAS,CAAA;EAC7B,CAAA,CACF;;AAET"}

package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs

@@ -5,8 +5,8 @@ import ColorPicker from "../color-picker.mjs";
 import Input from "../input/index.mjs";
 import ToolbarButton from "./toolbar-button.mjs";
 import Select from "../select.mjs";
-import { useState } from "react";
 import { Bold, Code, Code2, Italic, Link, List, ListOrdered, Minus, Quote, Redo2, Strikethrough, Underline, Undo2 } from "lucide-react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/rich-text-editor/toolbar-presets.tsx
 const FONT_SIZE_OPTIONS = [

package/dist/components/atoms/select-multiple.mjs

@@ -6,8 +6,8 @@ import { selectTriggerStyles } from "../../core/select.mjs";
 import Button from "../../Button.mjs";
 import Input from "./input/index.mjs";
 import SearchableOptions, { useSelectItems } from "./select-searchable-options.mjs";
-import { useMemo } from "react";
 import { ChevronDownIcon, XIcon } from "lucide-react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/atoms/select-multiple.tsx
 const { Combobox: Core, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxInput, ComboboxInputGroup, ComboboxTrigger, ComboboxValue } = combobox_exports;

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

@@ -14,7 +14,7 @@ interface OptionGroup {
   label: React.ReactNode;
   options: Option[];
 }
-interface StaticProps extends Omit<React.ComponentProps<typeof Core>, 'onValueChange'> {
+interface StaticProps extends Omit<React.ComponentProps<typeof Core>, 'onValueChange' | 'items'> {
   searchable?: false;
   placeholder?: string;
   className?: string;

package/dist/components/atoms/select.mjs

@@ -12,11 +12,11 @@ const isGroup = (option) => {
 const StaticSelect = ({ searchable: _searchable, className, placeholder, options, onChange, "aria-label": ariaLabel, ...props }) => {
 	const items = options?.flatMap((option) => isGroup(option) ? option.options : option);
 	return /* @__PURE__ */ jsxs(Core, {
+		...props,
 		items,
 		onValueChange: (value) => {
 			if (value !== null) onChange?.(value);
 		},
-		...props,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			"aria-label": ariaLabel,
 			className: cn("w-full max-w-48", className),

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

@@ -1 +1 @@
-{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { select } from '../../core';\nimport MultipleSelect, { type Props as MultipleProps } from './select-multiple';\nimport SearchableSelect, {\n  type Props as SearchableProps,\n} from './select-searchable';\n\nconst {\n  Select: Core,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} = select;\n\ninterface Option {\n  label: React.ReactNode;\n  value: string;\n  disabled?: boolean;\n}\n\ninterface OptionGroup {\n  label: React.ReactNode;\n  options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\ninterface StaticProps extends Omit<\n  React.ComponentProps<typeof Core>,\n  'onValueChange'\n> {\n  searchable?: false;\n  placeholder?: string;\n  className?: string;\n  options?: (Option | OptionGroup)[];\n  onChange?: (value: string) => void;\n  'aria-label'?: string;\n}\n\nexport type Props = StaticProps | SearchableProps | MultipleProps;\n\nconst StaticSelect = ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  className,\n  placeholder,\n  options,\n  onChange,\n  'aria-label': ariaLabel,\n  ...props\n}: StaticProps) => {\n  const items = options?.flatMap(option =>\n    isGroup(option) ? option.options : option,\n  );\n\n  return (\n    <Core\n      items={items}\n      onValueChange={value => {\n        if (value !== null) {\n          onChange?.(value);\n        }\n      }}\n      {...props}\n    >\n      <SelectTrigger\n        aria-label={ariaLabel}\n        className={cn('w-full max-w-48', className)}\n      >\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options?.map((option, index) =>\n          isGroup(option) ? (\n            <SelectGroup key={index}>\n              <SelectLabel>{option.label}</SelectLabel>\n              {option.options.map(item => (\n                <SelectItem\n                  key={item.value}\n                  value={item.value}\n                  disabled={item.disabled}\n                >\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ) : (\n            <SelectItem\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n            >\n              {option.label}\n            </SelectItem>\n          ),\n        )}\n      </SelectContent>\n    </Core>\n  );\n};\n\nconst Select = (props: Props) => {\n  if (props.multiple) {\n    return <MultipleSelect {...props} />;\n  }\n\n  if (props.searchable) {\n    return <SearchableSelect {...props} />;\n  }\n\n  return <StaticSelect {...props} />;\n};\n\nexport default Select;\n"],"mappings":";;;;;;;AAUA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAaJ,MAAM,WAAW,WAAwD;CACvE,OAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,OAAO;AAC5D;AAgBA,MAAM,gBAAgB,EAEpB,YAAY,aACZ,WACA,aACA,SACA,UACA,cAAc,WACd,GAAG,YACc;CACjB,MAAM,QAAQ,SAAS,SAAQ,WAC7B,QAAQ,MAAM,IAAI,OAAO,UAAU,MACrC;CAEA,OACE,qBAAC,MAAD;EACS;EACP,gBAAe,UAAS;GACtB,IAAI,UAAU,MACZ,WAAW,KAAK;EAEpB;EACA,GAAI;EAPN,UAAA,CASE,oBAAC,eAAD;GACE,cAAY;GACZ,WAAW,GAAG,mBAAmB,SAAS;GAE1C,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;EAC3B,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,SAAS,KAAK,QAAQ,UACrB,QAAQ,MAAM,IACZ,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,OAAO,MAAmB,CAAA,GACvC,OAAO,QAAQ,KAAI,SAClB,oBAAC,YAAD;GAEE,OAAO,KAAK;GACZ,UAAU,KAAK;GAEd,UAAA,KAAK;EACI,GALL,KAAK,KAKA,CACb,CACU,EAAA,GAXK,KAWL,IAEb,oBAAC,YAAD;GAEE,OAAO,OAAO;GACd,UAAU,OAAO;GAEhB,UAAA,OAAO;EACE,GALL,OAAO,KAKF,CAEhB,EACa,CAAA,CACX;;AAEV;AAEA,MAAM,UAAU,UAAiB;CAC/B,IAAI,MAAM,UACR,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;CAGrC,IAAI,MAAM,YACR,OAAO,oBAAC,kBAAD,EAAkB,GAAI,MAAQ,CAAA;CAGvC,OAAO,oBAAC,cAAD,EAAc,GAAI,MAAQ,CAAA;AACnC"}
+{"version":3,"file":"select.mjs","names":["select"],"sources":["../../../src/components/atoms/select.tsx"],"sourcesContent":["import React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { select } from '../../core';\nimport MultipleSelect, { type Props as MultipleProps } from './select-multiple';\nimport SearchableSelect, {\n  type Props as SearchableProps,\n} from './select-searchable';\n\nconst {\n  Select: Core,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} = select;\n\ninterface Option {\n  label: React.ReactNode;\n  value: string;\n  disabled?: boolean;\n}\n\ninterface OptionGroup {\n  label: React.ReactNode;\n  options: Option[];\n}\n\nconst isGroup = (option: Option | OptionGroup): option is OptionGroup => {\n  return 'options' in option && Array.isArray(option.options);\n};\n\ninterface StaticProps extends Omit<\n  React.ComponentProps<typeof Core>,\n  'onValueChange' | 'items'\n> {\n  searchable?: false;\n  placeholder?: string;\n  className?: string;\n  options?: (Option | OptionGroup)[];\n  onChange?: (value: string) => void;\n  'aria-label'?: string;\n}\n\nexport type Props = StaticProps | SearchableProps | MultipleProps;\n\nconst StaticSelect = ({\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Do not forward the public mode switch to Base UI.\n  searchable: _searchable,\n  className,\n  placeholder,\n  options,\n  onChange,\n  'aria-label': ariaLabel,\n  ...props\n}: StaticProps) => {\n  const items = options?.flatMap(option =>\n    isGroup(option) ? option.options : option,\n  );\n\n  return (\n    <Core\n      {...props}\n      items={items}\n      onValueChange={value => {\n        if (value !== null) {\n          onChange?.(value);\n        }\n      }}\n    >\n      <SelectTrigger\n        aria-label={ariaLabel}\n        className={cn('w-full max-w-48', className)}\n      >\n        <SelectValue placeholder={placeholder} />\n      </SelectTrigger>\n      <SelectContent>\n        {options?.map((option, index) =>\n          isGroup(option) ? (\n            <SelectGroup key={index}>\n              <SelectLabel>{option.label}</SelectLabel>\n              {option.options.map(item => (\n                <SelectItem\n                  key={item.value}\n                  value={item.value}\n                  disabled={item.disabled}\n                >\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          ) : (\n            <SelectItem\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n            >\n              {option.label}\n            </SelectItem>\n          ),\n        )}\n      </SelectContent>\n    </Core>\n  );\n};\n\nconst Select = (props: Props) => {\n  if (props.multiple) {\n    return <MultipleSelect {...props} />;\n  }\n\n  if (props.searchable) {\n    return <SearchableSelect {...props} />;\n  }\n\n  return <StaticSelect {...props} />;\n};\n\nexport default Select;\n"],"mappings":";;;;;;;AAUA,MAAM,EACJ,QAAQ,MACR,eACA,aACA,YACA,aACA,eACA,gBACEA;AAaJ,MAAM,WAAW,WAAwD;CACvE,OAAO,aAAa,UAAU,MAAM,QAAQ,OAAO,OAAO;AAC5D;AAgBA,MAAM,gBAAgB,EAEpB,YAAY,aACZ,WACA,aACA,SACA,UACA,cAAc,WACd,GAAG,YACc;CACjB,MAAM,QAAQ,SAAS,SAAQ,WAC7B,QAAQ,MAAM,IAAI,OAAO,UAAU,MACrC;CAEA,OACE,qBAAC,MAAD;EACE,GAAI;EACG;EACP,gBAAe,UAAS;GACtB,IAAI,UAAU,MACZ,WAAW,KAAK;EAEpB;EAPF,UAAA,CASE,oBAAC,eAAD;GACE,cAAY;GACZ,WAAW,GAAG,mBAAmB,SAAS;GAE1C,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;EAC3B,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,SAAS,KAAK,QAAQ,UACrB,QAAQ,MAAM,IACZ,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,OAAO,MAAmB,CAAA,GACvC,OAAO,QAAQ,KAAI,SAClB,oBAAC,YAAD;GAEE,OAAO,KAAK;GACZ,UAAU,KAAK;GAEd,UAAA,KAAK;EACI,GALL,KAAK,KAKA,CACb,CACU,EAAA,GAXK,KAWL,IAEb,oBAAC,YAAD;GAEE,OAAO,OAAO;GACd,UAAU,OAAO;GAEhB,UAAA,OAAO;EACE,GALL,OAAO,KAKF,CAEhB,EACa,CAAA,CACX;;AAEV;AAEA,MAAM,UAAU,UAAiB;CAC/B,IAAI,MAAM,UACR,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;CAGrC,IAAI,MAAM,YACR,OAAO,oBAAC,kBAAD,EAAkB,GAAI,MAAQ,CAAA;CAGvC,OAAO,oBAAC,cAAD,EAAc,GAAI,MAAQ,CAAA;AACnC"}

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

@@ -6,6 +6,8 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
   size?: 'default' | 'small' | 'large';
   count?: number;
   gap?: number;
+  orientation?: 'horizontal' | 'vertical';
+  /** @deprecated Use `orientation`. */
   direction?: 'horizontal' | 'vertical';
   width?: string | number | (string | number)[];
   height?: string | number | (string | number)[];
@@ -15,7 +17,7 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
     item?: string;
   };
 }
-declare const Skeleton: ({ active, loading, avatar, size, direction, count, gap, className, classNames, style, width, height, children, ...props }: Props) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null;
+declare const Skeleton: ({ active, loading, avatar, size, orientation, direction, count, gap, className, classNames, style, width, height, children, ...props }: Props) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null;
 //#endregion
 export { Props, Skeleton as default };
 //# sourceMappingURL=skeleton.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";UAaiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;IACE;IACA;IACA;;;cAUE,aAAY,QAAA,SAAA,QAAA,MAAA,WAAA,OAAA,KAAA,WAAA,YAAA,OAAA,OAAA,QAAA,aAAA,SAef,+CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}
+{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"mappings":";UAaiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA;IACE;IACA;IACA;;;cAUE,aAAY,QAAA,SAAA,QAAA,MAAA,aAAA,WAAA,OAAA,KAAA,WAAA,YAAA,OAAA,OAAA,QAAA,aAAA,SAgBf,+CAAK,yBAAA,aAAA,6DAAA,8BAAA,+CAAA,8BAAA,yBAAA,iDAAA,IAAA"}

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

@@ -13,7 +13,7 @@ const SIZES = {
 	default: "w-60 h-6",
 	large: "w-72 h-8"
 };
-const Skeleton = ({ active = true, loading = true, avatar, size = "default", direction = "vertical", count = 1, gap = 6, className, classNames = {}, style, width, height, children, ...props }) => {
+const Skeleton = ({ active = true, loading = true, avatar, size = "default", orientation, direction = "vertical", count = 1, gap = 6, className, classNames = {}, style, width, height, children, ...props }) => {
 	const { locale } = useConfig();
 	if (!loading) return children ?? null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -23,7 +23,7 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
 		style,
 		...props,
 		children: [avatar && /* @__PURE__ */ jsx(Core, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
-			className: cn("flex min-w-0 grow", direction === "vertical" && "flex-col", classNames.wrapper),
+			className: cn("flex min-w-0 grow", (orientation ?? direction) === "vertical" && "flex-col", classNames.wrapper),
 			style: { gap },
 			children: Array.from({ length: count }).map((_, index) => {
 				const itemWidth = getValueAtIndex(width, index);

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n  return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  active?: boolean;\n  loading?: boolean;\n  avatar?: boolean;\n  size?: 'default' | 'small' | 'large';\n  count?: number;\n  gap?: number;\n  direction?: 'horizontal' | 'vertical';\n  width?: string | number | (string | number)[];\n  height?: string | number | (string | number)[];\n  classNames?: {\n    wrapper?: string;\n    avatar?: string;\n    item?: string;\n  };\n}\n\nconst SIZES = {\n  small: 'w-48 h-4',\n  default: 'w-60 h-6',\n  large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n  active = true,\n  loading = true,\n  avatar,\n  size = 'default',\n  direction = 'vertical',\n  count = 1,\n  gap = 6,\n  className,\n  classNames = {},\n  style,\n  width,\n  height,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n  // is meant to swap in arbitrary real content once loading finishes,\n  // which can include elements with strict parent requirements (e.g. a\n  // `<tr>`), so adding a wrapper div could produce invalid markup.\n  // `className`/`style`/rest props only ever describe the skeleton's own\n  // placeholder markup, so there's nothing for them to apply to here.\n  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n      className={cn('flex items-center gap-3', className)}\n      style={style}\n      {...props}\n    >\n      {avatar && (\n        <Core\n          className={cn(\n            'h-12 w-12',\n            'rounded-xl',\n            !active && 'animate-none',\n            classNames.avatar,\n          )}\n        />\n      )}\n      <div\n        className={cn(\n          'flex min-w-0 grow',\n          direction === 'vertical' && 'flex-col',\n          classNames.wrapper,\n        )}\n        style={{\n          gap,\n        }}\n      >\n        {Array.from({ length: count }).map((_, index) => {\n          const itemWidth = getValueAtIndex(width, index);\n          const itemHeight = getValueAtIndex(height, index);\n\n          return (\n            <Core\n              key={index}\n              className={cn(\n                'rounded-md',\n                !active && 'animate-none',\n                // SIZES are fixed widths; cap them so a narrow container\n                // shrinks the placeholder instead of being overflowed.\n                SIZES[size],\n                'max-w-full',\n                classNames.item,\n                //\n              )}\n              style={{\n                width: itemWidth,\n                height: itemHeight,\n              }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAmBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,qBACA,cAAc,cAAc,YAC5B,WAAW,OACb;GACA,OAAO,EACL,IACF;GAEC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,KAAK;IAC9C,MAAM,aAAa,gBAAgB,QAAQ,KAAK;IAEhD,OACE,oBAAC,MAAD;KAEE,WAAW,GACT,cACA,CAAC,UAAU,gBAGX,MAAM,OACN,cACA,WAAW,IAEb;KACA,OAAO;MACL,OAAO;MACP,QAAQ;KACV;IACD,GAfM,KAeN;GAEL,CAAC;EACE,CAAA,CACF;;AAET"}
+{"version":3,"file":"skeleton.mjs","names":["skeleton"],"sources":["../../../../src/components/atoms/skeleton/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { skeleton } from '../../../core';\n\nconst { Skeleton: Core } = skeleton;\n\nconst getValueAtIndex = <T,>(value: T | T[], index: number) => {\n  return Array.isArray(value) ? (value[index] ?? value[0]) : value;\n};\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  active?: boolean;\n  loading?: boolean;\n  avatar?: boolean;\n  size?: 'default' | 'small' | 'large';\n  count?: number;\n  gap?: number;\n  orientation?: 'horizontal' | 'vertical';\n  /** @deprecated Use `orientation`. */\n  direction?: 'horizontal' | 'vertical';\n  width?: string | number | (string | number)[];\n  height?: string | number | (string | number)[];\n  classNames?: {\n    wrapper?: string;\n    avatar?: string;\n    item?: string;\n  };\n}\n\nconst SIZES = {\n  small: 'w-48 h-4',\n  default: 'w-60 h-6',\n  large: 'w-72 h-8',\n};\n\nconst Skeleton = ({\n  active = true,\n  loading = true,\n  avatar,\n  size = 'default',\n  orientation,\n  direction = 'vertical',\n  count = 1,\n  gap = 6,\n  className,\n  classNames = {},\n  style,\n  width,\n  height,\n  children,\n  ...props\n}: Props) => {\n  const { locale } = useConfig();\n\n  // Not wrapping `children` here (unlike Spin's overlay mode) — Skeleton\n  // is meant to swap in arbitrary real content once loading finishes,\n  // which can include elements with strict parent requirements (e.g. a\n  // `<tr>`), so adding a wrapper div could produce invalid markup.\n  // `className`/`style`/rest props only ever describe the skeleton's own\n  // placeholder markup, so there's nothing for them to apply to here.\n  if (!loading) {\n    return children ?? null;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-label={locale.loading ?? DEFAULT_LOCALE.loading}\n      className={cn('flex items-center gap-3', className)}\n      style={style}\n      {...props}\n    >\n      {avatar && (\n        <Core\n          className={cn(\n            'h-12 w-12',\n            'rounded-xl',\n            !active && 'animate-none',\n            classNames.avatar,\n          )}\n        />\n      )}\n      <div\n        className={cn(\n          'flex min-w-0 grow',\n          (orientation ?? direction) === 'vertical' && 'flex-col',\n          classNames.wrapper,\n        )}\n        style={{\n          gap,\n        }}\n      >\n        {Array.from({ length: count }).map((_, index) => {\n          const itemWidth = getValueAtIndex(width, index);\n          const itemHeight = getValueAtIndex(height, index);\n\n          return (\n            <Core\n              key={index}\n              className={cn(\n                'rounded-md',\n                !active && 'animate-none',\n                // SIZES are fixed widths; cap them so a narrow container\n                // shrinks the placeholder instead of being overflowed.\n                SIZES[size],\n                'max-w-full',\n                classNames.item,\n                //\n              )}\n              style={{\n                width: itemWidth,\n                height: itemHeight,\n              }}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;AAOA,MAAM,EAAE,UAAU,SAASA;AAE3B,MAAM,mBAAuB,OAAgB,UAAkB;CAC7D,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,UAAU,MAAM,KAAM;AAC7D;AAqBA,MAAM,QAAQ;CACZ,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,MAAM,YAAY,EAChB,SAAS,MACT,UAAU,MACV,QACA,OAAO,WACP,aACA,YAAY,YACZ,QAAQ,GACR,MAAM,GACN,WACA,aAAa,CAAC,GACd,OACA,OACA,QACA,UACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAQ7B,IAAI,CAAC,SACH,OAAO,YAAY;CAGrB,OACE,qBAAC,OAAD;EACE,MAAK;EACL,cAAY,OAAO,WAAW,eAAe;EAC7C,WAAW,GAAG,2BAA2B,SAAS;EAC3C;EACP,GAAI;EALN,UAAA,CAOG,UACC,oBAAC,MAAD,EACE,WAAW,GACT,aACA,cACA,CAAC,UAAU,gBACX,WAAW,MACb,EACD,CAAA,GAEH,oBAAC,OAAD;GACE,WAAW,GACT,sBACC,eAAe,eAAe,cAAc,YAC7C,WAAW,OACb;GACA,OAAO,EACL,IACF;GAEC,UAAA,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;IAC/C,MAAM,YAAY,gBAAgB,OAAO,KAAK;IAC9C,MAAM,aAAa,gBAAgB,QAAQ,KAAK;IAEhD,OACE,oBAAC,MAAD;KAEE,WAAW,GACT,cACA,CAAC,UAAU,gBAGX,MAAM,OACN,cACA,WAAW,IAEb;KACA,OAAO;MACL,OAAO;MACP,QAAQ;KACV;IACD,GAfM,KAeN;GAEL,CAAC;EACE,CAAA,CACF;;AAET"}

package/dist/components/molecules/collapse.d.mts

@@ -1,13 +1,13 @@
 import React from "react";
 //#region src/components/molecules/collapse.d.ts
-interface Item {
-  key: React.Key;
+interface Item<Key extends React.Key = string> {
+  key: Key;
   label: React.ReactNode;
   disabled?: boolean;
   children: React.ReactNode;
 }
-interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value' | 'dir'> {
-  items?: Item[];
+interface Props<Key extends React.Key = string> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue' | 'value' | 'dir'> {
+  items?: Item<Key>[];
   accordion?: boolean;
   expandIcon?: React.ReactNode;
   classNames?: {
@@ -15,11 +15,11 @@ interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' |
     header?: string;
     body?: string;
   };
-  defaultActiveKey?: string[] | number[];
-  activeKey?: string[] | number[];
-  onChange?: (keys: string[]) => void;
+  defaultActiveKey?: Key[];
+  activeKey?: Key[];
+  onChange?: (keys: Key[]) => void;
 }
-declare const Collapse: ({ expandIcon, accordion, items, className, classNames, defaultActiveKey, activeKey: _activeKey, onChange: _onChange, ...props }: Props) => React.JSX.Element;
+declare const Collapse: <Key extends React.Key = string>({ expandIcon, accordion, items, className, classNames, defaultActiveKey, activeKey: _activeKey, onChange: _onChange, ...props }: Props<Key>) => React.JSX.Element;
 //#endregion
 export { Props, Collapse as default };
 //# sourceMappingURL=collapse.d.mts.map

package/dist/components/molecules/collapse.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.mts","names":[],"sources":["../../../src/components/molecules/collapse.tsx"],"mappings":";;UAWU;EACR,KAAK,MAAM;EACX,OAAO,MAAM;EACb;EACA,UAAU,MAAM;;UAGD,cAAc,KAC7B,MAAM;EAGN,QAAQ;EACR;EACA,aAAa,MAAM;EACnB;IACE;IACA;IACA;;EAEF;EACA;EACA,YAAY;;cAGR,aAAY,YAAA,WAAA,OAAA,WAAA,YAAA,kBAAA,WAAA,YAAA,UAAA,cAAA,SAUf,UAAK,MAAA,IAAA"}
+{"version":3,"file":"collapse.d.mts","names":[],"sources":["../../../src/components/molecules/collapse.tsx"],"mappings":";;UAWU,KAAK,YAAY,MAAM;EAC/B,KAAK;EACL,OAAO,MAAM;EACb;EACA,UAAU,MAAM;;UAGD,MAAM,YAAY,MAAM,sBAAsB,KAC7D,MAAM;EAGN,QAAQ,KAAK;EACb;EACA,aAAa,MAAM;EACnB;IACE;IACA;IACA;;EAEF,mBAAmB;EACnB,YAAY;EACZ,YAAY,MAAM;;cAGd,WAAY,YAAY,MAAM,gBAAc,YAAA,WAAA,OAAA,WAAA,YAAA,kBAAA,WAAA,YAAA,UAAA,cAAA,SAU/C,MAAM,SAAI,MAAA,IAAA"}

package/dist/components/molecules/collapse.mjs

@@ -6,12 +6,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/collapse.tsx
 const { Accordion, AccordionItem, AccordionTrigger, AccordionContent } = accordion_exports;
 const Collapse = ({ expandIcon, accordion = false, items = [], className, classNames, defaultActiveKey, activeKey: _activeKey, onChange: _onChange, ...props }) => {
+	const controlled = _activeKey !== void 0;
+	const keysByValue = new Map([
+		...defaultActiveKey ?? [],
+		..._activeKey ?? [],
+		...items.map((item) => item.key)
+	].map((key) => [String(key), key]));
 	const accordionProps = {
 		multiple: !accordion,
 		onValueChange: (values) => {
-			_onChange?.(values);
+			_onChange?.(values.flatMap((value) => {
+				const key = keysByValue.get(value);
+				return key === void 0 ? [] : [key];
+			}));
 		},
-		..._activeKey !== void 0 ? { value: (_activeKey ?? []).map((key) => `${key}`) } : { defaultValue: (defaultActiveKey ?? []).map((key) => `${key}`) }
+		...controlled ? { value: (_activeKey ?? []).map((key) => String(key)) } : { defaultValue: (defaultActiveKey ?? []).map((key) => String(key)) }
 	};
 	return /* @__PURE__ */ jsx(Accordion, {
 		...props,

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

@@ -1 +1 @@
-{"version":3,"file":"collapse.mjs","names":["accordion"],"sources":["../../../src/components/molecules/collapse.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { accordion } from '../../core';\n\nconst { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =\n  accordion;\n\ninterface Item {\n  key: React.Key;\n  label: React.ReactNode;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'defaultValue' | 'value' | 'dir'\n> {\n  items?: Item[];\n  accordion?: boolean;\n  expandIcon?: React.ReactNode;\n  classNames?: {\n    item?: string;\n    header?: string;\n    body?: string;\n  };\n  defaultActiveKey?: string[] | number[];\n  activeKey?: string[] | number[];\n  onChange?: (keys: string[]) => void;\n}\n\nconst Collapse = ({\n  expandIcon,\n  accordion = false,\n  items = [],\n  className,\n  classNames,\n  defaultActiveKey,\n  activeKey: _activeKey,\n  onChange: _onChange,\n  ...props\n}: Props) => {\n  const controlled = _activeKey !== undefined;\n\n  // Base UI's accordion has no `type` and always models the open set as an\n  // array; `multiple` (default false) is the only single-vs-multiple switch.\n  // `accordion` here means \"one panel open at a time\", so `multiple = !accordion`.\n  const accordionProps = {\n    multiple: !accordion,\n    onValueChange: (values: string[]) => {\n      _onChange?.(values);\n    },\n    ...(controlled\n      ? { value: (_activeKey ?? []).map(key => `${key}`) }\n      : { defaultValue: (defaultActiveKey ?? []).map(key => `${key}`) }),\n  };\n\n  return (\n    <Accordion {...props} className={className} {...accordionProps}>\n      {items.map(({ key, label, children, disabled }) => (\n        <AccordionItem\n          key={key}\n          value={String(key)}\n          className={cn(\n            'border-none',\n            classNames?.item,\n            //\n          )}\n          disabled={disabled}\n        >\n          <AccordionTrigger\n            className={cn(\n              'hover:no-underline',\n              classNames?.header,\n              disabled && 'cursor-no-drop opacity-50',\n              //\n            )}\n            expandIcon={expandIcon}\n            disabled={disabled}\n          >\n            {label}\n          </AccordionTrigger>\n          <AccordionContent\n            className={cn(\n              classNames?.body,\n              //\n            )}\n          >\n            {children}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n\nexport default Collapse;\n"],"mappings":";;;;;;AAQA,MAAM,EAAE,WAAW,eAAe,kBAAkB,qBAClDA;AA0BF,MAAM,YAAY,EAChB,YACA,YAAY,OACZ,QAAQ,CAAC,GACT,WACA,YACA,kBACA,WAAW,YACX,UAAU,WACV,GAAG,YACQ;CAMX,MAAM,iBAAiB;EACrB,UAAU,CAAC;EACX,gBAAgB,WAAqB;GACnC,YAAY,MAAM;EACpB;EACA,GAViB,eAAe,KAAA,IAW5B,EAAE,QAAQ,cAAc,CAAC,EAAA,CAAG,KAAI,QAAO,GAAG,KAAK,EAAE,IACjD,EAAE,eAAe,oBAAoB,CAAC,EAAA,CAAG,KAAI,QAAO,GAAG,KAAK,EAAE;CACpE;CAEA,OACE,oBAAC,WAAD;EAAW,GAAI;EAAkB;EAAW,GAAI;EAC7C,UAAA,MAAM,KAAK,EAAE,KAAK,OAAO,UAAU,eAClC,qBAAC,eAAD;GAEE,OAAO,OAAO,GAAG;GACjB,WAAW,GACT,eACA,YAAY,IAEd;GACU;GARZ,UAAA,CAUE,oBAAC,kBAAD;IACE,WAAW,GACT,sBACA,YAAY,QACZ,YAAY,2BAEd;IACY;IACF;IAET,UAAA;GACe,CAAA,GAClB,oBAAC,kBAAD;IACE,WAAW,GACT,YAAY,IAEd;IAEC;GACe,CAAA,CACL;EA7BR,GAAA,GA6BQ,CAChB;CACQ,CAAA;AAEf"}
+{"version":3,"file":"collapse.mjs","names":["accordion"],"sources":["../../../src/components/molecules/collapse.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { accordion } from '../../core';\n\nconst { Accordion, AccordionItem, AccordionTrigger, AccordionContent } =\n  accordion;\n\ninterface Item<Key extends React.Key = string> {\n  key: Key;\n  label: React.ReactNode;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface Props<Key extends React.Key = string> extends Omit<\n  React.ComponentPropsWithoutRef<'div'>,\n  'onChange' | 'defaultValue' | 'value' | 'dir'\n> {\n  items?: Item<Key>[];\n  accordion?: boolean;\n  expandIcon?: React.ReactNode;\n  classNames?: {\n    item?: string;\n    header?: string;\n    body?: string;\n  };\n  defaultActiveKey?: Key[];\n  activeKey?: Key[];\n  onChange?: (keys: Key[]) => void;\n}\n\nconst Collapse = <Key extends React.Key = string>({\n  expandIcon,\n  accordion = false,\n  items = [],\n  className,\n  classNames,\n  defaultActiveKey,\n  activeKey: _activeKey,\n  onChange: _onChange,\n  ...props\n}: Props<Key>) => {\n  const controlled = _activeKey !== undefined;\n  const keysByValue = new Map<string, Key>(\n    [\n      ...(defaultActiveKey ?? []),\n      ...(_activeKey ?? []),\n      ...items.map(item => item.key),\n    ].map(key => [String(key), key]),\n  );\n\n  // Base UI's accordion has no `type` and always models the open set as an\n  // array; `multiple` (default false) is the only single-vs-multiple switch.\n  // `accordion` here means \"one panel open at a time\", so `multiple = !accordion`.\n  const accordionProps = {\n    multiple: !accordion,\n    onValueChange: (values: string[]) => {\n      _onChange?.(\n        values.flatMap(value => {\n          const key = keysByValue.get(value);\n\n          return key === undefined ? [] : [key];\n        }),\n      );\n    },\n    ...(controlled\n      ? { value: (_activeKey ?? []).map(key => String(key)) }\n      : { defaultValue: (defaultActiveKey ?? []).map(key => String(key)) }),\n  };\n\n  return (\n    <Accordion {...props} className={className} {...accordionProps}>\n      {items.map(({ key, label, children, disabled }) => (\n        <AccordionItem\n          key={key}\n          value={String(key)}\n          className={cn(\n            'border-none',\n            classNames?.item,\n            //\n          )}\n          disabled={disabled}\n        >\n          <AccordionTrigger\n            className={cn(\n              'hover:no-underline',\n              classNames?.header,\n              disabled && 'cursor-no-drop opacity-50',\n              //\n            )}\n            expandIcon={expandIcon}\n            disabled={disabled}\n          >\n            {label}\n          </AccordionTrigger>\n          <AccordionContent\n            className={cn(\n              classNames?.body,\n              //\n            )}\n          >\n            {children}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n};\n\nexport default Collapse;\n"],"mappings":";;;;;;AAQA,MAAM,EAAE,WAAW,eAAe,kBAAkB,qBAClDA;AA0BF,MAAM,YAA4C,EAChD,YACA,YAAY,OACZ,QAAQ,CAAC,GACT,WACA,YACA,kBACA,WAAW,YACX,UAAU,WACV,GAAG,YACa;CAChB,MAAM,aAAa,eAAe,KAAA;CAClC,MAAM,cAAc,IAAI,IACtB;EACE,GAAI,oBAAoB,CAAC;EACzB,GAAI,cAAc,CAAC;EACnB,GAAG,MAAM,KAAI,SAAQ,KAAK,GAAG;CAC/B,CAAC,CAAC,KAAI,QAAO,CAAC,OAAO,GAAG,GAAG,GAAG,CAAC,CACjC;CAKA,MAAM,iBAAiB;EACrB,UAAU,CAAC;EACX,gBAAgB,WAAqB;GACnC,YACE,OAAO,SAAQ,UAAS;IACtB,MAAM,MAAM,YAAY,IAAI,KAAK;IAEjC,OAAO,QAAQ,KAAA,IAAY,CAAC,IAAI,CAAC,GAAG;GACtC,CAAC,CACH;EACF;EACA,GAAI,aACA,EAAE,QAAQ,cAAc,CAAC,EAAA,CAAG,KAAI,QAAO,OAAO,GAAG,CAAC,EAAE,IACpD,EAAE,eAAe,oBAAoB,CAAC,EAAA,CAAG,KAAI,QAAO,OAAO,GAAG,CAAC,EAAE;CACvE;CAEA,OACE,oBAAC,WAAD;EAAW,GAAI;EAAkB;EAAW,GAAI;EAC7C,UAAA,MAAM,KAAK,EAAE,KAAK,OAAO,UAAU,eAClC,qBAAC,eAAD;GAEE,OAAO,OAAO,GAAG;GACjB,WAAW,GACT,eACA,YAAY,IAEd;GACU;GARZ,UAAA,CAUE,oBAAC,kBAAD;IACE,WAAW,GACT,sBACA,YAAY,QACZ,YAAY,2BAEd;IACY;IACF;IAET,UAAA;GACe,CAAA,GAClB,oBAAC,kBAAD;IACE,WAAW,GACT,YAAY,IAEd;IAEC;GACe,CAAA,CACL;EA7BR,GAAA,GA6BQ,CAChB;CACQ,CAAA;AAEf"}

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

@@ -1,16 +1,18 @@
-import Breadcrumb, { Props } from "../../Breadcrumb.mjs";
-import Card, { Props as Props$1 } from "../../Card.mjs";
-import Menu, { Props as Props$2 } from "./menu/menu.mjs";
-import Pagination, { Props as Props$3 } from "../../Pagination.mjs";
-import { Props as Props$4 } from "./reveals/reveals.mjs";
+import Alert, { Props } from "../../Alert.mjs";
+import Breadcrumb, { Props as Props$1 } from "../../Breadcrumb.mjs";
+import Card, { Props as Props$2 } from "../../Card.mjs";
+import Menu, { Props as Props$3 } from "./menu/menu.mjs";
+import Pagination, { Props as Props$4 } from "../../Pagination.mjs";
+import { Props as Props$5 } from "./reveals/reveals.mjs";
 import Reveals from "../../Reveals.mjs";
-import Space, { Props as Props$5 } from "../../Space.mjs";
-import Collapse, { Props as Props$6 } from "./collapse.mjs";
-import Dropdown, { Props as Props$7 } from "./dropdown.mjs";
-import { Props as Props$8 } from "./marquees/marquees.mjs";
+import Space, { Props as Props$6 } from "../../Space.mjs";
+import Steps, { Item, Props as Props$7 } from "../../Steps.mjs";
+import Collapse, { Props as Props$8 } from "./collapse.mjs";
+import Dropdown, { Props as Props$9 } from "./dropdown.mjs";
+import { Props as Props$10 } from "./marquees/marquees.mjs";
 import Marquees from "./marquees/index.mjs";
-import { Props as Props$9 } from "./splitter/splitter.mjs";
+import { Props as Props$11 } from "./splitter/splitter.mjs";
 import Splitter from "./splitter/index.mjs";
-import Tabs, { Props as Props$10 } from "./tabs.mjs";
-import Upload, { Props as Props$11, UploadFile } from "./upload.mjs";
-export { Breadcrumb, type Props as BreadcrumbProps, Card, type Props$1 as CardProps, Collapse, type Props$6 as CollapseProps, Dropdown, type Props$7 as DropdownProps, Marquees, type Props$8 as MarqueesProps, Menu, type Props$2 as MenuProps, Pagination, type Props$3 as PaginationProps, Reveals, type Props$4 as RevealsProps, Space, type Props$5 as SpaceProps, Splitter, type Props$9 as SplitterProps, Tabs, type Props$10 as TabsProps, Upload, type UploadFile, type Props$11 as UploadProps };
+import Tabs, { Props as Props$12 } from "./tabs.mjs";
+import Upload, { Props as Props$13, UploadFile } from "./upload.mjs";
+export { Alert, type Props as AlertProps, Breadcrumb, type Props$1 as BreadcrumbProps, Card, type Props$2 as CardProps, Collapse, type Props$8 as CollapseProps, Dropdown, type Props$9 as DropdownProps, Marquees, type Props$10 as MarqueesProps, Menu, type Props$3 as MenuProps, Pagination, type Props$4 as PaginationProps, Reveals, type Props$5 as RevealsProps, Space, type Props$6 as SpaceProps, Splitter, type Props$11 as SplitterProps, type Item as StepItem, Steps, type Props$7 as StepsProps, Tabs, type Props$12 as TabsProps, Upload, type UploadFile, type Props$13 as UploadProps };

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

@@ -2,8 +2,8 @@
 import { cn } from "../../../../utils.mjs";
 import Label from "./label.mjs";
 import { MENU_CLASSNAMES } from "../menu.mjs";
-import { createElement, useRef, useState } from "react";
 import { ChevronDown } from "lucide-react";
+import { createElement, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/menu/item/item.tsx