@cladd-ui/react 0.0.1 → 0.0.2

package/components/Searchbar.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../shared/cn';
+import { SearchIcon } from './icons/SearchIcon';
+import { Input } from './Input';
+import { Surface } from './Surface';
+export const Searchbar = (props) => {
+    const { value = '', inset = false, size = 'md', placeholder = 'Search', className = '', onChange = () => { }, ref, ...rest } = props;
+    return (_jsx(Surface, { level: inset ? '+0' : '+1', className: cn('sticky z-20', !inset && 'top-0 ml-px rounded-t-3xl', inset && 'top-2 mx-2 w-auto rounded-full', className), outline: !inset, ref: ref, ...rest, children: _jsxs("div", { className: cn('flex items-center', !inset && 'p-1.5'), children: [_jsx(Input, { className: "w-full", placeholder: placeholder, onChange: (v, e) => onChange(v, e), contentClassName: "pl-6.5", value: value, clearButton: true, rounded: true, onClear: () => onChange('') }), _jsx(SearchIcon, { className: cn('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-on-surface-darker', inset ? 'left-2' : 'left-4') })] }) }));
+};
+//# sourceMappingURL=Searchbar.js.map

package/components/Searchbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Searchbar.js","sourceRoot":"","sources":["../../../src/components/Searchbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAC;AA4BlD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,KAAK,EACb,IAAI,GAAG,IAAI,EACX,WAAW,GAAG,QAAQ,EACtB,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAC1B,SAAS,EAAE,EAAE,CACX,aAAa,EACb,CAAC,KAAK,IAAI,2BAA2B,EACrC,KAAK,IAAI,gCAAgC,EACzC,SAAS,CACV,EACD,OAAO,EAAE,CAAC,KAAK,EACf,GAAG,EAAE,GAAG,KACJ,IAAI,YAER,eAAK,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,CAAC,KAAK,IAAI,OAAO,CAAC,aACxD,KAAC,KAAK,IACJ,SAAS,EAAC,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAS,EAAE,CAAgC,EAAE,EAAE,CACxD,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAEhB,gBAAgB,EAAC,QAAQ,EACzB,KAAK,EAAE,KAAK,EACZ,WAAW,QACX,OAAO,QACP,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,GAC3B,EACF,KAAC,UAAU,IACT,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAC5B,GACD,IACE,GACE,CACX,CAAC;AACJ,CAAC,CAAC"}

package/components/Segmented.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
+import { Color } from '../types';
+import { ButtonSize } from './Button';
+import { SurfaceVariant } from './Surface';
+interface SegmentedOwnProps<C extends ElementType = 'div'> {
+    /** Should be one or more `SegmentedButton` elements. */
+    children?: ReactNode;
+    /** Extra classes for the segmented container. */
+    className?: string;
+    /** Visually dim the entire group and disable pointer events. */
+    disabled?: boolean;
+    /** Pill-style segment buttons. Default `true`. Forwarded via context. */
+    rounded?: boolean;
+    /** Segment button size. Default `'md'`. Forwarded via context. */
+    size?: ButtonSize;
+    /** Polymorphic root element. Defaults to `'div'`. Use `'fieldset'`/`'ul'`/etc. for semantic groupings. */
+    component?: C;
+    /** Accent color applied to **inactive** segment buttons. */
+    color?: Color;
+    /** Forwarded to the polymorphic root element. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * `Surface` variant applied to **inactive** segment buttons through context.
+     * Default `'transparent'` - inactive segments fade into the parent surface.
+     */
+    variant?: SurfaceVariant;
+    /** Outline ring on **inactive** segment buttons. Default `false`. */
+    outline?: boolean;
+    /** Color applied to the **active** segment button. Default: theme accent color. */
+    activeColor?: Color;
+    /** `Surface` variant applied to the **active** segment button. Default `'gradient'`. */
+    activeVariant?: SurfaceVariant;
+    /** Outline ring on the **active** segment button. Default `true`. */
+    activeOutline?: boolean;
+}
+export type SegmentedProps<C extends ElementType = 'div'> = SegmentedOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SegmentedOwnProps<C>>;
+export declare const Segmented: <C extends ElementType = "div">(props: SegmentedProps<C>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Segmented.d.ts.map

package/components/Segmented.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.d.ts","sourceRoot":"","sources":["../../../src/components/Segmented.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EACT,GAAG,EACH,WAAW,EAEX,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3C,UAAU,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACvD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kEAAkE;IAClE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0GAA0G;IAC1G,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACtD,iBAAiB,CAAC,CAAC,CAAC,GAClB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACrD,OAAO,cAAc,CAAC,CAAC,CAAC,4CAyDzB,CAAC"}

package/components/Segmented.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { useAccentColor } from '../hooks/use-accent-color';
+import { cn } from '../shared/cn';
+import { SegmentedContextProvider } from './SegmentedContext';
+export const Segmented = (props) => {
+    const elRef = useRef(null);
+    const accentColor = useAccentColor();
+    const { children, className = '', disabled = false, rounded = true, size = 'md', component = 'div', color = '', ref, variant = 'transparent', outline = false, activeColor = accentColor, activeVariant = 'gradient', activeOutline = true, ...rest } = props;
+    const Component = component;
+    return (_jsx(Component, { className: cn('segmented', disabled && 'pointer-events-none opacity-40', 'flex items-center justify-center', color && `color-${color}`, className), ref: (el) => {
+            elRef.current = el;
+            if (ref)
+                ref.current = el;
+        }, onContextMenuCapture: (e) => e.preventDefault(), ...rest, children: _jsx(SegmentedContextProvider, { value: {
+                size,
+                rounded,
+                color,
+                variant,
+                outline,
+                activeColor,
+                activeVariant,
+                activeOutline,
+            }, children: children }) }));
+};
+//# sourceMappingURL=Segmented.js.map

package/components/Segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.js","sourceRoot":"","sources":["../../../src/components/Segmented.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,GAMP,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAGlC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAuC9D,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAAwB,EACxB,EAAE;IACF,MAAM,KAAK,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IAC/C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,IAAI,EACd,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,KAAyB,EACrC,KAAK,GAAG,EAAE,EACV,GAAG,EACH,OAAO,GAAG,aAAa,EACvB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,WAAW,EACzB,aAAa,GAAG,UAAU,EAC1B,aAAa,GAAG,IAAI,EACpB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,SAA6B,CAAC;IAChD,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,EAAE,CACX,WAAW,EAEX,QAAQ,IAAI,gCAAgC,EAC5C,kCAAkC,EAClC,KAAK,IAAI,SAAS,KAAK,EAAE,EACzB,SAAS,CACV,EACD,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE;YAC9B,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;YACnB,IAAI,GAAG;gBACJ,GAAkD,CAAC,OAAO,GAAG,EAAE,CAAC;QACrE,CAAC,EACD,oBAAoB,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,KACvD,IAAI,YAER,KAAC,wBAAwB,IACvB,KAAK,EAAE;gBACL,IAAI;gBACJ,OAAO;gBACP,KAAK;gBACL,OAAO;gBACP,OAAO;gBACP,WAAW;gBACX,aAAa;gBACb,aAAa;aACd,YAGA,QAAQ,GACgB,GACjB,CACb,CAAC;AACJ,CAAC,CAAC"}

package/components/SegmentedButton.d.ts

@@ -0,0 +1,13 @@
+import { ElementType } from 'react';
+import { ButtonProps } from './Button';
+export type SegmentedButtonProps<C extends ElementType = 'button'> = ButtonProps<C> & {
+    /**
+     * Marks this button as the selected segment. When `true`, switches to the
+     * `activeColor` / `activeVariant` / `activeOutline` from the surrounding `Segmented`,
+     * raises `surfaceLevel` by `+2` for visual elevation, and sets `readOnly` so the
+     * already-selected segment is not pressable again.
+     */
+    active?: boolean;
+};
+export declare const SegmentedButton: <C extends ElementType = "button">(props: SegmentedButtonProps<C>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedButton.d.ts.map

package/components/SegmentedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButton.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAM,MAAM,OAAO,CAAC;AAExC,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAC/D,WAAW,CAAC,CAAC,CAAC,GAAG;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,QAAQ,EAC9D,OAAO,oBAAoB,CAAC,CAAC,CAAC,4CA2B/B,CAAC"}

package/components/SegmentedButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from './Button';
+import { useSegmentedContext } from './SegmentedContext';
+export const SegmentedButton = (props) => {
+    const { size = 'md', rounded = true, color, variant, outline, activeColor, activeVariant, activeOutline, } = useSegmentedContext();
+    const { active, ...rest } = props;
+    const ButtonEl = Button;
+    return (_jsx(ButtonEl, { size: size, rounded: rounded, color: active && activeColor ? activeColor : color, variant: active && activeVariant ? activeVariant : variant, outline: active ? activeOutline : outline, surfaceLevel: active ? '+2' : undefined, readOnly: active, ...rest }));
+};
+//# sourceMappingURL=SegmentedButton.js.map

package/components/SegmentedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedButton.js","sourceRoot":"","sources":["../../../src/components/SegmentedButton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAazD,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAA8B,EAC9B,EAAE;IACF,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAa,EACb,aAAa,GACd,GAAG,mBAAmB,EAAE,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,QAAQ,GAAG,MAAyB,CAAC;IAE3C,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,EAClD,OAAO,EAAE,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAC1D,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EACzC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACvC,QAAQ,EAAE,MAAM,KACZ,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC"}

package/components/SegmentedContext.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { Color } from '../types';
+import { ButtonProps, ButtonSize } from './Button';
+/**
+ * Shape of the data published by `Segmented` to its child `SegmentedButton`s.
+ * Each `SegmentedButton` reads this via `useSegmentedContext()` to pick its inactive vs active
+ * styling - see `SegmentedButton.active`.
+ */
+interface SegmentedContextValue {
+    /** Button size. */
+    size?: ButtonSize;
+    /** Pill-shape the segment buttons. */
+    rounded?: boolean;
+    /** Color applied to **inactive** buttons. */
+    color?: Color;
+    /** Variant applied to **inactive** buttons. */
+    variant?: ButtonProps['variant'];
+    /** Outline ring on **inactive** buttons. */
+    outline?: boolean;
+    /** Color applied to the **active** button. */
+    activeColor?: Color;
+    /** Variant applied to the **active** button. */
+    activeVariant?: ButtonProps['variant'];
+    /** Outline ring on the **active** button. */
+    activeOutline?: boolean;
+}
+interface SegmentedContextProviderProps {
+    /** Style values to publish to descendant `SegmentedButton`s. */
+    value: SegmentedContextValue;
+    children: ReactNode;
+}
+export declare const SegmentedContext: import("react").Context<SegmentedContextValue>;
+export declare function useSegmentedContext(): SegmentedContextValue;
+export declare function SegmentedContextProvider(props: SegmentedContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SegmentedContext.d.ts.map

package/components/SegmentedContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedContext.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;GAIG;AACH,UAAU,qBAAqB;IAC7B,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,gDAAgD;IAChD,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,6BAA6B;IACrC,gEAAgE;IAChE,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,gDAA2C,CAAC;AAEzE,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,2CAM5E"}

package/components/SegmentedContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export const SegmentedContext = createContext({});
+export function useSegmentedContext() {
+    return useContext(SegmentedContext);
+}
+export function SegmentedContextProvider(props) {
+    return (_jsx(SegmentedContext.Provider, { value: props.value, children: props.children }));
+}
+//# sourceMappingURL=SegmentedContext.js.map

package/components/SegmentedContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedContext.js","sourceRoot":"","sources":["../../../src/components/SegmentedContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAmC7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC;AAEzE,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC3E,OAAO,CACL,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACW,CAC7B,CAAC;AACJ,CAAC"}

package/components/Select.d.ts

@@ -0,0 +1,145 @@
+import { ReactNode, Ref, MouseEvent } from 'react';
+import { ButtonSize } from './Button';
+import { PopoverOffset, PopoverPosition } from './Popover';
+interface SelectOptionRenderParams<T> {
+    value: T;
+    index: number;
+    selected: boolean;
+}
+import { Color } from '../types';
+import { ButtonProps } from './Button';
+interface SelectOwnProps<T = string> {
+    /** Selected value (single-select) or array of selected values (when `multiple`). */
+    value?: T | T[];
+    placeholder?: ReactNode;
+    /** Title shown at the top of the popover (above the search bar, if any). */
+    title?: string;
+    /** All available options. Compared against `value` via `getOptionValue` (default: identity). */
+    options?: T[];
+    /** Multi-select mode - uses `Checkbox` instead of `Radio` and emits `T[]` to `onChange`. */
+    multiple?: boolean;
+    /** Visually dim the trigger and prevent the popover from opening. */
+    disabled?: boolean;
+    /** Show the trigger with the current value but block opening the popover. */
+    readOnly?: boolean;
+    /** Accent color for the trigger button. Forwarded to `Button.color`. */
+    color?: Color;
+    /** Pill-style trigger button. Forwarded to `Button.rounded`. */
+    rounded?: boolean;
+    /** Trigger button size. Forwarded to `Button.size`. */
+    size?: ButtonSize;
+    /** Extra classes for the trigger button. */
+    className?: string;
+    /** Extra classes for the trigger button's inner content row. */
+    contentClassName?: string;
+    /** Extra classes for the value display inside the trigger button. */
+    valueClassName?: string;
+    /**
+     * Trigger button surface type, forwarded to the underlying `Button.surface`:
+     * `'surface'` (default) for a regular button, `'cut'` for an inset/recessed look.
+     */
+    surface?: 'surface' | 'cut';
+    /** Reverse the visual order of `icon` ↔ value inside the trigger button. */
+    reverse?: boolean;
+    /** Icon node rendered inside the trigger button. */
+    icon?: ReactNode;
+    /** Show the chevron-down indicator on the right of the trigger. Default `true`. */
+    dropdownIcon?: boolean;
+    /** Forwarded to the trigger `Button` - allows wrapping the value across multiple lines. */
+    multiline?: boolean;
+    placeholderClassName?: string;
+    /**
+     * Custom node rendered inside the trigger button in place of `String(value) || placeholder`.
+     * Use to render a richer value display (e.g. with icons or formatting).
+     */
+    children?: ReactNode;
+    /** Slot rendered inside the popover, **above** the option list (after title/searchbar). */
+    beforeOptions?: ReactNode;
+    /** Slot rendered inside the popover, **below** the option list. */
+    afterOptions?: ReactNode;
+    /** Render a search bar at the top of the popover. Pair with `onSearch` to filter options. */
+    search?: boolean;
+    /** Default `'Search'`. */
+    searchPlaceholder?: string;
+    /** Empty-state text. Default `'Nothing found'`. */
+    searchNotFound?: string;
+    /** Auto-focus the search input when the popover opens (skipped on iOS/Android to avoid keyboard popup). */
+    searchFocus?: boolean;
+    /**
+     * Filter callback invoked with the current query - return the filtered list of options.
+     * The Select does not maintain any internal filter state; callers control matching.
+     */
+    onSearch?: (query: string) => T[];
+    popoverColor?: Color;
+    /** Default `'bottom-end'`. */
+    popoverPosition?: PopoverPosition;
+    /** Default `['-50%', 4]` - half-width inward shift on the cross axis, 4px main-axis gap. */
+    popoverOffset?: PopoverOffset;
+    /** Default `'w-auto min-w-[160px]'`. */
+    popoverClassName?: string;
+    /**
+     * Surface level for the popover. Default depends on theme:
+     * `'+1'` for dark (one level above the trigger), `1` (absolute) for light.
+     */
+    popoverSurfaceLevel?: number | string;
+    /**
+     * External anchor ref. When provided, the trigger button is **not rendered** - useful when
+     * the popover should anchor to an existing element controlled by the caller (the caller
+     * is then responsible for the trigger and `popoverState` wiring).
+     */
+    anchorRef?: React.RefObject<HTMLElement | null>;
+    /** Controlled popover open state. Pair with `onPopoverState`. */
+    popoverState?: boolean;
+    /** Controlled popover open-state setter. */
+    onPopoverState?: (state: boolean) => void;
+    /** Fires after a selection. In single-select mode receives `T`; in `multiple` receives `T[]`. */
+    onChange?: (value: T | T[]) => void;
+    /** Fires when the trigger button is clicked (before the popover state toggles). */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * Show numeric quick-pick hints (0–9) next to options, and bind `0`–`9` keys to select them.
+     * Default `true`. See `noneOptionValue` for how the digits map to options.
+     */
+    keyboardHints?: boolean;
+    /** Default color for the per-option toggle (Radio/Checkbox). Overridden per-option by `optionToggleColor`. */
+    togglesColor?: Color;
+    /** Per-option toggle color. Return `undefined` to fall back to `togglesColor`. */
+    optionToggleColor?: (params: SelectOptionRenderParams<T>) => Color | undefined;
+    /** Custom "is this option selected?" predicate - overrides the built-in equality check. */
+    isChecked?: (value: T) => boolean;
+    isOptionDisabled?: (value: T) => boolean;
+    /**
+     * Extracts the comparable key from an option object. Default: identity.
+     * Use when `T` is an object and selection should compare by `id` rather than reference.
+     */
+    getOptionValue?: (option: T) => unknown;
+    /**
+     * Inverse of `getOptionValue` - given a key, return the matching option from `options`.
+     * Required for multi-select with object options so emitted `value[]` arrays can be rebuilt.
+     */
+    getOptionByValue?: (options: T[], value: unknown) => T;
+    /** Slot rendered above each option (e.g. group header before the first item in a section). */
+    renderBeforeOption?: (value: T, index: number) => ReactNode;
+    /** Slot rendered below each option. */
+    renderAfterOption?: (value: T, index: number) => ReactNode;
+    /** Custom option label renderer. Default: `String(value)`. */
+    renderOption?: (params: SelectOptionRenderParams<T>) => ReactNode;
+    /** Subtext rendered under the option label. */
+    renderOptionInfo?: (params: SelectOptionRenderParams<T>) => ReactNode;
+    /**
+     * Value of the "none/initial" option that should be mapped to the 0 key.
+     *  If set, this option gets hint "0" and remaining options get 1-9 in order.
+     *  If not set, straight ordering: 1, 2, 3, ..., 9, 0 (for 10th).
+     */
+    noneOptionValue?: T;
+    /** Close the popover after a single-select pick. Default `true`. Has no effect when `multiple`. */
+    closeOnSelect?: boolean;
+    /** Scroll the popover so the currently selected option is centered when it opens. */
+    scrollToSelected?: boolean;
+    /** Forwarded to the trigger button. Ignored when `anchorRef` is provided (no trigger is rendered). */
+    ref?: Ref<HTMLElement>;
+}
+export type SelectProps<T = string> = SelectOwnProps<T> & Omit<ButtonProps, keyof SelectOwnProps<T>>;
+export declare function Select<T = string>(props: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/components/Select.d.ts.map

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