asheeui 0.6.8 → 0.6.9
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 +2 -20
- package/dist/components/autocomplete/autocomplete-config.d.ts.map +1 -1
- package/dist/components/autocomplete/autocomplete-config.js +9 -13
- 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 +21 -1
- package/dist/components/date-picker/date-picker-config.d.ts.map +1 -1
- package/dist/components/date-picker/date-picker-config.js +10 -14
- 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 -188
- package/dist/components/multi-select/multi-select-config.d.ts +2 -20
- package/dist/components/multi-select/multi-select-config.d.ts.map +1 -1
- package/dist/components/multi-select/multi-select-config.js +10 -14
- 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 +3 -29
- package/dist/components/select/select-config.d.ts.map +1 -1
- package/dist/components/select/select-config.js +6 -14
- 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-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 +188 -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/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,138 +1,143 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import
|
|
2
|
+
import { jsx as c, jsxs as q } from "react/jsx-runtime";
|
|
3
|
+
import ee, { forwardRef as se, useRef as re, useImperativeHandle as oe, useId as le, useCallback as K } from "react";
|
|
4
4
|
import { useAsheeConfig as ae } from "../../libs/context.js";
|
|
5
|
-
import { resolveCascade as
|
|
6
|
-
import { FieldShell as
|
|
5
|
+
import { resolveCascade as u, resolveRadiusKey as te, resolveClassKey as ie } from "../../utils/resolve-token.js";
|
|
6
|
+
import { FieldShell as de } from "../field/FieldShell.js";
|
|
7
7
|
import { FALLBACK_FIELD_CONFIG as r } from "../field/field-config.js";
|
|
8
|
-
import { INPUT_STATUS_BORDER_CLASS as
|
|
9
|
-
import { useKeyboardField as
|
|
10
|
-
import { resolveVariantClass as
|
|
11
|
-
import { RADIUS_CLASS as
|
|
12
|
-
import { cn as
|
|
13
|
-
const
|
|
8
|
+
import { INPUT_STATUS_BORDER_CLASS as ne, INPUT_SIZE_CLASS as ce } from "./input-styles.js";
|
|
9
|
+
import { useKeyboardField as ue } from "../keyboard/use-keyboard-field.js";
|
|
10
|
+
import { resolveVariantClass as pe } from "../../shared/variant.js";
|
|
11
|
+
import { RADIUS_CLASS as me } from "../../shared/radius.js";
|
|
12
|
+
import { cn as N } from "../../utils/cn.js";
|
|
13
|
+
const fe = se(
|
|
14
14
|
({
|
|
15
|
-
size:
|
|
16
|
-
radius:
|
|
17
|
-
variant:
|
|
18
|
-
color:
|
|
19
|
-
status:
|
|
20
|
-
label:
|
|
21
|
-
labelAlign:
|
|
22
|
-
description:
|
|
23
|
-
message:
|
|
15
|
+
size: _,
|
|
16
|
+
radius: f,
|
|
17
|
+
variant: L,
|
|
18
|
+
color: w,
|
|
19
|
+
status: z,
|
|
20
|
+
label: E,
|
|
21
|
+
labelAlign: j,
|
|
22
|
+
description: v,
|
|
23
|
+
message: y,
|
|
24
24
|
required: b,
|
|
25
|
-
isLoading:
|
|
26
|
-
id:
|
|
27
|
-
className:
|
|
28
|
-
disabled:
|
|
29
|
-
startContent:
|
|
30
|
-
endContent:
|
|
31
|
-
style:
|
|
32
|
-
onFocus:
|
|
25
|
+
isLoading: h,
|
|
26
|
+
id: B,
|
|
27
|
+
className: F,
|
|
28
|
+
disabled: T,
|
|
29
|
+
startContent: p,
|
|
30
|
+
endContent: o,
|
|
31
|
+
style: U,
|
|
32
|
+
onFocus: a,
|
|
33
33
|
onBlur: t,
|
|
34
|
-
enableVirtualKeyboard:
|
|
35
|
-
...
|
|
34
|
+
enableVirtualKeyboard: i = !0,
|
|
35
|
+
...k
|
|
36
36
|
}, D) => {
|
|
37
|
-
var
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
var x;
|
|
38
|
+
const d = ae(), e = (x = d.components) == null ? void 0 : x.input, m = re(null);
|
|
39
|
+
oe(D, () => m.current);
|
|
40
|
+
const O = le(), l = B ?? O, I = v ? `${l}-description` : void 0, S = y ? `${l}-message` : void 0, P = [I, S].filter(Boolean).join(" ") || void 0, $ = !!i, C = typeof i == "object" && i !== null ? i : void 0, { handleFocus: A, handleBlur: g } = ue(
|
|
41
|
+
l,
|
|
42
|
+
m,
|
|
43
|
+
$,
|
|
44
|
+
C
|
|
45
|
+
), G = K(
|
|
46
|
+
(n) => {
|
|
47
|
+
A(n), a == null || a(n);
|
|
43
48
|
},
|
|
44
|
-
[
|
|
45
|
-
),
|
|
46
|
-
(
|
|
47
|
-
|
|
49
|
+
[A, a]
|
|
50
|
+
), H = K(
|
|
51
|
+
(n) => {
|
|
52
|
+
g(), t == null || t(n);
|
|
48
53
|
},
|
|
49
|
-
[
|
|
50
|
-
),
|
|
51
|
-
|
|
54
|
+
[g, t]
|
|
55
|
+
), V = u(
|
|
56
|
+
_,
|
|
52
57
|
e == null ? void 0 : e.size,
|
|
53
58
|
void 0,
|
|
54
59
|
r.size
|
|
55
|
-
),
|
|
56
|
-
|
|
60
|
+
), R = u(
|
|
61
|
+
L,
|
|
57
62
|
e == null ? void 0 : e.variant,
|
|
58
|
-
|
|
63
|
+
d.defaultVariant,
|
|
59
64
|
r.variant
|
|
60
|
-
),
|
|
61
|
-
|
|
65
|
+
), Z = u(
|
|
66
|
+
w,
|
|
62
67
|
e == null ? void 0 : e.color,
|
|
63
|
-
|
|
68
|
+
d.defaultColor,
|
|
64
69
|
r.color
|
|
65
|
-
),
|
|
66
|
-
typeof
|
|
70
|
+
), J = te(
|
|
71
|
+
typeof f == "string" ? f : void 0,
|
|
67
72
|
typeof (e == null ? void 0 : e.radius) == "string" ? e.radius : void 0,
|
|
68
|
-
|
|
73
|
+
d.defaultRadius,
|
|
69
74
|
r.radius
|
|
70
|
-
), s =
|
|
71
|
-
|
|
75
|
+
), s = z ?? r.status, M = s === "error" ? "danger" : s === "success" ? "success" : s === "warning" ? "warning" : Z, Q = u(
|
|
76
|
+
j,
|
|
72
77
|
e == null ? void 0 : e.labelAlign,
|
|
73
78
|
void 0,
|
|
74
79
|
r.labelAlign
|
|
75
|
-
),
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
),
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
), W = pe(
|
|
81
|
+
R,
|
|
82
|
+
M
|
|
83
|
+
), X = s !== "default" ? ne[s] : "", Y = R === "underlined" ? "rounded-none" : ie(
|
|
84
|
+
J,
|
|
85
|
+
me,
|
|
81
86
|
r.radius
|
|
82
87
|
);
|
|
83
|
-
return /* @__PURE__ */
|
|
84
|
-
|
|
88
|
+
return /* @__PURE__ */ c(
|
|
89
|
+
de,
|
|
85
90
|
{
|
|
86
91
|
id: l,
|
|
87
|
-
label:
|
|
88
|
-
labelAlign:
|
|
89
|
-
description:
|
|
90
|
-
descriptionId:
|
|
91
|
-
message:
|
|
92
|
-
messageId:
|
|
92
|
+
label: E,
|
|
93
|
+
labelAlign: Q,
|
|
94
|
+
description: v,
|
|
95
|
+
descriptionId: I,
|
|
96
|
+
message: y,
|
|
97
|
+
messageId: S,
|
|
93
98
|
status: s,
|
|
94
99
|
required: b,
|
|
95
|
-
isLoading:
|
|
96
|
-
children: /* @__PURE__ */
|
|
97
|
-
|
|
98
|
-
/* @__PURE__ */
|
|
100
|
+
isLoading: h,
|
|
101
|
+
children: /* @__PURE__ */ q("div", { className: "relative flex items-center w-full", children: [
|
|
102
|
+
p && /* @__PURE__ */ c("span", { className: "absolute left-3 z-10 flex items-center pointer-events-none text-foreground/50", children: p }),
|
|
103
|
+
/* @__PURE__ */ c(
|
|
99
104
|
"input",
|
|
100
105
|
{
|
|
101
106
|
ref: m,
|
|
102
107
|
id: l,
|
|
103
|
-
disabled:
|
|
108
|
+
disabled: T,
|
|
104
109
|
required: b,
|
|
105
110
|
autoComplete: "off",
|
|
106
111
|
"aria-invalid": s === "error",
|
|
107
|
-
"aria-describedby":
|
|
108
|
-
"aria-busy":
|
|
109
|
-
onFocus:
|
|
110
|
-
onBlur:
|
|
111
|
-
className:
|
|
112
|
+
"aria-describedby": P,
|
|
113
|
+
"aria-busy": h,
|
|
114
|
+
onFocus: G,
|
|
115
|
+
onBlur: H,
|
|
116
|
+
className: N(
|
|
112
117
|
"w-full text-foreground outline-none transition-colors shrink-0",
|
|
113
118
|
"focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
114
119
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
115
|
-
|
|
116
|
-
M,
|
|
117
|
-
Q,
|
|
120
|
+
ce[V],
|
|
118
121
|
W,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
+
X,
|
|
123
|
+
Y,
|
|
124
|
+
p && "pl-11",
|
|
125
|
+
o && "pr-11",
|
|
126
|
+
F
|
|
122
127
|
),
|
|
123
|
-
style:
|
|
124
|
-
...
|
|
128
|
+
style: U,
|
|
129
|
+
...k
|
|
125
130
|
}
|
|
126
131
|
),
|
|
127
|
-
|
|
132
|
+
o && /* @__PURE__ */ c(
|
|
128
133
|
"span",
|
|
129
134
|
{
|
|
130
|
-
className:
|
|
135
|
+
className: N(
|
|
131
136
|
"absolute right-3 z-10 flex items-center",
|
|
132
|
-
typeof
|
|
137
|
+
typeof o == "string" || ee.isValidElement(o) && o.type === "span" ? "pointer-events-none" : "",
|
|
133
138
|
"text-foreground/50"
|
|
134
139
|
),
|
|
135
|
-
children:
|
|
140
|
+
children: o
|
|
136
141
|
}
|
|
137
142
|
)
|
|
138
143
|
] })
|
|
@@ -140,7 +145,7 @@ const me = q(
|
|
|
140
145
|
);
|
|
141
146
|
}
|
|
142
147
|
);
|
|
143
|
-
|
|
148
|
+
fe.displayName = "Input";
|
|
144
149
|
export {
|
|
145
|
-
|
|
150
|
+
fe as Input
|
|
146
151
|
};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { Color, Radius, Variant } from '../../shared';
|
|
2
|
+
import { KeyboardConfig, KeyboardSizeKey, LayoutName } from './keyboard-config';
|
|
3
|
+
/**
|
|
4
|
+
* Type for keyboard input elements.
|
|
5
|
+
* The keyboard can attach to input and textarea elements.
|
|
6
|
+
*/
|
|
7
|
+
export type KeyboardElement = HTMLInputElement | HTMLTextAreaElement;
|
|
8
|
+
/**
|
|
9
|
+
* Options for opening the keyboard.
|
|
10
|
+
*/
|
|
11
|
+
export interface KeyboardOpenOptions {
|
|
12
|
+
/**
|
|
13
|
+
* The layout to show when the keyboard opens.
|
|
14
|
+
* Overrides the provider's default layout.
|
|
15
|
+
*/
|
|
16
|
+
layout?: LayoutName;
|
|
17
|
+
/**
|
|
18
|
+
* Size for this keyboard instance.
|
|
19
|
+
* Overrides the provider's size setting.
|
|
20
|
+
*/
|
|
21
|
+
size?: KeyboardSizeKey;
|
|
22
|
+
/**
|
|
23
|
+
* Variant for this keyboard instance.
|
|
24
|
+
* Overrides the provider's variant setting.
|
|
25
|
+
*/
|
|
26
|
+
variant?: Variant;
|
|
27
|
+
/**
|
|
28
|
+
* Color for this keyboard instance.
|
|
29
|
+
* Overrides the provider's color setting.
|
|
30
|
+
*/
|
|
31
|
+
color?: Color;
|
|
32
|
+
/**
|
|
33
|
+
* Radius for this keyboard instance.
|
|
34
|
+
* Overrides the provider's radius setting.
|
|
35
|
+
*/
|
|
36
|
+
radius?: Radius;
|
|
37
|
+
/**
|
|
38
|
+
* Portal setting for this keyboard instance.
|
|
39
|
+
* Overrides the provider's portal setting.
|
|
40
|
+
*/
|
|
41
|
+
portal?: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Context type for the keyboard state and controls.
|
|
45
|
+
*/
|
|
46
|
+
export interface KeyboardContextType {
|
|
47
|
+
/**
|
|
48
|
+
* Whether the keyboard is currently open.
|
|
49
|
+
*/
|
|
50
|
+
isOpen: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* ID of the currently active input element.
|
|
53
|
+
*/
|
|
54
|
+
activeInputId: string | null;
|
|
55
|
+
/**
|
|
56
|
+
* The currently active input element reference.
|
|
57
|
+
*/
|
|
58
|
+
activeElement: KeyboardElement | null;
|
|
59
|
+
/**
|
|
60
|
+
* The merged keyboard configuration.
|
|
61
|
+
*/
|
|
62
|
+
config: KeyboardConfig;
|
|
63
|
+
/**
|
|
64
|
+
* The resolved size for the keyboard.
|
|
65
|
+
*/
|
|
66
|
+
resolvedSize: KeyboardSizeKey;
|
|
67
|
+
/**
|
|
68
|
+
* The resolved variant for the keyboard.
|
|
69
|
+
*/
|
|
70
|
+
resolvedVariant: Variant;
|
|
71
|
+
/**
|
|
72
|
+
* The resolved color for the keyboard.
|
|
73
|
+
*/
|
|
74
|
+
resolvedColor: Color;
|
|
75
|
+
/**
|
|
76
|
+
* The resolved radius for the keyboard.
|
|
77
|
+
*/
|
|
78
|
+
resolvedRadius: Radius;
|
|
79
|
+
/**
|
|
80
|
+
* The resolved portal setting for the keyboard.
|
|
81
|
+
*/
|
|
82
|
+
resolvedPortal: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* Opens the keyboard for a specific input element.
|
|
85
|
+
* @param id - The ID of the input element.
|
|
86
|
+
* @param el - The input element reference.
|
|
87
|
+
* @param options - Optional configuration overrides.
|
|
88
|
+
*/
|
|
89
|
+
openKeyboard: (id: string, el: KeyboardElement, options?: KeyboardOpenOptions) => void;
|
|
90
|
+
/**
|
|
91
|
+
* Requests to close the keyboard for a specific input.
|
|
92
|
+
* Uses a delay to prevent accidental closing on focus transitions.
|
|
93
|
+
* @param id - The ID of the input element.
|
|
94
|
+
*/
|
|
95
|
+
requestClose: (id: string) => void;
|
|
96
|
+
/**
|
|
97
|
+
* Immediately closes the keyboard regardless of state.
|
|
98
|
+
*/
|
|
99
|
+
forceClose: () => void;
|
|
100
|
+
/**
|
|
101
|
+
* Sets the current layout of the keyboard.
|
|
102
|
+
*/
|
|
103
|
+
setLayout: (layout: LayoutName) => void;
|
|
104
|
+
/**
|
|
105
|
+
* The current layout of the keyboard.
|
|
106
|
+
*/
|
|
107
|
+
currentLayout: LayoutName;
|
|
108
|
+
/**
|
|
109
|
+
* Whether the keyboard system is globally disabled.
|
|
110
|
+
*/
|
|
111
|
+
isDisabled: boolean;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* React context for the keyboard state.
|
|
115
|
+
*/
|
|
116
|
+
export declare const KeyboardContext: import('react').Context<KeyboardContextType | null>;
|
|
117
|
+
/**
|
|
118
|
+
* Hook for accessing the keyboard context.
|
|
119
|
+
* Must be used within a KeyboardProvider.
|
|
120
|
+
*
|
|
121
|
+
* @returns The keyboard context value.
|
|
122
|
+
* @throws {Error} When used outside of a KeyboardProvider.
|
|
123
|
+
*
|
|
124
|
+
* @example
|
|
125
|
+
* ```tsx
|
|
126
|
+
* const { isOpen, openKeyboard, forceClose } = useKeyboard();
|
|
127
|
+
* ```
|
|
128
|
+
*/
|
|
129
|
+
export declare function useKeyboard(): KeyboardContextType;
|
|
130
|
+
//# sourceMappingURL=KeyboardContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyboardContext.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/KeyboardContext.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,UAAU,EACX,MAAM,mBAAmB,CAAC;AAE3B;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;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;;OAEG;IACH,YAAY,EAAE,eAAe,CAAC;IAE9B;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC;IAErB;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IACH,YAAY,EAAE,CACZ,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,eAAe,EACnB,OAAO,CAAC,EAAE,mBAAmB,KAC1B,IAAI,CAAC;IAEV;;;;OAIG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,aAAa,EAAE,UAAU,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,qDAAkD,CAAC;AAI/E;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,wBAM1B"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { createContext as t, useContext as o } from "react";
|
|
3
|
+
const r = t(null);
|
|
4
|
+
function u() {
|
|
5
|
+
const e = o(r);
|
|
6
|
+
if (!e)
|
|
7
|
+
throw new Error("useKeyboard must be used within a <KeyboardProvider>");
|
|
8
|
+
return e;
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
r as KeyboardContext,
|
|
12
|
+
u as useKeyboard
|
|
13
|
+
};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { KeyboardConfig } from './keyboard-config';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the KeyboardProvider component.
|
|
5
|
+
*/
|
|
6
|
+
export interface KeyboardProviderProps extends KeyboardConfig {
|
|
7
|
+
/**
|
|
8
|
+
* Child components that will have access to the keyboard context.
|
|
9
|
+
*/
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Extra CSS classes for the keyboard container.
|
|
13
|
+
*/
|
|
14
|
+
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Extra CSS classes for individual keys.
|
|
17
|
+
*/
|
|
18
|
+
keyClassName?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the keyboard system is globally disabled.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Provider component for the virtual keyboard system.
|
|
27
|
+
*
|
|
28
|
+
* KeyboardProvider wraps your application or a section of it to provide
|
|
29
|
+
* keyboard context. It manages the open/close state, active input tracking,
|
|
30
|
+
* and configuration resolution. Input components using useKeyboardField or
|
|
31
|
+
* the KeyboardContext will automatically trigger the keyboard on focus.
|
|
32
|
+
*
|
|
33
|
+
* The provider automatically renders the OnScreenKeyboard component at the
|
|
34
|
+
* bottom of the DOM tree via React Portal. This ensures the keyboard appears
|
|
35
|
+
* at the bottom of the screen regardless of where the input is in the DOM.
|
|
36
|
+
*
|
|
37
|
+
* @param props - KeyboardProvider configuration options.
|
|
38
|
+
* @param props.children - Child components.
|
|
39
|
+
* @param props.layouts - Available keyboard layouts.
|
|
40
|
+
* @param props.display - Display mappings for special keys.
|
|
41
|
+
* @param props.defaultLayout - Default layout name. Defaults to "default".
|
|
42
|
+
* @param props.size - Size scale for keyboard keys. Defaults to "md".
|
|
43
|
+
* @param props.autoShiftBack - Auto switch back from shift. Defaults to true.
|
|
44
|
+
* @param props.closeDelay - Close delay in milliseconds. Defaults to 120.
|
|
45
|
+
* @param props.variant - Visual variant for keys.
|
|
46
|
+
* @param props.color - Theme color for keys.
|
|
47
|
+
* @param props.radius - Corner rounding for keys.
|
|
48
|
+
* @param props.portal - Whether to render the keyboard in a portal. Defaults to true.
|
|
49
|
+
* @param props.disabled - Whether the keyboard system is disabled. Defaults to false.
|
|
50
|
+
* @param props.className - Extra CSS classes for the keyboard container.
|
|
51
|
+
* @param props.keyClassName - Extra CSS classes for individual keys.
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* ```tsx
|
|
55
|
+
* import { KeyboardProvider, Input } from "asheeui";
|
|
56
|
+
*
|
|
57
|
+
* export function App() {
|
|
58
|
+
* return (
|
|
59
|
+
* <KeyboardProvider size="lg">
|
|
60
|
+
* <Input label="Search" enableVirtualKeyboard />
|
|
61
|
+
* </KeyboardProvider>
|
|
62
|
+
* );
|
|
63
|
+
* }
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```tsx
|
|
68
|
+
* // Disable keyboard globally
|
|
69
|
+
* <KeyboardProvider disabled>
|
|
70
|
+
* <Input label="Disabled field" />
|
|
71
|
+
* </KeyboardProvider>
|
|
72
|
+
* ```
|
|
73
|
+
*
|
|
74
|
+
* @see useKeyboard - Hook for accessing the keyboard context.
|
|
75
|
+
* @see useKeyboardField - Hook for connecting inputs to the keyboard.
|
|
76
|
+
*/
|
|
77
|
+
export declare function KeyboardProvider({ children, layouts, display, defaultLayout, size, autoShiftBack, closeDelay: closeDelayProp, variant, color, radius, portal: portalProp, disabled: disabledProp, className, keyClassName, }: KeyboardProviderProps): import("react").JSX.Element;
|
|
78
|
+
//# sourceMappingURL=KeyboardProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KeyboardProvider.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard/KeyboardProvider.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAU/E,OAAO,EAGL,KAAK,cAAc,EAIpB,MAAM,mBAAmB,CAAC;AAK3B;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,aAAa,EACb,IAAI,EACJ,aAAa,EACb,UAAU,EAAE,cAAoB,EAChC,OAAO,EACP,KAAK,EACL,MAAM,EACN,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,YAAoB,EAC9B,SAAS,EACT,YAAY,GACb,EAAE,qBAAqB,+BA6PvB"}
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs as ot, jsx as et } from "react/jsx-runtime";
|
|
3
|
+
import { useState as f, useRef as at, useMemo as M, useCallback as y } from "react";
|
|
4
|
+
import { useAsheeConfig as ut } from "../../libs/context.js";
|
|
5
|
+
import { resolveCascade as o, resolveRadiusKey as ct } from "../../utils/resolve-token.js";
|
|
6
|
+
import { KeyboardContext as nt } from "./KeyboardContext.js";
|
|
7
|
+
import { FALLBACK_KEYBOARD_CONFIG as l, defaultKeyboardConfig as N } from "./keyboard-config.js";
|
|
8
|
+
import { OnScreenKeyboard as it } from "./OnScreenKeyboard.js";
|
|
9
|
+
function Dt({
|
|
10
|
+
children: U,
|
|
11
|
+
layouts: P,
|
|
12
|
+
display: V,
|
|
13
|
+
defaultLayout: Y,
|
|
14
|
+
size: w,
|
|
15
|
+
autoShiftBack: H,
|
|
16
|
+
closeDelay: J = 120,
|
|
17
|
+
variant: Q,
|
|
18
|
+
color: W,
|
|
19
|
+
radius: X,
|
|
20
|
+
portal: Z,
|
|
21
|
+
disabled: $ = !1,
|
|
22
|
+
className: b,
|
|
23
|
+
keyClassName: C
|
|
24
|
+
}) {
|
|
25
|
+
var G;
|
|
26
|
+
const e = ut(), t = (G = e == null ? void 0 : e.components) == null ? void 0 : G.keyboard, a = o(
|
|
27
|
+
w,
|
|
28
|
+
t == null ? void 0 : t.size,
|
|
29
|
+
void 0,
|
|
30
|
+
l.size
|
|
31
|
+
), u = o(
|
|
32
|
+
Q,
|
|
33
|
+
t == null ? void 0 : t.variant,
|
|
34
|
+
e.defaultVariant,
|
|
35
|
+
l.variant
|
|
36
|
+
), c = o(
|
|
37
|
+
W,
|
|
38
|
+
t == null ? void 0 : t.color,
|
|
39
|
+
e.defaultColor,
|
|
40
|
+
l.color
|
|
41
|
+
), n = ct(
|
|
42
|
+
X,
|
|
43
|
+
t == null ? void 0 : t.radius,
|
|
44
|
+
e.defaultRadius,
|
|
45
|
+
l.radius
|
|
46
|
+
), i = o(
|
|
47
|
+
Z,
|
|
48
|
+
t == null ? void 0 : t.portal,
|
|
49
|
+
void 0,
|
|
50
|
+
l.portal
|
|
51
|
+
), r = o(
|
|
52
|
+
$,
|
|
53
|
+
t == null ? void 0 : t.disabled,
|
|
54
|
+
void 0,
|
|
55
|
+
l.disabled
|
|
56
|
+
), d = o(
|
|
57
|
+
Y,
|
|
58
|
+
t == null ? void 0 : t.defaultLayout,
|
|
59
|
+
void 0,
|
|
60
|
+
l.defaultLayout
|
|
61
|
+
), m = o(
|
|
62
|
+
H,
|
|
63
|
+
t == null ? void 0 : t.autoShiftBack,
|
|
64
|
+
void 0,
|
|
65
|
+
l.autoShiftBack
|
|
66
|
+
), E = o(
|
|
67
|
+
J,
|
|
68
|
+
t == null ? void 0 : t.closeDelay,
|
|
69
|
+
void 0,
|
|
70
|
+
l.closeDelay
|
|
71
|
+
), [D, O] = f(!1), [j, S] = f(null), [z, A] = f(
|
|
72
|
+
null
|
|
73
|
+
), [R, F] = f(
|
|
74
|
+
d
|
|
75
|
+
), [v, B] = f(
|
|
76
|
+
{}
|
|
77
|
+
), s = at(null), I = M(
|
|
78
|
+
() => ({
|
|
79
|
+
layouts: P ?? (t == null ? void 0 : t.layouts) ?? N.layouts,
|
|
80
|
+
display: V ?? (t == null ? void 0 : t.display) ?? N.display,
|
|
81
|
+
defaultLayout: d,
|
|
82
|
+
size: a,
|
|
83
|
+
autoShiftBack: m,
|
|
84
|
+
variant: u,
|
|
85
|
+
color: c,
|
|
86
|
+
radius: n,
|
|
87
|
+
portal: i,
|
|
88
|
+
disabled: r
|
|
89
|
+
}),
|
|
90
|
+
[
|
|
91
|
+
P,
|
|
92
|
+
t,
|
|
93
|
+
V,
|
|
94
|
+
d,
|
|
95
|
+
a,
|
|
96
|
+
m,
|
|
97
|
+
u,
|
|
98
|
+
c,
|
|
99
|
+
n,
|
|
100
|
+
i,
|
|
101
|
+
r
|
|
102
|
+
]
|
|
103
|
+
), _ = y(
|
|
104
|
+
(p, k, L) => {
|
|
105
|
+
if (r) return;
|
|
106
|
+
s.current && (clearTimeout(s.current), s.current = null), S(p), A(k), B(L || {});
|
|
107
|
+
const lt = (L == null ? void 0 : L.layout) ?? d;
|
|
108
|
+
F(lt), O(!0);
|
|
109
|
+
},
|
|
110
|
+
[r, d]
|
|
111
|
+
), q = y(
|
|
112
|
+
(p) => {
|
|
113
|
+
r || (s.current && clearTimeout(s.current), s.current = setTimeout(() => {
|
|
114
|
+
S((k) => (k === p && (O(!1), A(null), B({})), k)), s.current = null;
|
|
115
|
+
}, E));
|
|
116
|
+
},
|
|
117
|
+
[r, E]
|
|
118
|
+
), T = y(() => {
|
|
119
|
+
s.current && (clearTimeout(s.current), s.current = null), O(!1), A(null), S(null), B({});
|
|
120
|
+
}, []), x = y((p) => {
|
|
121
|
+
F(p);
|
|
122
|
+
}, []), K = M(
|
|
123
|
+
() => ({
|
|
124
|
+
isOpen: D,
|
|
125
|
+
activeInputId: j,
|
|
126
|
+
activeElement: z,
|
|
127
|
+
config: I,
|
|
128
|
+
resolvedSize: a,
|
|
129
|
+
resolvedVariant: u,
|
|
130
|
+
resolvedColor: c,
|
|
131
|
+
resolvedRadius: n,
|
|
132
|
+
resolvedPortal: i,
|
|
133
|
+
openKeyboard: _,
|
|
134
|
+
requestClose: q,
|
|
135
|
+
forceClose: T,
|
|
136
|
+
setLayout: x,
|
|
137
|
+
currentLayout: R,
|
|
138
|
+
isDisabled: r
|
|
139
|
+
}),
|
|
140
|
+
[
|
|
141
|
+
D,
|
|
142
|
+
j,
|
|
143
|
+
z,
|
|
144
|
+
I,
|
|
145
|
+
a,
|
|
146
|
+
u,
|
|
147
|
+
c,
|
|
148
|
+
n,
|
|
149
|
+
i,
|
|
150
|
+
_,
|
|
151
|
+
q,
|
|
152
|
+
T,
|
|
153
|
+
x,
|
|
154
|
+
R,
|
|
155
|
+
r
|
|
156
|
+
]
|
|
157
|
+
), h = v.size ?? a, g = v.variant ?? u, tt = v.color ?? c, st = v.radius ?? n, rt = v.portal ?? i;
|
|
158
|
+
return /* @__PURE__ */ ot(nt.Provider, { value: K, children: [
|
|
159
|
+
U,
|
|
160
|
+
/* @__PURE__ */ et(
|
|
161
|
+
it,
|
|
162
|
+
{
|
|
163
|
+
isOpen: D,
|
|
164
|
+
activeElement: z,
|
|
165
|
+
config: I,
|
|
166
|
+
currentLayout: R,
|
|
167
|
+
setLayout: x,
|
|
168
|
+
forceClose: T,
|
|
169
|
+
size: h,
|
|
170
|
+
variant: g,
|
|
171
|
+
color: tt,
|
|
172
|
+
radius: st,
|
|
173
|
+
portal: rt,
|
|
174
|
+
className: b,
|
|
175
|
+
keyClassName: C,
|
|
176
|
+
disabled: r
|
|
177
|
+
}
|
|
178
|
+
)
|
|
179
|
+
] });
|
|
180
|
+
}
|
|
181
|
+
export {
|
|
182
|
+
Dt as KeyboardProvider
|
|
183
|
+
};
|