@pathscale/ui 0.0.2 → 0.0.4

package/dist/chunk/{QLESLIWS.jsx → QHJOIUYT.jsx}

@@ -55,11 +55,15 @@ var Upload = (props) => {
     ["style", "color", "size"]
   );
   const handleChange = (e) => {
-    const files = e.target.files;
+    const input = e.target;
+    const files = input.files;
     if (!files || files.length === 0) return;
-    const result = local.multiple ? Array.from(files) : files[0];
-    if (result) {
-      local.onChange?.(result);
+    if (local.onChange) {
+      if (local.multiple) {
+        local.onChange(Array.from(files));
+      } else if (files[0]) {
+        local.onChange(files[0]);
+      }
     }
   };
   const handleDrop = (e) => {
@@ -67,9 +71,12 @@ var Upload = (props) => {
     e.preventDefault();
     const files = e.dataTransfer?.files;
     if (!files || files.length === 0) return;
-    const result = local.multiple ? Array.from(files) : files[0];
-    if (result) {
-      local.onChange?.(result);
+    if (local.onChange) {
+      if (local.multiple) {
+        local.onChange(Array.from(files));
+      } else if (files[0]) {
+        local.onChange(files[0]);
+      }
     }
   };
   const handleDragOver = (e) => {

package/dist/chunk/QYEMOKUG.js

@@ -0,0 +1,125 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { delegateEvents, template, className, spread, mergeProps, insert, memo, effect, style, setAttribute, createComponent } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, 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 _tmpl$ = /* @__PURE__ */ template(`<div><table><thead><tr></tr></thead><tbody>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<th role=columnheader>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<tr>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<td>`);
+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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling;
+    className(_el$, wrapperClass);
+    spread(_el$2, mergeProps(otherProps, {
+      "class": tableClass
+    }), false, true);
+    insert(_el$4, () => localProps.columns.map((col) => (() => {
+      var _el$6 = _tmpl$2();
+      _el$6.$$click = () => handleHeaderClick(col.key, col.sortable);
+      insert(_el$6, () => col.header, null);
+      insert(_el$6, (() => {
+        var _c$ = memo(() => sortKey() === col.key);
+        return () => _c$() && (sortDir() === "asc" ? " \u2191" : " \u2193");
+      })(), null);
+      effect((_p$) => {
+        var _v$ = tableVariants({
+          ...baseVars(),
+          cell: variantProps.cell,
+          divider: "on"
+        }), _v$2 = col.sortable ? {
+          cursor: "pointer"
+        } : void 0, _v$3 = sortKey() === col.key ? sortDir() === "asc" ? "ascending" : "descending" : void 0;
+        _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
+        _p$.t = style(_el$6, _v$2, _p$.t);
+        _v$3 !== _p$.a && setAttribute(_el$6, "aria-sort", _p$.a = _v$3);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      });
+      return _el$6;
+    })()));
+    insert(_el$5, createComponent(For, {
+      get each() {
+        return data();
+      },
+      children: (row) => (() => {
+        var _el$7 = _tmpl$3();
+        insert(_el$7, () => localProps.columns.map((col, ci) => (() => {
+          var _el$8 = _tmpl$4();
+          insert(_el$8, () => String(row[col.key] ?? ""));
+          effect(() => className(_el$8, tableVariants({
+            ...baseVars(),
+            cell: variantProps.cell,
+            divider: ci === localProps.columns.length - 1 ? "off" : "on"
+          })));
+          return _el$8;
+        })()));
+        effect(() => className(_el$7, tableVariants({
+          ...baseVars(),
+          row: variantProps.row
+        })));
+        return _el$7;
+      })()
+    }));
+    return _el$;
+  })();
+};
+var Table_default = Table;
+delegateEvents(["click"]);
+
+// src/components/table/index.ts
+var table_default = Table_default;
+
+export { table_default };

package/dist/chunk/SCJSBRV2.jsx

@@ -0,0 +1,39 @@
+import {
+  buttonVariants
+} from "./YAQK2KFY.jsx";
+import {
+  PolymorphicButton_default
+} from "./KACNXPUM.jsx";
+
+// src/components/button/Button.tsx
+import {
+  mergeProps,
+  splitProps,
+  createMemo
+} from "solid-js";
+var Button = (props) => {
+  const defaultedProps = mergeProps(
+    {
+      color: "primary"
+    },
+    props
+  );
+  const [variantProps, otherProps] = splitProps(defaultedProps, [
+    "class",
+    ...buttonVariants.variantKeys
+  ]);
+  const classes = createMemo(() => buttonVariants(variantProps));
+  return <PolymorphicButton_default
+    class={classes()}
+    aria-busy={variantProps.loading ? "true" : void 0}
+    {...otherProps}
+  />;
+};
+var Button_default = Button;
+
+// src/components/button/index.ts
+var button_default = Button_default;
+
+export {
+  button_default
+};

package/dist/chunk/STKRVQR6.jsx

@@ -0,0 +1,130 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/progress/Progress.tsx
+import {
+  splitProps,
+  Show,
+  createMemo
+} 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 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 <div
+    {...rest}
+    class={classes(progressContainer({ size: local.size }), local.className)}
+    aria-busy={!isDeterminate()}
+  >
+      <div
+    class={classes(
+      progressWrapper({ size: local.size, shape: local.shape })
+    )}
+  >
+        <Show
+    when={isDeterminate()}
+    fallback={<div
+      class={classes(
+        progressFill({ color: local.color, variant: local.variant }),
+        "animate-pulse"
+      )}
+      style={{ width: "100%" }}
+    />}
+  >
+          <div
+    class={progressFill({
+      color: local.color,
+      variant: local.variant
+    })}
+    style={{ width: `${val()}%` }}
+  />
+        </Show>
+      </div>
+
+      <Show when={local.showValue && labelText()}>
+        <div class={progressLabel()}>{labelText()}</div>
+      </Show>
+    </div>;
+};
+var Progress_default = Progress;
+
+// src/components/progress/index.ts
+var progress_default = Progress_default;
+
+export {
+  progress_default
+};

package/dist/chunk/{NZZRKP74.js → TFLJI242.js}

@@ -1,7 +1,4 @@
-import { PolymorphicButton_default } from './G6RG4LR7.js';
 import { cva } from './HKS7ET6T.js';
-import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
-import { mergeProps, splitProps, createMemo } from 'solid-js';
 
 // src/components/button/Button.styles.ts
 var buttonVariants = cva(
@@ -190,25 +187,4 @@ var buttonVariants = cva(
   }
 );
 
-// src/components/button/Button.tsx
-var Button = (props) => {
-  const defaultedProps = mergeProps({
-    color: "primary"
-  }, props);
-  const [variantProps, otherProps] = splitProps(defaultedProps, ["class", ...buttonVariants.variantKeys]);
-  const classes = createMemo(() => buttonVariants(variantProps));
-  return createComponent(PolymorphicButton_default, mergeProps$1({
-    get ["class"]() {
-      return classes();
-    },
-    get ["aria-busy"]() {
-      return variantProps.loading ? "true" : void 0;
-    }
-  }, otherProps));
-};
-var Button_default = Button;
-
-// src/components/button/index.ts
-var button_default = Button_default;
-
-export { button_default };
+export { buttonVariants };

package/dist/chunk/TT2JYGLU.js

@@ -0,0 +1,218 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, For, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<div><nav></nav><div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="px-4 py-2 border rounded">Back`);
+var _tmpl$5 = /* @__PURE__ */ template(`<button type=button>Next`);
+var _tmpl$6 = /* @__PURE__ */ template(`<button type=button class="px-4 py-2 bg-green-600 text-white rounded">Restart`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div><div class="flex justify-end gap-2 mt-6">`);
+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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(stepsContainer({
+          animated: local.animated
+        }), local.className);
+      }
+    }, otherProps), false, true);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return local.steps;
+      },
+      children: (step, idx) => {
+        const i = idx();
+        return (() => {
+          var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$7 = _el$5.nextSibling;
+          _el$4.$$click = () => step.clickable && changeIndex(i);
+          insert(_el$5, () => step.marker ?? String(i + 1));
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return i < local.steps.length - 1;
+            },
+            get children() {
+              var _el$6 = _tmpl$2();
+              effect(() => className(_el$6, line({
+                active: isPast(i)
+              })));
+              return _el$6;
+            }
+          }), _el$7);
+          insert(_el$7, () => step.title);
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return step.subtitle;
+            },
+            get children() {
+              var _el$8 = _tmpl$2();
+              insert(_el$8, () => step.subtitle);
+              effect(() => className(_el$8, subtitle()));
+              return _el$8;
+            }
+          }), null);
+          effect((_p$) => {
+            var _v$ = navItem({
+              clickable: !!step.clickable
+            }), _v$2 = marker({
+              active: isActive(i) || isPast(i)
+            }), _v$3 = title({
+              active: isActive(i) || isPast(i)
+            });
+            _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+            _v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$4;
+        })();
+      }
+    }));
+    insert(_el$3, createComponent(For, {
+      get each() {
+        return local.steps;
+      },
+      children: (step, idx) => {
+        const i = idx();
+        return createComponent(Show, {
+          get when() {
+            return isActive(i);
+          },
+          get children() {
+            var _el$9 = _tmpl$7(), _el$0 = _el$9.firstChild;
+            insert(_el$9, () => step.content, _el$0);
+            insert(_el$0, createComponent(Show, {
+              when: i > 0,
+              get children() {
+                var _el$1 = _tmpl$4();
+                _el$1.$$click = back;
+                return _el$1;
+              }
+            }), null);
+            insert(_el$0, createComponent(Show, {
+              get when() {
+                return i < local.steps.length - 1;
+              },
+              get children() {
+                var _el$10 = _tmpl$5();
+                _el$10.$$click = next;
+                effect(() => className(_el$10, buttonSteps()));
+                return _el$10;
+              }
+            }), null);
+            insert(_el$0, createComponent(Show, {
+              get when() {
+                return i === local.steps.length - 1;
+              },
+              get children() {
+                var _el$11 = _tmpl$6();
+                _el$11.$$click = () => changeIndex(0);
+                return _el$11;
+              }
+            }), null);
+            return _el$9;
+          }
+        });
+      }
+    }));
+    effect(() => className(_el$2, navBar()));
+    return _el$;
+  })();
+};
+var Steps_default = Steps;
+delegateEvents(["click"]);
+
+// src/components/steps/index.ts
+var steps_default = Steps_default;
+
+export { steps_default };

package/dist/chunk/VN5BKHA2.jsx

@@ -0,0 +1,97 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/field/Field.tsx
+import {
+  splitProps
+} from "solid-js";
+
+// src/components/field/Field.styles.ts
+var fieldWrapper = cva(
+  "flex flex-col space-y-1",
+  {
+    variants: {
+      horizontal: {
+        true: "flex-row items-center space-x-2 space-y-0",
+        false: "flex-col"
+      },
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      type: {
+        default: "",
+        danger: "text-red-600"
+      },
+      grouped: {
+        true: "flex flex-wrap gap-2",
+        false: ""
+      },
+      groupMultiline: {
+        true: "flex-col",
+        false: "flex-row"
+      }
+    },
+    compoundVariants: [
+      { horizontal: true, grouped: true, class: "items-start" }
+    ],
+    defaultVariants: {
+      horizontal: false,
+      size: "md",
+      type: "default",
+      grouped: false,
+      groupMultiline: false
+    }
+  }
+);
+var labelStyles = cva("font-medium", {
+  variants: {
+    size: { sm: "text-sm", md: "text-base", lg: "text-lg" },
+    type: { default: "text-gray-800", danger: "text-red-600" }
+  },
+  defaultVariants: { size: "md", type: "default" }
+});
+var messageStyles = cva("mt-1 text-sm", {
+  variants: {
+    type: { default: "text-gray-600", danger: "text-red-600" }
+  },
+  defaultVariants: { type: "default" }
+});
+
+// src/components/field/Field.tsx
+var Field = (props) => {
+  const [local, variantProps, rest] = splitProps(
+    props,
+    ["label", "message", "className", "children"],
+    ["horizontal", "size", "type", "grouped", "groupMultiline"]
+  );
+  return <div class={classes(fieldWrapper(variantProps), local.className)} {...rest}>
+    {local.label && <label class={labelStyles(variantProps)}>
+        {local.label}
+      </label>}
+
+    {
+    /* CONTENT SLOT: now flex when horizontal */
+  }
+    <div class={classes(
+    variantProps.horizontal ? "flex items-center gap-2" : ""
+  )}>
+      {local.children}
+    </div>
+
+    {local.message && <span class={messageStyles(variantProps)}>
+        {local.message}
+      </span>}
+  </div>;
+};
+var Field_default = Field;
+
+// src/components/field/index.ts
+var field_default = Field_default;
+
+export {
+  field_default
+};