asheeui 0.6.8 → 0.6.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/autocomplete/Autocomplete.d.ts +34 -17
- package/dist/components/autocomplete/Autocomplete.d.ts.map +1 -1
- package/dist/components/autocomplete/Autocomplete.js +86 -102
- package/dist/components/autocomplete/autocomplete-config.d.ts +4 -22
- package/dist/components/autocomplete/autocomplete-config.d.ts.map +1 -1
- package/dist/components/autocomplete/autocomplete-config.js +8 -11
- package/dist/components/button/Button.d.ts +31 -5
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +68 -64
- package/dist/components/card/Card.d.ts +58 -54
- package/dist/components/card/Card.d.ts.map +1 -1
- package/dist/components/card/Card.js +152 -158
- package/dist/components/card/card-config.d.ts +66 -33
- package/dist/components/card/card-config.d.ts.map +1 -1
- package/dist/components/card/card-config.js +9 -9
- package/dist/components/date-picker/Calendar.d.ts +57 -0
- package/dist/components/date-picker/Calendar.d.ts.map +1 -0
- package/dist/components/date-picker/Calendar.js +224 -0
- package/dist/components/date-picker/DatePicker.d.ts +68 -155
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js +194 -466
- package/dist/components/date-picker/TimeSpinner.d.ts +46 -0
- package/dist/components/date-picker/TimeSpinner.d.ts.map +1 -0
- package/dist/components/date-picker/TimeSpinner.js +84 -0
- package/dist/components/date-picker/date-picker-config.d.ts +24 -3
- package/dist/components/date-picker/date-picker-config.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker-config.js +9 -12
- package/dist/components/date-picker/date-picker-styles.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker-styles.js +4 -11
- package/dist/components/date-picker/date-picker.helpers.d.ts +111 -0
- package/dist/components/date-picker/date-picker.helpers.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.helpers.js +110 -0
- package/dist/components/date-picker/index.js +3 -0
- package/dist/components/input/Input.d.ts +13 -7
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +96 -91
- package/dist/components/keyboard/KeyboardContext.d.ts +130 -0
- package/dist/components/keyboard/KeyboardContext.d.ts.map +1 -0
- package/dist/components/keyboard/KeyboardContext.js +13 -0
- package/dist/components/keyboard/KeyboardProvider.d.ts +78 -0
- package/dist/components/keyboard/KeyboardProvider.d.ts.map +1 -0
- package/dist/components/keyboard/KeyboardProvider.js +183 -0
- package/dist/components/keyboard/OnScreenKeyboard.d.ts +65 -43
- package/dist/components/keyboard/OnScreenKeyboard.d.ts.map +1 -1
- package/dist/components/keyboard/OnScreenKeyboard.js +119 -113
- package/dist/components/keyboard/index.d.ts +2 -1
- package/dist/components/keyboard/index.d.ts.map +1 -1
- package/dist/components/keyboard/index.js +2 -1
- package/dist/components/keyboard/keyboard-config.d.ts +40 -36
- package/dist/components/keyboard/keyboard-config.d.ts.map +1 -1
- package/dist/components/keyboard/keyboard-config.js +15 -10
- package/dist/components/keyboard/use-keyboard-field.d.ts +6 -4
- package/dist/components/keyboard/use-keyboard-field.d.ts.map +1 -1
- package/dist/components/keyboard/use-keyboard-field.js +12 -12
- package/dist/components/multi-select/MultiSelect.d.ts +75 -40
- package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
- package/dist/components/multi-select/MultiSelect.js +188 -187
- package/dist/components/multi-select/multi-select-config.d.ts +4 -22
- package/dist/components/multi-select/multi-select-config.d.ts.map +1 -1
- package/dist/components/multi-select/multi-select-config.js +11 -14
- package/dist/components/radio/radio-config.d.ts +3 -2
- package/dist/components/radio/radio-config.d.ts.map +1 -1
- package/dist/components/radio/radio-config.js +9 -8
- package/dist/components/select/Select.d.ts +60 -45
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +147 -159
- package/dist/components/select/select-config.d.ts +5 -33
- package/dist/components/select/select-config.d.ts.map +1 -1
- package/dist/components/select/select-config.js +6 -13
- package/dist/components/select/select-styles.js +1 -6
- package/dist/components/select-menu/SelectMenu.d.ts +45 -30
- package/dist/components/select-menu/SelectMenu.d.ts.map +1 -1
- package/dist/components/select-menu/SelectMenu.js +125 -124
- package/dist/components/select-menu/select-menu-config.d.ts +25 -2
- package/dist/components/select-menu/select-menu-config.d.ts.map +1 -1
- package/dist/components/select-menu/select-menu-config.js +4 -3
- package/dist/components/switch/Switch.d.ts +9 -33
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +68 -74
- package/dist/components/switch/switch-config.d.ts +3 -2
- package/dist/components/switch/switch-config.d.ts.map +1 -1
- package/dist/components/switch/switch-config.js +6 -5
- package/dist/components/switch/switch-styles.d.ts +1 -6
- package/dist/components/switch/switch-styles.d.ts.map +1 -1
- package/dist/components/switch/switch-styles.js +6 -12
- package/dist/components/textarea/Textarea.d.ts +19 -1
- package/dist/components/textarea/Textarea.d.ts.map +1 -1
- package/dist/components/textarea/Textarea.js +95 -90
- package/dist/components/toast/ToastContext.d.ts +122 -0
- package/dist/components/toast/ToastContext.d.ts.map +1 -0
- package/dist/components/toast/ToastContext.js +28 -0
- package/dist/components/toast/ToastProvider.d.ts +98 -0
- package/dist/components/toast/ToastProvider.d.ts.map +1 -0
- package/dist/components/toast/ToastProvider.js +192 -0
- package/dist/components/toast/index.d.ts +2 -1
- package/dist/components/toast/index.d.ts.map +1 -1
- package/dist/components/toast/index.js +2 -1
- package/dist/components/toast/toast-config.d.ts +36 -0
- package/dist/components/toast/toast-config.d.ts.map +1 -1
- package/dist/components/toast/toast-styles.d.ts +8 -0
- package/dist/components/toast/toast-styles.d.ts.map +1 -1
- package/dist/components/toast/toast-styles.js +11 -3
- package/dist/icons/ChevronUpIcon.d.ts +3 -0
- package/dist/icons/ChevronUpIcon.d.ts.map +1 -0
- package/dist/icons/ChevronUpIcon.js +21 -0
- package/dist/icons/index.d.ts +2 -0
- package/dist/icons/index.d.ts.map +1 -1
- package/dist/index.js +62 -59
- package/dist/theme/color.js +2 -2
- package/package.json +1 -1
- package/dist/components/keyboard/keyboard-context.d.ts +0 -118
- package/dist/components/keyboard/keyboard-context.d.ts.map +0 -1
- package/dist/components/keyboard/keyboard-context.js +0 -90
- package/dist/components/toast/toast-context.d.ts +0 -163
- package/dist/components/toast/toast-context.d.ts.map +0 -1
- package/dist/components/toast/toast-context.js +0 -177
|
@@ -1,26 +1,66 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Color, Radius, Variant } from '../../shared';
|
|
2
|
+
import { KeyboardElement } from './KeyboardContext';
|
|
3
|
+
import { KeyboardConfig, KeyboardSizeKey, LayoutName } from './keyboard-config';
|
|
2
4
|
/**
|
|
3
5
|
* Props for the OnScreenKeyboard component.
|
|
4
6
|
*/
|
|
5
|
-
export interface OnScreenKeyboardProps
|
|
7
|
+
export interface OnScreenKeyboardProps {
|
|
6
8
|
/**
|
|
7
|
-
*
|
|
9
|
+
* Whether the keyboard is open.
|
|
8
10
|
*/
|
|
9
|
-
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* The currently active input element.
|
|
14
|
+
*/
|
|
15
|
+
activeElement: KeyboardElement | null;
|
|
16
|
+
/**
|
|
17
|
+
* The keyboard configuration.
|
|
18
|
+
*/
|
|
19
|
+
config: KeyboardConfig;
|
|
20
|
+
/**
|
|
21
|
+
* The current layout name.
|
|
22
|
+
*/
|
|
23
|
+
currentLayout: LayoutName;
|
|
10
24
|
/**
|
|
11
|
-
*
|
|
25
|
+
* Function to set the layout.
|
|
12
26
|
*/
|
|
13
|
-
|
|
27
|
+
setLayout: (layout: LayoutName) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Function to force close the keyboard.
|
|
30
|
+
*/
|
|
31
|
+
forceClose: () => void;
|
|
32
|
+
/**
|
|
33
|
+
* Size scale for keyboard keys.
|
|
34
|
+
*/
|
|
35
|
+
size: KeyboardSizeKey;
|
|
36
|
+
/**
|
|
37
|
+
* Visual variant for keys.
|
|
38
|
+
*/
|
|
39
|
+
variant: Variant;
|
|
40
|
+
/**
|
|
41
|
+
* Theme color for keys.
|
|
42
|
+
*/
|
|
43
|
+
color: Color;
|
|
44
|
+
/**
|
|
45
|
+
* Corner rounding for keys.
|
|
46
|
+
*/
|
|
47
|
+
radius: Radius;
|
|
48
|
+
/**
|
|
49
|
+
* Whether to render the keyboard in a portal.
|
|
50
|
+
*/
|
|
51
|
+
portal: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Extra CSS classes for the keyboard container.
|
|
54
|
+
*/
|
|
55
|
+
className?: string;
|
|
14
56
|
/**
|
|
15
57
|
* Extra CSS classes for individual keys.
|
|
16
58
|
*/
|
|
17
59
|
keyClassName?: string;
|
|
18
60
|
/**
|
|
19
|
-
* Whether
|
|
20
|
-
* When true, the keyboard is rendered at the document body level.
|
|
21
|
-
* Defaults to true.
|
|
61
|
+
* Whether the keyboard is globally disabled.
|
|
22
62
|
*/
|
|
23
|
-
|
|
63
|
+
disabled?: boolean;
|
|
24
64
|
}
|
|
25
65
|
/**
|
|
26
66
|
* The on-screen virtual keyboard UI.
|
|
@@ -31,44 +71,26 @@ export interface OnScreenKeyboardProps extends KeyboardConfig {
|
|
|
31
71
|
* management, physical keyboard synchronization, and visual feedback
|
|
32
72
|
* for pressed keys.
|
|
33
73
|
*
|
|
34
|
-
* The component is controlled by the
|
|
35
|
-
*
|
|
36
|
-
* based on the context state.
|
|
37
|
-
*
|
|
38
|
-
* By default, the keyboard uses FloatingPortal to render at the document
|
|
39
|
-
* body level. This ensures the keyboard appears at the bottom of the screen
|
|
40
|
-
* regardless of where the input is in the DOM tree, escaping CSS containment,
|
|
41
|
-
* overflow clipping, and stacking context issues. The portal can be disabled
|
|
42
|
-
* via the `portal` prop or `components.keyboard.portal` in the config if the
|
|
43
|
-
* keyboard needs to stay within a specific parent container.
|
|
74
|
+
* The component is controlled by the KeyboardProvider and should not be
|
|
75
|
+
* used directly. It automatically shows and hides based on the provider state.
|
|
44
76
|
*
|
|
45
77
|
* @param props - OnScreenKeyboard configuration options.
|
|
46
|
-
* @param props.
|
|
47
|
-
* @param props.
|
|
48
|
-
* @param props.
|
|
49
|
-
* @param props.
|
|
50
|
-
* @param props.
|
|
78
|
+
* @param props.isOpen - Whether the keyboard is open.
|
|
79
|
+
* @param props.activeElement - The active input element.
|
|
80
|
+
* @param props.config - The keyboard configuration.
|
|
81
|
+
* @param props.currentLayout - The current layout name.
|
|
82
|
+
* @param props.setLayout - Function to set the layout.
|
|
83
|
+
* @param props.forceClose - Function to force close the keyboard.
|
|
84
|
+
* @param props.size - Size scale for keys.
|
|
51
85
|
* @param props.variant - Visual variant for keys.
|
|
52
86
|
* @param props.color - Theme color for keys.
|
|
53
87
|
* @param props.radius - Corner rounding for keys.
|
|
54
|
-
* @param props.portal - Whether to render
|
|
55
|
-
*
|
|
56
|
-
* @
|
|
57
|
-
*
|
|
58
|
-
* import { KeyboardProvider, OnScreenKeyboard, Input } from "asheeui";
|
|
59
|
-
*
|
|
60
|
-
* export function App() {
|
|
61
|
-
* return (
|
|
62
|
-
* <KeyboardProvider size="lg">
|
|
63
|
-
* <Input label="Search" enableVirtualKeyboard />
|
|
64
|
-
* <OnScreenKeyboard />
|
|
65
|
-
* </KeyboardProvider>
|
|
66
|
-
* );
|
|
67
|
-
* }
|
|
68
|
-
* ```
|
|
88
|
+
* @param props.portal - Whether to render in a portal.
|
|
89
|
+
* @param props.className - Extra CSS classes.
|
|
90
|
+
* @param props.keyClassName - Extra CSS classes for keys.
|
|
91
|
+
* @param props.disabled - Whether the keyboard is disabled.
|
|
69
92
|
*
|
|
70
|
-
* @
|
|
71
|
-
* @see useKeyboardField - Hook for connecting inputs to the keyboard.
|
|
93
|
+
* @internal This component is used internally by KeyboardProvider.
|
|
72
94
|
*/
|
|
73
|
-
export declare function OnScreenKeyboard({
|
|
95
|
+
export declare function OnScreenKeyboard({ isOpen, activeElement, config, currentLayout, setLayout, forceClose, size, variant, color, radius, portal, className, keyClassName, disabled, }: OnScreenKeyboardProps): import("react").JSX.Element | null;
|
|
74
96
|
//# sourceMappingURL=OnScreenKeyboard.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnScreenKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/OnScreenKeyboard.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"OnScreenKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/OnScreenKeyboard.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,UAAU,EACX,MAAM,mBAAmB,CAAC;AA0E3B;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,aAAa,EAAE,eAAe,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,MAAM,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,aAAa,EAAE,UAAU,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IAEtB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;IAEb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,aAAa,EACb,MAAM,EACN,aAAa,EACb,SAAS,EACT,UAAU,EACV,IAAI,EACJ,OAAO,EACP,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,YAAY,EACZ,QAAgB,GACjB,EAAE,qBAAqB,sCAuNvB"}
|
|
@@ -1,166 +1,172 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { FloatingPortal as
|
|
4
|
-
import { useState as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
function oe(e) {
|
|
12
|
-
return e === "{space}" ? "flex-[4]" : ["{bksp}", "{enter}", "{shift}", "{symbols}", "{abc}", "{clear}"].includes(
|
|
13
|
-
e
|
|
2
|
+
import { jsx as p } from "react/jsx-runtime";
|
|
3
|
+
import { FloatingPortal as V } from "@floating-ui/react";
|
|
4
|
+
import { useState as R, useEffect as k, useMemo as W, useCallback as v } from "react";
|
|
5
|
+
import { Button as X } from "../button/Button.js";
|
|
6
|
+
import { KEYBOARD_KEY_SIZE_CLASS as D, KEYBOARD_SIZE_CLASS as N } from "./keyboard-styles.js";
|
|
7
|
+
import { cn as B } from "../../utils/cn.js";
|
|
8
|
+
function z(r) {
|
|
9
|
+
return r === "{space}" ? "flex-[4]" : ["{bksp}", "{enter}", "{shift}", "{symbols}", "{abc}", "{clear}"].includes(
|
|
10
|
+
r
|
|
14
11
|
) ? "flex-[1.6]" : "flex-1";
|
|
15
12
|
}
|
|
16
|
-
function
|
|
17
|
-
var
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
function P(r, e, i) {
|
|
14
|
+
var h;
|
|
15
|
+
const t = Object.getPrototypeOf(r), c = (h = Object.getOwnPropertyDescriptor(t, "value")) == null ? void 0 : h.set;
|
|
16
|
+
c ? c.call(r, e) : r.value = e, r.dispatchEvent(new Event("input", { bubbles: !0 })), requestAnimationFrame(() => {
|
|
17
|
+
r.focus(), r.setSelectionRange(i, i);
|
|
21
18
|
});
|
|
22
19
|
}
|
|
23
|
-
function
|
|
24
|
-
return
|
|
25
|
-
value:
|
|
26
|
-
cursor:
|
|
20
|
+
function G(r, e, i) {
|
|
21
|
+
return e !== i ? { value: r.slice(0, e) + r.slice(i), cursor: e } : e === 0 ? { value: r, cursor: 0 } : {
|
|
22
|
+
value: r.slice(0, e - 1) + r.slice(i),
|
|
23
|
+
cursor: e - 1
|
|
27
24
|
};
|
|
28
25
|
}
|
|
29
|
-
function T(
|
|
30
|
-
return (
|
|
31
|
-
value:
|
|
32
|
-
cursor: i +
|
|
26
|
+
function T(r) {
|
|
27
|
+
return (e, i, t) => ({
|
|
28
|
+
value: e.slice(0, i) + r + e.slice(t),
|
|
29
|
+
cursor: i + r.length
|
|
33
30
|
});
|
|
34
31
|
}
|
|
35
|
-
function
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
32
|
+
function ne({
|
|
33
|
+
isOpen: r,
|
|
34
|
+
activeElement: e,
|
|
35
|
+
config: i,
|
|
36
|
+
currentLayout: t,
|
|
37
|
+
setLayout: c,
|
|
38
|
+
forceClose: h,
|
|
39
|
+
size: S,
|
|
40
|
+
variant: $,
|
|
41
|
+
color: j,
|
|
42
|
+
radius: _,
|
|
43
|
+
portal: H,
|
|
44
|
+
className: M,
|
|
45
|
+
keyClassName: O,
|
|
46
|
+
disabled: w = !1
|
|
44
47
|
}) {
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
id: `${u}-row-${r}`,
|
|
55
|
-
keys: l.split(" ").map((f, d) => ({
|
|
56
|
-
id: `${u}-r${r}-k${d}-${f}`,
|
|
57
|
-
token: f
|
|
48
|
+
const b = i.layouts ?? {}, Y = i.display ?? {}, f = i.defaultLayout ?? "default", x = i.autoShiftBack ?? !0, [F, K] = R(/* @__PURE__ */ new Set()), [I, g] = R(null);
|
|
49
|
+
k(() => {
|
|
50
|
+
r && c(f);
|
|
51
|
+
}, [r, f, c]);
|
|
52
|
+
const Z = W(() => (b[t] || b[f] || []).map((l, n) => ({
|
|
53
|
+
id: `${t}-row-${n}`,
|
|
54
|
+
keys: l.split(" ").map((u, a) => ({
|
|
55
|
+
id: `${t}-r${n}-k${a}-${u}`,
|
|
56
|
+
token: u
|
|
58
57
|
}))
|
|
59
|
-
})), [
|
|
60
|
-
|
|
61
|
-
if (!
|
|
62
|
-
const l = (
|
|
58
|
+
})), [b, t, f]);
|
|
59
|
+
k(() => {
|
|
60
|
+
if (!r || w) return;
|
|
61
|
+
const l = (b[t] || []).join(" ").split(" "), n = (o) => o === "Backspace" ? "{bksp}" : o === "Enter" ? "{enter}" : o === " " ? "{space}" : o === "Shift" ? "{shift}" : o.length === 1 && l.includes(o) ? o : null, u = (o) => {
|
|
63
62
|
if (o.key === "Escape") {
|
|
64
|
-
|
|
63
|
+
h();
|
|
65
64
|
return;
|
|
66
65
|
}
|
|
67
|
-
const
|
|
68
|
-
|
|
69
|
-
},
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
const
|
|
73
|
-
return
|
|
66
|
+
const d = n(o.key);
|
|
67
|
+
d && K((m) => new Set(m).add(d));
|
|
68
|
+
}, a = (o) => {
|
|
69
|
+
const d = n(o.key);
|
|
70
|
+
d && K((m) => {
|
|
71
|
+
const A = new Set(m);
|
|
72
|
+
return A.delete(d), A;
|
|
74
73
|
});
|
|
75
74
|
};
|
|
76
|
-
return window.addEventListener("keydown",
|
|
77
|
-
window.removeEventListener("keydown",
|
|
75
|
+
return window.addEventListener("keydown", u), window.addEventListener("keyup", a), () => {
|
|
76
|
+
window.removeEventListener("keydown", u), window.removeEventListener("keyup", a);
|
|
78
77
|
};
|
|
79
|
-
}, [
|
|
80
|
-
const
|
|
81
|
-
(
|
|
82
|
-
if (!
|
|
83
|
-
const l =
|
|
84
|
-
|
|
78
|
+
}, [r, t, b, h, w]);
|
|
79
|
+
const y = v(
|
|
80
|
+
(s) => {
|
|
81
|
+
if (!e) return;
|
|
82
|
+
const l = e.value, n = e.selectionStart ?? l.length, u = e.selectionEnd ?? l.length, { value: a, cursor: o } = s(l, n, u);
|
|
83
|
+
P(e, a, o);
|
|
85
84
|
},
|
|
86
|
-
[
|
|
87
|
-
),
|
|
88
|
-
(
|
|
89
|
-
if (
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
);
|
|
85
|
+
[e]
|
|
86
|
+
), q = v(
|
|
87
|
+
(s) => {
|
|
88
|
+
if (w) return;
|
|
89
|
+
if (s === "{shift}") {
|
|
90
|
+
c(t === "shift" ? f : t === f ? "shift" : t);
|
|
93
91
|
return;
|
|
94
92
|
}
|
|
95
|
-
if (
|
|
96
|
-
|
|
93
|
+
if (s === "{symbols}") {
|
|
94
|
+
c("symbols");
|
|
97
95
|
return;
|
|
98
96
|
}
|
|
99
|
-
if (
|
|
100
|
-
|
|
97
|
+
if (s === "{abc}") {
|
|
98
|
+
c(f);
|
|
101
99
|
return;
|
|
102
100
|
}
|
|
103
|
-
if (
|
|
104
|
-
|
|
101
|
+
if (s === "{clear}") {
|
|
102
|
+
e && P(e, "", 0);
|
|
105
103
|
return;
|
|
106
104
|
}
|
|
107
|
-
if (
|
|
108
|
-
(
|
|
109
|
-
`)) :
|
|
105
|
+
if (s === "{enter}") {
|
|
106
|
+
(e == null ? void 0 : e.tagName) === "TEXTAREA" ? y(T(`
|
|
107
|
+
`)) : e == null || e.blur();
|
|
110
108
|
return;
|
|
111
109
|
}
|
|
112
|
-
if (
|
|
113
|
-
|
|
110
|
+
if (s === "{bksp}") {
|
|
111
|
+
y(G);
|
|
114
112
|
return;
|
|
115
113
|
}
|
|
116
|
-
|
|
114
|
+
y(T(s === "{space}" ? " " : s)), t === "shift" && x && c(f);
|
|
117
115
|
},
|
|
118
|
-
[
|
|
116
|
+
[
|
|
117
|
+
e,
|
|
118
|
+
y,
|
|
119
|
+
t,
|
|
120
|
+
x,
|
|
121
|
+
f,
|
|
122
|
+
w,
|
|
123
|
+
c
|
|
124
|
+
]
|
|
119
125
|
);
|
|
120
|
-
if (!
|
|
121
|
-
const
|
|
126
|
+
if (!r || w) return null;
|
|
127
|
+
const E = N[S] || N.md, U = D[S] || D.md, C = /* @__PURE__ */ p(
|
|
122
128
|
"section",
|
|
123
129
|
{
|
|
124
130
|
"aria-label": "Virtual Keyboard",
|
|
125
131
|
className: "fixed inset-x-0 bottom-0 z-9999 pointer-events-auto",
|
|
126
|
-
onMouseDown: (
|
|
127
|
-
children: /* @__PURE__ */
|
|
132
|
+
onMouseDown: (s) => s.preventDefault(),
|
|
133
|
+
children: /* @__PURE__ */ p(
|
|
128
134
|
"div",
|
|
129
135
|
{
|
|
130
|
-
className:
|
|
136
|
+
className: B(
|
|
131
137
|
"w-full bg-background border-t border-border shadow-2xl flex flex-col select-none",
|
|
132
|
-
|
|
133
|
-
|
|
138
|
+
E,
|
|
139
|
+
M
|
|
134
140
|
),
|
|
135
|
-
children: /* @__PURE__ */
|
|
136
|
-
const o =
|
|
137
|
-
return /* @__PURE__ */
|
|
138
|
-
|
|
141
|
+
children: /* @__PURE__ */ p("div", { className: "flex flex-col gap-1.5 p-2 flex-1 min-h-0", children: Z.map((s) => /* @__PURE__ */ p("div", { className: "flex gap-1.5 flex-1", children: s.keys.map(({ id: l, token: n }) => {
|
|
142
|
+
const o = F.has(n) || I === n, d = Y[n] ?? n;
|
|
143
|
+
return /* @__PURE__ */ p(
|
|
144
|
+
X,
|
|
139
145
|
{
|
|
140
|
-
variant:
|
|
141
|
-
color: o ?
|
|
142
|
-
radius:
|
|
143
|
-
size:
|
|
144
|
-
onClick: () =>
|
|
145
|
-
onMouseEnter: () =>
|
|
146
|
-
onMouseLeave: () =>
|
|
147
|
-
className:
|
|
146
|
+
variant: $,
|
|
147
|
+
color: o ? j : "secondary",
|
|
148
|
+
radius: _,
|
|
149
|
+
size: S,
|
|
150
|
+
onClick: () => q(n),
|
|
151
|
+
onMouseEnter: () => g(n),
|
|
152
|
+
onMouseLeave: () => g(null),
|
|
153
|
+
className: B(
|
|
148
154
|
"font-medium p-0 flex items-center justify-center",
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
155
|
+
U,
|
|
156
|
+
z(n),
|
|
157
|
+
O
|
|
152
158
|
),
|
|
153
|
-
children:
|
|
159
|
+
children: d
|
|
154
160
|
},
|
|
155
161
|
l
|
|
156
162
|
);
|
|
157
|
-
}) },
|
|
163
|
+
}) }, s.id)) })
|
|
158
164
|
}
|
|
159
165
|
)
|
|
160
166
|
}
|
|
161
167
|
);
|
|
162
|
-
return
|
|
168
|
+
return H ? /* @__PURE__ */ p(V, { children: C }) : C;
|
|
163
169
|
}
|
|
164
170
|
export {
|
|
165
|
-
|
|
171
|
+
ne as OnScreenKeyboard
|
|
166
172
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
export * from "./KeyboardContext.js";
|
|
2
|
+
export * from "./KeyboardProvider.js";
|
|
1
3
|
export * from "./OnScreenKeyboard.js";
|
|
2
4
|
export * from "./keyboard-config.js";
|
|
3
|
-
export * from "./keyboard-context.js";
|
|
4
5
|
export * from "./keyboard-styles.js";
|
|
5
6
|
export * from "./use-keyboard-field.js";
|
|
@@ -29,13 +29,39 @@ export type KeyboardLayouts = Record<string, string[]>;
|
|
|
29
29
|
* Used to render special keys with icons or custom labels.
|
|
30
30
|
*/
|
|
31
31
|
export type KeyDisplayMap = Record<string, ReactNode>;
|
|
32
|
+
/**
|
|
33
|
+
* Per-keyboard styling options that can override provider defaults.
|
|
34
|
+
*/
|
|
35
|
+
export interface KeyboardStylingOptions {
|
|
36
|
+
/**
|
|
37
|
+
* Size scale for keyboard keys.
|
|
38
|
+
* Controls the height, font size, and padding of individual keys.
|
|
39
|
+
*/
|
|
40
|
+
size?: KeyboardSizeKey;
|
|
41
|
+
/**
|
|
42
|
+
* Visual style variant for keyboard keys.
|
|
43
|
+
*/
|
|
44
|
+
variant?: Variant;
|
|
45
|
+
/**
|
|
46
|
+
* Theme accent color for keyboard keys.
|
|
47
|
+
*/
|
|
48
|
+
color?: Color;
|
|
49
|
+
/**
|
|
50
|
+
* Corner rounding for keyboard keys.
|
|
51
|
+
*/
|
|
52
|
+
radius?: Radius;
|
|
53
|
+
/**
|
|
54
|
+
* Whether to render the keyboard in a Floating UI portal.
|
|
55
|
+
*/
|
|
56
|
+
portal?: boolean;
|
|
57
|
+
}
|
|
32
58
|
/**
|
|
33
59
|
* Theme configuration options for the Keyboard component.
|
|
34
60
|
*
|
|
35
61
|
* Set under `components.keyboard` in the AsheeUI config. Values feed the
|
|
36
62
|
* component-level fallback tier of the theme cascade.
|
|
37
63
|
*/
|
|
38
|
-
export interface KeyboardConfig {
|
|
64
|
+
export interface KeyboardConfig extends KeyboardStylingOptions {
|
|
39
65
|
/**
|
|
40
66
|
* The layouts available for the keyboard.
|
|
41
67
|
* Maps layout names to arrays of row strings.
|
|
@@ -62,37 +88,11 @@ export interface KeyboardConfig {
|
|
|
62
88
|
*/
|
|
63
89
|
autoShiftBack?: boolean;
|
|
64
90
|
/**
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
* @default "md"
|
|
69
|
-
*/
|
|
70
|
-
size?: KeyboardSizeKey;
|
|
71
|
-
/**
|
|
72
|
-
* Visual style variant for keyboard keys.
|
|
73
|
-
* @default "solid"
|
|
74
|
-
*/
|
|
75
|
-
variant?: Variant;
|
|
76
|
-
/**
|
|
77
|
-
* Theme accent color for keyboard keys.
|
|
78
|
-
* @default "primary"
|
|
79
|
-
*/
|
|
80
|
-
color?: Color;
|
|
81
|
-
/**
|
|
82
|
-
* Corner rounding for keyboard keys.
|
|
91
|
+
* Whether the keyboard system is globally disabled.
|
|
92
|
+
* When true, all keyboard interactions are prevented.
|
|
93
|
+
* @default false
|
|
83
94
|
*/
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Whether to render the keyboard in a Floating UI portal.
|
|
87
|
-
* When true, the keyboard is rendered at the document body level,
|
|
88
|
-
* escaping any parent DOM hierarchy. This prevents CSS containment,
|
|
89
|
-
* overflow clipping, and stacking context issues. Defaults to true
|
|
90
|
-
* because the keyboard should always appear at the bottom of the screen
|
|
91
|
-
* above all other content.
|
|
92
|
-
*
|
|
93
|
-
* @default true
|
|
94
|
-
*/
|
|
95
|
-
portal?: boolean;
|
|
95
|
+
disabled?: boolean;
|
|
96
96
|
}
|
|
97
97
|
/**
|
|
98
98
|
* Default keyboard layouts.
|
|
@@ -120,10 +120,14 @@ declare module "../../libs/registry" {
|
|
|
120
120
|
* and global defaults are all undefined.
|
|
121
121
|
*/
|
|
122
122
|
export declare const FALLBACK_KEYBOARD_CONFIG: {
|
|
123
|
-
defaultLayout:
|
|
124
|
-
size: KeyboardSizeKey;
|
|
125
|
-
variant: Variant;
|
|
126
|
-
color: Color;
|
|
127
|
-
|
|
123
|
+
readonly defaultLayout: LayoutName;
|
|
124
|
+
readonly size: KeyboardSizeKey;
|
|
125
|
+
readonly variant: Variant;
|
|
126
|
+
readonly color: Color;
|
|
127
|
+
readonly radius: Radius;
|
|
128
|
+
readonly portal: true;
|
|
129
|
+
readonly disabled: false;
|
|
130
|
+
readonly closeDelay: 500;
|
|
131
|
+
readonly autoShiftBack: true;
|
|
128
132
|
};
|
|
129
133
|
//# sourceMappingURL=keyboard-config.d.ts.map
|
|
@@ -1 +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,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
|
|
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,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;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D;;;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;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;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,cASnC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,QAAQ,EAAE,cAAc,CAAC;KAC1B;CACF;AAID;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;4BACP,UAAU;mBACxB,eAAe;sBACT,OAAO;oBACP,KAAK;qBACT,MAAM;;;;;CAKd,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { registerComponentDefaults as e } from "../../libs/registry.js";
|
|
3
|
-
const
|
|
3
|
+
const a = {
|
|
4
4
|
default: [
|
|
5
5
|
"1 2 3 4 5 6 7 8 9 0 {bksp}",
|
|
6
6
|
"q w e r t y u i o p",
|
|
@@ -31,26 +31,31 @@ const t = {
|
|
|
31
31
|
"{abc}": "ABC",
|
|
32
32
|
"{space}": "space",
|
|
33
33
|
"{clear}": "C"
|
|
34
|
-
},
|
|
35
|
-
layouts:
|
|
34
|
+
}, t = {
|
|
35
|
+
layouts: a,
|
|
36
36
|
display: s,
|
|
37
37
|
defaultLayout: "default",
|
|
38
38
|
closeDelay: 500,
|
|
39
39
|
autoShiftBack: !0,
|
|
40
40
|
size: "md",
|
|
41
|
-
portal: !0
|
|
41
|
+
portal: !0,
|
|
42
|
+
disabled: !1
|
|
42
43
|
};
|
|
43
|
-
e("keyboard",
|
|
44
|
-
const
|
|
44
|
+
e("keyboard", t);
|
|
45
|
+
const o = {
|
|
45
46
|
defaultLayout: "default",
|
|
46
47
|
size: "md",
|
|
47
48
|
variant: "solid",
|
|
48
49
|
color: "primary",
|
|
49
|
-
|
|
50
|
+
radius: "md",
|
|
51
|
+
portal: !0,
|
|
52
|
+
disabled: !1,
|
|
53
|
+
closeDelay: 500,
|
|
54
|
+
autoShiftBack: !0
|
|
50
55
|
};
|
|
51
56
|
export {
|
|
52
|
-
|
|
57
|
+
o as FALLBACK_KEYBOARD_CONFIG,
|
|
53
58
|
s as defaultKeyDisplay,
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
t as defaultKeyboardConfig,
|
|
60
|
+
a as defaultKeyboardLayouts
|
|
56
61
|
};
|