@codeleap/web 6.3.0 → 6.8.0

package/dist/components/SectionFilters/types.d.ts

@@ -1,63 +1,86 @@
-import { ButtonComposition, ButtonProps } from '../Button';
-import { StylesOf } from '@codeleap/types';
+import { ButtonProps } from '../Button';
 import { SectionFiltersComposition } from './styles';
-import { StyledProp } from '@codeleap/styles';
+import { ICSS, StyleProp } from '@codeleap/styles';
+export interface SectionFiltersStyleDef {
+}
+/** A selectable option within a `SectionFilters` item; `label` falls back to `value` when omitted. */
 export type ItemOptionProps = {
     label?: string | number;
     value: string | number;
     itemProps?: Omit<ButtonProps, 'debugName'>;
 };
+/** Internal payload passed to the selection handler when an option button is pressed. */
 export type OnPressOptionProps = {
     item: ItemProps;
     option: ItemOptionProps;
     canSelectMultiple: boolean;
     hasMultipleOptions: boolean;
 };
+/** Describes a filter section with its own group of options; items without `options` are treated as single-value toggles. */
 export type ItemProps = {
     id: string | number;
     label?: string | number;
+    /** When `true`, multiple `options` within this item can be active simultaneously. */
     canSelectMultiple?: boolean;
     descriptionLabel?: string;
+    /** When `false`, the `descriptionLabel` / `label` heading above the options is hidden. Defaults to `true`. */
     showDescriptionLabel?: boolean;
     options?: ItemOptionProps[];
+    /** Extra `Button` props applied to all option buttons in this item (overridden by `ItemOptionProps.itemProps`). */
     itemProps?: Omit<ButtonProps, 'debugName'>;
+    /** Extra `Button` props applied to an option button only while that option is selected. */
     selectedItemProps?: Omit<ButtonProps, 'debugName'>;
 };
+/** Payload delivered to the `onSelectItem` callback whenever any option button is pressed. */
 export type onSelectItemProps = {
     id: ItemProps['id'];
     option: ItemOptionProps;
 };
 type ApplyFunction = (items?: ItemProps[]) => void;
 type ClearFunction = () => void;
+/** Props injected into the footer component (default or custom via `renderFooterComponent`). */
 export type SectionFilterFooterProps = {
     onClear: ClearFunction;
     onApply: ApplyFunction;
+    /** `true` when both the draft and committed selections are empty; use to disable Apply / Clear buttons. */
     shouldDisableActions: boolean;
 };
 type Item = Record<string, any> | Array<any>;
+/**
+ * Props for `SectionFilters`.
+ * Selections are managed through an internal two-stage draft/commit model:
+ * changes accumulate in the draft and are only promoted to `selectedItems` when the apply action fires,
+ * unless `filterOnOptionPress` is `true`, in which case each press also commits immediately.
+ */
 export type SectionFiltersProps = {
     data?: ItemProps[];
+    /** Committed (applied) selection state; provide with `setSelectedItems` for controlled usage. */
     selectedItems?: Item;
     setSelectedItems?: (value: Item) => void;
+    /** Draft (pending) selection state; provide with `setDraftItems` for controlled usage. */
     draftItems?: Item;
     setDraftItems?: (value: Item) => void;
+    /** Called immediately after any option is pressed, before the draft is updated. */
     onSelectItem?: (item: onSelectItemProps) => void;
     onClearItems?: ClearFunction;
     onApplyItems?: ApplyFunction;
+    /** Replaces the default Apply / Clear footer; receives `SectionFilterFooterProps`. */
     renderFooterComponent?: (props: SectionFilterFooterProps) => React.ReactElement;
     applyFilterButtonProps?: Omit<ButtonProps, 'debugName'>;
     clearFilterButtonProps?: Omit<ButtonProps, 'debugName'>;
+    /** When `true`, each option press also commits the draft immediately (bypasses the two-stage model). Defaults to `false`. */
     filterOnOptionPress?: boolean;
     applyButtonText?: string;
     clearButtonText?: string;
-    style?: StyledProp<SectionFiltersComposition>;
+    style?: StyleProp<SectionFiltersComposition, keyof SectionFiltersStyleDef>;
 };
 export type OptionProps = {
     option: ItemOptionProps;
     item: ItemProps;
-    styles: StylesOf<ButtonComposition>;
+    styles: ICSS;
     selectedItems: object;
     onPress: () => void;
     canSelectMultiple: boolean;
 };
 export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/SectionFilters/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SectionFilters/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,WAAW,sBAAsB;CAAG;AAE1C,sGAAsG;AACtG,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;CAC3C,CAAA;AAED,yFAAyF;AACzF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,eAAe,CAAA;IACvB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,6HAA6H;AAC7H,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,8GAA8G;IAC9G,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAA;IAC3B,mHAAmH;IACnH,SAAS,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;IAC1C,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;CACnD,CAAA;AAED,8FAA8F;AAC9F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,CAAA;IACnB,MAAM,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,KAAK,aAAa,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;AAClD,KAAK,aAAa,GAAG,MAAM,IAAI,CAAA;AAE/B,gGAAgG;AAChG,MAAM,MAAM,wBAAwB,GAAG;IACrC,OAAO,EAAE,aAAa,CAAA;IACtB,OAAO,EAAE,aAAa,CAAA;IACtB,2GAA2G;IAC3G,oBAAoB,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED,KAAK,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;AAE5C;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAA;IAClB,iGAAiG;IACjG,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACxC,0FAA0F;IAC1F,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACrC,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAChD,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B,sFAAsF;IACtF,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,YAAY,CAAA;IAC/E,sBAAsB,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;IACvD,sBAAsB,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAA;IACvD,6HAA6H;IAC7H,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,yBAAyB,EAAE,MAAM,sBAAsB,CAAC,CAAA;CAC3E,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,eAAe,CAAA;IACvB,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,IAAI,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,EAAE,OAAO,CAAA;CAC3B,CAAA"}

package/dist/components/Select/context.d.ts

@@ -0,0 +1,61 @@
+import { type RefObject } from 'react';
+import { type Selection } from 'react-aria-components';
+import { type ListFocusHandle, type ListFocusStrategy } from '../../lib/hooks/useListFocus';
+import { type SelectComposition } from './styles';
+import { type SelectProps, type SelectFieldContext } from './types';
+/** Shape of the value carried by `SelectContext`; consumed by `SelectTrigger`, `SelectPopover`, and `SelectList`. */
+export type SelectContextValue = {
+    isOpen: boolean;
+    isFocused: boolean;
+    hasValue: boolean;
+    displayLabel: string;
+    selectedKeys: Set<string>;
+    fieldContext: SelectFieldContext;
+    stateAttrs: Record<string, string>;
+    triggerRef: RefObject<HTMLElement | null>;
+    popoverRef: RefObject<HTMLElement | null>;
+    listBoxDOMRef: RefObject<HTMLDivElement | null>;
+    listAutoFocusRef: RefObject<boolean | undefined>;
+    triggerWidthStyle: React.CSSProperties;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleOpenChange: (open: boolean) => void;
+    handleSelectionChange: (keys: Selection) => void;
+    focusList: (strategy?: ListFocusStrategy) => void;
+    openDropdown: (focus?: boolean) => void;
+    closeDropdown: () => void;
+    styles: Record<SelectComposition, any>;
+    fieldId: string;
+    labelId: string;
+    helperId: string;
+    helperContent: React.ReactNode;
+    options: any[];
+    value: any;
+    multiple: boolean;
+    disabled: boolean;
+    placement: SelectProps['placement'];
+    debugName?: string;
+    listRef?: RefObject<ListFocusHandle | null>;
+};
+/** React context that shares `SelectContextValue` across all sub-components of a `Select`. */
+export declare const SelectContext: import("react").Context<SelectContextValue | null>;
+/**
+ * Reads the nearest `SelectContext` value.
+ * Must be called inside a `SelectProvider` tree; throws if the context is absent.
+ */
+export declare const useSelectContext: () => SelectContextValue;
+/**
+ * Derives the full `SelectContextValue` from `SelectProps`, encapsulating open/focus state, validation,
+ * key-based selection, display-label construction, and trigger-width measurement.
+ * Intended for use inside `SelectProvider`; consume the result via `useSelectContext` in sub-components.
+ */
+export declare function useSelectProvider(props: SelectProps<any, any>): SelectContextValue;
+type SelectProviderProps = React.PropsWithChildren<SelectProps<any, any>>;
+/**
+ * Wires up `Field.Provider` and `SelectContext.Provider` so that all `Select` sub-components
+ * receive both field layout state and select-specific state.
+ * Must wrap `SelectTrigger`, `SelectPopover`, and `SelectList` when composing a custom select UI.
+ */
+export declare const SelectProvider: ({ children, ...props }: SelectProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/components/Select/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/Select/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAI5H,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAgB,KAAK,eAAe,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAOzG,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACjD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAYnE,qHAAqH;AACrH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,YAAY,EAAE,kBAAkB,CAAA;IAChC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAElC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACzC,aAAa,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/C,gBAAgB,EAAE,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAChD,iBAAiB,EAAE,KAAK,CAAC,aAAa,CAAA;IAEtC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,gBAAgB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACzC,qBAAqB,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IAChD,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACjD,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,aAAa,EAAE,MAAM,IAAI,CAAA;IAEzB,MAAM,EAAE,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAA;IAEtC,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B,OAAO,EAAE,GAAG,EAAE,CAAA;IACd,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;CAC5C,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,aAAa,oDAAiD,CAAA;AAE3E;;;GAGG;AACH,eAAO,MAAM,gBAAgB,QAAO,kBAInC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAwJlF;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAA;AAEzE;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,qDAiBzE,CAAA"}

package/dist/components/Select/elements.d.ts

@@ -0,0 +1,26 @@
+import { type SelectListProps } from './types';
+/**
+ * Clickable trigger button that opens or closes the `SelectPopover`.
+ * Reads all state from `SelectContext`; must be rendered inside a `SelectProvider`.
+ * Uses: `Field.Box`, `Field.SectionSlot`, `Text`, `Touchable`
+ */
+export declare const SelectTrigger: () => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Non-modal `react-aria-components` `Popover` anchored to `SelectTrigger` and sized to match its width.
+ * Must be rendered inside a `SelectProvider`; wrap `SelectList` or custom list content as children.
+ */
+export declare const SelectPopover: ({ children }: React.PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * Accessible list box that renders the selectable options, with support for single and multi-select modes.
+ * Accepts optional `renderItem` and `renderEmpty` overrides; falls back to default `Text`-based rendering.
+ * Must be rendered inside a `SelectProvider`.
+ * Uses: `Text`, `View`
+ */
+export declare const SelectList: <T extends {
+    label: string;
+    value: any;
+} = {
+    label: string;
+    value: any;
+}>({ renderItem, renderEmpty, }: SelectListProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=elements.d.ts.map

package/dist/components/Select/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../src/components/Select/elements.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAwB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAA;AAEpE;;;;GAIG;AACH,eAAO,MAAM,aAAa,wDA6BzB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,cAAc,KAAK,CAAC,iBAAiB,qDAiBlE,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,EAAE,8BAGjG,eAAe,CAAC,CAAC,CAAC,qDAyCpB,CAAA"}

package/dist/components/Select/index.d.ts

@@ -1,5 +1,73 @@
-import { SelectProps } from './types';
-import { StyledComponentWithProps } from '@codeleap/styles';
+import React from 'react';
+import { type SelectProps, type SelectListProps, type SelectProviderProps } from './types';
 export * from './styles';
 export * from './types';
-export declare const Select: StyledComponentWithProps<SelectProps>;
+export * from './context';
+export * from './elements';
+/**
+ * Accessible dropdown select field supporting both single and multi-select modes, field layout, and validation.
+ * Controlled via `value` / `onValueChange`; pass `multiple` to switch to array-based selection.
+ * Exposes sub-components as static properties (`Select.Trigger`, `Select.Popover`, `Select.List`, `Select.Provider`)
+ * and a typed factory `Select.of<T, Multi>()` for composing custom select UIs without casting.
+ * Uses: `SelectProvider`, `SelectTrigger`, `SelectPopover`, `SelectList`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`
+ */
+export declare function Select<T extends {
+    label: string;
+    value: any;
+} = {
+    label: string;
+    value: any;
+}, Multi extends boolean = false>(props: SelectProps<T, Multi>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Select {
+    var displayName: string;
+    var styleRegistryName: string;
+    var elements: string[];
+    var rootElement: string;
+    var defaultProps: Partial<SelectProps<any, any>>;
+    var Provider: ({ children, ...props }: import("../Field").FieldExternalProps & {
+        debugName?: string;
+        style?: import("@codeleap/styles").StyleProp<import("./styles").SelectComposition, keyof import("./types").SelectStyleDef>;
+        options?: any[] | undefined;
+        value?: any;
+        onValueChange?: ((value: any) => void) | undefined;
+        multiple?: any;
+        limit?: number;
+        placeholder?: string;
+        disabled?: boolean;
+        focused?: boolean;
+        error?: string;
+        validate?: import("@codeleap/form").Validator<any, any, any> | undefined;
+        ref?: React.RefObject<{
+            focus: () => void;
+        }>;
+        onBlur?: () => void;
+        onFocus?: () => void;
+        placement?: import("react-aria-components").PopoverProps["placement"];
+        listRef?: React.RefObject<import("../..").ListFocusHandle | null>;
+        onOpenChange?: (isOpen: boolean) => void;
+        separatorMultiValue?: string;
+        closeOnSelect?: boolean;
+    } & SelectListProps<any> & {
+        children?: React.ReactNode | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    var Trigger: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    var Popover: ({ children }: React.PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;
+    var List: <T extends {
+        label: string;
+        value: any;
+    } = {
+        label: string;
+        value: any;
+    }>({ renderItem, renderEmpty, }: SelectListProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    var useContext: () => import("./context").SelectContextValue;
+    var of: <T extends {
+        label: string;
+        value: any;
+    }, Multi extends boolean = false>() => {
+        Provider: React.ComponentType<React.PropsWithChildren<SelectProviderProps<T, Multi>>>;
+        List: React.ComponentType<SelectListProps<T>>;
+        Trigger: () => import("@emotion/react/jsx-runtime").JSX.Element;
+        Popover: ({ children }: React.PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;
+    };
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAI1F,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAsB1B;;;;;;GAMG;AACH,wBAAgB,MAAM,CACpB,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,EACvE,KAAK,SAAS,OAAO,GAAG,KAAK,EAC7B,KAAK,EAAE,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC,oDAU7B;yBAbe,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAoCpB,CAAC,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE,EACvC,KAAK,SAAS,OAAO;kBAEO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;cACnF,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC"}

package/dist/components/Select/styles.d.ts

@@ -1,51 +1,4 @@
-import { ICSS } from '@codeleap/styles';
-import { GroupBase, StylesConfig } from 'react-select';
-import { ButtonParts as _ButtonParts } from '../Button';
-import { InputBaseParts } from '../InputBase';
-import { SelectProps, UseSelectStylesProps } from './types';
-import { Option } from '@codeleap/types';
-type ButtonParts = _ButtonParts;
-export type ItemParts = `item${Capitalize<ButtonParts>}`;
-export type SelectParts = InputBaseParts | ItemParts | 'listPortal' | 'listHeader' | 'listWrapper' | 'list' | 'inputContainer' | 'input' | 'placeholder' | 'value' | 'valueMultiple' | 'valueWrapper' | 'clearIcon' | 'dropdownIcon';
-type ItemState = 'focused' | 'selected' | 'selectedFocused';
-export type SelectStatefulParts = `${ItemParts}:${ItemState}` | 'listPlaceholder' | 'listPlaceholderIcon' | 'listPlaceholderText' | 'listPlaceholderNoItems' | 'listPlaceholderNoItemsIcon' | 'listPlaceholderNoItemsText' | 'itemsWrapper' | 'loadingIndicator' | 'innerWrapper:searchable';
-export type SelectState = 'error' | 'focus' | 'disabled';
-export type SelectComposition = SelectParts | `${SelectParts}:${SelectState}` | SelectStatefulParts;
-export type ComponentState = {
-    error?: boolean;
-    focused?: boolean;
-    disabled?: boolean;
-    parentWidth?: number;
-};
-export type OptionState = {
-    isSelected: boolean;
-    isFocused: boolean;
-    baseStyles: SelectProps['itemProps']['style'];
-};
-export declare function useSelectStyles<T, Multi extends boolean>(props: UseSelectStylesProps, state: ComponentState): {
-    styles: Record<SelectComposition, ICSS>;
-    reactSelectStyles: StylesConfig<Option<T>, Multi, GroupBase<Option<T>>>;
-    optionsStyles: (state: OptionState) => Record<ButtonParts, ICSS>;
-    placeholderStyles: {
-        empty: {
-            wrapper: any;
-            icon: any;
-            text: any;
-        };
-        noItems: {
-            wrapper: any;
-            icon: any;
-            text: any;
-        };
-    };
-    loadingStyles: {
-        wrapper: any;
-    };
-    inputMultiValueStyles: {
-        text: any;
-    };
-    menuWrapperStyles: {
-        wrapper: any;
-    };
-};
-export {};
+import { FieldParts } from '../Field';
+export type SelectParts = FieldParts | 'trigger' | 'value' | 'placeholder' | 'popover' | 'list' | 'listItem' | 'listItemText' | 'emptyState';
+export type SelectComposition = SelectParts;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Select/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,MAAM,MAAM,WAAW,GACrB,UAAU,GACV,SAAS,GAAG,OAAO,GAAG,aAAa,GACnC,SAAS,GAAG,MAAM,GAClB,UAAU,GAAG,cAAc,GAC3B,YAAY,CAAA;AAEd,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAA"}

package/dist/components/Select/types.d.ts

@@ -1,106 +1,84 @@
-import { MutableRefObject } from 'react';
-import { GroupBase, NoticeProps, OptionProps, Props } from 'react-select';
-import { AsyncProps } from 'react-select/async';
-import { ComponentCommonProps } from '../../types';
-import { ButtonProps } from '../Button';
-import { InputBaseProps } from '../InputBase';
-import { SelectComposition, OptionState } from './styles';
-import { ICSS, StyledProp } from '@codeleap/styles';
-import { Label, Option, Options } from '@codeleap/types';
+import React, { RefObject } from 'react';
+import { type ListFocusHandle, type ListFocusStrategy } from '../../lib/hooks/useListFocus';
+import { FieldExternalProps } from '../Field';
+import { FieldStateContext } from '../Field/styles';
+import { ICSS, StyleProp } from '@codeleap/styles';
 import { Validator } from '@codeleap/form';
-type SelectValue<T, Multi extends boolean> = Multi extends true ? T[] : T;
-type OmitWithValues<T> = Omit<T, 'options' | 'value' | 'isMulti' | 'loadOptions' | 'styles'>;
-type DynamicSelectProps<T, Multi extends boolean> = ({
-    loadOptions?: (search: string) => Promise<Options<T>>;
-    defaultValues?: Options<T>;
-} & OmitWithValues<AsyncProps<Option<T>, Multi, GroupBase<Option<T>>>>) | ({
-    loadOptions?: never;
-} & OmitWithValues<Props<Option<T>, Multi, GroupBase<Option<T>>>>);
-export type ReactSelectProps<T, Multi extends boolean = false> = Omit<InputBaseProps, 'style'> & {
-    options: Options<T> & {
-        itemProps?: ButtonProps;
-    };
-    value: SelectValue<T, Multi>;
-    onValueChange?: (value: SelectValue<T, Multi>) => void;
-    multiple?: Multi;
-    validate?: Validator<SelectValue<T, Multi>, any, any>;
-} & DynamicSelectProps<T, Multi>;
-export type ComponentPartProps = {
-    focused: boolean;
-    error: boolean;
-    disabled: boolean;
-    styles: Record<SelectComposition, React.CSSProperties>;
+import { type PopoverProps } from 'react-aria-components';
+import { SelectComposition } from './styles';
+export interface SelectStyleDef {
+    __internal: Record<SelectComposition, ICSS>;
+}
+/** Extends `FieldStateContext` with the multi-select flag so styles can react to selection mode. */
+export interface SelectFieldContext extends FieldStateContext {
+    multiple?: boolean;
+}
+/** Visual state passed to the `renderItem` callback so custom item renderers can reflect selection and keyboard focus. */
+export type ItemRenderState = {
+    isSelected: boolean;
+    isFocused: boolean;
 };
-export type TCustomOption = OptionProps & ComponentPartProps & ComponentCommonProps & {
-    optionsStyles: (state: OptionState) => OptionState['baseStyles'];
-    selectedIcon?: string;
-    data: OptionProps['data'] & {
-        itemProps?: ButtonProps;
-    };
-    itemProps?: ButtonProps;
-    styles?: OptionState['baseStyles'];
+/** Custom render overrides for `SelectList`; omit either to use the default `Text`-based rendering. */
+export type SelectListProps<T extends {
+    label: string;
+    value: any;
+} = {
+    label: string;
+    value: any;
+}> = {
+    renderItem?: (item: T, state: ItemRenderState, focusList: (strategy?: ListFocusStrategy) => void) => React.ReactNode;
+    renderEmpty?: (props: {
+        style: ICSS;
+        focusList: (strategy?: ListFocusStrategy) => void;
+    }) => React.ReactNode;
 };
-type SelectPlaceholderElement = string | ((props: PlaceholderProps) => React.ReactElement) | React.ReactElement;
-export type PlaceholderProps = NoticeProps & ComponentPartProps & {
-    text: SelectPlaceholderElement;
-    defaultStyles: {
-        wrapper: ICSS;
-        text: ICSS;
-        icon: ICSS;
-    };
-    icon: SelectPlaceholderElement;
-    image: HTMLImageElement['src'];
-} & ComponentCommonProps;
-export type LoadingIndicatorProps = NoticeProps & {
-    defaultStyles: {
-        wrapper: ICSS;
-    };
-    size?: number;
-} & ComponentCommonProps;
-export type SelectProps<T = any, Multi extends boolean = false> = React.PropsWithChildren<{
-    debugName: string;
-    clearable?: boolean;
-    closeOnSelect?: boolean;
+/**
+ * Props for `Select` and `SelectProvider`; the `Multi` type parameter switches `value` and `onValueChange` between a
+ * scalar and an array.
+ * @template T — option shape; must include `label: string` and `value: any`
+ * @template Multi — set to `true` to enable multi-select mode; defaults to `false`
+ */
+export type SelectProps<T extends {
+    label: string;
+    value: any;
+} = {
+    label: string;
+    value: any;
+}, Multi extends boolean = false> = FieldExternalProps & {
+    debugName?: string;
+    style?: StyleProp<SelectComposition, keyof SelectStyleDef>;
+    options?: T[];
+    value?: Multi extends true ? T['value'][] : T['value'];
+    onValueChange?: (value: Multi extends true ? T['value'][] : T['value']) => void;
+    multiple?: Multi;
+    /** Maximum number of simultaneously selected values; additional selections are silently ignored when the limit is reached. */
+    limit?: number;
+    placeholder?: string;
+    disabled?: boolean;
     focused?: boolean;
-    _error?: string;
-    renderItem?: (props: TCustomOption) => React.ReactElement;
-    FooterComponent?: () => React.ReactElement;
-    PlaceholderComponent?: (props: PlaceholderProps) => React.ReactElement;
-    PlaceholderNoItemsComponent?: (props: PlaceholderProps) => React.ReactElement;
-    LoadingIndicatorComponent?: (props: LoadingIndicatorProps) => React.ReactElement;
-    noItemsText?: SelectPlaceholderElement;
-    noItemsIcon?: SelectPlaceholderElement;
-    noItemsImage?: PlaceholderProps['image'];
-    placeholderText?: SelectPlaceholderElement;
-    placeholderIcon?: SelectPlaceholderElement;
-    placeholderImage?: PlaceholderProps['image'];
-    showDropdownIcon?: boolean;
-    formatPlaceholderNoItems?: (props: PlaceholderProps & {
-        text: string;
-    }) => string;
-    selectedIcon?: string;
-    onLoadOptionsError?: (error: any) => void;
-    loadOptionsOnMount?: boolean;
-    searchable?: boolean;
+    error?: string;
+    validate?: Validator<Multi extends true ? T['value'][] : T['value'], any, any>;
+    /** Imperative handle; calling `.focus()` moves browser focus to `SelectTrigger`. */
+    ref?: RefObject<{
+        focus: () => void;
+    }>;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    /** Placement of the popover relative to the trigger; forwarded to `react-aria-components` `Popover`. Defaults to `'bottom start'`. */
+    placement?: PopoverProps['placement'];
+    /** External ref to the list's focus handle; useful for programmatic keyboard navigation from outside the component. */
+    listRef?: RefObject<ListFocusHandle | null>;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** String used to join selected labels in the trigger display when `multiple` is true. Defaults to `', '`. */
     separatorMultiValue?: string;
-    filterItems?: Props['filterOption'];
-    itemProps?: ButtonProps;
-    loadingIndicatorSize?: number;
-    limit?: number;
-    loadInitialValue?: boolean;
-    loadingMessage?: string;
-    selectedOption?: {
-        label: Label;
-        value: T;
-    } | SelectValue<T, Multi>;
-    selectRef?: MutableRefObject<any>;
-    setSelectedOption?: (value: {
-        label: Label;
-        value: T;
-    } | SelectValue<T, Multi>) => void;
-    style?: StyledProp<SelectComposition>;
-} & Omit<ReactSelectProps<T, Multi>, 'isSearchable' | 'isClearable' | 'isDisabled' | 'loadingMessage' | 'filterOption' | 'isLoading' | 'menuPortalTarget' | 'closeMenuOnSelect' | 'isMulti'>>;
-export type UseSelectStylesProps = SelectProps & {
-    styleRegistryName: string;
-};
-export {};
+    /** When `true`, the popover closes immediately after any single selection (only relevant in multi-select mode, where the default is to stay open). */
+    closeOnSelect?: boolean;
+} & SelectListProps<T>;
+export type SelectProviderProps<T extends {
+    label: string;
+    value: any;
+} = {
+    label: string;
+    value: any;
+}, Multi extends boolean = false> = SelectProps<T, Multi>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Select/types.d.ts.map

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

package/dist/components/Select/useTriggerWidth.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from 'react';
+/**
+ * Measures the width of the element at `ref` and returns a CSS-properties object containing
+ * `--trigger-width` so that `SelectPopover` can match the trigger's width.
+ * Uses a `ResizeObserver` to keep the value up-to-date on layout changes.
+ */
+export declare function useTriggerWidth(ref: RefObject<Element | null>): React.CSSProperties;
+//# sourceMappingURL=useTriggerWidth.d.ts.map

package/dist/components/Select/useTriggerWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTriggerWidth.d.ts","sourceRoot":"","sources":["../../../src/components/Select/useTriggerWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKzF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,aAAa,CAkBnF"}

package/dist/components/Slider/index.d.ts

@@ -1,12 +1,16 @@
 import { SliderProps } from './types';
-import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles';
 export * from './styles';
 export * from './types';
+/**
+ * Radix UI-backed range slider with `Field` layout, optional track marks, and a computed value indicator in the helper slot.
+ * Supports both single-thumb and multi-thumb (range) modes determined by whether `value` is a scalar or array.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`, `View`, `Text`
+ */
 export declare const Slider: {
     (props: SliderProps): import("@emotion/react/jsx-runtime").JSX.Element;
     styleRegistryName: string;
     elements: string[];
     rootElement: string;
-    withVariantTypes<S extends AnyRecord>(styles: S): (props: StyledComponentProps<SliderProps, typeof styles>) => IJSX;
     defaultProps: Partial<SliderProps>;
 };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAA;AASrD,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAcvB;;;;GAIG;AACH,eAAO,MAAM,MAAM;YAAW,WAAW;;;;;CAoMxC,CAAA"}

package/dist/components/Slider/styles.d.ts

@@ -1,5 +1,5 @@
-import { IconLessInputBaseParts, InputBaseParts, InputBaseStates } from '../InputBase';
-type SliderParts = InputBaseParts | 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts;
-type SliderStates = Exclude<InputBaseStates, 'focus'>;
-export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts;
+import { FieldParts } from '../Field';
+type SliderParts = FieldParts | 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'trackMarkWrapper' | 'sliderContainer';
+export type SliderComposition = SliderParts;
 export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Slider/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAErC,KAAK,WAAW,GACf,UAAU,GACV,OAAO,GACP,OAAO,GACP,eAAe,GACf,iBAAiB,GACjB,WAAW,GACX,kBAAkB,GAClB,iBAAiB,CAAA;AAElB,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAA"}