@financedistrict/apps-ui 0.1.0

package/dist/property-grid.d.cts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Property-grid CELL frame — the title (left) and content (right) sides of a
+ * property-grid row. Binds ONLY to the semantic `card/*` token layer; theme
+ * switch is automatic via `.dark`. Static (no hover/active/focus) — a
+ * property-grid row is read-only display.
+ *
+ * `variant` distinguishes the two sides:
+ * - `title`   — muted text, left-aligned.
+ * - `content` — foreground text, right-aligned.
+ */
+declare const propertyGridCellVariants: (props?: ({
+    variant?: "title" | "content" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PropertyGridCellVariantsProps = VariantProps<typeof propertyGridCellVariants>;
+/**
+ * Property-grid ITEM (row) frame — a two-column grid (title | content). Owns the
+ * bottom divider; `last` (the last row in a grid) omits it. Stacked items align
+ * columns automatically (each column is 1fr).
+ */
+declare const propertyGridItemVariants: (props?: ({
+    last?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PropertyGridItemVariantsProps = VariantProps<typeof propertyGridItemVariants>;
+
+interface PropertyGridItemProps extends React.ComponentProps<"div">, PropertyGridItemVariantsProps {
+}
+/**
+ * A property-grid row: a two-column grid holding one <PropertyGridTitle> (left)
+ * and one <PropertyGridContent> (right) as children. Owns the bottom divider;
+ * `last` (the last row in a grid) omits it. Stacked items align columns
+ * automatically (each is `grid-cols-2` at 1fr/1fr).
+ */
+declare function PropertyGridItem({ className, last, children, ref, ...props }: PropertyGridItemProps): React.JSX.Element;
+
+interface PropertyGridCellProps extends React.ComponentProps<"div"> {
+    /** Which side of the row — sets tone (muted/foreground) + alignment. */
+    variant: "title" | "content";
+    /** Leading slot (e.g. a muted icon). Hidden when omitted. */
+    leading?: React.ReactNode;
+    /** Trailing slot (e.g. a copy icon). Hidden when omitted. */
+    trailing?: React.ReactNode;
+}
+
+type PropertyGridTitleProps = Omit<PropertyGridCellProps, "variant">;
+/** The title (left) cell of a property-grid row — muted, left-aligned. */
+declare function PropertyGridTitle(props: PropertyGridTitleProps): React.JSX.Element;
+
+type PropertyGridContentProps = Omit<PropertyGridCellProps, "variant">;
+/** The content (right) cell of a property-grid row — foreground, right-aligned. */
+declare function PropertyGridContent(props: PropertyGridContentProps): React.JSX.Element;
+
+export { type PropertyGridCellVariantsProps, PropertyGridContent, type PropertyGridContentProps, PropertyGridItem, type PropertyGridItemProps, type PropertyGridItemVariantsProps, PropertyGridTitle, type PropertyGridTitleProps, propertyGridCellVariants, propertyGridItemVariants };

package/dist/property-grid.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Property-grid CELL frame — the title (left) and content (right) sides of a
+ * property-grid row. Binds ONLY to the semantic `card/*` token layer; theme
+ * switch is automatic via `.dark`. Static (no hover/active/focus) — a
+ * property-grid row is read-only display.
+ *
+ * `variant` distinguishes the two sides:
+ * - `title`   — muted text, left-aligned.
+ * - `content` — foreground text, right-aligned.
+ */
+declare const propertyGridCellVariants: (props?: ({
+    variant?: "title" | "content" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PropertyGridCellVariantsProps = VariantProps<typeof propertyGridCellVariants>;
+/**
+ * Property-grid ITEM (row) frame — a two-column grid (title | content). Owns the
+ * bottom divider; `last` (the last row in a grid) omits it. Stacked items align
+ * columns automatically (each column is 1fr).
+ */
+declare const propertyGridItemVariants: (props?: ({
+    last?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type PropertyGridItemVariantsProps = VariantProps<typeof propertyGridItemVariants>;
+
+interface PropertyGridItemProps extends React.ComponentProps<"div">, PropertyGridItemVariantsProps {
+}
+/**
+ * A property-grid row: a two-column grid holding one <PropertyGridTitle> (left)
+ * and one <PropertyGridContent> (right) as children. Owns the bottom divider;
+ * `last` (the last row in a grid) omits it. Stacked items align columns
+ * automatically (each is `grid-cols-2` at 1fr/1fr).
+ */
+declare function PropertyGridItem({ className, last, children, ref, ...props }: PropertyGridItemProps): React.JSX.Element;
+
+interface PropertyGridCellProps extends React.ComponentProps<"div"> {
+    /** Which side of the row — sets tone (muted/foreground) + alignment. */
+    variant: "title" | "content";
+    /** Leading slot (e.g. a muted icon). Hidden when omitted. */
+    leading?: React.ReactNode;
+    /** Trailing slot (e.g. a copy icon). Hidden when omitted. */
+    trailing?: React.ReactNode;
+}
+
+type PropertyGridTitleProps = Omit<PropertyGridCellProps, "variant">;
+/** The title (left) cell of a property-grid row — muted, left-aligned. */
+declare function PropertyGridTitle(props: PropertyGridTitleProps): React.JSX.Element;
+
+type PropertyGridContentProps = Omit<PropertyGridCellProps, "variant">;
+/** The content (right) cell of a property-grid row — foreground, right-aligned. */
+declare function PropertyGridContent(props: PropertyGridContentProps): React.JSX.Element;
+
+export { type PropertyGridCellVariantsProps, PropertyGridContent, type PropertyGridContentProps, PropertyGridItem, type PropertyGridItemProps, type PropertyGridItemVariantsProps, PropertyGridTitle, type PropertyGridTitleProps, propertyGridCellVariants, propertyGridItemVariants };

package/dist/property-grid.js

@@ -0,0 +1,2 @@
+export { PropertyGridContent, PropertyGridItem, PropertyGridTitle, propertyGridCellVariants, propertyGridItemVariants } from './chunk-TT6JQATV.js';
+import './chunk-7EOSDFS3.js';

package/dist/radio.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+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');
+
+// src/radio/Radio.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var radioVariants = classVarianceAuthority.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__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-flex shrink-0", wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "radio",
+        "data-slot": "radio",
+        className: cn(radioVariants(), className),
+        ...props,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.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"
+        )
+      }
+    )
+  ] });
+}
+
+exports.Radio = Radio;
+exports.radioVariants = radioVariants;

package/dist/radio.d.cts

@@ -0,0 +1,39 @@
+export { R as Radio, a as RadioProps } from './Radio-BYWz1n7p.cjs';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import 'react';
+
+/**
+ * Radio styling — mirrors the Figma `radio-control` component set
+ * (node 5117:5677: `state` × `selected`, one 20×20 size) and binds ONLY to the
+ * semantic token layer (never primitives). Theme switching is automatic via
+ * the `.dark` class, so no `dark:` variants are needed.
+ *
+ * As with Checkbox (ADR-0010), every Figma axis here is an *interaction*
+ * state, so there is no prop-driven variant table: `selected` maps to the
+ * native `:checked` pseudo-class and `state` maps to `:hover` /
+ * `:focus-visible` / `:disabled`.
+ *
+ * State → token map (from the Figma variants):
+ * - default:                 `bg-background` + `border-border`
+ * - hover (unselected):      border strengthens to `border-accent`
+ * - focused:                 border stays at the default; the ring alone marks focus
+ * - selected:                `bg-brand-primary-background` + `border-brand-primary-border`
+ * - selected hover/focused:  bg strengthens to `brand-primary-accent`
+ * - disabled (either):       shared neutral look — `bg-background` + `border-border-muted`
+ * - focused additionally draws the shared 2px `--focus` ring, offset 2px from
+ *   the circle — the ADR-0010 system standard (the Figma node draws its ring
+ *   flush at inset −2px; component nodes do not override the system ring).
+ *   The CSS outline follows `rounded-full`, so the ring is circular.
+ *
+ * Checked × hover/focus/disabled combinations are written as compound
+ * utilities (`checked:hover:`, `checked:disabled:`) so precedence is decided
+ * by selector specificity, not by Tailwind's stylesheet ordering.
+ *
+ * The ● indicator is a sibling of the input (an `<input>` can't have
+ * children), revealed via `peer-checked:` in <Radio>.
+ */
+declare const radioVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type RadioVariantsProps = VariantProps<typeof radioVariants>;
+
+export { type RadioVariantsProps, radioVariants };

package/dist/radio.d.ts

@@ -0,0 +1,39 @@
+export { R as Radio, a as RadioProps } from './Radio-BYWz1n7p.js';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import 'react';
+
+/**
+ * Radio styling — mirrors the Figma `radio-control` component set
+ * (node 5117:5677: `state` × `selected`, one 20×20 size) and binds ONLY to the
+ * semantic token layer (never primitives). Theme switching is automatic via
+ * the `.dark` class, so no `dark:` variants are needed.
+ *
+ * As with Checkbox (ADR-0010), every Figma axis here is an *interaction*
+ * state, so there is no prop-driven variant table: `selected` maps to the
+ * native `:checked` pseudo-class and `state` maps to `:hover` /
+ * `:focus-visible` / `:disabled`.
+ *
+ * State → token map (from the Figma variants):
+ * - default:                 `bg-background` + `border-border`
+ * - hover (unselected):      border strengthens to `border-accent`
+ * - focused:                 border stays at the default; the ring alone marks focus
+ * - selected:                `bg-brand-primary-background` + `border-brand-primary-border`
+ * - selected hover/focused:  bg strengthens to `brand-primary-accent`
+ * - disabled (either):       shared neutral look — `bg-background` + `border-border-muted`
+ * - focused additionally draws the shared 2px `--focus` ring, offset 2px from
+ *   the circle — the ADR-0010 system standard (the Figma node draws its ring
+ *   flush at inset −2px; component nodes do not override the system ring).
+ *   The CSS outline follows `rounded-full`, so the ring is circular.
+ *
+ * Checked × hover/focus/disabled combinations are written as compound
+ * utilities (`checked:hover:`, `checked:disabled:`) so precedence is decided
+ * by selector specificity, not by Tailwind's stylesheet ordering.
+ *
+ * The ● indicator is a sibling of the input (an `<input>` can't have
+ * children), revealed via `peer-checked:` in <Radio>.
+ */
+declare const radioVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type RadioVariantsProps = VariantProps<typeof radioVariants>;
+
+export { type RadioVariantsProps, radioVariants };

package/dist/radio.js

@@ -0,0 +1,2 @@
+export { Radio, radioVariants } from './chunk-UPQ3ZPCO.js';
+import './chunk-7EOSDFS3.js';

package/dist/scrollbar.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+
+// src/lib/scrollbar.ts
+var scrollbarVariants = classVarianceAuthority.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 }
+  }
+);
+
+exports.scrollbarVariants = scrollbarVariants;

package/dist/scrollbar.d.cts

@@ -0,0 +1,35 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Custom scrollbar styling — the Figma `scroll-bar` component (node 538:18165):
+ * a **4px pill thumb** (`card-foreground-muted`, `rounded-full`) in a **12px
+ * gutter**, with an optional **1px leading track stroke** (`card-border`).
+ *
+ * Apply to the SCROLLABLE element itself (the one carrying `overflow-*-auto`),
+ * not a rendered child — the browser owns the scrollbar. Compose with `cn`:
+ *
+ * ```ts
+ * className={cn("overflow-y-auto", scrollbarVariants())}
+ * ```
+ *
+ * Arbitrary variants are used deliberately: the WebKit scrollbar pseudo-elements
+ * (`::-webkit-scrollbar*`) and the Firefox `scrollbar-width`/`scrollbar-color`
+ * properties have **no** Tailwind token utilities, so there is no non-arbitrary
+ * way to reach them. Colours still bind to semantic tokens
+ * (`card-foreground-muted` / `card-border`), never raw values.
+ *
+ * Fidelity by engine:
+ * - **WebKit (Chrome/Safari):** near-exact — the 4px thumb is a 4px transparent
+ *   border + `background-clip: content-box` inside the 12px gutter (12 − 4 − 4).
+ * - **Firefox:** approximate — only `scrollbar-width: thin` + a thumb colour are
+ *   supported; there is no exact 4px width and no track stroke. Degrades to a
+ *   thin themed scrollbar. (A JS overlay would be required for pixel parity;
+ *   out of scope — see the scrollbar design decision.)
+ */
+declare const scrollbarVariants: (props?: ({
+    stroke?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ScrollbarVariantsProps = VariantProps<typeof scrollbarVariants>;
+
+export { type ScrollbarVariantsProps, scrollbarVariants };

package/dist/scrollbar.d.ts

@@ -0,0 +1,35 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Custom scrollbar styling — the Figma `scroll-bar` component (node 538:18165):
+ * a **4px pill thumb** (`card-foreground-muted`, `rounded-full`) in a **12px
+ * gutter**, with an optional **1px leading track stroke** (`card-border`).
+ *
+ * Apply to the SCROLLABLE element itself (the one carrying `overflow-*-auto`),
+ * not a rendered child — the browser owns the scrollbar. Compose with `cn`:
+ *
+ * ```ts
+ * className={cn("overflow-y-auto", scrollbarVariants())}
+ * ```
+ *
+ * Arbitrary variants are used deliberately: the WebKit scrollbar pseudo-elements
+ * (`::-webkit-scrollbar*`) and the Firefox `scrollbar-width`/`scrollbar-color`
+ * properties have **no** Tailwind token utilities, so there is no non-arbitrary
+ * way to reach them. Colours still bind to semantic tokens
+ * (`card-foreground-muted` / `card-border`), never raw values.
+ *
+ * Fidelity by engine:
+ * - **WebKit (Chrome/Safari):** near-exact — the 4px thumb is a 4px transparent
+ *   border + `background-clip: content-box` inside the 12px gutter (12 − 4 − 4).
+ * - **Firefox:** approximate — only `scrollbar-width: thin` + a thumb colour are
+ *   supported; there is no exact 4px width and no track stroke. Degrades to a
+ *   thin themed scrollbar. (A JS overlay would be required for pixel parity;
+ *   out of scope — see the scrollbar design decision.)
+ */
+declare const scrollbarVariants: (props?: ({
+    stroke?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ScrollbarVariantsProps = VariantProps<typeof scrollbarVariants>;
+
+export { type ScrollbarVariantsProps, scrollbarVariants };

package/dist/scrollbar.js

@@ -0,0 +1 @@
+export { scrollbarVariants } from './chunk-FAOVKDVM.js';