@pathscale/ui 1.2.1 → 1.2.3

package/dist/components/spinner/Spinner.classes.js

@@ -0,0 +1,26 @@
+const CLASSES = {
+    base: "spinner",
+    size: {
+        xs: "spinner--xs",
+        sm: "spinner--sm",
+        md: "",
+        lg: "spinner--lg",
+        xl: "spinner--xl"
+    },
+    color: {
+        current: "spinner--current",
+        accent: "spinner--accent",
+        success: "spinner--success",
+        warning: "spinner--warning",
+        danger: "spinner--danger"
+    },
+    variant: {
+        spinner: "spinner--spinner",
+        dots: "spinner--dots",
+        ring: "spinner--ring",
+        ball: "spinner--ball",
+        bars: "spinner--bars",
+        infinity: "spinner--infinity"
+    }
+};
+export { CLASSES };

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+import "./Spinner.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpinnerColor = "current" | "accent" | "success" | "warning" | "danger";
+export type SpinnerVariant = "spinner" | "dots" | "ring" | "ball" | "bars" | "infinity";
+export type SpinnerProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    size?: SpinnerSize;
+    color?: SpinnerColor;
+    variant?: SpinnerVariant;
+    label?: string;
+};
+declare const Spinner: Component<SpinnerProps>;
+export default Spinner;

package/dist/components/spinner/Spinner.js

@@ -0,0 +1,60 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Spinner.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__Spinner_classes_js_ffa4756a__ from "./Spinner.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=spinner-icon fill=none viewBox="0 0 24 24"><defs><linearGradient x1=50% x2=50% y1=5.271% y2=91.793%><stop offset=0% stop-color=currentColor></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient><linearGradient x1=50% x2=50% y1=15.24% y2=87.15%><stop offset=0% stop-color=currentColor stop-opacity=0></stop><stop offset=100% stop-color=currentColor stop-opacity=0.55></stop></linearGradient></defs><g fill=none><path d="M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021"transform="translate(1.5 1.625)"></path><path d="M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118"transform="translate(1.5 1.625)">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const SpinnerSVG = ()=>{
+    const id = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "id", `spinner-grad1-${id}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "id", `spinner-grad2-${id}`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "fill", `url(#spinner-grad1-${id})`);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$7, "fill", `url(#spinner-grad2-${id})`);
+        return _el$;
+    })();
+};
+const Spinner = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "size",
+        "color",
+        "variant",
+        "label",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const size = ()=>local.size ?? "md";
+    const color = ()=>local.color ?? "current";
+    const variant = ()=>local.variant ?? "spinner";
+    return (()=>{
+        var _el$8 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "status",
+            get ["aria-label"] () {
+                return local.label ?? "Loading";
+            },
+            "aria-busy": "true",
+            "aria-live": "polite",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.size[size()], __WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.color[color()], __WEBPACK_EXTERNAL_MODULE__Spinner_classes_js_ffa4756a__.CLASSES.variant[variant()], local.class, local.className);
+            },
+            "data-slot": "spinner",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, (()=>{
+            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"spinner" === variant());
+            return ()=>_c$() ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(SpinnerSVG, {}) : void 0;
+        })());
+        return _el$8;
+    })();
+};
+const spinner_Spinner = Spinner;
+export { spinner_Spinner as default };

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

@@ -0,0 +1 @@
+export { default, default as Spinner, default as Loading, type SpinnerProps, type SpinnerSize, type SpinnerColor, type SpinnerVariant, } from "./Spinner";

package/dist/components/spinner/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__ from "./Spinner.js";
+var __webpack_exports__Loading = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
+var __webpack_exports__Spinner = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Spinner_js_9531e581__["default"];
+export { __webpack_exports__Loading as Loading, __webpack_exports__Spinner as Spinner, __webpack_exports__default as default };

package/dist/components/surface/Surface.classes.d.ts

@@ -0,0 +1,9 @@
+export declare const CLASSES: {
+    readonly base: "surface";
+    readonly variant: {
+        readonly default: "surface--default";
+        readonly secondary: "surface--secondary";
+        readonly tertiary: "surface--tertiary";
+        readonly transparent: "surface--transparent";
+    };
+};

package/dist/components/surface/Surface.classes.js

@@ -0,0 +1,10 @@
+const CLASSES = {
+    base: "surface",
+    variant: {
+        default: "surface--default",
+        secondary: "surface--secondary",
+        tertiary: "surface--tertiary",
+        transparent: "surface--transparent"
+    }
+};
+export { CLASSES };

package/dist/components/surface/Surface.css

@@ -0,0 +1,37 @@
+@layer components {
+  .surface {
+    position: relative;
+    --surface-bg: var(--color-surface, var(--color-base-100));
+    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
+    --surface-border: transparent;
+    --surface-radius: var(--radius-box, 0.75rem);
+    background-color: var(--surface-bg);
+    color: var(--surface-fg);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--surface-radius);
+  }
+
+  .surface--transparent {
+    --surface-bg: transparent;
+    --surface-fg: var(--color-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--default {
+    --surface-bg: var(--color-surface, var(--color-base-100));
+    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--secondary {
+    --surface-bg: var(--color-surface-secondary, var(--color-base-200));
+    --surface-fg: var(--color-surface-secondary-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+
+  .surface--tertiary {
+    --surface-bg: var(--color-surface-tertiary, var(--color-base-300));
+    --surface-fg: var(--color-surface-tertiary-foreground, var(--color-base-content));
+    --surface-border: transparent;
+  }
+}

package/dist/components/surface/Surface.d.ts

@@ -0,0 +1,12 @@
+import "./Surface.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SurfaceVariant = "default" | "secondary" | "tertiary" | "transparent";
+export type SurfaceVariants = {
+    variant?: SurfaceVariant;
+};
+export type SurfaceProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & SurfaceVariants & {
+    children?: JSX.Element;
+};
+export declare function Surface(props: SurfaceProps): JSX.Element;
+export default Surface;

package/dist/components/surface/Surface.js

@@ -0,0 +1,35 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Surface.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__Surface_classes_js_ab149b7e__ from "./Surface.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+function Surface(props) {
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant"
+    ]);
+    const variant = ()=>local.variant ?? "default";
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Surface_classes_js_ab149b7e__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Surface_classes_js_ab149b7e__.CLASSES.variant[variant()], local.class, local.className)
+            }), {
+            "data-slot": "surface",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+}
+const surface_Surface = Surface;
+export { Surface, surface_Surface as default };

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

@@ -0,0 +1 @@
+export { default, Surface, type SurfaceProps, type SurfaceVariant, type SurfaceVariants } from "./Surface";

package/dist/components/surface/index.js

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Surface_js_0cf8f490__ from "./Surface.js";
+var __webpack_exports__Surface = __WEBPACK_EXTERNAL_MODULE__Surface_js_0cf8f490__.Surface;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Surface_js_0cf8f490__["default"];
+export { __webpack_exports__Surface as Surface, __webpack_exports__default as default };

package/dist/components/table/ExpandToggle.d.ts

@@ -0,0 +1,11 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ExpandToggleProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onToggle"> & IComponentBaseProps & {
+    expanded: boolean;
+    onToggle?: () => void;
+    size?: number;
+    label?: string;
+    disabled?: boolean;
+};
+declare const ExpandToggle: Component<ExpandToggleProps>;
+export default ExpandToggle;

package/dist/components/table/ExpandToggle.js

@@ -0,0 +1,88 @@
+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__icon_index_js_1f7a158c__ from "../icon/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+const ExpandToggle_ExpandToggle = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "expanded",
+        "onToggle",
+        "size",
+        "label",
+        "disabled",
+        "class",
+        "className",
+        "onClick",
+        "dataTheme"
+    ]);
+    const iconSize = ()=>local.size ?? 16;
+    const ariaLabel = ()=>local.label ?? "Toggle row details";
+    const isDisabled = ()=>Boolean(local.disabled);
+    const handleClick = (event)=>{
+        if ("function" == typeof local.onClick) local.onClick(event);
+        else if (Array.isArray(local.onClick) && "function" == typeof local.onClick[0]) local.onClick[0](local.onClick[1], event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        local.onToggle?.();
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get type () {
+                return rest.type ?? "button";
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-base-300 bg-base-100 text-base-content transition-colors hover:bg-base-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/60", isDisabled() && "cursor-not-allowed opacity-60 hover:bg-base-100", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-expand-toggle",
+            get ["data-expanded"] () {
+                return local.expanded ? "true" : "false";
+            },
+            get ["aria-expanded"] () {
+                return local.expanded;
+            },
+            get ["aria-label"] () {
+                return ariaLabel();
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onClick: handleClick
+        }), 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.expanded;
+            },
+            get fallback () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                    name: "icon-[lucide--chevron-right]",
+                    get width () {
+                        return iconSize();
+                    },
+                    get height () {
+                        return iconSize();
+                    },
+                    "aria-hidden": "true"
+                });
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                    name: "icon-[lucide--chevron-down]",
+                    get width () {
+                        return iconSize();
+                    },
+                    get height () {
+                        return iconSize();
+                    },
+                    "aria-hidden": "true"
+                });
+            }
+        }));
+        return _el$;
+    })();
+};
+const ExpandToggle = ExpandToggle_ExpandToggle;
+export { ExpandToggle as default };

package/dist/components/table/InlineConfirm.d.ts

@@ -0,0 +1,15 @@
+import { type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type InlineConfirmVariant = "primary" | "danger" | "warning";
+export type InlineConfirmProps = IComponentBaseProps & {
+    prompt: string;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    confirmVariant?: InlineConfirmVariant;
+};
+declare const InlineConfirm: Component<InlineConfirmProps>;
+export default InlineConfirm;

package/dist/components/table/InlineConfirm.js

@@ -0,0 +1,80 @@
+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__button_index_js_557db1f7__ from "../button/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><span class="text-sm text-base-content/70"data-slot=table-inline-confirm-prompt></span><div class="inline-flex items-center gap-2"data-slot=table-inline-confirm-actions>');
+const toButtonVariant = (variant)=>{
+    if ("danger" === variant) return "danger";
+    if ("warning" === variant) return "secondary";
+    return "primary";
+};
+const InlineConfirm = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "prompt",
+        "confirmLabel",
+        "cancelLabel",
+        "onConfirm",
+        "onCancel",
+        "loading",
+        "disabled",
+        "confirmVariant",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const isBusy = ()=>Boolean(local.loading);
+    const isDisabled = ()=>Boolean(local.disabled) || isBusy();
+    const confirmVariant = ()=>toButtonVariant(local.confirmVariant ?? "primary");
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("inline-flex flex-wrap items-center gap-2", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-inline-confirm"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.prompt);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+            size: "sm",
+            get variant () {
+                return confirmVariant();
+            },
+            get isPending () {
+                return isBusy();
+            },
+            get isDisabled () {
+                return isDisabled();
+            },
+            get onClick () {
+                return local.onConfirm;
+            },
+            get ["aria-label"] () {
+                return local.confirmLabel;
+            },
+            get children () {
+                return local.confirmLabel;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+            size: "sm",
+            variant: "ghost",
+            get isDisabled () {
+                return isDisabled();
+            },
+            get onClick () {
+                return local.onCancel;
+            },
+            get ["aria-label"] () {
+                return local.cancelLabel;
+            },
+            get children () {
+                return local.cancelLabel;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const table_InlineConfirm = InlineConfirm;
+export { table_InlineConfirm as default };

package/dist/components/table/MobileListView.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type MobileListViewProps<TRow> = IComponentBaseProps & {
+    rows: TRow[];
+    renderRow?: (row: TRow, index: number) => JSX.Element;
+    empty?: JSX.Element;
+    listClass?: string;
+    itemClass?: string;
+    children?: (row: TRow, index: number) => JSX.Element;
+    emptyTitle?: string;
+    emptyIcon?: string;
+};
+declare const MobileListView: <TRow>(props: MobileListViewProps<TRow>) => JSX.Element;
+export default MobileListView;

package/dist/components/table/MobileListView.js

@@ -0,0 +1,105 @@
+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__empty_state_index_js_c549fbb5__ from "../empty-state/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><ul>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li class=py-8 data-slot=table-mobile-list-view-empty>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>");
+const MobileListView_MobileListView = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "rows",
+        "renderRow",
+        "empty",
+        "listClass",
+        "itemClass",
+        "children",
+        "emptyTitle",
+        "emptyIcon",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const renderRow = (row, index)=>{
+        if (local.renderRow) return local.renderRow(row, index);
+        if (local.children) return local.children(row, index);
+        return null;
+    };
+    const emptyContent = ()=>{
+        if (local.empty) return local.empty;
+        if (!local.emptyTitle) return null;
+        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__empty_state_index_js_c549fbb5__.EmptyState, {
+            get children () {
+                return [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__empty_state_index_js_c549fbb5__.EmptyState.Icon, {
+                        get children () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                                get name () {
+                                    return local.emptyIcon ?? "icon-[mdi--inbox-outline]";
+                                },
+                                width: 24,
+                                height: 24
+                            });
+                        }
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__empty_state_index_js_c549fbb5__.EmptyState.Title, {
+                        get children () {
+                            return local.emptyTitle;
+                        }
+                    })
+                ];
+            }
+        });
+    };
+    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)(rest, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("w-full", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-mobile-list-view"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("divide-y divide-base-content/10", local.listClass)
+            }), {
+            "data-slot": "table-mobile-list-view-list"
+        }), false, true);
+        (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.rows.length > 0;
+            },
+            get fallback () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return emptyContent();
+                    },
+                    get children () {
+                        var _el$3 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, emptyContent);
+                        return _el$3;
+                    }
+                });
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                    get each () {
+                        return local.rows;
+                    },
+                    children: (row, index)=>local.renderRow ? (()=>{
+                            var _el$4 = _tmpl$3();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: local.itemClass
+                                }), {
+                                "data-slot": "table-mobile-list-view-item"
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>renderRow(row, index()));
+                            return _el$4;
+                        })() : renderRow(row, index())
+                });
+            }
+        }));
+        return _el$;
+    })();
+};
+const MobileListView = MobileListView_MobileListView;
+export { MobileListView as default };

package/dist/components/table/SortIcon.d.ts

@@ -0,0 +1,12 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type SortIconState = "asc" | "desc" | "none";
+export type SortIconProps = IComponentBaseProps & {
+    state: SortIconState;
+    size?: number;
+    ascIcon?: JSX.Element;
+    descIcon?: JSX.Element;
+    neutralIcon?: JSX.Element;
+};
+declare const SortIcon: Component<SortIconProps>;
+export default SortIcon;

package/dist/components/table/SortIcon.js

@@ -0,0 +1,67 @@
+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__icon_index_js_1f7a158c__ from "../icon/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const SortIcon = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "state",
+        "size",
+        "ascIcon",
+        "descIcon",
+        "neutralIcon",
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const iconSize = ()=>local.size ?? 16;
+    const iconName = ()=>{
+        if ("asc" === local.state) return "icon-[lucide--arrow-up]";
+        if ("desc" === local.state) return "icon-[lucide--arrow-down]";
+        return "icon-[lucide--arrow-up-down]";
+    };
+    const customIcon = ()=>{
+        if ("asc" === local.state) return local.ascIcon;
+        if ("desc" === local.state) return local.descIcon;
+        return local.neutralIcon;
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("inline-flex shrink-0 items-center justify-center", local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "table-sort-icon",
+            get ["data-state"] () {
+                return local.state;
+            },
+            "aria-hidden": "true"
+        }), 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 customIcon();
+            },
+            get fallback () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                    get name () {
+                        return iconName();
+                    },
+                    get width () {
+                        return iconSize();
+                    },
+                    get height () {
+                        return iconSize();
+                    }
+                });
+            },
+            get children () {
+                return customIcon();
+            }
+        }));
+        return _el$;
+    })();
+};
+const table_SortIcon = SortIcon;
+export { table_SortIcon as default };