@financedistrict/apps-ui 0.1.0

package/dist/filter.d.cts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { S as SelectOption } from './SelectTrigger-By0iPBI3.cjs';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface FilterProps extends Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "onChange"> {
+    /** The options to choose from (array-of-data API, shared with the select family). */
+    options: SelectOption[];
+    /** Controlled selection. `string` in single mode, `string[]` in multi. */
+    value?: string | string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: string | string[];
+    /** Fires with the next selection — `string` (single) or `string[]` (multi). */
+    onValueChange?: (value: string | string[]) => void;
+    /** Single (default) vs multi select. */
+    multiple?: boolean;
+    /**
+     * The filter's name. In single-select it is the trigger text ONLY when nothing
+     * is chosen (a pick replaces it with the option's label). In multi-select it
+     * is ALWAYS the trigger text, with a count badge alongside it.
+     */
+    label: string;
+    /** Disabled — the trigger won't open. */
+    disabled?: boolean;
+}
+/**
+ * Filter — a filter-chip dropdown (Figma `base-filter`, node 5026:36907). NOT a
+ * form field: a pill trigger that opens the shared select listbox, exactly as
+ * `InlineSelect` reuses that listbox behind an inline trigger. Single or multi
+ * in one component; the dropdown carries a Reset footer.
+ *
+ * Behaviour is shared with `Select` / `InlineSelect` via `useSelectListbox`
+ * (selection state, keyboard model, type-ahead, activedescendant, reposition,
+ * outside-click) with two Filter-specific choices:
+ * - `closeOnSelect: false` — a single-select pick does NOT close the dropdown
+ *   (it stays open like multi), so several picks / a Reset are possible without
+ *   reopening. A single pick still REPLACES the prior selection.
+ * - the dropdown's `footer` slot renders a **Reset** ghost button, disabled when
+ *   nothing is selected, that clears the selection (via the hook's `reset()`)
+ *   and keeps the dropdown open.
+ *
+ * Trigger content differs from `Select`:
+ * - **single**: the selected option's label (or `label` when empty); no badge.
+ * - **multi**: always the static `label`, plus a count badge when ≥1 selected.
+ *
+ * Uncontrolled by default (`defaultValue`) with a controlled escape hatch
+ * (`value` + `onValueChange`). `ref` is a normal React 19 prop, forwarded to the
+ * trigger button.
+ */
+declare function Filter({ options, value: valueProp, defaultValue, onValueChange, multiple, label, disabled, id: idProp, className, ref, ...props }: FilterProps): React.JSX.Element;
+
+interface FilterTriggerProps extends Omit<React.ComponentProps<"button">, "value"> {
+    /**
+     * The text shown in the pill. In single-select this is the selected option's
+     * label (or the filter `label` when nothing is chosen); in multi-select it is
+     * ALWAYS the static filter `label` (the count badge carries the selection).
+     */
+    displayText: string;
+    /**
+     * The number of selected options. Renders the count badge when ≥1 (multi
+     * only — single-select passes `0` so no badge shows). No badge at `0`.
+     */
+    count?: number;
+    /** Whether the listbox is open (up caret + foreground caret colour). */
+    open?: boolean;
+    /** id of the pill `<button>`. */
+    id: string;
+}
+/**
+ * The Filter trigger — a `<button type="button">` styled as a filter chip
+ * (Figma `base-filter`, node 5026:36907): a `h-10` / `rounded-sm` / `px-3` pill
+ * with the label, an optional count badge (multi), and a trailing caret that
+ * points down when closed / up when open.
+ *
+ * The caret is muted (`card-primary-foreground-muted`) at rest and strengthens
+ * to the full foreground on hover and while open (matching the Figma hover /
+ * focused&active / active states). Focus is the ADR-0010/0014 system ring (a
+ * chip is a button-shaped control, not a text field).
+ *
+ * Presentational leaf: all open/selection/keyboard orchestration and the ARIA
+ * popup wiring (`aria-haspopup`/`-expanded`/`-controls`/`-activedescendant`)
+ * live in `Filter`, which spreads them through `...props`. `ref` is a normal
+ * React 19 prop, forwarded to the button.
+ */
+declare function FilterTrigger({ displayText, count, open, disabled, id, className, ref, ...props }: FilterTriggerProps): React.JSX.Element;
+
+/**
+ * Filter styling — the filter-chip trigger (Figma `base-filter`, node
+ * 5026:36907) and its count badge. Binds ONLY to the semantic `--color-*` token
+ * layer (never primitives, never arbitrary values); theme switching is automatic
+ * via the `.dark` class, so no `dark:` variants are needed.
+ *
+ * The Filter reuses the shared `SelectListbox` for its dropdown (rows + footer)
+ * — this file owns only the pill trigger + the count badge, both unique to the
+ * Filter's visual (the listbox card + option rows are the select family's).
+ */
+/**
+ * The pill trigger (Figma `base-filter` node 5026:36907). A `<button>` shaped
+ * as a chip: `h-10` / `rounded-sm` / `px-3`, a `gap-1.5` row of the label, an
+ * optional count badge, and a trailing caret. Surface + border are the
+ * `card/neutral/primary` family (strip `neutral` → `card-primary-*`), the label
+ * is `body-03` in `card-primary-foreground`.
+ *
+ * FOCUS is the ADR-0010/0014 system ring (this is a button-shaped control, not
+ * a text field): `rounded-sm outline-none` at rest, then a 2px `--focus` ring
+ * with a 2px offset on `:focus-visible` only, suppressed when disabled. Per the
+ * TW4 gotcha (ADR-0014), `outline-solid` MUST accompany `outline-2` or the ring
+ * paints at style `none` (invisible). The caret + label colours are applied by
+ * `FilterTrigger` (they depend on open/hover runtime state), so this file owns
+ * the shared layout + surface + focus + disabled shell.
+ */
+declare const filterTriggerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type FilterTriggerVariantsProps = VariantProps<typeof filterTriggerVariants>;
+/**
+ * The count badge shown in the multi-select trigger when ≥1 option is selected
+ * (Figma `CountBadge` node 5026:5358). A small brand pill: `brand-primary`
+ * background, `rounded-xs`, `min-w-5 h-5` (20px), centred `text-xs` medium in
+ * the brand foreground, `px-0.5` (2px) so a two-digit count still fits inside
+ * the 20px min-width. Implemented as a local piece (not a shared `Badge`) per
+ * ADR-0016 — a shared badge is deferred until a second, non-token-input
+ * consumer justifies the abstraction; the Figma `CountBadge` is a distinct
+ * component from `DiscardBadge`, so it does not qualify as that second consumer.
+ */
+declare const filterCountBadgeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type FilterCountBadgeVariantsProps = VariantProps<typeof filterCountBadgeVariants>;
+
+export { Filter, type FilterCountBadgeVariantsProps, type FilterProps, FilterTrigger, type FilterTriggerProps, type FilterTriggerVariantsProps, SelectOption, filterCountBadgeVariants, filterTriggerVariants };

package/dist/filter.d.ts

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { S as SelectOption } from './SelectTrigger-By0iPBI3.js';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+interface FilterProps extends Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "onChange"> {
+    /** The options to choose from (array-of-data API, shared with the select family). */
+    options: SelectOption[];
+    /** Controlled selection. `string` in single mode, `string[]` in multi. */
+    value?: string | string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: string | string[];
+    /** Fires with the next selection — `string` (single) or `string[]` (multi). */
+    onValueChange?: (value: string | string[]) => void;
+    /** Single (default) vs multi select. */
+    multiple?: boolean;
+    /**
+     * The filter's name. In single-select it is the trigger text ONLY when nothing
+     * is chosen (a pick replaces it with the option's label). In multi-select it
+     * is ALWAYS the trigger text, with a count badge alongside it.
+     */
+    label: string;
+    /** Disabled — the trigger won't open. */
+    disabled?: boolean;
+}
+/**
+ * Filter — a filter-chip dropdown (Figma `base-filter`, node 5026:36907). NOT a
+ * form field: a pill trigger that opens the shared select listbox, exactly as
+ * `InlineSelect` reuses that listbox behind an inline trigger. Single or multi
+ * in one component; the dropdown carries a Reset footer.
+ *
+ * Behaviour is shared with `Select` / `InlineSelect` via `useSelectListbox`
+ * (selection state, keyboard model, type-ahead, activedescendant, reposition,
+ * outside-click) with two Filter-specific choices:
+ * - `closeOnSelect: false` — a single-select pick does NOT close the dropdown
+ *   (it stays open like multi), so several picks / a Reset are possible without
+ *   reopening. A single pick still REPLACES the prior selection.
+ * - the dropdown's `footer` slot renders a **Reset** ghost button, disabled when
+ *   nothing is selected, that clears the selection (via the hook's `reset()`)
+ *   and keeps the dropdown open.
+ *
+ * Trigger content differs from `Select`:
+ * - **single**: the selected option's label (or `label` when empty); no badge.
+ * - **multi**: always the static `label`, plus a count badge when ≥1 selected.
+ *
+ * Uncontrolled by default (`defaultValue`) with a controlled escape hatch
+ * (`value` + `onValueChange`). `ref` is a normal React 19 prop, forwarded to the
+ * trigger button.
+ */
+declare function Filter({ options, value: valueProp, defaultValue, onValueChange, multiple, label, disabled, id: idProp, className, ref, ...props }: FilterProps): React.JSX.Element;
+
+interface FilterTriggerProps extends Omit<React.ComponentProps<"button">, "value"> {
+    /**
+     * The text shown in the pill. In single-select this is the selected option's
+     * label (or the filter `label` when nothing is chosen); in multi-select it is
+     * ALWAYS the static filter `label` (the count badge carries the selection).
+     */
+    displayText: string;
+    /**
+     * The number of selected options. Renders the count badge when ≥1 (multi
+     * only — single-select passes `0` so no badge shows). No badge at `0`.
+     */
+    count?: number;
+    /** Whether the listbox is open (up caret + foreground caret colour). */
+    open?: boolean;
+    /** id of the pill `<button>`. */
+    id: string;
+}
+/**
+ * The Filter trigger — a `<button type="button">` styled as a filter chip
+ * (Figma `base-filter`, node 5026:36907): a `h-10` / `rounded-sm` / `px-3` pill
+ * with the label, an optional count badge (multi), and a trailing caret that
+ * points down when closed / up when open.
+ *
+ * The caret is muted (`card-primary-foreground-muted`) at rest and strengthens
+ * to the full foreground on hover and while open (matching the Figma hover /
+ * focused&active / active states). Focus is the ADR-0010/0014 system ring (a
+ * chip is a button-shaped control, not a text field).
+ *
+ * Presentational leaf: all open/selection/keyboard orchestration and the ARIA
+ * popup wiring (`aria-haspopup`/`-expanded`/`-controls`/`-activedescendant`)
+ * live in `Filter`, which spreads them through `...props`. `ref` is a normal
+ * React 19 prop, forwarded to the button.
+ */
+declare function FilterTrigger({ displayText, count, open, disabled, id, className, ref, ...props }: FilterTriggerProps): React.JSX.Element;
+
+/**
+ * Filter styling — the filter-chip trigger (Figma `base-filter`, node
+ * 5026:36907) and its count badge. Binds ONLY to the semantic `--color-*` token
+ * layer (never primitives, never arbitrary values); theme switching is automatic
+ * via the `.dark` class, so no `dark:` variants are needed.
+ *
+ * The Filter reuses the shared `SelectListbox` for its dropdown (rows + footer)
+ * — this file owns only the pill trigger + the count badge, both unique to the
+ * Filter's visual (the listbox card + option rows are the select family's).
+ */
+/**
+ * The pill trigger (Figma `base-filter` node 5026:36907). A `<button>` shaped
+ * as a chip: `h-10` / `rounded-sm` / `px-3`, a `gap-1.5` row of the label, an
+ * optional count badge, and a trailing caret. Surface + border are the
+ * `card/neutral/primary` family (strip `neutral` → `card-primary-*`), the label
+ * is `body-03` in `card-primary-foreground`.
+ *
+ * FOCUS is the ADR-0010/0014 system ring (this is a button-shaped control, not
+ * a text field): `rounded-sm outline-none` at rest, then a 2px `--focus` ring
+ * with a 2px offset on `:focus-visible` only, suppressed when disabled. Per the
+ * TW4 gotcha (ADR-0014), `outline-solid` MUST accompany `outline-2` or the ring
+ * paints at style `none` (invisible). The caret + label colours are applied by
+ * `FilterTrigger` (they depend on open/hover runtime state), so this file owns
+ * the shared layout + surface + focus + disabled shell.
+ */
+declare const filterTriggerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type FilterTriggerVariantsProps = VariantProps<typeof filterTriggerVariants>;
+/**
+ * The count badge shown in the multi-select trigger when ≥1 option is selected
+ * (Figma `CountBadge` node 5026:5358). A small brand pill: `brand-primary`
+ * background, `rounded-xs`, `min-w-5 h-5` (20px), centred `text-xs` medium in
+ * the brand foreground, `px-0.5` (2px) so a two-digit count still fits inside
+ * the 20px min-width. Implemented as a local piece (not a shared `Badge`) per
+ * ADR-0016 — a shared badge is deferred until a second, non-token-input
+ * consumer justifies the abstraction; the Figma `CountBadge` is a distinct
+ * component from `DiscardBadge`, so it does not qualify as that second consumer.
+ */
+declare const filterCountBadgeVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type FilterCountBadgeVariantsProps = VariantProps<typeof filterCountBadgeVariants>;
+
+export { Filter, type FilterCountBadgeVariantsProps, type FilterProps, FilterTrigger, type FilterTriggerProps, type FilterTriggerVariantsProps, SelectOption, filterCountBadgeVariants, filterTriggerVariants };

package/dist/filter.js

@@ -0,0 +1,6 @@
+export { Filter, FilterTrigger, filterCountBadgeVariants, filterTriggerVariants } from './chunk-B3MMGTPV.js';
+import './chunk-5TWRK4NW.js';
+import './chunk-IEVN3J2F.js';
+import './chunk-SNU4YXOR.js';
+import './chunk-FAOVKDVM.js';
+import './chunk-7EOSDFS3.js';