@pathscale/ui 0.0.1 → 0.0.3

package/dist/chunk/TT2JYGLU.js

@@ -0,0 +1,218 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, mergeProps, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, For, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<div><nav></nav><div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><div></div><div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="px-4 py-2 border rounded">Back`);
+var _tmpl$5 = /* @__PURE__ */ template(`<button type=button>Next`);
+var _tmpl$6 = /* @__PURE__ */ template(`<button type=button class="px-4 py-2 bg-green-600 text-white rounded">Restart`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div><div class="flex justify-end gap-2 mt-6">`);
+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 (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(stepsContainer({
+          animated: local.animated
+        }), local.className);
+      }
+    }, otherProps), false, true);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return local.steps;
+      },
+      children: (step, idx) => {
+        const i = idx();
+        return (() => {
+          var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$7 = _el$5.nextSibling;
+          _el$4.$$click = () => step.clickable && changeIndex(i);
+          insert(_el$5, () => step.marker ?? String(i + 1));
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return i < local.steps.length - 1;
+            },
+            get children() {
+              var _el$6 = _tmpl$2();
+              effect(() => className(_el$6, line({
+                active: isPast(i)
+              })));
+              return _el$6;
+            }
+          }), _el$7);
+          insert(_el$7, () => step.title);
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return step.subtitle;
+            },
+            get children() {
+              var _el$8 = _tmpl$2();
+              insert(_el$8, () => step.subtitle);
+              effect(() => className(_el$8, subtitle()));
+              return _el$8;
+            }
+          }), null);
+          effect((_p$) => {
+            var _v$ = navItem({
+              clickable: !!step.clickable
+            }), _v$2 = marker({
+              active: isActive(i) || isPast(i)
+            }), _v$3 = title({
+              active: isActive(i) || isPast(i)
+            });
+            _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+            _v$3 !== _p$.a && className(_el$7, _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$4;
+        })();
+      }
+    }));
+    insert(_el$3, createComponent(For, {
+      get each() {
+        return local.steps;
+      },
+      children: (step, idx) => {
+        const i = idx();
+        return createComponent(Show, {
+          get when() {
+            return isActive(i);
+          },
+          get children() {
+            var _el$9 = _tmpl$7(), _el$0 = _el$9.firstChild;
+            insert(_el$9, () => step.content, _el$0);
+            insert(_el$0, createComponent(Show, {
+              when: i > 0,
+              get children() {
+                var _el$1 = _tmpl$4();
+                _el$1.$$click = back;
+                return _el$1;
+              }
+            }), null);
+            insert(_el$0, createComponent(Show, {
+              get when() {
+                return i < local.steps.length - 1;
+              },
+              get children() {
+                var _el$10 = _tmpl$5();
+                _el$10.$$click = next;
+                effect(() => className(_el$10, buttonSteps()));
+                return _el$10;
+              }
+            }), null);
+            insert(_el$0, createComponent(Show, {
+              get when() {
+                return i === local.steps.length - 1;
+              },
+              get children() {
+                var _el$11 = _tmpl$6();
+                _el$11.$$click = () => changeIndex(0);
+                return _el$11;
+              }
+            }), null);
+            return _el$9;
+          }
+        });
+      }
+    }));
+    effect(() => className(_el$2, navBar()));
+    return _el$;
+  })();
+};
+var Steps_default = Steps;
+delegateEvents(["click"]);
+
+// src/components/steps/index.ts
+var steps_default = Steps_default;
+
+export { steps_default };

package/dist/chunk/V6Y5E7BL.js

@@ -0,0 +1,133 @@
+import { cva } from './HKS7ET6T.js';
+import { template, insert, effect, setAttribute, spread, mergeProps, memo, className } from 'solid-js/web';
+import { splitProps, children, createMemo, untrack } from 'solid-js';
+
+// src/components/breadcrumb/Breadcrumb.styles.ts
+var breadcrumbContainerVariants = cva(
+  ["flex", "items-center", "gap-2", "text-sm"],
+  {
+    variants: {
+      alignment: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3"
+      },
+      separator: {
+        arrow: "breadcrumb-arrow",
+        dot: "breadcrumb-dot",
+        bullet: "breadcrumb-bullet",
+        succeeds: "breadcrumb-succeeds"
+      }
+    },
+    defaultVariants: {
+      alignment: "left",
+      size: "md"
+    }
+  }
+);
+var breadcrumbItemVariants = cva(
+  ["text-gray-600", "dark:text-gray-300"],
+  {
+    variants: {
+      active: {
+        true: "text-blue-600 font-semibold cursor-default",
+        false: "hover:underline"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+
+// src/components/breadcrumb/Breadcrumb.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<li class="text-gray-400 select-none"aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><span>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<nav aria-label=Breadcrumb><ol class="flex items-center flex-wrap gap-1">`);
+var separatorMap = {
+  arrow: "\u2192",
+  dot: "\xB7",
+  bullet: "\u2022",
+  succeeds: "\xBB"
+};
+var Breadcrumb = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["children"], ["alignment", "size", "separator"]);
+  const resolvedChildren = children(() => local.children);
+  const items = createMemo(() => resolvedChildren.toArray());
+  const separator = createMemo(() => untrack(() => {
+    const sep = variantProps.separator;
+    return sep && separatorMap[sep] ? separatorMap[sep] : "/";
+  }));
+  const containerClasses = createMemo(() => breadcrumbContainerVariants(variantProps));
+  const renderItems = createMemo(() => {
+    return items().reduce((acc, item, idx) => {
+      if (idx > 0) {
+        acc.push((() => {
+          var _el$ = _tmpl$();
+          insert(_el$, separator);
+          return _el$;
+        })());
+      }
+      acc.push((() => {
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+        insert(_el$3, item);
+        effect(() => setAttribute(_el$3, "aria-current", idx === items().length - 1 ? "page" : void 0));
+        return _el$2;
+      })());
+      return acc;
+    }, []);
+  });
+  return (() => {
+    var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+    spread(_el$4, mergeProps({
+      get ["class"]() {
+        return containerClasses();
+      }
+    }, otherProps), false, true);
+    insert(_el$5, renderItems);
+    return _el$4;
+  })();
+};
+var Breadcrumb_default = Breadcrumb;
+var _tmpl$4 = /* @__PURE__ */ template(`<li class="flex items-center gap-1">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<a>`);
+var _tmpl$32 = /* @__PURE__ */ template(`<span>`);
+var BreadcrumbItem = (props) => {
+  const [local, variantProps] = splitProps(props, ["children", "href", "active"], ["active"]);
+  return (() => {
+    var _el$ = _tmpl$4();
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!(local.href && !local.active));
+      return () => _c$() ? (() => {
+        var _el$2 = _tmpl$22();
+        insert(_el$2, () => local.children);
+        effect((_p$) => {
+          var _v$ = local.href, _v$2 = breadcrumbItemVariants(variantProps);
+          _v$ !== _p$.e && setAttribute(_el$2, "href", _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
+      })() : (() => {
+        var _el$3 = _tmpl$32();
+        insert(_el$3, () => local.children);
+        effect(() => className(_el$3, breadcrumbItemVariants({
+          active: true
+        })));
+        return _el$3;
+      })();
+    })());
+    return _el$;
+  })();
+};
+var BreadcrumbItem_default = BreadcrumbItem;
+
+export { BreadcrumbItem_default, Breadcrumb_default };

package/dist/chunk/VN5BKHA2.jsx

@@ -0,0 +1,97 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/field/Field.tsx
+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 Field = (props) => {
+  const [local, variantProps, rest] = splitProps(
+    props,
+    ["label", "message", "className", "children"],
+    ["horizontal", "size", "type", "grouped", "groupMultiline"]
+  );
+  return <div class={classes(fieldWrapper(variantProps), local.className)} {...rest}>
+    {local.label && <label class={labelStyles(variantProps)}>
+        {local.label}
+      </label>}
+
+    {
+    /* CONTENT SLOT: now flex when horizontal */
+  }
+    <div class={classes(
+    variantProps.horizontal ? "flex items-center gap-2" : ""
+  )}>
+      {local.children}
+    </div>
+
+    {local.message && <span class={messageStyles(variantProps)}>
+        {local.message}
+      </span>}
+  </div>;
+};
+var Field_default = Field;
+
+// src/components/field/index.ts
+var field_default = Field_default;
+
+export {
+  field_default
+};

package/dist/chunk/WOT36Q7O.js

@@ -0,0 +1,166 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, template, spread, insert, createComponent, effect, className } from 'solid-js/web';
+import { splitProps, createSignal, createMemo, For, Show } from 'solid-js';
+
+// src/components/tabs/Tabs.styles.ts
+var tabsNavVariants = cva(
+  "flex text-sm font-medium text-gray-600 dark:text-gray-300",
+  {
+    variants: {
+      type: {
+        basic: "",
+        boxed: "flex gap-2",
+        toggle: "inline-flex rounded-md p-1",
+        "toggle-rounded": "inline-flex rounded-full p-1"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        md: "text-sm gap-2",
+        lg: "text-base gap-3"
+      },
+      alignment: {
+        left: "justify-start",
+        center: "justify-center",
+        right: "justify-end"
+      },
+      expanded: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      type: "basic",
+      size: "md",
+      alignment: "left",
+      expanded: false
+    }
+  }
+);
+var tabTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap font-medium text-sm transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "text-xs px-2 py-1",
+        md: "text-sm px-3 py-2",
+        lg: "text-base px-4 py-3"
+      },
+      type: {
+        basic: "border-b-2 transition-colors hover:text-blue-600",
+        boxed: "rounded-t px-4 py-2 hover:text-blue-600",
+        toggle: "border -ml-px px-4 py-2 transition-colors first:ml-0 first:rounded-l-md last:rounded-r-md",
+        "toggle-rounded": "border -ml-px first:ml-0 first:rounded-l-full last:rounded-r-full transition-colors"
+      },
+      active: {
+        true: "",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        type: "basic",
+        active: true,
+        class: "border-blue-600 text-blue-600"
+      },
+      {
+        type: "basic",
+        active: false,
+        class: "border-transparent text-gray-500 dark:text-gray-400"
+      },
+      {
+        type: "boxed",
+        active: true,
+        class: "border-x border-t border-b-0 border-gray-400 dark:border-gray-600 text-blue-600"
+      },
+      {
+        type: "boxed",
+        active: false,
+        class: "border-b border-transparent text-gray-500 dark:text-gray-400 hover:text-blue-600"
+      },
+      {
+        type: "toggle",
+        active: true,
+        class: "bg-blue-600 text-white border-blue-600"
+      },
+      {
+        type: "toggle",
+        active: false,
+        class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
+      },
+      {
+        type: "toggle-rounded",
+        active: true,
+        class: "bg-blue-600 text-white border-blue-600"
+      },
+      {
+        type: "toggle-rounded",
+        active: false,
+        class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      disabled: false
+    }
+  }
+);
+
+// src/components/tabs/Tabs.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div><nav><ul class="flex gap-0"></ul></nav><div class=pt-4>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><button>`);
+var Tabs = (props) => {
+  const [local, variantProps, otherProps] = splitProps(props, ["items", "value", "onChange"], ["size", "type", "alignment", "expanded"]);
+  const [internalActive, setInternalActive] = createSignal(local.value ?? 0);
+  const isControlled = () => local.value !== void 0;
+  const active = createMemo(() => isControlled() ? local.value : internalActive());
+  const handleChange = (i) => {
+    const item = local.items[i];
+    if (!item || item.disabled) return;
+    if (!isControlled()) {
+      setInternalActive(i);
+    }
+    local.onChange?.(i);
+  };
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    spread(_el$, otherProps, false, true);
+    insert(_el$3, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (tab, i) => (() => {
+        var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
+        _el$6.$$click = () => handleChange(i());
+        insert(_el$6, () => tab.label);
+        effect(() => className(_el$6, tabTriggerVariants({
+          type: variantProps.type ?? "basic",
+          size: variantProps.size ?? "md",
+          active: i() === active(),
+          disabled: tab.disabled
+        })));
+        return _el$5;
+      })()
+    }));
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return local.items[active()];
+      },
+      get children() {
+        return local.items[active()]?.content;
+      }
+    }));
+    effect(() => className(_el$2, tabsNavVariants(variantProps)));
+    return _el$;
+  })();
+};
+var Tabs_default = Tabs;
+delegateEvents(["click"]);
+
+// src/components/tabs/index.ts
+var tabs_default = Tabs_default;
+
+export { tabs_default };

package/dist/chunk/WUZETUQR.js

@@ -0,0 +1,92 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { template, className, insert, createComponent, memo, effect } from 'solid-js/web';
+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 _tmpl$ = /* @__PURE__ */ template(`<ol>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><div><div></div><span></span><span>.</span></div><div>`);
+var Timeline = (props) => {
+  return (() => {
+    var _el$ = _tmpl$();
+    className(_el$, timelineWrapperClass);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return props.stages;
+      },
+      children: (stage, index) => {
+        const state = stage.error === true ? "error" : stage.active === true ? "active" : "default";
+        return (() => {
+          var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$3.nextSibling;
+          className(_el$3, timelineMarkerWrapperClass);
+          className(_el$4, timelineLineClass);
+          insert(_el$6, () => index() + 1, _el$7);
+          className(_el$8, timelineContentClass);
+          insert(_el$8, (() => {
+            var _c$ = memo(() => !!props.renderStage);
+            return () => _c$() ? props.renderStage(stage, index()) : stage.title;
+          })());
+          effect((_p$) => {
+            var _v$ = timelineItemClass({
+              state
+            }), _v$2 = classes(timelineMarkerClass, state === "active" && "bg-green-500", state === "error" && "bg-red-500"), _v$3 = timelineNumberClass({
+              state
+            });
+            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
+            _v$3 !== _p$.a && className(_el$6, _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$2;
+        })();
+      }
+    }));
+    return _el$;
+  })();
+};
+var Timeline_default = Timeline;
+
+// src/components/timeline/index.ts
+var timeline_default = Timeline_default;
+
+export { timeline_default };