@jbpark/ui-kit 10.0.2 → 10.2.0

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

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/components/atoms/tooltip.d.ts
+declare const Core: <Payload>(props: import("@base-ui/react").TooltipRoot.Props<Payload>) => React.JSX.Element;
+type Placement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+interface Props extends Omit<React.ComponentProps<typeof Core>, 'children' | 'handle' | 'triggerId' | 'defaultTriggerId'> {
+  children: ReactElement;
+  /** Supplementary visual hint; keep essential information visible elsewhere. */
+  content: ReactNode;
+  /** Popup class; the child retains its own className. */
+  className?: string;
+  placement?: Placement;
+  /** Distance between the trigger and popup in pixels. */
+  offset?: number;
+  /** Hover delay in milliseconds. Keyboard focus opens without this delay. */
+  delay?: number;
+  closeDelay?: number;
+}
+declare const Tooltip: ({ children, content, className, placement, offset, delay, closeDelay, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Props, Tooltip as default };
+//# sourceMappingURL=tooltip.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.mts","names":[],"sources":["../../../src/components/atoms/tooltip.tsx"],"mappings":";;cAMiB,OAAI,SAAA,gCAAA,YAAA,MAAA,aAAA,MAAA,IAAA;KAEhB;UAgCY,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,UAAU;;EAEV,SAAS;;EAET;EACA,YAAY;;EAEZ;;EAEA;EACA;;cAGI,YAAW,UAAA,SAAA,WAAA,WAAA,QAAA,OAAA,eAAA,SASd,0BAAK,IAAA"}

package/dist/components/atoms/tooltip.mjs

@@ -0,0 +1,78 @@
+"use client";
+import { tooltip_exports } from "../../core/tooltip.mjs";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/atoms/tooltip.tsx
+const { Tooltip: Core, TooltipContent, TooltipTrigger } = tooltip_exports;
+const placementMap = {
+	top: {
+		side: "top",
+		align: "center"
+	},
+	left: {
+		side: "left",
+		align: "center"
+	},
+	right: {
+		side: "right",
+		align: "center"
+	},
+	bottom: {
+		side: "bottom",
+		align: "center"
+	},
+	topLeft: {
+		side: "top",
+		align: "start"
+	},
+	topRight: {
+		side: "top",
+		align: "end"
+	},
+	bottomLeft: {
+		side: "bottom",
+		align: "start"
+	},
+	bottomRight: {
+		side: "bottom",
+		align: "end"
+	},
+	leftTop: {
+		side: "left",
+		align: "start"
+	},
+	leftBottom: {
+		side: "left",
+		align: "end"
+	},
+	rightTop: {
+		side: "right",
+		align: "start"
+	},
+	rightBottom: {
+		side: "right",
+		align: "end"
+	}
+};
+const Tooltip = ({ children, content, className, placement = "top", offset = 8, delay, closeDelay, ...props }) => {
+	const trigger = Children.only(children);
+	const { side, align } = placementMap[placement];
+	return /* @__PURE__ */ jsxs(Core, {
+		...props,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: trigger,
+			delay,
+			closeDelay
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			side,
+			align,
+			sideOffset: offset,
+			className,
+			children: content
+		})]
+	});
+};
+//#endregion
+export { Tooltip as default };
+
+//# sourceMappingURL=tooltip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.mjs","names":["tooltip"],"sources":["../../../src/components/atoms/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport { Children, type ReactElement, type ReactNode } from 'react';\n\nimport { tooltip } from '../../core';\n\nconst { Tooltip: Core, TooltipContent, TooltipTrigger } = tooltip;\n\ntype Placement =\n  | 'top'\n  | 'left'\n  | 'right'\n  | 'bottom'\n  | 'topLeft'\n  | 'topRight'\n  | 'bottomLeft'\n  | 'bottomRight'\n  | 'leftTop'\n  | 'leftBottom'\n  | 'rightTop'\n  | 'rightBottom';\n\ntype Side = NonNullable<React.ComponentProps<typeof TooltipContent>['side']>;\ntype Align = NonNullable<React.ComponentProps<typeof TooltipContent>['align']>;\n\nconst placementMap: Record<Placement, { side: Side; align: Align }> = {\n  top: { side: 'top', align: 'center' },\n  left: { side: 'left', align: 'center' },\n  right: { side: 'right', align: 'center' },\n  bottom: { side: 'bottom', align: 'center' },\n  topLeft: { side: 'top', align: 'start' },\n  topRight: { side: 'top', align: 'end' },\n  bottomLeft: { side: 'bottom', align: 'start' },\n  bottomRight: { side: 'bottom', align: 'end' },\n  leftTop: { side: 'left', align: 'start' },\n  leftBottom: { side: 'left', align: 'end' },\n  rightTop: { side: 'right', align: 'start' },\n  rightBottom: { side: 'right', align: 'end' },\n};\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children' | 'handle' | 'triggerId' | 'defaultTriggerId'\n> {\n  children: ReactElement;\n  /** Supplementary visual hint; keep essential information visible elsewhere. */\n  content: ReactNode;\n  /** Popup class; the child retains its own className. */\n  className?: string;\n  placement?: Placement;\n  /** Distance between the trigger and popup in pixels. */\n  offset?: number;\n  /** Hover delay in milliseconds. Keyboard focus opens without this delay. */\n  delay?: number;\n  closeDelay?: number;\n}\n\nconst Tooltip = ({\n  children,\n  content,\n  className,\n  placement = 'top',\n  offset = 8,\n  delay,\n  closeDelay,\n  ...props\n}: Props) => {\n  const trigger = Children.only(children);\n  const { side, align } = placementMap[placement];\n\n  return (\n    <Core {...props}>\n      <TooltipTrigger render={trigger} delay={delay} closeDelay={closeDelay} />\n      <TooltipContent\n        side={side}\n        align={align}\n        sideOffset={offset}\n        className={className}\n      >\n        {content}\n      </TooltipContent>\n    </Core>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;AAMA,MAAM,EAAE,SAAS,MAAM,gBAAgB,mBAAmBA;AAmB1D,MAAM,eAAgE;CACpE,KAAK;EAAE,MAAM;EAAO,OAAO;CAAS;CACpC,MAAM;EAAE,MAAM;EAAQ,OAAO;CAAS;CACtC,OAAO;EAAE,MAAM;EAAS,OAAO;CAAS;CACxC,QAAQ;EAAE,MAAM;EAAU,OAAO;CAAS;CAC1C,SAAS;EAAE,MAAM;EAAO,OAAO;CAAQ;CACvC,UAAU;EAAE,MAAM;EAAO,OAAO;CAAM;CACtC,YAAY;EAAE,MAAM;EAAU,OAAO;CAAQ;CAC7C,aAAa;EAAE,MAAM;EAAU,OAAO;CAAM;CAC5C,SAAS;EAAE,MAAM;EAAQ,OAAO;CAAQ;CACxC,YAAY;EAAE,MAAM;EAAQ,OAAO;CAAM;CACzC,UAAU;EAAE,MAAM;EAAS,OAAO;CAAQ;CAC1C,aAAa;EAAE,MAAM;EAAS,OAAO;CAAM;AAC7C;AAmBA,MAAM,WAAW,EACf,UACA,SACA,WACA,YAAY,OACZ,SAAS,GACT,OACA,YACA,GAAG,YACQ;CACX,MAAM,UAAU,SAAS,KAAK,QAAQ;CACtC,MAAM,EAAE,MAAM,UAAU,aAAa;CAErC,OACE,qBAAC,MAAD;EAAM,GAAI;EAAV,UAAA,CACE,oBAAC,gBAAD;GAAgB,QAAQ;GAAgB;GAAmB;EAAa,CAAA,GACxE,oBAAC,gBAAD;GACQ;GACC;GACP,YAAY;GACD;GAEV,UAAA;EACa,CAAA,CACZ;;AAEV"}

package/dist/components/atoms/typography/paragraph.mjs

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/atoms/typography/paragraph.tsx
 const Paragraph = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "typography-paragraph",
 		...props,
 		className: cn("m-0", className),
 		children

package/dist/components/atoms/typography/paragraph.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.mjs","names":[],"sources":["../../../../src/components/atoms/typography/paragraph.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'p'> {}\n\nconst Paragraph = ({ children, className, ...props }: Props) => {\n  return (\n    <p\n      {...props}\n      className={cn(\n        'm-0',\n        className,\n        //\n      )}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport default Paragraph;\n"],"mappings":";;;AAIA,MAAM,aAAa,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC9D,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW,GACT,OACA,SAEF;EAEC;CACA,CAAA;AAEP"}
+{"version":3,"file":"paragraph.mjs","names":[],"sources":["../../../../src/components/atoms/typography/paragraph.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'p'> {}\n\nconst Paragraph = ({ children, className, ...props }: Props) => {\n  return (\n    <p\n      data-slot=\"typography-paragraph\"\n      {...props}\n      className={cn(\n        'm-0',\n        className,\n        //\n      )}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport default Paragraph;\n"],"mappings":";;;AAIA,MAAM,aAAa,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC9D,OACE,oBAAC,KAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,GACT,OACA,SAEF;EAEC;CACA,CAAA;AAEP"}

package/dist/components/atoms/typography/title.mjs

@@ -12,6 +12,7 @@ const styles = {
 const Title = ({ children, level = 1, className, ...props }) => {
 	const Element = level < 1 || level > 6 ? "h1" : `h${level}`;
 	return /* @__PURE__ */ jsx(Element, {
+		"data-slot": "typography-title",
 		className: cn("m-0 leading-snug font-bold", styles[Element], className),
 		...props,
 		children

package/dist/components/atoms/typography/title.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"title.mjs","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\ntype ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n// Scale up at wider breakpoints instead of a single fixed size — the desktop\n// size stays the same as before, but narrow/mobile viewports now get a\n// smaller starting size instead of always rendering at the full desktop size.\nconst styles: Record<string, string> = {\n  h1: 'text-4xl sm:text-5xl lg:text-6xl',\n  h2: 'text-3xl sm:text-4xl lg:text-5xl',\n  h3: 'text-2xl sm:text-3xl lg:text-4xl',\n  h4: 'text-xl sm:text-2xl lg:text-3xl',\n  h5: 'text-lg sm:text-xl lg:text-2xl',\n  h6: 'text-base sm:text-lg lg:text-xl',\n};\n\nconst Title = ({ children, level = 1, className, ...props }: Props) => {\n  const Element: ElementType = level < 1 || level > 6 ? 'h1' : `h${level}`;\n\n  return (\n    <Element\n      className={cn('m-0 leading-snug font-bold', styles[Element], className)}\n      {...props}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;AAaA,MAAM,SAAiC;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS,EAAE,UAAU,QAAQ,GAAG,WAAW,GAAG,YAAmB;CACrE,MAAM,UAAuB,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI;CAEjE,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,8BAA8B,OAAO,UAAU,SAAS;EACtE,GAAI;EAEH;CACM,CAAA;AAEb"}
+{"version":3,"file":"title.mjs","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\nexport interface Props extends React.ComponentPropsWithoutRef<\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\ntype ElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n// Scale up at wider breakpoints instead of a single fixed size — the desktop\n// size stays the same as before, but narrow/mobile viewports now get a\n// smaller starting size instead of always rendering at the full desktop size.\nconst styles: Record<string, string> = {\n  h1: 'text-4xl sm:text-5xl lg:text-6xl',\n  h2: 'text-3xl sm:text-4xl lg:text-5xl',\n  h3: 'text-2xl sm:text-3xl lg:text-4xl',\n  h4: 'text-xl sm:text-2xl lg:text-3xl',\n  h5: 'text-lg sm:text-xl lg:text-2xl',\n  h6: 'text-base sm:text-lg lg:text-xl',\n};\n\nconst Title = ({ children, level = 1, className, ...props }: Props) => {\n  const Element: ElementType = level < 1 || level > 6 ? 'h1' : `h${level}`;\n\n  return (\n    <Element\n      data-slot=\"typography-title\"\n      className={cn('m-0 leading-snug font-bold', styles[Element], className)}\n      {...props}\n    >\n      {children}\n    </Element>\n  );\n};\n\nexport default Title;\n"],"mappings":";;;AAaA,MAAM,SAAiC;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,SAAS,EAAE,UAAU,QAAQ,GAAG,WAAW,GAAG,YAAmB;CACrE,MAAM,UAAuB,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI;CAEjE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,OAAO,UAAU,SAAS;EACtE,GAAI;EAEH;CACM,CAAA;AAEb"}

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/dropdown.mjs

@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
 import "../../lib/z-layers.mjs";
 import Menu from "./menu/menu.mjs";
 import { useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 //#region src/components/molecules/dropdown.tsx
 const Dropdown = ({ children, menu, trigger = "hover", open: _open, onOpenChange: _onOpenChange = () => {}, className, onMouseEnter, onMouseLeave, ...props }) => {

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

@@ -1,13 +1,18 @@
-import Card, { Props } from "../../Card.mjs";
-import Menu, { Props as Props$1 } from "./menu/menu.mjs";
-import { Props as Props$2 } 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$3 } from "../../Space.mjs";
-import Collapse, { Props as Props$4 } from "./collapse.mjs";
-import Dropdown, { Props as Props$5 } from "./dropdown.mjs";
-import { Props as Props$6 } 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$7 } from "./splitter/splitter.mjs";
+import { Props as Props$11 } from "./splitter/splitter.mjs";
 import Splitter from "./splitter/index.mjs";
-import Upload, { Props as Props$8, UploadFile } from "./upload.mjs";
-export { Card, type Props as CardProps, Collapse, type Props$4 as CollapseProps, Dropdown, type Props$5 as DropdownProps, Marquees, type Props$6 as MarqueesProps, Menu, type Props$1 as MenuProps, Reveals, type Props$2 as RevealsProps, Space, type Props$3 as SpaceProps, Splitter, type Props$7 as SplitterProps, Upload, type UploadFile, type Props$8 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/marquees/marquees.mjs

@@ -3,8 +3,8 @@ 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 { jsx } from "react/jsx-runtime";
 import { 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%");

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

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

@@ -28,7 +28,7 @@ interface Props {
   onClick?: ClickEventHandler;
   onSelect?: ClickEventHandler;
 }
-interface MenuProps extends Props, Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {
+interface MenuProps extends Omit<Props, 'selectionMap'>, Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {
   items?: MenuItem[];
 }
 type ClickEventHandler = (params: {

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":";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,KAAK,wBACL,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"}

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

@@ -2,8 +2,8 @@
 import { cn } from "../../../utils.mjs";
 import Item from "./item/item.mjs";
 import { createElement, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
 import { useControllableState } from "@jbpark/use-hooks";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/molecules/menu/menu.tsx
 const MENU_CLASSNAMES = [
 	"m-0",
@@ -40,14 +40,17 @@ 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);
 	};
 	return /* @__PURE__ */ jsx("ul", {
+		"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      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,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/tabs.d.mts

@@ -0,0 +1,41 @@
+import { Tabs as Tabs$1 } 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 {
+  key: string;
+  label: ReactNode;
+  children: ReactNode;
+  disabled?: boolean;
+  /** Decorative icon rendered before the label with consistent spacing. */
+  icon?: ReactNode;
+}
+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;
+  /** Select a tab when arrow-key focus moves to it. */
+  activateOnFocus?: boolean;
+  /** Scroll the tab list when its items exceed the available space. */
+  scrollable?: boolean;
+  /** Give tabs equal width in horizontal mode; ignored when scrollable. */
+  fitted?: boolean;
+  /** Content shown after the tab list, outside the tablist role. */
+  extra?: ReactNode;
+  classNames?: {
+    list?: string;
+    tab?: string;
+    panel?: string;
+    extra?: string;
+  };
+}
+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 };
+//# sourceMappingURL=tabs.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../../src/components/molecules/tabs.tsx"],"mappings":";;;;cAQc,aAAI;UAED;EACf;EACA,OAAO;EACP,UAAU;EACV;;EAEA,OAAO;;UAGQ,cAAc,KAC7B,MAAM,sBAAsB;EAG5B,OAAO;;EAEP,YAAY;;EAEZ,gBAAgB,MAAM,sBAAsB;EAC5C;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,QAAQ;EACR;IACE;IACA;IACA;IACA;;;cAIE,SAAQ,OAAA,WAAA,aAAA,iBAAA,YAAA,QAAA,OAAA,YAAA,cAAA,UAAA,eAAA,gBAAA,SAcX,0BAAK,IAAA"}

package/dist/components/molecules/tabs.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "../../utils.mjs";
+import { tabs_exports } from "../../core/tabs.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/tabs.tsx
+const { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs_exports;
+const Tabs = ({ items, listLabel = "Tabs", keepMounted = false, activateOnFocus = false, scrollable = false, fitted = false, extra, classNames, defaultValue, onChange, onValueChange, orientation = "horizontal", ...props }) => {
+	const initialValue = defaultValue === void 0 ? items.find((item) => !item.disabled)?.key : defaultValue;
+	return /* @__PURE__ */ jsxs(Core, {
+		defaultValue: props.value === void 0 ? initialValue : void 0,
+		orientation,
+		onValueChange: (value, eventDetails) => {
+			onChange?.(value);
+			onValueChange?.(value, eventDetails);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "tabs-bar",
+			className: cn("flex min-w-0 items-stretch", orientation === "vertical" && "min-h-0 shrink-0 flex-col"),
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				"aria-label": listLabel,
+				activateOnFocus,
+				className: cn("min-w-0 flex-1", scrollable && (orientation === "vertical" ? "min-h-0 overflow-y-auto" : `[scrollbar-width:none] overflow-x-auto overflow-y-hidden
+                  [&::-webkit-scrollbar]:hidden`), classNames?.list),
+				children: items.map((item) => /* @__PURE__ */ jsxs(TabsTab, {
+					value: item.key,
+					disabled: item.disabled,
+					className: cn(fitted && !scrollable && orientation === "horizontal" && "flex-1", scrollable && "shrink-0", classNames?.tab),
+					children: [item.icon != null && /* @__PURE__ */ jsx("span", {
+						"data-slot": "tabs-icon",
+						"aria-hidden": "true",
+						className: "inline-flex shrink-0 items-center",
+						children: item.icon
+					}), item.label]
+				}, item.key))
+			}), extra != null && /* @__PURE__ */ jsx("div", {
+				"data-slot": "tabs-extra",
+				className: cn(`border-border flex shrink-0 items-center border-b px-3
+              data-[orientation=vertical]:border-r
+              data-[orientation=vertical]:border-b-0`, classNames?.extra),
+				"data-orientation": orientation,
+				children: extra
+			})]
+		}), items.map((item) => /* @__PURE__ */ jsx(TabsPanel, {
+			value: item.key,
+			keepMounted,
+			className: classNames?.panel,
+			children: item.children
+		}, item.key))]
+	});
+};
+//#endregion
+export { Tabs as default };
+
+//# sourceMappingURL=tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":["tabs"],"sources":["../../../src/components/molecules/tabs.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { tabs } from '../../core';\n\nconst { Tabs: Core, TabsList, TabsTab, TabsPanel } = tabs;\n\nexport interface Item {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  /** Decorative icon rendered before the label with consistent spacing. */\n  icon?: ReactNode;\n}\n\nexport interface Props extends Omit<\n  React.ComponentProps<typeof Core>,\n  'children' | 'onChange'\n> {\n  items: Item[];\n  /** Called when the selected tab changes. */\n  onChange?: (value: string | number | null) => void;\n  /** @deprecated Use `onChange` for the selected value. */\n  onValueChange?: React.ComponentProps<typeof Core>['onValueChange'];\n  listLabel?: string;\n  /** Preserve inactive panel DOM and local state. */\n  keepMounted?: boolean;\n  /** Select a tab when arrow-key focus moves to it. */\n  activateOnFocus?: boolean;\n  /** Scroll the tab list when its items exceed the available space. */\n  scrollable?: boolean;\n  /** Give tabs equal width in horizontal mode; ignored when scrollable. */\n  fitted?: boolean;\n  /** Content shown after the tab list, outside the tablist role. */\n  extra?: ReactNode;\n  classNames?: {\n    list?: string;\n    tab?: string;\n    panel?: string;\n    extra?: string;\n  };\n}\n\nconst Tabs = ({\n  items,\n  listLabel = 'Tabs',\n  keepMounted = false,\n  activateOnFocus = false,\n  scrollable = false,\n  fitted = false,\n  extra,\n  classNames,\n  defaultValue,\n  onChange,\n  onValueChange,\n  orientation = 'horizontal',\n  ...props\n}: Props) => {\n  const initialValue =\n    defaultValue === undefined\n      ? items.find(item => !item.disabled)?.key\n      : defaultValue;\n\n  return (\n    <Core\n      defaultValue={props.value === undefined ? initialValue : undefined}\n      orientation={orientation}\n      onValueChange={(value, eventDetails) => {\n        onChange?.(value);\n        onValueChange?.(value, eventDetails);\n      }}\n      {...props}\n    >\n      <div\n        data-slot=\"tabs-bar\"\n        className={cn(\n          'flex min-w-0 items-stretch',\n          orientation === 'vertical' && 'min-h-0 shrink-0 flex-col',\n          //\n        )}\n      >\n        <TabsList\n          aria-label={listLabel}\n          activateOnFocus={activateOnFocus}\n          className={cn(\n            'min-w-0 flex-1',\n            scrollable &&\n              (orientation === 'vertical'\n                ? 'min-h-0 overflow-y-auto'\n                : `[scrollbar-width:none] overflow-x-auto overflow-y-hidden\n                  [&::-webkit-scrollbar]:hidden`),\n            classNames?.list,\n            //\n          )}\n        >\n          {items.map(item => (\n            <TabsTab\n              key={item.key}\n              value={item.key}\n              disabled={item.disabled}\n              className={cn(\n                fitted &&\n                  !scrollable &&\n                  orientation === 'horizontal' &&\n                  'flex-1',\n                scrollable && 'shrink-0',\n                classNames?.tab,\n                //\n              )}\n            >\n              {item.icon != null && (\n                <span\n                  data-slot=\"tabs-icon\"\n                  aria-hidden=\"true\"\n                  className=\"inline-flex shrink-0 items-center\"\n                >\n                  {item.icon}\n                </span>\n              )}\n              {item.label}\n            </TabsTab>\n          ))}\n        </TabsList>\n        {extra != null && (\n          <div\n            data-slot=\"tabs-extra\"\n            className={cn(\n              `border-border flex shrink-0 items-center border-b px-3\n              data-[orientation=vertical]:border-r\n              data-[orientation=vertical]:border-b-0`,\n              classNames?.extra,\n              //\n            )}\n            data-orientation={orientation}\n          >\n            {extra}\n          </div>\n        )}\n      </div>\n      {items.map(item => (\n        <TabsPanel\n          key={item.key}\n          value={item.key}\n          keepMounted={keepMounted}\n          className={classNames?.panel}\n        >\n          {item.children}\n        </TabsPanel>\n      ))}\n    </Core>\n  );\n};\n\nexport default Tabs;\n"],"mappings":";;;;;AAQA,MAAM,EAAE,MAAM,MAAM,UAAU,SAAS,cAAcA;AAuCrD,MAAM,QAAQ,EACZ,OACA,YAAY,QACZ,cAAc,OACd,kBAAkB,OAClB,aAAa,OACb,SAAS,OACT,OACA,YACA,cACA,UACA,eACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,eACJ,iBAAiB,KAAA,IACb,MAAM,MAAK,SAAQ,CAAC,KAAK,QAAQ,CAAC,EAAE,MACpC;CAEN,OACE,qBAAC,MAAD;EACE,cAAc,MAAM,UAAU,KAAA,IAAY,eAAe,KAAA;EAC5C;EACb,gBAAgB,OAAO,iBAAiB;GACtC,WAAW,KAAK;GAChB,gBAAgB,OAAO,YAAY;EACrC;EACA,GAAI;EAPN,UAAA,CASE,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,8BACA,gBAAgB,cAAc,2BAEhC;GANF,UAAA,CAQE,oBAAC,UAAD;IACE,cAAY;IACK;IACjB,WAAW,GACT,kBACA,eACG,gBAAgB,aACb,4BACA;mDAEN,YAAY,IAEd;IAEC,UAAA,MAAM,KAAI,SACT,qBAAC,SAAD;KAEE,OAAO,KAAK;KACZ,UAAU,KAAK;KACf,WAAW,GACT,UACE,CAAC,cACD,gBAAgB,gBAChB,UACF,cAAc,YACd,YAAY,GAEd;KAZF,UAAA,CAcG,KAAK,QAAQ,QACZ,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAU;MAET,UAAA,KAAK;KACF,CAAA,GAEP,KAAK,KACC;IAvBF,GAAA,KAAK,GAuBH,CACV;GACO,CAAA,GACT,SAAS,QACR,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT;;uDAGA,YAAY,KAEd;IACA,oBAAkB;IAEjB,UAAA;GACE,CAAA,CAEJ;EACJ,CAAA,GAAA,MAAM,KAAI,SACT,oBAAC,WAAD;GAEE,OAAO,KAAK;GACC;GACb,WAAW,YAAY;GAEtB,UAAA,KAAK;EACG,GANJ,KAAK,GAMD,CACZ,CACG;;AAEV"}

package/dist/components/molecules/upload.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../../utils.mjs";
 import Button from "../../Button.mjs";
-import { useId } from "react";
 import { Upload, X } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { useControllableState, useFileDrop, useFileToDataUrl } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/molecules/upload.tsx
 let uidCounter = 0;
 const nextUid = () => uidCounter += 1;
@@ -53,6 +53,7 @@ const Upload$1 = ({ defaultValue = [], value: _value, multiple = true, accept =
 		onDrop: addFiles
 	});
 	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "upload",
 		className: cn("flex flex-col gap-3", className),
 		children: [/* @__PURE__ */ jsxs("label", {
 			ref: dropRef,

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

@@ -1 +1 @@
-{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport {\n  useControllableState,\n  useFileDrop,\n  useFileToDataUrl,\n} from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\n// Monotonic per-session counter used as a uniqueness tiebreaker for file\n// uids. Guarantees a unique suffix even for the same file (identical\n// name/lastModified/size) added twice, which name+lastModified+size alone\n// can't. These uids are internal React keys, not cryptographic, so a plain\n// counter is enough — and it avoids a runtime `uuid` dependency.\nlet uidCounter = 0;\nconst nextUid = () => (uidCounter += 1);\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n  /**\n   * Called once per file that didn't make it in — either bumped by\n   * `maxCount` or failed to read.\n   */\n  onReject?: (info: { file: File; reason: 'max-count' | 'read-error' }) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n  onReject,\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [files, setFiles] = useControllableState<UploadFile[]>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const addFiles = async (incoming: File[]) => {\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n    const rejected = incoming.slice(remaining);\n\n    rejected.forEach(file => onReject?.({ file, reason: 'max-count' }));\n\n    if (accepted.length === 0) {\n      return;\n    }\n\n    const uploaded = (\n      await Promise.all(\n        accepted.map(async file => {\n          try {\n            return {\n              // `nextUid()` guarantees uniqueness even for the same file\n              // added twice (identical name/lastModified/size), which\n              // name+lastModified+size alone can't — a collision there\n              // corrupted React's item keys and made removeFile's\n              // uid-based filter delete both copies at once.\n              uid: `${file.name}-${file.lastModified}-${file.size}-${nextUid()}`,\n              name: file.name,\n              url: await readAsDataUrl(file),\n            };\n          } catch {\n            onReject?.({ file, reason: 'read-error' });\n            return null;\n          }\n        }),\n      )\n    ).filter((file): file is UploadFile => file !== null);\n\n    if (uploaded.length === 0) {\n      return;\n    }\n\n    setFiles([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    setFiles(files.filter(file => file.uid !== uid));\n  };\n\n  const { dropRef, isDragging } = useFileDrop<HTMLLabelElement>({\n    accept,\n    multiple,\n    disabled,\n    onDrop: addFiles,\n  });\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        ref={dropRef}\n        htmlFor={inputId}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragging && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(Array.from(e.target.files));\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'm-0 flex list-none flex-col gap-2 p-0',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                // `m-0` completes the list reset the `ul` above starts — see\n                // Radio.Group for the host rule this guards against.\n                'm-0 flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                variant=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":"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"}
+{"version":3,"file":"upload.mjs","names":["Upload","UploadIcon"],"sources":["../../../src/components/molecules/upload.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nimport {\n  useControllableState,\n  useFileDrop,\n  useFileToDataUrl,\n} from '@jbpark/use-hooks';\nimport { Upload as UploadIcon, X } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\n// Monotonic per-session counter used as a uniqueness tiebreaker for file\n// uids. Guarantees a unique suffix even for the same file (identical\n// name/lastModified/size) added twice, which name+lastModified+size alone\n// can't. These uids are internal React keys, not cryptographic, so a plain\n// counter is enough — and it avoids a runtime `uuid` dependency.\nlet uidCounter = 0;\nconst nextUid = () => (uidCounter += 1);\n\nexport interface UploadFile {\n  uid: string;\n  name: string;\n  url: string;\n}\n\nexport interface Props {\n  defaultValue?: UploadFile[];\n  value?: UploadFile[];\n  multiple?: boolean;\n  accept?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  className?: string;\n  classNames?: {\n    dropzone?: string;\n    list?: string;\n    item?: string;\n  };\n  onChange?: (files: UploadFile[]) => void;\n  /**\n   * Called once per file that didn't make it in — either bumped by\n   * `maxCount` or failed to read.\n   */\n  onReject?: (info: { file: File; reason: 'max-count' | 'read-error' }) => void;\n}\n\nconst isImage = (file: UploadFile) =>\n  /^data:image\\//.test(file.url) ||\n  /\\.(png|jpe?g|gif|webp|svg)$/i.test(file.name);\n\nconst Upload = ({\n  defaultValue = [],\n  value: _value,\n  multiple = true,\n  accept = 'image/*',\n  maxCount,\n  disabled,\n  className,\n  classNames,\n  onChange: _onChange = () => {},\n  onReject,\n}: Props) => {\n  const inputId = useId();\n  const readAsDataUrl = useFileToDataUrl();\n  const [files, setFiles] = useControllableState<UploadFile[]>({\n    value: _value,\n    defaultValue,\n    onChange: _onChange,\n  });\n\n  const addFiles = async (incoming: File[]) => {\n    const remaining =\n      typeof maxCount === 'number'\n        ? Math.max(0, maxCount - files.length)\n        : incoming.length;\n\n    const accepted = incoming.slice(0, remaining);\n    const rejected = incoming.slice(remaining);\n\n    rejected.forEach(file => onReject?.({ file, reason: 'max-count' }));\n\n    if (accepted.length === 0) {\n      return;\n    }\n\n    const uploaded = (\n      await Promise.all(\n        accepted.map(async file => {\n          try {\n            return {\n              // `nextUid()` guarantees uniqueness even for the same file\n              // added twice (identical name/lastModified/size), which\n              // name+lastModified+size alone can't — a collision there\n              // corrupted React's item keys and made removeFile's\n              // uid-based filter delete both copies at once.\n              uid: `${file.name}-${file.lastModified}-${file.size}-${nextUid()}`,\n              name: file.name,\n              url: await readAsDataUrl(file),\n            };\n          } catch {\n            onReject?.({ file, reason: 'read-error' });\n            return null;\n          }\n        }),\n      )\n    ).filter((file): file is UploadFile => file !== null);\n\n    if (uploaded.length === 0) {\n      return;\n    }\n\n    setFiles([...files, ...uploaded]);\n  };\n\n  const removeFile = (uid: string) => {\n    setFiles(files.filter(file => file.uid !== uid));\n  };\n\n  const { dropRef, isDragging } = useFileDrop<HTMLLabelElement>({\n    accept,\n    multiple,\n    disabled,\n    onDrop: addFiles,\n  });\n\n  return (\n    <div\n      data-slot=\"upload\"\n      className={cn(\n        'flex flex-col gap-3',\n        className,\n        //\n      )}\n    >\n      <label\n        ref={dropRef}\n        htmlFor={inputId}\n        className={cn(\n          'flex cursor-pointer flex-col items-center justify-center gap-2',\n          'rounded-md border border-dashed p-6 text-center',\n          'text-muted-foreground text-sm',\n          'transition-colors',\n          isDragging && 'border-primary bg-accent',\n          disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n          classNames?.dropzone,\n          //\n        )}\n      >\n        <UploadIcon className=\"size-6\" />\n        <span>Click or drag file{multiple ? 's' : ''} to upload</span>\n        <input\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"hidden\"\n          onChange={e => {\n            if (e.target.files?.length) {\n              addFiles(Array.from(e.target.files));\n            }\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul\n          className={cn(\n            'm-0 flex list-none flex-col gap-2 p-0',\n            classNames?.list,\n            //\n          )}\n        >\n          {files.map(file => (\n            <li\n              key={file.uid}\n              className={cn(\n                // `m-0` completes the list reset the `ul` above starts — see\n                // Radio.Group for the host rule this guards against.\n                'm-0 flex items-center gap-2 rounded-md border p-2',\n                classNames?.item,\n                //\n              )}\n            >\n              {isImage(file) && (\n                <img\n                  src={file.url}\n                  alt=\"\"\n                  className=\"size-10 shrink-0 rounded object-cover\"\n                />\n              )}\n              <span className=\"flex-1 truncate text-sm\">{file.name}</span>\n              <Button\n                variant=\"text\"\n                shape=\"circle\"\n                size=\"small\"\n                icon={<X className=\"size-4\" />}\n                onClick={() => removeFile(file.uid)}\n                className=\"text-muted-foreground hover:text-foreground shrink-0\"\n                aria-label={`Remove ${file.name}`}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Upload;\n"],"mappings":"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"}

package/dist/components/organisms/drawer.d.mts

@@ -8,7 +8,7 @@ interface Props {
   closable?: boolean;
   closeIcon?: React.ReactNode;
   direction?: 'top' | 'bottom' | 'left' | 'right';
-  size?: 'small' | 'medium' | 'large' | 'full' | string;
+  size?: 'small' | 'middle' | 'medium' | 'large' | 'full' | string;
   maskClosable?: boolean;
   handlebar?: boolean;
   rounded?: boolean;

package/dist/components/organisms/drawer.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";UA2CiB;EACf;EACA,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,QAAQ,MAAM;EACd,SAAS,MAAM;EACf;EACA,YAAY,MAAM;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF,YAAY;EACZ;;cA8BI,WAAU,MAAA,OAAA,OAAA,QAAA,UAAA,WAAA,WAAA,MAAA,cAAA,WAAA,SAAA,MAAA,WAAA,YAAA,OAAA,UAAA,WAAA,YAAA,SAoBb,0BAAK,IAAA"}
+{"version":3,"file":"drawer.d.mts","names":[],"sources":["../../../src/components/organisms/drawer.tsx"],"mappings":";UA2CiB;EACf;EACA,WAAW,MAAM;EACjB,QAAQ,MAAM;EACd,QAAQ,MAAM;EACd,SAAS,MAAM;EACf;EACA,YAAY,MAAM;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,MAAM;EACd;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF,YAAY;EACZ;;cA+CI,WAAU,MAAA,OAAA,OAAA,QAAA,UAAA,WAAA,WAAA,MAAA,cAAA,WAAA,SAAA,MAAA,WAAA,YAAA,OAAA,UAAA,WAAA,YAAA,SAoBb,0BAAK,IAAA"}