@hoardodile/ui 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,653 +1,12 @@
-import * as React from 'react';
-import { createContext, useRef, useEffect, useState, useMemo } from 'react';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { useTranslation } from 'react-i18next';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-import { Button as Button$1 } from '@base-ui/react/button';
-import { cva } from 'class-variance-authority';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import 'react-use';
-
-// src/components/dialog.tsx
-var mergeTheme = {
-  text: ["tiny", "ui", "doc", "doc-title", "doc-heading", "quote"],
-  spacing: ["chip", "control", "nav", "sidebar", "panel"],
-  tracking: ["label"],
-  shadow: ["card", "dialog"],
-  container: ["reading", "medium", "content"],
-  font: ["doc", "heading"],
-  ease: ["standard"],
-  animate: ["skel", "pop"]
-};
-var twMerge = extendTailwindMerge({
-  extend: { theme: mergeTheme }
-});
-
-// src/lib/utils.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg text-ui font-medium whitespace-nowrap outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary px-4! text-primary-foreground hover:bg-primary/80",
-        outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-foreground",
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        danger: "bg-[color-mix(in_oklab,var(--destructive),black_12%)] text-white hover:bg-[color-mix(in_oklab,var(--destructive),black_4%)] focus-visible:border-destructive/40 focus-visible:ring-destructive/20 disabled:bg-destructive/10 disabled:text-muted-foreground dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-control gap-2 px-3 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-2 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-chip gap-2 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
-        lg: "h-10 gap-2 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
-        "icon-lg": "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  active,
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      "data-slot": "button",
-      className: cn(
-        buttonVariants({ variant, size, className }),
-        active && "bg-accent text-accent-foreground hover:bg-accent"
-      ),
-      ...props
-    }
-  );
-}
-
-// src/viewport.ts
-var MOBILE_BREAKPOINT_PX = 768;
-var MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT_PX - 1}px)`;
-function isBelowMd() {
-  if (typeof window === "undefined") return false;
-  return window.matchMedia(MOBILE_QUERY).matches;
-}
-var HISTORY_KEY = "__appMobileOverlay";
-var overlayStack = [];
-var popListenerInstalled = false;
-var historyPatched = false;
-var nextOverlayId = 0;
-var suppressPopCount = 0;
-var seenSyntheticIds = /* @__PURE__ */ new Set();
-var navigationResolver;
-function setNavigationResolver(resolver) {
-  navigationResolver = resolver;
-}
-function patchHistory() {
-  if (historyPatched) return;
-  if (typeof window === "undefined") return;
-  historyPatched = true;
-  const origPush = window.history.pushState.bind(window.history);
-  window.history.pushState = (data, unused, url) => {
-    const state = data;
-    if (state !== null && typeof state === "object" && HISTORY_KEY in state) {
-      origPush(data, unused, url);
-      return;
-    }
-    if (overlayStack.length > 0) {
-      closeAllOverlays();
-    }
-    origPush(data, unused, url);
-  };
-}
-function closeAllOverlays() {
-  while (overlayStack.length > 0) {
-    const entry = overlayStack.pop();
-    if (entry?.close !== void 0) {
-      const fn = entry.close;
-      entry.close = void 0;
-      fn();
-    }
-  }
-}
-function ensurePopListener() {
-  if (popListenerInstalled) return;
-  if (typeof window === "undefined") return;
-  popListenerInstalled = true;
-  window.addEventListener(
-    "popstate",
-    (e) => {
-      if (suppressPopCount > 0) return;
-      const state = e.state;
-      if (state !== null && typeof state === "object" && HISTORY_KEY in state) {
-        const id = state[HISTORY_KEY];
-        if (typeof id === "number" && overlayStack.some((entry) => entry.id === id)) {
-          closeTopOverlay();
-          e.stopImmediatePropagation();
-          return;
-        }
-        e.stopImmediatePropagation();
-        if (typeof id === "number" && seenSyntheticIds.has(id)) {
-          window.history.back();
-        }
-      }
-    },
-    true
-    // capture phase
-  );
-  window.addEventListener("popstate", handlePop);
-  patchHistory();
-}
-function closeTopOverlay() {
-  const top = overlayStack.pop();
-  if (top === void 0) return;
-  if (top.close === void 0) return;
-  const closeFn = top.close;
-  top.close = void 0;
-  closeFn();
-}
-function handlePop() {
-  if (suppressPopCount > 0) {
-    suppressPopCount--;
-    return;
-  }
-  closeTopOverlay();
-}
-function removeFromStack(id) {
-  const idx = overlayStack.findIndex((e) => e.id === id);
-  if (idx === -1) return { removed: false, parkedBelow: 0 };
-  const wasTop = idx === overlayStack.length - 1;
-  if (!wasTop) {
-    const entry = overlayStack[idx];
-    if (entry !== void 0) entry.close = void 0;
-    return { removed: true, parkedBelow: 0 };
-  }
-  overlayStack.pop();
-  const remaining = overlayStack.splice(0, overlayStack.length);
-  const active = remaining.filter((e) => e.close !== void 0);
-  const parkedBelow = remaining.length - active.length;
-  overlayStack.push(...active);
-  return { removed: true, parkedBelow };
-}
-function scheduleStateRestore(id, baseState, parkedBelow) {
-  function check() {
-    const currentState = window.history.state;
-    if (currentState === null || typeof currentState !== "object" || !(HISTORY_KEY in currentState) || currentState[HISTORY_KEY] !== id) {
-      sweepParkedEntries();
-      return;
-    }
-    const totalBacks = 1 + parkedBelow;
-    let done = false;
-    function restore() {
-      if (done) return;
-      done = true;
-      window.removeEventListener("popstate", onPop);
-      window.history.replaceState(baseState, "");
-      const sweptIds = sweepParkedEntries();
-      cleanupSeenIds(sweptIds);
-    }
-    function onPop() {
-      if (suppressPopCount > 0) {
-        suppressPopCount--;
-        return;
-      }
-      restore();
-    }
-    window.addEventListener("popstate", onPop);
-    suppressPopCount += totalBacks;
-    for (let i = 0; i < totalBacks; i++) {
-      window.history.back();
-    }
-  }
-  let disposed = false;
-  let rafId;
-  let unsub;
-  function run() {
-    if (disposed) return;
-    disposed = true;
-    unsub?.();
-    if (rafId !== void 0) {
-      cancelAnimationFrame(rafId);
-    }
-    check();
-  }
-  if (navigationResolver !== void 0) {
-    unsub = navigationResolver(run);
-  }
-  rafId = requestAnimationFrame(run);
-}
-function sweepParkedEntries() {
-  const sweptIds = [];
-  for (let i = overlayStack.length - 1; i >= 0; i--) {
-    const entry = overlayStack[i];
-    if (entry !== void 0 && entry.close === void 0) {
-      sweptIds.push(entry.id);
-      overlayStack.splice(i, 1);
-    }
-  }
-  return sweptIds;
-}
-function cleanupSeenIds(sweptIds) {
-  const activeIds = new Set(overlayStack.map((e) => e.id));
-  for (const id of sweptIds) {
-    if (!activeIds.has(id)) {
-      seenSyntheticIds.delete(id);
-    }
-  }
-}
-function useMobileBackToClose(open, onOpenChange) {
-  const idRef = useRef(void 0);
-  const onChangeRef = useRef(onOpenChange);
-  onChangeRef.current = onOpenChange;
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    if (onChangeRef.current === void 0) return;
-    if (!isBelowMd()) return;
-    ensurePopListener();
-    if (open === true && idRef.current === void 0) {
-      const id = ++nextOverlayId;
-      idRef.current = id;
-      seenSyntheticIds.add(id);
-      const baseState = window.history.state ?? null;
-      window.history.pushState(
-        {
-          ...baseState ?? {},
-          [HISTORY_KEY]: id
-        },
-        ""
-      );
-      overlayStack.push({
-        id,
-        baseState,
-        close() {
-          idRef.current = void 0;
-          onChangeRef.current?.(false);
-        }
-      });
-      return;
-    }
-    if (open !== true && idRef.current !== void 0) {
-      const id = idRef.current;
-      idRef.current = void 0;
-      const entryIdx = overlayStack.findIndex((e) => e.id === id);
-      const entry = entryIdx !== -1 ? overlayStack[entryIdx] : void 0;
-      const { removed, parkedBelow } = removeFromStack(id);
-      if (removed && entry !== void 0) {
-        scheduleStateRestore(id, entry.baseState, parkedBelow);
-      }
-    }
-  }, [open]);
-  useEffect(() => {
-    return () => {
-      if (idRef.current !== void 0) {
-        const id = idRef.current;
-        idRef.current = void 0;
-        const entryIdx = overlayStack.findIndex((e) => e.id === id);
-        const entry = entryIdx !== -1 ? overlayStack[entryIdx] : void 0;
-        const { removed, parkedBelow } = removeFromStack(id);
-        if (removed && entry !== void 0) {
-          scheduleStateRestore(id, entry.baseState, parkedBelow);
-        }
-      }
-    };
-  }, []);
-}
-function Mark({
-  d,
-  filled,
-  className
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      className,
-      children: filled ? /* @__PURE__ */ jsx("path", { d, fill: "currentColor" }) : /* @__PURE__ */ jsx(
-        "path",
-        {
-          d,
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
-function Cross(props) {
-  return /* @__PURE__ */ jsx(Mark, { ...props, d: "M6 6l12 12M18 6L6 18" });
-}
-function Dialog({
-  open,
-  defaultOpen,
-  onOpenChange,
-  ...props
-}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
-    defaultOpen ?? false
-  );
-  const isControlled = open !== void 0;
-  const currentOpen = isControlled ? open : uncontrolledOpen;
-  function handleOpenChange(next, eventDetails) {
-    if (!isControlled) setUncontrolledOpen(next);
-    onOpenChange?.(next, eventDetails);
-  }
-  useMobileBackToClose(currentOpen, handleOpenChange);
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Root,
-    {
-      "data-slot": "dialog",
-      open: currentOpen,
-      onOpenChange: handleOpenChange,
-      ...props
-    }
-  );
-}
-function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx(Dialog$1.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Backdrop,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        // The dialog layer: a static whisper-of-ink scrim plus
-        // backdrop blur — part of the surface definition, not motion.
-        "fixed inset-0 isolate z-50 bg-foreground/5 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  overlayClassName,
-  contentMotion = "default",
-  ...props
-}) {
-  const { t } = useTranslation("ui", { useSuspense: false });
-  const arranged = arrangeDialogChildren(children);
-  const motionClasses = contentMotion === "minimal" ? "data-ending-style:opacity-0 data-starting-style:opacity-0" : cn(
-    "data-ending-style:translate-y-10 data-ending-style:opacity-0 data-starting-style:translate-y-10 data-starting-style:opacity-0",
-    // ≥ sm the popup is centred with -translate-y-1/2, so the
-    // starting/ending styles must keep that offset (zoom + fade
-    // only, no slide) instead of clobbering it with translate-y-0.
-    "sm:data-ending-style:-translate-y-1/2 sm:data-ending-style:scale-95 sm:data-starting-style:-translate-y-1/2 sm:data-starting-style:scale-95"
-  );
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
-    /* @__PURE__ */ jsxs(
-      Dialog$1.Popup,
-      {
-        "data-slot": "dialog-content",
-        className: cn(
-          // The floating-card anatomy: `bg-card`
-          // hairline-bordered surface with the system's one deep shadow.
-          // Mobile: bottom sheet occupying most of the viewport so edit
-          // forms have room to breathe. The component never scrolls
-          // itself; only the inner DialogBody does. Header/body/footer
-          // parts are held apart by the card's section gap
-          // (`gap-4` between the header document, the body and the
-          // hairline footer).
-          "fixed z-50 flex flex-col gap-4 bg-card text-sm text-card-foreground shadow-dialog outline-hidden transition duration-200 ease-in-out",
-          "inset-x-0 bottom-0 max-h-[85svh] overflow-hidden rounded-t-2xl rounded-b-none border border-b-0 border-border",
-          motionClasses,
-          // ≥ sm: centred modal, allow up to 90vh.
-          "sm:inset-x-auto sm:bottom-auto sm:top-1/2 sm:left-1/2 sm:w-full sm:max-w-md sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-2xl",
-          className
-        ),
-        ...props,
-        children: [
-          arranged,
-          showCloseButton && /* @__PURE__ */ jsxs(
-            Dialog$1.Close,
-            {
-              "data-slot": "dialog-close",
-              className: "absolute top-3 right-3 z-20 flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground",
-              children: [
-                /* @__PURE__ */ jsx(Cross, { className: "size-3" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("aria.close") })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-header",
-      className: cn(
-        // The header document: the card's `p-5`
-        // rhythm — 20px top and sides, no bottom padding — with the
-        // eyebrow, title row and description stacked tight; the section
-        // gap below separates it from the body.
-        "flex shrink-0 flex-col bg-card px-5 pt-5",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "dialog-body",
-      className: cn(
-        "flex-1 overflow-y-auto overscroll-contain px-5",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DialogFooter({
-  className,
-  flush = false,
-  showCloseButton = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-slot": "dialog-footer",
-      className: cn("flex shrink-0 flex-col bg-card", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "border-t border-border",
-              flush ? "mx-4" : "mx-5"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              // The hairline action bar: 16px above the
-              // buttons, the card's bottom padding (20px) below.
-              "flex flex-row justify-end flex-wrap gap-2",
-              flush ? "p-4" : "px-5 pt-4 pb-5"
-            ),
-            children: [
-              children,
-              showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: "Close" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function DialogTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-sm font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Dialog$1.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn(
-        "text-xs leading-5 text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function arrangeDialogChildren(children) {
-  const headers = [];
-  const footers = [];
-  const bodyNodes = [];
-  let hasExplicitBody = false;
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) {
-      bodyNodes.push(child);
-      return;
-    }
-    if (child.type === DialogHeader) {
-      headers.push(child);
-      return;
-    }
-    if (child.type === DialogFooter) {
-      footers.push(child);
-      return;
-    }
-    if (child.type === DialogBody) {
-      hasExplicitBody = true;
-      bodyNodes.push(child);
-      return;
-    }
-    bodyNodes.push(child);
-  });
-  const body = hasExplicitBody ? bodyNodes : /* @__PURE__ */ jsx(DialogBody, { children: bodyNodes });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    headers,
-    body,
-    footers
-  ] });
-}
-var DialogFooterActionsContext = createContext(null);
-var sizeClasses = {
-  sm: "sm:max-w-sm",
-  md: "sm:max-w-md",
-  lg: "sm:max-w-2xl",
-  xl: "sm:max-w-3xl",
-  "2xl": "sm:max-w-4xl"
-};
-function AppDialog(props) {
-  const {
-    open,
-    onOpenChange,
-    title,
-    eyebrow,
-    icon,
-    danger,
-    size,
-    flush,
-    description,
-    children,
-    footer,
-    contentClassName,
-    overlayClassName,
-    contentMotion,
-    suppressAutoFocus = true,
-    contentTestId
-  } = props;
-  const contentRef = useRef(null);
-  const [footerActions, setFooterActions] = useState(null);
-  const actionsValue = useMemo(
-    () => ({ setFooterActions }),
-    [setFooterActions]
-  );
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
-    {
-      ref: contentRef,
-      className: cn(
-        size !== void 0 && sizeClasses[size],
-        flush && "p-0",
-        contentClassName
-      ),
-      overlayClassName,
-      contentMotion,
-      initialFocus: suppressAutoFocus ? contentRef : void 0,
-      "data-testid": contentTestId,
-      children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { className: flush ? "gap-4" : void 0, children: [
-          eyebrow !== void 0 ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "text-tiny font-semibold tracking-label uppercase",
-                danger ? "text-destructive" : "text-muted-foreground"
-              ),
-              children: eyebrow
-            }
-          ) : null,
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3 pr-6", children: [
-            icon,
-            /* @__PURE__ */ jsx(
-              DialogTitle,
-              {
-                className: cn("truncate", danger && "text-destructive"),
-                children: title
-              }
-            )
-          ] }),
-          description !== void 0 ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsx(DialogBody, { className: flush ? "p-0" : void 0, children: /* @__PURE__ */ jsx(DialogFooterActionsContext.Provider, { value: actionsValue, children }) }),
-        footer !== void 0 && footer !== null || footerActions !== null ? /* @__PURE__ */ jsxs(DialogFooter, { flush, children: [
-          footer,
-          footerActions
-        ] }) : null
-      ]
-    }
-  ) });
-}
-
-export { AppDialog, cn, setNavigationResolver, useMobileBackToClose };
+export { AppDialog } from './chunk-2BVZEYNW.js';
+import './chunk-6HAIUXNZ.js';
+import './chunk-KOFWEPPB.js';
+export { setNavigationResolver, useMobileBackToClose } from './chunk-TDDHQZ62.js';
+import './chunk-QGMDWGJT.js';
+import './chunk-XBPQEZES.js';
+import './chunk-KNPRUZ4H.js';
+import './chunk-PWJBHUM2.js';
+export { cn } from './chunk-M5OJN54O.js';
+import './chunk-2HWSCY4T.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map