@pathscale/ui 0.0.2 → 0.0.4

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

package/dist/chunk/DSTUGZW6.jsx

@@ -0,0 +1,81 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/timeline/Timeline.tsx
+import { For } from "solid-js";
+
+// src/components/timeline/Timeline.styles.ts
+var timelineWrapperClass = "relative";
+var timelineItemClass = cva(
+  "relative flex items-center gap-3 min-h-[48px]",
+  {
+    variants: {
+      state: {
+        default: "text-gray-500",
+        active: "text-green-500 font-medium",
+        error: "text-red-500 font-medium"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var timelineMarkerWrapperClass = "relative w-6 min-h-[48px] flex items-center justify-center";
+var timelineLineClass = "absolute top-0 bottom-0 left-1/2 -translate-x-1/2 w-px bg-gray-300 dark:bg-gray-600";
+var timelineMarkerClass = "absolute w-3 h-3 rounded-full border-2 border-white bg-gray-400 z-10";
+var timelineNumberClass = cva(
+  "absolute -left-4 top-1/2 -translate-y-1/2 text-xs font-semibold",
+  {
+    variants: {
+      state: {
+        default: "text-gray-500",
+        active: "text-green-500",
+        error: "text-red-500"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var timelineContentClass = "pt-0.5 text-sm";
+
+// src/components/timeline/Timeline.tsx
+var Timeline = (props) => {
+  return <ol class={timelineWrapperClass}>
+      <For each={props.stages}>
+        {(stage, index) => {
+    const state = stage.error === true ? "error" : stage.active === true ? "active" : "default";
+    return <li class={timelineItemClass({ state })}>
+              <div class={timelineMarkerWrapperClass}>
+                <div class={timelineLineClass} />
+                <span
+      class={classes(
+        timelineMarkerClass,
+        state === "active" && "bg-green-500",
+        state === "error" && "bg-red-500"
+      )}
+    />
+                <span class={timelineNumberClass({ state })}>
+                  {index() + 1}.
+                </span>
+              </div>
+              <div class={timelineContentClass}>
+                {props.renderStage ? props.renderStage(stage, index()) : stage.title}
+              </div>
+            </li>;
+  }}
+      </For>
+    </ol>;
+};
+var Timeline_default = Timeline;
+
+// src/components/timeline/index.ts
+var timeline_default = Timeline_default;
+
+export {
+  timeline_default
+};