@pathscale/ui 0.0.2 → 0.0.4

package/dist/chunk/LAQPAV5I.jsx

@@ -0,0 +1,187 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/steps/Steps.tsx
+import {
+  createSignal,
+  splitProps,
+  For,
+  Show,
+  createMemo
+} from "solid-js";
+
+// src/components/steps/Steps.styles.ts
+var stepsContainer = cva("flex flex-col", {
+  variants: {
+    animated: {
+      true: "transition-all duration-300 ease-in-out",
+      false: ""
+    }
+  },
+  defaultVariants: { animated: false }
+});
+var navBar = cva("flex items-center justify-between mb-6");
+var navItem = cva(
+  "relative flex-1 flex flex-col items-center",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer",
+        false: "pointer-events-none"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: { clickable: false, disabled: false }
+  }
+);
+var marker = cva(
+  "w-8 h-8 flex items-center justify-center rounded-full border-2",
+  {
+    variants: {
+      active: {
+        true: "bg-blue-500 border-blue-500 text-white",
+        false: "bg-white border-gray-300 text-gray-600"
+      }
+    },
+    defaultVariants: { active: false }
+  }
+);
+var line = cva("absolute top-1/2 left-full w-full h-0.5", {
+  variants: {
+    active: {
+      true: "bg-blue-500",
+      false: "bg-gray-300"
+    }
+  },
+  defaultVariants: { active: false }
+});
+var title = cva("mt-2 text-sm", {
+  variants: {
+    active: {
+      true: "text-blue-600 font-medium",
+      false: "text-gray-600"
+    }
+  },
+  defaultVariants: { active: false }
+});
+var subtitle = cva("text-xs mt-1", {
+  variants: {
+    color: {
+      default: "text-blue-500",
+      muted: "text-gray-500",
+      accent: "text-green-500"
+    }
+  },
+  defaultVariants: { color: "default" }
+});
+var buttonSteps = cva("px-4 py-2 bg-blue-600 text-white rounded");
+
+// src/components/steps/Steps.tsx
+var Steps = (props) => {
+  const [local, variantProps, otherProps] = splitProps(
+    props,
+    ["steps", "animated", "initial", "value", "onStepChange", "className"],
+    ["animated"]
+  );
+  const isControlled = () => local.value !== void 0;
+  const [internalIndex, setInternalIndex] = createSignal(local.initial ?? 0);
+  const activeIndex = createMemo(
+    () => isControlled() ? local.value : internalIndex()
+  );
+  const clamp = (i) => Math.max(0, Math.min(i, local.steps.length - 1));
+  const changeIndex = (i) => {
+    const idx = clamp(i);
+    if (isControlled()) local.onStepChange?.(idx);
+    else setInternalIndex(idx);
+  };
+  const next = () => changeIndex(activeIndex() + 1);
+  const back = () => changeIndex(activeIndex() - 1);
+  const isActive = (i) => i === activeIndex();
+  const isPast = (i) => i < activeIndex();
+  return <div
+    class={classes(
+      stepsContainer({ animated: local.animated }),
+      local.className
+    )}
+    {...otherProps}
+  >
+      <nav class={navBar()}>
+        <For each={local.steps}>
+          {(step, idx) => {
+    const i = idx();
+    return <div
+      class={navItem({ clickable: !!step.clickable })}
+      onClick={() => step.clickable && changeIndex(i)}
+    >
+                <div class={marker({ active: isActive(i) || isPast(i) })}>
+                  {step.marker ?? String(i + 1)}
+                </div>
+                <Show when={i < local.steps.length - 1}>
+                  <div class={line({ active: isPast(i) })} />
+                </Show>
+                <div class={title({ active: isActive(i) || isPast(i) })}>
+                  {step.title}
+                </div>
+                <Show when={step.subtitle}>
+                  <div class={subtitle()}>{step.subtitle}</div>
+                </Show>
+              </div>;
+  }}
+        </For>
+      </nav>
+      <div>
+        <For each={local.steps}>
+          {(step, idx) => {
+    const i = idx();
+    return <Show when={isActive(i)}>
+                <div>
+                  {step.content}
+                  <div class="flex justify-end gap-2 mt-6">
+                    <Show when={i > 0}>
+                      <button
+      type="button"
+      class="px-4 py-2 border rounded"
+      onClick={back}
+    >
+                        Back
+                      </button>
+                    </Show>
+                    <Show when={i < local.steps.length - 1}>
+                      <button
+      type="button"
+      class={buttonSteps()}
+      onClick={next}
+    >
+                        Next
+                      </button>
+                    </Show>
+                    <Show when={i === local.steps.length - 1}>
+                      <button
+      type="button"
+      class="px-4 py-2 bg-green-600 text-white rounded"
+      onClick={() => changeIndex(0)}
+    >
+                        Restart
+                      </button>
+                    </Show>
+                  </div>
+                </div>
+              </Show>;
+  }}
+        </For>
+      </div>
+    </div>;
+};
+var Steps_default = Steps;
+
+// src/components/steps/index.ts
+var steps_default = Steps_default;
+
+export {
+  steps_default
+};

package/dist/chunk/MAX47D6F.js

@@ -0,0 +1,99 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, spread, mergeProps, insert, memo, effect, className } from 'solid-js/web';
+import { splitProps } from 'solid-js';
+
+// src/components/field/Field.styles.ts
+var fieldWrapper = cva(
+  "flex flex-col space-y-1",
+  {
+    variants: {
+      horizontal: {
+        true: "flex-row items-center space-x-2 space-y-0",
+        false: "flex-col"
+      },
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg"
+      },
+      type: {
+        default: "",
+        danger: "text-red-600"
+      },
+      grouped: {
+        true: "flex flex-wrap gap-2",
+        false: ""
+      },
+      groupMultiline: {
+        true: "flex-col",
+        false: "flex-row"
+      }
+    },
+    compoundVariants: [
+      { horizontal: true, grouped: true, class: "items-start" }
+    ],
+    defaultVariants: {
+      horizontal: false,
+      size: "md",
+      type: "default",
+      grouped: false,
+      groupMultiline: false
+    }
+  }
+);
+var labelStyles = cva("font-medium", {
+  variants: {
+    size: { sm: "text-sm", md: "text-base", lg: "text-lg" },
+    type: { default: "text-gray-800", danger: "text-red-600" }
+  },
+  defaultVariants: { size: "md", type: "default" }
+});
+var messageStyles = cva("mt-1 text-sm", {
+  variants: {
+    type: { default: "text-gray-600", danger: "text-red-600" }
+  },
+  defaultVariants: { type: "default" }
+});
+
+// src/components/field/Field.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+var Field = (props) => {
+  const [local, variantProps, rest] = splitProps(props, ["label", "message", "className", "children"], ["horizontal", "size", "type", "grouped", "groupMultiline"]);
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(fieldWrapper(variantProps), local.className);
+      }
+    }, rest), false, true);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!local.label);
+      return () => _c$() && (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => local.label);
+        effect(() => className(_el$3, labelStyles(variantProps)));
+        return _el$3;
+      })();
+    })(), _el$2);
+    insert(_el$2, () => local.children);
+    insert(_el$, (() => {
+      var _c$2 = memo(() => !!local.message);
+      return () => _c$2() && (() => {
+        var _el$4 = _tmpl$3();
+        insert(_el$4, () => local.message);
+        effect(() => className(_el$4, messageStyles(variantProps)));
+        return _el$4;
+      })();
+    })(), null);
+    effect(() => className(_el$2, classes(variantProps.horizontal ? "flex items-center gap-2" : "")));
+    return _el$;
+  })();
+};
+var Field_default = Field;
+
+// src/components/field/index.ts
+var field_default = Field_default;
+
+export { field_default };

package/dist/chunk/{2JGZSAW5.js → MI773TMC.js}

@@ -2,7 +2,7 @@ import { cva } from './HKS7ET6T.js';
 import { template, insert, createComponent, spread, mergeProps as mergeProps$1, effect, className } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, createEffect, untrack, createMemo, Show } 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",
@@ -36,7 +36,7 @@ var avatarVariants = cva(
   }
 );
 
-// src/components/Avatar/utils.ts
+// src/components/avatar/utils.ts
 function parseCaption(alt) {
   if (!alt) return "";
   const parts = alt.split(" ");
@@ -46,7 +46,7 @@ function parseCaption(alt) {
   return "";
 }
 
-// src/components/Avatar/Avatar.tsx
+// src/components/avatar/Avatar.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<img class="size-full object-cover">`);
 var _tmpl$2 = /* @__PURE__ */ template(`<figure>`);
 var _tmpl$3 = /* @__PURE__ */ template(`<figcaption>`);
@@ -101,7 +101,7 @@ 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 };
+export { avatar_default };

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