@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/chunk-YDICVETX.js

@@ -0,0 +1,151 @@
+import {
+  Input
+} from "./chunk-PWAKTEXF.js";
+import {
+  Button
+} from "./chunk-KR3BCFP7.js";
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/image-uploader.tsx
+import { ImagePlus, Loader2, X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImageUploader({
+  value = "",
+  onChange,
+  disabled,
+  label,
+  className,
+  allowUrlPaste = true,
+  accept = "image/*,.gif",
+  uploadFile,
+  uploadFromUrl
+}) {
+  const inputRef = React.useRef(null);
+  const [uploading, setUploading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const busy = Boolean(disabled || uploading);
+  const handleFile = async (file) => {
+    if (!uploadFile) {
+      setError("File upload is not configured for this panel.");
+      return;
+    }
+    setUploading(true);
+    setError(null);
+    try {
+      onChange(await uploadFile(file));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+  const handleUrl = async (imageUrl) => {
+    const trimmed = imageUrl.trim();
+    if (!trimmed) {
+      onChange("");
+      return;
+    }
+    if (trimmed === value) return;
+    if (!uploadFromUrl || /^https?:\/\//i.test(trimmed)) {
+      setError(null);
+      onChange(trimmed);
+      return;
+    }
+    setUploading(true);
+    setError(null);
+    try {
+      onChange(await uploadFromUrl(trimmed));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    label ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs font-medium", children: label }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          className: "hidden",
+          disabled: busy,
+          onChange: (e) => {
+            const file = e.target.files?.[0];
+            if (file) void handleFile(file);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          disabled: busy,
+          onClick: () => inputRef.current?.click(),
+          children: [
+            uploading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(ImagePlus, { className: "h-4 w-4" }),
+            uploading ? "Uploading\u2026" : "Upload"
+          ]
+        }
+      ),
+      value ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          disabled: busy,
+          onClick: () => onChange(""),
+          "aria-label": "Clear image",
+          children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            "Clear"
+          ]
+        }
+      ) : null
+    ] }),
+    allowUrlPaste ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        defaultValue: value,
+        disabled: busy,
+        placeholder: "Or paste image URL\u2026",
+        onBlur: (e) => {
+          void handleUrl(e.target.value);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void handleUrl(e.target.value);
+          }
+        }
+      },
+      value || "empty"
+    ) : null,
+    value ? (
+      // eslint-disable-next-line @next/next/no-img-element -- CDN URLs vary
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: value,
+          alt: "",
+          className: "border-border max-h-24 rounded border bg-white object-contain p-1"
+        }
+      )
+    ) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", role: "alert", children: error }) : null
+  ] });
+}
+
+export {
+  ImageUploader
+};
+//# sourceMappingURL=chunk-YDICVETX.js.map

package/dist/chunk-YDICVETX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-uploader.tsx"],"sourcesContent":["\"use client\";\n\nimport { ImagePlus, Loader2, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { cn } from \"./utils\";\n\nexport type ImageUploaderProps = {\n  value?: string;\n  onChange: (url: string) => void;\n  disabled?: boolean;\n  label?: string;\n  className?: string;\n  /** Allow pasting a remote URL in addition to file upload. Default true. */\n  allowUrlPaste?: boolean;\n  accept?: string;\n  /**\n   * Upload a picked file and return its hosted URL.\n   * Injected by the panel — Upload stays enabled either way; without a\n   * handler, picking a file surfaces a configuration error.\n   */\n  uploadFile?: (file: File) => Promise<string>;\n  /**\n   * Optional transform for pasted values (e.g. host a relative path).\n   * When omitted, any pasted non-empty string is applied as-is. Absolute\n   * `http(s)` URLs never call this.\n   */\n  uploadFromUrl?: (imageUrl: string) => Promise<string>;\n};\n\n/**\n * Reusable image uploader.\n *\n * Upload and URL paste are both enabled by default. Hosting is injected:\n * each panel passes `uploadFile` / `uploadFromUrl` so the kit stays free of\n * panel-specific API routes.\n */\nexport function ImageUploader({\n  value = \"\",\n  onChange,\n  disabled,\n  label,\n  className,\n  allowUrlPaste = true,\n  accept = \"image/*,.gif\",\n  uploadFile,\n  uploadFromUrl,\n}: ImageUploaderProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [uploading, setUploading] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const busy = Boolean(disabled || uploading);\n\n  const handleFile = async (file: File) => {\n    if (!uploadFile) {\n      setError(\"File upload is not configured for this panel.\");\n      return;\n    }\n    setUploading(true);\n    setError(null);\n    try {\n      onChange(await uploadFile(file));\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Upload failed\");\n    } finally {\n      setUploading(false);\n      if (inputRef.current) inputRef.current.value = \"\";\n    }\n  };\n\n  const handleUrl = async (imageUrl: string) => {\n    const trimmed = imageUrl.trim();\n    if (!trimmed) {\n      onChange(\"\");\n      return;\n    }\n    if (trimmed === value) return;\n\n    // Absolute URLs — and any paste when no transform is configured — apply\n    // as-is. Paste is never gated behind a disabled input.\n    if (!uploadFromUrl || /^https?:\\/\\//i.test(trimmed)) {\n      setError(null);\n      onChange(trimmed);\n      return;\n    }\n\n    setUploading(true);\n    setError(null);\n    try {\n      onChange(await uploadFromUrl(trimmed));\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Upload failed\");\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      {label ? (\n        <div className=\"text-muted-foreground text-xs font-medium\">{label}</div>\n      ) : null}\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          className=\"hidden\"\n          disabled={busy}\n          onChange={(e) => {\n            const file = e.target.files?.[0];\n            if (file) void handleFile(file);\n          }}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={busy}\n          onClick={() => inputRef.current?.click()}\n        >\n          {uploading ? (\n            <Loader2 className=\"h-4 w-4 animate-spin\" />\n          ) : (\n            <ImagePlus className=\"h-4 w-4\" />\n          )}\n          {uploading ? \"Uploading…\" : \"Upload\"}\n        </Button>\n        {value ? (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={busy}\n            onClick={() => onChange(\"\")}\n            aria-label=\"Clear image\"\n          >\n            <X className=\"h-4 w-4\" />\n            Clear\n          </Button>\n        ) : null}\n      </div>\n\n      {allowUrlPaste ? (\n        <Input\n          key={value || \"empty\"}\n          defaultValue={value}\n          disabled={busy}\n          placeholder=\"Or paste image URL…\"\n          onBlur={(e) => {\n            void handleUrl(e.target.value);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              void handleUrl((e.target as HTMLInputElement).value);\n            }\n          }}\n        />\n      ) : null}\n\n      {value ? (\n        // eslint-disable-next-line @next/next/no-img-element -- CDN URLs vary\n        <img\n          src={value}\n          alt=\"\"\n          className=\"border-border max-h-24 rounded border bg-white object-contain p-1\"\n        />\n      ) : null}\n\n      {error ? (\n        <p className=\"text-destructive text-xs\" role=\"alert\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-ZFSQVMLJ.js

@@ -0,0 +1,126 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/tabs.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TabPanel({
+  id,
+  labelledBy,
+  active,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id,
+      "aria-labelledby": labelledBy,
+      hidden: !active,
+      className,
+      children: active ? children : null
+    }
+  );
+}
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  ariaLabel,
+  className
+}) {
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  const reactId = React.useId();
+  const hasInlinePanels = tabs.some((tab) => tab.panel != null);
+  function tabDomId(key) {
+    return `${reactId}-tab-${key}`;
+  }
+  function panelDomId(tab) {
+    return tab.panelId ?? `${reactId}-panel-${tab.key}`;
+  }
+  function focusTab(key) {
+    onChange(key);
+    refs.current.get(key)?.focus();
+  }
+  function onKeyDown(event) {
+    const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+    const selectable = tabs.filter((tab) => !tab.disabled);
+    if (selectable.length < 2) return;
+    const current = selectable.findIndex((tab) => tab.key === value);
+    const next = selectable[(current + step + selectable.length) % selectable.length];
+    event.preventDefault();
+    focusTab(next.key);
+  }
+  const tablist = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      className: cn(
+        "border-border flex flex-wrap gap-1 border-b",
+        !hasInlinePanels ? className : void 0
+      ),
+      children: tabs.map((tab) => {
+        const active = tab.key === value;
+        const id = tabDomId(tab.key);
+        const controls = tab.panel != null || tab.panelId ? panelDomId(tab) : void 0;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id,
+            ref: (node) => {
+              refs.current.set(tab.key, node);
+            },
+            type: "button",
+            role: "tab",
+            "aria-selected": active,
+            "aria-controls": controls,
+            disabled: tab.disabled,
+            tabIndex: active ? 0 : -1,
+            onClick: () => onChange(tab.key),
+            className: cn(
+              "cursor-pointer rounded-t-md px-3 py-1.5 text-sm font-medium transition",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // The filled-pill active state the five hand-rolled strips
+              // already used. Adopting it keeps this a deduplication rather
+              // than a restyle of every panel that has tabs.
+              active ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
+            ),
+            children: [
+              tab.label,
+              tab.badge != null ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ml-1.5 text-xs", children: tab.badge }) : null
+            ]
+          },
+          tab.key
+        );
+      })
+    }
+  );
+  if (!hasInlinePanels) return tablist;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    tablist,
+    tabs.map(
+      (tab) => tab.panel != null ? /* @__PURE__ */ jsx(
+        TabPanel,
+        {
+          id: panelDomId(tab),
+          labelledBy: tabDomId(tab.key),
+          active: tab.key === value,
+          children: tab.panel
+        },
+        tab.key
+      ) : null
+    )
+  ] });
+}
+
+export {
+  TabPanel,
+  Tabs
+};
+//# sourceMappingURL=chunk-ZFSQVMLJ.js.map

package/dist/chunk-ZFSQVMLJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The tab strip five Managers were each drawing by hand, with the same\n * `rounded-t-md px-3 py-1.5 text-sm font-medium` and their own idea of what an\n * active tab looks like.\n *\n * It is a controlled component with no state of its own: every caller already\n * held the active key, usually because a URL or a query depends on it.\n *\n * Roles are the reason to use this rather than styling buttons again. A hand\n * -rolled strip is a row of buttons to a screen reader, which says nothing\n * about how many tabs there are or which is selected; `tablist` / `tab` /\n * `aria-selected` do. Arrow-key navigation comes with that expectation, so it\n * is implemented here too.\n *\n * Optional `panel` on a tab (or a sibling `TabPanel`) wires APG `aria-controls`\n * / `role=\"tabpanel\"`. Callers that already render content from `value` can\n * keep doing so and pass `panelId` for association, or switch to `panel`.\n */\nexport interface TabItem<Key extends string = string> {\n  key: Key;\n  label: React.ReactNode;\n  /** Rendered after the label — a count, usually. */\n  badge?: React.ReactNode;\n  disabled?: boolean;\n  /**\n   * Optional panel body. When any tab provides `panel`, panels render under\n   * the strip with `role=\"tabpanel\"`.\n   */\n  panel?: React.ReactNode;\n  /**\n   * External panel element id for `aria-controls` when panels live outside\n   * this component.\n   */\n  panelId?: string;\n}\n\nexport interface TabsProps<Key extends string = string> {\n  tabs: ReadonlyArray<TabItem<Key>>;\n  value: Key;\n  onChange: (key: Key) => void;\n  /** Names the strip for screen readers. */\n  ariaLabel?: string;\n  className?: string;\n}\n\nexport interface TabPanelProps {\n  /** Must match the controlling tab's generated or explicit id. */\n  id: string;\n  /** Id of the tab that labels this panel. */\n  labelledBy: string;\n  active: boolean;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/** Companion panel for callers that keep content outside `Tabs`. */\nexport function TabPanel({\n  id,\n  labelledBy,\n  active,\n  children,\n  className,\n}: TabPanelProps) {\n  return (\n    <div\n      role=\"tabpanel\"\n      id={id}\n      aria-labelledby={labelledBy}\n      hidden={!active}\n      className={className}\n    >\n      {active ? children : null}\n    </div>\n  );\n}\n\nexport function Tabs<Key extends string = string>({\n  tabs,\n  value,\n  onChange,\n  ariaLabel,\n  className,\n}: TabsProps<Key>) {\n  const refs = React.useRef(new Map<Key, HTMLButtonElement | null>());\n  const reactId = React.useId();\n  const hasInlinePanels = tabs.some((tab) => tab.panel != null);\n\n  function tabDomId(key: Key) {\n    return `${reactId}-tab-${key}`;\n  }\n\n  function panelDomId(tab: TabItem<Key>) {\n    return tab.panelId ?? `${reactId}-panel-${tab.key}`;\n  }\n\n  function focusTab(key: Key) {\n    onChange(key);\n    // The newly selected tab has to take focus, or the next arrow press is\n    // still measured from the old one.\n    refs.current.get(key)?.focus();\n  }\n\n  function onKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    const step =\n      event.key === \"ArrowRight\" ? 1 : event.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0) return;\n\n    const selectable = tabs.filter((tab) => !tab.disabled);\n    if (selectable.length < 2) return;\n\n    const current = selectable.findIndex((tab) => tab.key === value);\n    // Wraps, which is what a tablist is expected to do.\n    const next =\n      selectable[(current + step + selectable.length) % selectable.length];\n\n    event.preventDefault();\n    focusTab(next.key);\n  }\n\n  const tablist = (\n    <div\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      onKeyDown={onKeyDown}\n      className={cn(\n        \"border-border flex flex-wrap gap-1 border-b\",\n        !hasInlinePanels ? className : undefined,\n      )}\n    >\n      {tabs.map((tab) => {\n        const active = tab.key === value;\n        const id = tabDomId(tab.key);\n        const controls =\n          tab.panel != null || tab.panelId ? panelDomId(tab) : undefined;\n        return (\n          <button\n            key={tab.key}\n            id={id}\n            ref={(node) => {\n              refs.current.set(tab.key, node);\n            }}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={active}\n            aria-controls={controls}\n            disabled={tab.disabled}\n            // Only the active tab is reachable by Tab; arrows move within the\n            // strip. Without this a keyboard user pages through every tab to\n            // get past the strip.\n            tabIndex={active ? 0 : -1}\n            onClick={() => onChange(tab.key)}\n            className={cn(\n              \"cursor-pointer rounded-t-md px-3 py-1.5 text-sm font-medium transition\",\n              \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              // The filled-pill active state the five hand-rolled strips\n              // already used. Adopting it keeps this a deduplication rather\n              // than a restyle of every panel that has tabs.\n              active\n                ? \"bg-primary text-primary-foreground\"\n                : \"text-muted-foreground hover:bg-muted\",\n            )}\n          >\n            {tab.label}\n            {tab.badge != null ? (\n              <span className=\"text-muted-foreground ml-1.5 text-xs\">\n                {tab.badge}\n              </span>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  if (!hasInlinePanels) return tablist;\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {tablist}\n      {tabs.map((tab) =>\n        tab.panel != null ? (\n          <TabPanel\n            key={tab.key}\n            id={panelDomId(tab)}\n            labelledBy={tabDomId(tab.key)}\n            active={tab.key === value}\n          >\n            {tab.panel}\n          </TabPanel>\n        ) : null,\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-ZHATD73Y.js

@@ -0,0 +1,46 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/switch.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Switch = React.forwardRef(
+  ({ checked, onCheckedChange, className, disabled, id, ...props }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      id,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      disabled,
+      onClick: () => onCheckedChange(!checked),
+      className: cn(
+        // 24×44px track meets DESIGN.md 24px minimum target size.
+        "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border transition-colors",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "border-primary bg-primary" : "border-border bg-muted",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "bg-background pointer-events-none block size-5 rounded-full shadow-sm transition-transform",
+            checked ? "translate-x-5" : "translate-x-0.5"
+          )
+        }
+      )
+    }
+  )
+);
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-ZHATD73Y.js.map

package/dist/chunk-ZHATD73Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type SwitchProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"onChange\"\n> & {\n  checked: boolean;\n  onCheckedChange: (checked: boolean) => void;\n};\n\n/** Compact accessible toggle — use instead of full-width checkbox inputs. */\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ checked, onCheckedChange, className, disabled, id, ...props }, ref) => (\n    <button\n      ref={ref}\n      id={id}\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      disabled={disabled}\n      onClick={() => onCheckedChange(!checked)}\n      className={cn(\n        // 24×44px track meets DESIGN.md 24px minimum target size.\n        \"relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border transition-colors\",\n        \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        checked ? \"border-primary bg-primary\" : \"border-border bg-muted\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden\n        className={cn(\n          \"bg-background pointer-events-none block size-5 rounded-full shadow-sm transition-transform\",\n          checked ? \"translate-x-5\" : \"translate-x-0.5\",\n        )}\n      />\n    </button>\n  ),\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;AAEA,YAAY,WAAW;AAiCjB;AApBC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,SAAS,iBAAiB,WAAW,UAAU,IAAI,GAAG,MAAM,GAAG,QAChE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAc;AAAA,MACd;AAAA,MACA,SAAS,MAAM,gBAAgB,CAAC,OAAO;AAAA,MACvC,WAAW;AAAA;AAAA,QAET;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,8BAA8B;AAAA,QACxC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,UAAU,kBAAkB;AAAA,UAC9B;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,OAAO,cAAc;","names":[]}

package/dist/chunk-ZLAA4DGG.js

@@ -0,0 +1,111 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/data-table.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HEADER_VARIANTS = {
+  uppercase: "border-border bg-muted/40 text-muted-foreground border-b text-xs tracking-wide uppercase",
+  plain: "text-muted-foreground border-border border-b text-left"
+};
+var DENSITY = {
+  comfortable: "px-4 py-3",
+  compact: "px-3 py-2"
+};
+var ALIGN = {
+  left: "text-left",
+  right: "text-right",
+  center: "text-center"
+};
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  variant = "uppercase",
+  density = "comfortable",
+  stickyHeader = false,
+  rowClassName,
+  emptyMessage,
+  footer,
+  ariaLabel,
+  className,
+  tableClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "border-border bg-background/80 overflow-x-auto rounded-lg border",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          "aria-label": ariaLabel,
+          className: cn("min-w-full text-left text-sm", tableClassName),
+          children: [
+            /* @__PURE__ */ jsx(
+              "thead",
+              {
+                className: cn(
+                  HEADER_VARIANTS[variant],
+                  stickyHeader && "bg-muted sticky top-0 z-10"
+                ),
+                children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    scope: "col",
+                    "aria-sort": column.ariaSort,
+                    className: cn(
+                      DENSITY[density],
+                      "font-medium",
+                      ALIGN[column.align ?? "left"],
+                      column.headerClassName
+                    ),
+                    children: column.title
+                  },
+                  column.key
+                )) })
+              }
+            ),
+            /* @__PURE__ */ jsx("tbody", { children: rows.length === 0 && emptyMessage != null ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                colSpan: columns.length,
+                className: "text-muted-foreground px-4 py-6 text-center text-sm",
+                children: emptyMessage
+              }
+            ) }) : rows.map((row, index) => /* @__PURE__ */ jsx(
+              "tr",
+              {
+                className: cn(
+                  "border-border/70 border-b last:border-0",
+                  rowClassName?.(row, index)
+                ),
+                children: columns.map((column) => /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: cn(
+                      DENSITY[density],
+                      ALIGN[column.align ?? "left"],
+                      column.className
+                    ),
+                    children: column.cell(row, index)
+                  },
+                  column.key
+                ))
+              },
+              rowKey(row, index)
+            )) }),
+            footer != null ? /* @__PURE__ */ jsx("tfoot", { children: footer }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  DataTable
+};
+//# sourceMappingURL=chunk-ZLAA4DGG.js.map

package/dist/chunk-ZLAA4DGG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data-table.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The list table every feature panel was hand-rolling.\n *\n * Seventeen files repeated the same wrapper string\n * (`border-border bg-background/80 overflow-x-auto rounded-lg border`) and the\n * header had already drifted into two incompatible looks, so Campaigns and\n * Targets did not resemble each other. Both are kept as `variant` rather than\n * unified here: collapsing them is a visual change to ten panels and belongs in\n * its own reviewable diff, not smuggled in with a refactor.\n *\n * The column contract deliberately echoes `GridColumn` in\n * `spreadsheet-grid.tsx` — `key`, `title`, a renderer, an optional class — so\n * the repo has one shape to learn. It drops that type's `value: (row) => string`\n * because there is no clipboard or CSV here; nothing would keep it honest, and\n * a required field nobody reads gets filled in with lies.\n *\n * **Not for every table.** `GroupTable` renders parent and child rows with\n * different column counts, and `BusinessTable`'s rows are dnd-kit sortables that\n * own their own refs and transforms. `PublishModal`, `BulkCreateModal` and the\n * clone queue in `MetaAdSetsPanel` are grids of inputs rather than lists of\n * values — every cell is an editable control, and they size their header and\n * body rows differently on purpose. All five are legitimately tables of a\n * different kind; bending this component around them would cost more than it\n * saves.\n */\nexport type TableColumn<Row> = {\n  key: string;\n  /** Node, not string: a header can carry a select-all box or a sort control. */\n  title: React.ReactNode;\n  cell: (row: Row, index: number) => React.ReactNode;\n  align?: \"left\" | \"right\" | \"center\";\n  /**\n   * Set on a sortable column so a screen reader announces the current sort.\n   * Only the sorted column says `ascending`/`descending`; the rest say `none`,\n   * which is what marks them as sortable at all.\n   */\n  ariaSort?: \"ascending\" | \"descending\" | \"none\";\n  /** Extra classes for this column's `<td>`. */\n  className?: string;\n  /** Extra classes for this column's `<th>`. */\n  headerClassName?: string;\n};\n\nexport interface DataTableProps<Row> {\n  columns: TableColumn<Row>[];\n  rows: Row[];\n  /** Stable React key per row. */\n  rowKey: (row: Row, index: number) => string;\n  /**\n   * `uppercase` — the tinted small-caps header (campaigns, showcase, filters).\n   * `plain` — the quieter left-aligned header (ads, targets, creatives).\n   */\n  variant?: \"uppercase\" | \"plain\";\n  /**\n   * `comfortable` — the roomy default, for tables of a handful of columns.\n   * `compact` — what every table of eight columns or more had already chosen by\n   * hand, because the roomy padding pushes them into a horizontal scroll.\n   */\n  density?: \"comfortable\" | \"compact\";\n  /** Pins the header for a table inside its own scroll container. */\n  stickyHeader?: boolean;\n  rowClassName?: (row: Row, index: number) => string | undefined;\n  /** Rendered in place of `<tbody>` rows when there are none. */\n  emptyMessage?: React.ReactNode;\n  /**\n   * Rows for a `<tfoot>` — a totals line, typically. The caller supplies the\n   * `<tr>` itself because a summary row rarely lines up with the columns above\n   * it; designer-counts spans its first two.\n   */\n  footer?: React.ReactNode;\n  /** Names the table for screen readers when no visible caption fits. */\n  ariaLabel?: string;\n  /** Classes for the scroll wrapper. */\n  className?: string;\n  /** Classes for the `<table>`. */\n  tableClassName?: string;\n}\n\nconst HEADER_VARIANTS = {\n  uppercase:\n    \"border-border bg-muted/40 text-muted-foreground border-b text-xs tracking-wide uppercase\",\n  plain: \"text-muted-foreground border-border border-b text-left\",\n} as const;\n\nconst DENSITY = {\n  comfortable: \"px-4 py-3\",\n  compact: \"px-3 py-2\",\n} as const;\n\nconst ALIGN = {\n  left: \"text-left\",\n  right: \"text-right\",\n  center: \"text-center\",\n} as const;\n\nexport function DataTable<Row>({\n  columns,\n  rows,\n  rowKey,\n  variant = \"uppercase\",\n  density = \"comfortable\",\n  stickyHeader = false,\n  rowClassName,\n  emptyMessage,\n  footer,\n  ariaLabel,\n  className,\n  tableClassName,\n}: DataTableProps<Row>) {\n  return (\n    <div\n      className={cn(\n        \"border-border bg-background/80 overflow-x-auto rounded-lg border\",\n        className,\n      )}\n    >\n      <table\n        aria-label={ariaLabel}\n        className={cn(\"min-w-full text-left text-sm\", tableClassName)}\n      >\n        <thead\n          className={cn(\n            HEADER_VARIANTS[variant],\n            stickyHeader && \"bg-muted sticky top-0 z-10\",\n          )}\n        >\n          <tr>\n            {columns.map((column) => (\n              <th\n                key={column.key}\n                scope=\"col\"\n                aria-sort={column.ariaSort}\n                className={cn(\n                  DENSITY[density],\n                  \"font-medium\",\n                  ALIGN[column.align ?? \"left\"],\n                  column.headerClassName,\n                )}\n              >\n                {column.title}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.length === 0 && emptyMessage != null ? (\n            <tr>\n              {/* One cell across the whole width — a short row would otherwise\n                  leave the message sitting under the first column. */}\n              <td\n                colSpan={columns.length}\n                className=\"text-muted-foreground px-4 py-6 text-center text-sm\"\n              >\n                {emptyMessage}\n              </td>\n            </tr>\n          ) : (\n            rows.map((row, index) => (\n              <tr\n                key={rowKey(row, index)}\n                className={cn(\n                  \"border-border/70 border-b last:border-0\",\n                  rowClassName?.(row, index),\n                )}\n              >\n                {columns.map((column) => (\n                  <td\n                    key={column.key}\n                    className={cn(\n                      DENSITY[density],\n                      ALIGN[column.align ?? \"left\"],\n                      column.className,\n                    )}\n                  >\n                    {column.cell(row, index)}\n                  </td>\n                ))}\n              </tr>\n            ))\n          )}\n        </tbody>\n        {footer != null ? <tfoot>{footer}</tfoot> : null}\n      </table>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAwHM,SAYQ,KAZR;AAtCN,IAAM,kBAAkB;AAAA,EACtB,WACE;AAAA,EACF,OAAO;AACT;AAEA,IAAM,UAAU;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AACX;AAEA,IAAM,QAAQ;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEO,SAAS,UAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,cAAY;AAAA,UACZ,WAAW,GAAG,gCAAgC,cAAc;AAAA,UAE5D;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT,gBAAgB,OAAO;AAAA,kBACvB,gBAAgB;AAAA,gBAClB;AAAA,gBAEA,8BAAC,QACE,kBAAQ,IAAI,CAAC,WACZ;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAM;AAAA,oBACN,aAAW,OAAO;AAAA,oBAClB,WAAW;AAAA,sBACT,QAAQ,OAAO;AAAA,sBACf;AAAA,sBACA,MAAM,OAAO,SAAS,MAAM;AAAA,sBAC5B,OAAO;AAAA,oBACT;AAAA,oBAEC,iBAAO;AAAA;AAAA,kBAVH,OAAO;AAAA,gBAWd,CACD,GACH;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,WACE,eAAK,WAAW,KAAK,gBAAgB,OACpC,oBAAC,QAGC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,QAAQ;AAAA,gBACjB,WAAU;AAAA,gBAET;AAAA;AAAA,YACH,GACF,IAEA,KAAK,IAAI,CAAC,KAAK,UACb;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAW;AAAA,kBACT;AAAA,kBACA,eAAe,KAAK,KAAK;AAAA,gBAC3B;AAAA,gBAEC,kBAAQ,IAAI,CAAC,WACZ;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAW;AAAA,sBACT,QAAQ,OAAO;AAAA,sBACf,MAAM,OAAO,SAAS,MAAM;AAAA,sBAC5B,OAAO;AAAA,oBACT;AAAA,oBAEC,iBAAO,KAAK,KAAK,KAAK;AAAA;AAAA,kBAPlB,OAAO;AAAA,gBAQd,CACD;AAAA;AAAA,cAjBI,OAAO,KAAK,KAAK;AAAA,YAkBxB,CACD,GAEL;AAAA,YACC,UAAU,OAAO,oBAAC,WAAO,kBAAO,IAAW;AAAA;AAAA;AAAA,MAC9C;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-ZP252OJZ.js

@@ -0,0 +1,56 @@
+import {
+  cn
+} from "./chunk-HCA5ODCD.js";
+
+// src/alert.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var alertVariants = cva("rounded-lg border px-3 py-2 text-sm", {
+  variants: {
+    variant: {
+      danger: "border-destructive/30 bg-destructive/5 text-destructive",
+      warning: "border-warning/30 bg-warning/5 text-warning",
+      success: "border-success/30 bg-success/5 text-success",
+      info: "border-info/30 bg-info/5 text-info",
+      /**
+       * The quiet state of a banner that also has loud ones — "no default
+       * campaign set" next to "this is the default". Without it those callers
+       * keep a ternary of raw class strings and the shared component only
+       * covers half of what they draw.
+       */
+      neutral: "border-border bg-muted/40 text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    // Failure is what a banner almost always reports here, and defaulting to
+    // it means the noisy case cannot be forgotten.
+    variant: "danger"
+  }
+});
+var Alert = React.forwardRef(
+  ({ className, variant, action, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: variant === "danger" || variant == null ? "alert" : "status",
+      className: cn(
+        alertVariants({ variant }),
+        action && "flex flex-wrap items-center justify-between gap-3",
+        className
+      ),
+      ...props,
+      children: [
+        action ? /* @__PURE__ */ jsx("span", { children }) : children,
+        action
+      ]
+    }
+  )
+);
+Alert.displayName = "Alert";
+
+export {
+  alertVariants,
+  Alert
+};
+//# sourceMappingURL=chunk-ZP252OJZ.js.map

package/dist/chunk-ZP252OJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The inline message banner — a failed load, a warning above a form, a note.\n *\n * This was the most duplicated markup in the panel: thirty blocks across\n * twenty-eight files, spelled seven different ways. `px-3 py-2` in most places\n * and `px-4 py-3` in others, `text-rose-700` here and `text-destructive`\n * there — all meaning \"something went wrong\".\n *\n * `role` is derived from the variant rather than left to callers. An error a\n * user needs to act on should interrupt a screen reader; a note should not.\n * Almost none of the hand-rolled copies set either.\n */\nconst alertVariants = cva(\"rounded-lg border px-3 py-2 text-sm\", {\n  variants: {\n    variant: {\n      danger: \"border-destructive/30 bg-destructive/5 text-destructive\",\n      warning: \"border-warning/30 bg-warning/5 text-warning\",\n      success: \"border-success/30 bg-success/5 text-success\",\n      info: \"border-info/30 bg-info/5 text-info\",\n      /**\n       * The quiet state of a banner that also has loud ones — \"no default\n       * campaign set\" next to \"this is the default\". Without it those callers\n       * keep a ternary of raw class strings and the shared component only\n       * covers half of what they draw.\n       */\n      neutral: \"border-border bg-muted/40 text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    // Failure is what a banner almost always reports here, and defaulting to\n    // it means the noisy case cannot be forgotten.\n    variant: \"danger\",\n  },\n});\n\nexport interface AlertProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /**\n   * A control belonging to the message, such as Retry. Given one, the banner\n   * lays out as a row and keeps the action at its end.\n   */\n  action?: React.ReactNode;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, action, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      role={variant === \"danger\" || variant == null ? \"alert\" : \"status\"}\n      className={cn(\n        alertVariants({ variant }),\n        action && \"flex flex-wrap items-center justify-between gap-3\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Wrapped so the action sits opposite the text rather than being\n          pushed around by whatever the caller passed as children. */}\n      {action ? <span>{children}</span> : children}\n      {action}\n    </div>\n  ),\n);\n\nAlert.displayName = \"Alert\";\n\nexport { alertVariants };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AACvB,SAAS,WAA8B;AAoDnC,SAYY,KAZZ;AApCJ,IAAM,gBAAgB,IAAI,uCAAuC;AAAA,EAC/D,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAON,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA;AAAA;AAAA,IAGf,SAAS;AAAA,EACX;AACF,CAAC;AAaM,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,SAAS,QAAQ,UAAU,GAAG,MAAM,GAAG,QACnD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,YAAY,YAAY,WAAW,OAAO,UAAU;AAAA,MAC1D,WAAW;AAAA,QACT,cAAc,EAAE,QAAQ,CAAC;AAAA,QACzB,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAIH;AAAA,iBAAS,oBAAC,UAAM,UAAS,IAAU;AAAA,QACnC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,MAAM,cAAc;","names":[]}