@pathscale/ui 0.0.1 → 0.0.3

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 };

package/dist/chunk/KV6LTJHI.jsx

@@ -0,0 +1,175 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/tabs/Tabs.tsx
+import {
+  createSignal,
+  splitProps,
+  For,
+  Show,
+  createMemo
+} from "solid-js";
+
+// src/components/tabs/Tabs.styles.ts
+var tabsNavVariants = cva(
+  "flex text-sm font-medium text-gray-600 dark:text-gray-300",
+  {
+    variants: {
+      type: {
+        basic: "",
+        boxed: "flex gap-2",
+        toggle: "inline-flex rounded-md p-1",
+        "toggle-rounded": "inline-flex rounded-full p-1"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3"
+      },
+      alignment: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      expanded: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      type: "basic",
+      size: "md",
+      alignment: "left",
+      expanded: false
+    }
+  }
+);
+var tabTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap font-medium text-sm transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "text-xs px-2 py-1",
+        md: "text-sm px-3 py-2",
+        lg: "text-base px-4 py-3"
+      },
+      type: {
+        basic: "border-b-2 transition-colors hover:text-blue-600",
+        boxed: "rounded-t px-4 py-2 hover:text-blue-600",
+        toggle: "border -ml-px px-4 py-2 transition-colors first:ml-0 first:rounded-l-md last:rounded-r-md",
+        "toggle-rounded": "border -ml-px first:ml-0 first:rounded-l-full last:rounded-r-full transition-colors"
+      },
+      active: {
+        true: "",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        type: "basic",
+        active: true,
+        class: "border-blue-600 text-blue-600"
+      },
+      {
+        type: "basic",
+        active: false,
+        class: "border-transparent text-gray-500 dark:text-gray-400"
+      },
+      {
+        type: "boxed",
+        active: true,
+        class: "border-x border-t border-b-0 border-gray-400 dark:border-gray-600 text-blue-600"
+      },
+      {
+        type: "boxed",
+        active: false,
+        class: "border-b border-transparent text-gray-500 dark:text-gray-400 hover:text-blue-600"
+      },
+      {
+        type: "toggle",
+        active: true,
+        class: "bg-blue-600 text-white border-blue-600"
+      },
+      {
+        type: "toggle",
+        active: false,
+        class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
+      },
+      {
+        type: "toggle-rounded",
+        active: true,
+        class: "bg-blue-600 text-white border-blue-600"
+      },
+      {
+        type: "toggle-rounded",
+        active: false,
+        class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      disabled: false
+    }
+  }
+);
+
+// src/components/tabs/Tabs.tsx
+var Tabs = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["items", "value", "onChange"],
+    ["size", "type", "alignment", "expanded"]
+  );
+  const [internalActive, setInternalActive] = createSignal(local.value ?? 0);
+  const isControlled = () => local.value !== void 0;
+  const active = createMemo(
+    () => isControlled() ? local.value : internalActive()
+  );
+  const handleChange = (i) => {
+    const item = local.items[i];
+    if (!item || item.disabled) return;
+    if (!isControlled()) {
+      setInternalActive(i);
+    }
+    local.onChange?.(i);
+  };
+  return <div {...otherProps}>
+      <nav class={tabsNavVariants(variantProps)}>
+        <ul class="flex gap-0">
+          <For each={local.items}>
+            {(tab, i) => <li>
+                <button
+    class={tabTriggerVariants({
+      type: variantProps.type ?? "basic",
+      size: variantProps.size ?? "md",
+      active: i() === active(),
+      disabled: tab.disabled
+    })}
+    onClick={() => handleChange(i())}
+  >
+                  {tab.label}
+                </button>
+              </li>}
+          </For>
+        </ul>
+      </nav>
+      <div class="pt-4">
+        <Show when={local.items[active()]}>
+          {local.items[active()]?.content}
+        </Show>
+      </div>
+    </div>;
+};
+var Tabs_default = Tabs;
+
+// src/components/tabs/index.ts
+var tabs_default = Tabs_default;
+
+export {
+  tabs_default
+};

package/dist/chunk/LAQPAV5I.jsx

@@ -0,0 +1,187 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/steps/Steps.tsx
+import {
+  createSignal,
+  splitProps,
+  For,
+  Show,
+  createMemo
+} from "solid-js";
+
+// src/components/steps/Steps.styles.ts
+var stepsContainer = cva("flex flex-col", {
+  variants: {
+    animated: {
+      true: "transition-all duration-300 ease-in-out",
+      false: ""
+    }
+  },
+  defaultVariants: { animated: false }
+});
+var navBar = cva("flex items-center justify-between mb-6");
+var navItem = cva(
+  "relative flex-1 flex flex-col items-center",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer",
+        false: "pointer-events-none"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: { clickable: false, disabled: false }
+  }
+);
+var marker = cva(
+  "w-8 h-8 flex items-center justify-center rounded-full border-2",
+  {
+    variants: {
+      active: {
+        true: "bg-blue-500 border-blue-500 text-white",
+        false: "bg-white border-gray-300 text-gray-600"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+var line = cva("absolute top-1/2 left-full w-full h-0.5", {
+  variants: {
+    active: {
+      true: "bg-blue-500",
+      false: "bg-gray-300"
+    }
+  },
+  defaultVariants: { active: false }
+});
+var title = cva("mt-2 text-sm", {
+  variants: {
+    active: {
+      true: "text-blue-600 font-medium",
+      false: "text-gray-600"
+    }
+  },
+  defaultVariants: { active: false }
+});
+var subtitle = cva("text-xs mt-1", {
+  variants: {
+    color: {
+      default: "text-blue-500",
+      muted: "text-gray-500",
+      accent: "text-green-500"
+    }
+  },
+  defaultVariants: { color: "default" }
+});
+var buttonSteps = cva("px-4 py-2 bg-blue-600 text-white rounded");
+
+// src/components/steps/Steps.tsx
+var Steps = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["steps", "animated", "initial", "value", "onStepChange", "className"],
+    ["animated"]
+  );
+  const isControlled = () => local.value !== void 0;
+  const [internalIndex, setInternalIndex] = createSignal(local.initial ?? 0);
+  const activeIndex = createMemo(
+    () => isControlled() ? local.value : internalIndex()
+  );
+  const clamp = (i) => Math.max(0, Math.min(i, local.steps.length - 1));
+  const changeIndex = (i) => {
+    const idx = clamp(i);
+    if (isControlled()) local.onStepChange?.(idx);
+    else setInternalIndex(idx);
+  };
+  const next = () => changeIndex(activeIndex() + 1);
+  const back = () => changeIndex(activeIndex() - 1);
+  const isActive = (i) => i === activeIndex();
+  const isPast = (i) => i < activeIndex();
+  return <div
+    class={classes(
+      stepsContainer({ animated: local.animated }),
+      local.className
+    )}
+    {...otherProps}
+  >
+      <nav class={navBar()}>
+        <For each={local.steps}>
+          {(step, idx) => {
+    const i = idx();
+    return <div
+      class={navItem({ clickable: !!step.clickable })}
+      onClick={() => step.clickable && changeIndex(i)}
+    >
+                <div class={marker({ active: isActive(i) || isPast(i) })}>
+                  {step.marker ?? String(i + 1)}
+                </div>
+                <Show when={i < local.steps.length - 1}>
+                  <div class={line({ active: isPast(i) })} />
+                </Show>
+                <div class={title({ active: isActive(i) || isPast(i) })}>
+                  {step.title}
+                </div>
+                <Show when={step.subtitle}>
+                  <div class={subtitle()}>{step.subtitle}</div>
+                </Show>
+              </div>;
+  }}
+        </For>
+      </nav>
+      <div>
+        <For each={local.steps}>
+          {(step, idx) => {
+    const i = idx();
+    return <Show when={isActive(i)}>
+                <div>
+                  {step.content}
+                  <div class="flex justify-end gap-2 mt-6">
+                    <Show when={i > 0}>
+                      <button
+      type="button"
+      class="px-4 py-2 border rounded"
+      onClick={back}
+    >
+                        Back
+                      </button>
+                    </Show>
+                    <Show when={i < local.steps.length - 1}>
+                      <button
+      type="button"
+      class={buttonSteps()}
+      onClick={next}
+    >
+                        Next
+                      </button>
+                    </Show>
+                    <Show when={i === local.steps.length - 1}>
+                      <button
+      type="button"
+      class="px-4 py-2 bg-green-600 text-white rounded"
+      onClick={() => changeIndex(0)}
+    >
+                        Restart
+                      </button>
+                    </Show>
+                  </div>
+                </div>
+              </Show>;
+  }}
+        </For>
+      </div>
+    </div>;
+};
+var Steps_default = Steps;
+
+// src/components/steps/index.ts
+var steps_default = Steps_default;
+
+export {
+  steps_default
+};