@staqforce.studio/staqui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1486 @@
+"use client";
+"use client";
+
+// src/shared.ts
+import { useState } from "react";
+var cx = (...values) => values.filter(Boolean).join(" ");
+function useControllable(value, defaultValue, onChange, controlled = value !== void 0) {
+  const [internal, setInternal] = useState(defaultValue);
+  return [
+    controlled ? value : internal,
+    (next) => {
+      if (!controlled) setInternal(next);
+      onChange?.(next);
+    }
+  ];
+}
+
+// src/foundations.tsx
+import {
+  createContext,
+  useContext,
+  createElement,
+  useId,
+  useState as useState2
+} from "react";
+import {
+  Check,
+  X,
+  Search,
+  Plus,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Info,
+  CircleAlert,
+  Settings,
+  Copy,
+  ArrowUpRight,
+  Package,
+  Upload,
+  Moon,
+  Sun,
+  SlidersHorizontal,
+  Code,
+  Layers,
+  CheckCheck
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StaqContext = createContext({ theme: "light", density: "compact" });
+var useStaq = () => useContext(StaqContext);
+function StaqProvider({
+  theme = "light",
+  density = "compact",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(StaqContext.Provider, { value: { theme, density }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-staq-theme": theme,
+      "data-staq-density": density,
+      className: cx("sq-root", className),
+      ...props
+    }
+  ) });
+}
+var icons = {
+  check: Check,
+  close: X,
+  search: Search,
+  plus: Plus,
+  chevronDown: ChevronDown,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  info: Info,
+  warning: CircleAlert,
+  settings: Settings,
+  copy: Copy,
+  arrowUpRight: ArrowUpRight,
+  package: Package,
+  upload: Upload,
+  moon: Moon,
+  sun: Sun,
+  sliders: SlidersHorizontal,
+  code: Code,
+  layers: Layers,
+  complete: CheckCheck
+};
+function Icon({
+  name = "info",
+  source,
+  size = 18,
+  label,
+  className
+}) {
+  const Component = source ?? icons[name];
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      size,
+      strokeWidth: 1.7,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className
+    }
+  );
+}
+function Box({
+  padding = "4",
+  background = "transparent",
+  border = false,
+  radius = "medium",
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("sq-box", className),
+      "data-background": background,
+      "data-border": border,
+      "data-radius": radius,
+      style: { padding: `var(--sq-space-${padding})`, ...style },
+      ...props
+    }
+  );
+}
+function Stack({
+  direction = "column",
+  gap = "4",
+  align,
+  justify,
+  wrap = true,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("sq-stack", className),
+      style: {
+        flexDirection: direction,
+        gap: `var(--sq-space-${gap})`,
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap ? "wrap" : "nowrap",
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function Grid({
+  columns = 2,
+  minColumnWidth = "14rem",
+  gap = "4",
+  style,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("sq-grid", className),
+      style: {
+        "--sq-columns": columns,
+        "--sq-grid-min": minColumnWidth,
+        gap: `var(--sq-space-${gap})`,
+        ...style
+      },
+      ...props
+    }
+  );
+}
+function QueryContainer({
+  name = "staq",
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { containerType: "inline-size", containerName: name, ...style },
+      ...props
+    }
+  );
+}
+function Divider({
+  vertical = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      className: cx("sq-divider", className),
+      "data-vertical": vertical,
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      ...props
+    }
+  );
+}
+function Heading({
+  level = 2,
+  size = "medium",
+  className,
+  ...props
+}) {
+  return createElement(`h${level}`, {
+    className: cx("sq-heading", `sq-heading-${size}`, className),
+    ...props
+  });
+}
+function Text({
+  tone = "neutral",
+  weight = "regular",
+  size = "medium",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("sq-text", className),
+      "data-tone": tone,
+      "data-weight": weight,
+      "data-size": size,
+      ...props
+    }
+  );
+}
+function Paragraph({
+  tone = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cx("sq-paragraph", className), "data-tone": tone, ...props });
+}
+function Number({
+  value,
+  locale = "en-US",
+  format,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Text, { className: cx("sq-number", className), ...props, children: new Intl.NumberFormat(locale, format).format(value) });
+}
+function OrderedList(props) {
+  return /* @__PURE__ */ jsx("ol", { className: "sq-list", ...props });
+}
+function UnorderedList(props) {
+  return /* @__PURE__ */ jsx("ul", { className: "sq-list", ...props });
+}
+function ListItem(props) {
+  return /* @__PURE__ */ jsx("li", { ...props });
+}
+function Section({
+  heading,
+  description,
+  action,
+  children,
+  className,
+  ...props
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": heading ? id : void 0,
+      className: cx("sq-section", className),
+      ...props,
+      children: [
+        (heading || action) && /* @__PURE__ */ jsxs("header", { className: "sq-section-header", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            heading && /* @__PURE__ */ jsx(Heading, { id, children: heading }),
+            description && /* @__PURE__ */ jsx(Paragraph, { tone: "muted", children: description })
+          ] }),
+          action
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function Page({
+  heading,
+  description,
+  action,
+  aside,
+  breadcrumbs,
+  width = "default",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("sq-page", className), "data-width": width, ...props, children: [
+    breadcrumbs,
+    /* @__PURE__ */ jsxs("header", { className: "sq-section-header", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        heading && /* @__PURE__ */ jsx(Heading, { level: 1, size: "large", children: heading }),
+        description && /* @__PURE__ */ jsx(Paragraph, { tone: "muted", children: description })
+      ] }),
+      action
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: aside ? "sq-page-layout" : void 0, children: [
+      /* @__PURE__ */ jsx("div", { children }),
+      aside && /* @__PURE__ */ jsx("aside", { children: aside })
+    ] })
+  ] });
+}
+function Image({
+  alt,
+  fit = "cover",
+  aspectRatio,
+  style,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt,
+      className: cx("sq-image", className),
+      style: { objectFit: fit, aspectRatio, ...style },
+      ...props
+    }
+  );
+}
+function Thumbnail({
+  size = "medium",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      className: cx("sq-thumbnail", className),
+      "data-size": size,
+      ...props
+    }
+  );
+}
+function Avatar({ name, src, size = "medium", className }) {
+  const [failed, setFailed] = useState2(false);
+  const initials = name.trim().split(/\s+/).slice(0, 2).map((x) => x[0]).join("");
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("sq-avatar", className),
+      "data-size": size,
+      role: "img",
+      "aria-label": name,
+      children: src && !failed ? /* @__PURE__ */ jsx("img", { src, alt: "", onError: () => setFailed(true) }) : initials
+    }
+  );
+}
+
+// src/actions.tsx
+import {
+  forwardRef,
+  useState as useState3
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = forwardRef(
+  function Button2({
+    variant = "secondary",
+    tone = "neutral",
+    size = "medium",
+    loading,
+    disabled,
+    icon,
+    fullWidth,
+    asChild,
+    children,
+    className,
+    type = "button",
+    ...props
+  }, ref) {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : type,
+        className: cx("sq-button", className),
+        "data-variant": variant,
+        "data-tone": tone,
+        "data-size": size,
+        "data-full-width": fullWidth,
+        disabled: asChild ? void 0 : disabled || loading,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsxs2(Fragment, { children: [
+          loading ? /* @__PURE__ */ jsx2("span", { className: "sq-spinner", "aria-hidden": "true" }) : icon,
+          children,
+          loading && /* @__PURE__ */ jsx2("span", { className: "sq-sr-only", children: "Loading" })
+        ] })
+      }
+    );
+  }
+);
+function ButtonGroup({
+  label,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      className: cx("sq-button-group", className),
+      ...props
+    }
+  );
+}
+var Clickable = forwardRef(function Clickable2({ className, type = "button", ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      type,
+      className: cx("sq-clickable", className),
+      ...props
+    }
+  );
+});
+var Link = forwardRef(function Link2({ tone = "neutral", variant = "text", className, target, rel, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    "a",
+    {
+      ref,
+      className: cx(variant === "button" ? "sq-button" : "sq-link", className),
+      "data-tone": tone,
+      target,
+      rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+      ...props
+    }
+  );
+});
+function Chip({
+  onRemove,
+  removeLabel = "Remove tag",
+  tone = "neutral",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2("span", { className: cx("sq-chip", className), "data-tone": tone, ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: "sq-chip-remove",
+        type: "button",
+        "aria-label": removeLabel,
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx2(Icon, { name: "close", size: 12 })
+      }
+    )
+  ] });
+}
+function ClickableChip({
+  selected = false,
+  onRemove,
+  removeLabel = "Remove filter",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2("span", { className: "sq-chip-wrapper", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: cx("sq-chip", "sq-clickable-chip", className),
+        "aria-pressed": selected,
+        ...props,
+        children: [
+          selected && /* @__PURE__ */ jsx2(Icon, { name: "check", size: 14 }),
+          " ",
+          children
+        ]
+      }
+    ),
+    onRemove && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: "sq-chip-remove",
+        disabled: props.disabled,
+        "aria-label": removeLabel,
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx2(Icon, { name: "close", size: 12 })
+      }
+    )
+  ] });
+}
+function Badge({
+  tone = "neutral",
+  size = "medium",
+  icon,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: cx("sq-badge", className),
+      "data-tone": tone,
+      "data-size": size,
+      ...props,
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+function Banner({
+  title,
+  tone = "info",
+  dismissible,
+  onDismiss,
+  action,
+  className,
+  children,
+  ...props
+}) {
+  const [dismissed, setDismissed] = useState3(false);
+  if (dismissed) return null;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: tone === "critical" ? "alert" : "status",
+      className: cx("sq-banner", className),
+      "data-tone": tone,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(
+          Icon,
+          {
+            name: tone === "critical" || tone === "warning" ? "warning" : "info"
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "sq-grow", children: [
+          /* @__PURE__ */ jsx2("strong", { children: title }),
+          children && /* @__PURE__ */ jsx2("div", { children }),
+          action
+        ] }),
+        dismissible && /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant: "tertiary",
+            size: "small",
+            "aria-label": "Dismiss notification",
+            onClick: () => {
+              setDismissed(true);
+              onDismiss?.();
+            },
+            children: /* @__PURE__ */ jsx2(Icon, { name: "close" })
+          }
+        )
+      ]
+    }
+  );
+}
+function EmptyState({
+  title,
+  children,
+  action,
+  graphic
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "sq-empty", children: [
+    graphic ?? /* @__PURE__ */ jsx2(Icon, { name: "package", size: 36 }),
+    /* @__PURE__ */ jsx2("h3", { children: title }),
+    children && /* @__PURE__ */ jsx2("div", { className: "sq-muted", children }),
+    action
+  ] });
+}
+function Progress({
+  value,
+  max = 100,
+  label,
+  showValue = true
+}) {
+  const safeMax = Math.max(1, max);
+  const safeValue = value === void 0 ? void 0 : Math.min(safeMax, Math.max(0, value));
+  return /* @__PURE__ */ jsxs2("div", { className: "sq-progress", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx2("span", { children: label }),
+      showValue && safeValue !== void 0 && /* @__PURE__ */ jsxs2("span", { children: [
+        Math.round(safeValue / safeMax * 100),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("progress", { "aria-label": label, max: safeMax, value: safeValue })
+  ] });
+}
+function Spinner({
+  label = "Loading",
+  size = "medium"
+}) {
+  return /* @__PURE__ */ jsxs2("span", { role: "status", className: "sq-spinner-wrap", children: [
+    /* @__PURE__ */ jsx2("span", { className: "sq-spinner", "data-size": size, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx2("span", { className: "sq-sr-only", children: label })
+  ] });
+}
+
+// src/forms.tsx
+import {
+  forwardRef as forwardRef2,
+  useId as useId2,
+  useRef,
+  useEffect,
+  useState as useState4
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FieldShell({
+  id,
+  label,
+  description,
+  error,
+  hideLabel,
+  required,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3("div", { className: "sq-field", children: [
+    /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: hideLabel ? "sq-sr-only" : "sq-label", children: [
+      label,
+      required && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: " *" })
+    ] }),
+    children,
+    description && /* @__PURE__ */ jsx3("div", { id: `${id}-help`, className: "sq-field-help", children: description }),
+    error && /* @__PURE__ */ jsxs3("div", { id: `${id}-error`, className: "sq-field-error", children: [
+      /* @__PURE__ */ jsx3(Icon, { name: "warning", size: 14 }),
+      error
+    ] })
+  ] });
+}
+var TextField = forwardRef2(
+  function TextField2({
+    label,
+    description,
+    error,
+    hideLabel,
+    id: givenId,
+    prefix,
+    suffix,
+    className,
+    onValueChange,
+    onChange,
+    required,
+    ...props
+  }, ref) {
+    const uid = useId2();
+    const id = givenId ?? uid;
+    const describedBy = [
+      description && `${id}-help`,
+      error && `${id}-error`,
+      props["aria-describedby"]
+    ].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsx3(FieldShell, { ...{ id, label, description, error, hideLabel, required }, children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "sq-input-wrap",
+        "data-error": !!error,
+        "data-disabled": !!props.disabled,
+        children: [
+          prefix && /* @__PURE__ */ jsx3("span", { className: "sq-input-affix", children: prefix }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref,
+              id,
+              className: cx("sq-input", className),
+              required,
+              ...props,
+              "aria-invalid": error ? true : props["aria-invalid"],
+              "aria-describedby": describedBy,
+              onChange: (e) => {
+                onChange?.(e);
+                onValueChange?.(e.target.value);
+              }
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx3("span", { className: "sq-input-affix", children: suffix })
+        ]
+      }
+    ) });
+  }
+);
+function EmailField(props) {
+  return /* @__PURE__ */ jsx3(TextField, { autoComplete: "email", ...props, type: "email" });
+}
+function URLField(props) {
+  return /* @__PURE__ */ jsx3(TextField, { autoComplete: "url", ...props, type: "url" });
+}
+function SearchField(props) {
+  return /* @__PURE__ */ jsx3(TextField, { prefix: /* @__PURE__ */ jsx3(Icon, { name: "search" }), ...props, type: "search" });
+}
+function NumberField(props) {
+  return /* @__PURE__ */ jsx3(TextField, { inputMode: "decimal", ...props, type: "number" });
+}
+function MoneyField({
+  currency = "USD",
+  locale = "en-US",
+  ...props
+}) {
+  const symbol = new Intl.NumberFormat(locale, { style: "currency", currency }).formatToParts(0).find((p) => p.type === "currency")?.value ?? currency;
+  return /* @__PURE__ */ jsx3(NumberField, { step: "0.01", prefix: symbol, suffix: currency, ...props });
+}
+function PasswordField(props) {
+  const [visible, setVisible] = useState4(false);
+  return /* @__PURE__ */ jsx3(
+    TextField,
+    {
+      autoComplete: "current-password",
+      ...props,
+      type: visible ? "text" : "password",
+      suffix: /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "tertiary",
+          size: "small",
+          disabled: props.disabled,
+          "aria-label": visible ? "Hide password" : "Show password",
+          "aria-pressed": visible,
+          onClick: () => setVisible(!visible),
+          children: visible ? "Hide" : "Show"
+        }
+      )
+    }
+  );
+}
+function DateField(props) {
+  return /* @__PURE__ */ jsx3(TextField, { ...props, className: cx("sq-date-field", props.className), type: "date" });
+}
+var TextArea = forwardRef2(
+  function TextArea2({
+    label,
+    description,
+    error,
+    hideLabel,
+    id: givenId,
+    onValueChange,
+    onChange,
+    className,
+    required,
+    ...props
+  }, ref) {
+    const uid = useId2();
+    const id = givenId ?? uid;
+    return /* @__PURE__ */ jsx3(FieldShell, { ...{ id, label, description, error, hideLabel, required }, children: /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        ref,
+        id,
+        rows: 4,
+        className: cx("sq-input", "sq-textarea", className),
+        required,
+        ...props,
+        "aria-invalid": error ? true : props["aria-invalid"],
+        "aria-describedby": [
+          description && `${id}-help`,
+          error && `${id}-error`,
+          props["aria-describedby"]
+        ].filter(Boolean).join(" ") || void 0,
+        onChange: (e) => {
+          onChange?.(e);
+          onValueChange?.(e.target.value);
+        }
+      }
+    ) });
+  }
+);
+var Select = forwardRef2(
+  function Select2({
+    label,
+    description,
+    error,
+    hideLabel,
+    id: givenId,
+    options,
+    placeholder,
+    onValueChange,
+    onChange,
+    className,
+    required,
+    ...props
+  }, ref) {
+    const uid = useId2();
+    const id = givenId ?? uid;
+    const groups = [...new Set(options.map((o) => o.group))];
+    const option = (o) => /* @__PURE__ */ jsx3("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value);
+    return /* @__PURE__ */ jsx3(FieldShell, { ...{ id, label, description, error, hideLabel, required }, children: /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        ref,
+        id,
+        className: cx("sq-input", "sq-select", className),
+        required,
+        defaultValue: placeholder && props.value === void 0 ? props.defaultValue ?? "" : void 0,
+        ...props,
+        "aria-invalid": error ? true : props["aria-invalid"],
+        "aria-describedby": [
+          description && `${id}-help`,
+          error && `${id}-error`,
+          props["aria-describedby"]
+        ].filter(Boolean).join(" ") || void 0,
+        onChange: (e) => {
+          onChange?.(e);
+          onValueChange?.(e.target.value);
+        },
+        children: [
+          placeholder && /* @__PURE__ */ jsx3("option", { value: "", disabled: true, children: placeholder }),
+          groups.map(
+            (group) => group ? /* @__PURE__ */ jsx3("optgroup", { label: group, children: options.filter((o) => o.group === group).map(option) }, group) : options.filter((o) => !o.group).map(option)
+          )
+        ]
+      }
+    ) });
+  }
+);
+function Checkbox({
+  label,
+  description,
+  error,
+  hideLabel,
+  id: givenId,
+  indeterminate,
+  onCheckedChange,
+  onChange,
+  className,
+  ...props
+}) {
+  const uid = useId2();
+  const id = givenId ?? uid;
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs3("div", { className: "sq-check-field", children: [
+    /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: cx("sq-check-label", className), children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref,
+          id,
+          type: "checkbox",
+          className: "sq-checkbox",
+          ...props,
+          "aria-invalid": error ? true : props["aria-invalid"],
+          "aria-describedby": [
+            description && `${id}-help`,
+            error && `${id}-error`,
+            props["aria-describedby"]
+          ].filter(Boolean).join(" ") || void 0,
+          onChange: (e) => {
+            onChange?.(e);
+            onCheckedChange?.(e.target.checked);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { className: hideLabel ? "sq-sr-only" : void 0, children: label })
+    ] }),
+    description && /* @__PURE__ */ jsx3("div", { id: `${id}-help`, className: "sq-field-help", children: description }),
+    error && /* @__PURE__ */ jsx3("div", { id: `${id}-error`, className: "sq-field-error", children: error })
+  ] });
+}
+function Switch(props) {
+  return /* @__PURE__ */ jsx3(
+    Checkbox,
+    {
+      ...props,
+      role: "switch",
+      className: cx("sq-switch", props.className)
+    }
+  );
+}
+function ChoiceList({
+  label,
+  options,
+  value,
+  defaultValue = [],
+  onValueChange,
+  multiple,
+  disabled,
+  name,
+  required,
+  description,
+  error,
+  hideLabel
+}) {
+  const id = useId2();
+  const [selected, setSelected] = useControllable(
+    value,
+    defaultValue,
+    onValueChange
+  );
+  return /* @__PURE__ */ jsxs3(
+    "fieldset",
+    {
+      className: "sq-choice-list",
+      disabled,
+      "aria-invalid": !!error,
+      "aria-describedby": [description && `${id}-help`, error && `${id}-error`].filter(Boolean).join(" ") || void 0,
+      children: [
+        /* @__PURE__ */ jsx3("legend", { className: hideLabel ? "sq-sr-only" : "sq-label", children: label }),
+        options.map((o) => /* @__PURE__ */ jsxs3("label", { className: "sq-check-label", children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "sq-checkbox",
+              type: multiple ? "checkbox" : "radio",
+              name: name ?? id,
+              value: o.value,
+              required: required && (!multiple || selected.length === 0),
+              disabled: o.disabled,
+              checked: selected.includes(o.value),
+              onChange: (e) => setSelected(
+                multiple ? e.target.checked ? [...selected, o.value] : selected.filter((v) => v !== o.value) : [o.value]
+              )
+            }
+          ),
+          o.label
+        ] }, o.value)),
+        description && /* @__PURE__ */ jsx3("div", { id: `${id}-help`, className: "sq-field-help", children: description }),
+        error && /* @__PURE__ */ jsx3("div", { id: `${id}-error`, className: "sq-field-error", children: error })
+      ]
+    }
+  );
+}
+function ColorPicker({
+  label = "Color",
+  value,
+  defaultValue = "#0a2eb5",
+  onValueChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3("label", { className: "sq-color-picker", children: [
+    /* @__PURE__ */ jsx3("span", { children: label }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type: "color",
+        value,
+        defaultValue: value === void 0 ? defaultValue : void 0,
+        onChange: (e) => onValueChange?.(e.target.value),
+        ...props
+      }
+    )
+  ] });
+}
+function ColorField({
+  value,
+  defaultValue = "#0a2eb5",
+  onValueChange,
+  onChange,
+  ...props
+}) {
+  const [color, setColor] = useControllable(
+    value === void 0 ? void 0 : String(value),
+    String(defaultValue),
+    onValueChange
+  );
+  return /* @__PURE__ */ jsx3(
+    TextField,
+    {
+      ...props,
+      value: color,
+      pattern: "#[0-9a-fA-F]{6}",
+      onChange,
+      onValueChange: setColor,
+      prefix: /* @__PURE__ */ jsx3(
+        "input",
+        {
+          "aria-label": `${props.label} picker`,
+          className: "sq-color-input",
+          type: "color",
+          disabled: props.disabled || props.readOnly,
+          value: /^#[0-9a-f]{6}$/i.test(color) ? color : "#000000",
+          onChange: (e) => setColor(e.target.value)
+        }
+      )
+    }
+  );
+}
+function DropZone({
+  label,
+  description,
+  error,
+  accept,
+  multiple,
+  disabled,
+  maxSize = 10 * 1024 * 1024,
+  name,
+  required,
+  onFilesChange,
+  onReject
+}) {
+  const id = useId2();
+  const ref = useRef(null);
+  const [files, setFiles] = useState4([]);
+  const [rejection, setRejection] = useState4("");
+  const [dragging, setDragging] = useState4(false);
+  function receive(incoming) {
+    if (disabled) return false;
+    const patterns = accept?.split(",").map((x) => x.trim().toLowerCase()).filter(Boolean) ?? [];
+    const invalid = !multiple && incoming.length > 1 || incoming.some(
+      (f) => f.size > maxSize || patterns.length > 0 && !patterns.some(
+        (p) => p.startsWith(".") ? f.name.toLowerCase().endsWith(p) : p.endsWith("/*") ? f.type.startsWith(p.slice(0, -1)) : f.type === p
+      )
+    );
+    if (invalid) {
+      const message = "File rejected. Check the file type, size, and number of files.";
+      setRejection(message);
+      onReject?.(message);
+      if (ref.current) ref.current.value = "";
+      return false;
+    }
+    setRejection("");
+    setFiles(incoming);
+    onFilesChange?.(incoming);
+    return true;
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "sq-field", children: [
+    /* @__PURE__ */ jsx3("label", { htmlFor: id, className: "sq-label", children: label }),
+    /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "sq-drop-zone",
+        "data-dragging": dragging,
+        "data-disabled": disabled,
+        onDragOver: (e) => {
+          e.preventDefault();
+          if (!disabled) setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragging(false);
+          const dropped = Array.from(e.dataTransfer.files);
+          if (receive(dropped) && ref.current) {
+            try {
+              const transfer = new DataTransfer();
+              dropped.forEach((f) => transfer.items.add(f));
+              ref.current.files = transfer.files;
+            } catch {
+            }
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { name: "upload", size: 24 }),
+          /* @__PURE__ */ jsx3("span", { children: "Drop files here or choose files" }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref,
+              id,
+              type: "file",
+              name,
+              required,
+              accept,
+              multiple,
+              disabled,
+              "aria-invalid": !!(error || rejection),
+              "aria-describedby": `${id}-help ${id}-status`,
+              onChange: (e) => receive(Array.from(e.target.files ?? []))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3("div", { id: `${id}-help`, className: "sq-field-help", children: description ?? `Maximum ${Math.round(maxSize / 1024 / 1024)} MB per file` }),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        id: `${id}-status`,
+        "aria-live": "polite",
+        className: error || rejection ? "sq-field-error" : "sq-field-help",
+        children: error || rejection || files.map((f) => f.name).join(", ")
+      }
+    )
+  ] });
+}
+
+// src/overlays.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import * as Pop from "@radix-ui/react-popover";
+import * as Dropdown from "@radix-ui/react-dropdown-menu";
+import * as Tip from "@radix-ui/react-tooltip";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Modal({
+  title,
+  description,
+  trigger,
+  children,
+  footer,
+  size = "medium",
+  ...props
+}) {
+  const { theme, density } = useStaq();
+  return /* @__PURE__ */ jsxs4(Dialog.Root, { ...props, children: [
+    trigger && /* @__PURE__ */ jsx4(Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs4(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx4(Dialog.Overlay, { className: "sq-overlay" }),
+      /* @__PURE__ */ jsxs4(
+        Dialog.Content,
+        {
+          "data-staq-theme": theme,
+          "data-staq-density": density,
+          className: "sq-modal",
+          "data-size": size,
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "sq-section-header", children: [
+              /* @__PURE__ */ jsx4(Dialog.Title, { className: "sq-heading", children: title }),
+              /* @__PURE__ */ jsx4(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx4(Button, { variant: "tertiary", size: "small", "aria-label": "Close dialog", children: /* @__PURE__ */ jsx4(Icon, { name: "close" }) }) })
+            ] }),
+            /* @__PURE__ */ jsx4(Dialog.Description, { className: "sq-muted", children: description }),
+            /* @__PURE__ */ jsx4("div", { className: "sq-modal-body", children }),
+            footer && /* @__PURE__ */ jsx4("footer", { className: "sq-modal-footer", children: footer })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Popover({
+  trigger,
+  label,
+  children,
+  align = "start",
+  side = "bottom",
+  ...props
+}) {
+  const { theme, density } = useStaq();
+  return /* @__PURE__ */ jsxs4(Pop.Root, { ...props, children: [
+    /* @__PURE__ */ jsx4(Pop.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx4(Pop.Portal, { children: /* @__PURE__ */ jsxs4(
+      Pop.Content,
+      {
+        "aria-label": label,
+        "data-staq-theme": theme,
+        "data-staq-density": density,
+        className: "sq-popover",
+        align,
+        side,
+        sideOffset: 8,
+        collisionPadding: 16,
+        children: [
+          children,
+          /* @__PURE__ */ jsx4(Pop.Close, { asChild: true, children: /* @__PURE__ */ jsx4(Button, { variant: "tertiary", size: "small", "aria-label": "Close popover", children: /* @__PURE__ */ jsx4(Icon, { name: "close" }) }) })
+        ]
+      }
+    ) })
+  ] });
+}
+function Menu({
+  trigger,
+  label,
+  items,
+  align = "end",
+  onOpenChange
+}) {
+  const { theme, density } = useStaq();
+  const groups = [...new Set(items.map((x) => x.group))];
+  const item = (i) => /* @__PURE__ */ jsx4(
+    Dropdown.Item,
+    {
+      className: "sq-menu-item",
+      disabled: i.disabled,
+      onSelect: i.onSelect,
+      "data-tone": i.tone,
+      asChild: !!i.href && !i.disabled,
+      children: i.href && !i.disabled ? /* @__PURE__ */ jsxs4("a", { href: i.href, children: [
+        i.icon,
+        i.label
+      ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        i.icon,
+        i.label
+      ] })
+    },
+    i.id
+  );
+  return /* @__PURE__ */ jsxs4(Dropdown.Root, { onOpenChange, children: [
+    /* @__PURE__ */ jsx4(Dropdown.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx4(Dropdown.Portal, { children: /* @__PURE__ */ jsx4(
+      Dropdown.Content,
+      {
+        "aria-label": label,
+        "data-staq-theme": theme,
+        "data-staq-density": density,
+        className: "sq-menu",
+        sideOffset: 6,
+        align,
+        collisionPadding: 12,
+        children: groups.map((group, index) => /* @__PURE__ */ jsxs4(Dropdown.Group, { children: [
+          index > 0 && /* @__PURE__ */ jsx4(Dropdown.Separator, { className: "sq-divider" }),
+          group && /* @__PURE__ */ jsx4(Dropdown.Label, { className: "sq-menu-label", children: group }),
+          items.filter((i) => i.group === group).map(item)
+        ] }, group ?? "default"))
+      }
+    ) })
+  ] });
+}
+function Tooltip({ content, children, side = "top" }) {
+  const { theme, density } = useStaq();
+  return /* @__PURE__ */ jsx4(Tip.Provider, { delayDuration: 800, children: /* @__PURE__ */ jsxs4(Tip.Root, { children: [
+    /* @__PURE__ */ jsx4(Tip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx4(Tip.Portal, { children: /* @__PURE__ */ jsxs4(
+      Tip.Content,
+      {
+        "data-staq-theme": theme,
+        "data-staq-density": density,
+        className: "sq-tooltip",
+        side,
+        sideOffset: 8,
+        collisionPadding: 12,
+        children: [
+          content,
+          /* @__PURE__ */ jsx4(Tip.Arrow, { className: "sq-tooltip-arrow" })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+// src/complex.tsx
+import { useId as useId3 } from "react";
+import {
+  DayPicker,
+  labelDayButton,
+  formatDay
+} from "react-day-picker";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var iso = (d) => d ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}` : "";
+function DatePicker(props) {
+  const { label = "Choose a date", name, ...calendar } = props;
+  const [selected, setSelected] = useControllable(
+    props.value,
+    props.defaultValue,
+    (next) => {
+      if (props.mode === "range")
+        props.onValueChange?.(next);
+      else props.onValueChange?.(next);
+    },
+    "value" in props
+  );
+  const common = {
+    month: calendar.month,
+    defaultMonth: calendar.defaultMonth,
+    onMonthChange: calendar.onMonthChange,
+    disabled: calendar.disabled,
+    numberOfMonths: calendar.numberOfMonths,
+    locale: calendar.locale,
+    startMonth: calendar.startMonth,
+    endMonth: calendar.endMonth,
+    showOutsideDays: true,
+    labels: {
+      labelDayButton: ((date, modifiers, options, dateLib) => `${formatDay(date, options, dateLib)}: ${labelDayButton(date, modifiers, options, dateLib)}`)
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "sq-calendar", role: "group", "aria-label": label, children: [
+    props.mode === "range" ? /* @__PURE__ */ jsx5(
+      DayPicker,
+      {
+        ...common,
+        mode: "range",
+        selected,
+        onSelect: setSelected,
+        excludeDisabled: true
+      }
+    ) : /* @__PURE__ */ jsx5(
+      DayPicker,
+      {
+        ...common,
+        mode: "single",
+        selected,
+        onSelect: setSelected
+      }
+    ),
+    /* @__PURE__ */ jsx5("div", { className: "sq-sr-only", "aria-live": "polite", children: selected instanceof Date ? iso(selected) : selected?.from ? `${iso(selected.from)} to ${iso(selected.to) || "select end date"}` : "No date selected" }),
+    name && /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "hidden",
+        name,
+        value: selected instanceof Date ? iso(selected) : selected ? `${iso(selected.from)}/${iso(selected.to)}` : ""
+      }
+    )
+  ] });
+}
+function Table({
+  label,
+  columns,
+  rows,
+  rowKey,
+  loading,
+  emptyMessage = "No results found.",
+  sort,
+  onSortChange,
+  selected = [],
+  onSelectionChange,
+  pagination,
+  filters
+}) {
+  const id = useId3();
+  const [sorting, setSorting] = useControllable(
+    sort,
+    void 0,
+    (next) => {
+      if (next) onSortChange?.(next);
+    }
+  );
+  const column = columns.find((c) => c.id === sorting?.column);
+  const displayed = column?.sortValue ? [...rows].sort((a, b) => {
+    const av = column.sortValue(a);
+    const bv = column.sortValue(b);
+    return (typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv))) * (sorting?.direction === "descending" ? -1 : 1);
+  }) : rows;
+  const all = rows.length > 0 && rows.every((r) => selected.includes(rowKey(r)));
+  return /* @__PURE__ */ jsxs5("div", { className: "sq-table-container", "aria-busy": loading, children: [
+    filters && /* @__PURE__ */ jsx5("div", { className: "sq-table-filters", children: filters }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "sq-table-scroll",
+        role: "region",
+        "aria-label": `${label} table`,
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsxs5("table", { className: "sq-table", children: [
+          /* @__PURE__ */ jsx5("caption", { id, children: label }),
+          /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+            onSelectionChange && /* @__PURE__ */ jsx5("th", { scope: "col", children: /* @__PURE__ */ jsx5(
+              "input",
+              {
+                "aria-label": "Select all visible rows",
+                type: "checkbox",
+                className: "sq-checkbox",
+                checked: all,
+                onChange: (e) => {
+                  const keys = rows.map(rowKey);
+                  onSelectionChange(
+                    e.target.checked ? [.../* @__PURE__ */ new Set([...selected, ...keys])] : selected.filter((k) => !keys.includes(k))
+                  );
+                }
+              }
+            ) }),
+            columns.map((c) => /* @__PURE__ */ jsx5(
+              "th",
+              {
+                scope: "col",
+                "data-align": c.align,
+                "aria-sort": sorting?.column === c.id ? sorting.direction : void 0,
+                children: c.sortValue ? /* @__PURE__ */ jsxs5(
+                  "button",
+                  {
+                    className: "sq-table-sort",
+                    type: "button",
+                    onClick: () => setSorting({
+                      column: c.id,
+                      direction: sorting?.column === c.id && sorting.direction === "ascending" ? "descending" : "ascending"
+                    }),
+                    children: [
+                      c.header,
+                      /* @__PURE__ */ jsx5(Icon, { name: "chevronDown", size: 14 })
+                    ]
+                  }
+                ) : c.header
+              },
+              c.id
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsxs5("tbody", { children: [
+            displayed.map((r) => /* @__PURE__ */ jsxs5("tr", { "data-selected": selected.includes(rowKey(r)), children: [
+              onSelectionChange && /* @__PURE__ */ jsx5("td", { children: /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "sq-checkbox",
+                  "aria-label": `Select row ${rowKey(r)}`,
+                  checked: selected.includes(rowKey(r)),
+                  onChange: (e) => onSelectionChange(
+                    e.target.checked ? [.../* @__PURE__ */ new Set([...selected, rowKey(r)])] : selected.filter((k) => k !== rowKey(r))
+                  )
+                }
+              ) }),
+              columns.map((c) => /* @__PURE__ */ jsx5("td", { "data-align": c.align, children: c.cell(r) }, c.id))
+            ] }, rowKey(r))),
+            !rows.length && /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5("td", { colSpan: columns.length + (onSelectionChange ? 1 : 0), children: loading ? "Loading\u2026" : emptyMessage }) })
+          ] })
+        ] })
+      }
+    ),
+    pagination && /* @__PURE__ */ jsxs5("div", { className: "sq-pagination", children: [
+      /* @__PURE__ */ jsx5("span", { children: pagination.label }),
+      /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsx5(
+          Button,
+          {
+            size: "small",
+            disabled: !pagination.hasPrevious || loading,
+            "aria-label": "Previous page",
+            onClick: pagination.onPrevious,
+            children: /* @__PURE__ */ jsx5(Icon, { name: "chevronLeft" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          Button,
+          {
+            size: "small",
+            disabled: !pagination.hasNext || loading,
+            "aria-label": "Next page",
+            onClick: pagination.onNext,
+            children: /* @__PURE__ */ jsx5(Icon, { name: "chevronRight" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  Avatar,
+  Badge,
+  Banner,
+  Box,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Chip,
+  ChoiceList,
+  Clickable,
+  ClickableChip,
+  ColorField,
+  ColorPicker,
+  DateField,
+  DatePicker,
+  Divider,
+  DropZone,
+  EmailField,
+  EmptyState,
+  Grid,
+  Heading,
+  Icon,
+  Image,
+  Link,
+  ListItem,
+  Menu,
+  Modal,
+  MoneyField,
+  Number,
+  NumberField,
+  OrderedList,
+  Page,
+  Paragraph,
+  PasswordField,
+  Popover,
+  Progress,
+  QueryContainer,
+  SearchField,
+  Section,
+  Select,
+  Spinner,
+  Stack,
+  StaqContext,
+  StaqProvider,
+  Switch,
+  Table,
+  Text,
+  TextArea,
+  TextField,
+  Thumbnail,
+  Tooltip,
+  URLField,
+  UnorderedList,
+  cx,
+  icons,
+  useControllable,
+  useStaq
+};