@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/BBDVIXAH.jsx

@@ -0,0 +1,194 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/navbar/Navbar.tsx
+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"
+    }
+  }
+);
+var imageStyles = 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 Navbar = (props) => {
+  const [local, variantProps, other] = splitProps(
+    props,
+    ["class", "className", "brand", "start", "end"],
+    Object.keys(navbarStyles.variantKeys ?? {})
+  );
+  return <nav
+    class={classes(
+      navbarStyles({ color: variantProps.color }),
+      local.class,
+      local.className
+    )}
+    {...other}
+  >
+      <Show when={local.brand}>
+        <div class="flex-shrink-0 mr-4">{local.brand}</div>
+      </Show>
+
+      <Show when={local.start}>
+        <div class="flex-1 flex items-center space-x-2">{local.start}</div>
+      </Show>
+
+      <Show when={local.end}>
+        <div class="flex-1 flex justify-end space-x-2">{local.end}</div>
+      </Show>
+    </nav>;
+};
+var Navbar_default = Navbar;
+
+// src/components/navbar/NavbarItem.tsx
+import {
+  splitProps as splitProps2
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+var NavbarItem = (props) => {
+  const [local, variantProps, other] = splitProps2(
+    props,
+    [
+      "class",
+      "className",
+      "active",
+      "href",
+      "tag",
+      "to",
+      "children"
+    ],
+    Object.keys(navbarItemStyles.variantKeys ?? {})
+  );
+  const Tag = local.tag === "a" || local.href || local.to ? "a" : "div";
+  return <Dynamic
+    component={Tag}
+    class={classes(
+      navbarItemStyles({
+        active: !!local.active,
+        tag: local.tag ?? (Tag === "a" ? "a" : "div")
+      }),
+      local.class,
+      local.className
+    )}
+    href={local.href ?? local.to}
+    {...other}
+  >
+            {local.children}
+        </Dynamic>;
+};
+var NavbarItem_default = NavbarItem;
+
+// src/components/navbar/NavbarDropdown.tsx
+import { splitProps as splitProps3, Show as Show2 } from "solid-js";
+var NavbarDropdown = (props) => {
+  const [local, variantProps, other] = splitProps3(
+    props,
+    ["class", "className", "label", "hoverable", "children"],
+    [
+      ...Object.keys(navbarDropdownStyles.variantKeys ?? {}),
+      ...Object.keys(dropdownMenuStyles.variantKeys ?? {})
+    ]
+  );
+  return <div
+    class={classes(
+      navbarDropdownStyles({ hoverable: !!local.hoverable }),
+      local.class,
+      local.className
+    )}
+    {...other}
+  >
+      <div class="cursor-pointer">{local.label}</div>
+      <Show2 when={local.hoverable}>
+        <div class={dropdownMenuStyles({ align: variantProps.align })}>
+          {local.children}
+        </div>
+      </Show2>
+    </div>;
+};
+var NavbarDropdown_default = NavbarDropdown;
+
+export {
+  Navbar_default,
+  NavbarItem_default,
+  NavbarDropdown_default
+};

package/dist/chunk/{4RCWSX7S.jsx → C4745OZS.jsx}

@@ -2,7 +2,7 @@ import {
   cva
 } from "./P7WPLZNA.jsx";
 
-// src/components/Avatar/Avatar.tsx
+// src/components/avatar/Avatar.tsx
 import {
   createSignal,
   createMemo,
@@ -13,7 +13,7 @@ import {
   untrack
 } from "solid-js";
 
-// src/components/Avatar/Avatar.styles.ts
+// src/components/avatar/Avatar.styles.ts
 var avatarVariants = cva(
   [
     "flex items-center justify-center mx-1",
@@ -47,7 +47,7 @@ var avatarVariants = cva(
   }
 );
 
-// src/components/Avatar/utils.ts
+// src/components/avatar/utils.ts
 function parseCaption(alt) {
   if (!alt) return "";
   const parts = alt.split(" ");
@@ -57,7 +57,7 @@ function parseCaption(alt) {
   return "";
 }
 
-// src/components/Avatar/Avatar.tsx
+// src/components/avatar/Avatar.tsx
 var Avatar = (rawProps) => {
   const props = mergeProps({ alt: "User Avatar" }, rawProps);
   const [variantProps, otherProps] = splitProps(props, [
@@ -93,9 +93,9 @@ var Avatar = (rawProps) => {
 };
 var Avatar_default = Avatar;
 
-// src/components/Avatar/index.ts
-var Avatar_default2 = Avatar_default;
+// src/components/avatar/index.ts
+var avatar_default = Avatar_default;
 
 export {
-  Avatar_default2 as Avatar_default
+  avatar_default
 };

package/dist/chunk/C4YO33NN.jsx

@@ -0,0 +1,179 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/autocomplete/Autocomplete.tsx
+import {
+  createSignal,
+  createEffect,
+  For,
+  Show,
+  onCleanup
+} 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 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 <div class={autocompleteWrapperClass} ref={wrapperRef}>
+      <Show when={props.label}>
+        <label class={labelClass}>{props.label}</label>
+      </Show>
+
+      <input
+    type="text"
+    value={search()}
+    onInput={handleInput}
+    onKeyDown={handleKeyDown}
+    onFocus={() => setIsOpen(true)}
+    disabled={props.disabled}
+    autocomplete="off"
+    class={inputBoxClass({
+      size: props.size,
+      state: props.state ?? (props.disabled ? "disabled" : "default")
+    })}
+  />
+
+      <Show when={isOpen()}>
+        <div class={dropdownMenuClass()}>
+          <Show
+    when={filtered().length > 0}
+    fallback={<div class={dropdownEmptyClass}>No data available</div>}
+  >
+            <For each={filtered()}>
+              {(item, i) => <div
+    class={dropdownItemClass({
+      active: i() === highlightIndex()
+    })}
+    onMouseDown={() => handleSelect(item)}
+  >
+                  {item}
+                </div>}
+            </For>
+          </Show>
+        </div>
+      </Show>
+    </div>;
+};
+var Autocomplete_default = Autocomplete;
+
+// src/components/autocomplete/index.ts
+var autocomplete_default = Autocomplete_default;
+
+export {
+  autocomplete_default
+};

package/dist/chunk/CJZGTNJZ.js

@@ -0,0 +1,115 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, createComponent, effect, setAttribute, className } from 'solid-js/web';
+import { splitProps, createMemo, untrack, Show } from 'solid-js';
+
+// src/components/tag/Tag.styles.ts
+var tagVariants = cva(
+  [
+    "inline-flex items-center gap-2 px-3 py-1 text-sm rounded",
+    "transition select-none"
+  ],
+  {
+    variants: {
+      size: {
+        normal: "text-xs px-2 py-0.5",
+        medium: "text-sm px-3 py-1",
+        large: "text-base px-4 py-2"
+      },
+      type: {
+        primary: "bg-blue-500 text-white",
+        info: "bg-sky-500 text-white",
+        success: "bg-green-500 text-white",
+        warning: "bg-yellow-500 text-black",
+        danger: "bg-red-500 text-white",
+        dark: "bg-zinc-800 text-white",
+        light: "bg-gray-100 text-black"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: ""
+      },
+      closable: {
+        true: "pr-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "normal"
+    }
+  }
+);
+
+// src/components/tag/Tag.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button type=button class="ml-2 text-xs text-white hover:opacity-80">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div role=group><span role=status><span class=truncate>`);
+var Tag = (props) => {
+  const [localProps, variantProps, otherProps] = splitProps(props, ["closable", "attached", "onClose", "ariaCloseLabel", "closeIcon", "children", "type"], ["class", ...tagVariants.variantKeys]);
+  const isAttachedClosable = createMemo(() => untrack(() => localProps.attached && localProps.closable));
+  const isClosable = createMemo(() => untrack(() => localProps.closable && !localProps.attached));
+  const tagClasses = createMemo(() => classes(tagVariants({
+    ...variantProps,
+    closable: localProps.closable
+  }), variantProps.class));
+  const attachedButtonClasses = createMemo(() => tagVariants({
+    ...variantProps,
+    class: "ml-1 text-xs hover:opacity-80"
+  }));
+  const handleClose = (e) => {
+    untrack(() => {
+      if (typeof localProps.onClose === "function") {
+        localProps.onClose(e);
+      }
+    });
+  };
+  return (() => {
+    var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return tagClasses();
+      }
+    }, otherProps), false, true);
+    insert(_el$3, () => localProps.children);
+    insert(_el$2, createComponent(Show, {
+      get when() {
+        return isClosable();
+      },
+      get children() {
+        var _el$4 = _tmpl$();
+        _el$4.$$click = handleClose;
+        insert(_el$4, () => localProps.closeIcon ?? "\xD7");
+        effect(() => setAttribute(_el$4, "aria-label", localProps.ariaCloseLabel ?? "Remove tag"));
+        return _el$4;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return isAttachedClosable();
+      },
+      get children() {
+        var _el$5 = _tmpl$2();
+        _el$5.$$click = handleClose;
+        insert(_el$5, () => localProps.closeIcon ?? "\xD7");
+        effect((_p$) => {
+          var _v$ = localProps.ariaCloseLabel ?? "Remove tag", _v$2 = attachedButtonClasses();
+          _v$ !== _p$.e && setAttribute(_el$5, "aria-label", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$5;
+      }
+    }), null);
+    effect(() => className(_el$, isAttachedClosable() ? "tags has-addons" : void 0));
+    return _el$;
+  })();
+};
+var Tag_default = Tag;
+delegateEvents(["click"]);
+
+// src/components/tag/index.ts
+var tag_default = Tag_default;
+
+export { tag_default };

package/dist/chunk/D2BEL4SM.jsx

@@ -0,0 +1,169 @@
+import {
+  buttonVariants
+} from "./YAQK2KFY.jsx";
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/dropdown/Dropdown.tsx
+import {
+  splitProps as splitProps2,
+  createMemo,
+  Show
+} from "solid-js";
+
+// src/components/dropdown/useDropdown.ts
+import { 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/DropdownMenu.tsx
+import { splitProps } from "solid-js";
+
+// 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 DropdownMenu = (props) => {
+  const [local, other] = splitProps(props, ["open", "position", "children"]);
+  return <div
+    class={dropdownVariants({ open: local.open, position: local.position })}
+    {...other}
+    id="dropdown-menu"
+    role="menu"
+  >
+      {local.children}
+    </div>;
+};
+var DropdownMenu_default = DropdownMenu;
+
+// src/components/dropdown/Dropdown.tsx
+var Dropdown = (props) => {
+  const [localProps, variantProps, restProps] = splitProps2(
+    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 <div
+    ref={ref}
+    onMouseEnter={onEnter}
+    onMouseLeave={onLeave}
+    class={containerClass()}
+    {...restProps}
+  >
+      <button
+    type="button"
+    onClick={(e) => {
+      e.preventDefault();
+      if (localProps.trigger === "click") toggle();
+    }}
+    class={buttonClass()}
+    aria-disabled={localProps.disabled}
+    disabled={localProps.disabled}
+    aria-controls="dropdown-menu"
+  >
+        {labelContent()}
+      </button>
+
+      <Show when={open()}>
+        <DropdownMenu_default open {...variantProps}>
+          {localProps.children}
+        </DropdownMenu_default>
+      </Show>
+    </div>;
+};
+var Dropdown_default = Dropdown;
+
+// src/components/dropdown/DropdownItem.tsx
+import "solid-js";
+var DropdownItem = ({ hasLink = false, children }) => {
+  return <div class={dropdownItemVariants({ hasLink })}>
+      {children}
+    </div>;
+};
+var DropdownItem_default = DropdownItem;
+
+export {
+  DropdownMenu_default,
+  Dropdown_default,
+  DropdownItem_default
+};