@financedistrict/apps-ui 0.1.0

package/dist/chunk-SJ2ZRYVV.js

@@ -0,0 +1,167 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tableCellVariants = cva(
+  [
+    // The cell is the group that drives hover/active styling of its descendants.
+    "group",
+    // Layout — 56px row, slots on a horizontal axis; overflow clipped for truncation.
+    "flex h-14 w-full items-center gap-3 overflow-hidden px-2 py-4",
+    // Brand-accent background on hover / keyboard-focus / active (self). Reset
+    // native control chrome so an asChild button/anchor styles cleanly.
+    "appearance-none bg-transparent outline-none transition-colors",
+    "hover:bg-card-brand-accent focus-visible:bg-card-brand-accent data-[state=active]:bg-card-brand-accent"
+  ],
+  {
+    variants: {
+      last: {
+        // Row divider on all but the last row; recolors on hover / focus / active.
+        false: [
+          "border-b border-card-border",
+          "hover:border-card-brand-border-accent focus-visible:border-card-brand-border-accent data-[state=active]:border-card-brand-border-accent"
+        ],
+        true: ""
+      }
+    },
+    defaultVariants: {
+      last: false
+    }
+  }
+);
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TableCell({
+  className,
+  last = false,
+  leading,
+  trailing,
+  active = false,
+  asChild = false,
+  children,
+  ref,
+  ...props
+}) {
+  const rootClassName = cn(tableCellVariants({ last }), className);
+  const dataState = active ? "active" : void 0;
+  const leadingSlot = leading != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-cell-leading",
+      className: "flex shrink-0 items-center",
+      children: leading
+    }
+  ) : null;
+  const trailingSlot = trailing != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-cell-trailing",
+      className: "flex shrink-0 items-center",
+      children: trailing
+    }
+  ) : null;
+  const middleSlot = (middle) => middle != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-cell-middle",
+      className: "flex min-w-0 flex-1 flex-col",
+      children: middle
+    }
+  ) : null;
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      throw new Error(
+        "TableCell: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    return React.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "table-cell",
+        "data-state": dataState,
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        ref: (node) => {
+          setRef(ref, node);
+          setRef(childProps.ref, node);
+        }
+      },
+      leadingSlot,
+      middleSlot(childProps.children),
+      trailingSlot
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "table-cell",
+      "data-state": dataState,
+      className: rootClassName,
+      ref,
+      ...props,
+      children: [
+        leadingSlot,
+        middleSlot(children),
+        trailingSlot
+      ]
+    }
+  );
+}
+function CellText({ label, meta, className, ...props }) {
+  const hasMeta = Array.isArray(meta) && meta.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "cell-text",
+      className: cn("flex min-w-0 flex-col gap-0.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "cell-text-label",
+            className: cn(
+              "body-03 min-w-0 truncate",
+              "text-card-foreground",
+              "group-hover:text-card-brand-foreground group-focus-visible:text-card-brand-foreground group-data-[state=active]:text-card-brand-foreground"
+            ),
+            children: label
+          }
+        ),
+        hasMeta && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "cell-text-meta",
+            className: cn(
+              "flex min-w-0 items-center gap-1",
+              "body-mono-04",
+              "text-card-foreground-muted",
+              "group-hover:text-card-brand-foreground-muted group-focus-visible:text-card-brand-foreground-muted group-data-[state=active]:text-card-brand-foreground-muted"
+            ),
+            children: meta.map((segment, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "size-0.5 shrink-0 rounded-full bg-current"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: segment })
+            ] }, index))
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CellText, TableCell, tableCellVariants };

package/dist/chunk-SNU4YXOR.js

@@ -0,0 +1,66 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import { CheckIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var checkboxVariants = cva([
+  // Box — 20×20 (`size-5`), 2px radius (Figma `radius/xs`), 1px border.
+  // `peer` lets the sibling indicator react to :checked / :disabled.
+  "peer size-5 shrink-0 appearance-none rounded-xs border",
+  "cursor-pointer transition-colors",
+  // Default
+  "bg-background border-border",
+  // Hover (unselected) — focus keeps the DEFAULT border; only the ring signals
+  // focus (so focus doesn't visually read as hover).
+  "hover:border-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way ghost Button does: 2px stroke, 2px offset (`outline-solid`
+  // restores what `outline-none` zeroed).
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // Selected
+  "checked:bg-brand-primary-background checked:border-brand-primary-border",
+  "checked:hover:bg-brand-primary-accent checked:hover:border-brand-primary-border",
+  "checked:focus-visible:bg-brand-primary-accent checked:focus-visible:border-brand-primary-border",
+  // Disabled — shared neutral-muted look whether selected or not (per Figma)
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-muted",
+  "checked:disabled:bg-background checked:disabled:border-border-muted"
+]);
+function Checkbox({
+  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", wrapperClassName), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        "data-slot": "checkbox",
+        className: cn(checkboxVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CheckIcon,
+      {
+        "aria-hidden": "true",
+        weight: "regular",
+        "data-slot": "checkbox-indicator",
+        className: cn(
+          "pointer-events-none invisible absolute inset-0 m-auto size-4",
+          "text-brand-primary-foreground",
+          "peer-checked:visible peer-disabled:text-foreground-muted"
+        )
+      }
+    )
+  ] });
+}
+
+export { Checkbox, checkboxVariants };

package/dist/chunk-TT6JQATV.js

@@ -0,0 +1,99 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var propertyGridCellVariants = cva(
+  [
+    // Layout — 40px row, single line, slots on a horizontal axis.
+    "flex h-10 min-w-0 items-center gap-1 py-3",
+    // Type — Archivo 14/20.
+    "body-03"
+  ],
+  {
+    variants: {
+      variant: {
+        title: "justify-start text-card-foreground-muted",
+        content: "justify-end text-card-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "title"
+    }
+  }
+);
+var propertyGridItemVariants = cva(["grid grid-cols-2"], {
+  variants: {
+    last: {
+      false: "border-b border-card-border",
+      true: ""
+    }
+  },
+  defaultVariants: {
+    last: false
+  }
+});
+function PropertyGridItem({
+  className,
+  last = false,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "property-grid-item",
+      className: cn(propertyGridItemVariants({ last }), className),
+      ref,
+      ...props,
+      children
+    }
+  );
+}
+function PropertyGridCell({
+  variant,
+  className,
+  leading,
+  trailing,
+  children,
+  ref,
+  ...props
+}) {
+  const slotClass = "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-4";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": `property-grid-${variant}`,
+      className: cn(propertyGridCellVariants({ variant }), className),
+      ref,
+      ...props,
+      children: [
+        leading != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": `property-grid-${variant}-leading`,
+            className: slotClass,
+            children: leading
+          }
+        ),
+        children != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+        trailing != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": `property-grid-${variant}-trailing`,
+            className: slotClass,
+            children: trailing
+          }
+        )
+      ]
+    }
+  );
+}
+function PropertyGridTitle(props) {
+  return /* @__PURE__ */ jsx(PropertyGridCell, { variant: "title", ...props });
+}
+function PropertyGridContent(props) {
+  return /* @__PURE__ */ jsx(PropertyGridCell, { variant: "content", ...props });
+}
+
+export { PropertyGridContent, PropertyGridItem, PropertyGridTitle, propertyGridCellVariants, propertyGridItemVariants };

package/dist/chunk-UPQ3ZPCO.js

@@ -0,0 +1,66 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import { CircleIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var radioVariants = cva([
+  // Circle — 20×20 (`size-5`), fully round (Figma `radius/full`), 1px border.
+  // `peer` lets the sibling indicator react to :checked / :disabled.
+  "peer size-5 shrink-0 appearance-none rounded-full border",
+  "cursor-pointer transition-colors",
+  // Default
+  "bg-background border-border",
+  // Hover (unselected) — focus keeps the DEFAULT border; only the ring signals
+  // focus (so focus doesn't visually read as hover).
+  "hover:border-border-accent",
+  // Focus ring — suppress the native ring, draw the shared `--focus` ring the
+  // same way Checkbox and ghost Button do: 2px stroke, 2px offset
+  // (`outline-solid` restores what `outline-none` zeroed).
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus",
+  // Selected
+  "checked:bg-brand-primary-background checked:border-brand-primary-border",
+  "checked:hover:bg-brand-primary-accent checked:hover:border-brand-primary-border",
+  "checked:focus-visible:bg-brand-primary-accent checked:focus-visible:border-brand-primary-border",
+  // Disabled — shared neutral-muted look whether selected or not (per Figma)
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-muted",
+  "checked:disabled:bg-background checked:disabled:border-border-muted"
+]);
+function Radio({
+  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", wrapperClassName), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        "data-slot": "radio",
+        className: cn(radioVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CircleIcon,
+      {
+        "aria-hidden": "true",
+        weight: "fill",
+        "data-slot": "radio-indicator",
+        className: cn(
+          "pointer-events-none invisible absolute inset-0 m-auto size-3",
+          "text-brand-primary-foreground",
+          "peer-checked:visible peer-disabled:text-foreground-muted"
+        )
+      }
+    )
+  ] });
+}
+
+export { Radio, radioVariants };

package/dist/chunk-UVUSVFOH.js

@@ -0,0 +1,264 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var tabsRootVariants = cva(["flex flex-col"]);
+var tabsListVariants = cva(["inline-flex items-center"]);
+var tabsTriggerVariants = cva(
+  [
+    "group inline-flex cursor-pointer items-center justify-center gap-1 px-2 py-2.5",
+    "body-03-medium border-b-2 transition-colors",
+    "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "border-card-brand-border-accent text-foreground-accent",
+        false: "border-transparent text-foreground"
+      },
+      disabled: {
+        true: "text-foreground-muted",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Unselected + enabled: faint underline on hover, purple text+underline
+      // while pressed (Figma hover / active states).
+      {
+        selected: false,
+        disabled: false,
+        className: "hover:border-card-brand-border active:border-card-brand-border-accent active:text-foreground-accent"
+      },
+      // Selected + disabled: the underline drops from accent to the faint token
+      // (Figma disabled-selected). Wins over the accent border from
+      // `selected:true` because compound variants are appended last.
+      {
+        selected: true,
+        disabled: true,
+        className: "border-card-brand-border"
+      }
+    ],
+    defaultVariants: {
+      selected: false,
+      disabled: false
+    }
+  }
+);
+var tabsContentVariants = cva([
+  "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var TabsContext = React.createContext(null);
+function useTabsContext(part) {
+  const context = React.useContext(TabsContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Tabs.Root>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TabsRoot({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const value = isControlled ? valueProp : uncontrolledValue;
+  const select = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const baseId = React.useId();
+  const getTriggerId = (tabValue) => `${baseId}-tab-${tabValue}`;
+  const getPanelId = (tabValue) => `${baseId}-panel-${tabValue}`;
+  const [triggers, setTriggers] = React.useState([]);
+  const registerTrigger = React.useCallback((registration) => {
+    setTriggers((prev) => {
+      const existing = prev.findIndex((t) => t.value === registration.value);
+      if (existing === -1) return [...prev, registration];
+      const next = [...prev];
+      next[existing] = registration;
+      return next;
+    });
+  }, []);
+  const unregisterTrigger = React.useCallback((tabValue) => {
+    setTriggers((prev) => prev.filter((t) => t.value !== tabValue));
+  }, []);
+  const domOrdered = [...triggers].sort(
+    (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  );
+  const firstEnabled = domOrdered.find((t) => !t.disabled)?.value;
+  const tabStopValue = value ?? firstEnabled;
+  const onTriggerKeyDown = (event) => {
+    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
+    const enabled = domOrdered.filter((t) => !t.disabled);
+    if (enabled.length === 0) return;
+    const currentIndex = enabled.findIndex(
+      (t) => t.node === event.currentTarget
+    );
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % enabled.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = enabled.length - 1;
+        break;
+    }
+    const target = enabled[nextIndex];
+    if (!target) return;
+    target.node.focus();
+    select(target.value);
+  };
+  const contextValue = {
+    value,
+    select,
+    tabStopValue,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown,
+    getTriggerId,
+    getPanelId
+  };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "tabs",
+      className: cn(tabsRootVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function TabsList({ className, children, ref, ...props }) {
+  useTabsContext("Tabs.List");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tablist",
+      "data-slot": "tabs-list",
+      className: cn(tabsListVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value,
+  disabled = false,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const {
+    value: selectedValue,
+    select,
+    tabStopValue,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown,
+    getTriggerId,
+    getPanelId
+  } = useTabsContext("Tabs.Trigger");
+  const selected = value === selectedValue;
+  const triggerId = getTriggerId(value);
+  const panelId = getPanelId(value);
+  const buttonRef = React.useRef(null);
+  const setButtonRef = (node) => {
+    buttonRef.current = node;
+    setRef(ref, node);
+  };
+  React.useEffect(() => {
+    const node = buttonRef.current;
+    if (!node) return;
+    registerTrigger({ value, disabled, node });
+    return () => unregisterTrigger(value);
+  }, [registerTrigger, unregisterTrigger, value, disabled]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref: setButtonRef,
+      type: "button",
+      role: "tab",
+      id: triggerId,
+      "data-slot": "tabs-trigger",
+      "data-state": selected ? "active" : "inactive",
+      "data-disabled": disabled || void 0,
+      "aria-selected": selected,
+      "aria-controls": selected ? panelId : void 0,
+      tabIndex: value === tabStopValue ? 0 : -1,
+      disabled,
+      className: cn(tabsTriggerVariants({ selected, disabled }), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) select(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) onTriggerKeyDown(event);
+      },
+      children
+    }
+  );
+}
+function TabsContent({
+  value,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const {
+    value: selectedValue,
+    getTriggerId,
+    getPanelId
+  } = useTabsContext("Tabs.Content");
+  if (value !== selectedValue) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      id: getPanelId(value),
+      "aria-labelledby": getTriggerId(value),
+      "data-slot": "tabs-content",
+      "data-state": "active",
+      tabIndex: 0,
+      className: cn(tabsContentVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+};
+
+export { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, tabsContentVariants, tabsListVariants, tabsRootVariants, tabsTriggerVariants };