@financedistrict/apps-ui 0.1.0

package/dist/chunk-GLTLBUZ7.js

@@ -0,0 +1,285 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { MinusIcon, PlusIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var accordionRootVariants = cva(["flex flex-col"]);
+var accordionItemVariants = cva(["border-b border-card-border"], {
+  variants: {
+    disabled: {
+      true: "opacity-60",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+var accordionTriggerVariants = cva(
+  [
+    "group flex w-full cursor-pointer items-start gap-4 pt-3 text-left",
+    "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      open: {
+        true: "pb-2",
+        false: "pb-3"
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  }
+);
+var accordionTriggerTitleVariants = cva([
+  "body-02-medium min-w-0 flex-1 break-words text-card-foreground"
+]);
+var accordionTriggerIconVariants = cva([
+  "flex shrink-0 items-center text-card-foreground-muted transition-colors",
+  "group-hover:text-card-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0"
+]);
+var accordionContentVariants = cva([
+  "body-03 pb-3 text-card-foreground-muted"
+]);
+var AccordionContext = React.createContext(
+  null
+);
+function useAccordionContext(part) {
+  const context = React.useContext(AccordionContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Accordion.Root>`);
+  }
+  return context;
+}
+var AccordionItemContext = React.createContext(null);
+function useAccordionItemContext(part) {
+  const context = React.useContext(AccordionItemContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Accordion.Item>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function AccordionRoot({
+  type = "single",
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  collapsible = true,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const isMultiple = type === "multiple";
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => defaultValue !== void 0 ? defaultValue : isMultiple ? [] : null
+  );
+  const openModel = isControlled ? valueProp : uncontrolledValue;
+  const commit = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const isOpen = (itemValue) => isMultiple ? Array.isArray(openModel) && openModel.includes(itemValue) : openModel === itemValue;
+  const toggle = (itemValue) => {
+    if (isMultiple) {
+      const current2 = Array.isArray(openModel) ? openModel : [];
+      commit(
+        current2.includes(itemValue) ? current2.filter((v) => v !== itemValue) : [...current2, itemValue]
+      );
+      return;
+    }
+    const current = Array.isArray(openModel) ? null : openModel;
+    if (current === itemValue) {
+      commit(collapsible ? null : itemValue);
+    } else {
+      commit(itemValue);
+    }
+  };
+  const triggersRef = React.useRef(/* @__PURE__ */ new Set());
+  const registerTrigger = React.useCallback((node) => {
+    triggersRef.current.add(node);
+  }, []);
+  const unregisterTrigger = React.useCallback((node) => {
+    triggersRef.current.delete(node);
+  }, []);
+  const onTriggerKeyDown = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const triggers = Array.from(triggersRef.current).filter((el) => !el.disabled).sort(
+      (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    if (triggers.length === 0) return;
+    const currentIndex = triggers.indexOf(event.currentTarget);
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowDown":
+        nextIndex = (currentIndex + 1) % triggers.length;
+        break;
+      case "ArrowUp":
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = triggers.length - 1;
+        break;
+    }
+    triggers[nextIndex]?.focus();
+  };
+  const contextValue = {
+    type,
+    isOpen,
+    toggle,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown
+  };
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion",
+      className: cn(accordionRootVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function AccordionItem({
+  value,
+  disabled = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { isOpen } = useAccordionContext("Accordion.Item");
+  const open = isOpen(value);
+  const reactId = React.useId();
+  const triggerId = `${reactId}-trigger`;
+  const contentId = `${reactId}-content`;
+  const itemContext = {
+    value,
+    open,
+    disabled,
+    triggerId,
+    contentId
+  };
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion-item",
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      className: cn(accordionItemVariants({ disabled }), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function AccordionTrigger({
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const { toggle, registerTrigger, unregisterTrigger, onTriggerKeyDown } = useAccordionContext("Accordion.Trigger");
+  const { value, open, disabled, triggerId, contentId } = useAccordionItemContext("Accordion.Trigger");
+  const buttonRef = React.useRef(null);
+  const setButtonRef = (node) => {
+    buttonRef.current = node;
+    setRef(ref, node);
+  };
+  React.useEffect(() => {
+    const node = buttonRef.current;
+    if (!node) return;
+    registerTrigger(node);
+    return () => unregisterTrigger(node);
+  }, [registerTrigger, unregisterTrigger]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref: setButtonRef,
+      type: "button",
+      id: triggerId,
+      "data-slot": "accordion-trigger",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      disabled,
+      className: cn(accordionTriggerVariants({ open }), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggle(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) onTriggerKeyDown(event);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "accordion-trigger-title",
+            className: accordionTriggerTitleVariants(),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "accordion-trigger-icon",
+            "aria-hidden": "true",
+            className: accordionTriggerIconVariants(),
+            children: open ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionContent({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { open, triggerId, contentId } = useAccordionItemContext("Accordion.Content");
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-slot": "accordion-content",
+      "data-state": "open",
+      className: cn(accordionContentVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+};
+
+export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger, accordionContentVariants, accordionItemVariants, accordionRootVariants, accordionTriggerIconVariants, accordionTriggerTitleVariants, accordionTriggerVariants };

package/dist/chunk-GTZFV43T.js

@@ -0,0 +1,154 @@
+import { Input } from './chunk-AIQ4UOGK.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { XIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { jsx } from 'react/jsx-runtime';
+
+function useDebouncedCallback(fn, delayMs) {
+  const fnRef = React.useRef(fn);
+  const delayRef = React.useRef(delayMs);
+  fnRef.current = fn;
+  delayRef.current = delayMs;
+  const timerRef = React.useRef(null);
+  const debounced = React.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.useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+  return debounced;
+}
+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.useRef(null);
+  const setInputRef = React.useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
+  );
+  const [hasValueState, setHasValueState] = React.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__ */ 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__ */ jsx(MagnifyingGlassIcon, { weight: "regular" }),
+      rightSlot: showClear ? /* @__PURE__ */ 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__ */ jsx(XIcon, { weight: "regular", "aria-hidden": "true" })
+        }
+      ) : void 0,
+      ...props
+    }
+  );
+}
+
+export { SearchBar };

package/dist/chunk-HRGZNL4A.js

@@ -0,0 +1,88 @@
+import { Radio } from './chunk-UPQ3ZPCO.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var selectableFeatureCardVariants = cva([
+  "group overflow-hidden rounded-md border border-border bg-card-background",
+  "has-[:checked]:border-brand-primary-border",
+  "has-[:disabled]:opacity-60"
+]);
+var selectableFeatureCardRowVariants = cva(
+  [
+    "flex h-16 items-center gap-3 bg-card-background px-4 py-3",
+    "cursor-pointer has-[:disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      editable: {
+        true: "group-has-[:checked]:border-b group-has-[:checked]:border-border",
+        false: ""
+      }
+    },
+    defaultVariants: { editable: false }
+  }
+);
+var selectableFeatureCardTextVariants = cva(
+  "flex min-w-0 flex-1 flex-col"
+);
+var selectableFeatureCardTrailingVariants = cva(
+  "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-6 [&_svg]:shrink-0"
+);
+var selectableFeatureCardBottomVariants = cva(
+  "hidden bg-card-accent p-4 group-has-[:checked]:block"
+);
+function SelectableFeatureCard({
+  title,
+  subtitle,
+  trailing,
+  variation = "basic",
+  children,
+  className,
+  ref,
+  ...radioProps
+}) {
+  const editable = variation === "editable";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "selectable-feature-card",
+      className: cn(selectableFeatureCardVariants(), className),
+      children: [
+        /* @__PURE__ */ jsxs("label", { className: selectableFeatureCardRowVariants({ editable }), children: [
+          /* @__PURE__ */ jsx(Radio, { ref, ...radioProps }),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-slot": "selectable-feature-card-text",
+              className: selectableFeatureCardTextVariants(),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "body-02-medium truncate text-card-foreground", children: title }),
+                subtitle != null && /* @__PURE__ */ jsx("span", { className: "body-03 truncate text-card-foreground-muted", children: subtitle })
+              ]
+            }
+          ),
+          trailing != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "selectable-feature-card-trailing",
+              "aria-hidden": "true",
+              className: selectableFeatureCardTrailingVariants(),
+              children: trailing
+            }
+          )
+        ] }),
+        editable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "selectable-feature-card-bottom",
+            className: selectableFeatureCardBottomVariants(),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SelectableFeatureCard, selectableFeatureCardBottomVariants, selectableFeatureCardRowVariants, selectableFeatureCardTextVariants, selectableFeatureCardTrailingVariants, selectableFeatureCardVariants };

package/dist/chunk-IEVN3J2F.js

@@ -0,0 +1,98 @@
+import { cva } from 'class-variance-authority';
+
+// src/input/inputVariants.ts
+var inputVariants = 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
+    }
+  }
+);
+
+export { inputVariants };