@pathscale/ui 0.0.2 → 0.0.4

package/dist/chunk/FKSQPGOD.jsx

@@ -0,0 +1,170 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/toast/toast.store.ts
+import { createSignal } from "solid-js";
+var [toasts, setToasts] = createSignal([]);
+var toastStore = {
+  toasts,
+  add(toast2) {
+    const id = crypto.randomUUID();
+    setToasts((prev) => [...prev, { ...toast2, id }]);
+    return id;
+  },
+  remove(id) {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  },
+  clear() {
+    setToasts([]);
+  }
+};
+
+// src/components/toast/toast-api.ts
+function createToastApi() {
+  const show = (message, options = {}) => {
+    return toastStore.add({ ...options, message });
+  };
+  return {
+    show,
+    success: (msg, opts) => show(msg, { ...opts, type: "success" }),
+    error: (msg, opts) => show(msg, { ...opts, type: "error" }),
+    info: (msg, opts) => show(msg, { ...opts, type: "info" }),
+    warning: (msg, opts) => show(msg, { ...opts, type: "warning" }),
+    clear: toastStore.clear
+  };
+}
+
+// src/components/toast/Toaster.tsx
+import { For } from "solid-js";
+
+// src/components/toast/Toast.tsx
+import {
+  createSignal as createSignal2,
+  onMount,
+  onCleanup,
+  Show
+} from "solid-js";
+
+// src/components/toast/utils/remove-element.ts
+function removeElement(el) {
+  if (typeof el.remove === "function") {
+    el.remove();
+  } else {
+    el.parentNode?.removeChild(el);
+  }
+}
+
+// src/components/toast/utils/timer.ts
+var Timer = class {
+  callback;
+  delay;
+  startedAt;
+  timer;
+  constructor(callback, delay) {
+    this.callback = callback;
+    this.delay = delay;
+    this.startedAt = Date.now();
+    this.timer = window.setTimeout(callback, delay);
+  }
+  pause() {
+    this.stop();
+    this.delay -= Date.now() - this.startedAt;
+  }
+  resume() {
+    this.stop();
+    this.startedAt = Date.now();
+    this.timer = window.setTimeout(this.callback, this.delay);
+  }
+  stop() {
+    clearTimeout(this.timer);
+  }
+};
+
+// src/components/toast/Toast.styles.ts
+var toastWrapperClass = cva(
+  "relative flex items-start gap-3 px-4 py-3 rounded-2xl shadow-lg transition-all duration-300 w-full",
+  {
+    variants: {
+      type: {
+        default: "bg-gray-700 text-white",
+        success: "bg-green-600 text-white",
+        error: "bg-red-600 text-white",
+        info: "bg-blue-600 text-white",
+        warning: "bg-yellow-400 text-black"
+      },
+      visible: {
+        true: "opacity-100 translate-y-0",
+        false: "opacity-0 -translate-y-2 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      type: "default",
+      visible: true
+    }
+  }
+);
+
+// src/components/toast/Toast.tsx
+var Toast = (props) => {
+  const [visible, setVisible] = createSignal2(false);
+  let rootRef;
+  let timer = null;
+  const close = () => {
+    timer?.stop();
+    setVisible(false);
+    setTimeout(() => {
+      props.onClose?.();
+      if (rootRef) removeElement(rootRef);
+    }, 150);
+  };
+  onMount(() => {
+    setVisible(true);
+    if (props.duration !== false) {
+      timer = new Timer(close, props.duration || 4e3);
+    }
+  });
+  onCleanup(() => {
+    timer?.stop();
+  });
+  return <div
+    ref={rootRef}
+    class={toastWrapperClass({
+      type: props.type || "default",
+      visible: visible()
+    })}
+    role="alert"
+    onClick={() => props.dismissible && close()}
+    innerHTML={props.message}
+  >
+      <Show when={props.dismissible}>
+        <button
+    class="absolute top-2 right-2 text-white/80 hover:text-white transition"
+    aria-label="Close toast"
+  >
+          ×
+        </button>
+      </Show>
+    </div>;
+};
+var Toast_default = Toast;
+
+// src/components/toast/Toaster.tsx
+var Toaster = () => {
+  return <div class="fixed bottom-4 right-4 z-50 flex flex-col items-end gap-2 w-[300px] max-w-full">
+      <For each={toastStore.toasts()}>
+        {(toast2) => <Toast_default {...toast2} onClose={() => toastStore.remove(toast2.id)} />}
+      </For>
+    </div>;
+};
+var Toaster_default = Toaster;
+
+// src/components/toast/index.ts
+var toast = createToastApi();
+var toast_default = toast;
+
+export {
+  Toaster_default,
+  toast,
+  toast_default
+};

package/dist/chunk/GMIXRYN3.js

@@ -0,0 +1,138 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, effect, className, memo } from 'solid-js/web';
+import { splitProps, createMemo, Show } from 'solid-js';
+
+// src/components/progress/Progress.styles.ts
+var progressContainer = cva(
+  "relative w-full max-w-md select-none",
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var progressWrapper = cva("overflow-hidden bg-gray-200", {
+  variants: {
+    size: {
+      sm: "h-2",
+      md: "h-4",
+      lg: "h-6"
+    },
+    shape: {
+      rounded: "rounded-lg",
+      circle: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "rounded"
+  }
+});
+var progressFill = cva("h-full transition-all duration-300", {
+  variants: {
+    color: {
+      default: "bg-gray-500",
+      danger: "bg-red-500",
+      success: "bg-green-500",
+      info: "bg-blue-500",
+      warning: "bg-yellow-500"
+    },
+    variant: {
+      filled: "",
+      outlined: "bg-opacity-0 ring-1 ring-gray-300",
+      ghost: "bg-opacity-50"
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "filled"
+  }
+});
+var progressLabel = cva(
+  "absolute top-0 right-0 h-full flex items-center pr-2 text-xs font-medium text-gray-700"
+);
+
+// src/components/progress/Progress.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><div>`);
+var Progress = (props) => {
+  const [local, rest] = splitProps(props, ["value", "size", "shape", "variant", "color", "showValue", "format", "className"]);
+  const val = createMemo(() => typeof local.value === "number" ? Math.max(0, Math.min(100, local.value)) : null);
+  const isDeterminate = () => val() !== null;
+  const labelText = createMemo(() => {
+    if (!local.showValue || val() == null) return "";
+    return local.format === "percent" ? `${val()}%` : String(val());
+  });
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps(rest, {
+      get ["class"]() {
+        return classes(progressContainer({
+          size: local.size
+        }), local.className);
+      },
+      get ["aria-busy"]() {
+        return !isDeterminate();
+      }
+    }), false, true);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return isDeterminate();
+      },
+      get fallback() {
+        return (() => {
+          var _el$5 = _tmpl$();
+          _el$5.style.setProperty("width", "100%");
+          effect(() => className(_el$5, classes(progressFill({
+            color: local.color,
+            variant: local.variant
+          }), "animate-pulse")));
+          return _el$5;
+        })();
+      },
+      get children() {
+        var _el$3 = _tmpl$();
+        effect((_p$) => {
+          var _v$ = progressFill({
+            color: local.color,
+            variant: local.variant
+          }), _v$2 = `${val()}%`;
+          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$3.style.setProperty("width", _v$2) : _el$3.style.removeProperty("width"));
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$3;
+      }
+    }));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!local.showValue)() && labelText();
+      },
+      get children() {
+        var _el$4 = _tmpl$();
+        insert(_el$4, labelText);
+        effect(() => className(_el$4, progressLabel()));
+        return _el$4;
+      }
+    }), null);
+    effect(() => className(_el$2, classes(progressWrapper({
+      size: local.size,
+      shape: local.shape
+    }))));
+    return _el$;
+  })();
+};
+var Progress_default = Progress;
+
+// src/components/progress/index.ts
+var progress_default = Progress_default;
+
+export { progress_default };

package/dist/chunk/HWAGW5N4.jsx

@@ -0,0 +1,118 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/table/Table.tsx
+import {
+  splitProps,
+  createMemo,
+  createSignal,
+  For
+} from "solid-js";
+
+// src/components/table/Table.styles.ts
+var tableWrapper = cva(
+  "overflow-x-auto rounded-lg border border-gray-200 shadow"
+);
+var tableVariants = cva(
+  [
+    "min-w-full",
+    "text-sm text-left",
+    "divide-y divide-gray-100"
+  ],
+  {
+    variants: {
+      header: {
+        default: "bg-gray-50 font-semibold text-gray-700"
+      },
+      row: {
+        default: ""
+      },
+      cell: {
+        default: "px-4 py-2"
+      },
+      divider: {
+        on: "border-r border-gray-200 last:border-r-0",
+        off: ""
+      }
+    },
+    defaultVariants: {
+      header: "default",
+      row: "default",
+      cell: "default",
+      divider: "on"
+    }
+  }
+);
+
+// src/components/table/Table.tsx
+var Table = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    ["columns", "rows", "onSort", "className", "rowKey"],
+    Object.keys(tableVariants.variantKeys ?? {})
+  );
+  const [sortKey, setSortKey] = createSignal(null);
+  const [sortDir, setSortDir] = createSignal("asc");
+  const data = createMemo(() => localProps.rows);
+  const baseVars = () => variantProps;
+  const wrapperClass = classes(
+    tableWrapper(),
+    localProps.className
+  );
+  const tableClass = classes(
+    tableVariants(baseVars()),
+    localProps.className
+  );
+  const handleHeaderClick = (colKey, isSortable) => {
+    if (!isSortable) return;
+    const newDir = sortKey() === colKey && sortDir() === "asc" ? "desc" : "asc";
+    setSortKey(() => colKey);
+    setSortDir(newDir);
+    props.onSort?.(colKey, newDir);
+  };
+  return <div class={wrapperClass}>
+      <table {...otherProps} class={tableClass}>
+        <thead>
+          <tr>
+            {localProps.columns.map((col) => <th
+    class={tableVariants({ ...baseVars(), cell: variantProps.cell, divider: "on" })}
+    onClick={() => handleHeaderClick(col.key, col.sortable)}
+    style={col.sortable ? { cursor: "pointer" } : void 0}
+    role="columnheader"
+    aria-sort={sortKey() === col.key ? sortDir() === "asc" ? "ascending" : "descending" : void 0}
+  >
+                {col.header}
+                {sortKey() === col.key && (sortDir() === "asc" ? " \u2191" : " \u2193")}
+              </th>)}
+          </tr>
+        </thead>
+        <tbody>
+          <For each={data()}>
+            {(row) => <tr
+    class={tableVariants({ ...baseVars(), row: variantProps.row })}
+  >
+                {localProps.columns.map((col, ci) => <td
+    class={tableVariants({
+      ...baseVars(),
+      cell: variantProps.cell,
+      divider: ci === localProps.columns.length - 1 ? "off" : "on"
+    })}
+  >
+                    {String(row[col.key] ?? "")}
+                  </td>)}
+              </tr>}
+          </For>
+        </tbody>
+      </table>
+    </div>;
+};
+var Table_default = Table;
+
+// src/components/table/index.ts
+var table_default = Table_default;
+
+export {
+  table_default
+};

package/dist/chunk/JWRGKHDO.js

@@ -0,0 +1,172 @@
+import { cva } from './HKS7ET6T.js';
+import { createSignal, For, onMount, onCleanup, Show } from 'solid-js';
+import { delegateEvents, template, insert, createComponent, mergeProps, effect, className, use } from 'solid-js/web';
+
+var [toasts, setToasts] = createSignal([]);
+var toastStore = {
+  toasts,
+  add(toast2) {
+    const id = crypto.randomUUID();
+    setToasts((prev) => [...prev, { ...toast2, id }]);
+    return id;
+  },
+  remove(id) {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  },
+  clear() {
+    setToasts([]);
+  }
+};
+
+// src/components/toast/toast-api.ts
+function createToastApi() {
+  const show = (message, options = {}) => {
+    return toastStore.add({ ...options, message });
+  };
+  return {
+    show,
+    success: (msg, opts) => show(msg, { ...opts, type: "success" }),
+    error: (msg, opts) => show(msg, { ...opts, type: "error" }),
+    info: (msg, opts) => show(msg, { ...opts, type: "info" }),
+    warning: (msg, opts) => show(msg, { ...opts, type: "warning" }),
+    clear: toastStore.clear
+  };
+}
+
+// src/components/toast/utils/remove-element.ts
+function removeElement(el) {
+  if (typeof el.remove === "function") {
+    el.remove();
+  } else {
+    el.parentNode?.removeChild(el);
+  }
+}
+
+// src/components/toast/utils/timer.ts
+var Timer = class {
+  callback;
+  delay;
+  startedAt;
+  timer;
+  constructor(callback, delay) {
+    this.callback = callback;
+    this.delay = delay;
+    this.startedAt = Date.now();
+    this.timer = window.setTimeout(callback, delay);
+  }
+  pause() {
+    this.stop();
+    this.delay -= Date.now() - this.startedAt;
+  }
+  resume() {
+    this.stop();
+    this.startedAt = Date.now();
+    this.timer = window.setTimeout(this.callback, this.delay);
+  }
+  stop() {
+    clearTimeout(this.timer);
+  }
+};
+
+// src/components/toast/Toast.styles.ts
+var toastWrapperClass = cva(
+  "relative flex items-start gap-3 px-4 py-3 rounded-2xl shadow-lg transition-all duration-300 w-full",
+  {
+    variants: {
+      type: {
+        default: "bg-gray-700 text-white",
+        success: "bg-green-600 text-white",
+        error: "bg-red-600 text-white",
+        info: "bg-blue-600 text-white",
+        warning: "bg-yellow-400 text-black"
+      },
+      visible: {
+        true: "opacity-100 translate-y-0",
+        false: "opacity-0 -translate-y-2 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      type: "default",
+      visible: true
+    }
+  }
+);
+
+// src/components/toast/Toast.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button class="absolute top-2 right-2 text-white/80 hover:text-white transition"aria-label="Close toast">\xD7`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div role=alert>`);
+var Toast = (props) => {
+  const [visible, setVisible] = createSignal(false);
+  let rootRef;
+  let timer = null;
+  const close = () => {
+    timer?.stop();
+    setVisible(false);
+    setTimeout(() => {
+      props.onClose?.();
+      if (rootRef) removeElement(rootRef);
+    }, 150);
+  };
+  onMount(() => {
+    setVisible(true);
+    if (props.duration !== false) {
+      timer = new Timer(close, props.duration || 4e3);
+    }
+  });
+  onCleanup(() => {
+    timer?.stop();
+  });
+  return (() => {
+    var _el$ = _tmpl$2();
+    _el$.$$click = () => props.dismissible && close();
+    var _ref$ = rootRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : rootRef = _el$;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.dismissible;
+      },
+      get children() {
+        return _tmpl$();
+      }
+    }));
+    effect((_p$) => {
+      var _v$ = toastWrapperClass({
+        type: props.type || "default",
+        visible: visible()
+      }), _v$2 = props.message;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && (_el$.innerHTML = _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var Toast_default = Toast;
+delegateEvents(["click"]);
+
+// src/components/toast/Toaster.tsx
+var _tmpl$3 = /* @__PURE__ */ template(`<div class="fixed bottom-4 right-4 z-50 flex flex-col items-end gap-2 w-[300px] max-w-full">`);
+var Toaster = () => {
+  return (() => {
+    var _el$ = _tmpl$3();
+    insert(_el$, createComponent(For, {
+      get each() {
+        return toastStore.toasts();
+      },
+      children: (toast2) => createComponent(Toast_default, mergeProps(toast2, {
+        onClose: () => toastStore.remove(toast2.id)
+      }))
+    }));
+    return _el$;
+  })();
+};
+var Toaster_default = Toaster;
+
+// src/components/toast/index.ts
+var toast = createToastApi();
+var toast_default = toast;
+
+export { Toaster_default, toast, toast_default };