@financedistrict/apps-ui 0.1.0

package/dist/chunk-E6KPNTWW.js

@@ -0,0 +1,295 @@
+import { inputVariants } from './chunk-IEVN3J2F.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { WarningIcon, InfoIcon, XIcon } from '@phosphor-icons/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Token({
+  value,
+  invalid = false,
+  disabled = false,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "token",
+      "data-invalid": invalid || void 0,
+      tabIndex: disabled ? void 0 : 0,
+      onKeyDown: disabled ? void 0 : (event) => {
+        if (event.key === "Delete" || event.key === "Backspace") {
+          event.preventDefault();
+          onRemove("keyboard");
+        }
+      },
+      className: cn(
+        // `group` so the ✕ can react to the badge's hover/focus (see below).
+        // Height is exactly 22px = 20px (`body-03` line) + 2px border, with NO
+        // vertical padding: this keeps the field a constant 40px tall
+        // (badge 22 + 8+8 field padding + 1+1 field border = 40, empty or filled).
+        // Adding `py-*` here would push the field past 40px once tokens appear.
+        "group inline-flex items-center gap-1 min-w-5 rounded-sm border px-1",
+        // Default: neutral card border + background. Invalid: destructive accent
+        // recolour (there is no `card-destructive` token — reuse `input-destructive-*`).
+        invalid ? "border-input-destructive-border bg-card-background" : "border-card-border bg-card-background",
+        // Interactive chrome (only when not disabled): hover/focus fill to
+        // `card-accent` (the DS's "stronger/hover" step up from `card-background`)
+        // and the STANDARD ADR-0010/0012 focus ring on the whole badge — the ✕
+        // itself carries no ring. `cursor-default` overrides the field's I-beam
+        // so a badge doesn't read as "type here".
+        !disabled && "cursor-default hover:bg-card-accent focus-visible:bg-card-accent outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "token-label",
+            className: cn(
+              "body-03",
+              // Disabled wins over invalid: the Figma disabled badge (561:12782) is
+              // fully muted — a disabled field is inert, so no destructive red.
+              disabled ? "text-card-foreground-muted" : invalid ? "text-input-destructive-foreground-accent" : "text-card-foreground"
+            ),
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${value}`,
+            onClick: () => onRemove("pointer"),
+            disabled,
+            tabIndex: -1,
+            "data-slot": "token-remove",
+            className: cn(
+              // Reset native button chrome.
+              "inline-flex cursor-pointer items-center justify-center rounded-xs bg-transparent p-0",
+              // Icon colour follows the badge state. Disabled wins (fully muted, no
+              // hover strengthen — the badge is inert). Valid: muted at rest,
+              // strengthens to `card-foreground` on badge hover/focus (via `group-*`).
+              // Invalid: stays destructive (a strengthen would drop the flag).
+              disabled ? "text-card-foreground-muted" : invalid ? "text-input-destructive-foreground-accent" : "text-card-foreground-muted group-hover:text-card-foreground group-focus-visible:text-card-foreground",
+              "disabled:cursor-not-allowed"
+            ),
+            children: /* @__PURE__ */ jsx(XIcon, { weight: "regular", "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function splitOnSeparators(raw, separators) {
+  if (separators.length === 0) return [raw];
+  const escaped = separators.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("");
+  return raw.split(new RegExp(`[${escaped}]`));
+}
+function TokenInput({
+  className,
+  fieldClassName,
+  wrapperClassName,
+  value,
+  defaultValue,
+  onChange,
+  separators = [","],
+  commitOnBlur = false,
+  validate,
+  label,
+  optional = false,
+  hint,
+  error = false,
+  disabled,
+  placeholder,
+  id: idProp,
+  onKeyDown,
+  onBlur,
+  onInput,
+  ref,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [tokensState, setTokensState] = React.useState(
+    () => defaultValue ?? []
+  );
+  const tokens = isControlled ? value : tokensState;
+  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 generatedId = React.useId();
+  const id = idProp ?? generatedId;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const commitTokens = (next) => {
+    if (!isControlled) setTokensState(next);
+    onChange?.(next);
+  };
+  const addTokens = (pieces) => {
+    const next = [...tokens];
+    const seen = new Set(next.map((t) => t.toLowerCase()));
+    let changed = false;
+    for (const piece of pieces) {
+      const trimmed = piece.trim();
+      if (trimmed === "") continue;
+      const key = trimmed.toLowerCase();
+      if (seen.has(key)) continue;
+      seen.add(key);
+      next.push(trimmed);
+      changed = true;
+    }
+    if (changed) commitTokens(next);
+  };
+  const removeTokenAt = (index, origin) => {
+    commitTokens(tokens.filter((_, i) => i !== index));
+    if (origin === "keyboard") innerRef.current?.focus();
+  };
+  const handleInput = (event) => {
+    onInput?.(event);
+    const input = event.currentTarget;
+    const raw = input.value;
+    if (separators.some((sep) => raw.includes(sep))) {
+      addTokens(splitOnSeparators(raw, separators));
+      input.value = "";
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Backspace" && event.currentTarget.value === "" && tokens.length > 0) {
+      event.preventDefault();
+      removeTokenAt(tokens.length - 1);
+    }
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    if (commitOnBlur) {
+      const input = event.currentTarget;
+      if (input.value.trim() !== "") {
+        addTokens([input.value]);
+        input.value = "";
+      }
+    }
+  };
+  const handleFieldMouseDown = (event) => {
+    const target = event.target;
+    if (target.closest("[data-slot=token]")) return;
+    if (target === innerRef.current) return;
+    event.preventDefault();
+    innerRef.current?.focus();
+  };
+  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": "token-input-field",
+        "data-error": error || void 0,
+        onMouseDown: handleFieldMouseDown,
+        className: cn(
+          // Reuse Input's field styling (bg/border/rounded/focus-within/error).
+          inputVariants({ variation: "field", size: "lg", error }),
+          // Layout overrides (tailwind-merge last-wins): grow with wrapped rows,
+          // keep single-row min height, allow badges + input to wrap, uniform
+          // spacing/2 inset (overrides field-lg's px-3 py-2).
+          "h-auto min-h-10 flex-wrap gap-1 p-2",
+          // Icon slots inherit the shared state colour.
+          iconStateClass,
+          fieldClassName
+        ),
+        children: [
+          tokens.map((token, index) => /* @__PURE__ */ jsx(
+            Token,
+            {
+              value: token,
+              invalid: validate ? !validate(token) : false,
+              disabled,
+              onRemove: (origin) => removeTokenAt(index, origin)
+            },
+            `${token}-${index}`
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              "data-slot": "token-input",
+              disabled,
+              placeholder: tokens.length === 0 ? placeholder : void 0,
+              "aria-invalid": error || void 0,
+              "aria-describedby": hintId,
+              className: cn(
+                // Typography + grow to fill remaining row width. `min-w-0` lets the
+                // input shrink; a small basis keeps it usable when tokens wrap.
+                "body-03 w-0 min-w-16 flex-1 bg-transparent outline-none",
+                "text-input-foreground-accent caret-input-foreground-accent",
+                "placeholder:text-input-foreground-muted",
+                "disabled:cursor-not-allowed disabled:text-input-foreground-muted",
+                className
+              ),
+              ref: setInputRef,
+              onInput: handleInput,
+              onKeyDown: handleKeyDown,
+              onBlur: handleBlur,
+              ...props
+            }
+          )
+        ]
+      }
+    ),
+    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 { TokenInput };

package/dist/chunk-EOAB6G2D.js

@@ -0,0 +1,149 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { CaretRightIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var featureCardVariants = cva(
+  "flex h-16 items-center gap-3 px-4 py-3 bg-card-background no-underline",
+  {
+    variants: {
+      interactive: {
+        true: [
+          "cursor-pointer transition-colors hover:bg-card-accent",
+          "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: { interactive: false }
+  }
+);
+var featureCardLeadingVariants = cva(
+  "flex shrink-0 items-center text-card-foreground [&_svg]:size-6 [&_svg]:shrink-0"
+);
+var featureCardTrailingVariants = cva(
+  "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-6 [&_svg]:shrink-0"
+);
+var featureCardTextVariants = cva("flex min-w-0 flex-1 flex-col");
+var featureCardTitleRowVariants = cva(
+  "flex min-w-0 items-center gap-0.5"
+);
+var featureCardCaretVariants = cva(
+  "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-4 [&_svg]:shrink-0"
+);
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function FeatureCard({
+  title,
+  subtitle,
+  leading,
+  trailing,
+  caret = true,
+  asChild = false,
+  href,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const interactive = asChild || href != null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leading != null && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "feature-card-leading",
+        "aria-hidden": "true",
+        className: featureCardLeadingVariants(),
+        children: leading
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { "data-slot": "feature-card-text", className: featureCardTextVariants(), children: [
+      /* @__PURE__ */ jsxs("span", { className: featureCardTitleRowVariants(), children: [
+        /* @__PURE__ */ jsx("span", { className: "body-02-medium truncate text-card-foreground", children: title }),
+        caret && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "feature-card-caret",
+            "aria-hidden": "true",
+            className: featureCardCaretVariants(),
+            children: /* @__PURE__ */ jsx(CaretRightIcon, {})
+          }
+        )
+      ] }),
+      subtitle != null && /* @__PURE__ */ jsx("span", { className: "body-03 truncate text-card-foreground-muted", children: subtitle })
+    ] }),
+    trailing != null && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "feature-card-trailing",
+        "aria-hidden": "true",
+        className: featureCardTrailingVariants(),
+        children: trailing
+      }
+    )
+  ] });
+  const rootClassName = cn(featureCardVariants({ interactive }), className);
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      throw new Error(
+        "FeatureCard: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "feature-card",
+        ref: (node) => {
+          setRef(ref, node);
+          setRef(childProps.ref, node);
+        },
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        onClick: (event) => {
+          props.onClick?.(event);
+          childProps.onClick?.(event);
+        },
+        style: {
+          ...props.style,
+          ...childProps.style
+        }
+      },
+      content,
+      childProps.children
+    );
+  }
+  if (href != null) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        "data-slot": "feature-card",
+        href,
+        className: rootClassName,
+        ref,
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "feature-card",
+      className: rootClassName,
+      ref,
+      ...props,
+      children: content
+    }
+  );
+}
+
+export { FeatureCard, featureCardCaretVariants, featureCardLeadingVariants, featureCardTextVariants, featureCardTitleRowVariants, featureCardTrailingVariants, featureCardVariants };

package/dist/chunk-FAOVKDVM.js

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority';
+
+// src/lib/scrollbar.ts
+var scrollbarVariants = cva(
+  [
+    // Firefox (approximate): thin themed scrollbar over a transparent track.
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:var(--color-card-foreground-muted)_transparent]",
+    // WebKit gutter — 12px, both axes so the utility is axis-agnostic.
+    "[&::-webkit-scrollbar]:w-3 [&::-webkit-scrollbar]:h-3",
+    // WebKit thumb — 4px pill: a 4px transparent border + content-box clip
+    // leaves a 4px-wide fill centred in the 12px gutter.
+    "[&::-webkit-scrollbar-thumb]:rounded-full",
+    "[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent",
+    "[&::-webkit-scrollbar-thumb]:bg-clip-content",
+    "[&::-webkit-scrollbar-thumb]:bg-card-foreground-muted",
+    // WebKit track — transparent by default (stroke is the `stroke` variant).
+    "[&::-webkit-scrollbar-track]:bg-transparent"
+  ],
+  {
+    variants: {
+      stroke: {
+        // 1px leading-edge track stroke (Figma `stroke`, on by default).
+        true: "[&::-webkit-scrollbar-track]:border-l [&::-webkit-scrollbar-track]:border-card-border",
+        false: ""
+      }
+    },
+    defaultVariants: { stroke: true }
+  }
+);
+
+export { scrollbarVariants };

package/dist/chunk-FV76Z4Z2.js

@@ -0,0 +1,78 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var switchVariants = cva([
+  // Track — 56×24 (`h-6 w-14`), fully round (Figma `radius/full`), 4px inset
+  // (`p-1` = Figma `spacing/1`). `appearance-none` strips the native checkbox
+  // box; `peer` lets the sibling thumb react to :checked / :disabled.
+  "peer inline-flex h-6 w-14 shrink-0 items-center rounded-full border p-1",
+  "appearance-none cursor-pointer transition-colors",
+  // Off — default
+  "bg-button-secondary-background border-button-secondary-border",
+  // Off — hover strengthens the border (focused keeps the default border)
+  "hover:border-button-secondary-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way Checkbox/Radio do: 2px stroke, 2px offset (`outline-solid`
+  // restores what `outline-none` zeroed). Circular via the track's rounding.
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // On — brand fill, border made transparent (kept for a constant box model)
+  "checked:bg-brand-primary-background checked:border-transparent",
+  "checked:hover:bg-brand-primary-accent",
+  // Disabled — off keeps the white track with a muted border; on drops to a
+  // neutral muted fill (per Figma). Border transparent when on, muted when off.
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-button-secondary-border-muted",
+  "checked:disabled:bg-button-primary-muted checked:disabled:border-transparent"
+]);
+function Switch({
+  className,
+  wrapperClassName,
+  onChange,
+  onCheckedChange,
+  ...props
+}) {
+  const handleChange = (event) => {
+    onChange?.(event);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center",
+        wrapperClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            role: "switch",
+            "data-slot": "switch",
+            className: cn(switchVariants(), className),
+            ...props,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "switch-thumb",
+            className: cn(
+              "pointer-events-none absolute left-1 h-4 w-6 rounded-full transition-transform",
+              // Off — dark knob at 90% opacity (Figma `opacity/90`)
+              "bg-button-secondary-foreground opacity-90",
+              "peer-checked:translate-x-5.5 peer-checked:bg-brand-primary-foreground peer-checked:opacity-100",
+              // Disabled — muted knob whether on or off (per Figma)
+              "peer-disabled:bg-button-secondary-foreground-muted peer-disabled:opacity-100",
+              "peer-checked:peer-disabled:bg-button-primary-foreground-muted"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Switch, switchVariants };