@financedistrict/apps-ui 0.1.0

package/dist/chunk-7EOSDFS3.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };

package/dist/chunk-AIQ4UOGK.js

@@ -0,0 +1,142 @@
+import { inputVariants } from './chunk-IEVN3J2F.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { WarningIcon, InfoIcon } from '@phosphor-icons/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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.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 ? WarningIcon : InfoIcon;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", wrapperClassName), children: [
+    label != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ 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__ */ jsx(
+        "span",
+        {
+          "data-slot": "input-optional",
+          className: "body-04 text-input-foreground-muted",
+          children: "Optional"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx(
+            "span",
+            {
+              "data-slot": "input-leading",
+              "aria-hidden": "true",
+              className: "flex items-center",
+              children: leftSlot
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx("span", { "data-slot": "input-trailing", className: "flex items-center", children: rightSlot })
+        ]
+      }
+    ),
+    hint != null && /* @__PURE__ */ 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__ */ jsx(
+            HintIcon,
+            {
+              "aria-hidden": "true",
+              weight: "regular",
+              className: "size-4 shrink-0"
+            }
+          ),
+          hint
+        ]
+      }
+    )
+  ] });
+}
+
+export { Input };

package/dist/chunk-B3MMGTPV.js

@@ -0,0 +1,200 @@
+import { useSelectListbox, SelectListbox } from './chunk-5TWRK4NW.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { CaretUpIcon, CaretDownIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var filterTriggerVariants = cva(
+  [
+    // Layout — chip row: label + optional badge + caret, 6px gap (spacing/1-5).
+    "inline-flex h-10 w-fit shrink-0 items-center gap-1.5",
+    "rounded-sm px-3",
+    "cursor-pointer text-left align-middle transition-colors",
+    // Surface — card/neutral/primary (the `neutral` segment is stripped in the
+    // token name transform → `card-primary-*`).
+    "bg-card-primary-background border border-card-primary-border",
+    // System focus ring (ADR-0010/0014). `outline-solid` restores the style the
+    // base `outline-none` zeroed (TW4 gotcha) so the 2px ring actually paints.
+    "outline-none",
+    "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    // Decorative svgs (caret) never intercept the click and keep explicit sizes.
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      disabled: {
+        // Muted + not-allowed; the ring is suppressed (a disabled control is not
+        // focusable, but belt-and-braces if a consumer forces focus).
+        true: "cursor-not-allowed focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var filterCountBadgeVariants = cva([
+  "inline-flex h-5 min-w-5 items-center justify-center px-0.5",
+  "rounded-xs bg-brand-primary-background",
+  // `body-04` = the Figma badge text style (Archivo Regular 12/16) — NOT
+  // a `caption-*` utility (those render Chakra Petch, `font-caption`).
+  "body-04 text-brand-primary-foreground"
+]);
+function FilterTrigger({
+  displayText,
+  count = 0,
+  open = false,
+  disabled = false,
+  id,
+  className,
+  ref,
+  ...props
+}) {
+  const Caret = open ? CaretUpIcon : CaretDownIcon;
+  const caretColor = disabled ? "text-card-primary-foreground-muted" : open ? "text-card-primary-foreground" : "text-card-primary-foreground-muted group-hover:text-card-primary-foreground";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      id,
+      ref,
+      role: "combobox",
+      "data-slot": "filter-trigger",
+      "data-open": open || void 0,
+      disabled,
+      className: cn("group", filterTriggerVariants({ disabled }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "filter-label",
+            className: cn(
+              "body-03 truncate",
+              disabled ? "text-card-primary-foreground-muted" : "text-card-primary-foreground"
+            ),
+            children: displayText
+          }
+        ),
+        count > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "filter-count",
+            "aria-hidden": "true",
+            className: filterCountBadgeVariants(),
+            children: count
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "filter-caret",
+            "aria-hidden": "true",
+            className: "flex items-center",
+            children: /* @__PURE__ */ jsx(
+              Caret,
+              {
+                weight: "fill",
+                className: cn("size-3 transition-transform", caretColor)
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Filter({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  label,
+  disabled,
+  id: idProp,
+  className,
+  ref,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const id = idProp ?? generatedId;
+  const {
+    selected,
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    reset,
+    text
+  } = useSelectListbox({
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    multiple,
+    disabled,
+    // Filter's dropdown persists after a pick (single stays open like multi).
+    closeOnSelect: false,
+    id,
+    ref,
+    // The single-select empty state shows the filter `label`, not a generic
+    // "Select" placeholder — so `selectTriggerLabel`'s placeholder IS `label`.
+    // (In multi the trigger text is always `label` regardless — see below.)
+    placeholder: label
+  });
+  const displayText = multiple ? label : text;
+  const count = multiple ? selected.length : 0;
+  const canReset = selected.length > 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FilterTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        displayText,
+        count,
+        open,
+        disabled,
+        "aria-label": label,
+        className,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        widthMode: "auto",
+        "aria-label": label,
+        footer: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "filter-reset",
+            disabled: !canReset,
+            onClick: () => {
+              if (canReset) reset();
+            },
+            className: cn(
+              // A ghost button styled as `button/neutral/secondary`
+              // (`button-secondary-*`): foreground when enabled, muted when
+              // disabled. System focus ring (ADR-0010/0014) — `outline-solid`
+              // beside `outline-2` so it actually paints (TW4 gotcha).
+              "button-01 inline-flex h-8 items-center rounded-xs bg-transparent",
+              "outline-none transition-colors",
+              "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+              canReset ? "cursor-pointer text-button-secondary-foreground hover:text-button-secondary-foreground-accent" : "cursor-not-allowed text-button-secondary-foreground-muted"
+            ),
+            children: "Reset"
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Filter, FilterTrigger, filterCountBadgeVariants, filterTriggerVariants };

package/dist/chunk-DAHQYLUI.js

@@ -0,0 +1,146 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var sidebarItemVariants = cva(
+  [
+    "group flex h-9 w-full items-center rounded-xs border-l-2 border-transparent px-3",
+    "no-underline transition-colors outline-none"
+  ],
+  {
+    variants: {
+      active: {
+        true: "bg-brand-background border-brand-border",
+        false: ""
+      },
+      interactive: {
+        true: [
+          "cursor-pointer",
+          // Ring only — no fill/text change on focus (see file docstring).
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+        ],
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Hover fill only on a non-active, interactive item.
+      { active: false, interactive: true, class: "hover:bg-background" }
+    ],
+    defaultVariants: { active: false, interactive: false }
+  }
+);
+var sidebarItemLabelVariants = cva(
+  ["button-01 min-w-0 flex-1 truncate"],
+  {
+    variants: {
+      active: {
+        true: "text-brand-foreground",
+        false: "text-foreground-muted"
+      },
+      interactive: { true: "", false: "" }
+    },
+    compoundVariants: [
+      {
+        active: false,
+        interactive: true,
+        class: "group-hover:text-foreground"
+      }
+    ],
+    defaultVariants: { active: false, interactive: false }
+  }
+);
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function SidebarItem({
+  active = false,
+  asChild = false,
+  href,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const interactive = asChild || href != null;
+  const rootClassName = cn(
+    sidebarItemVariants({ active, interactive }),
+    className
+  );
+  const label = (labelNode) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "sidebar-item-label",
+      className: sidebarItemLabelVariants({ active, interactive }),
+      children: labelNode
+    }
+  );
+  const dataState = active ? "active" : void 0;
+  const ariaCurrent = active ? "page" : void 0;
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      throw new Error(
+        "SidebarItem: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "sidebar-item",
+        "data-state": dataState,
+        "aria-current": ariaCurrent,
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        ref: (node) => {
+          setRef(ref, node);
+          setRef(childProps.ref, node);
+        },
+        onClick: (event) => {
+          props.onClick?.(event);
+          childProps.onClick?.(event);
+        },
+        style: {
+          ...props.style,
+          ...childProps.style
+        }
+      },
+      label(childProps.children)
+    );
+  }
+  if (href != null) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        "data-slot": "sidebar-item",
+        "data-state": dataState,
+        "aria-current": ariaCurrent,
+        href,
+        className: rootClassName,
+        ref,
+        ...props,
+        children: label(children)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-item",
+      "data-state": dataState,
+      "aria-current": ariaCurrent,
+      className: rootClassName,
+      ref,
+      ...props,
+      children: label(children)
+    }
+  );
+}
+
+export { SidebarItem, sidebarItemLabelVariants, sidebarItemVariants };

package/dist/chunk-DGBXADSS.js

@@ -0,0 +1 @@
+