@pathscale/ui 0.0.2 → 0.0.4

package/dist/Autocomplete-gLkjMHrc.d.ts

@@ -0,0 +1,28 @@
+import { Component } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const inputBoxClass: {
+    (props?: (ConfigVariants<{
+        state: {
+            default: string;
+            disabled: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "state")[];
+};
+
+type AutocompleteProps = {
+    items: Array<string | number>;
+    label?: string;
+    value?: string | number;
+    onChange?: (val: string | number) => void;
+    disabled?: boolean;
+} & VariantProps<typeof inputBoxClass>;
+declare const Autocomplete: Component<AutocompleteProps>;
+
+export { Autocomplete as A, type AutocompleteProps as a };

package/dist/Field-DfUn85_1.d.ts

@@ -0,0 +1,49 @@
+import { Component, JSX } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const fieldWrapper: {
+    (props?: (ConfigVariants<{
+        horizontal: {
+            true: string;
+            false: string;
+        };
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        type: {
+            default: string;
+            danger: string;
+        };
+        grouped: {
+            true: string;
+            false: string;
+        };
+        groupMultiline: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "horizontal" | "type" | "grouped" | "groupMultiline")[];
+};
+
+type FieldProps = {
+    /** Label text */
+    label?: string;
+    /** Helper or error message */
+    message?: string;
+    /** Visual intent */
+    type?: "default" | "danger";
+    /** Layout direction */
+    horizontal?: boolean;
+    /** Font/control size */
+    size?: "sm" | "md" | "lg";
+    /** Extra wrapper classes */
+    className?: string;
+} & VariantProps<typeof fieldWrapper> & ClassProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+};
+declare const Field: Component<FieldProps>;
+
+export { Field as F };

package/dist/Progress-gN0xqhAF.d.ts

@@ -0,0 +1,64 @@
+import { Component, ComponentProps } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+/**
+ * The outer flex container.  We don’t apply shape or variant here any more —
+ * that all goes on the actual track (`progressWrapper`).
+ */
+declare const progressContainer: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: "size"[];
+};
+/**
+ * The “track” itself: background, height, pill‐shape.
+ */
+declare const progressWrapper: {
+    (props?: (ConfigVariants<{
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        shape: {
+            rounded: string;
+            circle: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("size" | "shape")[];
+};
+/**
+ * The colored fill bar.
+ */
+declare const progressFill: {
+    (props?: (ConfigVariants<{
+        color: {
+            default: string;
+            danger: string;
+            success: string;
+            info: string;
+            warning: string;
+        };
+        variant: {
+            filled: string;
+            outlined: string;
+            ghost: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("variant" | "color")[];
+};
+
+interface ProgressProps extends VariantProps<typeof progressContainer>, VariantProps<typeof progressWrapper>, VariantProps<typeof progressFill>, Omit<ComponentProps<"div">, "class" | "color"> {
+    value?: number | null;
+    showValue?: boolean;
+    format?: "percent" | "raw";
+    className?: string;
+}
+declare const Progress: Component<ProgressProps>;
+
+export { Progress as P };

package/dist/Steps-1miUeyCD.d.ts

@@ -0,0 +1,34 @@
+import { Component, JSX } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const stepsContainer: {
+    (props?: (ConfigVariants<{
+        animated: {
+            true: string;
+            false: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: "animated"[];
+};
+
+type StepItem = {
+    title: string;
+    marker?: string;
+    subtitle?: string;
+    clickable?: boolean;
+    content: JSX.Element;
+    className?: string;
+};
+type StepsProps = {
+    steps: StepItem[];
+    animated?: boolean;
+    initial?: number;
+    /** Controlled active index */
+    value?: number;
+    /** Fired on step change */
+    onStepChange?: (stepIndex: number) => void;
+    className?: string;
+} & VariantProps<typeof stepsContainer>;
+declare const Steps: Component<StepsProps>;
+
+export { Steps as S, type StepItem as a };

package/dist/Table-CGa6Nop3.d.ts

@@ -0,0 +1,39 @@
+import { JSX, ComponentProps } from 'solid-js';
+import { C as ConfigVariants, a as ClassProps, V as VariantProps } from './classes-B_S9K-9I.js';
+
+declare const tableVariants: {
+    (props?: (ConfigVariants<{
+        header: {
+            default: string;
+        };
+        row: {
+            default: string;
+        };
+        cell: {
+            default: string;
+        };
+        divider: {
+            on: string;
+            off: string;
+        };
+    }> & ClassProps) | undefined): string;
+    variantKeys: ("header" | "cell" | "row" | "divider")[];
+};
+
+type Column<Row> = {
+    key: keyof Row;
+    header: string;
+    sortable?: boolean;
+};
+type TableProps<Row> = {
+    columns: Column<Row>[];
+    rows: Row[];
+    className?: string;
+    rowKey: (row: Row) => string | number;
+    onSelectionChange?: (selectedKeys: Array<string | number>) => void;
+    renderDetail?: (row: Row) => JSX.Element;
+    onSort?: (key: keyof Row, direction: "asc" | "desc") => void;
+} & VariantProps<typeof tableVariants> & ComponentProps<"table">;
+declare const Table: <Row extends Record<string, any>>(props: TableProps<Row>) => JSX.Element;
+
+export { type Column as C, Table as T, type TableProps as a };

package/dist/Timeline-Bd4SxHMT.d.ts

@@ -0,0 +1,14 @@
+import { Component, JSX } from 'solid-js';
+
+type TimelineStage = {
+    active?: boolean;
+    error?: boolean;
+    [key: string]: any;
+};
+type TimelineProps<T = TimelineStage> = {
+    stages: T[];
+    renderStage?: (stage: T, index: number) => JSX.Element;
+};
+declare const Timeline: Component<TimelineProps>;
+
+export { Timeline as T, type TimelineProps as a };

package/dist/{Upload-BrFuZ4JA.d.ts → Upload-CRljD5jf.d.ts}

@@ -33,7 +33,7 @@ type UploadProps = {
     dragDrop?: boolean;
     name?: string;
     onChange?: (files: File | File[]) => void;
-} & VariantProps<typeof uploadWrapperVariants> & JSX.InputHTMLAttributes<HTMLInputElement>;
+} & VariantProps<typeof uploadWrapperVariants> & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "accept" | "disabled">;
 declare const Upload: Component<UploadProps>;
 
 export { Upload as U, type UploadProps as a };

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