@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/QLESLIWS.jsx

@@ -0,0 +1,110 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/upload/Upload.tsx
+import { splitProps, Show } from "solid-js";
+
+// src/components/upload/Upload.styles.ts
+var uploadWrapperVariants = cva("", {
+  variants: {
+    style: {
+      boxed: "flex flex-col items-center justify-center border border-gray-300 rounded-md p-4 bg-white dark:bg-gray-800 text-gray-700 hover:text-gray-900 text-center",
+      button: "px-4 py-2 rounded inline-flex items-center gap-2 text-white transition-colors"
+    },
+    color: {
+      primary: "bg-blue-500 hover:bg-blue-600",
+      success: "bg-green-500 hover:bg-green-600",
+      info: "bg-sky-500 hover:bg-sky-600",
+      warning: "bg-yellow-500 hover:bg-yellow-600",
+      danger: "bg-red-500 hover:bg-red-600",
+      gray: ""
+      // usado solo en style="boxed"
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    style: "boxed",
+    color: "gray",
+    size: "md"
+  }
+});
+var fileInputClass = "absolute inset-0 w-full h-full opacity-0 cursor-pointer";
+var fileIconClass = "w-6 h-6";
+var fileLabelClass = "font-medium";
+
+// src/components/upload/Upload.tsx
+var Upload = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    [
+      "icon",
+      "label",
+      "multiple",
+      "disabled",
+      "accept",
+      "dragDrop",
+      "name",
+      "onChange"
+    ],
+    ["style", "color", "size"]
+  );
+  const handleChange = (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const result = local.multiple ? Array.from(files) : files[0];
+    if (result) {
+      local.onChange?.(result);
+    }
+  };
+  const handleDrop = (e) => {
+    if (!local.dragDrop) return;
+    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);
+    }
+  };
+  const handleDragOver = (e) => {
+    if (local.dragDrop) e.preventDefault();
+  };
+  return <div class={uploadWrapperVariants(variantProps)}>
+      <label class="cursor-pointer relative w-full h-full">
+        <input
+    type="file"
+    class={fileInputClass}
+    name={local.name}
+    multiple={local.multiple}
+    accept={local.accept}
+    disabled={local.disabled}
+    onChange={handleChange}
+    {...otherProps}
+  />
+        <div
+    class={classes(
+      variantProps.style === "boxed" ? "flex flex-col items-center justify-center gap-2" : "flex flex-row items-center justify-center gap-2"
+    )}
+  >
+          <Show when={local.icon}>
+            <span class={fileIconClass}>{local.icon}</span>
+          </Show>
+          <span class={fileLabelClass}>{local.label}</span>
+        </div>
+      </label>
+    </div>;
+};
+var Upload_default = Upload;
+
+// src/components/upload/index.ts
+var upload_default = Upload_default;
+
+export {
+  upload_default
+};

package/dist/chunk/QONDPQ2I.jsx

@@ -0,0 +1,105 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/accordion/Accordion.tsx
+import {
+  createSignal,
+  splitProps,
+  Show
+} from "solid-js";
+
+// src/components/accordion/Accordion.styles.ts
+var accordionContainerVariants = cva(
+  ["w-full border rounded transition-colors", "bg-white dark:bg-gray-800"],
+  {
+    variants: {
+      expanded: {
+        true: "border-blue-500",
+        false: "border-gray-300 dark:border-gray-600"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      expanded: false,
+      disabled: false
+    }
+  }
+);
+var accordionHeaderVariants = cva(
+  [
+    "w-full text-left px-4 py-2 flex items-center justify-between cursor-pointer",
+    "transition-colors duration-200"
+  ],
+  {
+    variants: {
+      headerIsTrigger: {
+        true: "hover:bg-gray-100 dark:hover:bg-gray-700",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      headerIsTrigger: true
+    }
+  }
+);
+var accordionContentVariants = cva(
+  "px-4 py-2 border-t border-gray-200 dark:border-gray-700"
+);
+
+// src/components/accordion/Accordion.tsx
+var Accordion = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["expanded", "disabled", "headerIsTrigger", "header", "content"],
+    ["expanded", "disabled"]
+  );
+  const [isOpen, setIsOpen] = createSignal(local.expanded ?? false);
+  const handleToggle = () => {
+    if (!local.disabled) setIsOpen((prev) => !prev);
+  };
+  const handleKeyDown = local.headerIsTrigger ? (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleToggle();
+    }
+  } : void 0;
+  return <div
+    class={accordionContainerVariants({
+      ...variantProps,
+      expanded: isOpen(),
+      disabled: local.disabled
+    })}
+    onKeyDown={handleKeyDown}
+    role={local.headerIsTrigger ? "button" : void 0}
+    tabindex={local.headerIsTrigger ? "0" : void 0}
+    aria-expanded={local.headerIsTrigger ? isOpen() : void 0}
+    aria-disabled={local.disabled}
+    {...otherProps}
+  >
+      <div
+    class={accordionHeaderVariants({
+      headerIsTrigger: local.headerIsTrigger
+    })}
+    onClick={local.headerIsTrigger ? handleToggle : void 0}
+    role={local.headerIsTrigger ? "button" : void 0}
+  >
+        {local.header}
+      </div>
+
+      <Show when={isOpen()}>
+        <div class={accordionContentVariants()}>{local.content}</div>
+      </Show>
+    </div>;
+};
+var Accordion_default = Accordion;
+
+// src/components/accordion/index.ts
+var accordion_default = Accordion_default;
+
+export {
+  accordion_default
+};

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

@@ -0,0 +1,98 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, className, spread, mergeProps, insert, createComponent, effect } from 'solid-js/web';
+import { splitProps, Show } from 'solid-js';
+
+// src/components/upload/Upload.styles.ts
+var uploadWrapperVariants = cva("", {
+  variants: {
+    style: {
+      boxed: "flex flex-col items-center justify-center border border-gray-300 rounded-md p-4 bg-white dark:bg-gray-800 text-gray-700 hover:text-gray-900 text-center",
+      button: "px-4 py-2 rounded inline-flex items-center gap-2 text-white transition-colors"
+    },
+    color: {
+      primary: "bg-blue-500 hover:bg-blue-600",
+      success: "bg-green-500 hover:bg-green-600",
+      info: "bg-sky-500 hover:bg-sky-600",
+      warning: "bg-yellow-500 hover:bg-yellow-600",
+      danger: "bg-red-500 hover:bg-red-600",
+      gray: ""
+      // usado solo en style="boxed"
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    style: "boxed",
+    color: "gray",
+    size: "md"
+  }
+});
+var fileInputClass = "absolute inset-0 w-full h-full opacity-0 cursor-pointer";
+var fileIconClass = "w-6 h-6";
+var fileLabelClass = "font-medium";
+
+// src/components/upload/Upload.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><label class="cursor-pointer relative w-full h-full"><input type=file><div><span>`);
+var Upload = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["icon", "label", "multiple", "disabled", "accept", "dragDrop", "name", "onChange"], ["style", "color", "size"]);
+  const handleChange = (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const result = local.multiple ? Array.from(files) : files[0];
+    if (result) {
+      local.onChange?.(result);
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$6 = _el$4.firstChild;
+    _el$3.addEventListener("change", handleChange);
+    className(_el$3, fileInputClass);
+    spread(_el$3, mergeProps({
+      get name() {
+        return local.name;
+      },
+      get multiple() {
+        return local.multiple;
+      },
+      get accept() {
+        return local.accept;
+      },
+      get disabled() {
+        return local.disabled;
+      }
+    }, otherProps), false, false);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.icon;
+      },
+      get children() {
+        var _el$5 = _tmpl$();
+        className(_el$5, fileIconClass);
+        insert(_el$5, () => local.icon);
+        return _el$5;
+      }
+    }), _el$6);
+    className(_el$6, fileLabelClass);
+    insert(_el$6, () => local.label);
+    effect((_p$) => {
+      var _v$ = uploadWrapperVariants(variantProps), _v$2 = classes(variantProps.style === "boxed" ? "flex flex-col items-center justify-center gap-2" : "flex flex-row items-center justify-center gap-2");
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var Upload_default = Upload;
+
+// src/components/upload/index.ts
+var upload_default = Upload_default;
+
+export { upload_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 };