@pathscale/ui 1.1.54 → 1.1.56

package/dist/components/input/Input.css

@@ -123,20 +123,15 @@
     cursor: not-allowed;
   }
 
-  .input__icon {
+  .input-slot {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
-    pointer-events: none;
   }
 
-  .input__icon > :is(button, [role="button"], a, [tabindex]):not([tabindex="-1"]) {
-    pointer-events: auto;
-  }
-
-  .input__icon > * {
+  .input-slot svg {
     width: 1rem;
     height: 1rem;
   }

package/dist/components/input/Input.d.ts

@@ -16,8 +16,8 @@ type InputFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" |
     disabled?: boolean;
     isInvalid?: boolean;
     fullWidth?: boolean;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
+    startContent?: JSX.Element;
+    endContent?: JSX.Element;
     dataTheme?: string;
     className?: string;
 };

package/dist/components/input/Input.js

@@ -2,8 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Input.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__Input_classes_js_ac0fd06f__ from "./Input.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><input>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="input-slot input-slot--start"data-slot=input-start-content>'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="input-slot input-slot--end"data-slot=input-end-content>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div data-slot=input-control><input>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<p>");
 const InputContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const InputRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -32,9 +31,10 @@ const InputRoot = (props)=>{
         },
         get children () {
             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__Input_classes_js_ac0fd06f__.CLASSES.base, fullWidth() && __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.flag.fullWidthRoot, local.class, local.className)
-                }), {
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-root", fullWidth() && "input-root--full-width", local.class, local.className);
+                },
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -45,6 +45,11 @@ const InputRoot = (props)=>{
         }
     });
 };
+const SIZE_CLASS_MAP = {
+    sm: "input-control--sm",
+    md: "input-control--md",
+    lg: "input-control--lg"
+};
 const InputField = (props)=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(InputContext);
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -55,8 +60,8 @@ const InputField = (props)=>{
         "disabled",
         "isInvalid",
         "fullWidth",
-        "startIcon",
-        "endIcon",
+        "startContent",
+        "endContent",
         "dataTheme",
         "id",
         "aria-invalid"
@@ -67,45 +72,24 @@ const InputField = (props)=>{
     const fullWidth = ()=>Boolean(local.fullWidth) || Boolean(ctx?.fullWidth());
     const inputId = ()=>local.id ?? ctx?.fieldId();
     const ariaInvalid = ()=>local["aria-invalid"] ?? (isInvalid() ? true : void 0);
-    const controlClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.control, __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.size[size()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.flag.fullWidthControl, isDisabled() && __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.flag.disabled, isInvalid() && __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.flag.invalid, local.class, local.className);
+    const controlClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-control", SIZE_CLASS_MAP[size()], fullWidth() && "input-control--full-width", isDisabled() && "input-control--disabled", isInvalid() && "input-control--invalid", local.class, local.className);
     return (()=>{
-        var _el$2 = _tmpl$3(), _el$4 = _el$2.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: controlClasses()
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "input-control",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-invalid"] () {
-                return isInvalid() ? "true" : "false";
-            }
-        }), false, true);
+        var _el$2 = _tmpl$4(), _el$4 = _el$2.firstChild;
         (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.startIcon;
+                return local.startContent;
             },
             get children () {
                 var _el$3 = _tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.iconStart)
-                    }), {
-                    "data-slot": "input-start-icon"
-                }), false, true);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startIcon);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startContent);
                 return _el$3;
             }
         }), _el$4);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get id () {
                 return inputId();
-            }
-        }, ()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.field
-            }), {
+            },
+            class: "input-field",
             get disabled () {
                 return isDisabled();
             },
@@ -119,19 +103,27 @@ const InputField = (props)=>{
         }), false, false);
         (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.endIcon;
+                return local.endContent;
             },
             get children () {
-                var _el$5 = _tmpl$2();
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.iconEnd)
-                    }), {
-                    "data-slot": "input-end-icon"
-                }), false, true);
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.endIcon);
+                var _el$5 = _tmpl$3();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.endContent);
                 return _el$5;
             }
         }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = controlClasses(), _v$2 = local.dataTheme, _v$3 = isDisabled() ? "true" : "false", _v$4 = isInvalid() ? "true" : "false";
+            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-theme", _p$.t = _v$2);
+            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-disabled", _p$.a = _v$3);
+            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-invalid", _p$.o = _v$4);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+        });
         return _el$2;
     })();
 };
@@ -144,14 +136,14 @@ const InputLabel = (props)=>{
         "children"
     ]);
     return (()=>{
-        var _el$6 = _tmpl$4();
+        var _el$6 = _tmpl$5();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["for"] () {
                 return local.for ?? ctx?.fieldId();
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.label, local.class, local.className)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-label", local.class, local.className);
+            },
             "data-slot": "input-label"
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
@@ -169,14 +161,14 @@ const InputHelper = (props)=>{
     ]);
     const invalid = ()=>Boolean(local.invalid) || Boolean(ctx?.isInvalid());
     return (()=>{
-        var _el$7 = _tmpl$5();
+        var _el$7 = _tmpl$6();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get id () {
                 return local.id ?? ctx?.helperId();
-            }
-        }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.slot.helper, invalid() && __WEBPACK_EXTERNAL_MODULE__Input_classes_js_ac0fd06f__.CLASSES.flag.helperInvalid, local.class, local.className)
-            }), {
+            },
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("input-helper", invalid() && "input-helper--invalid", local.class, local.className);
+            },
             "data-slot": "input-helper"
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
@@ -251,10 +243,10 @@ const InputBase = (props)=>{
                     },
                     get ["aria-describedby"] () {
                         return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!hasHelper())() ? helperId() : void 0;
-                    }
-                }, ()=>({
-                        class: local.class
-                    }), {
+                    },
+                    get ["class"] () {
+                        return local.class;
+                    },
                     get className () {
                         return local.className;
                     },

package/dist/components/join/Join.js

@@ -2,7 +2,6 @@ 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_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__ from "./Join.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const Join = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -16,16 +15,17 @@ const Join = (props)=>{
         "children"
     ]);
     const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.vertical]: !local.responsive && local.vertical,
-            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.horizontal]: !local.responsive && local.horizontal,
-            [__WEBPACK_EXTERNAL_MODULE__Join_classes_js_1c694ba7__.CLASSES.flag.responsive]: local.responsive
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("join", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "join-vertical": !local.responsive && local.vertical,
+            "join-horizontal": !local.responsive && local.horizontal,
+            "join-vertical lg:join-horizontal": local.responsive
         }), local.class, local.className));
     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: classes()
-            }), {
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return classes();
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },

package/dist/components/kbd/Kbd.d.ts

@@ -1,29 +1,5 @@
-import "./Kbd.css";
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type KbdVariant = "default" | "light";
-export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
-export declare const kbdKeysMap: Record<KbdKey, string>;
-export declare const kbdKeysLabelMap: Record<KbdKey, string>;
-export type KbdRootProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element;
-    variant?: KbdVariant;
-};
-export type KbdAbbrProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children"> & IComponentBaseProps & {
-    keyValue: KbdKey;
-};
-export type KbdContentProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element;
-};
-declare const KbdRoot: Component<KbdRootProps>;
-declare const KbdAbbr: Component<KbdAbbrProps>;
-declare const KbdContent: Component<KbdContentProps>;
-type KbdComponent = Component<KbdRootProps> & {
-    Root: Component<KbdRootProps>;
-    Abbr: Component<KbdAbbrProps>;
-    Content: Component<KbdContentProps>;
-};
-declare const Kbd: KbdComponent;
-export type KbdProps = KbdRootProps;
-export { KbdRoot, KbdAbbr, KbdContent };
+import "./kbd.css";
+import { type ComponentProps } from "solid-js";
+export type KbdProps = ComponentProps<"kbd">;
+declare const Kbd: (props: KbdProps) => import("solid-js").JSX.Element;
 export default Kbd;

package/dist/components/kbd/Kbd.js

@@ -1,148 +1,22 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./Kbd.css";
+import "./kbd.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__Kbd_classes_js_aa4a6095__ from "./Kbd.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<kbd>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<abbr>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
-const kbdKeysMap = {
-    command: "\u2318",
-    shift: "\u21E7",
-    ctrl: "\u2303",
-    option: "\u2325",
-    enter: "\u21B5",
-    delete: "\u232B",
-    escape: "\u238B",
-    tab: "\u21E5",
-    capslock: "\u21EA",
-    up: "\u2191",
-    right: "\u2192",
-    down: "\u2193",
-    left: "\u2190",
-    pageup: "\u21DE",
-    pagedown: "\u21DF",
-    home: "\u2196",
-    end: "\u2198",
-    help: "?",
-    space: "\u2423",
-    fn: "Fn",
-    win: "\u2318",
-    alt: "\u2325"
-};
-const kbdKeysLabelMap = {
-    command: "Command",
-    shift: "Shift",
-    ctrl: "Control",
-    option: "Option",
-    enter: "Enter",
-    delete: "Delete",
-    escape: "Escape",
-    tab: "Tab",
-    capslock: "Caps Lock",
-    up: "Up",
-    right: "Right",
-    down: "Down",
-    left: "Left",
-    pageup: "Page Up",
-    pagedown: "Page Down",
-    home: "Home",
-    end: "End",
-    help: "Help",
-    space: "Space",
-    fn: "Fn",
-    win: "Win",
-    alt: "Alt"
-};
-const KbdRoot = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "children",
-        "variant"
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<kbd>");
+const Kbd = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class"
     ]);
-    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__Kbd_classes_js_aa4a6095__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.variant[variant()], local.class, local.className)
-            }), {
-            "data-slot": "kbd",
-            get ["data-variant"] () {
-                return variant();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("kbd", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class));
             }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        }), false, false);
         return _el$;
     })();
 };
-const KbdAbbr = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "keyValue",
-        "title"
-    ]);
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.slot.abbr, local.class, local.className)
-            }), {
-            get title () {
-                return local.title ?? kbdKeysLabelMap[local.keyValue];
-            },
-            "data-slot": "kbd-abbr",
-            get ["data-key"] () {
-                return local.keyValue;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>kbdKeysMap[local.keyValue]);
-        return _el$2;
-    })();
-};
-const KbdContent = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "children"
-    ]);
-    return (()=>{
-        var _el$3 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Kbd_classes_js_aa4a6095__.CLASSES.slot.content, local.class, local.className)
-            }), {
-            "data-slot": "kbd-content",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
-        return _el$3;
-    })();
-};
-const Kbd = Object.assign(KbdRoot, {
-    Root: KbdRoot,
-    Abbr: KbdAbbr,
-    Content: KbdContent
-});
 const kbd_Kbd = Kbd;
-export { KbdAbbr, KbdContent, KbdRoot, kbd_Kbd as default, kbdKeysLabelMap, kbdKeysMap };
+export { kbd_Kbd as default };

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

@@ -1 +1 @@
-export { default, KbdRoot, KbdAbbr, KbdContent, kbdKeysMap, kbdKeysLabelMap, type KbdProps, type KbdRootProps, type KbdAbbrProps, type KbdContentProps, type KbdVariant, type KbdKey, } from "./Kbd";
+export { default, type KbdProps } from "./Kbd";

package/dist/components/kbd/index.js

@@ -1,8 +1,3 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__ from "./Kbd.js";
-var __webpack_exports__KbdAbbr = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.KbdAbbr;
-var __webpack_exports__KbdContent = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.KbdContent;
-var __webpack_exports__KbdRoot = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.KbdRoot;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__["default"];
-var __webpack_exports__kbdKeysLabelMap = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.kbdKeysLabelMap;
-var __webpack_exports__kbdKeysMap = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__.kbdKeysMap;
-export { __webpack_exports__KbdAbbr as KbdAbbr, __webpack_exports__KbdContent as KbdContent, __webpack_exports__KbdRoot as KbdRoot, __webpack_exports__default as default, __webpack_exports__kbdKeysLabelMap as kbdKeysLabelMap, __webpack_exports__kbdKeysMap as kbdKeysMap };
+export { __webpack_exports__default as default };

package/dist/components/kbd/kbd.css

@@ -0,0 +1,55 @@
+@layer components {
+  .kbd {
+      box-shadow: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-field);
+      background-color: var(--color-base-200);
+      vertical-align: middle;
+      padding-inline: 0.5em;
+      border: var(--border) solid var(--color-base-content);
+      border-bottom: calc(var(--border) + 1px) solid var(--color-base-content);
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+      height: var(--size);
+      min-width: var(--size);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .kbd {
+      border: var(--border) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .kbd {
+      border-bottom: calc(var(--border) + 1px) solid color-mix(in srgb, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .kbd-lg {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+      font-size: 1rem;
+    }
+
+  .kbd-md {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+    }
+
+  .kbd-sm {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+      font-size: 0.75rem;
+    }
+
+  .kbd-xl {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+      font-size: 1.125rem;
+    }
+
+  .kbd-xs {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+      font-size: 0.625rem;
+    }
+}

package/dist/components/language-switcher/LanguageSwitcher.d.ts

@@ -1,4 +1,3 @@
-import "./LanguageSwitcher.css";
 import { type Component } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { I18nStore } from "./createI18n";

package/dist/components/language-switcher/LanguageSwitcher.js

@@ -1,11 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./LanguageSwitcher.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";
 import * as __WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__ from "../dropdown/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__ from "./LanguageSwitcher.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-xs font-bold uppercase"aria-hidden=true>');
 const LanguageSwitcher = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "i18n",
@@ -24,10 +23,11 @@ const LanguageSwitcher = (props)=>{
         await local.i18n.setLocale(lang);
         local.onLanguageChange?.(lang);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.base, local.class, local.className);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Root, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-            class: classes()
-        }), {
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Root, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return classes();
+        },
         get style () {
             return local.style;
         },
@@ -37,9 +37,8 @@ const LanguageSwitcher = (props)=>{
         },
         get children () {
             return [
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Trigger, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.trigger
-                    }), {
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Trigger, {
+                    class: "btn btn-sm",
                     get ["aria-label"] () {
                         return `${local.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
                     },
@@ -49,34 +48,26 @@ const LanguageSwitcher = (props)=>{
                                 return !local.i18n.isLoading;
                             },
                             get fallback () {
-                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                                    name: "icon-[mdi--loading]"
-                                }, ()=>({
-                                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.loadingIcon
-                                    }), {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                                    name: "icon-[mdi--loading]",
+                                    class: "animate-spin",
                                     width: 16,
                                     height: 16,
                                     get ["aria-label"] () {
                                         return local.loadingLabel ?? "Loading language";
                                     }
-                                }));
+                                });
                             },
                             get children () {
                                 var _el$ = _tmpl$();
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.locale
-                                    }), {
-                                    "aria-hidden": "true"
-                                }), false, true);
                                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.i18n.locale.toUpperCase());
                                 return _el$;
                             }
                         });
                     }
-                })),
-                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Menu, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                        class: __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.menu
-                    }), {
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Menu, {
+                    class: "min-w-32",
                     get ["aria-label"] () {
                         return local.optionsLabel ?? "Language options";
                     },
@@ -85,21 +76,21 @@ const LanguageSwitcher = (props)=>{
                             get each () {
                                 return local.i18n.languages;
                             },
-                            children: (lang)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Item, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-                                    onClick: ()=>handleSelect(lang.code)
-                                }, ()=>({
-                                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.item, isSelected(lang.code) && __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_classes_js_d2468638__.CLASSES.itemSelected)
-                                    }), {
+                            children: (lang)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Item, {
+                                    onClick: ()=>handleSelect(lang.code),
+                                    get ["class"] () {
+                                        return isSelected(lang.code) ? "bg-base-200" : "";
+                                    },
                                     get ["aria-current"] () {
                                         return isSelected(lang.code) ? "true" : void 0;
                                     },
                                     get children () {
                                         return lang.name;
                                     }
-                                }))
+                                })
                         });
                     }
-                }))
+                })
             ];
         }
     }));