@pathscale/ui 0.0.18 → 0.0.20

package/dist/index.css

@@ -0,0 +1,34 @@
+.showcase-block {
+  gap: 1rem;
+
+  @apply flex flex-col;
+}
+
+.showcase-block__container {
+  border-radius: .5rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
+
+  @apply bg-[oklch(var(--color-base-200)) ];
+}
+
+.showcase-block__title {
+  color: oklch(var(--color-base-content));
+  margin-bottom: .5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+}
+
+.showcase-block__description {
+  color: oklch(var(--color-base-content) / .7);
+  margin-bottom: 1rem;
+}
+
+.showcase-block__content--preview {
+  border-radius: .5rem;
+  padding: 2rem;
+
+  @apply border bg-[oklch(var(--color-base-100)) ] border-[oklch(var(--color-base-content) / .15) ];
+}
+

package/dist/index.js

@@ -4494,6 +4494,81 @@ const Checkbox = (props)=>{
     })();
 };
 const checkbox_Checkbox = Checkbox;
+var CodeMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const CodeMockup = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        class: "",
+        "aria-label": "Code mockup"
+    }, props);
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "class",
+        "children",
+        "dataTheme"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    return (()=>{
+        var _el$ = CodeMockup_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("mockup-code w-full", local.class);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const codemockup_CodeMockup = CodeMockup;
+var CodeMockupLine_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<pre><code>");
+const CodeMockupLine_CodeMockupLine = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        dataPrefix: ">",
+        status: null,
+        class: ""
+    }, props);
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "dataPrefix",
+        "status",
+        "innerProps",
+        "innerRef",
+        "class",
+        "children",
+        "dataTheme"
+    ]);
+    const statusClass = ()=>bundle_mjs_twMerge(dist_clsx({
+            "bg-info": "info" === local.status,
+            "bg-success": "success" === local.status,
+            "bg-warning": "warning" === local.status,
+            "bg-error": "error" === local.status,
+            "text-info-content": "info" === local.status,
+            "text-success-content": "success" === local.status,
+            "text-warning-content": "warning" === local.status,
+            "text-error-content": "error" === local.status
+        }), local.class);
+    const prefix = ()=>false !== local.dataPrefix ? local.dataPrefix || ">" : void 0;
+    return (()=>{
+        var _el$ = CodeMockupLine_tmpl$(), _el$2 = _el$.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get ["class"] () {
+                return statusClass();
+            },
+            get ["data-prefix"] () {
+                return prefix();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, rest), false, true);
+        var _ref$ = local.innerRef;
+        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$2) : local.innerRef = _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>local.innerProps), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$;
+    })();
+};
+const CodeMockupLine = CodeMockupLine_CodeMockupLine;
 var CollapseDetails_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<details>");
 function CollapseDetails_classesFn({ className, icon, open }) {
     return bundle_mjs_twMerge("collapse", className, clsx_clsx({
@@ -4770,7 +4845,7 @@ const dividerStyles = cva("flex items-center whitespace-nowrap relative", {
         position: "center"
     }
 });
-const Divider = (props)=>{
+const Divider_Divider = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
         "text",
@@ -4805,17 +4880,17 @@ const Divider = (props)=>{
         children: content
     }));
 };
-const divider_Divider = Divider;
-const divider = divider_Divider;
+const Divider = Divider_Divider;
+const divider = Divider;
 var DockItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
 const DockItem_DockItem = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
+        "active",
         "class",
         "className",
         "color",
         "dataTheme",
-        "active",
         "disabled"
     ]);
     const classes = bundle_mjs_twMerge(local.class, local.className, dist_clsx({
@@ -4827,19 +4902,20 @@ const DockItem_DockItem = (props)=>{
         "text-success": "success" === local.color,
         "text-warning": "warning" === local.color,
         "text-error": "error" === local.color,
+        "border-t-2 rounded-none": local.active,
         active: local.active,
         disabled: local.disabled
     }));
     return (()=>{
         var _el$ = DockItem_tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
             get ["data-theme"] () {
                 return local.dataTheme;
             },
             get disabled () {
                 return local.disabled;
-            }
+            },
+            class: classes
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
         return _el$;
@@ -5300,7 +5376,7 @@ const Indicator = (props)=>{
     }));
 };
 const indicator_Indicator = Indicator;
-var Input_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
+var Input_tmpl$ = /*#__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",
@@ -5308,7 +5384,9 @@ const Input = (props)=>{
         "dataTheme",
         "class",
         "className",
-        "style"
+        "style",
+        "leftIcon",
+        "rightIcon"
     ]);
     const classes = ()=>bundle_mjs_twMerge("input", local.class, local.className, clsx_clsx({
             "input-xl": "xl" === local.size,
@@ -5326,18 +5404,35 @@ const Input = (props)=>{
             "input-error": "error" === local.color
         }));
     return (()=>{
-        var _el$ = Input_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
+        var _el$ = Input_tmpl$(), _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;
             },
-            get ["class"] () {
-                return classes();
+            get children () {
+                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__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.rightIcon;
             },
-            get style () {
-                return local.style;
+            get children () {
+                return local.rightIcon;
             }
-        }), false, false);
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = classes(), _v$2 = local.style, _v$3 = local.dataTheme;
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$2, _p$.t);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.a = _v$3);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+        });
         return _el$;
     })();
 };
@@ -5971,46 +6066,58 @@ const Progress_Progress = (props)=>{
     })();
 };
 const Progress = Progress_Progress;
-var Radio_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
-const Radio = (props)=>{
-    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+var PropsTable_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><table class="w-full text-left border-collapse"><thead><tr class="border-b border-base-content/15"><th class="py-2 px-3 text-sm font-semibold text-base-content">Prop</th><th class="py-2 px-3 text-sm font-semibold text-base-content">Type</th><th class="py-2 px-3 text-sm font-semibold text-base-content">Default</th><th class="py-2 px-3 text-sm font-semibold text-base-content">Description</th></tr></thead><tbody>'), PropsTable_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=text-error>*"), PropsTable_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<code class="text-sm font-mono text-base-content/70">'), PropsTable_tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<tr class="border-b border-base-content/15 hover:bg-base-200/25"><td class="py-2 px-3 align-top"><code class="text-sm font-mono font-medium text-base-content"></code></td><td class="py-2 px-3 align-top"><code class="text-sm font-mono text-primary"></code></td><td class="py-2 px-3 align-top"></td><td class="py-2 px-3 text-sm text-base-content/70 align-top">');
+const PropsTable = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "props",
         "class",
-        "color",
-        "size",
-        "name",
-        "type",
-        "data-theme"
+        "className",
+        "dataTheme"
     ]);
-    const classes = bundle_mjs_twMerge("radio", local.class, dist_clsx({
-        "radio-xs": "xs" === local.size,
-        "radio-sm": "sm" === local.size,
-        "radio-md": "md" === local.size,
-        "radio-lg": "lg" === local.size,
-        "radio-xl": "xl" === local.size,
-        "radio-primary": "primary" === local.color,
-        "radio-secondary": "secondary" === local.color,
-        "radio-accent": "accent" === local.color,
-        "radio-info": "info" === local.color,
-        "radio-success": "success" === local.color,
-        "radio-warning": "warning" === local.color,
-        "radio-error": "error" === local.color
-    }));
     return (()=>{
-        var _el$ = Radio_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
-            get name () {
-                return local.name;
-            },
-            type: "radio",
-            class: classes,
+        var _el$ = PropsTable_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
-                return local["data-theme"];
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return bundle_mjs_twMerge("overflow-x-auto", local.class, local.className);
             }
-        }), false, false);
+        }), false, true);
+        (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__.For, {
+            get each () {
+                return local.props;
+            },
+            children: (prop)=>(()=>{
+                    var _el$5 = PropsTable_tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$9.nextSibling, _el$11 = _el$1.nextSibling;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>prop.name, null);
+                    (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 prop.required;
+                        },
+                        get children () {
+                            return PropsTable_tmpl$2();
+                        }
+                    }), null);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>prop.type);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                        get when () {
+                            return prop.default;
+                        },
+                        get children () {
+                            var _el$10 = PropsTable_tmpl$3();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>prop.default);
+                            return _el$10;
+                        }
+                    }));
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>prop.description);
+                    return _el$5;
+                })()
+        }));
         return _el$;
     })();
 };
-const radio_Radio = Radio;
+const props_table_PropsTable = PropsTable;
 var RadialProgress_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=progressbar aria-valuemin=0 aria-valuemax=100>");
 const RadialProgress = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -6053,6 +6160,46 @@ const RadialProgress = (props)=>{
     })();
 };
 const radialprogress_RadialProgress = RadialProgress;
+var Radio_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
+const Radio = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "color",
+        "size",
+        "name",
+        "type",
+        "data-theme"
+    ]);
+    const classes = bundle_mjs_twMerge("radio", local.class, dist_clsx({
+        "radio-xs": "xs" === local.size,
+        "radio-sm": "sm" === local.size,
+        "radio-md": "md" === local.size,
+        "radio-lg": "lg" === local.size,
+        "radio-xl": "xl" === local.size,
+        "radio-primary": "primary" === local.color,
+        "radio-secondary": "secondary" === local.color,
+        "radio-accent": "accent" === local.color,
+        "radio-info": "info" === local.color,
+        "radio-success": "success" === local.color,
+        "radio-warning": "warning" === local.color,
+        "radio-error": "error" === local.color
+    }));
+    return (()=>{
+        var _el$ = Radio_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get name () {
+                return local.name;
+            },
+            type: "radio",
+            class: classes,
+            get ["data-theme"] () {
+                return local["data-theme"];
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const radio_Radio = Radio;
 var Range_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>"), Range_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="relative mt-2 h-4 w-full max-w-xs"><div class="absolute inset-0 flex items-center justify-between px-2">'), Range_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="absolute text-xs">|');
 const Range = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -6245,6 +6392,88 @@ const Select = (props)=>{
     })();
 };
 const select_Select = Select;
+var ShowcaseSection_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex items-center justify-between gap-2 mb-2"><h2 class="text-xl font-semibold group/title"><a class="text-inherit hover:text-base-content flex items-center gap-2"><span class="opacity-0 group-hover/title:opacity-100 text-base-content/70 transition-opacity">#</span></a></h2></div><div class=space-y-3>');
+const ShowcaseSection = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
+        "title",
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const getSectionUrl = ()=>{
+        const url = new URL(window.location.href);
+        url.hash = local.id;
+        return url.toString();
+    };
+    return (()=>{
+        var _el$ = ShowcaseSection_tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+            get id () {
+                return local.id;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }, others, {
+            get ["class"] () {
+                return bundle_mjs_twMerge("p-3 bg-base-200 rounded-lg shadow-sm scroll-mt-6", local.class, local.className);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.title, _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(copy_button_CopyButton, {
+            get text () {
+                return getSectionUrl();
+            },
+            title: "Copy link to section",
+            class: "opacity-0 group-hover:opacity-100 focus:opacity-100"
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "href", `#${local.id}`));
+        return _el$;
+    })();
+};
+const showcase_section_ShowcaseSection = ShowcaseSection;
+var ShowcaseBlock_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p class=showcase-block__description>"), ShowcaseBlock_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div class=showcase-block__container><h3 class=showcase-block__title></h3><div>");
+const ShowcaseBlock = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "title",
+        "description",
+        "code",
+        "preview",
+        "children",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    return (()=>{
+        var _el$ = ShowcaseBlock_tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return bundle_mjs_twMerge("showcase-block", local.class, local.className);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.title);
+        (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.description;
+            },
+            get children () {
+                var _el$4 = ShowcaseBlock_tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.description);
+                return _el$4;
+            }
+        }), _el$5);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, local.preview ? "showcase-block__content showcase-block__content--preview" : "showcase-block__content"));
+        return _el$;
+    })();
+};
+const showcase_ShowcaseBlock = ShowcaseBlock;
 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, [
@@ -7442,174 +7671,4 @@ const Tooltip = (props)=>{
     })();
 };
 const tooltip_Tooltip = Tooltip;
-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;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
-]);
-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, 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, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, 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 };
+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 };

package/dist/showcase/ShowcaseBlock.css

@@ -0,0 +1,30 @@
+.showcase-block {
+	@apply flex flex-col;
+	gap: 1rem;
+}
+
+.showcase-block__container {
+	@apply bg-[oklch(var(--color-base-200))];
+	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+	padding: 1.5rem;
+	border-radius: 0.5rem;
+}
+
+.showcase-block__title {
+	font-size: 1.25rem;
+	line-height: 1.75rem;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: oklch(var(--color-base-content));
+}
+
+.showcase-block__description {
+	color: oklch(var(--color-base-content) / 0.7);
+	margin-bottom: 1rem;
+}
+
+.showcase-block__content--preview {
+	@apply border bg-[oklch(var(--color-base-100))] border-[oklch(var(--color-base-content)/0.15)];
+	padding: 2rem;
+	border-radius: 0.5rem;
+}

package/dist/showcase/ShowcaseBlockShowcase.css

@@ -0,0 +1,29 @@
+.showcase-demo {
+	display: flex;
+	flex-direction: column;
+	gap: 3rem;
+	padding: 2rem;
+}
+
+.showcase-demo__section-title {
+	font-size: 1.25rem;
+	line-height: 1.75rem;
+	font-weight: 600;
+	border-bottom: 1px solid;
+	border-color: oklch(var(--color-base-content) / 0.2);
+	padding-bottom: 0.5rem;
+	margin-bottom: 1rem;
+	color: oklch(var(--color-base-content));
+}
+
+.showcase-demo__preview-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 1rem;
+}
+
+.showcase-demo__custom-showcase {
+	padding: 0.5rem;
+}

package/package.json

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