asheeui 0.6.3 → 0.6.6

package/dist/components/date-picker/date-picker-config.d.ts

@@ -25,6 +25,22 @@ export interface DatePickerConfig extends FieldConfig {
      * @default "date"
      */
     mode?: PickerMode;
+    /**
+     * Whether to render the calendar popover in a React portal.
+     * When true, the popover is rendered at the document body level,
+     * escaping any parent DOM hierarchy. This prevents CSS containment
+     * and stacking context issues. Defaults to true because popovers
+     * should always appear above other content.
+     *
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Custom portal target element for the calendar popover.
+     * When portal is enabled, the popover is rendered into this element.
+     * Defaults to document.body.
+     */
+    portalTarget?: HTMLElement | null;
 }
 /**
  * Default config values registered for the DatePicker component.

package/dist/components/date-picker/date-picker-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker-config.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBAGrC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAAQ,CAAC,gBAAgB,CAGzD,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}
+{"version":3,"file":"date-picker-config.d.ts","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAE/B;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBAKrC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAAQ,CAAC,gBAAgB,CAKzD,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF"}

package/dist/components/date-picker/date-picker-config.js

@@ -1,15 +1,19 @@
 "use client";
-import { registerComponentDefaults as e } from "../../libs/registry.js";
-import { FALLBACK_FIELD_CONFIG as t, defaultFieldConfig as o } from "../field/field-config.js";
-const i = {
+import { registerComponentDefaults as t } from "../../libs/registry.js";
+import { FALLBACK_FIELD_CONFIG as e, defaultFieldConfig as o } from "../field/field-config.js";
+const r = {
   ...o,
-  mode: "date"
-}, C = {
-  ...t,
-  mode: "date"
+  mode: "date",
+  portal: !0,
+  portalTarget: null
+}, i = {
+  ...e,
+  mode: "date",
+  portal: !0,
+  portalTarget: null
 };
-e("datePicker", i);
+t("datePicker", r);
 export {
-  C as FALLBACK_DATE_PICKER_CONFIG,
-  i as defaultDatePickerConfig
+  i as FALLBACK_DATE_PICKER_CONFIG,
+  r as defaultDatePickerConfig
 };

package/dist/components/keyboard/OnScreenKeyboard.d.ts

@@ -16,10 +16,11 @@ export interface OnScreenKeyboardProps extends KeyboardConfig {
      */
     keyClassName?: string;
     /**
-     * CSS height class for the keyboard container.
-     * Required to set the keyboard height.
+     * Whether to render the keyboard in a Floating UI portal.
+     * When true, the keyboard is rendered at the document body level.
+     * Defaults to true.
      */
-    heightClass: string;
+    portal?: boolean;
 }
 /**
  * The on-screen virtual keyboard UI.
@@ -34,14 +35,23 @@ export interface OnScreenKeyboardProps extends KeyboardConfig {
  * placed inside a KeyboardProvider. It automatically shows and hides
  * based on the context state.
  *
+ * By default, the keyboard uses FloatingPortal to render at the document
+ * body level. This ensures the keyboard appears at the bottom of the screen
+ * regardless of where the input is in the DOM tree, escaping CSS containment,
+ * overflow clipping, and stacking context issues. The portal can be disabled
+ * via the `portal` prop or `components.keyboard.portal` in the config if the
+ * keyboard needs to stay within a specific parent container.
+ *
  * @param props - OnScreenKeyboard configuration options.
  * @param props.className - Extra CSS classes for the container.
- * @param props.heightClass - CSS height class for the keyboard.
+ * @param props.heightClass - CSS height class for the keyboard (deprecated).
+ * @param props.size - Size scale for keyboard keys. Defaults to "md".
  * @param props.initialLayout - Initial layout name.
  * @param props.keyClassName - Extra CSS classes for keys.
  * @param props.variant - Visual variant for keys.
  * @param props.color - Theme color for keys.
  * @param props.radius - Corner rounding for keys.
+ * @param props.portal - Whether to render the keyboard in a portal. Defaults to true.
  *
  * @example
  * ```tsx
@@ -49,7 +59,7 @@ export interface OnScreenKeyboardProps extends KeyboardConfig {
  *
  * export function App() {
  *   return (
- *     <KeyboardProvider heightClass="h-56">
+ *     <KeyboardProvider size="lg">
  *       <Input label="Search" enableVirtualKeyboard />
  *       <OnScreenKeyboard />
  *     </KeyboardProvider>
@@ -60,5 +70,5 @@ export interface OnScreenKeyboardProps extends KeyboardConfig {
  * @see KeyboardProvider - The provider that controls the keyboard state.
  * @see useKeyboardField - Hook for connecting inputs to the keyboard.
  */
-export declare function OnScreenKeyboard({ className, heightClass, initialLayout, variant: variantProp, color: colorProp, radius: radiusProp, keyClassName, }: OnScreenKeyboardProps): import("react").JSX.Element | null;
+export declare function OnScreenKeyboard({ className, initialLayout, size: sizeProp, variant: variantProp, color: colorProp, radius: radiusProp, keyClassName, portal: portalProp, }: OnScreenKeyboardProps): import("react").JSX.Element | null;
 //# sourceMappingURL=OnScreenKeyboard.d.ts.map

package/dist/components/keyboard/OnScreenKeyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnScreenKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/OnScreenKeyboard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAuE3B;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,WAAW,EACX,aAAa,EACb,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,YAAY,GACb,EAAE,qBAAqB,sCAoNvB"}
+{"version":3,"file":"OnScreenKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/OnScreenKeyboard.tsx"],"names":[],"mappings":"AAeA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AA2E3B;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,aAAa,EACb,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,MAAM,EAAE,UAAU,GACnB,EAAE,qBAAqB,sCAsOvB"}

package/dist/components/keyboard/OnScreenKeyboard.js

@@ -1,160 +1,166 @@
 "use client";
 import { jsx as y } from "react/jsx-runtime";
-import { FloatingPortal as I } from "@floating-ui/react";
-import { useState as C, useEffect as k, useMemo as U, useCallback as B } from "react";
-import { useAsheeConfig as W } from "../../libs/context.js";
-import { Button as X } from "../button/Button.js";
-import { FALLBACK_KEYBOARD_CONFIG as L } from "./keyboard-config.js";
-import { useKeyboard as Y } from "./keyboard-context.js";
-import { cn as D } from "../../utils/cn.js";
-function J(e) {
+import { FloatingPortal as X } from "@floating-ui/react";
+import { useState as E, useEffect as N, useMemo as J, useCallback as z } from "react";
+import { useAsheeConfig as Q } from "../../libs/context.js";
+import { Button as ee } from "../button/Button.js";
+import { FALLBACK_KEYBOARD_CONFIG as w } from "./keyboard-config.js";
+import { useKeyboard as re } from "./keyboard-context.js";
+import { KEYBOARD_KEY_SIZE_CLASS as te, KEYBOARD_SIZE_CLASS as se } from "./keyboard-styles.js";
+import { cn as P } from "../../utils/cn.js";
+function oe(e) {
   return e === "{space}" ? "flex-[4]" : ["{bksp}", "{enter}", "{shift}", "{symbols}", "{abc}", "{clear}"].includes(
     e
   ) ? "flex-[1.6]" : "flex-1";
 }
-function P(e, o, i) {
-  var g;
-  const m = Object.getPrototypeOf(e), w = (g = Object.getOwnPropertyDescriptor(m, "value")) == null ? void 0 : g.set;
-  w ? w.call(e, o) : e.value = o, e.dispatchEvent(new Event("input", { bubbles: !0 })), requestAnimationFrame(() => {
+function _(e, s, i) {
+  var C;
+  const m = Object.getPrototypeOf(e), K = (C = Object.getOwnPropertyDescriptor(m, "value")) == null ? void 0 : C.set;
+  K ? K.call(e, s) : e.value = s, e.dispatchEvent(new Event("input", { bubbles: !0 })), requestAnimationFrame(() => {
     e.focus(), e.setSelectionRange(i, i);
   });
 }
-function Q(e, o, i) {
-  return o !== i ? { value: e.slice(0, o) + e.slice(i), cursor: o } : o === 0 ? { value: e, cursor: 0 } : {
-    value: e.slice(0, o - 1) + e.slice(i),
-    cursor: o - 1
+function ne(e, s, i) {
+  return s !== i ? { value: e.slice(0, s) + e.slice(i), cursor: s } : s === 0 ? { value: e, cursor: 0 } : {
+    value: e.slice(0, s - 1) + e.slice(i),
+    cursor: s - 1
   };
 }
 function T(e) {
-  return (o, i, m) => ({
-    value: o.slice(0, i) + e + o.slice(m),
+  return (s, i, m) => ({
+    value: s.slice(0, i) + e + s.slice(m),
     cursor: i + e.length
   });
 }
-function ce({
+function me({
   className: e,
-  heightClass: o,
-  initialLayout: i,
+  initialLayout: s,
+  size: i,
   variant: m,
-  color: w,
-  radius: g,
-  keyClassName: $
+  color: K,
+  radius: C,
+  keyClassName: $,
+  portal: j
 }) {
-  const E = Y();
-  if (!E) return null;
-  const { isOpen: h, activeElement: n, config: l, forceClose: S } = E, A = W(), b = l.layouts ?? {}, j = l.display ?? {}, F = o, c = l.defaultLayout ?? L.defaultLayout, H = m ?? l.variant ?? A.defaultVariant ?? L.variant, M = w ?? l.color ?? A.defaultColor ?? L.color, V = g ?? l.radius, [u, v] = C(
-    i ?? c
-  ), [_, R] = C(/* @__PURE__ */ new Set()), [q, N] = C(null);
-  k(() => {
-    h && v(i ?? c);
-  }, [h, i, c]);
-  const z = U(() => (b[u] || b[c] || []).map((a, t) => ({
-    id: `${u}-row-${t}`,
-    keys: a.split(" ").map((f, d) => ({
-      id: `${u}-r${t}-k${d}-${f}`,
+  const L = re();
+  if (!L) return null;
+  const { isOpen: h, activeElement: n, config: c, forceClose: A } = L, R = Q(), v = c.layouts ?? {}, F = c.display ?? {}, a = c.defaultLayout ?? w.defaultLayout, x = i ?? c.size ?? w.size, H = se[x], M = m ?? c.variant ?? R.defaultVariant ?? w.variant, Y = K ?? c.color ?? R.defaultColor ?? w.color, I = C ?? c.radius, V = j ?? c.portal ?? w.portal, Z = te[x], [u, b] = E(
+    s ?? a
+  ), [q, O] = E(/* @__PURE__ */ new Set()), [G, k] = E(null);
+  N(() => {
+    h && b(s ?? a);
+  }, [h, s, a]);
+  const U = J(() => (v[u] || v[a] || []).map((l, r) => ({
+    id: `${u}-row-${r}`,
+    keys: l.split(" ").map((f, d) => ({
+      id: `${u}-r${r}-k${d}-${f}`,
       token: f
     }))
-  })), [b, u, c]);
-  k(() => {
+  })), [v, u, a]);
+  N(() => {
     if (!h) return;
-    const a = (b[u] || []).join(" ").split(" "), t = (s) => s === "Backspace" ? "{bksp}" : s === "Enter" ? "{enter}" : s === " " ? "{space}" : s === "Shift" ? "{shift}" : s.length === 1 && a.includes(s) ? s : null, f = (s) => {
-      if (s.key === "Escape") {
-        S();
+    const l = (v[u] || []).join(" ").split(" "), r = (o) => o === "Backspace" ? "{bksp}" : o === "Enter" ? "{enter}" : o === " " ? "{space}" : o === "Shift" ? "{shift}" : o.length === 1 && l.includes(o) ? o : null, f = (o) => {
+      if (o.key === "Escape") {
+        A();
         return;
       }
-      const p = t(s.key);
-      p && R((x) => new Set(x).add(p));
-    }, d = (s) => {
-      const p = t(s.key);
-      p && R((x) => {
-        const O = new Set(x);
-        return O.delete(p), O;
+      const p = r(o.key);
+      p && O((S) => new Set(S).add(p));
+    }, d = (o) => {
+      const p = r(o.key);
+      p && O((S) => {
+        const D = new Set(S);
+        return D.delete(p), D;
       });
     };
     return window.addEventListener("keydown", f), window.addEventListener("keyup", d), () => {
       window.removeEventListener("keydown", f), window.removeEventListener("keyup", d);
     };
-  }, [h, u, b, S]);
-  const K = B(
-    (r) => {
+  }, [h, u, v, A]);
+  const g = z(
+    (t) => {
       if (!n) return;
-      const a = n.value, t = n.selectionStart ?? a.length, f = n.selectionEnd ?? a.length, { value: d, cursor: s } = r(a, t, f);
-      P(n, d, s);
+      const l = n.value, r = n.selectionStart ?? l.length, f = n.selectionEnd ?? l.length, { value: d, cursor: o } = t(l, r, f);
+      _(n, d, o);
     },
     [n]
-  ), G = B(
-    (r) => {
-      if (r === "{shift}") {
-        v(
-          (t) => t === "shift" ? c : t === c ? "shift" : t
+  ), W = z(
+    (t) => {
+      if (t === "{shift}") {
+        b(
+          (r) => r === "shift" ? a : r === a ? "shift" : r
         );
         return;
       }
-      if (r === "{symbols}") {
-        v("symbols");
+      if (t === "{symbols}") {
+        b("symbols");
         return;
       }
-      if (r === "{abc}") {
-        v(c);
+      if (t === "{abc}") {
+        b(a);
         return;
       }
-      if (r === "{clear}") {
-        n && P(n, "", 0);
+      if (t === "{clear}") {
+        n && _(n, "", 0);
         return;
       }
-      if (r === "{enter}") {
-        (n == null ? void 0 : n.tagName) === "TEXTAREA" ? K(T(`
+      if (t === "{enter}") {
+        (n == null ? void 0 : n.tagName) === "TEXTAREA" ? g(T(`
 `)) : n == null || n.blur();
         return;
       }
-      if (r === "{bksp}") {
-        K(Q);
+      if (t === "{bksp}") {
+        g(ne);
         return;
       }
-      K(T(r === "{space}" ? " " : r)), u === "shift" && l.autoShiftBack && v(c);
+      g(T(t === "{space}" ? " " : t)), u === "shift" && c.autoShiftBack && b(a);
     },
-    [n, K, u, l.autoShiftBack, c]
+    [n, g, u, c.autoShiftBack, a]
   );
-  return h ? /* @__PURE__ */ y(I, { children: /* @__PURE__ */ y(
+  if (!h) return null;
+  const B = /* @__PURE__ */ y(
     "section",
     {
       "aria-label": "Virtual Keyboard",
       className: "fixed inset-x-0 bottom-0 z-9999 pointer-events-auto",
-      onMouseDown: (r) => r.preventDefault(),
+      onMouseDown: (t) => t.preventDefault(),
       children: /* @__PURE__ */ y(
         "div",
         {
-          className: D(
+          className: P(
             "w-full bg-background border-t border-border shadow-2xl flex flex-col select-none",
-            F,
+            H,
             e
           ),
-          children: /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5 p-2 flex-1 min-h-0", children: z.map((r) => /* @__PURE__ */ y("div", { className: "flex gap-1.5 flex-1", children: r.keys.map(({ id: a, token: t }) => {
-            const s = _.has(t) || q === t, p = j[t] ?? t;
+          children: /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5 p-2 flex-1 min-h-0", children: U.map((t) => /* @__PURE__ */ y("div", { className: "flex gap-1.5 flex-1", children: t.keys.map(({ id: l, token: r }) => {
+            const o = q.has(r) || G === r, p = F[r] ?? r;
             return /* @__PURE__ */ y(
-              X,
+              ee,
               {
-                variant: H,
-                color: s ? M : "secondary",
-                radius: V,
-                onClick: () => G(t),
-                onMouseEnter: () => N(t),
-                onMouseLeave: () => N(null),
-                className: D(
-                  "h-full text-lg font-medium p-0 flex items-center justify-center",
-                  J(t),
+                variant: M,
+                color: o ? Y : "secondary",
+                radius: I,
+                size: x,
+                onClick: () => W(r),
+                onMouseEnter: () => k(r),
+                onMouseLeave: () => k(null),
+                className: P(
+                  "font-medium p-0 flex items-center justify-center",
+                  Z,
+                  oe(r),
                   $
                 ),
                 children: p
               },
-              a
+              l
             );
-          }) }, r.id)) })
+          }) }, t.id)) })
         }
       )
     }
-  ) }) : null;
+  );
+  return V ? /* @__PURE__ */ y(X, { children: B }) : B;
 }
 export {
-  ce as OnScreenKeyboard
+  me as OnScreenKeyboard
 };

package/dist/components/keyboard/index.js

@@ -1,4 +1,5 @@
 export * from "./OnScreenKeyboard.js";
 export * from "./keyboard-config.js";
 export * from "./keyboard-context.js";
+export * from "./keyboard-styles.js";
 export * from "./use-keyboard-field.js";

package/dist/components/keyboard/keyboard-config.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Color, Radius, Variant } from '../../shared';
+import { Color, Radius, Size, Variant } from '../../shared';
 /**
  * Standard layout names for the virtual keyboard.
  * - `default`: Lowercase alphabetic layout.
@@ -13,6 +13,12 @@ export type StandardLayoutName = "default" | "shift" | "symbols" | "numeric";
  * Can be either a StandardLayoutName or a custom string identifier.
  */
 export type LayoutName = StandardLayoutName | (string & {});
+/**
+ * Size key for the keyboard.
+ * Maps to the standard Size type: "sm", "md", or "lg".
+ * Controls the height, font size, and padding of keyboard keys.
+ */
+export type KeyboardSizeKey = Size;
 /**
  * Mapping of layout names to arrays of row strings.
  * Each row string contains space-separated key tokens.
@@ -55,6 +61,13 @@ export interface KeyboardConfig {
      * @default true
      */
     autoShiftBack?: boolean;
+    /**
+     * Size scale for keyboard keys.
+     * Controls the height, font size, and padding of individual keys.
+     *
+     * @default "md"
+     */
+    size?: KeyboardSizeKey;
     /**
      * Visual style variant for keyboard keys.
      * @default "solid"
@@ -69,6 +82,17 @@ export interface KeyboardConfig {
      * Corner rounding for keyboard keys.
      */
     radius?: Radius;
+    /**
+     * Whether to render the keyboard in a Floating UI portal.
+     * When true, the keyboard is rendered at the document body level,
+     * escaping any parent DOM hierarchy. This prevents CSS containment,
+     * overflow clipping, and stacking context issues. Defaults to true
+     * because the keyboard should always appear at the bottom of the screen
+     * above all other content.
+     *
+     * @default true
+     */
+    portal?: boolean;
 }
 /**
  * Default keyboard layouts.
@@ -97,7 +121,9 @@ declare module "../../libs/registry" {
  */
 export declare const FALLBACK_KEYBOARD_CONFIG: {
     defaultLayout: string;
+    size: KeyboardSizeKey;
     variant: Variant;
     color: Color;
+    portal: boolean;
 };
 //# sourceMappingURL=keyboard-config.d.ts.map

package/dist/components/keyboard/keyboard-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-config.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/keyboard-config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7E;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAuBpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,aAQ/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAMnC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF;AAID;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;aAEf,OAAO;WACP,KAAK;CAC1B,CAAC"}
+{"version":3,"file":"keyboard-config.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/keyboard-config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7E;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC;AAEnC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAEvD;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAuBpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,aAQ/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAQnC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF;AAID;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;UAErB,eAAe;aACT,OAAO;WACP,KAAK;;CAE1B,CAAC"}

package/dist/components/keyboard/keyboard-config.js

@@ -1,6 +1,6 @@
 "use client";
 import { registerComponentDefaults as e } from "../../libs/registry.js";
-const s = {
+const t = {
   default: [
     "1 2 3 4 5 6 7 8 9 0 {bksp}",
     "q w e r t y u i o p",
@@ -23,7 +23,7 @@ const s = {
     "{abc} , {space} . {enter}"
   ],
   numeric: ["1 2 3 {bksp}", "4 5 6 {clear}", "7 8 9 {enter}", "0 . {space}"]
-}, t = {
+}, s = {
   "{bksp}": "⌫",
   "{enter}": "↵",
   "{shift}": "⇧",
@@ -32,21 +32,25 @@ const s = {
   "{space}": "space",
   "{clear}": "C"
 }, a = {
-  layouts: s,
-  display: t,
+  layouts: t,
+  display: s,
   defaultLayout: "default",
   closeDelay: 500,
-  autoShiftBack: !0
+  autoShiftBack: !0,
+  size: "md",
+  portal: !0
 };
 e("keyboard", a);
 const l = {
   defaultLayout: "default",
+  size: "md",
   variant: "solid",
-  color: "primary"
+  color: "primary",
+  portal: !0
 };
 export {
   l as FALLBACK_KEYBOARD_CONFIG,
-  t as defaultKeyDisplay,
+  s as defaultKeyDisplay,
   a as defaultKeyboardConfig,
-  s as defaultKeyboardLayouts
+  t as defaultKeyboardLayouts
 };

package/dist/components/keyboard/keyboard-context.d.ts

@@ -59,10 +59,6 @@ export interface KeyboardProviderProps extends KeyboardConfig {
      * @default "default"
      */
     defaultLayout?: LayoutName;
-    /**
-     * CSS height class for the keyboard container.
-     */
-    heightClass?: string;
 }
 /**
  * Provider component for the virtual keyboard.
@@ -77,12 +73,13 @@ export interface KeyboardProviderProps extends KeyboardConfig {
  * @param props.layouts - Available keyboard layouts.
  * @param props.display - Display mappings for special keys.
  * @param props.defaultLayout - Default layout name. Defaults to "default".
- * @param props.heightClass - CSS height class for the keyboard.
+ * @param props.size - Size scale for keyboard keys. Defaults to "md".
  * @param props.autoShiftBack - Auto switch back from shift. Defaults to true.
  * @param props.closeDelay - Close delay in milliseconds. Defaults to 120.
  * @param props.variant - Visual variant for keys.
  * @param props.color - Theme color for keys.
  * @param props.radius - Corner rounding for keys.
+ * @param props.portal - Whether to render the keyboard in a portal. Defaults to true.
  *
  * @example
  * ```tsx
@@ -90,7 +87,7 @@ export interface KeyboardProviderProps extends KeyboardConfig {
  *
  * export function App() {
  *   return (
- *     <KeyboardProvider heightClass="h-56">
+ *     <KeyboardProvider size="lg">
  *       <Input
  *         label="Search"
  *         enableVirtualKeyboard
@@ -104,7 +101,7 @@ export interface KeyboardProviderProps extends KeyboardConfig {
  * @see useKeyboard - Hook for accessing the keyboard context.
  * @see OnScreenKeyboard - The keyboard UI component.
  */
-export declare function KeyboardProvider({ children, layouts, display, defaultLayout, heightClass, autoShiftBack, closeDelay, variant, color, radius, }: KeyboardProviderProps): import("react").JSX.Element;
+export declare function KeyboardProvider({ children, layouts, display, defaultLayout, size, autoShiftBack, closeDelay, variant, color, radius, portal: portalProp, }: KeyboardProviderProps): import("react").JSX.Element;
 /**
  * Hook for accessing the keyboard context.
  * Must be used within a KeyboardProvider.

package/dist/components/keyboard/keyboard-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-context.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/keyboard-context.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,aAAa,EAAE,eAAe,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAC;IAExD;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,qDAAkD,CAAC;AAE/E;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAAa,EACb,WAAW,EACX,aAAa,EACb,UAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,+BAmHvB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,wBAM1B"}
+{"version":3,"file":"keyboard-context.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/keyboard-context.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,UAAU,EAChB,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,aAAa,EAAE,eAAe,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,eAAe,KAAK,IAAI,CAAC;IAExD;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,qDAAkD,CAAC;AAE/E;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAAa,EACb,IAAI,EACJ,aAAa,EACb,UAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,MAAM,EAAE,UAAU,GACnB,EAAE,qBAAqB,+BAwHvB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,wBAM1B"}