@pathscale/ui 0.0.20 → 0.0.22

package/dist/index.js

@@ -1,5 +1,19 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+function r(e) {
+    var t, f, n = "";
+    if ("string" == typeof e || "number" == typeof e) n += e;
+    else if ("object" == typeof e) if (Array.isArray(e)) {
+        var o = e.length;
+        for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else for(f in e)e[f] && (n && (n += " "), n += f);
+    return n;
+}
+function clsx_clsx() {
+    for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+    return n;
+}
+const dist_clsx = clsx_clsx;
 const CLASS_PART_SEPARATOR = '-';
 const createClassGroupUtils = (config)=>{
     const classMap = createClassMap(config);
@@ -3399,25 +3413,288 @@ const getDefaultConfig = ()=>{
     };
 };
 const bundle_mjs_twMerge = /*#__PURE__*/ createTailwindMerge(getDefaultConfig);
-function r(e) {
-    var t, f, n = "";
-    if ("string" == typeof e || "number" == typeof e) n += e;
-    else if ("object" == typeof e) if (Array.isArray(e)) {
-        var o = e.length;
-        for(t = 0; t < o; t++)e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-    } else for(f in e)e[f] && (n && (n += " "), n += f);
-    return n;
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Background = (props)=>{
+    const { class: className, className: classNameAlt, ...rest } = props;
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return bundle_mjs_twMerge("bg-base-200 min-h-screen", dist_clsx(className, classNameAlt));
+            }
+        }, rest), false, false);
+        return _el$;
+    })();
+};
+const background_Background = Background;
+const directionMap = {
+    row: "flex-row",
+    col: "flex-col",
+    "row-reverse": "flex-row-reverse",
+    "col-reverse": "flex-col-reverse"
+};
+const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+};
+const alignMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+};
+const wrapMap = {
+    wrap: "flex-wrap",
+    nowrap: "flex-nowrap",
+    "wrap-reverse": "flex-wrap-reverse"
+};
+const gapMap = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+};
+const gapXMap = {
+    none: "gap-x-0",
+    sm: "gap-x-2",
+    md: "gap-x-4",
+    lg: "gap-x-6",
+    xl: "gap-x-8"
+};
+const gapYMap = {
+    none: "gap-y-0",
+    sm: "gap-y-2",
+    md: "gap-y-4",
+    lg: "gap-y-6",
+    xl: "gap-y-8"
+};
+const growMap = {
+    true: "flex-grow",
+    false: "flex-grow-0"
+};
+const shrinkMap = {
+    true: "flex-shrink",
+    false: "flex-shrink-0"
+};
+const basisMap = {
+    none: "basis-0",
+    sm: "basis-8",
+    md: "basis-16",
+    lg: "basis-24",
+    xl: "basis-32"
+};
+const breakpoints = [
+    "base",
+    "sm",
+    "md",
+    "lg",
+    "xl"
+];
+function mapResponsiveProp(prop, map) {
+    if (void 0 === prop) return [];
+    if ("string" == typeof prop || "boolean" == typeof prop) return [
+        map[String(prop)]
+    ];
+    return breakpoints.flatMap((bp)=>{
+        const value = prop[bp];
+        if (void 0 === value) return [];
+        const className = map[String(value)];
+        return "base" === bp ? className : `${bp}:${className}`;
+    });
 }
-function clsx_clsx() {
-    for(var e, t, f = 0, n = "", o = arguments.length; f < o; f++)(e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-    return n;
+const Flex = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "as",
+        "class",
+        "children",
+        "direction",
+        "justify",
+        "align",
+        "wrap",
+        "gap",
+        "gapX",
+        "gapY",
+        "grow",
+        "shrink",
+        "basis"
+    ]);
+    const tag = local.as || "div";
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = dist_clsx("flex", mapResponsiveProp(local.direction, directionMap), mapResponsiveProp(local.justify, justifyMap), mapResponsiveProp(local.align, alignMap), mapResponsiveProp(local.wrap, wrapMap), mapResponsiveProp(local.gap, gapMap), mapResponsiveProp(local.gapX, gapXMap), mapResponsiveProp(local.gapY, gapYMap), mapResponsiveProp(local.grow, growMap), mapResponsiveProp(local.shrink, shrinkMap), mapResponsiveProp(local.basis, basisMap), local.class);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: tag,
+        get ["class"] () {
+            return bundle_mjs_twMerge(classes);
+        }
+    }, rest, {
+        get children () {
+            return resolvedChildren();
+        }
+    }));
+};
+const flex_Flex = Flex;
+const colsMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    11: "grid-cols-11",
+    12: "grid-cols-12"
+};
+const rowsMap = {
+    1: "grid-rows-1",
+    2: "grid-rows-2",
+    3: "grid-rows-3",
+    4: "grid-rows-4",
+    5: "grid-rows-5",
+    6: "grid-rows-6",
+    7: "grid-rows-7",
+    8: "grid-rows-8",
+    9: "grid-rows-9",
+    10: "grid-rows-10",
+    11: "grid-rows-11",
+    12: "grid-rows-12"
+};
+const flowMap = {
+    row: "grid-flow-row",
+    col: "grid-flow-col",
+    "row-dense": "grid-flow-row-dense",
+    "col-dense": "grid-flow-col-dense"
+};
+const Grid_gapMap = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+};
+const autoColsMap = {
+    min: "auto-cols-min",
+    max: "auto-cols-max",
+    fr: "auto-cols-fr"
+};
+const autoRowsMap = {
+    min: "auto-rows-min",
+    max: "auto-rows-max",
+    fr: "auto-rows-fr"
+};
+function Grid_mapResponsiveProp(prop, classMap) {
+    if (!prop) return [];
+    if ("string" == typeof prop) return classMap[prop] ? [
+        classMap[prop]
+    ] : [];
+    return Object.entries(prop).flatMap(([key, val])=>{
+        const className = classMap[val];
+        if (!className) return [];
+        return "base" === key ? className : `${key}:${className}`;
+    });
 }
-const dist_clsx = clsx_clsx;
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<summary>");
+const Grid = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        as: "div"
+    }, props);
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "as",
+        "class",
+        "className",
+        "cols",
+        "rows",
+        "flow",
+        "gap",
+        "autoCols",
+        "autoRows"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>bundle_mjs_twMerge("grid", ...Grid_mapResponsiveProp(local.cols, colsMap), ...Grid_mapResponsiveProp(local.rows, rowsMap), ...Grid_mapResponsiveProp(local.flow, flowMap), ...Grid_mapResponsiveProp(local.gap, Grid_gapMap), ...Grid_mapResponsiveProp(local.autoCols, autoColsMap), ...Grid_mapResponsiveProp(local.autoRows, autoRowsMap), local.class, local.className));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return local.as;
+        },
+        get ["class"] () {
+            return classes();
+        }
+    }, rest));
+};
+const grid_Grid = Grid;
+const Sidenav = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "position",
+        "width"
+    ]);
+    const classes = bundle_mjs_twMerge("sticky top-0 h-screen border-base-300 p-4", dist_clsx([
+        "right" === local.position ? "border-l" : "border-r",
+        "right" === local.position ? "order-last" : "order-first"
+    ]), local.width ?? "w-48", local.class);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(flex_Flex, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        direction: "col",
+        as: "aside",
+        class: classes
+    }, rest, {
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const Sidebar = Sidenav;
+var SidebarItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=text-lg>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button><span>");
+const NavItem = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "icon",
+        "active",
+        "disabled",
+        "children",
+        "class",
+        "onClick"
+    ]);
+    const classes = bundle_mjs_twMerge("flex items-center gap-3 px-3 py-2 rounded-md transition-colors", dist_clsx({
+        "bg-base-300 text-base-content font-medium": local.active,
+        "text-base-content hover:bg-base-200": !local.active && !local.disabled,
+        "opacity-50 pointer-events-none cursor-not-allowed": local.disabled
+    }), local.class);
+    return (()=>{
+        var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, classes);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get onClick () {
+                return local.onClick;
+            },
+            get disabled () {
+                return local.disabled;
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.icon;
+            },
+            get children () {
+                var _el$2 = SidebarItem_tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.icon);
+                return _el$2;
+            }
+        }), _el$3);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$;
+    })();
+};
+const SidebarItem = NavItem;
+var CollapseTitle_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), CollapseTitle_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<summary>");
 const classesFn = ({ className })=>bundle_mjs_twMerge("collapse-title", className);
 function CollapseTitle(props) {
     return (()=>{
-        var _el$ = _tmpl$();
+        var _el$ = CollapseTitle_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
             get ["class"] () {
                 return classesFn({
@@ -3430,7 +3707,7 @@ function CollapseTitle(props) {
 }
 function Summary(props) {
     return (()=>{
-        var _el$2 = _tmpl$2();
+        var _el$2 = CollapseTitle_tmpl$2();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
             get ["class"] () {
                 return classesFn({
@@ -5376,7 +5653,7 @@ const Indicator = (props)=>{
     }));
 };
 const indicator_Indicator = Indicator;
-var Input_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input>");
+var Input_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), Input_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input>");
 const Input = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "size",
@@ -5386,8 +5663,14 @@ const Input = (props)=>{
         "className",
         "style",
         "leftIcon",
-        "rightIcon"
+        "rightIcon",
+        "type"
     ]);
+    const [passwordVisible, setPasswordVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const inputType = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if ("password" === local.type) return passwordVisible() ? "text" : "password";
+        return local.type;
+    });
     const classes = ()=>bundle_mjs_twMerge("input", local.class, local.className, clsx_clsx({
             "input-xl": "xl" === local.size,
             "input-lg": "lg" === local.size,
@@ -5404,7 +5687,7 @@ const Input = (props)=>{
             "input-error": "error" === local.color
         }));
     return (()=>{
-        var _el$ = Input_tmpl$(), _el$2 = _el$.firstChild;
+        var _el$ = Input_tmpl$2(), _el$2 = _el$.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return local.leftIcon;
@@ -5413,13 +5696,21 @@ const Input = (props)=>{
                 return local.leftIcon;
             }
         }), _el$2);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, others, false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get type () {
+                return inputType();
+            }
+        }), false, false);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return local.rightIcon;
             },
             get children () {
-                return local.rightIcon;
+                var _el$3 = Input_tmpl$();
+                _el$3.$$click = ()=>setPasswordVisible(!passwordVisible());
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.rightIcon);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, "password" === local.type ? "cursor-pointer" : ""));
+                return _el$3;
             }
         }), null);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
@@ -5437,6 +5728,9 @@ const Input = (props)=>{
     })();
 };
 const input_Input = Input;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
 var Join_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Join = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -6474,6 +6768,176 @@ const ShowcaseBlock = (props)=>{
     })();
 };
 const showcase_ShowcaseBlock = ShowcaseBlock;
+var Sidenav_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=sidenav-item-label>"), Sidenav_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a class=sidenav-item-link>"), Sidenav_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>"), Sidenav_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button class=sidenav-item-button>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=sidenav-group>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=sidenav-group-label>"), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=sidenav-group><ul class=sidenav-group-items>"), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=sidenav-header><h2 class=sidenav-title>"), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul class=sidenav-menu>"), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=sidenav-children>"), _tmpl$1 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div class=sidenav-footer>"), _tmpl$10 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<nav><div class=sidenav-content>");
+const Sidenav_Sidenav = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "title",
+        "items",
+        "isOpen",
+        "onClose",
+        "collapsed",
+        "children",
+        "footer",
+        "class"
+    ]);
+    const handleItemClick = (item)=>{
+        if (item.onClick) item.onClick();
+    };
+    const sidenavClasses = ()=>bundle_mjs_twMerge("sidenav", local.class, clsx_clsx({
+            "sidenav-collapsed": local.collapsed,
+            "sidenav-closed": !local.isOpen
+        }));
+    const renderItem = (item)=>(()=>{
+            var _el$ = Sidenav_tmpl$3();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return item.href;
+                },
+                get fallback () {
+                    return (()=>{
+                        var _el$4 = Sidenav_tmpl$4();
+                        _el$4.$$click = ()=>handleItemClick(item);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>item.icon, null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return !local.collapsed;
+                            },
+                            get children () {
+                                var _el$5 = Sidenav_tmpl$();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>item.label);
+                                return _el$5;
+                            }
+                        }), null);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "title", local.collapsed ? item.label : void 0));
+                        return _el$4;
+                    })();
+                },
+                get children () {
+                    var _el$2 = Sidenav_tmpl$2();
+                    _el$2.$$click = ()=>handleItemClick(item);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>item.icon, null);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        get when () {
+                            return !local.collapsed;
+                        },
+                        get children () {
+                            var _el$3 = Sidenav_tmpl$();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>item.label);
+                            return _el$3;
+                        }
+                    }), null);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                        var _v$ = item.href, _v$2 = local.collapsed ? item.label : void 0;
+                        _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "href", _p$.e = _v$);
+                        _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "title", _p$.t = _v$2);
+                        return _p$;
+                    }, {
+                        e: void 0,
+                        t: void 0
+                    });
+                    return _el$2;
+                }
+            }));
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, clsx_clsx("sidenav-item", {
+                    "sidenav-item-active": item.active
+                })));
+            return _el$;
+        })();
+    const renderGroup = (group)=>{
+        if (local.collapsed) return (()=>{
+            var _el$6 = _tmpl$5();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                get each () {
+                    return group.items;
+                },
+                children: (groupItem)=>renderItem(groupItem)
+            }));
+            return _el$6;
+        })();
+        return (()=>{
+            var _el$7 = _tmpl$7(), _el$9 = _el$7.firstChild;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return group.label;
+                },
+                get children () {
+                    var _el$8 = _tmpl$6();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>group.label);
+                    return _el$8;
+                }
+            }), _el$9);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                get each () {
+                    return group.items;
+                },
+                children: (groupItem)=>renderItem(groupItem)
+            }));
+            return _el$7;
+        })();
+    };
+    return (()=>{
+        var _el$0 = _tmpl$10(), _el$11 = _el$0.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return sidenavClasses();
+            }
+        }, others), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.title && !local.collapsed;
+            },
+            get children () {
+                var _el$1 = _tmpl$8(), _el$10 = _el$1.firstChild;
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.title);
+                return _el$1;
+            }
+        }), _el$11);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.items && local.items.length > 0;
+            },
+            get children () {
+                var _el$12 = _tmpl$9();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    get each () {
+                        return local.items;
+                    },
+                    children: (item)=>{
+                        const isGroup = "items" in item;
+                        if (!isGroup) return renderItem(item);
+                        return renderGroup(item);
+                    }
+                }));
+                return _el$12;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.children && !local.collapsed;
+            },
+            get children () {
+                var _el$13 = _tmpl$0();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, ()=>local.children);
+                return _el$13;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.footer;
+            },
+            get children () {
+                var _el$14 = _tmpl$1();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$14, ()=>local.footer);
+                return _el$14;
+            }
+        }), null);
+        return _el$0;
+    })();
+};
+const sidenav_Sidenav = Sidenav_Sidenav;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
 var Skeleton_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Skeleton = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -7350,7 +7814,8 @@ const Textarea = (props)=>{
         "dataTheme",
         "class",
         "className",
-        "style"
+        "style",
+        "resize"
     ]);
     const classes = ()=>bundle_mjs_twMerge("textarea", local.class, local.className, clsx_clsx({
             "textarea-xl": "xl" === local.size,
@@ -7365,7 +7830,11 @@ const Textarea = (props)=>{
             "textarea-info": "info" === local.color,
             "textarea-success": "success" === local.color,
             "textarea-warning": "warning" === local.color,
-            "textarea-error": "error" === local.color
+            "textarea-error": "error" === local.color,
+            "resize-y": "y" === local.resize,
+            "resize-x": "x" === local.resize,
+            "resize-none": "none" === local.resize,
+            "resize-both": "both" === local.resize
         }));
     return (()=>{
         var _el$ = Textarea_tmpl$();
@@ -7671,4 +8140,4 @@ const Tooltip = (props)=>{
     })();
 };
 const tooltip_Tooltip = Tooltip;
-export { accordion_Accordion as Accordion, alert_Alert as Alert, autocomplete as Autocomplete, avatar as Avatar, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, button_Button as Button, card_Card as Card, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, dropdown as Dropdown, field as Field, FileInput, indicator_Indicator as Indicator, input_Input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, polymorphic_Polymorphic as Polymorphic, polymorphic_PolymorphicButton as PolymorphicButton, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, steps as Steps, Summary, Swap, table as Table, tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, autocomplete as Autocomplete, avatar as Avatar, background_Background as Background, Badge, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, button_Button as Button, card_Card as Card, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, copy_button_CopyButton as CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, dropdown as Dropdown, field as Field, FileInput, flex_Flex as Flex, grid_Grid as Grid, indicator_Indicator as Indicator, input_Input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal as Modal, navbar_Navbar as Navbar, pagination_Pagination as Pagination, polymorphic_Polymorphic as Polymorphic, polymorphic_PolymorphicButton as PolymorphicButton, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, Sidebar, SidebarItem, sidenav_Sidenav as Sidenav, skeleton_Skeleton as Skeleton, Stack, stats_Stats as Stats, steps as Steps, Summary, Swap, table as Table, tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip };

package/package.json

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