@a4ui/core 0.9.0 → 0.10.1

package/dist/ui/FileUpload.d.ts

@@ -0,0 +1,54 @@
+import { JSX } from 'solid-js';
+/** A single file entry rendered by {@link FileUpload}. The consumer owns this state. */
+export interface UploadFile {
+    id: string;
+    name: string;
+    /** File size in bytes. */
+    size: number;
+    /** Upload progress, 0-100. */
+    progress: number;
+    status: 'pending' | 'uploading' | 'done' | 'error';
+    /** Optional preview/thumbnail URL (e.g. an object URL for an image). */
+    url?: string;
+    /** Error message when `status === 'error'`. */
+    error?: string;
+}
+export interface FileUploadProps {
+    files: UploadFile[];
+    /** Called with the newly chosen File[] (from drop or the file dialog). */
+    onAdd: (files: File[]) => void;
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    /** `accept` attribute for the hidden input, e.g. ".png,.jpg,application/pdf". */
+    accept?: string;
+    /** Allow choosing/dropping more than one file at a time. Default: `true`. */
+    multiple?: boolean;
+    /** Helper text shown inside the drop zone. */
+    hint?: string;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Advanced, controlled file uploader: a click-or-drag drop zone plus a list of
+ * files showing per-file progress, error/retry, a preview thumbnail, and a
+ * remove action. This component owns no file state — the consumer supplies
+ * `files` and performs the actual upload, updating `files` as progress comes in.
+ *
+ * @example
+ * ```tsx
+ * const [files, setFiles] = createSignal<UploadFile[]>([])
+ *
+ * <FileUpload
+ *   files={files()}
+ *   accept="image/*"
+ *   onAdd={(added) => {
+ *     const entries = added.map((f) => ({ id: crypto.randomUUID(), name: f.name, size: f.size, progress: 0, status: 'pending' as const }))
+ *     setFiles((prev) => [...prev, ...entries])
+ *     entries.forEach((entry, i) => upload(added[i], entry.id, setFiles))
+ *   }}
+ *   onRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}
+ *   onRetry={(id) => retryUpload(id, setFiles)}
+ * />
+ * ```
+ */
+export declare function FileUpload(props: FileUploadProps): JSX.Element;

package/dist/ui/MultiSelect.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+/** One selectable option: a stable `value` and its display `label`. */
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value: string[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    /** Show a search box in the dropdown. Default `true`. */
+    searchable?: boolean;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Multi-select dropdown: the trigger shows selected options as removable
+ * chips, and the portaled popover lists (optionally search-filtered) options
+ * to toggle. Picking an option keeps the popover open so several values can
+ * be chosen in a row; the popover closes on outside click, Escape, scroll, or
+ * resize.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = createSignal<string[]>([])
+ * <MultiSelect
+ *   options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
+ *   value={tags()}
+ *   onChange={setTags}
+ *   placeholder="Select tags…"
+ * />
+ * ```
+ */
+export declare function MultiSelect(props: MultiSelectProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -45,6 +45,11 @@
       "import": "./dist/commerce.js",
       "default": "./dist/commerce.js"
     },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts.js",
+      "default": "./dist/charts.js"
+    },
     "./preset": {
       "import": "./preset.js",
       "default": "./preset.js"

package/dist/Checkbox-CC3EGilW.js

@@ -1,173 +0,0 @@
-import { spread as g, mergeProps as f, insert as i, template as d, createComponent as v, effect as h, setAttribute as x, className as y, delegateEvents as E } from "solid-js/web";
-import { splitProps as m, createSignal as S, Show as L, For as p } from "solid-js";
-import { Star as C } from "lucide-solid";
-import { clsx as B } from "clsx";
-import { twMerge as R } from "tailwind-merge";
-function c(...e) {
-  return R(B(e));
-}
-var T = /* @__PURE__ */ d("<span>");
-const D = {
-  neutral: "bg-muted text-muted-foreground ring-border",
-  success: "bg-emerald-500/15 text-emerald-600 ring-emerald-500/30",
-  warning: "bg-amber-500/15 text-amber-600 ring-amber-500/30",
-  danger: "bg-rose-500/15 text-rose-600 ring-rose-500/30",
-  info: "bg-sky-500/15 text-sky-600 ring-sky-500/30"
-}, N = "badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset whitespace-nowrap";
-function K(e) {
-  const [r, n] = m(e, ["tone", "class", "children"]);
-  return (() => {
-    var t = T();
-    return g(t, f({
-      get class() {
-        return c(N, D[r.tone ?? "neutral"], r.class);
-      }
-    }, n), !1, !0), i(t, () => r.children), t;
-  })();
-}
-var M = /* @__PURE__ */ d("<button>");
-const G = {
-  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-  secondary: "bg-muted text-foreground hover:bg-muted/70",
-  outline: "border border-border bg-transparent text-foreground hover:bg-muted",
-  ghost: "bg-transparent text-foreground hover:bg-muted"
-}, H = "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-[color,background-color,transform] duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50";
-function Q(e) {
-  const [r, n] = m(e, ["variant", "class", "type", "children"]);
-  return (() => {
-    var t = M();
-    return g(t, f({
-      get type() {
-        return r.type ?? "button";
-      },
-      get class() {
-        return c(H, G[r.variant ?? "primary"], r.class);
-      }
-    }, n), !1, !0), i(t, () => r.children), t;
-  })();
-}
-var $ = /* @__PURE__ */ d("<div>"), O = /* @__PURE__ */ d("<h2>");
-function W(e) {
-  const [r, n] = m(e, ["class", "children", "glass", "glow"]), t = () => (r.glow ?? r.glass) === !0;
-  return (() => {
-    var u = $();
-    return g(u, f({
-      get class() {
-        return c(r.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", t() && "glow-edge", r.class);
-      }
-    }, n), !1, !0), i(u, () => r.children), u;
-  })();
-}
-function X(e) {
-  const [r, n] = m(e, ["class", "children"]);
-  return (() => {
-    var t = $();
-    return g(t, f({
-      get class() {
-        return c("flex flex-col space-y-1.5 p-6", r.class);
-      }
-    }, n), !1, !0), i(t, () => r.children), t;
-  })();
-}
-function Y(e) {
-  const [r, n] = m(e, ["class", "children"]);
-  return (() => {
-    var t = O();
-    return g(t, f({
-      get class() {
-        return c("text-lg font-semibold leading-none tracking-tight", r.class);
-      }
-    }, n), !1, !0), i(t, () => r.children), t;
-  })();
-}
-function Z(e) {
-  const [r, n] = m(e, ["class", "children"]);
-  return (() => {
-    var t = $();
-    return g(t, f({
-      get class() {
-        return c("p-6 pt-0", r.class);
-      }
-    }, n), !1, !0), i(t, () => r.children), t;
-  })();
-}
-var P = /* @__PURE__ */ d("<div role=radiogroup>"), U = /* @__PURE__ */ d("<div role=img>"), j = /* @__PURE__ */ d('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
-function ee(e) {
-  const [r, n] = S(0), t = () => e.max ?? 5, u = () => Array.from({
-    length: t()
-  }, (o, a) => a + 1), A = () => r() > 0 ? r() : e.value, b = (o) => {
-    var a;
-    e.readonly || (a = e.onChange) == null || a.call(e, o);
-  }, w = (o) => c("h-5 w-5 transition-colors", o <= A() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
-  return v(L, {
-    get when() {
-      return !e.readonly;
-    },
-    get fallback() {
-      return (() => {
-        var o = U();
-        return i(o, v(p, {
-          get each() {
-            return u();
-          },
-          children: (a) => v(C, {
-            get class() {
-              return w(a);
-            },
-            "aria-hidden": "true"
-          })
-        })), h((a) => {
-          var s = c("inline-flex items-center gap-1", e.class), l = `Rating ${e.value} of ${t()}`;
-          return s !== a.e && y(o, a.e = s), l !== a.t && x(o, "aria-label", a.t = l), a;
-        }, {
-          e: void 0,
-          t: void 0
-        }), o;
-      })();
-    },
-    get children() {
-      var o = P();
-      return o.addEventListener("mouseleave", () => n(0)), i(o, v(p, {
-        get each() {
-          return u();
-        },
-        children: (a) => (() => {
-          var s = j();
-          return s.$$keydown = (l) => {
-            l.key === "ArrowRight" || l.key === "ArrowUp" ? (l.preventDefault(), b(Math.min(e.value + 1, t()))) : (l.key === "ArrowLeft" || l.key === "ArrowDown") && (l.preventDefault(), b(Math.max(e.value - 1, 0)));
-          }, s.$$click = () => b(a), s.addEventListener("blur", () => n(0)), s.addEventListener("focus", () => n(a)), s.addEventListener("mouseenter", () => n(a)), i(s, v(C, {
-            get class() {
-              return w(a);
-            },
-            "aria-hidden": "true"
-          })), h((l) => {
-            var k = e.value === a, _ = `Rate ${a} of ${t()}`;
-            return k !== l.e && x(s, "aria-checked", l.e = k), _ !== l.t && x(s, "aria-label", l.t = _), l;
-          }, {
-            e: void 0,
-            t: void 0
-          }), s;
-        })()
-      })), h(() => y(o, c("inline-flex items-center gap-1", e.class))), o;
-    }
-  });
-}
-E(["click", "keydown"]);
-var F = /* @__PURE__ */ d('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
-function re(e) {
-  return (() => {
-    var r = F(), n = r.firstChild;
-    return n.addEventListener("change", (t) => e.onChange(t.currentTarget.checked)), i(r, () => e.label, null), h(() => y(r, c("inline-flex items-center gap-2 text-sm text-foreground", e.class))), h(() => n.checked = e.checked), r;
-  })();
-}
-export {
-  K as B,
-  W as C,
-  ee as R,
-  Q as a,
-  re as b,
-  c,
-  Z as d,
-  X as e,
-  Y as f
-};