@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/3IHANYRN.js

@@ -0,0 +1,98 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, memo } from 'solid-js/web';
+import { splitProps, createMemo, untrack, Show } from 'solid-js';
+
+// src/components/select/Select.styles.ts
+var selectVariants = cva(
+  [
+    "relative inline-flex items-center appearance-none",
+    "border outline-none",
+    "transition bg-white text-black",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm px-2 py-1",
+        md: "text-base px-3 py-2",
+        lg: "text-lg px-4 py-2"
+      },
+      color: {
+        primary: "border-gray-300 focus:border-primary",
+        info: "border-blue-300 focus:border-blue-500",
+        success: "border-green-300 focus:border-green-500",
+        warning: "border-yellow-300 focus:border-yellow-500",
+        danger: "border-red-300 focus:border-red-500"
+      },
+      loading: {
+        true: "cursor-wait opacity-75",
+        false: ""
+      },
+      expanded: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      rounded: {
+        true: "rounded",
+        false: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      loading: false,
+      expanded: false,
+      rounded: false
+    }
+  }
+);
+
+// src/components/select/Select.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<option value disabled hidden>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<select>`);
+var Select = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(props, ["placeholder", "value", "nativeSize", "onChange", "onBlur", "onFocus"], ["class", ...selectVariants.variantKeys]);
+  const empty = createMemo(() => untrack(() => localProps.value === null || localProps.value === void 0));
+  const selectClasses = createMemo(() => classes(selectVariants(variantProps), variantProps.class));
+  return (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return selectClasses();
+      },
+      get size() {
+        return localProps.nativeSize;
+      },
+      get value() {
+        return localProps.value;
+      },
+      get onChange() {
+        return localProps.onChange;
+      },
+      get onFocus() {
+        return localProps.onFocus;
+      },
+      get onBlur() {
+        return localProps.onBlur;
+      }
+    }, otherProps), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return memo(() => !!localProps.placeholder)() && empty();
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        insert(_el$2, () => localProps.placeholder);
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, () => props.children, null);
+    return _el$;
+  })();
+};
+var Select_default = Select;
+
+// src/components/select/index.ts
+var select_default = Select_default;
+
+export { select_default };

package/dist/chunk/3VOILEMN.js

@@ -0,0 +1,187 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, createComponent, Dynamic, effect, className } from 'solid-js/web';
+import { splitProps, Show, createMemo, createSignal } from 'solid-js';
+
+// src/components/menu/Menu.styles.ts
+var menuWrapper = cva("bg-white border border-gray-200 rounded shadow", {
+  variants: {
+    inline: {
+      true: "flex space-x-4",
+      false: "block"
+    }
+  },
+  defaultVariants: {
+    inline: false
+  }
+});
+var listWrapper = cva("px-4 py-2", {
+  variants: {
+    label: {
+      true: "pt-6",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    label: false
+  }
+});
+var itemVariants = cva(
+  "px-4 py-2 cursor-pointer select-none transition-colors",
+  {
+    variants: {
+      active: {
+        true: "bg-blue-100 font-semibold",
+        false: "hover:bg-blue-500"
+      },
+      expanded: {
+        true: "bg-gray-50 text-black",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed text-gray-700",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        active: true,
+        expanded: true,
+        class: "bg-blue-200"
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      expanded: false,
+      disabled: false
+    }
+  }
+);
+var itemDetailWrapper = cva(
+  "ml-4 border-l border-gray-200 mt-1 pl-2"
+);
+
+// src/components/menu/Menu.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var Menu = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["class", "className", "children", "inline"], Object.keys(menuWrapper.variantKeys ?? {}));
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(menuWrapper({
+          inline: !!variantProps.inline
+        }), local.class, local.className);
+      }
+    }, otherProps), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+};
+var Menu_default = Menu;
+var _tmpl$2 = /* @__PURE__ */ template(`<div class="px-4 pb-2 font-medium text-gray-700">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div><div class="flex flex-col">`);
+var MenuList = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["class", "children", "label"], Object.keys(listWrapper.variantKeys ?? {}));
+  return (() => {
+    var _el$ = _tmpl$22(), _el$3 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(listWrapper({
+          label: !!local.label
+        }), local.class);
+      }
+    }, otherProps), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.label;
+      },
+      get children() {
+        var _el$2 = _tmpl$2();
+        insert(_el$2, () => local.label);
+        return _el$2;
+      }
+    }), _el$3);
+    insert(_el$3, () => local.children);
+    return _el$;
+  })();
+};
+var MenuList_default = MenuList;
+var _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-gray-500">`);
+var _tmpl$23 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-between"><span>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
+var MenuItem = (props) => {
+  const [local, variantProps, rest] = splitProps(props, ["class", "className", "label", "active", "expanded", "disabled", "tag", "to", "target", "children"], Object.keys(itemVariants.variantKeys ?? {}));
+  const hasChildren = createMemo(() => !!local.children);
+  const isControlled = createMemo(() => local.expanded !== void 0);
+  const [internalExpanded, setInternalExpanded] = createSignal(false);
+  const isExpanded = createMemo(() => isControlled() ? !!local.expanded : internalExpanded());
+  const toggleExpand = () => {
+    if (!isControlled() && hasChildren() && !local.disabled) {
+      setInternalExpanded((prev) => !prev);
+    }
+  };
+  const onKeyDown = (e) => {
+    if (local.disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleExpand();
+    }
+  };
+  const tagName = local.to ? "a" : local.tag ?? "div";
+  const focusableProps = !local.to && !local.disabled ? {
+    tabIndex: 0
+  } : {};
+  return createComponent(Dynamic, mergeProps({
+    component: tagName,
+    get ["class"]() {
+      return classes(local.class, local.className, "w-full");
+    },
+    get href() {
+      return local.to;
+    },
+    get target() {
+      return local.target;
+    },
+    get ["aria-disabled"]() {
+      return local.disabled;
+    },
+    onClick: toggleExpand,
+    onKeyDown
+  }, focusableProps, rest, {
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$23(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+        insert(_el$3, () => local.label);
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return hasChildren();
+          },
+          get children() {
+            var _el$4 = _tmpl$3();
+            insert(_el$4, () => isExpanded() ? "\u25BE" : "\u25B8");
+            return _el$4;
+          }
+        }), null);
+        effect(() => className(_el$, itemVariants({
+          active: !!local.active,
+          expanded: isExpanded(),
+          disabled: !!local.disabled
+        })));
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return isExpanded();
+        },
+        get children() {
+          var _el$5 = _tmpl$32();
+          insert(_el$5, () => local.children);
+          effect(() => className(_el$5, itemDetailWrapper()));
+          return _el$5;
+        }
+      })];
+    }
+  }));
+};
+var MenuItem_default = MenuItem;
+
+export { MenuItem_default, MenuList_default, Menu_default };

package/dist/chunk/4TWLQ3IA.js

@@ -0,0 +1,103 @@
+import { cva } from './HKS7ET6T.js';
+import { template, spread, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, Show } from 'solid-js';
+
+// src/components/tooltip/Tooltip.styles.ts
+var tooltipVariants = cva(
+  [
+    "absolute z-10 px-3 py-1 text-white text-sm",
+    "opacity-0 group-hover:opacity-100",
+    "pointer-events-none transition-opacity duration-200",
+    "max-w-xs break-words",
+    "after:content-[''] after:absolute after:w-2 after:h-2 after:rotate-45 after:bg-inherit"
+  ].join(" "),
+  {
+    variants: {
+      type: {
+        info: "bg-blue-500",
+        success: "bg-green-500",
+        warning: "bg-yellow-500",
+        danger: "bg-red-500",
+        primary: "bg-indigo-500",
+        gray: "bg-gray-700"
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      rounded: {
+        true: "rounded",
+        false: "rounded-none"
+      },
+      dashed: {
+        true: "border border-white border-dashed",
+        false: ""
+      },
+      multilined: {
+        true: "whitespace-pre-wrap",
+        false: "whitespace-nowrap"
+      },
+      animated: {
+        true: "transition-opacity duration-300 ease-in-out",
+        false: ""
+      },
+      position: {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-1 after:top-full after:left-1/2 after:-translate-x-1/2 after:-mt-1",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-1 after:bottom-full after:left-1/2 after:-translate-x-1/2 after:-mb-1",
+        left: "right-full top-1/2 -translate-y-1/2 mr-1 after:left-full after:top-1/2 after:-translate-y-1/2 after:-ml-1",
+        right: "left-full top-1/2 -translate-y-1/2 ml-1 after:right-full after:top-1/2 after:-translate-y-1/2 after:-mr-1"
+      }
+    },
+    defaultVariants: {
+      type: "primary",
+      size: "md",
+      rounded: true,
+      dashed: false,
+      multilined: false,
+      animated: true,
+      position: "top"
+    }
+  }
+);
+
+// src/components/tooltip/Tooltip.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class="relative inline-block group">`);
+var Tooltip = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["label", "delay", "always", "children"], ["type", "size", "position", "rounded", "dashed", "multilined", "animated"]);
+  return (() => {
+    var _el$ = _tmpl$2();
+    spread(_el$, otherProps, false, true);
+    insert(_el$, () => local.children, null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.label;
+      },
+      get children() {
+        var _el$2 = _tmpl$();
+        _el$2.style.setProperty("pointer-events", "none");
+        insert(_el$2, () => local.label);
+        effect((_p$) => {
+          var _v$ = tooltipVariants(variantProps), _v$2 = `${local.delay ?? 0}ms`, _v$3 = local.always ? 1 : void 0;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("transition-delay", _v$2) : _el$2.style.removeProperty("transition-delay"));
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("opacity", _v$3) : _el$2.style.removeProperty("opacity"));
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$2;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var Tooltip_default = Tooltip;
+
+// src/components/tooltip/index.ts
+var tooltip_default = Tooltip_default;
+
+export { tooltip_default };

package/dist/chunk/6SBH3KSM.jsx

@@ -0,0 +1,96 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/select/Select.tsx
+import {
+  splitProps,
+  Show,
+  createMemo,
+  untrack
+} from "solid-js";
+
+// src/components/select/Select.styles.ts
+var selectVariants = cva(
+  [
+    "relative inline-flex items-center appearance-none",
+    "border outline-none",
+    "transition bg-white text-black",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm px-2 py-1",
+        md: "text-base px-3 py-2",
+        lg: "text-lg px-4 py-2"
+      },
+      color: {
+        primary: "border-gray-300 focus:border-primary",
+        info: "border-blue-300 focus:border-blue-500",
+        success: "border-green-300 focus:border-green-500",
+        warning: "border-yellow-300 focus:border-yellow-500",
+        danger: "border-red-300 focus:border-red-500"
+      },
+      loading: {
+        true: "cursor-wait opacity-75",
+        false: ""
+      },
+      expanded: {
+        true: "w-full",
+        false: "w-fit"
+      },
+      rounded: {
+        true: "rounded",
+        false: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      loading: false,
+      expanded: false,
+      rounded: false
+    }
+  }
+);
+
+// src/components/select/Select.tsx
+var Select = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(
+    props,
+    ["placeholder", "value", "nativeSize", "onChange", "onBlur", "onFocus"],
+    ["class", ...selectVariants.variantKeys]
+  );
+  const empty = createMemo(
+    () => untrack(() => localProps.value === null || localProps.value === void 0)
+  );
+  const selectClasses = createMemo(
+    () => classes(selectVariants(variantProps), variantProps.class)
+  );
+  return <select
+    class={selectClasses()}
+    size={localProps.nativeSize}
+    value={localProps.value}
+    onChange={localProps.onChange}
+    onFocus={localProps.onFocus}
+    onBlur={localProps.onBlur}
+    {...otherProps}
+  >
+      <Show when={localProps.placeholder && empty()}>
+        <option value="" disabled hidden>
+          {localProps.placeholder}
+        </option>
+      </Show>
+      {props.children}
+    </select>;
+};
+var Select_default = Select;
+
+// src/components/select/index.ts
+var select_default = Select_default;
+
+export {
+  select_default
+};

package/dist/chunk/7ROVLN3J.js

@@ -0,0 +1,175 @@
+import { buttonVariants } from './TFLJI242.js';
+import { cva, classes } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, addEventListener, use, createComponent, effect, className, setAttribute } from 'solid-js/web';
+import { splitProps, createMemo, Show, createSignal, onMount, onCleanup } from 'solid-js';
+
+function useDropdown(trigger, disabled = false) {
+  const [open, setOpen] = createSignal(false);
+  let ref;
+  const toggle = () => {
+    if (!disabled && trigger === "click") {
+      setOpen((v) => !v);
+    }
+  };
+  const onEnter = () => {
+    if (!disabled && trigger === "hover") setOpen(true);
+  };
+  const onLeave = () => {
+    if (!disabled && trigger === "hover") setOpen(false);
+  };
+  const onClickOutside = (e) => {
+    if (trigger === "click" && ref && !ref.contains(e.target)) {
+      setOpen(false);
+    }
+  };
+  onMount(() => {
+    document.addEventListener("click", onClickOutside);
+    onCleanup(() => document.removeEventListener("click", onClickOutside));
+  });
+  return {
+    open,
+    ref: (el) => ref = el,
+    toggle,
+    onEnter,
+    onLeave
+  };
+}
+
+// src/components/dropdown/Dropdown.styles.ts
+var dropdownVariants = cva(
+  [
+    "absolute mt-2 shadow-lg z-10",
+    "w-max rounded-md bg-white border border-gray-300",
+    "transition-all duration-150 ease-in-out",
+    "flex flex-col"
+  ],
+  {
+    variants: {
+      position: {
+        "bottom-left": "left-0 top-full text-black",
+        "bottom-right": "right-0 top-full text-black",
+        "top-left": "left-0 bottom-full text-black",
+        "top-right": "right-0 bottom-full text-black"
+      },
+      open: {
+        true: "block",
+        false: "hidden"
+      }
+    },
+    defaultVariants: {
+      position: "bottom-left",
+      open: false
+    }
+  }
+);
+var dropdownItemVariants = cva(
+  "px-4 py-2 cursor-pointer transition-colors duration-150 ease-in-out hover:bg-gray-100",
+  {
+    variants: {
+      hasLink: { true: "p-0 text-blue-600 hover:underline", false: "" }
+    },
+    defaultVariants: { hasLink: false }
+  }
+);
+
+// src/components/dropdown/DropdownMenu.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var DropdownMenu = (props) => {
+  const [local, other] = splitProps(props, ["open", "position", "children"]);
+  return (() => {
+    var _el$ = _tmpl$();
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return dropdownVariants({
+          open: local.open,
+          position: local.position
+        });
+      }
+    }, other, {
+      "id": "dropdown-menu",
+      "role": "menu"
+    }), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+};
+var DropdownMenu_default = DropdownMenu;
+
+// src/components/dropdown/Dropdown.tsx
+var _tmpl$2 = /* @__PURE__ */ template(`<div><button type=button aria-controls=dropdown-menu>`);
+var Dropdown = (props) => {
+  const [localProps, variantProps, restProps] = splitProps(props, ["label", "disabledLabel", "trigger", "children", "disabled", "color", "class", "className"], Object.keys(dropdownVariants.variantKeys ?? {}));
+  const {
+    open,
+    ref,
+    toggle,
+    onEnter,
+    onLeave
+  } = useDropdown(localProps.trigger ?? "click", !!localProps.disabled);
+  const labelContent = createMemo(() => localProps.disabled ? localProps.disabledLabel ?? localProps.label : localProps.label ?? "Toggle");
+  const containerClass = createMemo(() => classes("relative inline-block", localProps.class, localProps.className));
+  const buttonClass = createMemo(() => buttonVariants({
+    color: "primary"
+  }));
+  return (() => {
+    var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
+    addEventListener(_el$, "mouseleave", onLeave);
+    addEventListener(_el$, "mouseenter", onEnter);
+    use(ref, _el$);
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return containerClass();
+      }
+    }, restProps), false, true);
+    _el$2.$$click = (e) => {
+      e.preventDefault();
+      if (localProps.trigger === "click") toggle();
+    };
+    insert(_el$2, labelContent);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return open();
+      },
+      get children() {
+        return createComponent(DropdownMenu_default, mergeProps({
+          open: true
+        }, variantProps, {
+          get children() {
+            return localProps.children;
+          }
+        }));
+      }
+    }), null);
+    effect((_p$) => {
+      var _v$ = buttonClass(), _v$2 = localProps.disabled, _v$3 = localProps.disabled;
+      _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$2, "aria-disabled", _p$.t = _v$2);
+      _v$3 !== _p$.a && (_el$2.disabled = _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+};
+var Dropdown_default = Dropdown;
+delegateEvents(["click"]);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var DropdownItem = ({
+  hasLink = false,
+  children
+}) => {
+  return (() => {
+    var _el$ = _tmpl$3();
+    insert(_el$, children);
+    effect(() => className(_el$, dropdownItemVariants({
+      hasLink
+    })));
+    return _el$;
+  })();
+};
+var DropdownItem_default = DropdownItem;
+
+export { DropdownItem_default, DropdownMenu_default, Dropdown_default };