@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/input/Input.css

@@ -0,0 +1,138 @@
+@layer components {
+  .input-root {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: fit-content;
+  }
+
+  .input-root--full-width {
+    width: 100%;
+  }
+
+  .input-label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--color-base-content);
+  }
+
+  .input-helper {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  .input-helper--invalid {
+    color: var(--color-error);
+  }
+
+  .input-control {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    min-width: 12rem;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--color-base-300);
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  @media (hover: hover) {
+    .input-control:hover:not(.input-control--disabled):not(.input-control--invalid):not(:focus-within) {
+      background-color: var(--color-base-200);
+      border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+    }
+  }
+
+  .input-control:focus-within {
+    border-color: var(--color-accent);
+    background-color: var(--color-base-100);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent);
+  }
+
+  .input-control--invalid,
+  .input-control[data-invalid="true"] {
+    border-color: var(--color-error);
+    background-color: var(--color-base-100);
+  }
+
+  .input-control--invalid:focus-within,
+  .input-control[data-invalid="true"]:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 24%, transparent);
+  }
+
+  .input-control--disabled,
+  .input-control[data-disabled="true"] {
+    cursor: not-allowed;
+    border-color: var(--color-base-300);
+    background-color: var(--color-base-200);
+    color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+    box-shadow: none;
+    opacity: 0.85;
+  }
+
+  .input-control--sm {
+    min-height: 2rem;
+    padding-inline: 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .input-control--md {
+    min-height: 2.5rem;
+    padding-inline: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .input-control--lg {
+    min-height: 2.75rem;
+    padding-inline: 0.875rem;
+    font-size: 1rem;
+  }
+
+  .input-control--full-width {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .input-field {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1.4;
+    outline: none;
+    padding-block: 0;
+  }
+
+  .input-field::placeholder {
+    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+  }
+
+  .input-field:disabled {
+    cursor: not-allowed;
+  }
+
+  .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);
+  }
+
+  .input-slot svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}

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

@@ -1,23 +1,45 @@
-import { type JSX } from "solid-js";
-import type { ComponentColor, ComponentSize, IComponentBaseProps } from "../types";
-type InputBaseProps = {
-    size?: ComponentSize;
-    color?: ComponentColor;
-    variant?: "bordered" | "ghost" | "flushed";
+import "./Input.css";
+import { type Component, type JSX } from "solid-js";
+type InputSize = "sm" | "md" | "lg";
+type InputRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+    size?: InputSize;
     fullWidth?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
     dataTheme?: string;
-    class?: string;
     className?: string;
-    style?: JSX.CSSProperties;
-    rightIcon?: JSX.Element;
-    leftIcon?: JSX.Element;
-    placeholder?: string;
-    ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-invalid"?: boolean;
-    "aria-required"?: boolean;
 };
-export type InputProps = InputBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof InputBaseProps>;
-declare const Input: (props: InputProps) => JSX.Element;
+type InputFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "children" | "disabled"> & {
+    size?: InputSize;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    startContent?: JSX.Element;
+    endContent?: JSX.Element;
+    dataTheme?: string;
+    className?: string;
+};
+type InputLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement> & {
+    className?: string;
+};
+type InputHelperProps = JSX.HTMLAttributes<HTMLParagraphElement> & {
+    invalid?: boolean;
+    className?: string;
+};
+type InputProps = Omit<InputFieldProps, "id" | "aria-describedby"> & {
+    id?: string;
+    label?: JSX.Element;
+    helperText?: JSX.Element;
+    errorMessage?: JSX.Element;
+};
+type InputComponent = Component<InputProps> & {
+    Root: Component<InputRootProps>;
+    Field: Component<InputFieldProps>;
+    Label: Component<InputLabelProps>;
+    Helper: Component<InputHelperProps>;
+};
+declare const Input: InputComponent;
 export default Input;
+export type { InputProps, InputSize, InputRootProps, InputFieldProps, InputLabelProps, InputHelperProps, };

package/dist/components/input/Input.js

@@ -0,0 +1,286 @@
+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";
+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, [
+        "children",
+        "class",
+        "className",
+        "size",
+        "fullWidth",
+        "isDisabled",
+        "isInvalid",
+        "dataTheme"
+    ]);
+    const baseId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const size = ()=>local.size ?? "md";
+    const isDisabled = ()=>Boolean(local.isDisabled);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const fullWidth = ()=>Boolean(local.fullWidth);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputContext.Provider, {
+        value: {
+            fieldId: ()=>`${baseId}-field`,
+            helperId: ()=>`${baseId}-helper`,
+            size,
+            isDisabled,
+            isInvalid,
+            fullWidth
+        },
+        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, {
+                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;
+                },
+                "data-slot": "input-root"
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+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, [
+        "class",
+        "className",
+        "size",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "fullWidth",
+        "startContent",
+        "endContent",
+        "dataTheme",
+        "id",
+        "aria-invalid"
+    ]);
+    const size = ()=>local.size ?? ctx?.size() ?? "md";
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(ctx?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || Boolean(ctx?.isInvalid());
+    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)("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$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.startContent;
+            },
+            get children () {
+                var _el$3 = _tmpl$2();
+                (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: "input-field",
+            get disabled () {
+                return isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["aria-invalid"] () {
+                return ariaInvalid();
+            },
+            "data-slot": "input-field"
+        }), 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.endContent;
+            },
+            get children () {
+                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;
+    })();
+};
+const InputLabel = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(InputContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "for",
+        "children"
+    ]);
+    return (()=>{
+        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();
+            },
+            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);
+        return _el$6;
+    })();
+};
+const InputHelper = (props)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(InputContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "invalid",
+        "id",
+        "children"
+    ]);
+    const invalid = ()=>Boolean(local.invalid) || Boolean(ctx?.isInvalid());
+    return (()=>{
+        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();
+            },
+            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);
+        return _el$7;
+    })();
+};
+const InputBase = (props)=>{
+    const generatedId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const [local, fieldProps] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "id",
+        "size",
+        "fullWidth",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "label",
+        "helperText",
+        "errorMessage",
+        "class",
+        "className",
+        "aria-invalid",
+        "dataTheme"
+    ]);
+    const inputId = ()=>local.id ?? `${generatedId}-input`;
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || null != local.errorMessage;
+    const helperContent = ()=>local.errorMessage ?? local.helperText;
+    const hasHelper = ()=>null != helperContent();
+    const helperId = ()=>`${inputId()}-helper`;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputRoot, {
+        get size () {
+            return local.size;
+        },
+        get fullWidth () {
+            return local.fullWidth ?? true;
+        },
+        get isDisabled () {
+            return isDisabled();
+        },
+        get isInvalid () {
+            return isInvalid();
+        },
+        get dataTheme () {
+            return local.dataTheme;
+        },
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.label;
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputLabel, {
+                            get children () {
+                                return local.label;
+                            }
+                        });
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputField, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(fieldProps, {
+                    get id () {
+                        return inputId();
+                    },
+                    get size () {
+                        return local.size;
+                    },
+                    get isDisabled () {
+                        return isDisabled();
+                    },
+                    get isInvalid () {
+                        return isInvalid();
+                    },
+                    get ["aria-describedby"] () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!hasHelper())() ? helperId() : void 0;
+                    },
+                    get ["class"] () {
+                        return local.class;
+                    },
+                    get className () {
+                        return local.className;
+                    },
+                    get dataTheme () {
+                        return local.dataTheme;
+                    }
+                })),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return hasHelper();
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(InputHelper, {
+                            get id () {
+                                return helperId();
+                            },
+                            get invalid () {
+                                return isInvalid();
+                            },
+                            get children () {
+                                return helperContent();
+                            }
+                        });
+                    }
+                })
+            ];
+        }
+    });
+};
+const Input = Object.assign(InputBase, {
+    Root: InputRoot,
+    Field: InputField,
+    Label: InputLabel,
+    Helper: InputHelper
+});
+const input_Input = Input;
+export { input_Input as default };

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

@@ -1,3 +1,3 @@
 import Input from "./Input";
-export type { InputProps } from "./Input";
+export type { InputProps, InputSize, InputRootProps, InputFieldProps, InputLabelProps, InputHelperProps, } from "./Input";
 export default Input;

package/dist/components/input/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Input_js_5d6e4288__ from "./Input.js";
+const input = __WEBPACK_EXTERNAL_MODULE__Input_js_5d6e4288__["default"];
+export { input as default };

package/dist/components/join/Join.js

@@ -0,0 +1,41 @@
+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";
+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, [
+        "responsive",
+        "vertical",
+        "horizontal",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "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)("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, {
+            get ["class"] () {
+                return classes();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const join_Join = Join;
+export { join_Join as default };

package/dist/components/join/index.js

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

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

@@ -1,3 +1,4 @@
+import "./kbd.css";
 import { type ComponentProps } from "solid-js";
 export type KbdProps = ComponentProps<"kbd">;
 declare const Kbd: (props: KbdProps) => import("solid-js").JSX.Element;

package/dist/components/kbd/Kbd.js

@@ -0,0 +1,22 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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_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"
+    ]);
+    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 ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("kbd", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class));
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const kbd_Kbd = Kbd;
+export { kbd_Kbd as default };

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

@@ -1 +1 @@
-export { default } from "./Kbd";
+export { default, type KbdProps } from "./Kbd";

package/dist/components/kbd/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__ from "./Kbd.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Kbd_js_98d3362c__["default"];
+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

@@ -0,0 +1,31 @@
+import { type Component } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { I18nStore } from "./createI18n";
+export interface LanguageSwitcherProps extends IComponentBaseProps {
+    /**
+     * The i18n store to use for language state
+     */
+    i18n: I18nStore;
+    /**
+     * ARIA label for the dropdown
+     */
+    "aria-label"?: string;
+    /**
+     * ARIA label for current language (for screen readers)
+     */
+    currentLanguageLabel?: string;
+    /**
+     * ARIA label for language options menu
+     */
+    optionsLabel?: string;
+    /**
+     * ARIA label shown while loading
+     */
+    loadingLabel?: string;
+    /**
+     * Callback when language changes
+     */
+    onLanguageChange?: (lang: string) => void;
+}
+declare const LanguageSwitcher: Component<LanguageSwitcherProps>;
+export default LanguageSwitcher;