@jbpark/ui-kit 10.2.0 → 10.4.0

package/dist/components/atoms/typography/text.d.mts

@@ -1,9 +1,9 @@
 //#region src/components/atoms/typography/text.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'span'> {
+export interface Props extends React.ComponentPropsWithoutRef<'span'> {
   underline?: boolean;
   strong?: boolean;
 }
 declare const Text: ({ children, underline, strong, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Text as default };
+export { Text as default };
 //# sourceMappingURL=text.d.mts.map

package/dist/components/atoms/typography/text.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/text.tsx"],"mappings":";UAEiB,cAAc,MAAM;EACnC;EACA;;cAGI,SAAQ,UAAA,WAAA,QAAA,cAAA,SAAsD,0BAAK,IAAA"}
+{"version":3,"file":"text.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/text.tsx"],"mappings":";iBAEiB,cAAc,MAAM;EACnC;EACA;;cAGI,SAAQ,UAAA,WAAA,QAAA,cAAA,SAAsD,0BAAK,IAAA"}

package/dist/components/atoms/typography/title.d.mts

@@ -1,8 +1,8 @@
 //#region src/components/atoms/typography/title.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
+export interface Props extends React.ComponentPropsWithoutRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 declare const Title: ({ children, level, className, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Title as default };
+export { Title as default };
 //# sourceMappingURL=title.d.mts.map

package/dist/components/atoms/typography/title.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"title.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"mappings":";UAEiB,cAAc,MAAM;EAGnC;;cAiBI,UAAS,UAAA,OAAA,cAAA,SAA8C,0BAAK,IAAA"}
+{"version":3,"file":"title.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/title.tsx"],"mappings":";iBAEiB,cAAc,MAAM;EAGnC;;cAiBI,UAAS,UAAA,OAAA,cAAA,SAA8C,0BAAK,IAAA"}

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

@@ -1,6 +1,6 @@
 //#region src/components/atoms/typography/typography.d.ts
-interface Props extends React.ComponentPropsWithoutRef<'article'> {}
+export interface Props extends React.ComponentPropsWithoutRef<'article'> {}
 declare const Typography: ({ children, ...props }: Props) => import("react").JSX.Element;
 //#endregion
-export { Props, Typography as default };
+export { Typography as default };
 //# sourceMappingURL=typography.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"typography.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/typography.tsx"],"mappings":";UAAiB,cAAc,MAAM;cAE/B,eAAc,aAAA,SAAwB,0BAAK,IAAA"}
+{"version":3,"file":"typography.d.mts","names":[],"sources":["../../../../src/components/atoms/typography/typography.tsx"],"mappings":";iBAAiB,cAAc,MAAM;cAE/B,eAAc,aAAA,SAAwB,0BAAK,IAAA"}

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

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

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

@@ -2,9 +2,9 @@
 import { cn } from "../../../../utils.mjs";
 import Label from "./label.mjs";
 import { MENU_CLASSNAMES } from "../menu.mjs";
-import { ChevronDown } from "lucide-react";
 import { createElement, useRef, useState } from "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 Omit<Props, 'selectionMap'>, 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,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"}
+{"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/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/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/organisms/form/context.d.mts

@@ -0,0 +1,4 @@
+//#region src/components/organisms/form/context.d.ts
+export type Layout = 'vertical' | 'horizontal';
+//#endregion
+//# sourceMappingURL=context.d.mts.map

package/dist/components/organisms/form/context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.mts","names":[],"sources":["../../../../src/components/organisms/form/context.ts"],"mappings":";YAIY"}

package/dist/components/organisms/form/context.mjs

@@ -0,0 +1,9 @@
+"use client";
+import { createContext } from "react";
+//#region src/components/organisms/form/context.ts
+const LayoutContext = createContext("vertical");
+const RequiredContext = createContext(false);
+//#endregion
+export { LayoutContext, RequiredContext };
+
+//# sourceMappingURL=context.mjs.map

package/dist/components/organisms/form/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../src/components/organisms/form/context.ts"],"sourcesContent":["'use client';\n\nimport { createContext } from 'react';\n\nexport type Layout = 'vertical' | 'horizontal';\n\nexport const LayoutContext = createContext<Layout>('vertical');\nexport const RequiredContext = createContext(false);\n"],"mappings":";;;AAMA,MAAa,gBAAgB,cAAsB,UAAU;AAC7D,MAAa,kBAAkB,cAAc,KAAK"}

package/dist/components/organisms/form/control.d.mts

@@ -0,0 +1,11 @@
+import { Field, form_d_exports } from "../../../core/form.mjs";
+import "../../../core/index.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/organisms/form/control.d.ts
+export interface Props extends Omit<ComponentPropsWithRef<typeof Field.Control>, 'className'> {
+  className?: string;
+}
+declare const Control: ({ required, render, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Control as default };
+//# sourceMappingURL=control.d.mts.map

package/dist/components/organisms/form/control.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.d.mts","names":["form"],"sources":["../../../../src/components/organisms/form/control.tsx"],"mappings":";;;;iBAQiB,cAAc,KAC7B,6BAAwC,MAAA;EAGxC;;cAGI,YAAW,UAAA,WAAA,SAA4C,0BAAK,IAAA"}

package/dist/components/organisms/form/control.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { Field } from "../../../core/form.mjs";
+import Input from "../../../Input.mjs";
+import { RequiredContext } from "./context.mjs";
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/organisms/form/control.tsx
+const Control = ({ required, render = /* @__PURE__ */ jsx(Input, {}), ...props }) => {
+	const inheritedRequired = useContext(RequiredContext);
+	return /* @__PURE__ */ jsx(Field.Control, {
+		...props,
+		required: required ?? inheritedRequired,
+		render
+	});
+};
+//#endregion
+export { Control as default };
+
+//# sourceMappingURL=control.mjs.map

package/dist/components/organisms/form/control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.mjs","names":[],"sources":["../../../../src/components/organisms/form/control.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentPropsWithRef, useContext } from 'react';\n\nimport { form } from '../../../core';\nimport Input from '../../atoms/input';\nimport { RequiredContext } from './context';\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<typeof form.Field.Control>,\n  'className'\n> {\n  className?: string;\n}\n\nconst Control = ({ required, render = <Input />, ...props }: Props) => {\n  const inheritedRequired = useContext(RequiredContext);\n\n  return (\n    <form.Field.Control\n      {...props}\n      required={required ?? inheritedRequired}\n      render={render}\n    />\n  );\n};\n\nexport default Control;\n"],"mappings":";;;;;;;AAeA,MAAM,WAAW,EAAE,UAAU,SAAS,oBAAC,OAAD,CAAQ,CAAA,GAAG,GAAG,YAAmB;CACrE,MAAM,oBAAoB,WAAW,eAAe;CAEpD,OACE,oBAAA,MAAY,SAAZ;EACE,GAAI;EACJ,UAAU,YAAY;EACd;CACT,CAAA;AAEL"}

package/dist/components/organisms/form/field.d.mts

@@ -0,0 +1,25 @@
+import { Field as Field$1, form_d_exports } from "../../../core/form.mjs";
+import "../../../core/index.mjs";
+import { Layout } from "./context.mjs";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/organisms/form/field.d.ts
+export interface Props extends Omit<ComponentPropsWithRef<typeof Field$1.Root>, 'className' | 'render' | 'children'> {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  children?: ReactNode;
+  required?: boolean;
+  layout?: Layout;
+  className?: string;
+  classNames?: {
+    label?: string;
+    required?: string;
+    content?: string;
+    description?: string;
+    error?: string;
+  };
+}
+declare const Field: ({ label, description, error, children, required, layout, invalid, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Field as default };
+//# sourceMappingURL=field.d.mts.map

package/dist/components/organisms/form/field.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.mts","names":["form"],"sources":["../../../../src/components/organisms/form/field.tsx"],"mappings":";;;;;iBASiB,cAAc,KAC7B,6BAAwC,QAAA;EAGxC,QAAQ;EACR,cAAc;EACd,QAAQ;EACR,WAAW;EACX;EACA,SAAS;EACT;EACA;IACE;IACA;IACA;IACA;IACA;;;cAIE,UAAS,OAAA,aAAA,OAAA,UAAA,UAAA,QAAA,SAAA,WAAA,eAAA,SAWZ,0BAAK,IAAA"}

package/dist/components/organisms/form/field.mjs

@@ -0,0 +1,54 @@
+"use client";
+import { cn } from "../../../utils.mjs";
+import { Field as Field$1 } from "../../../core/form.mjs";
+import { LayoutContext, RequiredContext } from "./context.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/form/field.tsx
+const Field = ({ label, description, error, children, required = false, layout, invalid, className, classNames, ...props }) => {
+	const inheritedLayout = useContext(LayoutContext);
+	const resolvedLayout = layout ?? inheritedLayout;
+	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+	return /* @__PURE__ */ jsx(RequiredContext.Provider, {
+		value: required,
+		children: /* @__PURE__ */ jsxs(Field$1.Root, {
+			...props,
+			"data-slot": "form-field",
+			invalid: invalid || hasError,
+			className: cn("grid min-w-0 gap-2", resolvedLayout === "horizontal" && `@md/form:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]
+            @md/form:items-start`, className),
+			children: [label != null && /* @__PURE__ */ jsxs(Field$1.Label, {
+				"data-slot": "form-label",
+				className: cn(`flex min-w-0 items-center gap-1 text-sm font-medium
+              data-disabled:opacity-50`, resolvedLayout === "horizontal" && "@md/form:pt-2", classNames?.label),
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn("text-destructive", classNames?.required),
+					children: "*"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-slot": "form-field-content",
+				className: cn("flex min-w-0 flex-col gap-1.5", classNames?.content),
+				children: [
+					children,
+					description != null && /* @__PURE__ */ jsx(Field$1.Description, {
+						"data-slot": "form-description",
+						className: cn("text-muted-foreground text-sm [overflow-wrap:anywhere]", classNames?.description),
+						children: description
+					}),
+					/* @__PURE__ */ jsx(Field$1.Error, {
+						...hasError ? { children: error } : {},
+						"data-slot": "form-error",
+						role: "alert",
+						match: hasError ? true : void 0,
+						className: cn("text-destructive text-sm [overflow-wrap:anywhere]", classNames?.error)
+					})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { Field as default };
+
+//# sourceMappingURL=field.mjs.map