@financedistrict/apps-ui 0.1.0

package/dist/chunk-WJFPGGJB.js

@@ -0,0 +1,255 @@
+import { useCutCornerClipPath, BUTTON_CUT } from './chunk-JIXW3455.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { CircleNotchIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var buttonVariants = cva(
+  [
+    // Layout
+    "inline-flex shrink-0 items-center justify-center gap-1",
+    // Type — the Figma `button-01` text style (Archivo Medium 14/20)
+    "button-01",
+    // Shape — cut corners are applied as a clip-path in <Button>; keep the box square
+    "rounded-none",
+    // Transition
+    "transition-colors cursor-pointer",
+    // Suppress the native ring. The Figma focus ring is drawn OUTSIDE the
+    // clip-path (which would swallow an outline here), so cut-corner variants
+    // render it on the wrapper in <Button>; ghost renders it directly (below).
+    "outline-none",
+    // Disabled
+    "disabled:pointer-events-none disabled:cursor-not-allowed",
+    // Icons
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variation: {
+        primary: [
+          "bg-button-primary-background text-button-primary-foreground",
+          "hover:bg-button-primary-accent active:bg-button-primary-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        brand: [
+          "bg-button-brand-primary-background text-button-brand-primary-foreground",
+          "hover:bg-button-brand-primary-accent active:bg-button-brand-primary-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        destructive: [
+          "bg-button-destructive-background text-button-destructive-primary-foreground",
+          "hover:bg-button-destructive-accent active:bg-button-destructive-accent",
+          "disabled:bg-button-primary-muted disabled:text-button-primary-foreground-muted"
+        ],
+        // Outline — background fill + an SVG stroke border drawn in <Button>.
+        secondary: [
+          "bg-button-secondary-background text-button-secondary-foreground",
+          "hover:text-button-secondary-foreground-accent active:text-button-secondary-foreground-accent",
+          "disabled:text-button-secondary-foreground-muted"
+        ],
+        // No background, no cut corner — so no wrapper; ring on the element.
+        // `outline-solid` restores the style that base `outline-none` zeroed.
+        ghost: [
+          "bg-transparent text-button-secondary-foreground",
+          "hover:text-button-secondary-foreground-accent active:text-button-secondary-foreground-accent",
+          "disabled:text-button-secondary-foreground-muted",
+          // `rounded-xs` (2px) keeps the ghost focus ring as sharp as the other
+          // variants' corners (which now use sharp chamfers + 2px square corners).
+          "rounded-xs focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+        ]
+      },
+      size: {
+        sm: "h-8 px-2.5 [&_svg:not([class*='size-'])]:size-4",
+        md: "h-10 px-2.5 [&_svg:not([class*='size-'])]:size-4",
+        lg: "h-12 px-3 [&_svg:not([class*='size-'])]:size-4"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Icon-only: square footprint, no horizontal padding.
+      { iconOnly: true, size: "sm", className: "w-8 px-0" },
+      { iconOnly: true, size: "md", className: "w-10 px-0" },
+      { iconOnly: true, size: "lg", className: "w-12 px-0" },
+      // Ghost has no chamfer/background, so it sits flush with no inset padding.
+      { variation: "ghost", iconOnly: false, className: "px-0" }
+    ],
+    defaultVariants: {
+      variation: "primary",
+      size: "md",
+      iconOnly: false
+    }
+  }
+);
+var FOCUS_RING_GAP = 3;
+var FOCUS_RING_WIDTH = 2;
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function Button({
+  className,
+  variation = "primary",
+  size = "md",
+  iconOnly = false,
+  asChild = false,
+  loading = false,
+  leftSlot,
+  rightSlot,
+  wrapperClassName,
+  disabled,
+  style,
+  children,
+  onClick,
+  ref,
+  ...props
+}) {
+  const {
+    ref: cutRef,
+    clipPath,
+    pathD,
+    outsetPathD
+  } = useCutCornerClipPath(BUTTON_CUT.cut, {
+    radius: BUTTON_CUT.radius,
+    radiusCuts: BUTTON_CUT.radiusCuts,
+    outset: FOCUS_RING_GAP
+  });
+  const setRootRef = React.useCallback(
+    (node) => {
+      cutRef.current = node;
+      setRef(ref, node);
+    },
+    [cutRef, ref]
+  );
+  const isDisabled = disabled;
+  const hasCutCorner = variation !== "ghost";
+  const hasSvgBorder = variation === "secondary";
+  const handleClick = loading ? (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  } : onClick;
+  const rootClassName = cn(
+    buttonVariants({ variation, size, iconOnly }),
+    hasSvgBorder && "border-0",
+    loading && "pointer-events-none",
+    className
+  );
+  const rootStyle = hasCutCorner ? { ...style, clipPath } : style;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx(CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }) : leftSlot,
+    !iconOnly && children,
+    iconOnly && !loading && children,
+    !iconOnly && rightSlot
+  ] });
+  let rootEl;
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      throw new Error(
+        "Button: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childOnClick = childProps.onClick;
+    rootEl = React.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || void 0,
+        // Block activation while loading; otherwise run both handlers.
+        onClick: loading ? (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        } : (event) => {
+          onClick?.(event);
+          childOnClick?.(event);
+        },
+        ref: (node) => {
+          setRootRef(node);
+          setRef(childProps.ref, node);
+        },
+        className: cn(
+          rootClassName,
+          childProps.className
+        ),
+        style: {
+          ...rootStyle,
+          ...childProps.style
+        }
+      },
+      loading ? /* @__PURE__ */ jsx(CircleNotchIcon, { className: "animate-spin", "aria-hidden": "true" }) : null,
+      childProps.children
+    );
+  } else {
+    rootEl = /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-slot": "button",
+        "data-loading": loading || void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": loading || void 0,
+        className: rootClassName,
+        style: rootStyle,
+        disabled: isDisabled,
+        ...props,
+        onClick: handleClick,
+        ref: setRootRef,
+        children: content
+      }
+    );
+  }
+  if (!hasCutCorner) return rootEl;
+  return /* @__PURE__ */ jsxs("span", { className: cn("group relative inline-block", wrapperClassName), children: [
+    rootEl,
+    outsetPathD && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible opacity-0 group-has-[:focus-visible]:opacity-100",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: outsetPathD,
+            fill: "none",
+            strokeWidth: FOCUS_RING_WIDTH,
+            className: "stroke-focus"
+          }
+        )
+      }
+    ),
+    hasSvgBorder && pathD && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: "pointer-events-none absolute inset-0 h-full w-full overflow-visible",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pathD,
+            fill: "none",
+            strokeWidth: 1,
+            className: cn(
+              // Disabled locks the muted stroke; the hover/active accent
+              // classes must not be present at all (a `group-hover:` variant
+              // out-specifies the plain muted class, so it would still
+              // recolor the border on hover of a disabled button).
+              isDisabled ? "stroke-button-secondary-border-muted" : [
+                "stroke-button-secondary-border",
+                "group-hover:stroke-button-secondary-border-accent group-active:stroke-button-secondary-border-accent"
+              ]
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Button, buttonVariants };

package/dist/chunk-WXEBQA7A.js

@@ -0,0 +1,371 @@
+import { scrollbarVariants } from './chunk-FAOVKDVM.js';
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React2 from 'react';
+import { createPortal } from 'react-dom';
+import { IconContext, XIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function getFocusableElements(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  );
+}
+function useFocusTrap({
+  active,
+  containerRef
+}) {
+  React2.useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const previouslyFocused = document.activeElement;
+    const initial = getFocusableElements(container)[0] ?? container;
+    initial.focus();
+    const body = document.body;
+    const previousOverflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    const handleKeyDown = (event) => {
+      if (event.key !== "Tab") return;
+      const focusables = getFocusableElements(container);
+      if (focusables.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const activeEl = document.activeElement;
+      if (event.shiftKey) {
+        if (activeEl === first || !container.contains(activeEl)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (activeEl === last || !container.contains(activeEl)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+      body.style.overflow = previousOverflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [active, containerRef]);
+}
+var dialogOverlayVariants = cva([
+  "fixed inset-0 z-50 flex items-center justify-center p-4",
+  "bg-overlay"
+]);
+var dialogContentVariants = cva([
+  "relative flex w-[438px] max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] flex-col gap-6",
+  "rounded-md border border-border bg-card-background p-6 shadow-s",
+  // Programmatic-focus fallback target (no visible ring when focused as a last
+  // resort by the focus trap — the card is not an interactive control).
+  "outline-none"
+]);
+var dialogHeaderVariants = cva([
+  "flex shrink-0 flex-col items-start gap-4"
+]);
+var dialogHeaderIconVariants = cva([
+  "flex items-center text-foreground [&_svg]:size-8 [&_svg]:shrink-0"
+]);
+var dialogHeaderTextVariants = cva(["flex w-full flex-col gap-2"]);
+var dialogCloseButtonVariants = cva([
+  "absolute right-6 top-6 flex cursor-pointer items-center justify-center rounded-xs",
+  "text-foreground-muted transition-colors hover:text-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  // TW4 needs `outline-solid` to render a solid ring (a bare `outline` won't).
+  "outline-none focus-visible:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var dialogBodyVariants = cva([
+  "min-h-0 flex-1 overflow-y-auto text-foreground"
+]);
+var dialogFooterVariants = cva([
+  "flex w-full shrink-0 gap-2 [&>*]:flex-1 [&_button]:w-full"
+]);
+var DialogContext = React2.createContext(null);
+function useDialogContext(part) {
+  const context = React2.useContext(DialogContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Dialog.Root>`);
+  }
+  return context;
+}
+function DialogRoot({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen);
+  const [hasDescription, setHasDescription] = React2.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const reactId = React2.useId();
+  const titleId = `${reactId}-title`;
+  const descriptionId = `${reactId}-description`;
+  const setOpen = React2.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const value = {
+    open,
+    setOpen,
+    dismissable,
+    titleId,
+    descriptionId,
+    hasDescription,
+    setHasDescription
+  };
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value, children });
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TriggerLike({
+  asChild = false,
+  onActivate,
+  dataSlot,
+  children,
+  className,
+  type,
+  ...props
+}) {
+  if (asChild) {
+    if (!React2.isValidElement(children)) {
+      throw new Error(
+        `${dataSlot}: \`asChild\` requires a single React element child`
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childOnClick = childProps.onClick;
+    return React2.cloneElement(child, {
+      ...props,
+      ...childProps,
+      "data-slot": dataSlot,
+      onClick: (event) => {
+        childOnClick?.(event);
+        if (!event.defaultPrevented) onActivate();
+      },
+      className: cn(className, childProps.className),
+      ref: (node) => {
+        setRef(childProps.ref, node);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: type ?? "button",
+      "data-slot": dataSlot,
+      className,
+      onClick: () => onActivate(),
+      ...props,
+      children
+    }
+  );
+}
+function DialogTrigger({ asChild = false, ...props }) {
+  const { open, setOpen } = useDialogContext("Dialog.Trigger");
+  return /* @__PURE__ */ jsx(
+    TriggerLike,
+    {
+      asChild,
+      dataSlot: "dialog-trigger",
+      onActivate: () => setOpen(true),
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      ...props
+    }
+  );
+}
+function DialogClose({ asChild = false, ...props }) {
+  const { setOpen } = useDialogContext("Dialog.Close");
+  return /* @__PURE__ */ jsx(
+    TriggerLike,
+    {
+      asChild,
+      dataSlot: "dialog-close",
+      onActivate: () => setOpen(false),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  ref,
+  onKeyDown,
+  ...props
+}) {
+  const { open, setOpen, dismissable, titleId, descriptionId, hasDescription } = useDialogContext("Dialog.Content");
+  const cardRef = React2.useRef(null);
+  useFocusTrap({ active: open, containerRef: cardRef });
+  React2.useEffect(() => {
+    if (!open || !dismissable) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, dismissable, setOpen]);
+  if (!open) return null;
+  const setCardRef = (node) => {
+    cardRef.current = node;
+    setRef(ref, node);
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "dialog-overlay",
+        className: dialogOverlayVariants(),
+        onClick: (event) => {
+          if (dismissable && event.target === event.currentTarget) {
+            setOpen(false);
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setCardRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": hasDescription ? descriptionId : void 0,
+            tabIndex: -1,
+            "data-slot": "dialog-content",
+            className: cn(dialogContentVariants(), className),
+            onKeyDown,
+            ...props,
+            children
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function DialogHeader({
+  icon,
+  title,
+  description,
+  showClose = true,
+  className,
+  ref,
+  ...props
+}) {
+  const { titleId, descriptionId, setHasDescription, setOpen } = useDialogContext("Dialog.Header");
+  const hasDescription = description != null;
+  React2.useEffect(() => {
+    if (!hasDescription) return;
+    setHasDescription(true);
+    return () => setHasDescription(false);
+  }, [hasDescription, setHasDescription]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-header",
+      className: cn(dialogHeaderVariants(), className),
+      ...props,
+      children: [
+        icon != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "dialog-header-icon",
+            "aria-hidden": "true",
+            className: dialogHeaderIconVariants(),
+            children: /* @__PURE__ */ jsx(IconContext.Provider, { value: { weight: "fill" }, children: icon })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              dialogHeaderTextVariants(),
+              // Reserve right space for the corner X only when it would collide: an
+              // icon-less header puts the title on the X's row. With an icon the
+              // title sits below the X, so no reservation is needed.
+              showClose && icon == null && "pr-8"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("h2", { id: titleId, className: "display-04 text-foreground", children: title }),
+              hasDescription && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "body-03 text-foreground-muted", children: description })
+            ]
+          }
+        ),
+        showClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "dialog-header-close",
+            "aria-label": "Close",
+            className: dialogCloseButtonVariants(),
+            onClick: () => setOpen(false),
+            children: /* @__PURE__ */ jsx(XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function DialogBody({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-body",
+      className: cn(dialogBodyVariants(), scrollbarVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function DialogFooter({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "dialog-footer",
+      className: cn(dialogFooterVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Close: DialogClose
+};
+
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTrigger, dialogBodyVariants, dialogCloseButtonVariants, dialogContentVariants, dialogFooterVariants, dialogHeaderIconVariants, dialogHeaderTextVariants, dialogHeaderVariants, dialogOverlayVariants, getFocusableElements, useFocusTrap };