@pathscale/ui 0.0.1 → 0.0.2

package/dist/chunk/MMTAND25.jsx

@@ -0,0 +1,126 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/breadcrumb/Breadcrumb.tsx
+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 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(
+          <li class="text-gray-400 select-none" aria-hidden="true">
+            {separator()}
+          </li>
+        );
+      }
+      acc.push(
+        <li>
+          <span aria-current={idx === items().length - 1 ? "page" : void 0}>
+            {item}
+          </span>
+        </li>
+      );
+      return acc;
+    }, []);
+  });
+  return <nav class={containerClasses()} aria-label="Breadcrumb" {...otherProps}>
+      <ol class="flex items-center flex-wrap gap-1">{renderItems()}</ol>
+    </nav>;
+};
+var Breadcrumb_default = Breadcrumb;
+
+// src/components/breadcrumb/BreadcrumbItem.tsx
+import { splitProps as splitProps2 } from "solid-js";
+var BreadcrumbItem = (props) => {
+  const [local, variantProps] = splitProps2(
+    props,
+    ["children", "href", "active"],
+    ["active"]
+  );
+  return <li class="flex items-center gap-1">
+      {local.href && !local.active ? <a href={local.href} class={breadcrumbItemVariants(variantProps)}>
+          {local.children}
+        </a> : <span class={breadcrumbItemVariants({ active: true })}>
+          {local.children}
+        </span>}
+    </li>;
+};
+var BreadcrumbItem_default = BreadcrumbItem;
+
+export {
+  Breadcrumb_default,
+  BreadcrumbItem_default
+};

package/dist/chunk/MXG3MBEN.jsx

@@ -0,0 +1,148 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/checkbox/Checkbox.tsx
+import {
+  splitProps,
+  Show,
+  createEffect,
+  createMemo,
+  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 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 <label
+    class={checkboxClasses()}
+    role="checkbox"
+    aria-checked={localProps.indeterminate ? "mixed" : localProps.checked}
+    aria-label={localProps["aria-label"]}
+    aria-describedby={localProps["aria-describedby"]}
+  >
+      <input
+    ref={inputRef}
+    type="checkbox"
+    class="peer absolute opacity-0 w-4 h-4"
+    checked={localProps.checked}
+    disabled={localProps.disabled}
+    aria-hidden="true"
+    {...otherProps}
+    onChange={handleChange}
+    onFocus={handleFocus}
+    onBlur={handleBlur}
+  />
+
+      <span class={markerClasses()}>
+        <Show when={localProps.indeterminate}>
+          <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"
+  />
+        </Show>
+      </span>
+
+      <Show when={localProps.label}>
+        <span class="ml-2">{localProps.label}</span>
+      </Show>
+    </label>;
+};
+var Checkbox_default = Checkbox;
+
+// src/components/checkbox/index.ts
+var checkbox_default = Checkbox_default;
+
+export {
+  checkbox_default
+};

package/dist/chunk/NZKPDBTE.js

@@ -0,0 +1,118 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, addEventListener, spread, mergeProps, memo, insert, createComponent, effect, className, setAttribute } from 'solid-js/web';
+import { splitProps, createSignal, 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 _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><div>`);
+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 (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+    addEventListener(_el$, "keydown", handleKeyDown, true);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return accordionContainerVariants({
+          ...variantProps,
+          expanded: isOpen(),
+          disabled: local.disabled
+        });
+      },
+      get role() {
+        return local.headerIsTrigger ? "button" : void 0;
+      },
+      get tabindex() {
+        return local.headerIsTrigger ? "0" : void 0;
+      },
+      get ["aria-expanded"]() {
+        return memo(() => !!local.headerIsTrigger)() ? isOpen() : void 0;
+      },
+      get ["aria-disabled"]() {
+        return local.disabled;
+      }
+    }, otherProps), false, true);
+    addEventListener(_el$2, "click", local.headerIsTrigger ? handleToggle : void 0, true);
+    insert(_el$2, () => local.header);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isOpen();
+      },
+      get children() {
+        var _el$3 = _tmpl$();
+        insert(_el$3, () => local.content);
+        effect(() => className(_el$3, accordionContentVariants()));
+        return _el$3;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = accordionHeaderVariants({
+        headerIsTrigger: local.headerIsTrigger
+      }), _v$2 = local.headerIsTrigger ? "button" : void 0;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$2, "role", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+};
+var Accordion_default = Accordion;
+delegateEvents(["keydown", "click"]);
+
+// src/components/accordion/index.ts
+var accordion_default = Accordion_default;
+
+export { accordion_default };

package/dist/chunk/P2L6LFLS.js

@@ -0,0 +1,144 @@
+import { cva } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, effect, className, setAttribute } from 'solid-js/web';
+import { splitProps, createSignal, 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 _tmpl$ = /* @__PURE__ */ template(`<label role=switch><input type=checkbox class="sr-only peer"aria-hidden=true><span></span><span class=control-label>`);
+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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
+    _el$2.addEventListener("change", handleChange);
+    spread(_el$2, mergeProps({
+      get checked() {
+        return checkedValue();
+      },
+      get name() {
+        return localProps.name;
+      },
+      get required() {
+        return localProps.required;
+      },
+      get disabled() {
+        return localProps.disabled;
+      }
+    }, otherProps), false, false);
+    insert(_el$4, () => localProps.children);
+    effect((_p$) => {
+      var _v$ = switchClasses(), _v$2 = checkedValue(), _v$3 = localProps["aria-label"], _v$4 = localProps["aria-describedby"], _v$5 = checkClasses();
+      _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 Switch_default = Switch;
+
+// src/components/switch/index.ts
+var switch_default = Switch_default;
+
+export { switch_default };

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
+};