@financedistrict/apps-ui 0.1.0

package/dist/chunk-IRS3T6LF.js

@@ -0,0 +1,352 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var tooltipVariants = cva([
+  "pointer-events-none max-w-[244px] rounded-sm bg-card-reversed-background px-1.5 py-1",
+  "body-04 text-center text-card-reversed-foreground shadow-xs"
+]);
+var TOOLTIP_OFFSET = 6;
+var VIEWPORT_MARGIN = 8;
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function sideFits(trigger, content, side, viewport) {
+  switch (side) {
+    case "top":
+      return trigger.top - TOOLTIP_OFFSET - content.height >= 0;
+    case "bottom":
+      return trigger.top + trigger.height + TOOLTIP_OFFSET + content.height <= viewport.height;
+    case "left":
+      return trigger.left - TOOLTIP_OFFSET - content.width >= 0;
+    case "right":
+      return trigger.left + trigger.width + TOOLTIP_OFFSET + content.width <= viewport.width;
+  }
+}
+function alignCoord(anchorStart, anchorSize, contentSize, align) {
+  switch (align) {
+    case "start":
+      return anchorStart;
+    case "center":
+      return anchorStart + anchorSize / 2 - contentSize / 2;
+    case "end":
+      return anchorStart + anchorSize - contentSize;
+  }
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, Math.max(min, max)));
+}
+function computeTooltipPosition(trigger, content, side, align, viewport) {
+  const resolvedSide = sideFits(trigger, content, side, viewport) || !sideFits(trigger, content, OPPOSITE_SIDE[side], viewport) ? side : OPPOSITE_SIDE[side];
+  const vertical = resolvedSide === "top" || resolvedSide === "bottom";
+  let top;
+  let left;
+  if (vertical) {
+    top = resolvedSide === "top" ? trigger.top - TOOLTIP_OFFSET - content.height : trigger.top + trigger.height + TOOLTIP_OFFSET;
+    left = alignCoord(trigger.left, trigger.width, content.width, align);
+    left = clamp(
+      left,
+      VIEWPORT_MARGIN,
+      viewport.width - content.width - VIEWPORT_MARGIN
+    );
+  } else {
+    left = resolvedSide === "left" ? trigger.left - TOOLTIP_OFFSET - content.width : trigger.left + trigger.width + TOOLTIP_OFFSET;
+    top = alignCoord(trigger.top, trigger.height, content.height, align);
+    top = clamp(
+      top,
+      VIEWPORT_MARGIN,
+      viewport.height - content.height - VIEWPORT_MARGIN
+    );
+  }
+  return { top, left, side: resolvedSide };
+}
+var TooltipContext = React.createContext(null);
+function useTooltipContext(part) {
+  const context = React.useContext(TooltipContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Tooltip.Root>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TooltipRoot({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration = 600,
+  side = "top",
+  align = "center",
+  disabled = false,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const rawOpen = isControlled ? openProp : uncontrolledOpen;
+  const open = disabled ? false : rawOpen;
+  const reactId = React.useId();
+  const contentId = `${reactId}-tooltip`;
+  const anchorRef = React.useRef(null);
+  const [anchorRect, setAnchorRect] = React.useState(null);
+  const timerRef = React.useRef(null);
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const clearTimer = React.useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  React.useEffect(() => clearTimer, [clearTimer]);
+  const onTriggerPointerEnter = () => {
+    if (disabled) return;
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(true), delayDuration);
+  };
+  const onTriggerPointerLeave = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  const onTriggerFocus = () => {
+    if (disabled) return;
+    clearTimer();
+    setOpen(true);
+  };
+  const onTriggerBlur = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  React.useLayoutEffect(() => {
+    if (!open) {
+      setAnchorRect(null);
+      return;
+    }
+    const measure = () => {
+      const node = anchorRef.current;
+      if (node) setAnchorRect(node.getBoundingClientRect());
+    };
+    measure();
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        clearTimer();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, setOpen, clearTimer]);
+  const value = {
+    open,
+    setOpen,
+    disabled,
+    contentId,
+    side,
+    align,
+    anchorRef,
+    anchorRect,
+    onTriggerPointerEnter,
+    onTriggerPointerLeave,
+    onTriggerFocus,
+    onTriggerBlur
+  };
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value, children });
+}
+function TooltipTrigger({
+  asChild = false,
+  className,
+  children,
+  ref,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const {
+    open,
+    disabled,
+    contentId,
+    anchorRef,
+    onTriggerPointerEnter,
+    onTriggerPointerLeave,
+    onTriggerFocus,
+    onTriggerBlur
+  } = useTooltipContext("Tooltip.Trigger");
+  const describedBy = !disabled && open ? contentId : void 0;
+  const handlePointerEnter = (event) => {
+    onPointerEnter?.(event);
+    onTriggerPointerEnter();
+  };
+  const handlePointerLeave = (event) => {
+    onPointerLeave?.(event);
+    onTriggerPointerLeave();
+  };
+  const handleFocus = (event) => {
+    onFocus?.(event);
+    onTriggerFocus();
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    onTriggerBlur();
+  };
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      throw new Error(
+        "Tooltip.Trigger: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childHandlers = childProps;
+    return React.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "tooltip-trigger",
+        "aria-describedby": describedBy,
+        onPointerEnter: (event) => {
+          childHandlers.onPointerEnter?.(event);
+          onPointerEnter?.(event);
+          onTriggerPointerEnter();
+        },
+        onPointerLeave: (event) => {
+          childHandlers.onPointerLeave?.(event);
+          onPointerLeave?.(event);
+          onTriggerPointerLeave();
+        },
+        onFocus: (event) => {
+          childHandlers.onFocus?.(event);
+          onFocus?.(event);
+          onTriggerFocus();
+        },
+        onBlur: (event) => {
+          childHandlers.onBlur?.(event);
+          onBlur?.(event);
+          onTriggerBlur();
+        },
+        className: cn(className, childHandlers.className),
+        ref: (node) => {
+          anchorRef.current = node;
+          setRef(ref, node);
+          setRef(childHandlers.ref, node);
+        }
+      },
+      childProps.children
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      type: props.type ?? "button",
+      "data-slot": "tooltip-trigger",
+      "aria-describedby": describedBy,
+      className,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      ref: (node) => {
+        anchorRef.current = node;
+        setRef(ref, node);
+      },
+      children
+    }
+  );
+}
+function TooltipContent({
+  className,
+  children,
+  style,
+  ref,
+  ...props
+}) {
+  const { open, contentId, side, align, anchorRect } = useTooltipContext("Tooltip.Content");
+  const contentRef = React.useRef(null);
+  const [placement, setPlacement] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (!open || anchorRect == null) {
+      setPlacement(null);
+      return;
+    }
+    const node = contentRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    setPlacement(
+      computeTooltipPosition(
+        anchorRect,
+        { width: rect.width, height: rect.height },
+        side,
+        align,
+        { width: window.innerWidth, height: window.innerHeight }
+      )
+    );
+  }, [open, anchorRect, side, align]);
+  if (!open) return null;
+  const positioned = placement !== null;
+  const positionStyle = positioned ? {
+    position: "absolute",
+    top: placement.top + window.scrollY,
+    left: placement.left + window.scrollX,
+    zIndex: 50,
+    ...style
+  } : {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+    zIndex: 50,
+    ...style
+  };
+  const setContentRef = (node) => {
+    contentRef.current = node;
+    setRef(ref, node);
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: setContentRef,
+        role: "tooltip",
+        id: contentId,
+        "data-slot": "tooltip-content",
+        "data-side": positioned ? placement.side : side,
+        "data-align": align,
+        className: cn(tooltipVariants(), className),
+        style: positionStyle,
+        children
+      }
+    ),
+    document.body
+  );
+}
+var Tooltip = {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent
+};
+
+export { Tooltip, TooltipContent, TooltipRoot, TooltipTrigger, computeTooltipPosition, tooltipVariants };

package/dist/chunk-IYYHCQXG.js

@@ -0,0 +1,146 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import * as React from 'react';
+import { XIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var panelVariants = cva([
+  "flex w-80 flex-col gap-4 rounded-md border border-card-border bg-card-background p-5"
+]);
+var panelHeaderVariants = cva(["flex items-start gap-4"]);
+var panelHeaderContentVariants = cva([
+  "flex min-w-0 flex-1 items-center gap-3"
+]);
+var panelHeaderIconVariants = cva([
+  "flex items-center text-card-foreground [&_svg]:size-6 [&_svg]:shrink-0"
+]);
+var panelHeaderTextVariants = cva(["flex min-w-0 flex-col"]);
+var panelCloseButtonVariants = cva([
+  "flex shrink-0 cursor-pointer items-center justify-center rounded-xs",
+  "text-card-foreground-muted transition-colors hover:text-card-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  "outline-none focus-visible:text-card-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var panelBodyVariants = cva(["text-card-foreground"]);
+var panelFooterVariants = cva(["flex items-start gap-2"]);
+var PanelContext = React.createContext(null);
+function usePanelContext() {
+  return React.useContext(PanelContext);
+}
+function PanelRoot({
+  className,
+  children,
+  ref,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const reactId = React.useId();
+  const titleId = `${reactId}-title`;
+  const [hasTitle, setHasTitle] = React.useState(false);
+  const labelledBy = hasTitle ? titleId : ariaLabelledby;
+  const hasName = Boolean(labelledBy || ariaLabel);
+  const value = { titleId, setHasTitle };
+  return /* @__PURE__ */ jsx(PanelContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: hasName ? "region" : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "data-slot": "panel",
+      className: cn(panelVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function PanelHeader({
+  icon,
+  title,
+  description,
+  showClose = true,
+  onClose,
+  className,
+  ref,
+  ...props
+}) {
+  const context = usePanelContext();
+  const titleId = context?.titleId;
+  const setHasTitle = context?.setHasTitle;
+  const hasDescription = description != null;
+  React.useEffect(() => {
+    if (!setHasTitle) return;
+    setHasTitle(true);
+    return () => setHasTitle(false);
+  }, [setHasTitle]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-header",
+      className: cn(panelHeaderVariants(), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: panelHeaderContentVariants(), children: [
+          icon != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "panel-header-icon",
+              "aria-hidden": "true",
+              className: panelHeaderIconVariants(),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: panelHeaderTextVariants(), children: [
+            /* @__PURE__ */ jsx("p", { id: titleId, className: "body-02-medium text-card-foreground", children: title }),
+            hasDescription && /* @__PURE__ */ jsx("p", { className: "body-03 text-card-foreground-muted", children: description })
+          ] })
+        ] }),
+        showClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "panel-header-close",
+            "aria-label": "Close",
+            className: panelCloseButtonVariants(),
+            onClick: () => onClose?.(),
+            children: /* @__PURE__ */ jsx(XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelBody({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-body",
+      className: cn(panelBodyVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function PanelFooter({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-footer",
+      className: cn(panelFooterVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Panel = {
+  Root: PanelRoot,
+  Header: PanelHeader,
+  Body: PanelBody,
+  Footer: PanelFooter
+};
+
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelRoot, panelBodyVariants, panelCloseButtonVariants, panelFooterVariants, panelHeaderContentVariants, panelHeaderIconVariants, panelHeaderTextVariants, panelHeaderVariants, panelVariants };

package/dist/chunk-JIXW3455.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+
+// src/lib/cut-corner.ts
+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.useRef(null);
+  const [clipPath, setClipPath] = React.useState();
+  const [pathD, setPathD] = React.useState();
+  const [outsetPathD, setOutsetPathD] = React.useState();
+  React.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 };
+
+export { BUTTON_CUT, useCutCornerClipPath };

package/dist/chunk-N4VAP2GB.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-7EOSDFS3.js';
+import { XCircleIcon, CheckCircleIcon, XIcon } from '@phosphor-icons/react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toastVariants = cva(
+  "flex items-center gap-4 rounded-sm bg-card-reversed-background px-5 py-4"
+);
+var toastIconVariants = cva(
+  "flex shrink-0 items-center [&_svg]:size-5 [&_svg]:shrink-0",
+  {
+    variants: {
+      variation: {
+        success: "text-success-primary-foreground",
+        error: "text-destructive-primary-foreground"
+      }
+    },
+    defaultVariants: { variation: "success" }
+  }
+);
+var toastCloseVariants = cva([
+  "flex shrink-0 cursor-pointer items-center rounded-xs text-card-reversed-foreground-muted",
+  "transition-colors hover:text-card-reversed-foreground",
+  "[&_svg]:size-5 [&_svg]:shrink-0",
+  "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid focus-visible:outline-focus"
+]);
+var STATUS_ICON = {
+  success: CheckCircleIcon,
+  error: XCircleIcon
+};
+function Toast({
+  variation = "success",
+  children,
+  onClose,
+  className,
+  ref,
+  ...props
+}) {
+  const StatusIcon = STATUS_ICON[variation];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "toast",
+      role: variation === "error" ? "alert" : "status",
+      className: cn(toastVariants(), className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "toast-icon",
+              "aria-hidden": "true",
+              className: toastIconVariants({ variation }),
+              children: /* @__PURE__ */ jsx(StatusIcon, { weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "body-03 min-w-0 flex-1 text-card-reversed-foreground", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "toast-close",
+            "aria-label": "Dismiss",
+            className: toastCloseVariants(),
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Toast, toastCloseVariants, toastIconVariants, toastVariants };