@pathscale/ui 0.0.9 → 0.0.10

package/dist/chunk/P653OZ5D.js

@@ -0,0 +1,224 @@
+import { cva, classes } from './HKS7ET6T.js';
+import { createComponent, template, insert, effect, className, Dynamic, mergeProps, spread } from 'solid-js/web';
+import { createContext, splitProps, createSignal, createEffect, useContext, Show } 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 _tmpl$ = /* @__PURE__ */ template(`<nav>`);
+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 createComponent(NavbarContext.Provider, {
+    get value() {
+      return {
+        color: local.color ?? "primary",
+        selected,
+        setSelected: (val) => {
+          props.onChange?.(val);
+          setSelected(val);
+        }
+      };
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      insert(_el$, () => local.children);
+      effect(() => className(_el$, navbarClass({
+        color: local.color,
+        spaced: local.spaced,
+        shadow: local.shadow,
+        transparent: local.transparent,
+        fixedTop: local.fixedTop,
+        fixedBottom: local.fixedBottom
+      })));
+      return _el$;
+    }
+  });
+};
+var Navbar_default = Navbar;
+var allowedColors = ["primary", "info", "success", "danger", "warning", "light"];
+var NavbarItem = (props) => {
+  const context = useContext(NavbarContext);
+  const [local, rest] = splitProps(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 createComponent(Dynamic, mergeProps({
+    component: Tag,
+    get href() {
+      return local.href;
+    },
+    onClick: () => context?.setSelected?.(local.label),
+    get ["class"]() {
+      return classes(navbarItemClass({
+        active: isActive(),
+        color: resolveColor(local.color ?? context?.color)
+      }), local.class);
+    }
+  }, rest, {
+    get children() {
+      return local.children;
+    }
+  }));
+};
+var NavbarItem_default = NavbarItem;
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div><div class="cursor-pointer px-4 py-2 rounded hover:bg-white/10">`);
+var NavbarDropdown = (props) => {
+  const [local, rest] = splitProps(props, ["label", "hoverable", "align", "class", "children"]);
+  return (() => {
+    var _el$ = _tmpl$22(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps({
+      get ["class"]() {
+        return classes(navbarDropdownClass({
+          hoverable: local.hoverable
+        }), local.class);
+      }
+    }, rest), false, true);
+    insert(_el$2, () => local.label);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.hoverable;
+      },
+      get children() {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => local.children);
+        effect(() => className(_el$3, dropdownMenuClass({
+          align: local.align
+        })));
+        return _el$3;
+      }
+    }), null);
+    return _el$;
+  })();
+};
+var NavbarDropdown_default = NavbarDropdown;
+
+export { NavbarDropdown_default, NavbarItem_default, Navbar_default };

package/dist/chunk/{YM2NLFQE.jsx → R6COBCN7.jsx}

@@ -42,7 +42,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",

package/dist/components/button/index.js

@@ -1 +1 @@
-export { button_default as default } from '../../chunk/YMO6RPS6.js';
+export { button_default as default } from '../../chunk/NZZRKP74.js';

package/dist/components/button/index.jsx

@@ -1,7 +1,6 @@
 import {
   button_default
-} from "../../chunk/SCJSBRV2.jsx";
-import "../../chunk/YAQK2KFY.jsx";
+} from "../../chunk/GA2HCFRS.jsx";
 import "../../chunk/KACNXPUM.jsx";
 import "../../chunk/P7WPLZNA.jsx";
 export {

package/dist/components/dropdown/index.d.ts

@@ -1,43 +1,27 @@
-import { Component, JSX, ComponentProps } from 'solid-js';
-import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
-
-declare const dropdownVariants: {
-    (props?: (ConfigVariants<{
-        position: {
-            "bottom-left": string;
-            "bottom-right": string;
-            "top-left": string;
-            "top-right": string;
-        };
-        open: {
-            true: string;
-            false: string;
-        };
-    }> & ClassProps) | undefined): string;
-    variantKeys: ("open" | "position")[];
-};
+import { Component, JSX } from 'solid-js';
 
 type DropdownProps = {
-    label?: string | JSX.Element;
-    disabledLabel?: string | JSX.Element;
-    trigger?: "click" | "hover";
     children: JSX.Element;
-    color?: "primary" | "secondary" | "default";
+    hoverable?: boolean;
     disabled?: boolean;
-    className?: string;
-} & VariantProps<typeof dropdownVariants> & ClassProps & ComponentProps<"div">;
+    position?: "left" | "right" | "top-left" | "top-right";
+};
 declare const Dropdown: Component<DropdownProps>;
 
-interface DropdownItemProps {
-    hasLink?: boolean;
+declare const DropdownTrigger: Component<{
     children: JSX.Element;
-}
-declare const DropdownItem: Component<DropdownItemProps>;
+}>;
 
-interface DropdownMenuProps extends VariantProps<typeof dropdownVariants>, // open + position only
-JSX.HTMLAttributes<HTMLDivElement> {
+declare const DropdownMenu: Component<{
     children: JSX.Element;
-}
-declare const DropdownMenu: Component<DropdownMenuProps>;
+}>;
+
+type DropdownItemProps = {
+    children: JSX.Element;
+    onClick?: () => void;
+    value?: string;
+    disabled?: boolean;
+};
+declare const DropdownItem: Component<DropdownItemProps>;
 
-export { Dropdown, DropdownItem, DropdownMenu };
+export { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger };

package/dist/components/dropdown/index.js

@@ -1 +1 @@
-export { Dropdown_default as Dropdown, DropdownItem_default as DropdownItem, DropdownMenu_default as DropdownMenu } from '../../chunk/7ROVLN3J.js';
+export { Dropdown_default as Dropdown, DropdownItem_default as DropdownItem, DropdownMenu_default as DropdownMenu, DropdownTrigger_default as DropdownTrigger } from '../../chunk/3FBDYV4P.js';

package/dist/components/dropdown/index.jsx

@@ -1,12 +1,13 @@
 import {
   DropdownItem_default,
   DropdownMenu_default,
+  DropdownTrigger_default,
   Dropdown_default
-} from "../../chunk/D2BEL4SM.jsx";
-import "../../chunk/YAQK2KFY.jsx";
+} from "../../chunk/OJRG4ZAB.jsx";
 import "../../chunk/P7WPLZNA.jsx";
 export {
   Dropdown_default as Dropdown,
   DropdownItem_default as DropdownItem,
-  DropdownMenu_default as DropdownMenu
+  DropdownMenu_default as DropdownMenu,
+  DropdownTrigger_default as DropdownTrigger
 };

package/dist/components/navbar/index.d.ts

@@ -1,74 +1,36 @@
 import { Component, JSX } from 'solid-js';
-import { C as ConfigVariants, a as ClassProps, V as VariantProps } from '../../classes-B_S9K-9I.js';
-
-declare const navbarStyles: {
-    (props?: (ConfigVariants<{
-        color: {
-            info: string;
-            primary: string;
-            success: string;
-            light: string;
-        };
-    }> & ClassProps) | undefined): string;
-    variantKeys: "color"[];
-};
-declare const navbarItemStyles: {
-    (props?: (ConfigVariants<{
-        active: {
-            true: string;
-            false: string;
-        };
-        tag: {
-            div: string;
-            a: string;
-        };
-    }> & ClassProps) | undefined): string;
-    variantKeys: ("active" | "tag")[];
-};
-declare const navbarDropdownStyles: {
-    (props?: (ConfigVariants<{
-        hoverable: {
-            true: string;
-            false: string;
-        };
-    }> & ClassProps) | undefined): string;
-    variantKeys: "hoverable"[];
-};
-declare const dropdownMenuStyles: {
-    (props?: (ConfigVariants<{
-        align: {
-            left: string;
-            right: string;
-        };
-    }> & ClassProps) | undefined): string;
-    variantKeys: "align"[];
-};
+import { a as ClassProps } from '../../classes-B_S9K-9I.js';
 
 type NavbarProps = {
-    brand?: JSX.Element;
-    start?: JSX.Element;
-    end?: JSX.Element;
-    className?: string;
-} & VariantProps<typeof navbarStyles> & ClassProps & JSX.HTMLAttributes<HTMLElement>;
+    color?: "primary" | "info" | "success" | "danger" | "warning" | "light";
+    modelValue?: string;
+    spaced?: boolean;
+    shadow?: boolean;
+    transparent?: boolean;
+    fixedTop?: boolean;
+    fixedBottom?: boolean;
+    children?: JSX.Element;
+    onChange?: (val: string) => void;
+};
 declare const Navbar: Component<NavbarProps>;
 
+type NavbarColor = "primary" | "info" | "success" | "danger" | "warning" | "light";
 type NavbarItemProps = {
-    active?: boolean;
-    href?: string;
+    label: string;
     tag?: "a" | "div";
-    to?: string;
-    className?: string;
+    href?: string;
     children: JSX.Element;
-} & VariantProps<typeof navbarItemStyles> & ClassProps & Omit<JSX.HTMLAttributes<HTMLElement>, "children">;
+    color?: NavbarColor;
+} & ClassProps;
 declare const NavbarItem: Component<NavbarItemProps>;
 
 type NavbarDropdownProps = {
     label: string;
     hoverable?: boolean;
     align?: "left" | "right";
-    className?: string;
+    class?: string;
     children: JSX.Element;
-} & VariantProps<typeof navbarDropdownStyles> & VariantProps<typeof dropdownMenuStyles> & ClassProps;
+};
 declare const NavbarDropdown: Component<NavbarDropdownProps>;
 
 export { Navbar, NavbarDropdown, NavbarItem };

package/dist/components/navbar/index.js

@@ -1 +1 @@
-export { Navbar_default as Navbar, NavbarDropdown_default as NavbarDropdown, NavbarItem_default as NavbarItem } from '../../chunk/OSJ3P7PI.js';
+export { Navbar_default as Navbar, NavbarDropdown_default as NavbarDropdown, NavbarItem_default as NavbarItem } from '../../chunk/P653OZ5D.js';

package/dist/components/navbar/index.jsx

@@ -2,7 +2,7 @@ import {
   NavbarDropdown_default,
   NavbarItem_default,
   Navbar_default
-} from "../../chunk/BBDVIXAH.jsx";
+} from "../../chunk/55B7Q4NT.jsx";
 import "../../chunk/P7WPLZNA.jsx";
 export {
   Navbar_default as Navbar,

package/dist/components/switch/index.js

@@ -1 +1 @@
-export { switch_default as default } from '../../chunk/6B7HOWQD.js';
+export { switch_default as default } from '../../chunk/EE4HXMKA.js';

package/dist/components/switch/index.jsx

@@ -1,6 +1,6 @@
 import {
   switch_default
-} from "../../chunk/5R7S7TXL.jsx";
+} from "../../chunk/GWFGP2JQ.jsx";
 import "../../chunk/P7WPLZNA.jsx";
 export {
   switch_default as default

package/dist/components/tooltip/index.js

@@ -1 +1 @@
-export { tooltip_default as default } from '../../chunk/5KABSQPM.js';
+export { tooltip_default as default } from '../../chunk/OYAKKETQ.js';

package/dist/components/tooltip/index.jsx

@@ -1,6 +1,6 @@
 import {
   tooltip_default
-} from "../../chunk/YM2NLFQE.jsx";
+} from "../../chunk/R6COBCN7.jsx";
 import "../../chunk/P7WPLZNA.jsx";
 export {
   tooltip_default as default

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { S as Switch } from './Switch-CW6QtO1Y.js';
 export { C as Checkbox } from './Checkbox-CzeDsQLA.js';
 export { Breadcrumb, BreadcrumbItem } from './components/breadcrumb/index.js';
 export { A as Autocomplete } from './Autocomplete-gLkjMHrc.js';
-export { Dropdown, DropdownItem, DropdownMenu } from './components/dropdown/index.js';
+export { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from './components/dropdown/index.js';
 export { F as Field } from './Field-DfUn85_1.js';
 export { Menu, MenuItem, MenuList } from './components/menu/index.js';
 export { Navbar, NavbarDropdown, NavbarItem } from './components/navbar/index.js';

package/dist/index.js

@@ -1,25 +1,25 @@
 export { Toaster_default as Toaster, toast_default as toast } from './chunk/JWRGKHDO.js';
-export { tooltip_default as Tooltip } from './chunk/5KABSQPM.js';
+export { tooltip_default as Tooltip } from './chunk/OYAKKETQ.js';
 export { upload_default as Upload } from './chunk/YDEDUOFM.js';
 export { select_default as Select } from './chunk/OMRJVDZV.js';
-export { switch_default as Switch } from './chunk/6B7HOWQD.js';
 export { steps_default as Steps } from './chunk/TT2JYGLU.js';
+export { switch_default as Switch } from './chunk/EE4HXMKA.js';
 export { table_default as Table } from './chunk/QYEMOKUG.js';
 export { tabs_default as Tabs } from './chunk/WOT36Q7O.js';
 export { tag_default as Tag } from './chunk/CJZGTNJZ.js';
 export { textarea_default as Textarea } from './chunk/EB7KXR65.js';
 export { timeline_default as Timeline } from './chunk/WUZETUQR.js';
-export { Dropdown_default as Dropdown, DropdownItem_default as DropdownItem, DropdownMenu_default as DropdownMenu } from './chunk/7ROVLN3J.js';
+export { Dropdown_default as Dropdown, DropdownItem_default as DropdownItem, DropdownMenu_default as DropdownMenu, DropdownTrigger_default as DropdownTrigger } from './chunk/3FBDYV4P.js';
 export { field_default as Field } from './chunk/MAX47D6F.js';
 export { input_default as Input } from './chunk/O2IMHWMY.js';
 export { Menu_default as Menu, MenuItem_default as MenuItem, MenuList_default as MenuList } from './chunk/3VOILEMN.js';
+export { Navbar_default as Navbar, NavbarDropdown_default as NavbarDropdown, NavbarItem_default as NavbarItem } from './chunk/P653OZ5D.js';
 export { pagination_default as Pagination } from './chunk/DBQ7IOPU.js';
-export { Navbar_default as Navbar, NavbarDropdown_default as NavbarDropdown, NavbarItem_default as NavbarItem } from './chunk/OSJ3P7PI.js';
 export { progress_default as Progress } from './chunk/GMIXRYN3.js';
 export { accordion_default as Accordion } from './chunk/NZKPDBTE.js';
 export { autocomplete_default as Autocomplete } from './chunk/MYERRMTM.js';
 export { avatar_default as Avatar } from './chunk/MI773TMC.js';
 export { Breadcrumb_default as Breadcrumb, BreadcrumbItem_default as BreadcrumbItem } from './chunk/V6Y5E7BL.js';
-export { button_default as Button } from './chunk/YMO6RPS6.js';
+export { button_default as Button } from './chunk/NZZRKP74.js';
 export { Polymorphic_default as Polymorphic, PolymorphicButton_default as PolymorphicButton } from './chunk/G6RG4LR7.js';
 export { checkbox_default as Checkbox } from './chunk/WYHYWDOM.js';

package/dist/index.jsx

@@ -4,19 +4,19 @@ import {
 } from "./chunk/FKSQPGOD.jsx";
 import {
   tooltip_default
-} from "./chunk/YM2NLFQE.jsx";
+} from "./chunk/R6COBCN7.jsx";
 import {
   upload_default
 } from "./chunk/QHJOIUYT.jsx";
-import {
-  steps_default
-} from "./chunk/LAQPAV5I.jsx";
 import {
   select_default
 } from "./chunk/F33TSIEQ.jsx";
+import {
+  steps_default
+} from "./chunk/LAQPAV5I.jsx";
 import {
   switch_default
-} from "./chunk/5R7S7TXL.jsx";
+} from "./chunk/GWFGP2JQ.jsx";
 import {
   table_default
 } from "./chunk/HWAGW5N4.jsx";
@@ -35,8 +35,9 @@ import {
 import {
   DropdownItem_default,
   DropdownMenu_default,
+  DropdownTrigger_default,
   Dropdown_default
-} from "./chunk/D2BEL4SM.jsx";
+} from "./chunk/OJRG4ZAB.jsx";
 import {
   field_default
 } from "./chunk/VN5BKHA2.jsx";
@@ -48,34 +49,33 @@ import {
   MenuList_default,
   Menu_default
 } from "./chunk/XD34JKSU.jsx";
+import {
+  pagination_default
+} from "./chunk/ELRAUORW.jsx";
 import {
   NavbarDropdown_default,
   NavbarItem_default,
   Navbar_default
-} from "./chunk/BBDVIXAH.jsx";
-import {
-  pagination_default
-} from "./chunk/ELRAUORW.jsx";
+} from "./chunk/55B7Q4NT.jsx";
 import {
   progress_default
 } from "./chunk/STKRVQR6.jsx";
 import {
   accordion_default
 } from "./chunk/QONDPQ2I.jsx";
-import {
-  autocomplete_default
-} from "./chunk/C4YO33NN.jsx";
 import {
   avatar_default
 } from "./chunk/C4745OZS.jsx";
+import {
+  autocomplete_default
+} from "./chunk/C4YO33NN.jsx";
 import {
   BreadcrumbItem_default,
   Breadcrumb_default
 } from "./chunk/MMTAND25.jsx";
 import {
   button_default
-} from "./chunk/SCJSBRV2.jsx";
-import "./chunk/YAQK2KFY.jsx";
+} from "./chunk/GA2HCFRS.jsx";
 import {
   PolymorphicButton_default,
   Polymorphic_default
@@ -95,6 +95,7 @@ export {
   Dropdown_default as Dropdown,
   DropdownItem_default as DropdownItem,
   DropdownMenu_default as DropdownMenu,
+  DropdownTrigger_default as DropdownTrigger,
   field_default as Field,
   input_default as Input,
   Menu_default as Menu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "author": "pathscale",
   "repository": {
     "type": "git",