@financedistrict/apps-ui 0.1.0

package/dist/chunk-Y2O4YYZQ.js

@@ -0,0 +1,184 @@
+import { useSelectListbox, SelectListbox } from './chunk-5TWRK4NW.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { CaretDownIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var inlineSelectVariants = cva(
+  [
+    // Inline text run: label + caret, 4px gap (Figma spacing/1), baseline-ish
+    // centered. `w-fit` so the ring hugs the content, not a full-width box.
+    "inline-flex w-fit items-center gap-1",
+    // Behaves as inline text — no field padding/background/border.
+    "cursor-pointer bg-transparent p-0 text-left align-middle",
+    "transition-colors",
+    // System focus ring (ADR-0010): momentary-control treatment, not a border
+    // recolor. Kill the default outline, then draw the 2px --focus ring with a
+    // 2px gap on :focus-visible only. `rounded-xs` matches the Figma ring.
+    "rounded-xs outline-none",
+    "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    // Decorative svgs (caret / leading slot) never intercept the click and keep
+    // their explicit sizes.
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variation: {
+        primary: "",
+        secondary: ""
+      },
+      disabled: {
+        // Muted + not-allowed, and the focus ring is suppressed (a disabled
+        // control is not focusable, but belt-and-braces if a consumer forces it).
+        true: "cursor-not-allowed focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variation: "primary",
+      disabled: false
+    }
+  }
+);
+function InlineSelectTrigger({
+  variation = "primary",
+  disabled = false,
+  displayText,
+  isPlaceholder,
+  open = false,
+  leadingSlot,
+  className,
+  ref,
+  ...props
+}) {
+  const valueColor = variation === "secondary" ? "text-card-brand-secondary-foreground" : "text-card-primary-foreground";
+  const mutedColor = variation === "secondary" ? "text-card-brand-secondary-foreground-muted" : "text-card-primary-foreground-muted";
+  const labelColor = disabled || isPlaceholder ? mutedColor : valueColor;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ref,
+      role: "combobox",
+      "data-slot": "inline-select-trigger",
+      "data-variation": variation,
+      disabled,
+      className: cn(inlineSelectVariants({ variation, disabled }), className),
+      ...props,
+      children: [
+        leadingSlot != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "inline-select-leading",
+            "aria-hidden": "true",
+            className: cn(
+              "flex items-center [&_svg:not([class*='size-'])]:size-4",
+              // The leading slot follows the caret/muted colour unless a real
+              // value is shown, then it follows the value colour (like the label).
+              labelColor
+            ),
+            children: leadingSlot
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "inline-select-value",
+            className: cn("body-03 truncate", labelColor),
+            children: displayText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "inline-select-caret",
+            "aria-hidden": "true",
+            className: "flex items-center",
+            children: /* @__PURE__ */ jsx(
+              CaretDownIcon,
+              {
+                weight: "fill",
+                className: cn(
+                  "size-3 transition-transform",
+                  // Caret uses the muted variation colour (Figma resting state).
+                  mutedColor,
+                  open && "rotate-180"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function InlineSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  variation = "primary",
+  placeholder = "Select",
+  leadingSlot,
+  disabled,
+  name,
+  id: idProp,
+  className,
+  ref,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const id = idProp ?? generatedId;
+  const {
+    selected,
+    open,
+    setTriggerRef,
+    triggerProps,
+    listboxProps,
+    text,
+    isPlaceholder
+  } = useSelectListbox({
+    options,
+    // Normalize the single-select public value to the hook's array form.
+    value: valueProp,
+    defaultValue,
+    // The hook emits `string | string[]`; in single mode it is always a
+    // `string`, so narrow before handing it to the public single callback.
+    onValueChange: onValueChange ? (next) => onValueChange(Array.isArray(next) ? next[0] ?? "" : next) : void 0,
+    multiple: false,
+    disabled,
+    id,
+    ref,
+    placeholder
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InlineSelectTrigger,
+      {
+        ref: setTriggerRef,
+        id,
+        variation,
+        open,
+        displayText: text,
+        isPlaceholder,
+        leadingSlot,
+        disabled,
+        className,
+        ...triggerProps,
+        ...props
+      }
+    ),
+    name != null && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected[0] ?? "" }),
+    open && /* @__PURE__ */ jsx(
+      SelectListbox,
+      {
+        ...listboxProps,
+        widthMode: "auto",
+        "aria-label": props["aria-label"]
+      }
+    )
+  ] });
+}
+
+export { InlineSelect, InlineSelectTrigger, inlineSelectVariants };

package/dist/cut-corner.cjs

@@ -0,0 +1,111 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function buildCutPath({
+  W,
+  H,
+  cut,
+  rTR,
+  rBL,
+  rCut,
+  ox = 0,
+  oy = 0
+}) {
+  const rCutSq = rCut / Math.SQRT2;
+  const x = (v) => v + ox;
+  const y = (v) => v + oy;
+  return [
+    `M ${x(cut + rCut)} ${y(0)}`,
+    `L ${x(W - rTR)} ${y(0)}`,
+    `Q ${x(W)} ${y(0)} ${x(W)} ${y(rTR)}`,
+    `L ${x(W)} ${y(H - cut - rCut)}`,
+    `Q ${x(W)} ${y(H - cut)} ${x(W - rCutSq)} ${y(H - cut + rCutSq)}`,
+    `L ${x(W - cut + rCutSq)} ${y(H - rCutSq)}`,
+    `Q ${x(W - cut)} ${y(H)} ${x(W - cut - rCut)} ${y(H)}`,
+    `L ${x(rBL)} ${y(H)}`,
+    `Q ${x(0)} ${y(H)} ${x(0)} ${y(H - rBL)}`,
+    `L ${x(0)} ${y(cut + rCut)}`,
+    `Q ${x(0)} ${y(cut)} ${x(rCutSq)} ${y(cut - rCutSq)}`,
+    `L ${x(cut - rCutSq)} ${y(rCutSq)}`,
+    `Q ${x(cut)} ${y(0)} ${x(cut + rCut)} ${y(0)}`,
+    `Z`
+  ].join(" ");
+}
+function useCutCornerClipPath(cut, {
+  radius = 2,
+  radiusCuts,
+  radiusTopRight,
+  radiusBottomLeft,
+  outset
+} = {}) {
+  const ref = React__namespace.useRef(null);
+  const [clipPath, setClipPath] = React__namespace.useState();
+  const [pathD, setPathD] = React__namespace.useState();
+  const [outsetPathD, setOutsetPathD] = React__namespace.useState();
+  React__namespace.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rTR = radiusTopRight ?? radius;
+    const rBL = radiusBottomLeft ?? radius;
+    const rCut = radiusCuts ?? radius;
+    function compute(W, H) {
+      const d = buildCutPath({ W, H, cut, rTR, rBL, rCut });
+      setClipPath(`path('${d}')`);
+      setPathD(d);
+      if (outset != null) {
+        const g = outset;
+        setOutsetPathD(
+          buildCutPath({
+            W: W + 2 * g,
+            H: H + 2 * g,
+            cut: cut + (2 - Math.SQRT2) * g,
+            rTR: rTR + g,
+            rBL: rBL + g,
+            rCut: rCut + g,
+            ox: -g,
+            oy: -g
+          })
+        );
+      }
+    }
+    const initial = el.getBoundingClientRect();
+    compute(initial.width, initial.height);
+    const ro = new ResizeObserver((entries) => {
+      const box = entries[entries.length - 1]?.borderBoxSize?.[0];
+      if (box) {
+        compute(box.inlineSize, box.blockSize);
+      } else {
+        const rect = el.getBoundingClientRect();
+        compute(rect.width, rect.height);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [cut, radius, radiusCuts, radiusTopRight, radiusBottomLeft, outset]);
+  return { ref, clipPath, pathD, outsetPathD };
+}
+var BUTTON_CUT = { cut: 8, radius: 2, radiusCuts: 0 };
+
+exports.BUTTON_CUT = BUTTON_CUT;
+exports.useCutCornerClipPath = useCutCornerClipPath;

package/dist/cut-corner.d.cts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+/**
+ * Cut-corner geometry — ported from the FD marketing site (`fd-website`
+ * `useCutCornerClipPath`). Two diagonally-opposite corners (top-left and
+ * bottom-right) are chamfered; the other two are rounded 90° corners.
+ *
+ * The chamfer size and arc radii feed SVG path math, so the shape can't be
+ * expressed with CSS `border-radius` / `clip-path: polygon()` alone — the path
+ * depends on the measured pixel width/height. We therefore measure the element
+ * and recompute on resize.
+ *
+ * FD apps use SHARPER edges than the marketing site: the default arc radius is
+ * `2px` (Figma `radius/xs`) on every vertex, versus the site's softer `6/8px`.
+ */
+interface UseCutCornerClipPathOptions {
+    /** Border-radius (px) applied to every vertex unless overridden below. */
+    radius?: number;
+    /** Radius override for the two diagonal chamfer arcs. */
+    radiusCuts?: number;
+    /** Radius override for the top-right 90° corner. */
+    radiusTopRight?: number;
+    /** Radius override for the bottom-left 90° corner. */
+    radiusBottomLeft?: number;
+    /**
+     * If set, also emit `outsetPathD` — the same shape expanded uniformly outward
+     * by this many px. Used to draw a focus ring that follows the cut-corner
+     * outline instead of a plain rounded rectangle.
+     */
+    outset?: number;
+}
+declare function useCutCornerClipPath<T extends HTMLElement = HTMLElement>(cut: number, { radius, radiusCuts, radiusTopRight, radiusBottomLeft, outset, }?: UseCutCornerClipPathOptions): {
+    ref: React.RefObject<T | null>;
+    clipPath: string | undefined;
+    pathD: string | undefined;
+    outsetPathD: string | undefined;
+};
+/**
+ * Fixed cut-corner preset for buttons (Figma `01. Buttons` → `cut-8px`):
+ * an 8px chamfer. The two diagonal cuts are sharp (`radiusCuts: 0`); the two
+ * square corners keep a subtle 2px arc. Same value for `sm` and `lg`.
+ */
+declare const BUTTON_CUT: {
+    readonly cut: 8;
+    readonly radius: 2;
+    readonly radiusCuts: 0;
+};
+
+export { BUTTON_CUT, type UseCutCornerClipPathOptions, useCutCornerClipPath };

package/dist/cut-corner.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+/**
+ * Cut-corner geometry — ported from the FD marketing site (`fd-website`
+ * `useCutCornerClipPath`). Two diagonally-opposite corners (top-left and
+ * bottom-right) are chamfered; the other two are rounded 90° corners.
+ *
+ * The chamfer size and arc radii feed SVG path math, so the shape can't be
+ * expressed with CSS `border-radius` / `clip-path: polygon()` alone — the path
+ * depends on the measured pixel width/height. We therefore measure the element
+ * and recompute on resize.
+ *
+ * FD apps use SHARPER edges than the marketing site: the default arc radius is
+ * `2px` (Figma `radius/xs`) on every vertex, versus the site's softer `6/8px`.
+ */
+interface UseCutCornerClipPathOptions {
+    /** Border-radius (px) applied to every vertex unless overridden below. */
+    radius?: number;
+    /** Radius override for the two diagonal chamfer arcs. */
+    radiusCuts?: number;
+    /** Radius override for the top-right 90° corner. */
+    radiusTopRight?: number;
+    /** Radius override for the bottom-left 90° corner. */
+    radiusBottomLeft?: number;
+    /**
+     * If set, also emit `outsetPathD` — the same shape expanded uniformly outward
+     * by this many px. Used to draw a focus ring that follows the cut-corner
+     * outline instead of a plain rounded rectangle.
+     */
+    outset?: number;
+}
+declare function useCutCornerClipPath<T extends HTMLElement = HTMLElement>(cut: number, { radius, radiusCuts, radiusTopRight, radiusBottomLeft, outset, }?: UseCutCornerClipPathOptions): {
+    ref: React.RefObject<T | null>;
+    clipPath: string | undefined;
+    pathD: string | undefined;
+    outsetPathD: string | undefined;
+};
+/**
+ * Fixed cut-corner preset for buttons (Figma `01. Buttons` → `cut-8px`):
+ * an 8px chamfer. The two diagonal cuts are sharp (`radiusCuts: 0`); the two
+ * square corners keep a subtle 2px arc. Same value for `sm` and `lg`.
+ */
+declare const BUTTON_CUT: {
+    readonly cut: 8;
+    readonly radius: 2;
+    readonly radiusCuts: 0;
+};
+
+export { BUTTON_CUT, type UseCutCornerClipPathOptions, useCutCornerClipPath };

package/dist/cut-corner.js

@@ -0,0 +1 @@
+export { BUTTON_CUT, useCutCornerClipPath } from './chunk-JIXW3455.js';