@pathscale/ui 0.0.1 → 0.0.2

package/dist/chunk/WCBMW2TP.jsx

@@ -0,0 +1,203 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/Progress/Progress.tsx
+import "solid-js";
+
+// src/components/Progress/ProgressValue.tsx
+import "solid-js";
+
+// src/components/Progress/ProgressValue.styles.ts
+var progressWrapper = cva("mt-4 w-full max-w-md");
+var progressBar = cva("w-full h-5 relative overflow-hidden rounded-lg bg-gray-200");
+var progressFill = cva("h-full transition-all duration-300", {
+  variants: {
+    color: {
+      danger: "bg-red-500",
+      success: "bg-green-500",
+      info: "bg-blue-500",
+      warning: "bg-yellow-500",
+      default: "bg-gray-500"
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+var progressLabel = cva("mt-2 text-right text-sm text-gray-700");
+var progressVariants = cva(
+  [
+    "flex items-center justify-center mx-1",
+    "font-medium outline-none select-none transition active:transition-none",
+    "not-disabled:cursor-pointer",
+    "disabled:cursor-not-allowed disabled:opacity-25",
+    "aria-busy:cursor-wait"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-sm",
+        md: "size-16 text-base",
+        lg: "size-24 text-lg"
+      },
+      shape: {
+        circle: "rounded-full overflow-hidden",
+        rounded: "rounded-lg overflow-hidden"
+      },
+      variant: {
+        filled: "text-gray-800",
+        outlined: "border-2 border-gray-300 text-gray-800",
+        ghost: "text-gray-800"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "rounded",
+      variant: "filled"
+    }
+  }
+);
+
+// src/components/Progress/ProgressValue.tsx
+var ProgressValue = (props) => {
+  return <div
+    class={`${progressWrapper()} ${progressVariants({
+      size: props.size,
+      shape: props.shape,
+      variant: props.variant
+    })}`}
+  >
+      <div class={progressBar()}>
+        <div class={progressFill()} style={{ width: `${props.value}%` }} />
+      </div>
+      <div class={progressLabel()}>{props.value}%</div>
+    </div>;
+};
+var ProgressValue_default = ProgressValue;
+
+// src/components/Progress/ProgressSizes.tsx
+import "solid-js";
+var Progress = ({
+  value,
+  size = "md",
+  shape = "rounded",
+  variant = "filled"
+}) => {
+  return <div
+    class={`${progressWrapper()} ${progressVariants({
+      size,
+      shape,
+      variant
+    })}`}
+  >
+      <div class={progressBar()}>
+        <div class={progressFill()} style={{ width: `${value}%` }} />
+      </div>
+      <div class={progressLabel()}>{value}%</div>
+    </div>;
+};
+var ProgressSizes_default = Progress;
+
+// src/components/Progress/ProgressPercent.tsx
+import "solid-js";
+var Progress2 = ({
+  value,
+  size = "md",
+  shape = "rounded",
+  variant = "filled",
+  showValue = false,
+  format = "raw"
+}) => {
+  const displayValue = () => {
+    return format === "percent" ? `${value}%` : value;
+  };
+  return <div
+    class={`${progressWrapper()} ${progressVariants({
+      size,
+      shape,
+      variant
+    })}`}
+  >
+      <div class={progressBar()}>
+        <div class={progressFill()} style={{ width: `${value}%` }} />
+      </div>
+      {showValue && <div class={progressLabel()}>{displayValue()}</div>}
+    </div>;
+};
+var ProgressPercent_default = Progress2;
+
+// src/components/Progress/ProgressColors.tsx
+import { Show } from "solid-js";
+var Progress3 = ({
+  value,
+  size = "md",
+  shape = "rounded",
+  variant = "filled",
+  showValue = false,
+  format = "raw",
+  color = "default"
+}) => {
+  const displayValue = () => format === "percent" && value != null ? `${value}%` : value;
+  return <div
+    class={`${progressWrapper()} ${progressVariants({
+      size,
+      shape,
+      variant
+    })}`}
+  >
+      <div class={progressBar()}>
+        <Show
+    when={value != null}
+    fallback={<div
+      class={`${progressFill({ color })} animate-pulse`}
+      style={{ width: "100%" }}
+    />}
+  >
+          <div class={progressFill({ color })} style={{ width: `${value}%` }} />
+        </Show>
+      </div>
+      {showValue && value != null && <div class={progressLabel()}>{displayValue()}</div>}
+    </div>;
+};
+var ProgressColors_default = Progress3;
+
+// src/components/Progress/Progress.tsx
+var Progress4 = () => {
+  return <section>
+      <div class="p-4">
+        <h1 class="text-2xl font-semibold mb-4">Progress Component Demo</h1>
+        <ProgressValue_default value={40} size="sm" shape="circle" variant="filled" />
+        <ProgressValue_default
+    value={70}
+    size="md"
+    shape="rounded"
+    variant="outlined"
+  />
+        <ProgressValue_default value={90} size="lg" shape="circle" variant="ghost" />
+      </div>
+      <div class="mt-4 flex flex-col gap-4">
+        <ProgressSizes_default value={20} size="sm" />
+        <ProgressSizes_default value={30} size="md" />
+        <ProgressSizes_default value={50} size="lg" />
+      </div>
+      <div class="mt-4">
+        <ProgressPercent_default value={80} showValue format="percent" />
+      </div>
+      <div class="mt-4 flex flex-col gap-4">
+        <ProgressColors_default value={40} color="danger" />
+        <ProgressColors_default value={60} color="success" />
+        <ProgressColors_default value={80} color="info" />
+        <ProgressColors_default value={100} color="warning" />
+      </div>
+    </section>;
+};
+var Progress_default = Progress4;
+
+export {
+  ProgressValue_default,
+  ProgressSizes_default,
+  ProgressPercent_default,
+  ProgressColors_default,
+  Progress_default
+};

package/dist/chunk/WOT36Q7O.js

@@ -0,0 +1,166 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, For, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<div><nav><ul class="flex gap-0"></ul></nav><div class=pt-4>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><button>`);
+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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    spread(_el$, otherProps, false, true);
+    insert(_el$3, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (tab, i) => (() => {
+        var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
+        _el$6.$$click = () => handleChange(i());
+        insert(_el$6, () => tab.label);
+        effect(() => className(_el$6, tabTriggerVariants({
+          type: variantProps.type ?? "basic",
+          size: variantProps.size ?? "md",
+          active: i() === active(),
+          disabled: tab.disabled
+        })));
+        return _el$5;
+      })()
+    }));
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.items[active()];
+      },
+      get children() {
+        return local.items[active()]?.content;
+      }
+    }));
+    effect(() => className(_el$2, tabsNavVariants(variantProps)));
+    return _el$;
+  })();
+};
+var Tabs_default = Tabs;
+delegateEvents(["click"]);
+
+// src/components/tabs/index.ts
+var tabs_default = Tabs_default;
+
+export { tabs_default };

package/dist/components/Progress/index.d.ts

@@ -1,7 +1,6 @@
+export { P as default } from '../../Progress-a616LgE0.js';
 import { Component } from 'solid-js';
 
-declare const Progress$3: Component;
-
 interface ProgressValueProps {
     value: number;
     size?: "sm" | "md" | "lg";
@@ -39,4 +38,4 @@ interface ProgressProps {
 }
 declare const Progress: Component<ProgressProps>;
 
-export { Progress as ProgressColors, type ProgressProps as ProgressColorsProps, Progress$1 as ProgressPercent, type ProgressProps$1 as ProgressPercentProps, Progress$2 as ProgressSizes, type ProgressProps$2 as ProgressSizesProps, ProgressValue, type ProgressValueProps, Progress$3 as default };
+export { Progress as ProgressColors, type ProgressProps as ProgressColorsProps, Progress$1 as ProgressPercent, type ProgressProps$1 as ProgressPercentProps, Progress$2 as ProgressSizes, type ProgressProps$2 as ProgressSizesProps, ProgressValue, type ProgressValueProps };

package/dist/components/Progress/index.js

@@ -1,278 +1 @@
-import { cva } from '../../chunk/HKS7ET6T.js';
-import { template, insert, effect, className, createComponent } from 'solid-js/web';
-import { Show } from 'solid-js';
-
-// src/components/Progress/ProgressValue.styles.ts
-var progressWrapper = cva("mt-4 w-full max-w-md");
-var progressBar = cva("w-full h-5 relative overflow-hidden rounded-lg bg-gray-200");
-var progressFill = cva("h-full transition-all duration-300", {
-  variants: {
-    color: {
-      danger: "bg-red-500",
-      success: "bg-green-500",
-      info: "bg-blue-500",
-      warning: "bg-yellow-500",
-      default: "bg-gray-500"
-    }
-  },
-  defaultVariants: {
-    color: "default"
-  }
-});
-var progressLabel = cva("mt-2 text-right text-sm text-gray-700");
-var progressVariants = cva(
-  [
-    "flex items-center justify-center mx-1",
-    "font-medium outline-none select-none transition active:transition-none",
-    "not-disabled:cursor-pointer",
-    "disabled:cursor-not-allowed disabled:opacity-25",
-    "aria-busy:cursor-wait"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "size-8 text-sm",
-        md: "size-16 text-base",
-        lg: "size-24 text-lg"
-      },
-      shape: {
-        circle: "rounded-full overflow-hidden",
-        rounded: "rounded-lg overflow-hidden"
-      },
-      variant: {
-        filled: "text-gray-800",
-        outlined: "border-2 border-gray-300 text-gray-800",
-        ghost: "text-gray-800"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      shape: "rounded",
-      variant: "filled"
-    }
-  }
-);
-
-// src/components/Progress/ProgressValue.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><div><div></div></div><div>%`);
-var ProgressValue = (props) => {
-  return (() => {
-    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild;
-    insert(_el$4, () => props.value, _el$5);
-    effect((_p$) => {
-      var _v$ = `${progressWrapper()} ${progressVariants({
-        size: props.size,
-        shape: props.shape,
-        variant: props.variant
-      })}`, _v$2 = progressBar(), _v$3 = progressFill(), _v$4 = `${props.value}%`, _v$5 = progressLabel();
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$3.style.setProperty("width", _v$4) : _el$3.style.removeProperty("width"));
-      _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    });
-    return _el$;
-  })();
-};
-var ProgressValue_default = ProgressValue;
-var _tmpl$2 = /* @__PURE__ */ template(`<div><div><div></div></div><div>%`);
-var Progress = ({
-  value,
-  size = "md",
-  shape = "rounded",
-  variant = "filled"
-}) => {
-  return (() => {
-    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.firstChild;
-    `${value}%` != null ? _el$3.style.setProperty("width", `${value}%`) : _el$3.style.removeProperty("width");
-    insert(_el$4, value, _el$5);
-    effect((_p$) => {
-      var _v$ = `${progressWrapper()} ${progressVariants({
-        size,
-        shape,
-        variant
-      })}`, _v$2 = progressBar(), _v$3 = progressFill(), _v$4 = progressLabel();
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      _v$4 !== _p$.o && className(_el$4, _p$.o = _v$4);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0
-    });
-    return _el$;
-  })();
-};
-var ProgressSizes_default = Progress;
-var _tmpl$3 = /* @__PURE__ */ template(`<div><div><div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<div>`);
-var Progress2 = ({
-  value,
-  size = "md",
-  shape = "rounded",
-  variant = "filled",
-  showValue = false,
-  format = "raw"
-}) => {
-  const displayValue = () => {
-    return format === "percent" ? `${value}%` : value;
-  };
-  return (() => {
-    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
-    `${value}%` != null ? _el$3.style.setProperty("width", `${value}%`) : _el$3.style.removeProperty("width");
-    insert(_el$, showValue && (() => {
-      var _el$4 = _tmpl$22();
-      insert(_el$4, displayValue);
-      effect(() => className(_el$4, progressLabel()));
-      return _el$4;
-    })(), null);
-    effect((_p$) => {
-      var _v$ = `${progressWrapper()} ${progressVariants({
-        size,
-        shape,
-        variant
-      })}`, _v$2 = progressBar(), _v$3 = progressFill();
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
-};
-var ProgressPercent_default = Progress2;
-var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$23 = /* @__PURE__ */ template(`<div><div>`);
-var Progress3 = ({
-  value,
-  size = "md",
-  shape = "rounded",
-  variant = "filled",
-  showValue = false,
-  format = "raw",
-  color = "default"
-}) => {
-  const displayValue = () => format === "percent" && value != null ? `${value}%` : value;
-  return (() => {
-    var _el$ = _tmpl$23(), _el$2 = _el$.firstChild;
-    insert(_el$2, createComponent(Show, {
-      when: value != null,
-      get fallback() {
-        return (() => {
-          var _el$4 = _tmpl$4();
-          _el$4.style.setProperty("width", "100%");
-          effect(() => className(_el$4, `${progressFill({
-            color
-          })} animate-pulse`));
-          return _el$4;
-        })();
-      },
-      get children() {
-        var _el$3 = _tmpl$4();
-        `${value}%` != null ? _el$3.style.setProperty("width", `${value}%`) : _el$3.style.removeProperty("width");
-        effect(() => className(_el$3, progressFill({
-          color
-        })));
-        return _el$3;
-      }
-    }));
-    insert(_el$, showValue && value != null && (() => {
-      var _el$5 = _tmpl$4();
-      insert(_el$5, displayValue);
-      effect(() => className(_el$5, progressLabel()));
-      return _el$5;
-    })(), null);
-    effect((_p$) => {
-      var _v$ = `${progressWrapper()} ${progressVariants({
-        size,
-        shape,
-        variant
-      })}`, _v$2 = progressBar();
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-};
-var ProgressColors_default = Progress3;
-
-// src/components/Progress/Progress.tsx
-var _tmpl$5 = /* @__PURE__ */ template(`<section><div class=p-4><h1 class="text-2xl font-semibold mb-4">Progress Component Demo</h1></div><div class="mt-4 flex flex-col gap-4"></div><div class=mt-4></div><div class="mt-4 flex flex-col gap-4">`);
-var Progress4 = () => {
-  return (() => {
-    var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
-    insert(_el$2, createComponent(ProgressValue_default, {
-      value: 40,
-      size: "sm",
-      shape: "circle",
-      variant: "filled"
-    }), null);
-    insert(_el$2, createComponent(ProgressValue_default, {
-      value: 70,
-      size: "md",
-      shape: "rounded",
-      variant: "outlined"
-    }), null);
-    insert(_el$2, createComponent(ProgressValue_default, {
-      value: 90,
-      size: "lg",
-      shape: "circle",
-      variant: "ghost"
-    }), null);
-    insert(_el$4, createComponent(ProgressSizes_default, {
-      value: 20,
-      size: "sm"
-    }), null);
-    insert(_el$4, createComponent(ProgressSizes_default, {
-      value: 30,
-      size: "md"
-    }), null);
-    insert(_el$4, createComponent(ProgressSizes_default, {
-      value: 50,
-      size: "lg"
-    }), null);
-    insert(_el$5, createComponent(ProgressPercent_default, {
-      value: 80,
-      showValue: true,
-      format: "percent"
-    }));
-    insert(_el$6, createComponent(ProgressColors_default, {
-      value: 40,
-      color: "danger"
-    }), null);
-    insert(_el$6, createComponent(ProgressColors_default, {
-      value: 60,
-      color: "success"
-    }), null);
-    insert(_el$6, createComponent(ProgressColors_default, {
-      value: 80,
-      color: "info"
-    }), null);
-    insert(_el$6, createComponent(ProgressColors_default, {
-      value: 100,
-      color: "warning"
-    }), null);
-    return _el$;
-  })();
-};
-var Progress_default = Progress4;
-
-export { ProgressColors_default as ProgressColors, ProgressPercent_default as ProgressPercent, ProgressSizes_default as ProgressSizes, ProgressValue_default as ProgressValue, Progress_default as default };
+export { ProgressColors_default as ProgressColors, ProgressPercent_default as ProgressPercent, ProgressSizes_default as ProgressSizes, ProgressValue_default as ProgressValue, Progress_default as default } from '../../chunk/QNOJ6PCD.js';