@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/MYERRMTM.js

@@ -0,0 +1,200 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, className, insert, createComponent, effect, use } from 'solid-js/web';
+import { createSignal, createEffect, onCleanup, Show, For } from 'solid-js';
+
+// src/components/autocomplete/Autocomplete.styles.ts
+var autocompleteWrapperClass = "relative w-full";
+var inputBoxClass = cva(
+  "w-full rounded-md border border-gray-300 px-4 py-2 text-sm outline-none transition-colors",
+  {
+    variants: {
+      state: {
+        default: "bg-white text-gray-800 hover:border-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500",
+        disabled: "bg-gray-100 text-gray-400 cursor-not-allowed"
+      },
+      size: {
+        sm: "text-sm py-1 px-2",
+        md: "text-sm py-2 px-4",
+        lg: "text-base py-3 px-4"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      size: "md"
+    }
+  }
+);
+var dropdownMenuClass = cva(
+  "absolute left-0 right-0 z-10 mt-1 rounded-md border border-gray-200 bg-white shadow-md max-h-60 overflow-auto text-sm",
+  {
+    variants: {
+      isOpen: {
+        true: "block",
+        false: "hidden"
+      }
+    },
+    defaultVariants: {
+      isOpen: true
+    }
+  }
+);
+var dropdownItemClass = cva(
+  "w-full text-left px-4 py-2 cursor-pointer transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-blue-500 text-white",
+        false: "hover:bg-gray-100 text-gray-800"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+var dropdownEmptyClass = "px-4 py-2 text-sm text-gray-500";
+var labelClass = "block text-sm font-medium text-gray-700 mb-1";
+
+// src/components/autocomplete/Autocomplete.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<label>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><input type=text autocomplete=off>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div>No data available`);
+var Autocomplete = (props) => {
+  const [search, setSearch] = createSignal(props.value?.toString() || "");
+  const [isOpen, setIsOpen] = createSignal(false);
+  const [filtered, setFiltered] = createSignal(props.items);
+  const [highlightIndex, setHighlightIndex] = createSignal(-1);
+  let wrapperRef;
+  const filterItems = (val) => {
+    const lower = val.toLowerCase();
+    setFiltered(props.items.filter((item) => item.toString().toLowerCase().includes(lower)));
+  };
+  const handleInput = (e) => {
+    const val = e.target.value;
+    setSearch(val);
+    filterItems(val);
+    setIsOpen(true);
+    setHighlightIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen()) return;
+    if (e.key === "ArrowDown") {
+      setHighlightIndex((prev) => Math.min(prev + 1, filtered().length - 1));
+      e.preventDefault();
+    }
+    if (e.key === "ArrowUp") {
+      setHighlightIndex((prev) => Math.max(prev - 1, 0));
+      e.preventDefault();
+    }
+    if (e.key === "Enter" && filtered()[highlightIndex()]) {
+      const selected = filtered()[highlightIndex()];
+      setSearch(selected?.toString() ?? "");
+      props.onChange?.(selected);
+      setIsOpen(false);
+    }
+    if (e.key === "Escape") {
+      setIsOpen(false);
+    }
+  };
+  const handleSelect = (item) => {
+    setSearch(item.toString());
+    props.onChange?.(item);
+    setIsOpen(false);
+  };
+  const handleClickOutside = (e) => {
+    if (!wrapperRef?.contains(e.target)) {
+      setIsOpen(false);
+    }
+  };
+  createEffect(() => {
+    if (props.value !== void 0) {
+      setSearch(props.value.toString());
+    }
+  });
+  createEffect(() => {
+    document.addEventListener("click", handleClickOutside);
+    onCleanup(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+  });
+  return (() => {
+    var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
+    var _ref$ = wrapperRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : wrapperRef = _el$;
+    className(_el$, autocompleteWrapperClass);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.label;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        className(_el$2, labelClass);
+        insert(_el$2, () => props.label);
+        return _el$2;
+      }
+    }), _el$3);
+    _el$3.addEventListener("focus", () => setIsOpen(true));
+    _el$3.$$keydown = handleKeyDown;
+    _el$3.$$input = handleInput;
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isOpen();
+      },
+      get children() {
+        var _el$4 = _tmpl$2();
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return filtered().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$5 = _tmpl$4();
+              className(_el$5, dropdownEmptyClass);
+              return _el$5;
+            })();
+          },
+          get children() {
+            return createComponent(For, {
+              get each() {
+                return filtered();
+              },
+              children: (item, i) => (() => {
+                var _el$6 = _tmpl$2();
+                _el$6.$$mousedown = () => handleSelect(item);
+                insert(_el$6, item);
+                effect(() => className(_el$6, dropdownItemClass({
+                  active: i() === highlightIndex()
+                })));
+                return _el$6;
+              })()
+            });
+          }
+        }));
+        effect(() => className(_el$4, dropdownMenuClass()));
+        return _el$4;
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = props.disabled, _v$2 = inputBoxClass({
+        size: props.size,
+        state: props.state ?? (props.disabled ? "disabled" : "default")
+      });
+      _v$ !== _p$.e && (_el$3.disabled = _p$.e = _v$);
+      _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    effect(() => _el$3.value = search());
+    return _el$;
+  })();
+};
+var Autocomplete_default = Autocomplete;
+delegateEvents(["input", "keydown", "mousedown"]);
+
+// src/components/autocomplete/index.ts
+var autocomplete_default = Autocomplete_default;
+
+export { autocomplete_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/OSJ3P7PI.js

@@ -0,0 +1,189 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, Dynamic, effect, className } from 'solid-js/web';
+import { splitProps, Show } from 'solid-js';
+
+// src/components/navbar/Navbar.styles.ts
+var navbarStyles = cva("flex items-center px-4", {
+  variants: {
+    color: {
+      info: "bg-blue-500 text-white",
+      primary: "bg-indigo-600 text-white",
+      success: "bg-green-500 text-white",
+      light: "bg-white text-gray-800"
+    }
+  },
+  defaultVariants: {
+    color: "info"
+  }
+});
+var navbarItemStyles = cva(
+  "px-3 py-2 rounded transition-colors",
+  {
+    variants: {
+      active: {
+        true: "font-semibold border-b-2 border-current",
+        false: "hover:bg-gray-200"
+      },
+      tag: {
+        div: "",
+        a: ""
+      }
+    },
+    defaultVariants: {
+      active: false,
+      tag: "div"
+    }
+  }
+);
+var navbarDropdownStyles = cva("relative", {
+  variants: {
+    hoverable: {
+      true: "group",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    hoverable: false
+  }
+});
+var dropdownMenuStyles = cva(
+  "absolute mt-2 bg-white text-gray-800 rounded shadow-lg hidden group-hover:block",
+  {
+    variants: {
+      align: {
+        left: "left-0",
+        right: "right-0"
+      }
+    },
+    defaultVariants: {
+      align: "left"
+    }
+  }
+);
+cva("", {
+  variants: {
+    rounded: {
+      true: "rounded-full",
+      false: ""
+    },
+    size: {
+      sm: "w-6 h-6",
+      md: "w-8 h-8",
+      lg: "w-12 h-12"
+    },
+    bordered: {
+      true: "border border-gray-200",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    rounded: false,
+    size: "md",
+    bordered: false
+  }
+});
+
+// src/components/navbar/Navbar.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div class="flex-shrink-0 mr-4">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div class="flex-1 flex items-center space-x-2">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div class="flex-1 flex justify-end space-x-2">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<nav>`);
+var Navbar = (props) => {
+  const [local, variantProps, other] = splitProps(props, ["class", "className", "brand", "start", "end"], Object.keys(navbarStyles.variantKeys ?? {}));
+  return (() => {
+    var _el$ = _tmpl$4();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(navbarStyles({
+          color: variantProps.color
+        }), local.class, local.className);
+      }
+    }, other), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.brand;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        insert(_el$2, () => local.brand);
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.start;
+      },
+      get children() {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => local.start);
+        return _el$3;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.end;
+      },
+      get children() {
+        var _el$4 = _tmpl$3();
+        insert(_el$4, () => local.end);
+        return _el$4;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var Navbar_default = Navbar;
+var NavbarItem = (props) => {
+  const [local, variantProps, other] = splitProps(props, ["class", "className", "active", "href", "tag", "to", "children"], Object.keys(navbarItemStyles.variantKeys ?? {}));
+  const Tag = local.tag === "a" || local.href || local.to ? "a" : "div";
+  return createComponent(Dynamic, mergeProps({
+    component: Tag,
+    get ["class"]() {
+      return classes(navbarItemStyles({
+        active: !!local.active,
+        tag: local.tag ?? (Tag === "a" ? "a" : "div")
+      }), local.class, local.className);
+    },
+    get href() {
+      return local.href ?? local.to;
+    }
+  }, other, {
+    get children() {
+      return local.children;
+    }
+  }));
+};
+var NavbarItem_default = NavbarItem;
+var _tmpl$5 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div><div class=cursor-pointer>`);
+var NavbarDropdown = (props) => {
+  const [local, variantProps, other] = splitProps(props, ["class", "className", "label", "hoverable", "children"], [...Object.keys(navbarDropdownStyles.variantKeys ?? {}), ...Object.keys(dropdownMenuStyles.variantKeys ?? {})]);
+  return (() => {
+    var _el$ = _tmpl$22(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(navbarDropdownStyles({
+          hoverable: !!local.hoverable
+        }), local.class, local.className);
+      }
+    }, other), false, true);
+    insert(_el$2, () => local.label);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.hoverable;
+      },
+      get children() {
+        var _el$3 = _tmpl$5();
+        insert(_el$3, () => local.children);
+        effect(() => className(_el$3, dropdownMenuStyles({
+          align: variantProps.align
+        })));
+        return _el$3;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var NavbarDropdown_default = NavbarDropdown;
+
+export { NavbarDropdown_default, NavbarItem_default, Navbar_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 };