@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/rating/RatingItem.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__ from "./Rating.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const RatingItem = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "value",
+        "mask",
+        "halfPosition",
+        "color",
+        "aria-label"
+    ]);
+    const context = (0, __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__.useRatingContext)();
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("mask", local.class, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        [`mask-${local.mask || "star"}`]: true,
+        [`mask-half-${local.halfPosition}`]: context.half && local.halfPosition
+    }), local.color);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return !context.readonly;
+        },
+        get fallback () {
+            return (()=>{
+                var _el$2 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, classes);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                    var _v$ = local["aria-label"], _v$2 = void 0 !== context.value && local.value <= context.value ? 1 : 0.2;
+                    _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "aria-label", _p$.e = _v$);
+                    _v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("opacity", _v$2) : _el$2.style.removeProperty("opacity"));
+                    return _p$;
+                }, {
+                    e: void 0,
+                    t: void 0
+                });
+                return _el$2;
+            })();
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+                type: "radio",
+                get name () {
+                    return context.name;
+                },
+                class: classes,
+                get checked () {
+                    return context.value === local.value;
+                },
+                onChange: ()=>context.onChange?.(local.value),
+                get ["aria-label"] () {
+                    return local["aria-label"];
+                }
+            }), false, false);
+            return _el$;
+        }
+    });
+};
+const rating_RatingItem = RatingItem;
+export { rating_RatingItem as default };

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

@@ -0,0 +1,4 @@
+export { default as Rating } from "./Rating";
+export type { RatingProps } from "./Rating";
+export type { RatingHiddenProps } from "./RatingHidden";
+export type { RatingItemProps } from "./RatingItem";

package/dist/components/rating/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__ from "./Rating.js";
+var __webpack_exports__Rating = __WEBPACK_EXTERNAL_MODULE__Rating_js_1000f3ff__["default"];
+export { __webpack_exports__Rating as Rating };

package/dist/components/rating/rating.css

@@ -0,0 +1,106 @@
+@layer components {
+  .rating {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+  .rating input {
+      border: none;
+      appearance: none;
+    }
+
+  .rating :where(*) {
+      height: calc(0.25rem * 6);
+      width: calc(0.25rem * 6);
+      border-radius: 0;
+      background-color: var(--color-base-content);
+      opacity: 20%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rating :where(*) {
+      animation: rating 0.25s ease-out;
+    }
+    }
+
+  .rating :where(*):is(input) {
+      cursor: pointer;
+    }
+
+  .rating .rating-hidden {
+      width: calc(0.25rem * 2);
+      background-color: transparent;
+    }
+
+  .rating input[type="radio"]:checked {
+      background-image: none;
+    }
+
+  .rating *:checked,
+    .rating *[aria-checked="true"],
+    .rating *[aria-current="true"],
+    .rating *:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
+      opacity: 100%;
+    }
+
+  .rating *:focus-visible {
+      scale: 1.1;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .rating *:focus-visible {
+      transition: scale 0.2s ease-out;
+    }
+    }
+
+  .rating *:active:focus {
+      animation: none;
+      scale: 1.1;
+    }
+
+  .rating.rating-xs :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 4);
+      height: calc(0.25rem * 4);
+    }
+
+  .rating.rating-sm :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 5);
+      height: calc(0.25rem * 5);
+    }
+
+  .rating.rating-md :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 6);
+      height: calc(0.25rem * 6);
+    }
+
+  .rating.rating-lg :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 7);
+      height: calc(0.25rem * 7);
+    }
+
+  .rating.rating-xl :where(*:not(.rating-hidden)) {
+      width: calc(0.25rem * 8);
+      height: calc(0.25rem * 8);
+    }
+
+  .rating-half.rating-xs *:not(.rating-hidden) {
+      width: calc(0.25rem * 2);
+    }
+
+  .rating-half.rating-sm *:not(.rating-hidden) {
+      width: calc(0.25rem * 2.5);
+    }
+
+  .rating-half.rating-md *:not(.rating-hidden) {
+      width: calc(0.25rem * 3);
+    }
+
+  .rating-half.rating-lg *:not(.rating-hidden) {
+      width: .875rem;
+    }
+
+  .rating-half.rating-xl *:not(.rating-hidden) {
+      width: calc(0.25rem * 4);
+    }
+}

package/dist/components/select/Select.d.ts

@@ -0,0 +1,16 @@
+import "./select.css";
+import { type JSX, type Component } from "solid-js";
+import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
+type SelectBaseProps = {
+    color?: ComponentColor;
+    size?: ComponentSize;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    placeholder?: string;
+    value?: string | string[] | number;
+};
+export type SelectProps = SelectBaseProps & IComponentBaseProps & Omit<JSX.SelectHTMLAttributes<HTMLSelectElement>, keyof SelectBaseProps>;
+declare const Select: Component<SelectProps>;
+export default Select;

package/dist/components/select/Select.js

@@ -0,0 +1,62 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./select.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<select><option value disabled hidden>");
+const Select = (props)=>{
+    const merged = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
+        value: "",
+        placeholder: "Please, select an option"
+    }, props);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(merged, [
+        "color",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "placeholder",
+        "value",
+        "children"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("select", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "select-xl": "xl" === local.size,
+            "select-lg": "lg" === local.size,
+            "select-md": "md" === local.size,
+            "select-sm": "sm" === local.size,
+            "select-xs": "xs" === local.size,
+            "select-primary": "primary" === local.color,
+            "select-secondary": "secondary" === local.color,
+            "select-accent": "accent" === local.color,
+            "select-ghost": "ghost" === local.color,
+            "select-info": "info" === local.color,
+            "select-success": "success" === local.color,
+            "select-warning": "warning" === local.color,
+            "select-error": "error" === local.color
+        })));
+    const hasValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.value && "" !== local.value);
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+        (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 classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get value () {
+                return local.value;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.placeholder);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>_el$2.selected = !hasValue());
+        return _el$;
+    })();
+};
+const select_Select = Select;
+export { select_Select as default };

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

@@ -0,0 +1 @@
+export { default, type SelectProps } from "./Select";

package/dist/components/select/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Select_js_c24b23c5__ from "./Select.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Select_js_c24b23c5__["default"];
+export { __webpack_exports__default as default };

package/dist/components/select/select.css

@@ -0,0 +1,351 @@
+@layer components {
+  .select {
+      border: var(--border) solid #0000;
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 1;
+      appearance: none;
+      align-items: center;
+      gap: calc(0.25rem * 1.5);
+      background-color: var(--color-base-100);
+      padding-inline-start: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 7);
+      vertical-align: middle;
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--size);
+      font-size: 0.875rem;
+      touch-action: manipulation;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%);
+      background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
+      background-size: 4px 4px, 4px 4px;
+      background-repeat: no-repeat;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      border-color: var(--input-color);
+      --input-color: var(--color-base-content);
+      --size: calc(var(--size-field, 0.25rem) * 10);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  [dir="rtl"] .select {
+      background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
+    }
+
+  [dir="rtl"] .select::picker(select),
+    [dir="rtl"] .select select::picker(select) {
+      translate: 0.5rem 0;
+    }
+
+  .select[multiple] {
+      height: auto;
+      overflow: auto;
+      padding-block: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 3);
+      background-image: none;
+    }
+
+  .select select {
+      margin-inline-start: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -7);
+      width: calc(100% + 2.75rem);
+      appearance: none;
+      padding-inline-start: calc(0.25rem * 3);
+      padding-inline-end: calc(0.25rem * 7);
+      height: calc(100% - calc(var(--border) * 2));
+      align-items: center;
+      background: inherit;
+      border-radius: inherit;
+      border-style: none;
+    }
+
+  .select select:focus,
+    .select select:focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .select select:focus,
+    .select select:focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .select select:not(:last-child) {
+      margin-inline-end: calc(0.25rem * -5.5);
+      background-image: none;
+    }
+
+  .select:focus,
+    .select:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:focus,
+    .select:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  .select:has(> select[disabled]),
+    .select:is(:disabled, [disabled]),
+    fieldset:disabled .select {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:has(> select[disabled]),
+    .select:is(:disabled, [disabled]),
+    fieldset:disabled .select {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .select:has(> select[disabled])::placeholder,
+    .select:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .select::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select:has(> select[disabled])::placeholder,
+    .select:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .select::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .select:has(> select[disabled]) > select[disabled] {
+      cursor: not-allowed;
+    }
+
+  @supports (appearance: base-select) {
+    .select,
+    .select select {
+      appearance: base-select;
+    }
+    }
+
+  @supports (appearance: base-select) {
+    .select::picker(select),
+    .select select::picker(select) {
+      appearance: base-select;
+    }
+    }
+
+  .select::picker(select),
+    .select select::picker(select) {
+      color: inherit;
+      max-height: min(24rem, 70dvh);
+      margin-inline: 0.5rem;
+      translate: -0.5rem 0;
+      border: var(--border) solid var(--color-base-200);
+      margin-block: calc(0.25rem * 2);
+      border-radius: var(--radius-box);
+      padding: calc(0.25rem * 2);
+      background-color: inherit;
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
+      box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
+    }
+
+  .select::picker-icon,
+    .select select::picker-icon {
+      display: none;
+    }
+
+  .select optgroup,
+    .select select optgroup {
+      padding-top: 0.5em;
+    }
+
+  .select optgroup option:nth-child(1),
+    .select select optgroup option:nth-child(1) {
+      margin-top: 0.5em;
+    }
+
+  .select option,
+    .select select option {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+      transition-property: color, background-color;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      white-space: normal;
+    }
+
+  .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      cursor: pointer;
+      background-color: var(--color-base-content);
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  @media (forced-colors: active) {
+    .select option:not(:disabled):hover,
+    .select option:not(:disabled):focus-visible,
+    .select select option:not(:disabled):hover,
+    .select select option:not(:disabled):focus-visible {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .select option:not(:disabled):active,
+    .select select option:not(:disabled):active {
+      background-color: var(--color-neutral);
+      color: var(--color-neutral-content);
+      box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
+    }
+
+  .select-ghost {
+      background-color: transparent;
+      transition: background-color 0.2s;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .select-ghost:focus,
+    .select-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .select-lg {
+      --size: calc(var(--size-field, 0.25rem) * 12);
+      font-size: 1.125rem;
+    }
+
+  .select-lg option {
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-md {
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      font-size: 0.875rem;
+    }
+
+  .select-md option {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-sm {
+      --size: calc(var(--size-field, 0.25rem) * 8);
+      font-size: 0.75rem;
+    }
+
+  .select-sm option {
+      padding-inline: calc(0.25rem * 2.5);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .select-xl {
+      --size: calc(var(--size-field, 0.25rem) * 14);
+      font-size: 1.375rem;
+    }
+
+  .select-xl option {
+      padding-inline: calc(0.25rem * 5);
+      padding-block: calc(0.25rem * 1.5);
+    }
+
+  .select-xs {
+      --size: calc(var(--size-field, 0.25rem) * 6);
+      font-size: 0.6875rem;
+    }
+
+  .select-xs option {
+      padding-inline: calc(0.25rem * 2);
+      padding-block: calc(0.25rem * 1);
+    }
+
+  .select-accent,
+    .select-accent:focus,
+    .select-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .select-error,
+    .select-error:focus,
+    .select-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .select-info,
+    .select-info:focus,
+    .select-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .select-neutral,
+    .select-neutral:focus,
+    .select-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .select-primary,
+    .select-primary:focus,
+    .select-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .select-secondary,
+    .select-secondary:focus,
+    .select-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .select-success,
+    .select-success:focus,
+    .select-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .select-warning,
+    .select-warning:focus,
+    .select-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/components/showcase/ShowcaseBlock.d.ts

@@ -0,0 +1,10 @@
+import { type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface ShowcaseBlockProps extends IComponentBaseProps {
+    title: string;
+    description?: string;
+    code?: string;
+    preview?: boolean;
+}
+declare const ShowcaseBlock: ParentComponent<ShowcaseBlockProps>;
+export default ShowcaseBlock;

package/dist/components/showcase/ShowcaseBlock.js

@@ -0,0 +1,48 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__ from "../flex/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<p class="text-base-content/70 mb-4">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="bg-base-200 shadow-sm p-6 rounded-lg"><h3 class="text-lg font-semibold mb-2 text-base-content"></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"
+    ]);
+    const previewClass = local.preview ? "border bg-base-100 border-base-content/15 p-8 rounded-lg" : "";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        direction: "col",
+        gap: "md"
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className);
+        },
+        get children () {
+            var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.title);
+            (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.description;
+                },
+                get children () {
+                    var _el$3 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.description);
+                    return _el$3;
+                }
+            }), _el$4);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, previewClass);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+            return _el$;
+        }
+    }));
+};
+const showcase_ShowcaseBlock = ShowcaseBlock;
+export { showcase_ShowcaseBlock as default };

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

@@ -0,0 +1,2 @@
+export { default } from "./ShowcaseBlock";
+export type { ShowcaseBlockProps } from "./ShowcaseBlock";

package/dist/components/showcase/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ShowcaseBlock_js_f1670608__ from "./ShowcaseBlock.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ShowcaseBlock_js_f1670608__["default"];
+export { __webpack_exports__default as default };