@pathscale/ui 0.0.1 → 0.0.3

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/FPUQ25SO.js

@@ -0,0 +1,137 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, effect, className, setAttribute, use } from 'solid-js/web';
+import { splitProps, createMemo, createEffect, Show, untrack } from 'solid-js';
+
+// src/components/checkbox/Checkbox.styles.ts
+var checkboxVariants = cva(
+  [
+    "relative inline-flex items-center gap-2 cursor-pointer",
+    "select-none",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      color: {
+        primary: "text-primary",
+        success: "text-green-600",
+        warning: "text-yellow-600",
+        danger: "text-red-600"
+      },
+      checked: {
+        true: "",
+        false: ""
+      },
+      indeterminate: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      checked: false,
+      indeterminate: false
+    }
+  }
+);
+
+// src/components/checkbox/Checkbox.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span class="absolute top-1/2 left-1/2 w-2 h-0.5 bg-white -translate-x-1/2 -translate-y-1/2"aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class=ml-2>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<label role=checkbox><input type=checkbox class="peer absolute opacity-0 w-4 h-4"aria-hidden=true><span>`);
+var Checkbox = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(props, ["label", "indeterminate", "type", "onChange", "onFocus", "onBlur", "checked", "disabled", "aria-label", "aria-describedby"], ["class", ...checkboxVariants.variantKeys]);
+  let inputRef;
+  const checkboxClasses = createMemo(() => checkboxVariants(variantProps));
+  const markerClasses = createMemo(() => classes("inline-block w-4 h-4 border border-gray-400 rounded-sm peer-checked:bg-current", localProps.indeterminate ? "bg-gray-400 relative" : ""));
+  const handleChange = (e) => {
+    untrack(() => {
+      if (typeof localProps.onChange === "function") {
+        localProps.onChange(e);
+      }
+    });
+  };
+  const handleFocus = (e) => {
+    untrack(() => {
+      if (typeof localProps.onFocus === "function") {
+        localProps.onFocus(e);
+      }
+    });
+  };
+  const handleBlur = (e) => {
+    untrack(() => {
+      if (typeof localProps.onBlur === "function") {
+        localProps.onBlur(e);
+      }
+    });
+  };
+  createEffect(() => {
+    if (inputRef) {
+      untrack(() => {
+        inputRef.indeterminate = !!localProps.indeterminate;
+      });
+    }
+  });
+  return (() => {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _ref$ = inputRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : inputRef = _el$2;
+    spread(_el$2, mergeProps({
+      get checked() {
+        return localProps.checked;
+      },
+      get disabled() {
+        return localProps.disabled;
+      }
+    }, otherProps, {
+      "onChange": handleChange,
+      "onFocus": handleFocus,
+      "onBlur": handleBlur
+    }), false, false);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return localProps.indeterminate;
+      },
+      get children() {
+        return _tmpl$();
+      }
+    }));
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return localProps.label;
+      },
+      get children() {
+        var _el$5 = _tmpl$2();
+        insert(_el$5, () => localProps.label);
+        return _el$5;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = checkboxClasses(), _v$2 = localProps.indeterminate ? "mixed" : localProps.checked, _v$3 = localProps["aria-label"], _v$4 = localProps["aria-describedby"], _v$5 = markerClasses();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "aria-checked", _p$.t = _v$2);
+      _v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "aria-describedby", _p$.o = _v$4);
+      _v$5 !== _p$.i && className(_el$3, _p$.i = _v$5);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
+    });
+    return _el$;
+  })();
+};
+var Checkbox_default = Checkbox;
+
+// src/components/checkbox/index.ts
+var checkbox_default = Checkbox_default;
+
+export { checkbox_default };

package/dist/chunk/GLEAR2TS.jsx

@@ -0,0 +1,160 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/switch/Switch.tsx
+import {
+  createSignal,
+  splitProps,
+  createMemo,
+  untrack
+} from "solid-js";
+
+// src/components/switch/Switch.styles.ts
+var switchVariants = cva(
+  "switch inline-flex items-center gap-2 select-none",
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      rounded: {
+        true: "",
+        false: ""
+      },
+      outlined: {
+        true: "",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      rounded: true,
+      outlined: false
+    }
+  }
+);
+var checkVariants = cva(
+  [
+    "relative transition-colors duration-200",
+    "after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-4 after:w-3 after:h-3 after:left-0.5 after:top-0.5 peer-checked:after:translate-x-4",
+        md: "w-10 h-6 after:w-4 after:h-4 after:left-1 after:top-1 peer-checked:after:translate-x-4",
+        lg: "w-12 h-7 after:w-5 after:h-5 after:left-1 after:top-1 peer-checked:after:translate-x-5"
+      },
+      color: {
+        blue: "peer-checked:bg-blue-500",
+        green: "peer-checked:bg-green-500",
+        red: "peer-checked:bg-red-500",
+        yellow: "peer-checked:bg-yellow-400",
+        gray: "peer-checked:bg-gray-500"
+      },
+      passiveColor: {
+        blue: "bg-blue-200",
+        green: "bg-green-200",
+        red: "bg-red-200",
+        yellow: "bg-yellow-200",
+        gray: "bg-gray-300"
+      },
+      rounded: {
+        true: "rounded-full after:rounded-full",
+        false: "rounded-md after:rounded-sm"
+      },
+      outlined: {
+        true: "ring-2 ring-inset ring-white",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "blue",
+      passiveColor: "gray",
+      rounded: true,
+      outlined: false
+    }
+  }
+);
+
+// src/components/switch/Switch.tsx
+var Switch = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "children",
+      "checked",
+      "defaultChecked",
+      "onChange",
+      "name",
+      "required",
+      "disabled",
+      "aria-label",
+      "aria-describedby"
+    ],
+    ["size", "rounded", "outlined", "color", "passiveColor"]
+  );
+  const isControlled = localProps.checked !== void 0;
+  const [internalChecked, setInternalChecked] = createSignal(
+    localProps.defaultChecked ?? false
+  );
+  const checkedValue = createMemo(
+    () => untrack(() => isControlled ? localProps.checked : internalChecked())
+  );
+  const switchClasses = createMemo(() => switchVariants(variantProps));
+  const checkClasses = createMemo(
+    () => checkVariants({
+      size: variantProps.size,
+      color: variantProps.color,
+      passiveColor: variantProps.passiveColor,
+      rounded: variantProps.rounded,
+      outlined: variantProps.outlined
+    })
+  );
+  const handleChange = (e) => {
+    const next = e.currentTarget.checked;
+    untrack(() => {
+      if (!isControlled) setInternalChecked(next);
+      localProps.onChange?.(next);
+    });
+  };
+  return <label
+    class={switchClasses()}
+    role="switch"
+    aria-checked={checkedValue()}
+    aria-label={localProps["aria-label"]}
+    aria-describedby={localProps["aria-describedby"]}
+  >
+      <input
+    type="checkbox"
+    class="sr-only peer"
+    checked={checkedValue()}
+    onChange={handleChange}
+    name={localProps.name}
+    required={localProps.required}
+    disabled={localProps.disabled}
+    aria-hidden="true"
+    {...otherProps}
+  />
+
+      <span class={checkClasses()} />
+      <span class="control-label">{localProps.children}</span>
+    </label>;
+};
+var Switch_default = Switch;
+
+// src/components/switch/index.ts
+var switch_default = Switch_default;
+
+export {
+  switch_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 };