@financedistrict/apps-ui 0.1.0

package/dist/search-bar.cjs

@@ -0,0 +1,408 @@
+'use strict';
+
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/search-bar/SearchBar.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function useDebouncedCallback(fn, delayMs) {
+  const fnRef = React__namespace.useRef(fn);
+  const delayRef = React__namespace.useRef(delayMs);
+  fnRef.current = fn;
+  delayRef.current = delayMs;
+  const timerRef = React__namespace.useRef(null);
+  const debounced = React__namespace.useMemo(() => {
+    const clear = () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+    const call = (...args) => {
+      clear();
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        fnRef.current(...args);
+      }, delayRef.current);
+    };
+    call.cancel = clear;
+    call.flush = (...args) => {
+      clear();
+      fnRef.current(...args);
+    };
+    return call;
+  }, []);
+  React__namespace.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  return debounced;
+}
+var inputVariants = classVarianceAuthority.cva(
+  [
+    // Field row layout — icons + input on one line, vertically centred.
+    "flex w-full items-center",
+    // Colour transitions for the focus border change.
+    "transition-colors",
+    // I-beam text cursor over the WHOLE field row (not just the inner input),
+    // so clicking anywhere in the padding/icon area reads as "type here". This
+    // is the only hover affordance — hover intentionally does NOT recolour the
+    // border (user-authorized deviation from the Figma). `cursor-text` sits in
+    // the base; `has-[:disabled]:cursor-not-allowed` below is declared AFTER it
+    // so it wins on a disabled field (same-specificity utilities, later class
+    // takes precedence — confirmed by tailwind-merge ordering).
+    "cursor-text",
+    // Disabled: not-allowed cursor + block pointer interaction on the whole
+    // field (the native `disabled` on the input already stops typing; icons are
+    // dimmed separately by the `disabled`-derived `iconStateClass` in <Input>).
+    // Declared after `cursor-text` so it overrides the I-beam when disabled.
+    "has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variation: {
+        field: [
+          "bg-input-background border border-input-border rounded-sm",
+          // Focus (mouse or keyboard) strengthens the whole border to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ],
+        line: [
+          "border-b border-input-border",
+          // Focus (mouse or keyboard) strengthens the bottom line to the
+          // accent. Hover does NOT change colour (cursor-only affordance).
+          "focus-within:border-input-border-accent"
+        ]
+      },
+      size: {
+        // sm/lg heights reuse the Button scale; gap follows Figma per size.
+        sm: "h-8 gap-1",
+        lg: "h-10 gap-2"
+      },
+      error: {
+        // Error out-ranks focus: declare the destructive border for the resting
+        // state AND its `focus-within:` form so an errored field never recolours
+        // to the accent when focused (a bare `border-…` alone would lose to the
+        // variation's `focus-within:` accent utility above). No `hover:` form is
+        // needed — hover no longer changes colour on any variation. The `error`
+        // variant's classes are emitted after the variation's, so at equal
+        // specificity the destructive `focus-within:` wins by order.
+        true: "border-input-destructive-foreground-accent focus-within:border-input-destructive-foreground-accent",
+        false: ""
+      },
+      // Bottom-line visibility toggle. LINE ONLY — the hide effect is applied
+      // via a compound variant below (scoped to `variation:line`), so `field`
+      // is unaffected. Boolean → `true`/`false`; `true` (default) keeps today's
+      // behaviour. No classes here: `true` is the resting `border-input-border`
+      // from the variation, and `false`'s hide is the compound variant.
+      showBottomLine: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // field padding — Figma field-lg = px-3 (12px) / py-2 (8px).
+      { variation: "field", size: "lg", className: "px-3 py-2" },
+      // field-sm: DERIVED. px-2 (8px = spacing/2) steps down from field-lg's
+      // px-3 (12px) and equals py-2 for a uniform spacing/2 inset all around.
+      { variation: "field", size: "sm", className: "px-2 py-2" },
+      // line — no horizontal padding (Figma px-0); vertical padding per size.
+      { variation: "line", size: "lg", className: "py-2" },
+      { variation: "line", size: "sm", className: "py-2.5" },
+      // Hide the resting bottom line (LINE ONLY): recolour to transparent while
+      // keeping `border-b` for a stable 1px width (no layout shift). Gated on
+      // `error:false` so an errored field keeps its destructive rest border
+      // (transparent would otherwise last-win over it). Focus still wins:
+      // `focus-within:border-input-border-accent` out-ranks `border-transparent`
+      // (later in class order), so the line reappears on focus. `field` is
+      // untouched — this compound only matches `variation:line`.
+      {
+        variation: "line",
+        showBottomLine: false,
+        error: false,
+        className: "border-transparent"
+      }
+    ],
+    defaultVariants: {
+      variation: "field",
+      size: "lg",
+      error: false,
+      showBottomLine: true
+    }
+  }
+);
+function Input({
+  className,
+  fieldClassName,
+  wrapperClassName,
+  variation = "field",
+  size = "lg",
+  error = false,
+  // LINE-only bottom-line toggle. Destructured OUT of `props` so it never
+  // spreads onto the native <input> (invalid DOM attribute → React warning).
+  showBottomLine = true,
+  label,
+  optional = false,
+  hint,
+  leftSlot,
+  rightSlot,
+  disabled,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const generatedId = React__namespace.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const iconStateClass = cn(
+    error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+    disabled && "text-input-foreground-muted"
+  );
+  const HintIcon = error ? react.WarningIcon : react.InfoIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: id,
+          "data-slot": "input-label",
+          className: cn(
+            "caption-03-medium uppercase",
+            error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+            disabled && "text-input-foreground-muted"
+          ),
+          children: label
+        }
+      ),
+      optional && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "data-slot": "input-optional",
+          className: "body-04 text-input-foreground-muted",
+          children: "Optional"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "input-field",
+        "data-variation": variation,
+        "data-error": error || void 0,
+        className: cn(
+          inputVariants({ variation, size, error, showBottomLine }),
+          // Icon slots inherit the shared state colour; 16px default size.
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          iconStateClass,
+          fieldClassName
+        ),
+        children: [
+          leftSlot != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "input-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leftSlot
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id,
+              "data-slot": "input",
+              disabled,
+              "aria-invalid": error || void 0,
+              "aria-describedby": hintId,
+              className: cn(
+                // Typography (Figma `body-03`) + fill the row. `min-w-0` lets the
+                // input shrink inside the flex row instead of overflowing.
+                "body-03 w-full min-w-0 bg-transparent outline-none",
+                // Typed text + caret colour (Figma `input-foreground-accent`).
+                "text-input-foreground-accent caret-input-foreground-accent",
+                // Placeholder colour (Figma `input-foreground-muted`).
+                "placeholder:text-input-foreground-muted",
+                // Disabled text goes muted; keep the not-allowed cursor.
+                "disabled:cursor-not-allowed disabled:text-input-foreground-muted",
+                className
+              ),
+              ref,
+              ...props
+            }
+          ),
+          rightSlot != null && // NOT aria-hidden: the trailing slot may host an interactive control
+          // (e.g. SearchBar's clear button) that must stay reachable by AT +
+          // keyboard, and a focusable element inside aria-hidden is an ARIA
+          // violation. Decorative bare-<svg> icons are silent to AT on their own
+          // (no role / no accessible name), so dropping aria-hidden here does not
+          // make them announced. The leading slot stays decorative (aria-hidden).
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "input-trailing", className: "flex items-center", children: rightSlot })
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: hintId,
+        "data-slot": "input-hint",
+        className: cn(
+          "body-04 flex items-center gap-1",
+          error ? "text-input-destructive-foreground-accent" : "text-input-foreground",
+          disabled && "text-input-foreground-muted"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+var DEFAULT_DEBOUNCE_MS = 300;
+function SearchBar({
+  onSearch,
+  debounceMs = DEFAULT_DEBOUNCE_MS,
+  hint,
+  wrapperClassName,
+  fieldClassName,
+  className,
+  disabled,
+  value,
+  defaultValue,
+  onChange,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const innerRef = React__namespace.useRef(null);
+  const setInputRef = React__namespace.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
+  );
+  const [hasValueState, setHasValueState] = React__namespace.useState(
+    () => String(value ?? defaultValue ?? "").length > 0
+  );
+  const hasValue = isControlled ? String(value ?? "").length > 0 : hasValueState;
+  const debouncedSearch = useDebouncedCallback((next) => {
+    onSearch?.(next);
+  }, debounceMs);
+  const handleChange = (event) => {
+    onChange?.(event);
+    if (!isControlled) setHasValueState(event.currentTarget.value.length > 0);
+    debouncedSearch(event.currentTarget.value);
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Enter") {
+      debouncedSearch.flush(event.currentTarget.value);
+    }
+  };
+  const handleClear = () => {
+    const input = innerRef.current;
+    if (!input) return;
+    const setter = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      "value"
+    )?.set;
+    setter?.call(input, "");
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    if (!isControlled) setHasValueState(false);
+    debouncedSearch.cancel();
+    onSearch?.("");
+    input.focus();
+  };
+  const showClear = hasValue && !disabled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      type: "search",
+      variation: "field",
+      size: "lg",
+      ref: setInputRef,
+      disabled,
+      hint,
+      value,
+      defaultValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        // Suppress the browser's native `type=search` clear affordance
+        // (WebKit/Chrome render `::-webkit-search-cancel-button`) — SearchBar
+        // provides its own clear button, so the native one would show a second
+        // "X". `hidden` (display:none) is used rather than `appearance-none`:
+        // that pseudo-element is governed by `-webkit-appearance`, which the
+        // unprefixed `appearance:none` Tailwind emits does not affect.
+        // Caller `className` is merged after and can still override.
+        "[&::-webkit-search-cancel-button]:hidden",
+        className
+      ),
+      wrapperClassName,
+      fieldClassName,
+      leftSlot: /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { weight: "regular" }),
+      rightSlot: showClear ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          onClick: handleClear,
+          "data-slot": "search-clear",
+          className: cn(
+            // Reset native button chrome; inherit the field's icon colour.
+            "inline-flex cursor-pointer items-center justify-center rounded-xs bg-transparent p-0 text-current",
+            // Standard ADR-0010 system focus ring (this button is a momentary
+            // control — the ADR-0011 no-ring exception applies only to the
+            // text input itself, NOT to this button).
+            "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular", "aria-hidden": "true" })
+        }
+      ) : void 0,
+      ...props
+    }
+  );
+}
+
+exports.SearchBar = SearchBar;

package/dist/search-bar.d.cts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+interface SearchBarProps extends Omit<React.ComponentProps<"input">, "size"> {
+    /**
+     * Fired with the current value, **debounced** by `debounceMs` (default 300).
+     * Runs ALONGSIDE the native `onChange` (which still fires immediately per
+     * keystroke — ADR-0010: the native input is the source of truth). Also fired
+     * immediately (debounce cancelled) on clear (`""`) and on Enter.
+     */
+    onSearch?: (value: string) => void;
+    /** Debounce delay for `onSearch`, in milliseconds. Default `300`. */
+    debounceMs?: number;
+    /** Helper text below the field (forwarded to Input's `hint`). */
+    hint?: React.ReactNode;
+    /** Class names for Input's outer wrapper (the vertical field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for Input's field row (border/background box), not the `<input>`. */
+    fieldClassName?: string;
+}
+/**
+ * SearchBar — a search field composed from `<Input>` (it renders Input; it does
+ * NOT fork Input's markup). Fixed to Input's `field` variation at `lg` size (no
+ * `label`), with a leading MagnifyingGlass icon and a trailing clear (X) button
+ * that appears only when there's a value.
+ *
+ * Value model (ADR-0010): the native `<input>` is the single source of truth.
+ * Use it uncontrolled (`defaultValue`) or controlled (`value` + `onChange`);
+ * `onChange` fires immediately on every keystroke and is never replaced.
+ * `onSearch` is a debounced convenience on top, fired ALONGSIDE `onChange`.
+ *
+ * Clear-button visibility is keyed off whether the field currently has a value.
+ * We track that as a minimal boolean UI flag (`hasValue`) — NOT a mirror of the
+ * value string: the actual text is always read from the input via `ref` (for
+ * `onSearch`/flush), so the native input stays the source of truth. For
+ * controlled use the flag is derived from the `value` prop each render; for
+ * uncontrolled use it seeds from `defaultValue` and updates on each input event.
+ *
+ * `ref` (a normal React 19 prop) forwards to the underlying `<input>`.
+ */
+declare function SearchBar({ onSearch, debounceMs, hint, wrapperClassName, fieldClassName, className, disabled, value, defaultValue, onChange, onKeyDown, ref, ...props }: SearchBarProps): React.JSX.Element;
+
+export { SearchBar, type SearchBarProps };

package/dist/search-bar.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+interface SearchBarProps extends Omit<React.ComponentProps<"input">, "size"> {
+    /**
+     * Fired with the current value, **debounced** by `debounceMs` (default 300).
+     * Runs ALONGSIDE the native `onChange` (which still fires immediately per
+     * keystroke — ADR-0010: the native input is the source of truth). Also fired
+     * immediately (debounce cancelled) on clear (`""`) and on Enter.
+     */
+    onSearch?: (value: string) => void;
+    /** Debounce delay for `onSearch`, in milliseconds. Default `300`. */
+    debounceMs?: number;
+    /** Helper text below the field (forwarded to Input's `hint`). */
+    hint?: React.ReactNode;
+    /** Class names for Input's outer wrapper (the vertical field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for Input's field row (border/background box), not the `<input>`. */
+    fieldClassName?: string;
+}
+/**
+ * SearchBar — a search field composed from `<Input>` (it renders Input; it does
+ * NOT fork Input's markup). Fixed to Input's `field` variation at `lg` size (no
+ * `label`), with a leading MagnifyingGlass icon and a trailing clear (X) button
+ * that appears only when there's a value.
+ *
+ * Value model (ADR-0010): the native `<input>` is the single source of truth.
+ * Use it uncontrolled (`defaultValue`) or controlled (`value` + `onChange`);
+ * `onChange` fires immediately on every keystroke and is never replaced.
+ * `onSearch` is a debounced convenience on top, fired ALONGSIDE `onChange`.
+ *
+ * Clear-button visibility is keyed off whether the field currently has a value.
+ * We track that as a minimal boolean UI flag (`hasValue`) — NOT a mirror of the
+ * value string: the actual text is always read from the input via `ref` (for
+ * `onSearch`/flush), so the native input stays the source of truth. For
+ * controlled use the flag is derived from the `value` prop each render; for
+ * uncontrolled use it seeds from `defaultValue` and updates on each input event.
+ *
+ * `ref` (a normal React 19 prop) forwards to the underlying `<input>`.
+ */
+declare function SearchBar({ onSearch, debounceMs, hint, wrapperClassName, fieldClassName, className, disabled, value, defaultValue, onChange, onKeyDown, ref, ...props }: SearchBarProps): React.JSX.Element;
+
+export { SearchBar, type SearchBarProps };

package/dist/search-bar.js

@@ -0,0 +1,4 @@
+export { SearchBar } from './chunk-GTZFV43T.js';
+import './chunk-AIQ4UOGK.js';
+import './chunk-IEVN3J2F.js';
+import './chunk-7EOSDFS3.js';