@jbpark/ui-kit 10.1.0 → 10.3.0

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[];
+export 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 };
+export { 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;;iBAGD,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/dropdown.d.mts

@@ -1,7 +1,7 @@
 import { MenuProps } from "./menu/menu.mjs";
 //#region src/components/molecules/dropdown.d.ts
 type ChangeEventHandler = (open: boolean) => void;
-interface Props extends React.ComponentPropsWithoutRef<'div'> {
+export interface Props extends React.ComponentPropsWithoutRef<'div'> {
   open?: boolean;
   trigger?: 'hover' | 'click';
   menu?: MenuProps;
@@ -9,5 +9,5 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const Dropdown: ({ children, menu, trigger, open: _open, onOpenChange: _onOpenChange, className, onMouseEnter, onMouseLeave, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Dropdown as default };
+export { Dropdown as default };
 //# sourceMappingURL=dropdown.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;KAYK,sBAAsB;UAEV,cAAc,MAAM;EACnC;EACA;EACA,OAAO;EACP,eAAe;;cAGX,aAAY,UAAA,MAAA,SAAA,MAAA,OAAA,cAAA,eAAA,WAAA,cAAA,iBAAA,SAUf,0BAAK,IAAA"}
+{"version":3,"file":"dropdown.d.mts","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"mappings":";;KAYK,sBAAsB;iBAEV,cAAc,MAAM;EACnC;EACA;EACA,OAAO;EACP,eAAe;;cAGX,aAAY,UAAA,MAAA,SAAA,MAAA,OAAA,cAAA,eAAA,WAAA,cAAA,iBAAA,SAUf,0BAAK,IAAA"}

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

@@ -1,16 +1,26 @@
-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 Anchor, { Item, Props as Props$1 } from "../../Anchor.mjs";
+import Breadcrumb, { Props as Props$2 } from "../../Breadcrumb.mjs";
+import Card, { Props as Props$3 } from "../../Card.mjs";
+import ContextMenu, { Item as Item$1, Props as Props$4 } from "../../ContextMenu.mjs";
+import Descriptions, { Columns, Item as Item$2, Props as Props$5 } from "../../Descriptions.mjs";
+import Menu, { Props as Props$6 } from "./menu/menu.mjs";
+import Pagination, { Props as Props$7 } from "../../Pagination.mjs";
+import Popconfirm, { Props as Props$8 } from "../../Popconfirm.mjs";
+import { Props as Props$9 } 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 ScrollArea, { Props as Props$10 } from "../../ScrollArea.mjs";
+import Space, { Props as Props$11 } from "../../Space.mjs";
+import Statistic, { Props as Props$12 } from "../../Statistic.mjs";
+import Steps, { Item as Item$3, Props as Props$13 } from "../../Steps.mjs";
+import Timeline, { Item as Item$4, Props as Props$14, Timestamp } from "../../Timeline.mjs";
+import Transfer, { Item as Item$5, Props as Props$15 } from "../../Transfer.mjs";
+import Collapse, { Props as Props$16 } from "./collapse.mjs";
+import Dropdown, { Props as Props$17 } from "./dropdown.mjs";
+import { Props as Props$18 } from "./marquees/marquees.mjs";
 import Marquees from "./marquees/index.mjs";
-import { Props as Props$9 } from "./splitter/splitter.mjs";
+import { Props as Props$19 } 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$20 } from "./tabs.mjs";
+import Upload, { Props as Props$21, UploadFile } from "./upload.mjs";
+export { Alert, type Props as AlertProps, Anchor, type Item as AnchorItem, type Props$1 as AnchorProps, Breadcrumb, type Props$2 as BreadcrumbProps, Card, type Props$3 as CardProps, Collapse, type Props$16 as CollapseProps, ContextMenu, type Item$1 as ContextMenuItem, type Props$4 as ContextMenuProps, type Item$2 as DescriptionItem, Descriptions, type Columns as DescriptionsColumns, type Props$5 as DescriptionsProps, Dropdown, type Props$17 as DropdownProps, Marquees, type Props$18 as MarqueesProps, Menu, type Props$6 as MenuProps, Pagination, type Props$7 as PaginationProps, Popconfirm, type Props$8 as PopconfirmProps, Reveals, type Props$9 as RevealsProps, ScrollArea, type Props$10 as ScrollAreaProps, Space, type Props$11 as SpaceProps, Splitter, type Props$19 as SplitterProps, Statistic, type Props$12 as StatisticProps, type Item$3 as StepItem, Steps, type Props$13 as StepsProps, Tabs, type Props$20 as TabsProps, Timeline, type Item$4 as TimelineItem, type Props$14 as TimelineProps, type Timestamp as TimelineTimestamp, Transfer, type Item$5 as TransferItem, type Props$15 as TransferProps, Upload, type UploadFile, type Props$21 as UploadProps };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/index.ts"],"mappings":";;;KAGK,2BAA2B;EAAiB,aAAa;;cAExD,UAA2B"}
+{"version":3,"file":"index.d.mts","names":["MarqueesImpl"],"sources":["../../../../src/components/molecules/marquees/index.ts"],"mappings":";;;KAGK,2BAA2BA;EAAiB,aAAa;;cAExD,UAA2B"}

package/dist/components/molecules/marquees/item.d.mts

@@ -1,5 +1,5 @@
 //#region src/components/molecules/marquees/item.d.ts
-interface ItemProps {
+export interface ItemProps {
   key?: React.Key;
   speed?: number;
   autoFill?: boolean | number;
@@ -8,10 +8,10 @@ interface ItemProps {
   gap?: number;
   children?: React.ReactNode;
 }
-interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {
   width: string | number;
 }
-declare const Item: ({ width: _width, speed, autoFill, pause: _pause, pauseOnHover, gap, children }: Props) => import("react").JSX.Element;
+declare const Item: ({ width: _width, speed, autoFill, pause, pauseOnHover, gap, children }: Props) => import("react").JSX.Element;
 //#endregion
-export { ItemProps, Props, Item as default };
+export { Item as default };
 //# sourceMappingURL=item.d.mts.map

package/dist/components/molecules/marquees/item.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"mappings":";UASiB;EACf,MAAM,MAAM;EACZ;EACA;EACA;EACA;EACA;EACA,WAAW,MAAM;;UAGF,cACP,KAAK,MAAM,yCAAyC;EAC5D;;cAoBI,SAAQ,OAAA,QAAA,OAAA,UAAA,OAAA,QAAA,cAAA,KAAA,YAQX,0BAAK,IAAA"}
+{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"mappings":";iBAQiB;EACf,MAAM,MAAM;EACZ;EACA;EACA;EACA;EACA;EACA,WAAW,MAAM;;iBAGF,cACP,KAAK,MAAM,yCAAyC;EAC5D;;cAoBI,SAAQ,OAAA,QAAA,OAAA,UAAA,OAAA,cAAA,KAAA,YAQX,0BAAK,IAAA"}

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

@@ -1,6 +1,6 @@
 "use client";
-import usePauseOnHover from "./use-pause-on-hover.mjs";
 import { useEffect, useRef, useState } from "react";
+import { useHoverOrFocusWithin } from "@jbpark/use-hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useGSAP } from "@gsap/react";
 import { gsap } from "gsap";
@@ -10,12 +10,12 @@ const resolveInitialRepeatCount = (autoFill) => {
 	if (!autoFill) return 0;
 	return typeof autoFill === "boolean" ? INITIAL_AUTO_FILL_GUESS : autoFill;
 };
-const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = false, pauseOnHover = false, gap = 0, children }) => {
+const Item = ({ width: _width, speed = 100, autoFill = false, pause = false, pauseOnHover = false, gap = 0, children }) => {
 	const itemRefs = useRef([]);
 	const containerRef = useRef(null);
 	const tweenRef = useRef(null);
 	const [width, setWidth] = useState(_width);
-	const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);
+	const { active: isHoverOrFocusPaused, handlers } = useHoverOrFocusWithin({ enabled: pauseOnHover });
 	const [repeatCount, setRepeatCount] = useState(resolveInitialRepeatCount(autoFill));
 	const [prevWidthProp, setPrevWidthProp] = useState(_width);
 	const [prevAutoFill, setPrevAutoFill] = useState(autoFill);
@@ -33,7 +33,7 @@ const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = fa
 		setWidth(_width);
 		setRepeatCount(resolveInitialRepeatCount(autoFill));
 	}
-	const isPaused = _pause || pause;
+	const isPaused = pause || isHoverOrFocusPaused;
 	useEffect(() => {
 		if (!autoFill || !children || !itemRefs.current[0] || typeof width === "string") return;
 		const itemWidth = itemRefs.current[0].offsetWidth;
@@ -79,7 +79,7 @@ const Item = ({ width: _width, speed = 100, autoFill = false, pause: _pause = fa
 	}, [isPaused]);
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex overflow-hidden",
-		...hoverEvents,
+		...handlers,
 		children: /* @__PURE__ */ jsx("div", {
 			ref: containerRef,
 			className: "flex flex-nowrap",

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

@@ -1 +1 @@
-{"version":3,"file":"item.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useGSAP } from '@gsap/react';\nimport { gsap } from 'gsap';\n\nimport usePauseOnHover from './use-pause-on-hover';\n\nexport interface ItemProps {\n  key?: React.Key;\n  speed?: number;\n  autoFill?: boolean | number;\n  pause?: boolean;\n  pauseOnHover?: boolean;\n  gap?: number;\n  children?: React.ReactNode;\n}\n\nexport interface Props\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {\n  width: string | number;\n}\n\n// `autoFill={true}` (the default on `Marquees`) needs *some* repeat count\n// before the item can be measured and the real count computed — this is\n// only ever visible for that one render, but rendering 100 copies (200\n// with the 2x loop duplication) up front was needlessly heavy for the\n// common case. A modest guess still avoids visible gaps for typical\n// item/container width ratios while cutting the worst-case default\n// render by ~90%.\nconst INITIAL_AUTO_FILL_GUESS = 10;\n\nconst resolveInitialRepeatCount = (autoFill: boolean | number) => {\n  if (!autoFill) {\n    return 0;\n  }\n\n  return typeof autoFill === 'boolean' ? INITIAL_AUTO_FILL_GUESS : autoFill;\n};\n\nconst Item = ({\n  width: _width,\n  speed = 100,\n  autoFill = false,\n  pause: _pause = false,\n  pauseOnHover = false,\n  gap = 0,\n  children,\n}: Props) => {\n  const itemRefs = useRef<HTMLDivElement[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tweenRef = useRef<gsap.core.Tween | null>(null);\n\n  const [width, setWidth] = useState<string | number>(_width);\n  const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);\n  const [repeatCount, setRepeatCount] = useState(\n    resolveInitialRepeatCount(autoFill),\n  );\n  const [prevWidthProp, setPrevWidthProp] = useState(_width);\n  const [prevAutoFill, setPrevAutoFill] = useState(autoFill);\n  const [prevGap, setPrevGap] = useState(gap);\n\n  // Adjusted directly in render (React's \"adjust state during render\"\n  // pattern) instead of an effect, so `width`/`repeatCount` re-sync with\n  // the prop in the same render it changes rather than the render after.\n  if (_width !== prevWidthProp) {\n    setPrevWidthProp(_width);\n    setWidth(_width);\n  }\n\n  if (autoFill !== prevAutoFill) {\n    setPrevAutoFill(autoFill);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  // `gap` widens every copy, so both the measured item width and the repeat\n  // count derived from it are stale. Rewind `width` to the container width\n  // so the measuring effect below recomputes the loop distance from scratch.\n  if (gap !== prevGap) {\n    setPrevGap(gap);\n    setWidth(_width);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  const isPaused = _pause || pause;\n\n  useEffect(() => {\n    if (\n      !autoFill ||\n      !children ||\n      !itemRefs.current[0] ||\n      typeof width === 'string'\n    ) {\n      return;\n    }\n\n    // `offsetWidth` is the border-box width, so it already includes the\n    // `gap` padding each copy carries — the loop distance stays exact\n    // without adding `gap` back in here.\n    const itemWidth = itemRefs.current[0].offsetWidth;\n\n    if (itemWidth >= width) {\n      setWidth(itemWidth);\n      setRepeatCount(0);\n      return;\n    }\n\n    let totalWidth = 0;\n    let repeatCount = 0;\n\n    while (totalWidth < width) {\n      totalWidth += itemWidth;\n      repeatCount += 1;\n    }\n\n    setWidth(totalWidth);\n    setRepeatCount(repeatCount - 1);\n  }, [autoFill, width, children, gap]);\n\n  useGSAP(\n    () => {\n      if (!containerRef.current || typeof width === 'string') {\n        return;\n      }\n\n      if (tweenRef.current) {\n        tweenRef.current.kill();\n      }\n\n      tweenRef.current = gsap.fromTo(\n        containerRef.current,\n        { x: 0 },\n        {\n          x: -width,\n          duration: width / speed,\n          repeat: -1,\n          ease: 'linear',\n        },\n      );\n\n      return () => {\n        tweenRef.current?.kill();\n      };\n    },\n    {\n      scope: containerRef,\n      dependencies: [width, speed],\n    },\n  );\n\n  useEffect(() => {\n    if (!tweenRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  }, [isPaused]);\n\n  return (\n    <div\n      className=\"flex overflow-hidden\"\n      {...hoverEvents}\n      //\n    >\n      <div ref={containerRef} className=\"flex flex-nowrap\">\n        {[...Array(2)].map((_, index) => (\n          <div\n            key={index}\n            style={{ minWidth: width }}\n            className=\"flex flex-nowrap\"\n          >\n            {/* Every copy carries the same trailing `gap`, so the spacing is\n                uniform at the seam between copies and between the two loop\n                halves — no special-casing at either boundary. */}\n            <div\n              ref={el => {\n                if (el) {\n                  itemRefs.current[index] = el;\n                }\n              }}\n              style={{ paddingRight: gap }}\n            >\n              {children}\n            </div>\n            {[\n              ...Array(typeof autoFill === 'number' ? autoFill : repeatCount),\n            ].map((_, i) => (\n              <div key={i} style={{ paddingRight: gap }}>\n                {children}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":"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"}
+{"version":3,"file":"item.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/item.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useGSAP } from '@gsap/react';\nimport { useHoverOrFocusWithin } from '@jbpark/use-hooks';\nimport { gsap } from 'gsap';\n\nexport interface ItemProps {\n  key?: React.Key;\n  speed?: number;\n  autoFill?: boolean | number;\n  pause?: boolean;\n  pauseOnHover?: boolean;\n  gap?: number;\n  children?: React.ReactNode;\n}\n\nexport interface Props\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'key'>, ItemProps {\n  width: string | number;\n}\n\n// `autoFill={true}` (the default on `Marquees`) needs *some* repeat count\n// before the item can be measured and the real count computed — this is\n// only ever visible for that one render, but rendering 100 copies (200\n// with the 2x loop duplication) up front was needlessly heavy for the\n// common case. A modest guess still avoids visible gaps for typical\n// item/container width ratios while cutting the worst-case default\n// render by ~90%.\nconst INITIAL_AUTO_FILL_GUESS = 10;\n\nconst resolveInitialRepeatCount = (autoFill: boolean | number) => {\n  if (!autoFill) {\n    return 0;\n  }\n\n  return typeof autoFill === 'boolean' ? INITIAL_AUTO_FILL_GUESS : autoFill;\n};\n\nconst Item = ({\n  width: _width,\n  speed = 100,\n  autoFill = false,\n  pause = false,\n  pauseOnHover = false,\n  gap = 0,\n  children,\n}: Props) => {\n  const itemRefs = useRef<HTMLDivElement[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tweenRef = useRef<gsap.core.Tween | null>(null);\n\n  const [width, setWidth] = useState<string | number>(_width);\n  const { active: isHoverOrFocusPaused, handlers } = useHoverOrFocusWithin({\n    enabled: pauseOnHover,\n  });\n  const [repeatCount, setRepeatCount] = useState(\n    resolveInitialRepeatCount(autoFill),\n  );\n  const [prevWidthProp, setPrevWidthProp] = useState(_width);\n  const [prevAutoFill, setPrevAutoFill] = useState(autoFill);\n  const [prevGap, setPrevGap] = useState(gap);\n\n  // Adjusted directly in render (React's \"adjust state during render\"\n  // pattern) instead of an effect, so `width`/`repeatCount` re-sync with\n  // the prop in the same render it changes rather than the render after.\n  if (_width !== prevWidthProp) {\n    setPrevWidthProp(_width);\n    setWidth(_width);\n  }\n\n  if (autoFill !== prevAutoFill) {\n    setPrevAutoFill(autoFill);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  // `gap` widens every copy, so both the measured item width and the repeat\n  // count derived from it are stale. Rewind `width` to the container width\n  // so the measuring effect below recomputes the loop distance from scratch.\n  if (gap !== prevGap) {\n    setPrevGap(gap);\n    setWidth(_width);\n    setRepeatCount(resolveInitialRepeatCount(autoFill));\n  }\n\n  const isPaused = pause || isHoverOrFocusPaused;\n\n  useEffect(() => {\n    if (\n      !autoFill ||\n      !children ||\n      !itemRefs.current[0] ||\n      typeof width === 'string'\n    ) {\n      return;\n    }\n\n    // `offsetWidth` is the border-box width, so it already includes the\n    // `gap` padding each copy carries — the loop distance stays exact\n    // without adding `gap` back in here.\n    const itemWidth = itemRefs.current[0].offsetWidth;\n\n    if (itemWidth >= width) {\n      setWidth(itemWidth);\n      setRepeatCount(0);\n      return;\n    }\n\n    let totalWidth = 0;\n    let repeatCount = 0;\n\n    while (totalWidth < width) {\n      totalWidth += itemWidth;\n      repeatCount += 1;\n    }\n\n    setWidth(totalWidth);\n    setRepeatCount(repeatCount - 1);\n  }, [autoFill, width, children, gap]);\n\n  useGSAP(\n    () => {\n      if (!containerRef.current || typeof width === 'string') {\n        return;\n      }\n\n      if (tweenRef.current) {\n        tweenRef.current.kill();\n      }\n\n      tweenRef.current = gsap.fromTo(\n        containerRef.current,\n        { x: 0 },\n        {\n          x: -width,\n          duration: width / speed,\n          repeat: -1,\n          ease: 'linear',\n        },\n      );\n\n      return () => {\n        tweenRef.current?.kill();\n      };\n    },\n    {\n      scope: containerRef,\n      dependencies: [width, speed],\n    },\n  );\n\n  useEffect(() => {\n    if (!tweenRef.current) {\n      return;\n    }\n\n    if (isPaused) {\n      tweenRef.current.pause();\n    } else {\n      tweenRef.current.play();\n    }\n  }, [isPaused]);\n\n  return (\n    <div\n      className=\"flex overflow-hidden\"\n      {...handlers}\n      //\n    >\n      <div ref={containerRef} className=\"flex flex-nowrap\">\n        {[...Array(2)].map((_, index) => (\n          <div\n            key={index}\n            style={{ minWidth: width }}\n            className=\"flex flex-nowrap\"\n          >\n            {/* Every copy carries the same trailing `gap`, so the spacing is\n                uniform at the seam between copies and between the two loop\n                halves — no special-casing at either boundary. */}\n            <div\n              ref={el => {\n                if (el) {\n                  itemRefs.current[index] = el;\n                }\n              }}\n              style={{ paddingRight: gap }}\n            >\n              {children}\n            </div>\n            {[\n              ...Array(typeof autoFill === 'number' ? autoFill : repeatCount),\n            ].map((_, i) => (\n              <div key={i} style={{ paddingRight: gap }}>\n                {children}\n              </div>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Item;\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { ItemProps } from "./item.mjs";
 //#region src/components/molecules/marquees/marquees.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'> {
+export interface Props extends React.ComponentPropsWithoutRef<'div'> {
   speed?: number;
   autoFill?: boolean | number;
   pauseOnHover?: boolean;
@@ -9,5 +9,5 @@ interface Props extends React.ComponentPropsWithoutRef<'div'> {
 }
 declare const Marquees: ({ className, items, speed, pauseOnHover, autoFill, gap, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Marquees as default };
+export { Marquees as default };
 //# sourceMappingURL=marquees.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"marquees.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"mappings":";;UAeiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA,QAAQ;;cAGJ,aAAY,WAAA,OAAA,OAAA,cAAA,UAAA,QAAA,SAQf,0BAAK,IAAA"}
+{"version":3,"file":"marquees.d.mts","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"mappings":";;iBAeiB,cAAc,MAAM;EACnC;EACA;EACA;EACA;EACA,QAAQ;;cAGJ,aAAY,WAAA,OAAA,OAAA,cAAA,UAAA,QAAA,SAQf,0BAAK,IAAA"}

package/dist/components/molecules/marquees/marquees.mjs

@@ -1,15 +1,14 @@
 "use client";
 import { cn } from "../../../utils.mjs";
-import usePauseOnHover from "./use-pause-on-hover.mjs";
 import Item from "./item.mjs";
 import { useEffect, useRef, useState } from "react";
-import { useMergedRef, useResponsiveSize, useThrottledValue } from "@jbpark/use-hooks";
+import { useHoverOrFocusWithin, useMergedRef, useResponsiveSize, useThrottledValue } from "@jbpark/use-hooks";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/molecules/marquees/marquees.tsx
 const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = true, gap, ...props }) => {
 	const [width, setWidth] = useState("100%");
 	const [padding, setPadding] = useState(0);
-	const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);
+	const { active: isPaused, handlers } = useHoverOrFocusWithin({ enabled: pauseOnHover });
 	const throttledWidth = useThrottledValue(width, 200);
 	const { size, ref: responsiveRef } = useResponsiveSize();
 	const containerRef = useRef(null);
@@ -25,14 +24,14 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 	return /* @__PURE__ */ jsx("div", {
 		ref: setContainerRef,
 		className: cn(className),
-		...hoverEvents,
+		...handlers,
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("flex flex-col gap-y-5", "overflow-hidden", "whitespace-nowrap", "bg-inherit"),
 			style: { width: typeof throttledWidth === "number" ? throttledWidth - padding : throttledWidth },
 			children: items?.map(({ children, key: itemKey, ...item }, key) => /* @__PURE__ */ jsx(Item, {
 				width: throttledWidth,
-				pause,
+				pause: isPaused,
 				speed,
 				autoFill,
 				gap,

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

@@ -1 +1 @@
-{"version":3,"file":"marquees.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  useMergedRef,\n  useResponsiveSize,\n  useThrottledValue,\n} from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\nimport usePauseOnHover from './use-pause-on-hover';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number;\n  autoFill?: boolean | number;\n  pauseOnHover?: boolean;\n  gap?: number;\n  items?: ItemProps[];\n}\n\nconst Marquees = ({\n  className,\n  items,\n  speed,\n  pauseOnHover = true,\n  autoFill = true,\n  gap,\n  ...props\n}: Props) => {\n  // The container's own width, not the viewport's. `useResponsiveSize`\n  // measures in a layout effect, but this component copies the result into\n  // state in a passive effect and then throttles it, so the seed is what\n  // paints for the first ~200ms. `100vw` overflowed every padded or columned\n  // layout for that window — on the docs page it drew the track 1280px wide\n  // inside a 703px column, briefly showing the whole track and giving the\n  // page a horizontal scrollbar. `100%` resolves to the same value the\n  // measurement lands on, so there is nothing left to snap.\n  const [width, setWidth] = useState<string | number>(\n    '100%',\n    //\n  );\n  const [padding, setPadding] = useState(0);\n  const { pause, hoverEvents } = usePauseOnHover(pauseOnHover);\n\n  const throttledWidth = useThrottledValue(width, 200);\n\n  const { size, ref: responsiveRef } = useResponsiveSize<HTMLDivElement>();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainerRef = useMergedRef(containerRef, responsiveRef);\n\n  useEffect(() => {\n    if (!size.width || !containerRef.current) {\n      return;\n    }\n\n    const computedStyle = getComputedStyle(containerRef.current);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    setPadding(paddingLeft + paddingRight);\n\n    setWidth(size.width);\n  }, [size]);\n\n  return (\n    <div\n      ref={setContainerRef}\n      className={cn(\n        className,\n        //\n      )}\n      {...hoverEvents}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-y-5',\n          'overflow-hidden',\n          'whitespace-nowrap',\n          'bg-inherit',\n          //\n        )}\n        style={{\n          width:\n            typeof throttledWidth === 'number'\n              ? throttledWidth - padding\n              : throttledWidth,\n        }}\n      >\n        {items?.map(({ children, key: itemKey, ...item }: ItemProps, key) => (\n          <Item\n            key={itemKey || key}\n            width={throttledWidth}\n            pause={pause}\n            speed={speed}\n            autoFill={autoFill}\n            gap={gap}\n            {...item}\n          >\n            {children}\n          </Item>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Marquees;\n"],"mappings":";;;;;;;;AAuBA,MAAM,YAAY,EAChB,WACA,OACA,OACA,eAAe,MACf,WAAW,MACX,KACA,GAAG,YACQ;CASX,MAAM,CAAC,OAAO,YAAY,SACxB,MAEF;CACA,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CACxC,MAAM,EAAE,OAAO,gBAAgB,gBAAgB,YAAY;CAE3D,MAAM,iBAAiB,kBAAkB,OAAO,GAAG;CAEnD,MAAM,EAAE,MAAM,KAAK,kBAAkB,kBAAkC;CACvE,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,kBAAkB,aAAa,cAAc,aAAa;CAEhE,gBAAgB;EACd,IAAI,CAAC,KAAK,SAAS,CAAC,aAAa,SAC/B;EAGF,MAAM,gBAAgB,iBAAiB,aAAa,OAAO;EAC3D,MAAM,cAAc,WAAW,cAAc,WAAW,KAAK;EAC7D,MAAM,eAAe,WAAW,cAAc,YAAY,KAAK;EAE/D,WAAW,cAAc,YAAY;EAErC,SAAS,KAAK,KAAK;CACrB,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SAEF;EACA,GAAI;EACJ,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,WAAW,GACT,yBACA,mBACA,qBACA,YAEF;GACA,OAAO,EACL,OACE,OAAO,mBAAmB,WACtB,iBAAiB,UACjB,eACR;GAEC,UAAA,OAAO,KAAK,EAAE,UAAU,KAAK,SAAS,GAAG,QAAmB,QAC3D,oBAAC,MAAD;IAEE,OAAO;IACA;IACA;IACG;IACL;IACL,GAAI;IAEH;GACG,GATC,WAAW,GASZ,CACP;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"marquees.mjs","names":[],"sources":["../../../../src/components/molecules/marquees/marquees.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport {\n  useHoverOrFocusWithin,\n  useMergedRef,\n  useResponsiveSize,\n  useThrottledValue,\n} from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item, { type ItemProps } from './item';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {\n  speed?: number;\n  autoFill?: boolean | number;\n  pauseOnHover?: boolean;\n  gap?: number;\n  items?: ItemProps[];\n}\n\nconst Marquees = ({\n  className,\n  items,\n  speed,\n  pauseOnHover = true,\n  autoFill = true,\n  gap,\n  ...props\n}: Props) => {\n  // The container's own width, not the viewport's. `useResponsiveSize`\n  // measures in a layout effect, but this component copies the result into\n  // state in a passive effect and then throttles it, so the seed is what\n  // paints for the first ~200ms. `100vw` overflowed every padded or columned\n  // layout for that window — on the docs page it drew the track 1280px wide\n  // inside a 703px column, briefly showing the whole track and giving the\n  // page a horizontal scrollbar. `100%` resolves to the same value the\n  // measurement lands on, so there is nothing left to snap.\n  const [width, setWidth] = useState<string | number>(\n    '100%',\n    //\n  );\n  const [padding, setPadding] = useState(0);\n  const { active: isPaused, handlers } = useHoverOrFocusWithin({\n    enabled: pauseOnHover,\n  });\n\n  const throttledWidth = useThrottledValue(width, 200);\n\n  const { size, ref: responsiveRef } = useResponsiveSize<HTMLDivElement>();\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainerRef = useMergedRef(containerRef, responsiveRef);\n\n  useEffect(() => {\n    if (!size.width || !containerRef.current) {\n      return;\n    }\n\n    const computedStyle = getComputedStyle(containerRef.current);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    setPadding(paddingLeft + paddingRight);\n\n    setWidth(size.width);\n  }, [size]);\n\n  return (\n    <div\n      ref={setContainerRef}\n      className={cn(\n        className,\n        //\n      )}\n      {...handlers}\n      {...props}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-y-5',\n          'overflow-hidden',\n          'whitespace-nowrap',\n          'bg-inherit',\n          //\n        )}\n        style={{\n          width:\n            typeof throttledWidth === 'number'\n              ? throttledWidth - padding\n              : throttledWidth,\n        }}\n      >\n        {items?.map(({ children, key: itemKey, ...item }: ItemProps, key) => (\n          <Item\n            key={itemKey || key}\n            width={throttledWidth}\n            pause={isPaused}\n            speed={speed}\n            autoFill={autoFill}\n            gap={gap}\n            {...item}\n          >\n            {children}\n          </Item>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Marquees;\n"],"mappings":";;;;;;;AAuBA,MAAM,YAAY,EAChB,WACA,OACA,OACA,eAAe,MACf,WAAW,MACX,KACA,GAAG,YACQ;CASX,MAAM,CAAC,OAAO,YAAY,SACxB,MAEF;CACA,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC;CACxC,MAAM,EAAE,QAAQ,UAAU,aAAa,sBAAsB,EAC3D,SAAS,aACX,CAAC;CAED,MAAM,iBAAiB,kBAAkB,OAAO,GAAG;CAEnD,MAAM,EAAE,MAAM,KAAK,kBAAkB,kBAAkC;CACvE,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,kBAAkB,aAAa,cAAc,aAAa;CAEhE,gBAAgB;EACd,IAAI,CAAC,KAAK,SAAS,CAAC,aAAa,SAC/B;EAGF,MAAM,gBAAgB,iBAAiB,aAAa,OAAO;EAC3D,MAAM,cAAc,WAAW,cAAc,WAAW,KAAK;EAC7D,MAAM,eAAe,WAAW,cAAc,YAAY,KAAK;EAE/D,WAAW,cAAc,YAAY;EAErC,SAAS,KAAK,KAAK;CACrB,GAAG,CAAC,IAAI,CAAC;CAET,OACE,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,SAEF;EACA,GAAI;EACJ,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,WAAW,GACT,yBACA,mBACA,qBACA,YAEF;GACA,OAAO,EACL,OACE,OAAO,mBAAmB,WACtB,iBAAiB,UACjB,eACR;GAEC,UAAA,OAAO,KAAK,EAAE,UAAU,KAAK,SAAS,GAAG,QAAmB,QAC3D,oBAAC,MAAD;IAEE,OAAO;IACP,OAAO;IACA;IACG;IACL;IACL,GAAI;IAEH;GACG,GATC,WAAW,GASZ,CACP;EACE,CAAA;CACF,CAAA;AAET"}

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

@@ -3,8 +3,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 { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/menu/item/item.tsx
 const OFFSET = [8, 8];

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

@@ -1,12 +1,12 @@
 //#region src/components/molecules/menu/menu.d.ts
-interface MenuItem {
+export interface MenuItem {
   label: React.ReactNode;
   key: React.Key;
   type?: string;
   path?: string;
   children?: MenuItem[];
 }
-interface Props {
+export interface Props {
   mode?: 'horizontal' | 'vertical' | 'inline';
   selectedKeys?: React.Key[];
   defaultSelectedKeys?: React.Key[];
@@ -28,20 +28,20 @@ interface Props {
   onClick?: ClickEventHandler;
   onSelect?: ClickEventHandler;
 }
-interface MenuProps extends Props, Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {
+export interface MenuProps extends Omit<Props, 'selectionMap'>, Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {
   items?: MenuItem[];
 }
-type ClickEventHandler = (params: {
+export type ClickEventHandler = (params: {
   domEvent: React.SyntheticEvent;
   key: React.Key;
   keyPath: React.Key[];
   item: MenuItem;
 }) => void;
-declare const MENU_CLASSNAMES: string[];
-type SelectionMap = ReadonlyMap<React.Key, boolean>;
-declare const buildSelectionMap: (items: MenuItem[], selectedKeysSet: ReadonlySet<React.Key>) => SelectionMap;
-declare const findKey: (menu: MenuItem, targetKeys: ReadonlySet<React.Key>) => boolean;
+export declare const MENU_CLASSNAMES: string[];
+export type SelectionMap = ReadonlyMap<React.Key, boolean>;
+export declare const buildSelectionMap: (items: MenuItem[], selectedKeysSet: ReadonlySet<React.Key>) => SelectionMap;
+export declare const findKey: (menu: MenuItem, targetKeys: ReadonlySet<React.Key>) => boolean;
 declare const Menu: ({ items, mode, defaultSelectedKeys, selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }: MenuProps) => import("react").JSX.Element;
 //#endregion
-export { ClickEventHandler, MENU_CLASSNAMES, MenuItem, MenuProps, Props, SelectionMap, buildSelectionMap, Menu as default, findKey };
+export { Menu as default };
 //# sourceMappingURL=menu.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu.d.mts","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"mappings":";UAUiB;EACf,OAAO,MAAM;EACb,KAAK,MAAM;EACX;EACA;EACA,WAAW;;UAGI;EACf;EACA,eAAe,MAAM;EACrB,sBAAsB,MAAM;EAC5B,eAAe;EACf;EACA;EACA;IACE;IACA;IACA;IACA;;EAEF;IACE,WAAW,MAAM;IACjB,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,QAAQ,MAAM;;EAEhB,UAAU;EACV,WAAW;;UAGI,kBAEb,OACA,KAAK,MAAM;EACb,QAAQ;;KAGE,qBAAqB;EAC/B,UAAU,MAAM;EAChB,KAAK,MAAM;EACX,SAAS,MAAM;EACf,MAAM;;cAGK;KAWD,eAAe,YAAY,MAAM;cAEhC,oBACX,OAAO,YACP,iBAAiB,YAAY,MAAM,SAClC;cAeU,UACX,MAAM,UACN,YAAY,YAAY,MAAM;cAiB1B,SAAQ,OAAA,MAAA,qBAAA,cAAA,eAAA,WAAA,YAAA,QAAA,QAAA,cAAA,SAAA,UAAA,cAAA,SAaX,8BAAS,IAAA"}
+{"version":3,"file":"menu.d.mts","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"mappings":";iBAUiB;EACf,OAAO,MAAM;EACb,KAAK,MAAM;EACX;EACA;EACA,WAAW;;iBAGI;EACf;EACA,eAAe,MAAM;EACrB,sBAAsB,MAAM;EAC5B,eAAe;EACf;EACA;EACA;IACE;IACA;IACA;IACA;;EAEF;IACE,WAAW,MAAM;IACjB,UAAU,MAAM;IAChB,OAAO,MAAM;IACb,QAAQ,MAAM;;EAEhB,UAAU;EACV,WAAW;;iBAGI,kBAEb,KAAK,wBACL,KAAK,MAAM;EACb,QAAQ;;YAGE,qBAAqB;EAC/B,UAAU,MAAM;EAChB,KAAK,MAAM;EACX,SAAS,MAAM;EACf,MAAM;;qBAGK;YAWD,eAAe,YAAY,MAAM;qBAEhC,oBACX,OAAO,YACP,iBAAiB,YAAY,MAAM,SAClC;qBAeU,UACX,MAAM,UACN,YAAY,YAAY,MAAM;cAiB1B,SAAQ,OAAA,MAAA,qBAAA,cAAA,eAAA,WAAA,YAAA,QAAA,QAAA,cAAA,SAAA,UAAA,cAAA,SAaX,8BAAS,IAAA"}

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

@@ -40,6 +40,8 @@ const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys
 	});
 	const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
 	const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
+	const rootProps = { ...props };
+	Reflect.deleteProperty(rootProps, "selectionMap");
 	const onSelect = (params) => {
 		setSelectedKeys([params.key]);
 		_onSelect?.(params);
@@ -48,7 +50,7 @@ const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys
 		"data-slot": "menu",
 		role: "menu",
 		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
-		...props,
+		...rootProps,
 		children: items?.map((item, index) => /* @__PURE__ */ createElement(Item, {
 			root: true,
 			...item,

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

@@ -1 +1 @@
-{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Props,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.SyntheticEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'm-0',\n  'list-none',\n  'p-0',\n  'bg-popover',\n  'text-popover-foreground',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n    value: _selectedKeys,\n    defaultValue: defaultSelectedKeys ?? [],\n  });\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n\n  const onSelect = (params: {\n    domEvent: React.SyntheticEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    setSelectedKeys([params.key]);\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      data-slot=\"menu\"\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...props}\n    >\n      {items?.map((item, index) => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          index={index}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;AAEF;AAIA,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,IAAwB;CAExC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,GAAG;EACzC,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,KAAK,CAAC,KAAK;EACrE,MAAM,aAAa,QAAQ;EAC3B,IAAI,IAAI,KAAK,KAAK,UAAU;EAC5B,OAAO;CACT;CAEA,MAAM,QAAQ,GAAG;CACjB,OAAO;AACT;AAEA,MAAa,WACX,MACA,eACY;CACZ,IAAI,WAAW,IAAI,KAAK,GAAG,GACzB,OAAO;CAGT,IAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACzC;OAAA,MAAM,SAAS,KAAK,UACvB,IAAI,QAAQ,OAAO,UAAU,GAC3B,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,CAAC,GACvB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,CAAC;CACxC,CAAC;CAED,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,CAAC,CAAC,GAC3C,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,cACb,kBAAkB,SAAS,CAAC,GAAG,eAAe,GACpD,CAAC,OAAO,eAAe,CACzB;CAEA,MAAM,YAAY,WAKZ;EACJ,gBAAgB,CAAC,OAAO,GAAG,CAAC;EAC5B,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,SACF;EACA,GAAI;EAEH,UAAA,OAAO,KAAK,MAAM,UACjB,8BAAC,MAAD;GACE,MAAA;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,GAAG;GACX;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;EACX,CAAA,CACF;CACC,CAAA;AAER"}
+{"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n  label: React.ReactNode;\n  key: React.Key;\n  type?: string;\n  path?: string;\n  children?: MenuItem[];\n}\n\nexport interface Props {\n  mode?: 'horizontal' | 'vertical' | 'inline';\n  selectedKeys?: React.Key[];\n  defaultSelectedKeys?: React.Key[];\n  selectionMap?: SelectionMap;\n  offset?: [number, number];\n  inlineOffset?: number;\n  classNames?: {\n    rootItem?: string;\n    subMenu?: string;\n    item?: string;\n    label?: string;\n  };\n  styles?: {\n    rootItem?: React.CSSProperties;\n    subMenu?: React.CSSProperties;\n    item?: React.CSSProperties;\n    label?: React.CSSProperties;\n  };\n  onClick?: ClickEventHandler;\n  onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n  extends\n    Omit<Props, 'selectionMap'>,\n    Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n  items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n  domEvent: React.SyntheticEvent;\n  key: React.Key;\n  keyPath: React.Key[];\n  item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n  'm-0',\n  'list-none',\n  'p-0',\n  'bg-popover',\n  'text-popover-foreground',\n  'shadow-md',\n  'rounded-md',\n  //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n  items: MenuItem[],\n  selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n  const map = new Map<React.Key, boolean>();\n\n  const dfs = (node: MenuItem): boolean => {\n    const self = selectedKeysSet.has(node.key);\n    const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n    const isSelected = self || hasSelectedChild;\n    map.set(node.key, isSelected);\n    return isSelected;\n  };\n\n  items.forEach(dfs);\n  return map;\n};\n\nexport const findKey = (\n  menu: MenuItem,\n  targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n  if (targetKeys.has(menu.key)) {\n    return true;\n  }\n\n  if (menu.children && Array.isArray(menu.children)) {\n    for (const child of menu.children) {\n      if (findKey(child, targetKeys)) {\n        return true;\n      }\n    }\n  }\n\n  return false;\n};\n\nconst Menu = ({\n  items,\n  mode = 'vertical',\n  defaultSelectedKeys = [],\n  selectedKeys: _selectedKeys,\n  className,\n  classNames,\n  styles,\n  offset,\n  inlineOffset,\n  onClick,\n  onSelect: _onSelect,\n  ...props\n}: MenuProps) => {\n  const [selectedKeys, setSelectedKeys] = useControllableState<React.Key[]>({\n    value: _selectedKeys,\n    defaultValue: defaultSelectedKeys ?? [],\n  });\n\n  const selectedKeysSet = useMemo(\n    () => new Set<React.Key>(selectedKeys ?? []),\n    [selectedKeys],\n  );\n\n  const selectionMap = useMemo(\n    () => buildSelectionMap(items ?? [], selectedKeysSet),\n    [items, selectedKeysSet],\n  );\n  const rootProps = { ...props };\n\n  // Ignore stale JavaScript callers that still supply this internal prop.\n  Reflect.deleteProperty(rootProps, 'selectionMap');\n\n  const onSelect = (params: {\n    domEvent: React.SyntheticEvent;\n    key: React.Key;\n    keyPath: React.Key[];\n    item: MenuItem;\n  }) => {\n    setSelectedKeys([params.key]);\n    _onSelect?.(params);\n  };\n\n  return (\n    <ul\n      data-slot=\"menu\"\n      role=\"menu\"\n      className={cn(\n        MENU_CLASSNAMES,\n        mode === 'horizontal' ? 'flex' : 'inline-block',\n        className,\n      )}\n      {...rootProps}\n    >\n      {items?.map((item, index) => (\n        <Item\n          root\n          {...item}\n          key={item.key}\n          itemKey={item.key}\n          keyPath={[item.key]}\n          index={index}\n          selectionMap={selectionMap}\n          mode={mode}\n          classNames={classNames}\n          styles={styles}\n          offset={offset}\n          inlineOffset={inlineOffset}\n          onClick={onClick}\n          onSelect={onSelect}\n        />\n      ))}\n    </ul>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;AAEF;AAIA,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,IAAwB;CAExC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,GAAG;EACzC,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,KAAK,CAAC,KAAK;EACrE,MAAM,aAAa,QAAQ;EAC3B,IAAI,IAAI,KAAK,KAAK,UAAU;EAC5B,OAAO;CACT;CAEA,MAAM,QAAQ,GAAG;CACjB,OAAO;AACT;AAEA,MAAa,WACX,MACA,eACY;CACZ,IAAI,WAAW,IAAI,KAAK,GAAG,GACzB,OAAO;CAGT,IAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,QAAQ,GACzC;OAAA,MAAM,SAAS,KAAK,UACvB,IAAI,QAAQ,OAAO,UAAU,GAC3B,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,CAAC,GACvB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,CAAC,cAAc,mBAAmB,qBAAkC;EACxE,OAAO;EACP,cAAc,uBAAuB,CAAC;CACxC,CAAC;CAED,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,CAAC,CAAC,GAC3C,CAAC,YAAY,CACf;CAEA,MAAM,eAAe,cACb,kBAAkB,SAAS,CAAC,GAAG,eAAe,GACpD,CAAC,OAAO,eAAe,CACzB;CACA,MAAM,YAAY,EAAE,GAAG,MAAM;CAG7B,QAAQ,eAAe,WAAW,cAAc;CAEhD,MAAM,YAAY,WAKZ;EACJ,gBAAgB,CAAC,OAAO,GAAG,CAAC;EAC5B,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,MAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,SACF;EACA,GAAI;EAEH,UAAA,OAAO,KAAK,MAAM,UACjB,8BAAC,MAAD;GACE,MAAA;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,GAAG;GACX;GACO;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;EACX,CAAA,CACF;CACC,CAAA;AAER"}

package/dist/components/molecules/reveals/item.d.mts

@@ -30,7 +30,7 @@ declare const effectVariants: {
     };
   };
 };
-interface ItemProps {
+export interface ItemProps {
   effect?: keyof typeof effectVariants;
   delay?: number;
   once?: boolean;
@@ -43,5 +43,5 @@ interface ItemProps {
 }
 declare const Item: ({ effect, children, once, viewport, variants, duration, delay, transition, className, ...props }: ItemProps) => import("react").JSX.Element;
 //#endregion
-export { ItemProps, Item as default };
+export { Item as default };
 //# sourceMappingURL=item.d.mts.map

package/dist/components/molecules/reveals/item.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/reveals/item.tsx"],"mappings":";;cAMM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAeW;EACf,sBAAsB;EACtB;EACA;EACA;EACA;EACA,WAAW,MAAM;EACjB,WAAW;EACX,WAAW;EACX,aAAa;;cAGT,SAAQ,QAAA,UAAA,MAAA,UAAA,UAAA,UAAA,OAAA,YAAA,cAAA,SAWX,8BAAS,IAAA"}
+{"version":3,"file":"item.d.mts","names":[],"sources":["../../../../src/components/molecules/reveals/item.tsx"],"mappings":";;cAMM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAeW;EACf,sBAAsB;EACtB;EACA;EACA;EACA;EACA,WAAW,MAAM;EACjB,WAAW;EACX,WAAW;EACX,aAAa;;cAGT,SAAQ,QAAA,UAAA,MAAA,UAAA,UAAA,UAAA,OAAA,YAAA,cAAA,SAWX,8BAAS,IAAA"}

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

@@ -1,6 +1,6 @@
 import { ItemProps } from "./item.mjs";
 //#region src/components/molecules/reveals/reveals.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'div'>, ItemProps {
+export interface Props extends React.ComponentPropsWithoutRef<'div'>, ItemProps {
   cascade?: number;
   classNames?: {
     root?: string;
@@ -9,10 +9,10 @@ interface Props extends React.ComponentPropsWithoutRef<'div'>, ItemProps {
   once?: boolean;
   items?: ItemProps[];
 }
-declare const DURATION = 0.6;
-declare const DELAY = 0;
-declare const CASCADE = 0.1;
+export declare const DURATION = 0.6;
+export declare const DELAY = 0;
+export declare const CASCADE = 0.1;
 declare const Reveals: ({ children, className, classNames, items, cascade, duration, delay, effect, once, viewport, variants, transition, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { CASCADE, DELAY, DURATION, Props, Reveals as default };
+export { Reveals as default };
 //# sourceMappingURL=reveals.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"reveals.d.mts","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"mappings":";;UAMiB,cACP,MAAM,iCAAiC;EAC/C;EACA;IACE;IACA;;EAEF;EACA,QAAQ;;cAGG;cACA;cACA;cAEP,YAAW,UAAA,WAAA,YAAA,OAAA,SAAA,UAAA,OAAA,QAAA,MAAA,UAAA,UAAA,eAAA,SAcd,0BAAK,IAAA"}
+{"version":3,"file":"reveals.d.mts","names":[],"sources":["../../../../src/components/molecules/reveals/reveals.tsx"],"mappings":";;iBAMiB,cACP,MAAM,iCAAiC;EAC/C;EACA;IACE;IACA;;EAEF;EACA,QAAQ;;qBAGG;qBACA;qBACA;cAEP,YAAW,UAAA,WAAA,YAAA,OAAA,SAAA,UAAA,OAAA,QAAA,MAAA,UAAA,UAAA,eAAA,SAcd,0BAAK,IAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/molecules/splitter/index.ts"],"mappings":";;;KAGK,2BAA2B;EAAiB,cAAc;;cAEzD,UAA2B"}
+{"version":3,"file":"index.d.mts","names":["SplitterImpl"],"sources":["../../../../src/components/molecules/splitter/index.ts"],"mappings":";;;KAGK,2BAA2BA;EAAiB,cAAc;;cAEzD,UAA2B"}

package/dist/components/molecules/splitter/panel.d.mts

@@ -1,11 +1,11 @@
-import { ResizablePanel as ResizablePanel$1 } from "../../../core/resizable.mjs";
+import { ResizablePanel as ResizablePanel$1, resizable_d_exports } from "../../../core/resizable.mjs";
 import "../../../core/index.mjs";
 //#region src/components/molecules/splitter/panel.d.ts
 declare const ResizablePanel: typeof ResizablePanel$1;
-interface Props extends React.ComponentProps<typeof ResizablePanel> {
+export interface Props extends React.ComponentProps<typeof ResizablePanel> {
   children: React.ReactNode;
 }
 declare const Panel: ({ children, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Panel as default };
+export { Panel as default };
 //# sourceMappingURL=panel.d.mts.map

package/dist/components/molecules/splitter/panel.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.mts","names":[],"sources":["../../../../src/components/molecules/splitter/panel.tsx"],"mappings":";;;cAIQ,uBAAc;UAEL,cAAc,MAAM,sBAAsB;EACzD,UAAU,MAAM;;cAGZ,UAAS,UAAA,cAAA,SAAmC,0BAAK,IAAA"}
+{"version":3,"file":"panel.d.mts","names":["resizable","resizable.ResizablePanel"],"sources":["../../../../src/components/molecules/splitter/panel.tsx"],"mappings":";;;cAIQ,uBAAcC;iBAEL,cAAc,MAAM,sBAAsB;EACzD,UAAU,MAAM;;cAGZ,UAAS,UAAA,cAAA,SAAmC,0BAAK,IAAA"}

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

@@ -1,9 +1,9 @@
-import { ResizablePanelGroup as ResizablePanelGroup$1 } from "../../../core/resizable.mjs";
+import { ResizablePanelGroup as ResizablePanelGroup$1, resizable_d_exports } from "../../../core/resizable.mjs";
 import "../../../core/index.mjs";
 //#region src/components/molecules/splitter/splitter.d.ts
 declare const ResizablePanelGroup: typeof ResizablePanelGroup$1;
 type SplitterLayout = Parameters<NonNullable<React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']>>[0];
-interface Props extends Omit<React.ComponentProps<typeof ResizablePanelGroup>, 'children' | 'orientation' | 'onLayoutChange' | 'onLayoutChanged' | 'onResize'> {
+export interface Props extends Omit<React.ComponentProps<typeof ResizablePanelGroup>, 'children' | 'orientation' | 'onLayoutChange' | 'onLayoutChanged' | 'onResize'> {
   children: React.ReactNode;
   orientation?: 'horizontal' | 'vertical';
   withHandle?: boolean;
@@ -14,5 +14,5 @@ interface Props extends Omit<React.ComponentProps<typeof ResizablePanelGroup>, '
 }
 declare const Splitter: ({ children, className, orientation, withHandle, handle, handleClassName, onResize, onResizeEnd, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Splitter as default };
+export { Splitter as default };
 //# sourceMappingURL=splitter.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"splitter.d.mts","names":[],"sources":["../../../../src/components/molecules/splitter/splitter.tsx"],"mappings":";;;cAQyB,4BAAmB;KAEvC,iBAAiB,WACpB,YACE,MAAM,sBAAsB;UAIf,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU,MAAM;EAChB;EACA;EACA,SAAS,MAAM;EACf;EACA,YAAY,QAAQ;EACpB,eAAe,QAAQ;;cAGnB,aAAY,UAAA,WAAA,aAAA,YAAA,QAAA,iBAAA,UAAA,gBAAA,SAUf,0BAAK,IAAA"}
+{"version":3,"file":"splitter.d.mts","names":["resizable","resizable.ResizablePanelGroup"],"sources":["../../../../src/components/molecules/splitter/splitter.tsx"],"mappings":";;;cAQyB,4BAAmBC;KAEvC,iBAAiB,WACpB,YACE,MAAM,sBAAsB;iBAIf,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU,MAAM;EAChB;EACA;EACA,SAAS,MAAM;EACf;EACA,YAAY,QAAQ;EACpB,eAAe,QAAQ;;cAGnB,aAAY,UAAA,WAAA,aAAA,YAAA,QAAA,iBAAA,UAAA,gBAAA,SAUf,0BAAK,IAAA"}

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

@@ -1,9 +1,9 @@
-import { Tabs as Tabs$1 } from "../../core/tabs.mjs";
+import { Tabs as Tabs$1, tabs_d_exports } from "../../core/tabs.mjs";
 import "../../core/index.mjs";
 import { ReactNode } from "react";
 //#region src/components/molecules/tabs.d.ts
 declare const Core: typeof Tabs$1;
-interface Item {
+export interface Item {
   key: string;
   label: ReactNode;
   children: ReactNode;
@@ -11,8 +11,12 @@ interface Item {
   /** Decorative icon rendered before the label with consistent spacing. */
   icon?: ReactNode;
 }
-interface Props extends Omit<React.ComponentProps<typeof Core>, 'children'> {
+export interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'onChange'> {
   items: Item[];
+  /** Called when the selected tab changes. */
+  onChange?: (value: string | number | null) => void;
+  /** @deprecated Use `onChange` for the selected value. */
+  onValueChange?: React.ComponentProps<typeof Core>['onValueChange'];
   listLabel?: string;
   /** Preserve inactive panel DOM and local state. */
   keepMounted?: boolean;
@@ -31,7 +35,7 @@ interface Props extends Omit<React.ComponentProps<typeof Core>, 'children'> {
     extra?: string;
   };
 }
-declare const Tabs: ({ items, listLabel, keepMounted, activateOnFocus, scrollable, fitted, extra, classNames, defaultValue, orientation, ...props }: Props) => import("react").JSX.Element;
+declare const Tabs: ({ items, listLabel, keepMounted, activateOnFocus, scrollable, fitted, extra, classNames, defaultValue, onChange, onValueChange, orientation, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Item, Props, Tabs as default };
+export { Tabs as default };
 //# sourceMappingURL=tabs.d.mts.map