@pathscale/ui 0.0.8 → 0.0.10

package/dist/chunk/3FBDYV4P.js

@@ -0,0 +1,143 @@
+import { cva } from './HKS7ET6T.js';
+import { delegateEvents, createComponent, template, addEventListener, insert, effect, className } from 'solid-js/web';
+import { createContext, createSignal, useContext, Show } from 'solid-js';
+
+var DropdownContext = createContext();
+
+// src/components/dropdown/Dropdown.styles.ts
+var dropdownMenuClass = cva(
+  "absolute z-10 w-max bg-white rounded shadow border border-gray-200 flex flex-col",
+  {
+    variants: {
+      position: {
+        "top-left": "bottom-full left-0 mb-2",
+        "top-right": "bottom-full right-0 mb-2",
+        left: "right-full top-0 mr-2",
+        right: "left-full top-0 ml-2",
+        "bottom-left": "top-full left-0 mt-2",
+        "bottom-right": "top-full right-0 mt-2"
+      }
+    },
+    defaultVariants: {
+      position: "bottom-left"
+    }
+  }
+);
+var dropdownItemClass = cva(
+  "px-4 py-2 text-sm cursor-pointer transition-colors",
+  {
+    variants: {
+      disabled: {
+        true: "text-gray-400 cursor-not-allowed",
+        false: "hover:bg-gray-100 text-gray-800"
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var dropdownRootClass = cva("relative inline-block");
+var dropdownTriggerClass = cva("cursor-pointer w-fit", {
+  variants: {
+    disabled: {
+      true: "pointer-events-none opacity-50",
+      false: ""
+    },
+    hoverable: {
+      true: "",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: false,
+    hoverable: false
+  }
+});
+
+// src/components/dropdown/Dropdown.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var Dropdown = (props) => {
+  const [open, setOpen] = createSignal(false);
+  const context = {
+    open,
+    setOpen,
+    disabled: props.disabled,
+    hoverable: props.hoverable,
+    position: props.position ?? "left"
+  };
+  return createComponent(DropdownContext.Provider, {
+    value: context,
+    get children() {
+      var _el$ = _tmpl$();
+      addEventListener(_el$, "mouseleave", props.hoverable ? () => setOpen(false) : void 0);
+      addEventListener(_el$, "mouseenter", props.hoverable ? () => setOpen(true) : void 0);
+      insert(_el$, () => props.children);
+      effect(() => className(_el$, dropdownRootClass()));
+      return _el$;
+    }
+  });
+};
+var Dropdown_default = Dropdown;
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var DropdownTrigger = (props) => {
+  const context = useContext(DropdownContext);
+  const handleClick = () => {
+    if (!context?.hoverable && !context?.disabled) {
+      context?.setOpen(!context.open());
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$2();
+    _el$.$$click = handleClick;
+    insert(_el$, () => props.children);
+    effect(() => className(_el$, dropdownTriggerClass({
+      disabled: context?.disabled,
+      hoverable: context?.hoverable
+    })));
+    return _el$;
+  })();
+};
+var DropdownTrigger_default = DropdownTrigger;
+delegateEvents(["click"]);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var DropdownMenu = (props) => {
+  const context = useContext(DropdownContext);
+  return createComponent(Show, {
+    get when() {
+      return context?.open?.();
+    },
+    get children() {
+      var _el$ = _tmpl$3();
+      insert(_el$, () => props.children);
+      effect(() => className(_el$, dropdownMenuClass({
+        position: context?.position
+      })));
+      return _el$;
+    }
+  });
+};
+var DropdownMenu_default = DropdownMenu;
+var _tmpl$4 = /* @__PURE__ */ template(`<div role=menuitem>`);
+var DropdownItem = (props) => {
+  const context = useContext(DropdownContext);
+  const handleClick = () => {
+    if (!props.disabled) {
+      props.onClick?.();
+      context?.setOpen(false);
+    }
+  };
+  return (() => {
+    var _el$ = _tmpl$4();
+    _el$.$$click = handleClick;
+    insert(_el$, () => props.children);
+    effect(() => className(_el$, dropdownItemClass({
+      disabled: props.disabled
+    })));
+    return _el$;
+  })();
+};
+var DropdownItem_default = DropdownItem;
+delegateEvents(["click"]);
+
+export { DropdownItem_default, DropdownMenu_default, DropdownTrigger_default, Dropdown_default };

package/dist/chunk/55B7Q4NT.jsx

@@ -0,0 +1,258 @@
+import {
+  classes,
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/navbar/Navbar.tsx
+import {
+  createSignal,
+  splitProps,
+  createEffect
+} from "solid-js";
+
+// src/components/navbar/NavbarContext.ts
+import { createContext } from "solid-js";
+var NavbarContext = createContext();
+
+// src/components/navbar/Navbar.styles.ts
+var navbarClass = cva("flex items-center px-4", {
+  variants: {
+    color: {
+      primary: "bg-indigo-600 text-white",
+      info: "bg-blue-500 text-white",
+      success: "bg-green-500 text-white",
+      danger: "bg-red-600 text-white",
+      warning: "bg-yellow-500 text-white",
+      light: "bg-white text-gray-800"
+    },
+    spaced: {
+      true: "py-4",
+      false: ""
+    },
+    shadow: {
+      true: "shadow-md",
+      false: ""
+    },
+    transparent: {
+      true: "bg-transparent",
+      false: ""
+    },
+    fixedTop: {
+      true: "fixed top-0 left-0 right-0 z-50",
+      false: ""
+    },
+    fixedBottom: {
+      true: "fixed bottom-0 left-0 right-0 z-50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    spaced: false,
+    shadow: false,
+    transparent: false,
+    fixedTop: false,
+    fixedBottom: false
+  }
+});
+var navbarItemClass = cva(
+  "px-4 py-2 rounded transition-colors cursor-pointer",
+  {
+    variants: {
+      active: {
+        true: "",
+        false: ""
+      },
+      color: {
+        primary: "",
+        success: "",
+        info: "",
+        danger: "",
+        warning: "",
+        light: ""
+      }
+    },
+    defaultVariants: {
+      active: false,
+      color: "primary"
+    },
+    compoundVariants: [
+      { color: "primary", active: true, class: "bg-white/20 text-white" },
+      {
+        color: "primary",
+        active: false,
+        class: "hover:bg-white/10 text-white"
+      },
+      { color: "success", active: true, class: "bg-white/20 text-white" },
+      {
+        color: "success",
+        active: false,
+        class: "hover:bg-white/10 text-white"
+      },
+      { color: "info", active: true, class: "bg-white/20 text-white" },
+      { color: "info", active: false, class: "hover:bg-white/10 text-white" },
+      { color: "danger", active: true, class: "bg-white/20 text-white" },
+      { color: "danger", active: false, class: "hover:bg-white/10 text-white" },
+      { color: "warning", active: true, class: "bg-white/20 text-white" },
+      {
+        color: "warning",
+        active: false,
+        class: "hover:bg-white/10 text-white"
+      },
+      { color: "light", active: true, class: "bg-gray-300 text-gray-900" },
+      {
+        color: "light",
+        active: false,
+        class: "hover:bg-gray-100 text-gray-800"
+      }
+    ]
+  }
+);
+var navbarDropdownClass = cva("relative", {
+  variants: {
+    hoverable: {
+      true: "group",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    hoverable: true
+  }
+});
+var dropdownMenuClass = 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"
+    }
+  }
+);
+
+// src/components/navbar/Navbar.tsx
+var Navbar = (props) => {
+  const [local] = splitProps(props, [
+    "color",
+    "modelValue",
+    "children",
+    "spaced",
+    "shadow",
+    "transparent",
+    "fixedTop",
+    "fixedBottom"
+  ]);
+  const [selected, setSelected] = createSignal(props.modelValue);
+  createEffect(() => {
+    if (props.modelValue !== void 0) {
+      setSelected(props.modelValue);
+    }
+  });
+  return <NavbarContext.Provider
+    value={{
+      color: local.color ?? "primary",
+      selected,
+      setSelected: (val) => {
+        props.onChange?.(val);
+        setSelected(val);
+      }
+    }}
+  >
+      <nav
+    class={navbarClass({
+      color: local.color,
+      spaced: local.spaced,
+      shadow: local.shadow,
+      transparent: local.transparent,
+      fixedTop: local.fixedTop,
+      fixedBottom: local.fixedBottom
+    })}
+  >
+        {local.children}
+      </nav>
+    </NavbarContext.Provider>;
+};
+var Navbar_default = Navbar;
+
+// src/components/navbar/NavbarItem.tsx
+import { splitProps as splitProps2, useContext } from "solid-js";
+import { Dynamic } from "solid-js/web";
+var allowedColors = [
+  "primary",
+  "info",
+  "success",
+  "danger",
+  "warning",
+  "light"
+];
+var NavbarItem = (props) => {
+  const context = useContext(NavbarContext);
+  const [local, rest] = splitProps2(props, [
+    "tag",
+    "href",
+    "label",
+    "children",
+    "class",
+    "color"
+  ]);
+  const Tag = local.tag || (local.href ? "a" : "div");
+  const isActive = () => context?.selected?.() === local.label;
+  const resolveColor = (input) => {
+    return allowedColors.includes(input) ? input : void 0;
+  };
+  return <Dynamic
+    component={Tag}
+    href={local.href}
+    onClick={() => context?.setSelected?.(local.label)}
+    class={classes(
+      navbarItemClass({
+        active: isActive(),
+        color: resolveColor(local.color ?? context?.color)
+      }),
+      local.class
+    )}
+    {...rest}
+  >
+      {local.children}
+    </Dynamic>;
+};
+var NavbarItem_default = NavbarItem;
+
+// src/components/navbar/NavbarDropdown.tsx
+import { splitProps as splitProps3, Show } from "solid-js";
+var NavbarDropdown = (props) => {
+  const [local, rest] = splitProps3(props, [
+    "label",
+    "hoverable",
+    "align",
+    "class",
+    "children"
+  ]);
+  return <div
+    class={classes(
+      navbarDropdownClass({ hoverable: local.hoverable }),
+      local.class
+    )}
+    {...rest}
+  >
+      <div class="cursor-pointer px-4 py-2 rounded hover:bg-white/10">
+        {local.label}
+      </div>
+      <Show when={local.hoverable}>
+        <div class={dropdownMenuClass({ align: local.align })}>
+          {local.children}
+        </div>
+      </Show>
+    </div>;
+};
+var NavbarDropdown_default = NavbarDropdown;
+
+export {
+  Navbar_default,
+  NavbarItem_default,
+  NavbarDropdown_default
+};

package/dist/chunk/{6B7HOWQD.js → EE4HXMKA.js}

@@ -53,11 +53,11 @@ var checkVariants = cva(
         gray: "peer-checked:bg-gray-400"
       },
       passiveColor: {
-        primary: "bg-blue-500",
-        success: "bg-green-500",
-        danger: "bg-red-500",
-        warning: "bg-yellow-400",
-        gray: "bg-gray-400"
+        primary: "bg-blue-200",
+        success: "bg-green-200",
+        danger: "bg-red-200",
+        warning: "bg-yellow-200",
+        gray: "bg-gray-200"
       },
       rounded: {
         true: "rounded-full after:rounded-full",

package/dist/chunk/{YAQK2KFY.jsx → GA2HCFRS.jsx}

@@ -1,7 +1,17 @@
+import {
+  PolymorphicButton_default
+} from "./KACNXPUM.jsx";
 import {
   cva
 } from "./P7WPLZNA.jsx";
 
+// src/components/button/Button.tsx
+import {
+  mergeProps,
+  splitProps,
+  createMemo
+} from "solid-js";
+
 // src/components/button/Button.styles.ts
 var buttonVariants = cva(
   [
@@ -189,6 +199,30 @@ var buttonVariants = cva(
   }
 );
 
+// src/components/button/Button.tsx
+var Button = (props) => {
+  const defaultedProps = mergeProps(
+    {
+      color: "primary"
+    },
+    props
+  );
+  const [variantProps, otherProps] = splitProps(defaultedProps, [
+    "class",
+    ...buttonVariants.variantKeys
+  ]);
+  const classes = createMemo(() => buttonVariants(variantProps));
+  return <PolymorphicButton_default
+    class={classes()}
+    aria-busy={variantProps.loading ? "true" : void 0}
+    {...otherProps}
+  />;
+};
+var Button_default = Button;
+
+// src/components/button/index.ts
+var button_default = Button_default;
+
 export {
-  buttonVariants
+  button_default
 };

package/dist/chunk/{5R7S7TXL.jsx → GWFGP2JQ.jsx}

@@ -61,11 +61,11 @@ var checkVariants = cva(
         gray: "peer-checked:bg-gray-400"
       },
       passiveColor: {
-        primary: "bg-blue-500",
-        success: "bg-green-500",
-        danger: "bg-red-500",
-        warning: "bg-yellow-400",
-        gray: "bg-gray-400"
+        primary: "bg-blue-200",
+        success: "bg-green-200",
+        danger: "bg-red-200",
+        warning: "bg-yellow-200",
+        gray: "bg-gray-200"
       },
       rounded: {
         true: "rounded-full after:rounded-full",

package/dist/chunk/{TFLJI242.js → NZZRKP74.js}

@@ -1,4 +1,7 @@
+import { PolymorphicButton_default } from './G6RG4LR7.js';
 import { cva } from './HKS7ET6T.js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps, splitProps, createMemo } from 'solid-js';
 
 // src/components/button/Button.styles.ts
 var buttonVariants = cva(
@@ -187,4 +190,25 @@ var buttonVariants = cva(
   }
 );
 
-export { buttonVariants };
+// src/components/button/Button.tsx
+var Button = (props) => {
+  const defaultedProps = mergeProps({
+    color: "primary"
+  }, props);
+  const [variantProps, otherProps] = splitProps(defaultedProps, ["class", ...buttonVariants.variantKeys]);
+  const classes = createMemo(() => buttonVariants(variantProps));
+  return createComponent(PolymorphicButton_default, mergeProps$1({
+    get ["class"]() {
+      return classes();
+    },
+    get ["aria-busy"]() {
+      return variantProps.loading ? "true" : void 0;
+    }
+  }, otherProps));
+};
+var Button_default = Button;
+
+// src/components/button/index.ts
+var button_default = Button_default;
+
+export { button_default };

package/dist/chunk/OJRG4ZAB.jsx

@@ -0,0 +1,143 @@
+import {
+  cva
+} from "./P7WPLZNA.jsx";
+
+// src/components/dropdown/Dropdown.tsx
+import { createSignal } from "solid-js";
+
+// src/components/dropdown/DropdownContext.ts
+import { createContext } from "solid-js";
+var DropdownContext = createContext();
+
+// src/components/dropdown/Dropdown.styles.ts
+var dropdownMenuClass = cva(
+  "absolute z-10 w-max bg-white rounded shadow border border-gray-200 flex flex-col",
+  {
+    variants: {
+      position: {
+        "top-left": "bottom-full left-0 mb-2",
+        "top-right": "bottom-full right-0 mb-2",
+        left: "right-full top-0 mr-2",
+        right: "left-full top-0 ml-2",
+        "bottom-left": "top-full left-0 mt-2",
+        "bottom-right": "top-full right-0 mt-2"
+      }
+    },
+    defaultVariants: {
+      position: "bottom-left"
+    }
+  }
+);
+var dropdownItemClass = cva(
+  "px-4 py-2 text-sm cursor-pointer transition-colors",
+  {
+    variants: {
+      disabled: {
+        true: "text-gray-400 cursor-not-allowed",
+        false: "hover:bg-gray-100 text-gray-800"
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var dropdownRootClass = cva("relative inline-block");
+var dropdownTriggerClass = cva("cursor-pointer w-fit", {
+  variants: {
+    disabled: {
+      true: "pointer-events-none opacity-50",
+      false: ""
+    },
+    hoverable: {
+      true: "",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: false,
+    hoverable: false
+  }
+});
+
+// src/components/dropdown/Dropdown.tsx
+var Dropdown = (props) => {
+  const [open, setOpen] = createSignal(false);
+  const context = {
+    open,
+    setOpen,
+    disabled: props.disabled,
+    hoverable: props.hoverable,
+    position: props.position ?? "left"
+  };
+  return <DropdownContext.Provider value={context}>
+      <div
+    class={dropdownRootClass()}
+    onMouseEnter={props.hoverable ? () => setOpen(true) : void 0}
+    onMouseLeave={props.hoverable ? () => setOpen(false) : void 0}
+  >
+        {props.children}
+      </div>
+    </DropdownContext.Provider>;
+};
+var Dropdown_default = Dropdown;
+
+// src/components/dropdown/DropdownTrigger.tsx
+import { useContext } from "solid-js";
+var DropdownTrigger = (props) => {
+  const context = useContext(DropdownContext);
+  const handleClick = () => {
+    if (!context?.hoverable && !context?.disabled) {
+      context?.setOpen(!context.open());
+    }
+  };
+  return <div
+    onClick={handleClick}
+    class={dropdownTriggerClass({
+      disabled: context?.disabled,
+      hoverable: context?.hoverable
+    })}
+  >
+      {props.children}
+    </div>;
+};
+var DropdownTrigger_default = DropdownTrigger;
+
+// src/components/dropdown/DropdownMenu.tsx
+import { Show, useContext as useContext2 } from "solid-js";
+var DropdownMenu = (props) => {
+  const context = useContext2(DropdownContext);
+  return <Show when={context?.open?.()}>
+      <div class={dropdownMenuClass({ position: context?.position })}>
+        {props.children}
+      </div>
+    </Show>;
+};
+var DropdownMenu_default = DropdownMenu;
+
+// src/components/dropdown/DropdownItem.tsx
+import { useContext as useContext3 } from "solid-js";
+var DropdownItem = (props) => {
+  const context = useContext3(DropdownContext);
+  const handleClick = () => {
+    if (!props.disabled) {
+      props.onClick?.();
+      context?.setOpen(false);
+    }
+  };
+  return <div
+    role="menuitem"
+    onClick={handleClick}
+    class={dropdownItemClass({ disabled: props.disabled })}
+  >
+      {props.children}
+    </div>;
+};
+var DropdownItem_default = DropdownItem;
+
+export {
+  Dropdown_default,
+  DropdownTrigger_default,
+  DropdownMenu_default,
+  DropdownItem_default
+};

package/dist/chunk/{5KABSQPM.js → OYAKKETQ.js}

@@ -36,7 +36,7 @@ var tooltipVariants = cva(
       },
       multilined: {
         true: "whitespace-pre-wrap",
-        false: "whitespace-nowrap"
+        false: "whitespace-nowrap overflow-hidden text-ellipsis"
       },
       animated: {
         true: "transition-opacity duration-300 ease-in-out",