import * as React19 from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as RDialog from '@radix-ui/react-dialog';
import * as RTabs from '@radix-ui/react-tabs';
import * as RSelect from '@radix-ui/react-select';
import * as RCheckbox from '@radix-ui/react-checkbox';
import * as RRadio from '@radix-ui/react-radio-group';
import * as RSwitch from '@radix-ui/react-switch';
import * as RadixToast from '@radix-ui/react-toast';
import * as RAvatar from '@radix-ui/react-avatar';
import * as RMenu from '@radix-ui/react-dropdown-menu';
import * as RTooltip from '@radix-ui/react-tooltip';
import { DayPicker } from 'react-day-picker';

// src/Button.tsx
function cn(...inputs) {
  return inputs.filter(Boolean).join(" ");
}
var surface = cva("", {
  variants: {
    tone: {
      fg: "text-fg",
      "fg-muted": "text-fg-muted",
      accent: "bg-accent text-accent-fg",
      surface: "bg-surface text-fg",
      danger: "bg-danger text-accent-fg"
    },
    radius: {
      none: "rounded-none",
      sm: "rounded-sm",
      md: "rounded-md",
      lg: "rounded-lg",
      xl: "rounded-xl",
      full: "rounded-full"
    },
    size: {
      sm: "text-sm",
      base: "text-base",
      lg: "text-lg"
    }
  },
  defaultVariants: { tone: "surface", radius: "md", size: "base" }
});
var buttonStateClasses = "inline-flex min-h-[var(--mod-touch-min)] items-center justify-center gap-2 bg-[var(--mod-color-accent-9)] text-[var(--mod-color-accent-contrast)] hover:bg-[var(--mod-color-accent-10)] active:bg-[var(--mod-color-accent-11)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] aria-[busy=true]:cursor-progress aria-[busy=true]:opacity-[var(--mod-opacity-muted)]";
var Button = React19.forwardRef(
  ({ asChild, tone, radius, size, ...props }, ref) => {
    const Comp = asChild ? Slot : "button";
    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(surface({ tone, radius, size }), buttonStateClasses), ...props });
  }
);
Button.displayName = "Button";
var Dialog = RDialog.Root;
var DialogTrigger = RDialog.Trigger;
var DialogPortal = RDialog.Portal;
var DialogClose = RDialog.Close;
var DialogTitle = RDialog.Title;
var DialogDescription = RDialog.Description;
var DialogContent = React19.forwardRef((props, ref) => /* @__PURE__ */ jsxs(RDialog.Portal, { children: [
  /* @__PURE__ */ jsx(RDialog.Overlay, { className: "fixed inset-0 bg-[var(--mod-color-neutral-a8)]" }),
  /* @__PURE__ */ jsx(
    RDialog.Content,
    {
      ref,
      className: cn(
        surface({ tone: "surface", radius: "lg" }),
        "border border-border shadow-[var(--mod-shadow-lg)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"
      ),
      ...props
    }
  )
] }));
DialogContent.displayName = "DialogContent";
var badgeVariants = cva("inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", {
  variants: {
    tone: {
      neutral: "bg-surface text-fg",
      success: "bg-success text-success-fg",
      warning: "bg-warning text-warning-fg",
      danger: "bg-danger text-danger-fg",
      info: "bg-info text-info-fg"
    }
  },
  defaultVariants: { tone: "neutral" }
});
function Badge({ tone, children, className }) {
  return /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ tone }), className), children });
}
var Tabs = RTabs.Root;
var TabsList = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  RTabs.List,
  {
    ref,
    className: cn("inline-flex items-center gap-2 rounded-lg bg-[var(--mod-color-neutral-3)] p-1", className),
    ...props
  }
));
TabsList.displayName = "TabsList";
var TabsTrigger = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  RTabs.Trigger,
  {
    ref,
    className: cn(
      "inline-flex min-h-[var(--mod-touch-min)] items-center gap-2 rounded-md px-3 text-[var(--mod-color-accent-11)] data-[state=inactive]:bg-[var(--mod-color-accent-3)] data-[state=inactive]:hover:bg-[var(--mod-color-accent-4)] data-[state=inactive]:active:bg-[var(--mod-color-accent-5)] data-[state=active]:bg-[var(--mod-color-accent-9)] data-[state=active]:text-[var(--mod-color-accent-contrast)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)]",
      className
    ),
    ...props
  }
));
TabsTrigger.displayName = "TabsTrigger";
var TabsContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  RTabs.Content,
  {
    ref,
    className: cn("focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]", className),
    ...props
  }
));
TabsContent.displayName = "TabsContent";
function tabBadgeTone(count, warnAt, dangerAt) {
  if (count >= dangerAt) return "danger";
  if (count >= warnAt) return "warning";
  return "neutral";
}
var TabsTriggerWithBadge = React19.forwardRef(({ count, warnAt, dangerAt, children, className, ...props }, ref) => /* @__PURE__ */ jsxs(
  TabsTrigger,
  {
    ref,
    className: cn("justify-center", className),
    ...props,
    children: [
      children,
      count != null && count > 0 ? /* @__PURE__ */ jsx(Badge, { tone: tabBadgeTone(count, warnAt ?? Infinity, dangerAt ?? Infinity), children: count }) : null
    ]
  }
));
TabsTriggerWithBadge.displayName = "TabsTriggerWithBadge";
var Select = RSelect.Root;
var SelectValue = RSelect.Value;
var SelectGroup = RSelect.Group;
var SelectLabel = RSelect.Label;
var SelectSeparator = RSelect.Separator;
function ChevronDownIcon() {
  return /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
    "path",
    {
      d: "M4 6L8 10L12 6",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round"
    }
  ) });
}
function ChevronUpIcon() {
  return /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
    "path",
    {
      d: "M12 10L8 6L4 10",
      stroke: "currentColor",
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round"
    }
  ) });
}
var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  RSelect.Trigger,
  {
    ref,
    className: cn(
      surface({ tone: "surface", radius: "md" }),
      "flex min-h-[var(--mod-touch-min)] items-center justify-between gap-2 border border-border px-3 py-2 focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)]",
      className
    ),
    ...props,
    children: [
      children,
      /* @__PURE__ */ jsx(RSelect.Icon, { className: "text-fg-muted", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
    ]
  }
));
SelectTrigger.displayName = "SelectTrigger";
var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  RSelect.ScrollUpButton,
  {
    ref,
    className: cn("flex cursor-default items-center justify-center py-1 text-fg-muted", className),
    ...props,
    children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
  }
));
SelectScrollUpButton.displayName = "SelectScrollUpButton";
var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  RSelect.ScrollDownButton,
  {
    ref,
    className: cn("flex cursor-default items-center justify-center py-1 text-fg-muted", className),
    ...props,
    children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
  }
));
SelectScrollDownButton.displayName = "SelectScrollDownButton";
var SelectContent = React19.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(RSelect.Portal, { children: /* @__PURE__ */ jsxs(
  RSelect.Content,
  {
    ref,
    position,
    className: cn(
      surface({ tone: "surface", radius: "lg" }),
      "relative z-50 max-h-96 min-w-32 overflow-hidden border border-border shadow-[var(--mod-shadow-md)]",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
      /* @__PURE__ */ jsx(RSelect.Viewport, { className: "p-1", children }),
      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
    ]
  }
) }));
SelectContent.displayName = "SelectContent";
var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  RSelect.Item,
  {
    ref,
    className: cn(
      "relative flex min-h-[var(--mod-touch-min)] w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(RSelect.ItemIndicator, { "aria-hidden": true, children: "\u2713" }) }),
      /* @__PURE__ */ jsx(RSelect.ItemText, { children })
    ]
  }
));
SelectItem.displayName = "SelectItem";
var FieldContext = React19.createContext(null);
function useFieldControl() {
  return React19.useContext(FieldContext);
}
function Field({ label, htmlFor, hint, error, required, children }) {
  const generatedId = React19.useId();
  const controlId = htmlFor ?? generatedId;
  const hintId = hint ? `${controlId}-hint` : void 0;
  const errorId = error ? `${controlId}-error` : void 0;
  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || void 0;
  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id: controlId, invalid: Boolean(error), required, describedBy }, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
    /* @__PURE__ */ jsxs("label", { htmlFor: controlId, className: "text-sm font-medium text-fg", children: [
      label,
      required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" }) : null
    ] }),
    children,
    hint ? /* @__PURE__ */ jsx("span", { id: hintId, className: "text-sm text-fg-muted", children: hint }) : null,
    error ? /* @__PURE__ */ jsx("span", { id: errorId, role: "alert", className: "text-sm text-danger", children: error }) : null
  ] }) });
}
var inputVariants = cva(
  "w-full rounded-md border border-border bg-surface text-fg focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] read-only:bg-[var(--mod-color-neutral-2)]",
  {
    variants: {
      size: {
        sm: "text-sm px-2 py-1",
        md: "text-base px-3 py-2",
        lg: "text-lg px-4 py-3"
      },
      invalid: {
        true: "border-[var(--mod-color-danger-9)] aria-invalid:border-[var(--mod-color-danger-9)] aria-invalid:focus-visible:outline-[var(--mod-color-danger-9)]",
        false: ""
      }
    },
    defaultVariants: { size: "md", invalid: false }
  }
);
var Input = React19.forwardRef(
  ({ className, size, invalid, type = "text", id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
    const field = useFieldControl();
    const resolvedInvalid = invalid ?? field?.invalid ?? false;
    return /* @__PURE__ */ jsx(
      "input",
      {
        ref,
        type,
        id: id ?? field?.id,
        "aria-invalid": ariaInvalid ?? (resolvedInvalid ? true : void 0),
        "aria-describedby": ariaDescribedBy ?? field?.describedBy,
        "aria-required": props.required ?? field?.required,
        className: cn(inputVariants({ size, invalid: resolvedInvalid }), className),
        ...props
      }
    );
  }
);
Input.displayName = "Input";
function ErrorState({ code, title, message, action, visual, variant = "page", className }) {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "flex flex-col gap-3",
        variant === "page" ? "items-center text-center min-h-screen justify-center p-8" : "items-start text-start py-6 px-0",
        className
      ),
      children: [
        visual != null ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: visual }) : null,
        code != null ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg-muted", children: code }) : null,
        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-fg", children: title }),
        message != null ? /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-muted", children: message }) : null,
        action != null ? /* @__PURE__ */ jsx("div", { children: action }) : null
      ]
    }
  );
}
function readDocumentDirection() {
  if (typeof document === "undefined") return "ltr";
  return document.documentElement.dir === "rtl" ? "rtl" : "ltr";
}
var KEYFRAMES = `@keyframes refresh-signal-sweep-ltr{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes refresh-signal-sweep-rtl{0%{transform:translateX(100%)}100%{transform:translateX(-300%)}}`;
function RefreshSignal({ className, variant = "refreshing" }) {
  const direction = readDocumentDirection();
  return /* @__PURE__ */ jsxs(
    "div",
    {
      "aria-hidden": "true",
      "data-testid": "refresh-signal",
      "data-variant": variant,
      className: cn("pointer-events-none absolute inset-x-0 top-0 h-0.5 overflow-hidden", className),
      children: [
        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
        /* @__PURE__ */ jsx(
          "div",
          {
            "data-testid": "refresh-signal-bar",
            className: cn(
              "h-full w-1/3 motion-reduce:animate-none",
              variant === "error" ? "bg-danger" : "bg-accent",
              direction === "rtl" ? "animate-[refresh-signal-sweep-rtl_1.2s_ease-in-out_infinite]" : "animate-[refresh-signal-sweep-ltr_1.2s_ease-in-out_infinite]"
            )
          }
        )
      ]
    }
  );
}
var DEFAULT_DELAY_MS = 200;
var DEFAULT_MIN_DURATION_MS = 400;
function SkeletonGuard({
  pending,
  children,
  delayMs = DEFAULT_DELAY_MS,
  minDurationMs = DEFAULT_MIN_DURATION_MS
}) {
  const [visible, setVisible] = React19.useState(false);
  const shownAtRef = React19.useRef(null);
  React19.useEffect(() => {
    if (pending) {
      if (shownAtRef.current !== null) return void 0;
      const delayTimer = globalThis.setTimeout(() => {
        shownAtRef.current = Date.now();
        setVisible(true);
      }, delayMs);
      return () => {
        globalThis.clearTimeout(delayTimer);
      };
    }
    if (shownAtRef.current === null) {
      return void 0;
    }
    const remaining = Math.max(0, minDurationMs - (Date.now() - shownAtRef.current));
    const holdTimer = globalThis.setTimeout(() => {
      shownAtRef.current = null;
      setVisible(false);
    }, remaining);
    return () => {
      globalThis.clearTimeout(holdTimer);
    };
  }, [pending, delayMs, minDurationMs]);
  return visible ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
}
function defaultErrorMessage(error) {
  return error instanceof Error && error.message ? error.message : "Failed to load.";
}
function defaultErrorFallback(retry, error) {
  return /* @__PURE__ */ jsx(
    ErrorState,
    {
      variant: "inline",
      title: "Something went wrong",
      message: defaultErrorMessage(error),
      action: /* @__PURE__ */ jsx(Button, { onClick: retry, children: "Retry" })
    }
  );
}
function defaultStaleErrorFallback(retry, error) {
  return /* @__PURE__ */ jsxs("div", { className: "relative mt-2 flex items-center gap-3 pt-2 text-sm text-danger", children: [
    /* @__PURE__ */ jsx(RefreshSignal, { variant: "error" }),
    /* @__PURE__ */ jsx("span", { children: defaultErrorMessage(error) }),
    /* @__PURE__ */ jsx(Button, { size: "sm", onClick: retry, children: "Retry" })
  ] });
}
function useMounted() {
  const [mounted, setMounted] = React19.useState(false);
  React19.useEffect(() => {
    setMounted(true);
  }, []);
  return mounted;
}
function QueryBoundary({
  query,
  skeleton,
  children,
  errorFallback = defaultErrorFallback,
  staleErrorFallback = defaultStaleErrorFallback,
  showRefreshing = true
}) {
  const mounted = useMounted();
  const { data, isPending, isError, refetch, isFetching, isStale, isPaused, error } = query;
  const settledRef = React19.useRef(true);
  const [announce, setAnnounce] = React19.useState("");
  React19.useEffect(() => {
    if (isFetching) {
      settledRef.current = false;
      return;
    }
    if (!settledRef.current) {
      settledRef.current = true;
      if (data !== void 0) setAnnounce("updated");
    }
  }, [isFetching, data]);
  const effectiveData = mounted ? data : void 0;
  const effectivePending = mounted ? isPending : true;
  const liveRegion = /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: announce });
  if (effectiveData !== void 0 && !isError) {
    const showRefreshHint = showRefreshing === true && isFetching === true && (typeof isStale === "boolean" ? isStale : true) && !isPaused;
    return /* @__PURE__ */ jsxs("div", { "aria-busy": !!isFetching, className: "relative", children: [
      liveRegion,
      showRefreshHint ? /* @__PURE__ */ jsx(RefreshSignal, {}) : null,
      isPaused ? /* @__PURE__ */ jsx("div", { role: "status", className: "mb-1 text-xs text-fg-muted", children: "Showing cached data" }) : null,
      children(effectiveData)
    ] });
  }
  if (effectiveData !== void 0 && isError) {
    return /* @__PURE__ */ jsxs("div", { "aria-busy": !!isFetching, className: "relative", children: [
      liveRegion,
      children(effectiveData),
      staleErrorFallback(refetch, error)
    ] });
  }
  if (effectiveData === void 0 && effectivePending) {
    return /* @__PURE__ */ jsx("div", { "aria-busy": "true", children: /* @__PURE__ */ jsx(SkeletonGuard, { pending: true, children: skeleton }) });
  }
  return /* @__PURE__ */ jsx("div", { ref: (el) => el?.focus(), tabIndex: -1, role: "alert", children: errorFallback(refetch, error) });
}
var textareaVariants = cva(
  "w-full border border-border bg-surface text-fg rounded-md focus-visible:outline focus-visible:outline-accent disabled:opacity-50 disabled:cursor-not-allowed px-3 py-2 text-base",
  {
    variants: {
      invalid: {
        true: "border-danger",
        false: ""
      }
    },
    defaultVariants: { invalid: false }
  }
);
var Textarea = React19.forwardRef(
  ({ className, invalid, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
    const field = useFieldControl();
    const resolvedInvalid = invalid ?? field?.invalid ?? false;
    return /* @__PURE__ */ jsx(
      "textarea",
      {
        ref,
        id: id ?? field?.id,
        "aria-invalid": ariaInvalid ?? (resolvedInvalid ? true : void 0),
        "aria-describedby": ariaDescribedBy ?? field?.describedBy,
        "aria-required": props.required ?? field?.required,
        className: cn(textareaVariants({ invalid: resolvedInvalid }), className),
        ...props
      }
    );
  }
);
Textarea.displayName = "Textarea";
var tableClass = "w-full border-collapse text-fg text-sm";
var headClass = "border-b border-border bg-surface-raised";
var rowClass = "border-b border-border";
var cellClass = "px-3 py-2 text-left align-middle";
var thClass = cn(cellClass, "font-semibold text-fg");
var sortButtonClass = "inline-flex w-full items-center gap-1 bg-transparent text-inherit font-semibold focus-visible:outline focus-visible:outline-accent rounded-sm";
function TableRoot({ caption, children }) {
  return /* @__PURE__ */ jsxs("table", { className: tableClass, children: [
    caption ? /* @__PURE__ */ jsx("caption", { className: "px-3 py-2 text-left text-sm font-semibold text-fg", children: caption }) : null,
    children
  ] });
}
function TableHead({ children, className, ...props }) {
  return /* @__PURE__ */ jsx("thead", { className: cn(headClass, className), ...props, children });
}
function TableBody({ children, className, ...props }) {
  return /* @__PURE__ */ jsx("tbody", { className, ...props, children });
}
function TableRow({ children, className, ...props }) {
  return /* @__PURE__ */ jsx("tr", { className: cn(rowClass, className), ...props, children });
}
function TableTh({ scope = "col", sort, onSort, children, className, ...props }) {
  const ariaSort = sort === "asc" ? "ascending" : sort === "desc" ? "descending" : sort === "none" ? "none" : void 0;
  return /* @__PURE__ */ jsx("th", { scope, "aria-sort": ariaSort, className: cn(thClass, className), ...props, children: sort !== void 0 && onSort ? /* @__PURE__ */ jsx("button", { type: "button", className: sortButtonClass, onClick: onSort, children }) : children });
}
function TableTd({ children, className, ...props }) {
  return /* @__PURE__ */ jsx("td", { className: cn(cellClass, className), ...props, children });
}
var Table = Object.assign(TableRoot, {
  Head: TableHead,
  Body: TableBody,
  Row: TableRow,
  Th: TableTh,
  Td: TableTd
});
var Checkbox = React19.forwardRef(
  ({ id, className, ...props }, ref) => {
    const field = useFieldControl();
    return /* @__PURE__ */ jsx(
      RCheckbox.Root,
      {
        ref,
        id: id ?? field?.id,
        "aria-describedby": props["aria-describedby"] ?? field?.describedBy,
        className: cn(
          "inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center rounded-sm border border-border bg-surface text-[var(--mod-color-accent-contrast)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] data-[state=checked]:border-[var(--mod-color-accent-9)] data-[state=checked]:bg-[var(--mod-color-accent-9)] data-[state=checked]:hover:bg-[var(--mod-color-accent-10)] data-[state=checked]:active:bg-[var(--mod-color-accent-11)] data-[state=indeterminate]:border-[var(--mod-color-accent-9)] data-[state=indeterminate]:bg-[var(--mod-color-accent-9)]",
          className
        ),
        ...props,
        children: /* @__PURE__ */ jsx(RCheckbox.Indicator, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className: "h-3 w-3", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4" }) }) })
      }
    );
  }
);
Checkbox.displayName = "Checkbox";
function RadioGroup({ className, children, ...props }) {
  return /* @__PURE__ */ jsx(RRadio.Root, { className: cn("flex flex-col gap-2", className), ...props, children });
}
var Radio = React19.forwardRef(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
    RRadio.Item,
    {
      ref,
      className: cn(
        "h-4 w-4 rounded-full border border-border bg-surface focus-visible:outline focus-visible:outline-accent disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:border-accent",
        className
      ),
      ...props,
      children: /* @__PURE__ */ jsx(RRadio.Indicator, { className: "flex h-full w-full items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-accent" })
    }
  )
);
Radio.displayName = "Radio";
var variantClasses = {
  heading: "h-8 w-3/5 rounded",
  block: "h-48 w-full rounded",
  text: "h-4 w-full rounded",
  circle: "h-8 w-8 rounded-full"
};
function Skeleton({ variant = "text", className }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      role: "presentation",
      "aria-hidden": "true",
      className: cn("animate-pulse bg-surface", variantClasses[variant], className)
    }
  );
}
var Switch = React19.forwardRef(
  ({ id, className, ...props }, ref) => {
    const field = useFieldControl();
    return /* @__PURE__ */ jsx(
      RSwitch.Root,
      {
        ref,
        id: id ?? field?.id,
        "aria-describedby": props["aria-describedby"] ?? field?.describedBy,
        className: cn(
          "inline-flex h-5 w-9 items-center rounded-full border border-border bg-surface px-0.5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:bg-accent",
          className
        ),
        ...props,
        children: /* @__PURE__ */ jsx(RSwitch.Thumb, { className: "block h-4 w-4 rounded-full bg-fg transition-transform data-[state=checked]:translate-x-4" })
      }
    );
  }
);
Switch.displayName = "Switch";
function DataList({ items, className }) {
  return /* @__PURE__ */ jsx("dl", { className: cn("grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2", className), children: items.map((item, i) => /* @__PURE__ */ jsxs(React19.Fragment, { children: [
    /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-fg-muted", children: item.term }),
    /* @__PURE__ */ jsx("dd", { className: "text-sm text-fg", children: item.value })
  ] }, i)) });
}
var btn = "rounded-md border border-border bg-surface px-2 py-1 text-sm text-fg disabled:opacity-50 disabled:cursor-not-allowed";
function Pagination({ page, pageCount, onPageChange, label = "Pagination", className }) {
  const canPrev = page > 1;
  const canNext = page < pageCount;
  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: cn("flex items-center gap-2", className), children: [
    /* @__PURE__ */ jsx("button", { type: "button", className: btn, disabled: !canPrev, onClick: () => canPrev && onPageChange(page - 1), children: "Previous" }),
    /* @__PURE__ */ jsxs("span", { "aria-current": "page", className: "text-sm text-fg", children: [
      page,
      " / ",
      pageCount
    ] }),
    /* @__PURE__ */ jsx("button", { type: "button", className: btn, disabled: !canNext, onClick: () => canNext && onPageChange(page + 1), children: "Next" })
  ] });
}
var DASHBOARD_MAIN_ID = "dashboard-main";
var DASHBOARD_SIDEBAR_ID = "dashboard-sidebar";
function DashboardShell({
  sidebar,
  topbar,
  children,
  sidebarCollapsed = false,
  onSidebarToggle
}) {
  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen flex-col bg-bg text-fg md:flex-row", children: [
    /* @__PURE__ */ jsx(
      "a",
      {
        href: `#${DASHBOARD_MAIN_ID}`,
        className: "sr-only focus:not-sr-only focus:absolute focus:left-0 focus:top-0 focus:z-50 focus:bg-surface focus:text-fg focus:outline focus:outline-accent focus:p-2",
        children: "Skip to main content"
      }
    ),
    /* @__PURE__ */ jsxs(
      "nav",
      {
        id: DASHBOARD_SIDEBAR_ID,
        "aria-label": "Sidebar",
        className: cn(
          "border-b border-border bg-surface md:border-b-0 md:border-r",
          sidebarCollapsed ? "hidden md:block" : "block"
        ),
        children: [
          onSidebarToggle ? /* @__PURE__ */ jsx(
            "button",
            {
              type: "button",
              className: "w-full border-b border-border bg-surface-raised px-3 py-2 text-left text-sm font-medium text-fg focus-visible:outline focus-visible:outline-accent md:hidden",
              "aria-expanded": !sidebarCollapsed,
              "aria-controls": DASHBOARD_SIDEBAR_ID,
              onClick: onSidebarToggle,
              children: "Toggle sidebar"
            }
          ) : null,
          sidebar
        ]
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
      topbar ? /* @__PURE__ */ jsx("header", { role: "banner", children: topbar }) : null,
      /* @__PURE__ */ jsx("main", { id: DASHBOARD_MAIN_ID, className: "flex-1 p-4", children })
    ] })
  ] });
}
var ToastContext = React19.createContext(null);
var toastVariants = cva(
  "pointer-events-auto flex w-full max-w-sm flex-col gap-1 rounded-md border border-border p-4 shadow-[var(--mod-shadow-sm)]",
  {
    variants: {
      tone: {
        neutral: "bg-surface text-fg",
        success: "bg-success text-success-fg",
        warning: "bg-warning text-warning-fg",
        danger: "bg-danger text-danger-fg"
      }
    },
    defaultVariants: { tone: "neutral" }
  }
);
function nextToastId() {
  return globalThis.crypto?.randomUUID?.() ?? `toast-${Math.random().toString(36).slice(2)}`;
}
function ToastProvider({ children }) {
  const [toasts, setToasts] = React19.useState([]);
  const dismiss = React19.useCallback((id) => {
    setToasts(
      (current) => id ? current.map((toast2) => toast2.id === id ? { ...toast2, open: false } : toast2) : current.map((toast2) => ({ ...toast2, open: false }))
    );
  }, []);
  const toast = React19.useCallback((options) => {
    const id = nextToastId();
    setToasts((current) => [...current, { ...options, id, open: true }]);
  }, []);
  const handleOpenChange = React19.useCallback((id, open) => {
    if (!open) {
      setToasts((current) => current.filter((item) => item.id !== id));
    }
  }, []);
  return /* @__PURE__ */ jsx(ToastContext.Provider, { value: { toast, dismiss }, children: /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: "right", children: [
    children,
    toasts.map((item) => /* @__PURE__ */ jsx(ToastItem, { item, onOpenChange: handleOpenChange }, item.id)),
    /* @__PURE__ */ jsx(RadixToast.Viewport, { className: "fixed bottom-0 right-0 z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:max-w-sm" })
  ] }) });
}
function ToastItem({
  item,
  onOpenChange
}) {
  const tone = item.tone ?? "neutral";
  const type = tone === "danger" ? "foreground" : "background";
  return /* @__PURE__ */ jsxs(
    RadixToast.Root,
    {
      open: item.open,
      type,
      duration: item.durationMs,
      className: cn(toastVariants({ tone })),
      onOpenChange: (open) => onOpenChange(item.id, open),
      children: [
        /* @__PURE__ */ jsx(RadixToast.Title, { className: "text-sm font-semibold", children: item.title }),
        item.description ? /* @__PURE__ */ jsx(RadixToast.Description, { className: "text-sm opacity-90", children: item.description }) : null,
        /* @__PURE__ */ jsx(
          RadixToast.Close,
          {
            "aria-label": "Dismiss notification",
            className: "absolute right-2 top-2 rounded-sm text-inherit opacity-70 hover:bg-[var(--mod-color-neutral-a3)] active:bg-[var(--mod-color-neutral-a4)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]",
            children: "\xD7"
          }
        )
      ]
    }
  );
}
function useToast() {
  const context = React19.useContext(ToastContext);
  if (!context) {
    throw new Error("useToast must be used within ToastProvider");
  }
  return context;
}
function Card({ header, footer, children, padded = true, className }) {
  const headingId = React19.useId();
  const pad = padded ? "p-4" : "";
  return /* @__PURE__ */ jsxs(
    "article",
    {
      "aria-labelledby": header != null ? headingId : void 0,
      className: cn("rounded-lg border border-border bg-surface text-fg", className),
      children: [
        header != null ? /* @__PURE__ */ jsx("header", { id: headingId, className: cn("border-b border-border", pad), children: header }) : null,
        /* @__PURE__ */ jsx("div", { className: pad, children }),
        footer != null ? /* @__PURE__ */ jsx("footer", { className: cn("border-t border-border", pad), children: footer }) : null
      ]
    }
  );
}
var avatarVariants = cva(
  "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-[var(--mod-color-accent-3)] text-[var(--mod-color-accent-11)]",
  {
    variants: { size: { sm: "h-6 w-6 text-xs", md: "h-8 w-8 text-sm", lg: "h-12 w-12 text-base" } },
    defaultVariants: { size: "md" }
  }
);
function Avatar({ src, alt, fallback, size, className }) {
  return /* @__PURE__ */ jsxs(RAvatar.Root, { className: cn(avatarVariants({ size }), className), children: [
    src ? /* @__PURE__ */ jsx(RAvatar.Image, { src, alt, className: "h-full w-full object-cover" }) : null,
    /* @__PURE__ */ jsx(RAvatar.Fallback, { className: "font-medium data-[state=visible]:bg-[var(--mod-color-accent-3)]", children: fallback })
  ] });
}
var AspectRatio = React19.forwardRef(
  ({ asChild, children, className, gap = "4", ratio = 16 / 9, style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const aspectStyle = {
      "--aspect-gap": `var(--mod-space-${gap})`,
      aspectRatio: `${ratio}`,
      minWidth: 0,
      paddingBlock: "var(--aspect-gap)",
      ...style
    };
    return /* @__PURE__ */ jsx(
      Comp,
      {
        ref,
        className: cn("@container grid min-w-0 overflow-hidden rounded-md bg-surface", className),
        style: aspectStyle,
        ...props,
        children: /* @__PURE__ */ jsx("div", { className: "min-w-0", children })
      }
    );
  }
);
AspectRatio.displayName = "AspectRatio";
var DropdownMenu = RMenu.Root;
var DropdownMenuTrigger = RMenu.Trigger;
var DropdownMenuGroup = RMenu.Group;
var DropdownMenuLabel = RMenu.Label;
var DropdownMenuSeparator = RMenu.Separator;
var DropdownMenuRadioGroup = RMenu.RadioGroup;
var DropdownMenuContent = React19.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(RMenu.Portal, { children: /* @__PURE__ */ jsx(
  RMenu.Content,
  {
    ref,
    sideOffset,
    className: cn("min-w-32 rounded-md border border-border bg-surface p-1 text-fg shadow-[var(--mod-shadow-md)]", className),
    ...props
  }
) }));
DropdownMenuContent.displayName = "DropdownMenuContent";
var DropdownMenuItem = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  RMenu.Item,
  {
    ref,
    className: cn(
      "flex min-h-[var(--mod-touch-min)] cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]",
      className
    ),
    ...props
  }
));
DropdownMenuItem.displayName = "DropdownMenuItem";
var DropdownMenuCheckboxItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  RMenu.CheckboxItem,
  {
    ref,
    className: cn(
      "relative flex min-h-[var(--mod-touch-min)] cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(RMenu.ItemIndicator, { "aria-hidden": true, children: "\u2713" }) }),
      children
    ]
  }
));
DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
var DropdownMenuRadioItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  RMenu.RadioItem,
  {
    ref,
    className: cn(
      "relative flex min-h-[var(--mod-touch-min)] cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-[var(--mod-color-accent-11)] outline-none focus:bg-[var(--mod-color-accent-4)] active:bg-[var(--mod-color-accent-5)] data-[disabled]:opacity-[var(--mod-opacity-disabled)]",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx("span", { className: "absolute left-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx(RMenu.ItemIndicator, { "aria-hidden": true, children: "\u2022" }) }),
      children
    ]
  }
));
DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
var alignClass = {
  start: "items-start",
  center: "items-center",
  end: "items-end"
};
var justifyClass = {
  start: "justify-start",
  center: "justify-center",
  end: "justify-end",
  between: "justify-between"
};
var Cluster = React19.forwardRef(
  ({ asChild, className, gap = "3", align = "center", justify = "start", style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const clusterStyle = {
      "--cluster-gap": `var(--mod-space-${gap})`,
      gap: "var(--cluster-gap)",
      minWidth: 0,
      ...style
    };
    return /* @__PURE__ */ jsx(
      Comp,
      {
        ref,
        className: cn("@container flex flex-wrap", alignClass[align], justifyClass[justify], className),
        style: clusterStyle,
        ...props
      }
    );
  }
);
Cluster.displayName = "Cluster";
var Container = React19.forwardRef(
  ({ asChild, className, gap = "6", size = "4xl", style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const containerStyle = {
      "--container-gap": `var(--mod-space-${gap})`,
      marginInline: "auto",
      maxInlineSize: `var(--container-${size})`,
      minWidth: 0,
      paddingInline: "var(--container-gap)",
      width: "100%",
      ...style
    };
    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("@container block", className), style: containerStyle, ...props });
  }
);
Container.displayName = "Container";
var Divider = React19.forwardRef(
  ({ asChild, className, gap = "4", orientation = "horizontal", style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const dividerStyle = {
      "--divider-gap": `var(--mod-space-${gap})`,
      backgroundColor: "var(--mod-color-border)",
      blockSize: orientation === "horizontal" ? "var(--mod-border-thin)" : "100%",
      inlineSize: orientation === "horizontal" ? "100%" : "var(--mod-border-thin)",
      marginBlock: orientation === "horizontal" ? "var(--divider-gap)" : void 0,
      marginInline: orientation === "vertical" ? "var(--divider-gap)" : void 0,
      minWidth: 0,
      ...style
    };
    return /* @__PURE__ */ jsx(
      Comp,
      {
        ref,
        role: "separator",
        "aria-orientation": orientation,
        className: cn("@container shrink-0 self-stretch", className),
        style: dividerStyle,
        ...props
      }
    );
  }
);
Divider.displayName = "Divider";
var columnsClass = {
  1: "grid-cols-1",
  2: "grid-cols-1 @md:grid-cols-2",
  3: "grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3"
};
var Grid = React19.forwardRef(
  ({ asChild, className, gap = "4", columns = 3, style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const gridStyle = {
      "--grid-gap": `var(--mod-space-${gap})`,
      gap: "var(--grid-gap)",
      minWidth: 0,
      ...style
    };
    return /* @__PURE__ */ jsx(
      Comp,
      {
        ref,
        className: cn("@container grid min-w-0", columnsClass[columns], className),
        style: gridStyle,
        ...props
      }
    );
  }
);
Grid.displayName = "Grid";
var ScrollArea = React19.forwardRef(
  ({ asChild, className, gap = "4", style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const scrollStyle = {
      "--scroll-gap": `var(--mod-space-${gap})`,
      minWidth: 0,
      overflow: "auto",
      paddingBlock: "var(--scroll-gap)",
      paddingInline: "var(--scroll-gap)",
      ...style
    };
    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("@container block min-w-0", className), style: scrollStyle, ...props });
  }
);
ScrollArea.displayName = "ScrollArea";
var alignClass2 = {
  stretch: "items-stretch",
  start: "items-start",
  center: "items-center",
  end: "items-end"
};
var justifyClass2 = {
  start: "justify-start",
  center: "justify-center",
  end: "justify-end",
  between: "justify-between"
};
var inlineClass = {
  never: "",
  md: "@md:flex-row",
  lg: "@lg:flex-row"
};
var Stack = React19.forwardRef(
  ({ asChild, className, gap = "4", inlineAt = "never", align = "stretch", justify = "start", style, ...props }, ref) => {
    const Comp = asChild ? Slot : "div";
    const stackStyle = {
      "--stack-gap": `var(--mod-space-${gap})`,
      gap: "var(--stack-gap)",
      minWidth: 0,
      ...style
    };
    return /* @__PURE__ */ jsx(
      Comp,
      {
        ref,
        className: cn("@container flex flex-col", alignClass2[align], justifyClass2[justify], inlineClass[inlineAt], className),
        style: stackStyle,
        ...props
      }
    );
  }
);
Stack.displayName = "Stack";
function Tooltip({ content, children, side = "top", className }) {
  return /* @__PURE__ */ jsx(RTooltip.Provider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(RTooltip.Root, { children: [
    /* @__PURE__ */ jsx(RTooltip.Trigger, { asChild: true, children }),
    /* @__PURE__ */ jsx(RTooltip.Portal, { children: /* @__PURE__ */ jsx(
      RTooltip.Content,
      {
        side,
        className: cn(
          "rounded-md border border-border bg-[var(--mod-color-neutral-3)] px-2 py-1 text-xs text-[var(--mod-color-neutral-11)] shadow-[var(--mod-shadow-sm)]",
          className
        ),
        children: content
      }
    ) })
  ] }) });
}
var calendarClassNames = {
  root: cn(surface({ tone: "surface", radius: "lg" }), "p-3"),
  month_caption: "flex items-center justify-center text-fg",
  nav: "flex items-center gap-1",
  button_previous: cn(
    surface({ tone: "surface", radius: "md" }),
    "inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center border border-border hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"
  ),
  button_next: cn(
    surface({ tone: "surface", radius: "md" }),
    "inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center border border-border hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"
  ),
  month_grid: "w-full border-collapse",
  weekdays: "text-fg-muted",
  weekday: "text-center text-sm font-normal",
  week: "",
  day: "p-0 text-center",
  day_button: cn(
    "inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center rounded-md text-sm text-fg hover:bg-[var(--mod-color-accent-4)] hover:text-[var(--mod-color-accent-contrast)] active:bg-[var(--mod-color-accent-5)] active:text-[var(--mod-color-accent-contrast)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)]"
  ),
  selected: "bg-[var(--mod-color-accent-9)] text-[var(--mod-color-accent-contrast)] hover:bg-[var(--mod-color-accent-10)] hover:text-[var(--mod-color-accent-contrast)] active:bg-[var(--mod-color-accent-11)]",
  today: "border border-border",
  outside: "text-fg-muted opacity-50",
  disabled: "text-fg-muted opacity-[var(--mod-opacity-disabled)]"
};
function Calendar({ selected, onSelect, mode = "single", month, onMonthChange }) {
  if (mode === "multiple") {
    return /* @__PURE__ */ jsx(
      DayPicker,
      {
        mode: "multiple",
        selected,
        month,
        onMonthChange,
        onSelect: (dates) => onSelect?.(dates?.[dates.length - 1]),
        classNames: calendarClassNames,
        showOutsideDays: true
      }
    );
  }
  if (mode === "range") {
    const range = selected;
    return /* @__PURE__ */ jsx(
      DayPicker,
      {
        mode: "range",
        selected: range ? { from: range.from, to: range.to } : void 0,
        month,
        onMonthChange,
        onSelect: (r) => onSelect?.(r?.to ?? r?.from),
        classNames: calendarClassNames,
        showOutsideDays: true
      }
    );
  }
  return /* @__PURE__ */ jsx(
    DayPicker,
    {
      mode: "single",
      selected,
      month,
      onMonthChange,
      onSelect: (date) => onSelect?.(date),
      classNames: calendarClassNames,
      showOutsideDays: true
    }
  );
}
function ColorPicker({
  value,
  onChange,
  presets,
  className,
  ...aria
}) {
  return /* @__PURE__ */ jsx(
    RadioGroup,
    {
      value,
      onValueChange: onChange,
      className: cn("flex flex-row flex-wrap gap-3", className),
      ...aria,
      children: presets.map((preset) => /* @__PURE__ */ jsxs(
        "label",
        {
          className: "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-fg hover:bg-[var(--mod-color-accent-a3)] active:bg-[var(--mod-color-accent-a4)]",
          children: [
            /* @__PURE__ */ jsx(Radio, { value: preset.value, "aria-label": preset.label }),
            /* @__PURE__ */ jsx(
              "span",
              {
                className: "h-4 w-4 shrink-0 rounded-full border border-border",
                style: { backgroundColor: preset.value },
                "aria-hidden": true
              }
            ),
            /* @__PURE__ */ jsx("span", { children: preset.label })
          ]
        },
        preset.id
      ))
    }
  );
}
function PalettePicker({
  value,
  onChange,
  options,
  className,
  ...aria
}) {
  if (options.length === 0) return null;
  const selected = options.find((o) => o.id === value) ?? options[0];
  return /* @__PURE__ */ jsx("div", { className: cn("@container", className), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 @md:flex-row @md:items-start", children: [
    /* @__PURE__ */ jsx(
      RadioGroup,
      {
        value,
        onValueChange: onChange,
        className: "flex flex-col gap-2",
        ...aria,
        children: options.map((option) => /* @__PURE__ */ jsxs(
          "label",
          {
            className: "flex cursor-pointer items-center gap-3 text-sm text-fg",
            children: [
              /* @__PURE__ */ jsx(Radio, { value: option.id, "aria-label": option.label }),
              /* @__PURE__ */ jsx("span", { className: "flex flex-row flex-wrap gap-1", "aria-hidden": true, children: option.swatches.map((color, i) => /* @__PURE__ */ jsx(
                "span",
                {
                  className: "h-4 w-4 shrink-0 rounded-full border border-border bg-[var(--swatch)]",
                  style: { ["--swatch"]: color }
                },
                i
              )) }),
              /* @__PURE__ */ jsx("span", { children: option.label })
            ]
          },
          option.id
        ))
      }
    ),
    /* @__PURE__ */ jsxs(
      "div",
      {
        "data-testid": "palette-preview",
        "aria-hidden": true,
        className: "flex w-full flex-col gap-2 rounded-md border bg-[var(--pp-bg)] p-4 text-[var(--pp-fg)] @md:flex-1 @md:min-w-0",
        style: {
          ["--pp-bg"]: selected.preview.bg,
          ["--pp-surface"]: selected.preview.surface,
          ["--pp-fg"]: selected.preview.fg,
          ["--pp-fg-muted"]: selected.preview.fgMuted,
          ["--pp-accent"]: selected.preview.accent,
          ["--pp-accent-fg"]: selected.preview.accentFg,
          ["--pp-border"]: selected.preview.border,
          borderColor: "var(--pp-border)"
        },
        children: [
          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--pp-fg)]", children: selected.label }),
          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--pp-fg-muted)]", children: "The quick brown fox jumps over the lazy dog." }),
          /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-2 rounded-sm bg-[var(--pp-surface)] p-2 text-xs text-[var(--pp-fg)]", children: [
            "Surface block",
            /* @__PURE__ */ jsx("span", { className: "inline-flex w-fit rounded-sm bg-[var(--pp-accent)] px-3 py-1 text-xs text-[var(--pp-accent-fg)]", children: "Primary action" })
          ] })
        ]
      }
    )
  ] }) });
}
function FontPicker({ value, onChange, fonts, "aria-label": ariaLabel }) {
  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: onChange, children: [
    /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": ariaLabel ?? "Font", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select font" }) }),
    /* @__PURE__ */ jsx(SelectContent, { children: fonts.map((font) => /* @__PURE__ */ jsx(
      SelectItem,
      {
        value: font.stack,
        style: { fontFamily: font.stack },
        children: font.label
      },
      font.id
    )) })
  ] });
}
function Breadcrumbs({ items, separator = "/", className }) {
  if (items.length === 0) return null;
  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center gap-1 text-sm", className), children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1 list-none m-0 p-0", children: items.map((item, index) => {
    const isLast = index === items.length - 1;
    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
      index > 0 && /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: separator }),
      item.href ? /* @__PURE__ */ jsx(
        "a",
        {
          href: item.href,
          "aria-current": isLast ? "page" : void 0,
          className: "text-fg-muted hover:text-fg transition-colors",
          children: item.label
        }
      ) : item.onClick ? /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          onClick: item.onClick,
          "aria-current": isLast ? "page" : void 0,
          className: "text-fg-muted hover:text-fg transition-colors cursor-pointer bg-transparent border-none p-0",
          children: item.label
        }
      ) : /* @__PURE__ */ jsx("span", { "aria-current": "page", className: "text-fg font-medium", children: item.label })
    ] }, index);
  }) }) });
}

export { AspectRatio, Avatar, Badge, Breadcrumbs, Button, Calendar, Card, Checkbox, Cluster, ColorPicker, Container, DASHBOARD_MAIN_ID, DASHBOARD_SIDEBAR_ID, DashboardShell, DataList, Dialog, DialogClose, DialogContent, DialogDescription, DialogPortal, DialogTitle, DialogTrigger, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, ErrorState, Field, FontPicker, Grid, Input, Pagination, PalettePicker, QueryBoundary, Radio, RadioGroup, RefreshSignal, ScrollArea, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SkeletonGuard, Stack, Switch, Table, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerWithBadge, Textarea, ToastProvider, Tooltip, cn, surface, tabBadgeTone, useFieldControl, useToast };