@ifhover/leaf-ui 0.0.0-stage → 0.6.0

package/dist/esm/scrollbar/scrollbar.js

@@ -0,0 +1,251 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { classes } from "../shared/classes.js";
+import { useMergedRef } from "../shared/field.js";
+import { useText } from "../shared/use-text.js";
+const initialGeometry = {
+    width: 0,
+    height: 0,
+    scrollWidth: 0,
+    scrollHeight: 0,
+    left: 0,
+    top: 0,
+    rtl: false
+};
+const scrollbar_ScrollbarControl = /*#__PURE__*/ forwardRef(function({ height, maxHeight, orientation = 'both', scrollbar = 'auto', viewportClassName, viewportStyle, contentClassName, contentStyle, verticalOffset = 0, className, style, children, tabIndex = 0, onScroll, id: providedId, role = 'region', 'aria-label': label, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...props }, forwarded) {
+    const viewport = useRef(null);
+    const content = useRef(null);
+    const ref = useMergedRef(viewport, forwarded);
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const t = useText();
+    const [geometry, setGeometry] = useState(initialGeometry);
+    const [scrolling, setScrolling] = useState(false);
+    const [dragging, setDragging] = useState(false);
+    const frame = useRef(void 0);
+    const timeout = useRef(void 0);
+    const drag = useRef(void 0);
+    const measure = useCallback(()=>{
+        const element = viewport.current;
+        if (!element) return;
+        const next = {
+            width: element.clientWidth,
+            height: element.clientHeight,
+            scrollWidth: element.scrollWidth,
+            scrollHeight: element.scrollHeight,
+            left: Math.abs(element.scrollLeft),
+            top: element.scrollTop,
+            rtl: 'rtl' === getComputedStyle(element).direction
+        };
+        setGeometry((previous)=>Object.keys(next).every((key)=>next[key] === previous[key]) ? previous : next);
+    }, []);
+    const schedule = useCallback(()=>{
+        if (void 0 !== frame.current) return;
+        frame.current = requestAnimationFrame(()=>{
+            frame.current = void 0;
+            measure();
+        });
+    }, [
+        measure
+    ]);
+    useEffect(()=>{
+        measure();
+        const observer = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(measure);
+        if (viewport.current) observer?.observe(viewport.current);
+        if (content.current) observer?.observe(content.current);
+        const mutation = "u" < typeof MutationObserver ? void 0 : new MutationObserver(schedule);
+        if (content.current) mutation?.observe(content.current, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true
+        });
+        window.addEventListener('resize', schedule);
+        return ()=>{
+            observer?.disconnect();
+            mutation?.disconnect();
+            window.removeEventListener('resize', schedule);
+            if (void 0 !== frame.current) cancelAnimationFrame(frame.current);
+            frame.current = void 0;
+            clearTimeout(timeout.current);
+        };
+    }, [
+        measure,
+        schedule
+    ]);
+    function setPosition(vertical, value) {
+        const element = viewport.current;
+        if (!element) return;
+        const maximum = vertical ? element.scrollHeight - element.clientHeight : element.scrollWidth - element.clientWidth;
+        const position = Math.min(Math.max(0, value), Math.max(0, maximum));
+        if (vertical) element.scrollTop = position;
+        else element.scrollLeft = geometry.rtl ? -position : position;
+        schedule();
+    }
+    const horizontalOverflow = 'vertical' !== orientation && geometry.scrollWidth > geometry.width + 1;
+    const verticalOverflow = 'horizontal' !== orientation && geometry.scrollHeight > geometry.height + 1;
+    const inset = Math.min(Math.max(0, verticalOffset), Math.max(0, geometry.height - 32));
+    const viewportAccessibility = {
+        role,
+        'aria-label': label,
+        'aria-labelledby': labelledBy,
+        'aria-describedby': describedBy
+    };
+    function bar(vertical) {
+        const visibleSize = vertical ? geometry.height : geometry.width;
+        const contentSize = vertical ? geometry.scrollHeight : geometry.scrollWidth;
+        const offset = vertical ? inset : 0;
+        const crossOverflow = vertical ? horizontalOverflow : verticalOverflow;
+        const trackSize = Math.max(0, visibleSize - offset - 8 - (crossOverflow ? 8 : 0));
+        const thumbSize = Math.min(trackSize, Math.max(24, trackSize * (visibleSize - offset) / Math.max(1, contentSize - offset)));
+        const maximum = Math.max(0, contentSize - visibleSize);
+        const position = Math.min(maximum, Math.max(0, vertical ? geometry.top : geometry.left));
+        const thumbPosition = maximum ? position / maximum * (trackSize - thumbSize) : 0;
+        const logicalPosition = !vertical && geometry.rtl ? trackSize - thumbSize - thumbPosition : thumbPosition;
+        return /*#__PURE__*/ jsxs("div", {
+            className: classes('leaf-scrollbar__bar', vertical ? 'leaf-scrollbar__bar--vertical' : 'leaf-scrollbar__bar--horizontal'),
+            style: vertical ? {
+                top: inset + 4,
+                bottom: horizontalOverflow ? 12 : 4
+            } : {
+                right: verticalOverflow && !geometry.rtl ? 12 : 4,
+                left: verticalOverflow && geometry.rtl ? 12 : 4
+            },
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": "true",
+                    className: "leaf-scrollbar__thumb",
+                    style: vertical ? {
+                        height: thumbSize,
+                        transform: `translateY(${logicalPosition}px)`
+                    } : {
+                        width: thumbSize,
+                        transform: `translateX(${logicalPosition}px)`
+                    }
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    role: "scrollbar",
+                    tabIndex: maximum ? 0 : -1,
+                    className: "leaf-scrollbar__control",
+                    "aria-label": vertical ? t('scrollbar.verticalScrollbar') : t('scrollbar.horizontalScrollbar'),
+                    "aria-controls": id,
+                    "aria-orientation": vertical ? 'vertical' : 'horizontal',
+                    "aria-valuemin": 0,
+                    "aria-valuemax": maximum,
+                    "aria-valuenow": position,
+                    "aria-disabled": !maximum || void 0,
+                    onKeyDown: (event)=>{
+                        if (!maximum) return;
+                        const current = viewport.current;
+                        const position = current ? vertical ? current.scrollTop : Math.abs(current.scrollLeft) : 0;
+                        let value;
+                        if ('Home' === event.key) value = 0;
+                        if ('End' === event.key) value = maximum;
+                        if ('PageDown' === event.key) value = position + visibleSize;
+                        if ('PageUp' === event.key) value = position - visibleSize;
+                        if ('ArrowDown' === event.key) value = position + 40;
+                        if ('ArrowUp' === event.key) value = position - 40;
+                        if ('ArrowRight' === event.key) value = position + (geometry.rtl ? -40 : 40);
+                        if ('ArrowLeft' === event.key) value = position + (geometry.rtl ? 40 : -40);
+                        if (void 0 === value) return;
+                        event.preventDefault();
+                        setPosition(vertical, value);
+                    },
+                    onPointerDown: (event)=>{
+                        if (0 !== event.button || !maximum) return;
+                        event.preventDefault();
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;
+                        const onThumb = pointer >= logicalPosition && pointer <= logicalPosition + thumbSize;
+                        drag.current = {
+                            pointerId: event.pointerId,
+                            vertical,
+                            offset: onThumb ? pointer - logicalPosition : thumbSize / 2
+                        };
+                        event.currentTarget.setPointerCapture?.(event.pointerId);
+                        setDragging(true);
+                        if (!onThumb) {
+                            const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - thumbSize / 2));
+                            setPosition(vertical, (!vertical && geometry.rtl ? trackSize - thumbSize - next : next) / Math.max(1, trackSize - thumbSize) * maximum);
+                        }
+                    },
+                    onPointerMove: (event)=>{
+                        const active = drag.current;
+                        if (!active || active.pointerId !== event.pointerId || active.vertical !== vertical) return;
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;
+                        const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - active.offset));
+                        setPosition(vertical, (!vertical && geometry.rtl ? trackSize - thumbSize - next : next) / Math.max(1, trackSize - thumbSize) * maximum);
+                    },
+                    onPointerUp: ()=>{
+                        drag.current = void 0;
+                        setDragging(false);
+                    },
+                    onPointerCancel: ()=>{
+                        drag.current = void 0;
+                        setDragging(false);
+                    },
+                    onLostPointerCapture: ()=>{
+                        drag.current = void 0;
+                        setDragging(false);
+                    }
+                })
+            ]
+        }, vertical ? 'vertical' : 'horizontal');
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        className: classes('leaf-scrollbar', className),
+        "data-scrollbar": scrollbar,
+        "data-scrolling": scrolling || void 0,
+        "data-dragging": dragging || void 0,
+        style: {
+            height,
+            maxHeight,
+            ...style
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                id: id,
+                tabIndex: tabIndex,
+                ...viewportAccessibility,
+                className: classes('leaf-scrollbar__viewport', viewportClassName),
+                style: {
+                    height: (style?.height ?? height) === void 0 ? void 0 : '100%',
+                    overflowX: 'vertical' === orientation ? 'hidden' : 'auto',
+                    overflowY: 'horizontal' === orientation ? 'hidden' : 'auto',
+                    ...viewportStyle
+                },
+                onScroll: (event)=>{
+                    schedule();
+                    setScrolling(true);
+                    clearTimeout(timeout.current);
+                    timeout.current = setTimeout(()=>setScrolling(false), 700);
+                    onScroll?.(event);
+                },
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: content,
+                    className: classes('leaf-scrollbar__content', contentClassName),
+                    style: contentStyle,
+                    children: children
+                })
+            }),
+            'hidden' !== scrollbar && (verticalOverflow || 'always' === scrollbar && 'horizontal' !== orientation) && bar(true),
+            'hidden' !== scrollbar && (horizontalOverflow || 'always' === scrollbar && 'vertical' !== orientation) && bar(false)
+        ]
+    });
+});
+const scrollbar_Scrollbar = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const props = useComponentProps('Scrollbar', rawProps);
+    return /*#__PURE__*/ jsx(scrollbar_ScrollbarControl, {
+        ...props,
+        ref: ref
+    });
+});
+scrollbar_Scrollbar.displayName = 'Scrollbar';
+export { scrollbar_Scrollbar as Scrollbar, scrollbar_ScrollbarControl as ScrollbarControl };
+
+//# sourceMappingURL=scrollbar.js.map

package/dist/esm/scrollbar/scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar/scrollbar.js","sources":["../../../src/scrollbar/scrollbar.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  forwardRef,\n  type HTMLAttributes,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport { useMergedRef } from '../shared/field';\nimport { useText } from '../shared/use-text';\n\nexport interface ScrollbarProps extends HTMLAttributes<HTMLDivElement> {\n  height?: CSSProperties['height'];\n  maxHeight?: CSSProperties['maxHeight'];\n  orientation?: 'vertical' | 'horizontal' | 'both';\n  scrollbar?: 'auto' | 'always' | 'hidden';\n  viewportClassName?: string;\n  viewportStyle?: CSSProperties;\n  contentClassName?: string;\n  contentStyle?: CSSProperties;\n  verticalOffset?: number;\n}\n\ninterface Geometry {\n  width: number;\n  height: number;\n  scrollWidth: number;\n  scrollHeight: number;\n  left: number;\n  top: number;\n  rtl: boolean;\n}\n\nconst initialGeometry: Geometry = {\n  width: 0,\n  height: 0,\n  scrollWidth: 0,\n  scrollHeight: 0,\n  left: 0,\n  top: 0,\n  rtl: false,\n};\n\nexport const ScrollbarControl = forwardRef<HTMLDivElement, ScrollbarProps>(\n  function ScrollbarControl(\n    {\n      height,\n      maxHeight,\n      orientation = 'both',\n      scrollbar = 'auto',\n      viewportClassName,\n      viewportStyle,\n      contentClassName,\n      contentStyle,\n      verticalOffset = 0,\n      className,\n      style,\n      children,\n      tabIndex = 0,\n      onScroll,\n      id: providedId,\n      role = 'region',\n      'aria-label': label,\n      'aria-labelledby': labelledBy,\n      'aria-describedby': describedBy,\n      ...props\n    }: ScrollbarProps,\n    forwarded,\n  ) {\n    const viewport = useRef<HTMLDivElement>(null);\n    const content = useRef<HTMLDivElement>(null);\n    const ref = useMergedRef(viewport, forwarded);\n    const generatedId = useId();\n    const id = providedId ?? generatedId;\n    const t = useText();\n    const [geometry, setGeometry] = useState(initialGeometry);\n    const [scrolling, setScrolling] = useState(false);\n    const [dragging, setDragging] = useState(false);\n    const frame = useRef<number | undefined>(undefined);\n    const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    const drag = useRef<{ pointerId: number; offset: number; vertical: boolean } | undefined>(\n      undefined,\n    );\n    const measure = useCallback(() => {\n      const element = viewport.current;\n      if (!element) return;\n      const next: Geometry = {\n        width: element.clientWidth,\n        height: element.clientHeight,\n        scrollWidth: element.scrollWidth,\n        scrollHeight: element.scrollHeight,\n        left: Math.abs(element.scrollLeft),\n        top: element.scrollTop,\n        rtl: getComputedStyle(element).direction === 'rtl',\n      };\n      setGeometry((previous) =>\n        Object.keys(next).every(\n          (key) => next[key as keyof Geometry] === previous[key as keyof Geometry],\n        )\n          ? previous\n          : next,\n      );\n    }, []);\n    const schedule = useCallback(() => {\n      if (frame.current !== undefined) return;\n      frame.current = requestAnimationFrame(() => {\n        frame.current = undefined;\n        measure();\n      });\n    }, [measure]);\n    useEffect(() => {\n      measure();\n      const observer =\n        typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);\n      if (viewport.current) observer?.observe(viewport.current);\n      if (content.current) observer?.observe(content.current);\n      const mutation =\n        typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(schedule);\n      if (content.current)\n        mutation?.observe(content.current, {\n          childList: true,\n          subtree: true,\n          characterData: true,\n          attributes: true,\n        });\n      window.addEventListener('resize', schedule);\n      return () => {\n        observer?.disconnect();\n        mutation?.disconnect();\n        window.removeEventListener('resize', schedule);\n        if (frame.current !== undefined) cancelAnimationFrame(frame.current);\n        frame.current = undefined;\n        clearTimeout(timeout.current);\n      };\n    }, [measure, schedule]);\n\n    function setPosition(vertical: boolean, value: number) {\n      const element = viewport.current;\n      if (!element) return;\n      const maximum = vertical\n        ? element.scrollHeight - element.clientHeight\n        : element.scrollWidth - element.clientWidth;\n      const position = Math.min(Math.max(0, value), Math.max(0, maximum));\n      if (vertical) element.scrollTop = position;\n      else element.scrollLeft = geometry.rtl ? -position : position;\n      schedule();\n    }\n\n    const horizontalOverflow =\n      orientation !== 'vertical' && geometry.scrollWidth > geometry.width + 1;\n    const verticalOverflow =\n      orientation !== 'horizontal' && geometry.scrollHeight > geometry.height + 1;\n    const inset = Math.min(Math.max(0, verticalOffset), Math.max(0, geometry.height - 32));\n    const viewportAccessibility = {\n      role,\n      'aria-label': label,\n      'aria-labelledby': labelledBy,\n      'aria-describedby': describedBy,\n    };\n\n    function bar(vertical: boolean) {\n      const visibleSize = vertical ? geometry.height : geometry.width;\n      const contentSize = vertical ? geometry.scrollHeight : geometry.scrollWidth;\n      const offset = vertical ? inset : 0;\n      const crossOverflow = vertical ? horizontalOverflow : verticalOverflow;\n      const trackSize = Math.max(0, visibleSize - offset - 8 - (crossOverflow ? 8 : 0));\n      const thumbSize = Math.min(\n        trackSize,\n        Math.max(24, (trackSize * (visibleSize - offset)) / Math.max(1, contentSize - offset)),\n      );\n      const maximum = Math.max(0, contentSize - visibleSize);\n      const position = Math.min(maximum, Math.max(0, vertical ? geometry.top : geometry.left));\n      const thumbPosition = maximum ? (position / maximum) * (trackSize - thumbSize) : 0;\n      const logicalPosition =\n        !vertical && geometry.rtl ? trackSize - thumbSize - thumbPosition : thumbPosition;\n      return (\n        <div\n          key={vertical ? 'vertical' : 'horizontal'}\n          className={classes(\n            'leaf-scrollbar__bar',\n            vertical ? 'leaf-scrollbar__bar--vertical' : 'leaf-scrollbar__bar--horizontal',\n          )}\n          style={\n            vertical\n              ? { top: inset + 4, bottom: horizontalOverflow ? 12 : 4 }\n              : {\n                  right: verticalOverflow && !geometry.rtl ? 12 : 4,\n                  left: verticalOverflow && geometry.rtl ? 12 : 4,\n                }\n          }\n        >\n          <span\n            aria-hidden=\"true\"\n            className=\"leaf-scrollbar__thumb\"\n            style={\n              vertical\n                ? { height: thumbSize, transform: `translateY(${logicalPosition}px)` }\n                : { width: thumbSize, transform: `translateX(${logicalPosition}px)` }\n            }\n          />\n          <div\n            role=\"scrollbar\"\n            tabIndex={maximum ? 0 : -1}\n            className=\"leaf-scrollbar__control\"\n            aria-label={\n              vertical ? t('scrollbar.verticalScrollbar') : t('scrollbar.horizontalScrollbar')\n            }\n            aria-controls={id}\n            aria-orientation={vertical ? 'vertical' : 'horizontal'}\n            aria-valuemin={0}\n            aria-valuemax={maximum}\n            aria-valuenow={position}\n            aria-disabled={!maximum || undefined}\n            onKeyDown={(event) => {\n              if (!maximum) return;\n              const current = viewport.current;\n              const position = current\n                ? vertical\n                  ? current.scrollTop\n                  : Math.abs(current.scrollLeft)\n                : 0;\n              let value: number | undefined;\n              if (event.key === 'Home') value = 0;\n              if (event.key === 'End') value = maximum;\n              if (event.key === 'PageDown') value = position + visibleSize;\n              if (event.key === 'PageUp') value = position - visibleSize;\n              if (event.key === 'ArrowDown') value = position + 40;\n              if (event.key === 'ArrowUp') value = position - 40;\n              if (event.key === 'ArrowRight') value = position + (geometry.rtl ? -40 : 40);\n              if (event.key === 'ArrowLeft') value = position + (geometry.rtl ? 40 : -40);\n              if (value === undefined) return;\n              event.preventDefault();\n              setPosition(vertical, value);\n            }}\n            onPointerDown={(event) => {\n              if (event.button !== 0 || !maximum) return;\n              event.preventDefault();\n              const rect = event.currentTarget.getBoundingClientRect();\n              const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;\n              const onThumb = pointer >= logicalPosition && pointer <= logicalPosition + thumbSize;\n              drag.current = {\n                pointerId: event.pointerId,\n                vertical,\n                offset: onThumb ? pointer - logicalPosition : thumbSize / 2,\n              };\n              event.currentTarget.setPointerCapture?.(event.pointerId);\n              setDragging(true);\n              if (!onThumb) {\n                const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - thumbSize / 2));\n                setPosition(\n                  vertical,\n                  ((!vertical && geometry.rtl ? trackSize - thumbSize - next : next) /\n                    Math.max(1, trackSize - thumbSize)) *\n                    maximum,\n                );\n              }\n            }}\n            onPointerMove={(event) => {\n              const active = drag.current;\n              if (!active || active.pointerId !== event.pointerId || active.vertical !== vertical)\n                return;\n              const rect = event.currentTarget.getBoundingClientRect();\n              const pointer = vertical ? event.clientY - rect.top : event.clientX - rect.left;\n              const next = Math.min(trackSize - thumbSize, Math.max(0, pointer - active.offset));\n              setPosition(\n                vertical,\n                ((!vertical && geometry.rtl ? trackSize - thumbSize - next : next) /\n                  Math.max(1, trackSize - thumbSize)) *\n                  maximum,\n              );\n            }}\n            onPointerUp={() => {\n              drag.current = undefined;\n              setDragging(false);\n            }}\n            onPointerCancel={() => {\n              drag.current = undefined;\n              setDragging(false);\n            }}\n            onLostPointerCapture={() => {\n              drag.current = undefined;\n              setDragging(false);\n            }}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <div\n        {...props}\n        className={classes('leaf-scrollbar', className)}\n        data-scrollbar={scrollbar}\n        data-scrolling={scrolling || undefined}\n        data-dragging={dragging || undefined}\n        style={{ height, maxHeight, ...style }}\n      >\n        <div\n          ref={ref}\n          id={id}\n          tabIndex={tabIndex}\n          {...viewportAccessibility}\n          className={classes('leaf-scrollbar__viewport', viewportClassName)}\n          style={{\n            height: (style?.height ?? height) === undefined ? undefined : '100%',\n            overflowX: orientation === 'vertical' ? 'hidden' : 'auto',\n            overflowY: orientation === 'horizontal' ? 'hidden' : 'auto',\n            ...viewportStyle,\n          }}\n          onScroll={(event) => {\n            schedule();\n            setScrolling(true);\n            clearTimeout(timeout.current);\n            timeout.current = setTimeout(() => setScrolling(false), 700);\n            onScroll?.(event);\n          }}\n        >\n          <div\n            ref={content}\n            className={classes('leaf-scrollbar__content', contentClassName)}\n            style={contentStyle}\n          >\n            {children}\n          </div>\n        </div>\n        {scrollbar !== 'hidden' &&\n          (verticalOverflow || (scrollbar === 'always' && orientation !== 'horizontal')) &&\n          bar(true)}\n        {scrollbar !== 'hidden' &&\n          (horizontalOverflow || (scrollbar === 'always' && orientation !== 'vertical')) &&\n          bar(false)}\n      </div>\n    );\n  },\n);\n\nexport const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>(function Scrollbar(\n  rawProps: ScrollbarProps,\n  ref,\n) {\n  const props = useComponentProps('Scrollbar', rawProps);\n  return <ScrollbarControl {...props} ref={ref} />;\n});\nScrollbar.displayName = 'Scrollbar';\n"],"names":["initialGeometry","ScrollbarControl","forwardRef","height","maxHeight","orientation","scrollbar","viewportClassName","viewportStyle","contentClassName","contentStyle","verticalOffset","className","style","children","tabIndex","onScroll","providedId","role","label","labelledBy","describedBy","props","forwarded","viewport","useRef","content","ref","useMergedRef","generatedId","useId","id","t","useText","geometry","setGeometry","useState","scrolling","setScrolling","dragging","setDragging","frame","undefined","timeout","drag","measure","useCallback","element","next","Math","getComputedStyle","previous","Object","key","schedule","requestAnimationFrame","useEffect","observer","ResizeObserver","mutation","MutationObserver","window","cancelAnimationFrame","clearTimeout","setPosition","vertical","value","maximum","position","horizontalOverflow","verticalOverflow","inset","viewportAccessibility","bar","visibleSize","contentSize","offset","crossOverflow","trackSize","thumbSize","thumbPosition","logicalPosition","classes","event","current","rect","pointer","onThumb","active","setTimeout","Scrollbar","rawProps","useComponentProps"],"mappings":"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"}

package/dist/esm/segmented/index.d.ts

@@ -0,0 +1,3 @@
+export type { SegmentedOption, SegmentedProps } from './segmented.js';
+export { Segmented } from './segmented.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/segmented/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/segmented/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/segmented/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Segmented } from "./segmented.js";

package/dist/esm/segmented/segmented.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface SegmentedOption {
+    value: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    options: readonly (string | SegmentedOption)[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    size?: ControlSize;
+    block?: boolean;
+    name?: string;
+    form?: string;
+}
+export declare const Segmented: import("react").ForwardRefExoticComponent<SegmentedProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=segmented.d.ts.map

package/dist/esm/segmented/segmented.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../../src/segmented/segmented.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAMvF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACtF,OAAO,EAAE,SAAS,CAAC,MAAM,GAAG,eAAe,CAAC,EAAE,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,eAAO,MAAM,SAAS,2GA8GpB,CAAC"}

package/dist/esm/segmented/segmented.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { useFormField } from "../form/form.js";
+import { classes } from "../shared/classes.js";
+import { FormValue, useFieldValue, useMergedRef } from "../shared/field.js";
+import { useMovingIndicator } from "../tabs/use-moving-indicator.js";
+const segmented_Segmented = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { options, value, defaultValue, onChange, disabled: disabledProp, size = 'md', block = false, name, form, className, ...props } = useComponentProps('Segmented', rawProps);
+    const field = useFormField();
+    const { direction } = useLeafConfig();
+    const root = useRef(null);
+    const marker = useRef(null);
+    const merged = useMergedRef(root, ref);
+    const disabled = disabledProp || field?.disabled;
+    const entries = options.map((option)=>'string' == typeof option ? {
+            label: option,
+            value: option
+        } : option);
+    const first = entries.find((option)=>!option.disabled)?.value ?? '';
+    const trigger = useRef(null);
+    const [current, setCurrent] = useFieldValue(value, defaultValue ?? first, trigger, form);
+    useMovingIndicator(root, marker, '[aria-checked="true"]', `${current}-${direction}`);
+    const id = useId();
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: merged,
+        role: "radiogroup",
+        "aria-disabled": disabled || void 0,
+        className: classes('leaf-segmented', `leaf-segmented--${size}`, block && 'leaf-segmented--block', className),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                ref: marker,
+                className: "leaf-segmented__indicator",
+                "aria-hidden": "true"
+            }),
+            entries.map((option, index)=>/*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    ref: 0 === index ? trigger : void 0,
+                    role: "radio",
+                    "data-leaf-indicator-item": "",
+                    "aria-checked": current === option.value,
+                    disabled: disabled || option.disabled,
+                    tabIndex: current !== option.value && (entries.some((entry)=>entry.value === current && !entry.disabled) || option.value !== first) ? -1 : 0,
+                    id: `${id}-${index}`,
+                    onClick: ()=>{
+                        setCurrent(option.value);
+                        onChange?.(option.value);
+                    },
+                    onKeyDown: (event)=>{
+                        const available = entries.filter((entry)=>!entry.disabled);
+                        const position = available.findIndex((entry)=>entry.value === option.value);
+                        const next = 'Home' === event.key ? available[0] : 'End' === event.key ? available.at(-1) : [
+                            'ArrowLeft',
+                            'ArrowUp',
+                            'ArrowRight',
+                            'ArrowDown'
+                        ].includes(event.key) ? available[(position + ('ArrowUp' === event.key || event.key === ('rtl' === direction ? 'ArrowRight' : 'ArrowLeft') ? -1 : 1) + available.length) % available.length] : void 0;
+                        if (!next || disabled) return;
+                        event.preventDefault();
+                        setCurrent(next.value);
+                        onChange?.(next.value);
+                        document.getElementById(`${id}-${entries.findIndex((entry)=>entry.value === next.value)}`)?.focus();
+                    },
+                    children: [
+                        option.icon && /*#__PURE__*/ jsx("span", {
+                            "aria-hidden": "true",
+                            children: option.icon
+                        }),
+                        option.label
+                    ]
+                }, option.value)),
+            name && /*#__PURE__*/ jsx(FormValue, {
+                value: current,
+                name: name,
+                form: form,
+                disabled: disabled,
+                triggerRef: trigger
+            })
+        ]
+    });
+});
+export { segmented_Segmented as Segmented };
+
+//# sourceMappingURL=segmented.js.map

package/dist/esm/segmented/segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented/segmented.js","sources":["../../../src/segmented/segmented.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode, useId, useRef } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue, useMergedRef } from '../shared/field';\nimport type { ControlSize } from '../shared/types';\nimport { useMovingIndicator } from '../tabs/use-moving-indicator';\nexport interface SegmentedOption {\n  value: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  disabled?: boolean;\n}\nexport interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  options: readonly (string | SegmentedOption)[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  size?: ControlSize;\n  block?: boolean;\n  name?: string;\n  form?: string;\n}\nexport const Segmented = forwardRef<HTMLDivElement, SegmentedProps>(function Segmented(\n  rawProps: SegmentedProps,\n  ref,\n) {\n  const {\n    options,\n    value,\n    defaultValue,\n    onChange,\n    disabled: disabledProp,\n    size = 'md',\n    block = false,\n    name,\n    form,\n    className,\n    ...props\n  } = useComponentProps('Segmented', rawProps);\n  const field = useFormField();\n  const { direction } = useLeafConfig();\n  const root = useRef<HTMLDivElement>(null);\n  const marker = useRef<HTMLSpanElement>(null);\n  const merged = useMergedRef(root, ref);\n  const disabled = disabledProp || field?.disabled;\n  const entries = options.map((option) =>\n    typeof option === 'string' ? { label: option, value: option } : option,\n  );\n  const first = entries.find((option) => !option.disabled)?.value ?? '';\n  const trigger = useRef<HTMLButtonElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue ?? first, trigger, form);\n  useMovingIndicator(root, marker, '[aria-checked=\"true\"]', `${current}-${direction}`);\n  const id = useId();\n  return (\n    <div\n      {...props}\n      ref={merged}\n      role=\"radiogroup\"\n      aria-disabled={disabled || undefined}\n      className={classes(\n        'leaf-segmented',\n        `leaf-segmented--${size}`,\n        block && 'leaf-segmented--block',\n        className,\n      )}\n    >\n      <span ref={marker} className=\"leaf-segmented__indicator\" aria-hidden=\"true\" />\n      {entries.map((option, index) => (\n        // biome-ignore lint/a11y/useSemanticElements: Segmented buttons implement roving focus and radio-group selection with a shared form proxy.\n        <button\n          key={option.value}\n          type=\"button\"\n          ref={index === 0 ? trigger : undefined}\n          role=\"radio\"\n          data-leaf-indicator-item=\"\"\n          aria-checked={current === option.value}\n          disabled={disabled || option.disabled}\n          tabIndex={\n            current === option.value ||\n            (!entries.some((entry) => entry.value === current && !entry.disabled) &&\n              option.value === first)\n              ? 0\n              : -1\n          }\n          id={`${id}-${index}`}\n          onClick={() => {\n            setCurrent(option.value);\n            onChange?.(option.value);\n          }}\n          onKeyDown={(event) => {\n            const available = entries.filter((entry) => !entry.disabled);\n            const position = available.findIndex((entry) => entry.value === option.value);\n            const next =\n              event.key === 'Home'\n                ? available[0]\n                : event.key === 'End'\n                  ? available.at(-1)\n                  : ['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(event.key)\n                    ? available[\n                        (position +\n                          (event.key === 'ArrowUp' ||\n                          event.key === (direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft')\n                            ? -1\n                            : 1) +\n                          available.length) %\n                          available.length\n                      ]\n                    : undefined;\n            if (!next || disabled) return;\n            event.preventDefault();\n            setCurrent(next.value);\n            onChange?.(next.value);\n            document\n              .getElementById(`${id}-${entries.findIndex((entry) => entry.value === next.value)}`)\n              ?.focus();\n          }}\n        >\n          {option.icon && <span aria-hidden=\"true\">{option.icon}</span>}\n          {option.label}\n        </button>\n      ))}\n      {name && (\n        <FormValue\n          value={current}\n          name={name}\n          form={form}\n          disabled={disabled}\n          triggerRef={trigger}\n        />\n      )}\n    </div>\n  );\n});\n"],"names":["Segmented","forwardRef","rawProps","ref","options","value","defaultValue","onChange","disabledProp","size","block","name","form","className","props","useComponentProps","field","useFormField","direction","useLeafConfig","root","useRef","marker","merged","useMergedRef","disabled","entries","option","first","trigger","current","setCurrent","useFieldValue","useMovingIndicator","id","useId","undefined","classes","index","entry","event","available","position","next","document","FormValue"],"mappings":"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"}

package/dist/esm/select/index.d.ts

@@ -0,0 +1,3 @@
+export type { SelectOption, SelectOptionGroup, SelectProps } from './select.js';
+export { Select } from './select.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/esm/select/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Select } from "./select.js";

package/dist/esm/select/select.d.ts

@@ -0,0 +1,61 @@
+import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from 'react';
+import { type PopupOptions } from '../shared/floating.js';
+import type { ControlSize, ControlStatus } from '../shared/types.js';
+export interface SelectOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    searchLabel?: string;
+}
+export interface SelectOptionGroup {
+    label: ReactNode;
+    options: readonly SelectOption[];
+}
+interface SelectBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'value' | 'defaultValue' | 'onChange' | 'children' | 'multiple'>, PopupOptions {
+    options: readonly (SelectOption | SelectOptionGroup)[];
+    size?: ControlSize;
+    status?: ControlStatus;
+    allowClear?: boolean;
+    showSearch?: boolean;
+    filterOption?: boolean | ((query: string, option: SelectOption) => boolean);
+    onSearch?: (query: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    inputReadOnly?: boolean;
+    labelRender?: (option: SelectOption) => ReactNode;
+    tagRender?: (option: SelectOption, remove: () => void) => ReactNode;
+    popupRender?: (content: ReactNode) => ReactNode;
+    onPopupScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    popupWidth?: number | string;
+    popupMaxWidth?: number | string;
+    popupClassName?: string;
+    popupStyle?: CSSProperties;
+    loading?: boolean;
+    notFoundContent?: ReactNode;
+    optionRender?: (option: SelectOption) => ReactNode;
+    maxCount?: number;
+    maxTagCount?: number | 'responsive';
+    tagWrap?: boolean;
+    allowCreate?: boolean;
+    onCreate?: (option: SelectOption) => void;
+    virtual?: boolean;
+    listHeight?: number;
+    optionHeight?: number;
+}
+export type SelectProps = SelectBaseProps & ({
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string, option?: SelectOption) => void;
+} | {
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (value: string[], options: SelectOption[]) => void;
+});
+/** Internal rendering primitive; public Select defaults are resolved at its boundary. */
+export declare const SelectControl: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=select.d.ts.map

package/dist/esm/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"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"}