@pathscale/ui 0.0.1 → 0.0.2

package/dist/chunk/QNOJ6PCD.js

@@ -0,0 +1,278 @@
+import { cva } from './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, ProgressPercent_default, ProgressSizes_default, ProgressValue_default, Progress_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/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/V6Y5E7BL.js

@@ -0,0 +1,133 @@
+import { cva } from './HKS7ET6T.js';
+import { template, insert, effect, setAttribute, spread, mergeProps, memo, className } from 'solid-js/web';
+import { splitProps, children, createMemo, untrack } from 'solid-js';
+
+// src/components/breadcrumb/Breadcrumb.styles.ts
+var breadcrumbContainerVariants = cva(
+  ["flex", "items-center", "gap-2", "text-sm"],
+  {
+    variants: {
+      alignment: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3"
+      },
+      separator: {
+        arrow: "breadcrumb-arrow",
+        dot: "breadcrumb-dot",
+        bullet: "breadcrumb-bullet",
+        succeeds: "breadcrumb-succeeds"
+      }
+    },
+    defaultVariants: {
+      alignment: "left",
+      size: "md"
+    }
+  }
+);
+var breadcrumbItemVariants = cva(
+  ["text-gray-600", "dark:text-gray-300"],
+  {
+    variants: {
+      active: {
+        true: "text-blue-600 font-semibold cursor-default",
+        false: "hover:underline"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+
+// src/components/breadcrumb/Breadcrumb.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<li class="text-gray-400 select-none"aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><span>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<nav aria-label=Breadcrumb><ol class="flex items-center flex-wrap gap-1">`);
+var separatorMap = {
+  arrow: "\u2192",
+  dot: "\xB7",
+  bullet: "\u2022",
+  succeeds: "\xBB"
+};
+var Breadcrumb = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["children"], ["alignment", "size", "separator"]);
+  const resolvedChildren = children(() => local.children);
+  const items = createMemo(() => resolvedChildren.toArray());
+  const separator = createMemo(() => untrack(() => {
+    const sep = variantProps.separator;
+    return sep && separatorMap[sep] ? separatorMap[sep] : "/";
+  }));
+  const containerClasses = createMemo(() => breadcrumbContainerVariants(variantProps));
+  const renderItems = createMemo(() => {
+    return items().reduce((acc, item, idx) => {
+      if (idx > 0) {
+        acc.push((() => {
+          var _el$ = _tmpl$();
+          insert(_el$, separator);
+          return _el$;
+        })());
+      }
+      acc.push((() => {
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+        insert(_el$3, item);
+        effect(() => setAttribute(_el$3, "aria-current", idx === items().length - 1 ? "page" : void 0));
+        return _el$2;
+      })());
+      return acc;
+    }, []);
+  });
+  return (() => {
+    var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+    spread(_el$4, mergeProps({
+      get ["class"]() {
+        return containerClasses();
+      }
+    }, otherProps), false, true);
+    insert(_el$5, renderItems);
+    return _el$4;
+  })();
+};
+var Breadcrumb_default = Breadcrumb;
+var _tmpl$4 = /* @__PURE__ */ template(`<li class="flex items-center gap-1">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<a>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<span>`);
+var BreadcrumbItem = (props) => {
+  const [local, variantProps] = splitProps(props, ["children", "href", "active"], ["active"]);
+  return (() => {
+    var _el$ = _tmpl$4();
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!(local.href && !local.active));
+      return () => _c$() ? (() => {
+        var _el$2 = _tmpl$22();
+        insert(_el$2, () => local.children);
+        effect((_p$) => {
+          var _v$ = local.href, _v$2 = breadcrumbItemVariants(variantProps);
+          _v$ !== _p$.e && setAttribute(_el$2, "href", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
+      })() : (() => {
+        var _el$3 = _tmpl$32();
+        insert(_el$3, () => local.children);
+        effect(() => className(_el$3, breadcrumbItemVariants({
+          active: true
+        })));
+        return _el$3;
+      })();
+    })());
+    return _el$;
+  })();
+};
+var BreadcrumbItem_default = BreadcrumbItem;
+
+export { BreadcrumbItem_default, Breadcrumb_default };