@typed/ui 1.0.0-beta.1 → 1.0.0-beta.11

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.
Files changed (155) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +54 -10
  3. package/dist/Alert.d.ts +72 -0
  4. package/dist/Alert.d.ts.map +1 -0
  5. package/dist/Alert.js +40 -0
  6. package/dist/Button.d.ts +100 -0
  7. package/dist/Button.d.ts.map +1 -0
  8. package/dist/Button.js +42 -0
  9. package/dist/Carousel.d.ts +346 -0
  10. package/dist/Carousel.d.ts.map +1 -0
  11. package/dist/Carousel.js +264 -0
  12. package/dist/Checkbox.d.ts +168 -0
  13. package/dist/Checkbox.d.ts.map +1 -0
  14. package/dist/Checkbox.js +146 -0
  15. package/dist/Collection.d.ts +254 -0
  16. package/dist/Collection.d.ts.map +1 -0
  17. package/dist/Collection.js +218 -0
  18. package/dist/Combobox.d.ts +367 -0
  19. package/dist/Combobox.d.ts.map +1 -0
  20. package/dist/Combobox.js +300 -0
  21. package/dist/Composite.d.ts +823 -0
  22. package/dist/Composite.d.ts.map +1 -0
  23. package/dist/Composite.js +615 -0
  24. package/dist/Dialog.d.ts +544 -0
  25. package/dist/Dialog.d.ts.map +1 -0
  26. package/dist/Dialog.js +357 -0
  27. package/dist/Disclosure.d.ts +219 -0
  28. package/dist/Disclosure.d.ts.map +1 -0
  29. package/dist/Disclosure.js +128 -0
  30. package/dist/Dom/Events.d.ts +122 -0
  31. package/dist/Dom/Events.d.ts.map +1 -0
  32. package/dist/Dom/Events.js +192 -0
  33. package/dist/Dom/Props.d.ts +161 -0
  34. package/dist/Dom/Props.d.ts.map +1 -0
  35. package/dist/Dom/Props.js +110 -0
  36. package/dist/Dom/Refs.d.ts +58 -0
  37. package/dist/Dom/Refs.d.ts.map +1 -0
  38. package/dist/Dom/Refs.js +61 -0
  39. package/dist/Dom/Render.d.ts +59 -0
  40. package/dist/Dom/Render.d.ts.map +1 -0
  41. package/dist/Dom/Render.js +71 -0
  42. package/dist/Dom/Types.d.ts +570 -0
  43. package/dist/Dom/Types.d.ts.map +1 -0
  44. package/dist/Dom/Types.js +1 -0
  45. package/dist/Dom/index.d.ts +20 -0
  46. package/dist/Dom/index.d.ts.map +1 -0
  47. package/dist/Dom/index.js +8 -0
  48. package/dist/Dom.d.ts +14 -0
  49. package/dist/Dom.d.ts.map +1 -0
  50. package/dist/Dom.js +13 -0
  51. package/dist/Focusable.d.ts +85 -0
  52. package/dist/Focusable.d.ts.map +1 -0
  53. package/dist/Focusable.js +35 -0
  54. package/dist/Form.d.ts +1727 -0
  55. package/dist/Form.d.ts.map +1 -0
  56. package/dist/Form.js +1142 -0
  57. package/dist/Grid.d.ts +388 -0
  58. package/dist/Grid.d.ts.map +1 -0
  59. package/dist/Grid.js +284 -0
  60. package/dist/Group.d.ts +128 -0
  61. package/dist/Group.d.ts.map +1 -0
  62. package/dist/Group.js +71 -0
  63. package/dist/Heading.d.ts +87 -0
  64. package/dist/Heading.d.ts.map +1 -0
  65. package/dist/Heading.js +58 -0
  66. package/dist/Hovercard.d.ts +297 -0
  67. package/dist/Hovercard.d.ts.map +1 -0
  68. package/dist/Hovercard.js +188 -0
  69. package/dist/HttpRouter.d.ts +129 -6
  70. package/dist/HttpRouter.d.ts.map +1 -1
  71. package/dist/HttpRouter.js +198 -55
  72. package/dist/Link.d.ts +63 -28
  73. package/dist/Link.d.ts.map +1 -1
  74. package/dist/Link.js +84 -37
  75. package/dist/Listbox.d.ts +305 -0
  76. package/dist/Listbox.d.ts.map +1 -0
  77. package/dist/Listbox.js +245 -0
  78. package/dist/Menu.d.ts +663 -0
  79. package/dist/Menu.d.ts.map +1 -0
  80. package/dist/Menu.js +569 -0
  81. package/dist/Menubar.d.ts +249 -0
  82. package/dist/Menubar.d.ts.map +1 -0
  83. package/dist/Menubar.js +207 -0
  84. package/dist/Meter.d.ts +157 -0
  85. package/dist/Meter.d.ts.map +1 -0
  86. package/dist/Meter.js +87 -0
  87. package/dist/NativeDetails.d.ts +41 -0
  88. package/dist/NativeDetails.d.ts.map +1 -0
  89. package/dist/NativeDetails.js +40 -0
  90. package/dist/NativeDialog.d.ts +66 -0
  91. package/dist/NativeDialog.d.ts.map +1 -0
  92. package/dist/NativeDialog.js +88 -0
  93. package/dist/NativePopover.d.ts +43 -0
  94. package/dist/NativePopover.d.ts.map +1 -0
  95. package/dist/NativePopover.js +84 -0
  96. package/dist/Popover.d.ts +240 -0
  97. package/dist/Popover.d.ts.map +1 -0
  98. package/dist/Popover.js +140 -0
  99. package/dist/RadioGroup.d.ts +330 -0
  100. package/dist/RadioGroup.d.ts.map +1 -0
  101. package/dist/RadioGroup.js +241 -0
  102. package/dist/Role.d.ts +64 -0
  103. package/dist/Role.d.ts.map +1 -0
  104. package/dist/Role.js +27 -0
  105. package/dist/Select.d.ts +418 -0
  106. package/dist/Select.d.ts.map +1 -0
  107. package/dist/Select.js +357 -0
  108. package/dist/Separator.d.ts +58 -0
  109. package/dist/Separator.d.ts.map +1 -0
  110. package/dist/Separator.js +32 -0
  111. package/dist/Slider.d.ts +141 -0
  112. package/dist/Slider.d.ts.map +1 -0
  113. package/dist/Slider.js +101 -0
  114. package/dist/SpinButton.d.ts +141 -0
  115. package/dist/SpinButton.d.ts.map +1 -0
  116. package/dist/SpinButton.js +101 -0
  117. package/dist/Storybook.d.ts +76 -0
  118. package/dist/Storybook.d.ts.map +1 -0
  119. package/dist/Storybook.js +102 -0
  120. package/dist/Switch.d.ts +148 -0
  121. package/dist/Switch.d.ts.map +1 -0
  122. package/dist/Switch.js +110 -0
  123. package/dist/Tab.d.ts +26 -0
  124. package/dist/Tab.d.ts.map +1 -0
  125. package/dist/Tab.js +25 -0
  126. package/dist/Tabs.d.ts +411 -0
  127. package/dist/Tabs.d.ts.map +1 -0
  128. package/dist/Tabs.js +262 -0
  129. package/dist/Toolbar.d.ts +248 -0
  130. package/dist/Toolbar.d.ts.map +1 -0
  131. package/dist/Toolbar.js +187 -0
  132. package/dist/Tooltip.d.ts +296 -0
  133. package/dist/Tooltip.d.ts.map +1 -0
  134. package/dist/Tooltip.js +172 -0
  135. package/dist/Tree.d.ts +405 -0
  136. package/dist/Tree.d.ts.map +1 -0
  137. package/dist/Tree.js +333 -0
  138. package/dist/TreeGrid.d.ts +426 -0
  139. package/dist/TreeGrid.d.ts.map +1 -0
  140. package/dist/TreeGrid.js +308 -0
  141. package/dist/VisuallyHidden.d.ts +68 -0
  142. package/dist/VisuallyHidden.d.ts.map +1 -0
  143. package/dist/VisuallyHidden.js +44 -0
  144. package/dist/WindowSplitter.d.ts +336 -0
  145. package/dist/WindowSplitter.d.ts.map +1 -0
  146. package/dist/WindowSplitter.js +305 -0
  147. package/dist/index.d.ts +48 -0
  148. package/dist/index.d.ts.map +1 -1
  149. package/dist/index.js +48 -0
  150. package/package.json +48 -20
  151. package/src/HttpRouter.test.ts +0 -294
  152. package/src/HttpRouter.ts +0 -168
  153. package/src/Link.test.ts +0 -84
  154. package/src/Link.ts +0 -107
  155. package/src/index.ts +0 -2
package/dist/Tabs.js ADDED
@@ -0,0 +1,262 @@
1
+ /**
2
+ * Tabs separates active focus from selected tab and supports automatic or manual activation. List
3
+ * handles orientation-aware movement; Tab publishes stable aria-controls state; Panel retains its
4
+ * node while hidden.
5
+ *
6
+ * @remarks
7
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
8
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
9
+ * events and browser-owned focus.
10
+ *
11
+ * Learn the interaction in the [Tabs guide](/explore/ui-tabs).
12
+ *
13
+ * @since 1.0.0
14
+ * @category modules
15
+ * @packageDocumentation
16
+ */
17
+ import * as Effect from "effect/Effect";
18
+ import * as Schema from "effect/Schema";
19
+ import { RefSubject } from "@typed/fx";
20
+ import { EventHandler, html, } from "@typed/template";
21
+ import * as Collection from "./Collection.js";
22
+ import * as Composite from "./Composite.js";
23
+ import * as Dom from "./Dom.js";
24
+ /**
25
+ * Effect Schema used by makeState to encode, decode, and hydrate Tabs state.
26
+ *
27
+ * @remarks
28
+ * @example
29
+ * ```ts
30
+ * import * as Schema from "effect/Schema";
31
+ * import * as Tabs from "@typed/ui/Tabs";
32
+ *
33
+ * const decodeState = Schema.decodeUnknownEffect(Tabs.StateSchema);
34
+ * ```
35
+ * @since 1.0.0
36
+ * @category Selection and focus
37
+ */
38
+ export const StateSchema = Schema.Struct({
39
+ selectedId: Schema.String,
40
+ activeId: Schema.String,
41
+ activationMode: Schema.Literals(["automatic", "manual"]),
42
+ orientation: Schema.Literals(["horizontal", "vertical"]),
43
+ loop: Schema.Boolean,
44
+ rtl: Schema.Boolean,
45
+ virtualFocus: Schema.Boolean,
46
+ });
47
+ /**
48
+ * Creates hydrated Tabs state. The caller supplies value; activeId defaults to value, activation
49
+ * is automatic, orientation horizontal, and loop true.
50
+ *
51
+ * @remarks
52
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
53
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
54
+ * creation.
55
+ *
56
+ * @example
57
+ * ```ts
58
+ * import * as Effect from "effect/Effect";
59
+ * import * as Tabs from "@typed/ui/Tabs";
60
+ *
61
+ * const program = Effect.scoped(
62
+ * Effect.gen(function* () {
63
+ * const state = yield* Tabs.makeState({ selectedId: "overview" });
64
+ * const collection = yield* Tabs.makeCollection();
65
+ * return { state: yield* state, collection: yield* collection };
66
+ * }),
67
+ * );
68
+ * ```
69
+ * @since 1.0.0
70
+ * @category Selection and focus
71
+ */
72
+ export function makeState(initial) {
73
+ return RefSubject.hydrate(StateSchema, {
74
+ selectedId: initial.selectedId,
75
+ activeId: initial.activeId ?? initial.selectedId,
76
+ activationMode: initial.activationMode ?? "automatic",
77
+ orientation: initial.orientation ?? "horizontal",
78
+ loop: initial.loop ?? true,
79
+ rtl: initial.rtl ?? false,
80
+ virtualFocus: false,
81
+ });
82
+ }
83
+ /**
84
+ * Creates a scoped Collection for Tabs items.
85
+ *
86
+ * @remarks
87
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
88
+ * owned by the Scope that runs register, independently of this construction Effect.
89
+ *
90
+ * @example
91
+ * ```ts
92
+ * import * as Effect from "effect/Effect";
93
+ * import * as Tabs from "@typed/ui/Tabs";
94
+ *
95
+ * const program = Effect.scoped(
96
+ * Effect.gen(function* () {
97
+ * const collection = yield* Tabs.makeCollection();
98
+ * return yield* collection;
99
+ * }),
100
+ * );
101
+ * ```
102
+ * @since 1.0.0
103
+ * @category Tab registration
104
+ */
105
+ export const makeCollection = Collection.makeState;
106
+ /**
107
+ * Selects a tab and makes it the active roving-focus item.
108
+ *
109
+ * @remarks
110
+ * The operation exposes Tabs's transition directly so callers can compose it in Effect programs
111
+ * and native event handlers.
112
+ *
113
+ * @since 1.0.0
114
+ * @category Panel activation
115
+ */
116
+ export function select(state, selectedId) {
117
+ return RefSubject.update(state, (current) => ({ ...current, activeId: selectedId, selectedId }));
118
+ }
119
+ /**
120
+ * Moves activeId through registered tabs without selecting under manual activation.
121
+ *
122
+ * @remarks
123
+ * The operation exposes Tabs's transition directly so callers can compose it in Effect programs
124
+ * and native event handlers.
125
+ *
126
+ * @since 1.0.0
127
+ * @category Tab navigation
128
+ */
129
+ export function move(state, items, direction) {
130
+ return Effect.gen(function* () {
131
+ const current = yield* state;
132
+ const activeId = Composite.moveActiveId(items, current, direction);
133
+ if (activeId === null)
134
+ return current;
135
+ return yield* RefSubject.update(state, (value) => ({
136
+ ...value,
137
+ activeId,
138
+ selectedId: value.activationMode === "automatic" ? activeId : value.selectedId,
139
+ }));
140
+ });
141
+ }
142
+ function moveAndFocus(state, collection, direction) {
143
+ return Effect.gen(function* () {
144
+ const next = yield* move(state, yield* collection, direction);
145
+ yield* Composite.focusActive({ state, collection });
146
+ yield* Composite.scrollActive({ state, collection });
147
+ return next;
148
+ });
149
+ }
150
+ function listInternalProps(options) {
151
+ const orientation = RefSubject.map(options.state, (state) => state.orientation);
152
+ const onkeydown = options.collection === undefined && options.items === undefined
153
+ ? undefined
154
+ : EventHandler.make(Effect.fn(function* (event) {
155
+ const direction = Composite.keyMove(event, yield* options.state);
156
+ if (direction !== undefined) {
157
+ event.preventDefault();
158
+ if (options.collection !== undefined) {
159
+ yield* moveAndFocus(options.state, options.collection, direction);
160
+ }
161
+ else {
162
+ yield* move(options.state, options.items, direction);
163
+ }
164
+ return;
165
+ }
166
+ if ((event.key === "Enter" || event.key === " ") &&
167
+ (yield* options.state).activationMode === "manual") {
168
+ event.preventDefault();
169
+ yield* select(options.state, (yield* options.state).activeId);
170
+ }
171
+ }));
172
+ return ({ property }) => ({
173
+ role: "tablist",
174
+ "aria-label": property("label", undefined),
175
+ "aria-orientation": orientation,
176
+ onkeydown,
177
+ ref: options.state,
178
+ });
179
+ }
180
+ /**
181
+ * Renders the tablist and applies orientation-aware movement plus Enter/Space activation in manual
182
+ * mode.
183
+ *
184
+ * @remarks
185
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
186
+ * collection registrations only when rendered. The rendering Scope removes those resources;
187
+ * unrelated nodes and attributes remain caller-owned.
188
+ *
189
+ * @since 1.0.0
190
+ * @category Tab list
191
+ */
192
+ export function List(options, host) {
193
+ return Dom.renderHost()(options, host, listInternalProps(options), options.content, (props, content) => {
194
+ return html `<div ...${props}>${content}</div>`;
195
+ });
196
+ }
197
+ function tabInternalProps(options) {
198
+ const selected = RefSubject.map(options.state, (state) => state.selectedId === options.id);
199
+ const register = options.collection === undefined
200
+ ? undefined
201
+ : Collection.ref(options.collection, {
202
+ id: options.id,
203
+ value: options.id,
204
+ textValue: options.id,
205
+ disabled: options.disabled,
206
+ });
207
+ return () => ({
208
+ id: options.id,
209
+ type: "button",
210
+ role: "tab",
211
+ "aria-controls": options.panelId,
212
+ "aria-selected": selected,
213
+ "aria-disabled": options.disabled ?? false,
214
+ tabindex: Composite.tabIndex(options.state, options.id),
215
+ onclick: options.disabled === true ? Effect.void : select(options.state, options.id),
216
+ onfocus: options.disabled === true
217
+ ? Effect.void
218
+ : RefSubject.update(options.state, (state) => state.activationMode === "automatic"
219
+ ? { ...state, activeId: options.id, selectedId: options.id }
220
+ : { ...state, activeId: options.id }),
221
+ ref: Dom.composeRefs(register, options.ref),
222
+ });
223
+ }
224
+ /**
225
+ * Renders and optionally registers a tab with stable aria-controls, selected state, and roving
226
+ * tabindex.
227
+ *
228
+ * @remarks
229
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
230
+ * collection registrations only when rendered. The rendering Scope removes those resources;
231
+ * unrelated nodes and attributes remain caller-owned.
232
+ *
233
+ * @since 1.0.0
234
+ * @category Tab controls
235
+ */
236
+ export function Tab(options, host) {
237
+ return Dom.renderHost()(options, host, tabInternalProps(options), options.content, (props, content) => html `<button ...${props}>${content}</button>`);
238
+ }
239
+ function panelInternalProps(options) {
240
+ const selected = RefSubject.map(options.state, (state) => state.selectedId === options.tabId);
241
+ return () => ({
242
+ id: options.id,
243
+ role: "tabpanel",
244
+ "aria-labelledby": options.tabId,
245
+ tabindex: 0,
246
+ "?hidden": RefSubject.map(selected, (value) => !value),
247
+ });
248
+ }
249
+ /**
250
+ * Renders a labelled tabpanel and hides it reactively when its tab is not selected.
251
+ *
252
+ * @remarks
253
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
254
+ * collection registrations only when rendered. The rendering Scope removes those resources;
255
+ * unrelated nodes and attributes remain caller-owned.
256
+ *
257
+ * @since 1.0.0
258
+ * @category Panel visibility
259
+ */
260
+ export function Panel(options, host) {
261
+ return Dom.renderHost()(options, host, panelInternalProps(options), options.content, (props, content) => html `<div ...${props}>${content}</div>`);
262
+ }
@@ -0,0 +1,248 @@
1
+ /**
2
+ * Toolbar is a roving-focus composite with toolbar and button roles. Orientation and RTL control
3
+ * Arrow-key order; Home and End select the document-order endpoints.
4
+ *
5
+ * @remarks
6
+ * The module keeps policy, state transitions, and DOM rendering separable so applications can use
7
+ * the state and pure operations without mounting UI, or supply custom hosts without replacing native
8
+ * events and browser-owned focus.
9
+ *
10
+ * Learn the interaction in the [Toolbar guide](/explore/ui-toolbar).
11
+ *
12
+ * @since 1.0.0
13
+ * @category modules
14
+ * @packageDocumentation
15
+ */
16
+ import * as Effect from "effect/Effect";
17
+ import type * as Scope from "effect/Scope";
18
+ import * as Schema from "effect/Schema";
19
+ import type { Fx } from "@typed/fx/Fx";
20
+ import { RefSubject } from "@typed/fx";
21
+ import { EventHandler, type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
22
+ import * as Collection from "./Collection.js";
23
+ import * as Composite from "./Composite.js";
24
+ import * as Dom from "./Dom.js";
25
+ import type { HostResult } from "./Dom/Types.js";
26
+ /**
27
+ * The active command and arrow-navigation policy.
28
+ * Formatting preferences such as bold or italic are separate application state.
29
+ *
30
+ * @since 1.0.0
31
+ * @category Command focus
32
+ */
33
+ export interface State extends Composite.State {
34
+ }
35
+ /**
36
+ * Initial Toolbar values. Uses Composite defaults unless overridden.
37
+ *
38
+ * @since 1.0.0
39
+ * @category Command focus
40
+ */
41
+ export type InitialState = Composite.InitialState;
42
+ /**
43
+ * Effect Schema used by makeState to encode, decode, and hydrate Toolbar state.
44
+ *
45
+ * @remarks
46
+ * @example
47
+ * ```ts
48
+ * import * as Schema from "effect/Schema";
49
+ * import * as Toolbar from "@typed/ui/Toolbar";
50
+ *
51
+ * const decodeState = Schema.decodeUnknownEffect(Toolbar.StateSchema);
52
+ * ```
53
+ * @since 1.0.0
54
+ * @category Command focus
55
+ */
56
+ export declare const StateSchema: Schema.Struct<{
57
+ readonly activeId: Schema.NullOr<Schema.String>;
58
+ readonly orientation: Schema.Literals<readonly ["horizontal", "vertical", "both"]>;
59
+ readonly loop: Schema.Boolean;
60
+ readonly rtl: Schema.Boolean;
61
+ readonly virtualFocus: Schema.Boolean;
62
+ }>;
63
+ /**
64
+ * Creates hydrated Toolbar state. Uses Composite defaults unless overridden.
65
+ *
66
+ * @remarks
67
+ * The returned Effect creates the RefSubject when run. That state is renderer-independent;
68
+ * collection registrations belong to the separate Scope that runs register or ref, not to state
69
+ * creation.
70
+ *
71
+ * @example
72
+ * ```ts
73
+ * import * as Effect from "effect/Effect";
74
+ * import * as Toolbar from "@typed/ui/Toolbar";
75
+ *
76
+ * const program = Effect.scoped(
77
+ * Effect.gen(function* () {
78
+ * const state = yield* Toolbar.makeState({});
79
+ * const collection = yield* Toolbar.makeCollection();
80
+ * return { state: yield* state, collection: yield* collection };
81
+ * }),
82
+ * );
83
+ * ```
84
+ * @since 1.0.0
85
+ * @category Command focus
86
+ */
87
+ export declare function makeState(initial?: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
88
+ readonly activeId: string | null;
89
+ readonly orientation: "both" | "horizontal" | "vertical";
90
+ readonly loop: boolean;
91
+ readonly rtl: boolean;
92
+ readonly virtualFocus: boolean;
93
+ }, Schema.SchemaError, never, never>, never, Scope.Scope>;
94
+ /**
95
+ * Creates a scoped Collection for Toolbar items.
96
+ *
97
+ * @remarks
98
+ * The returned Effect allocates the RefSubject in the caller's Scope. Each later registration is
99
+ * owned by the Scope that runs register, independently of this construction Effect.
100
+ *
101
+ * @example
102
+ * ```ts
103
+ * import * as Effect from "effect/Effect";
104
+ * import * as Toolbar from "@typed/ui/Toolbar";
105
+ *
106
+ * const program = Effect.scoped(
107
+ * Effect.gen(function* () {
108
+ * const collection = yield* Toolbar.makeCollection();
109
+ * return yield* collection;
110
+ * }),
111
+ * );
112
+ * ```
113
+ * @since 1.0.0
114
+ * @category Command registration
115
+ */
116
+ export declare const makeCollection: (initial?: Collection.State<string, Element>) => Effect.Effect<RefSubject.RefSubject<Collection.State<string, Element>, never, never>, never, Scope.Scope>;
117
+ /**
118
+ * Inputs accepted by Toolbar.Root in addition to the shared DOM host options.
119
+ *
120
+ * @since 1.0.0
121
+ * @category Toolbar surface
122
+ */
123
+ export interface RootOptions extends Dom.HostOptions<HTMLDivElement> {
124
+ /**
125
+ * Renderer-independent RefSubject state consumed by this component or operation.
126
+ * @since 1.0.0
127
+ * @category State connection
128
+ */
129
+ readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
130
+ /**
131
+ * Item registry used for collection-driven keyboard behavior and mounted ordering.
132
+ * @since 1.0.0
133
+ * @category Item registration
134
+ */
135
+ readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
136
+ /**
137
+ * Renderable child content for the component host.
138
+ * @since 1.0.0
139
+ * @category Rendered content
140
+ */
141
+ readonly content: Renderable.Any;
142
+ /**
143
+ * Accessible label rendered through aria-label.
144
+ * @since 1.0.0
145
+ * @category Accessible naming
146
+ */
147
+ readonly label?: Renderable.Any<string | null | undefined>;
148
+ }
149
+ declare function rootProps<const Options extends RootOptions>(options: Options): ({ property }: Dom.InternalPropsHelpers<Options>) => {
150
+ readonly role: "toolbar";
151
+ readonly "aria-label": Exclude<Dom.Property<Options, "label">, Dom.Nullish> | undefined;
152
+ readonly "aria-orientation": RefSubject.Computed<Composite.Orientation, Schema.SchemaError, never>;
153
+ readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
154
+ readonly onfocus: Effect.Effect<void, Schema.SchemaError, never> | undefined;
155
+ readonly onkeydown: EventHandler.EventHandler<KeyboardEvent, Schema.SchemaError, never> | undefined;
156
+ readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
157
+ };
158
+ type RootProps<Options extends RootOptions> = ReturnType<ReturnType<typeof rootProps<Options>>>;
159
+ /**
160
+ * Renders the toolbar root and moves roving focus through registered items in DOM order.
161
+ *
162
+ * @remarks
163
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
164
+ * collection registrations only when rendered. The rendering Scope removes those resources;
165
+ * unrelated nodes and attributes remain caller-owned.
166
+ *
167
+ * @since 1.0.0
168
+ * @category Toolbar surface
169
+ */
170
+ export declare function Root<const Options extends RootOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, RootProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
171
+ /**
172
+ * Consumer-facing alias of the canonical Toolbar component with identical behavior and lifetime.
173
+ *
174
+ * @remarks
175
+ * The alias acquires nothing. Rendering it has exactly the canonical component's Scope and DOM
176
+ * ownership contract.
177
+ *
178
+ * @since 1.0.0
179
+ * @category Toolbar surface
180
+ */
181
+ export declare const Toolbar: typeof Root;
182
+ /**
183
+ * Inputs accepted by Toolbar.Item in addition to the shared DOM host options.
184
+ *
185
+ * @since 1.0.0
186
+ * @category Toolbar commands
187
+ */
188
+ export interface ItemOptions extends Dom.HostOptions<HTMLDivElement> {
189
+ /**
190
+ * Renderer-independent RefSubject state consumed by this component or operation.
191
+ * @since 1.0.0
192
+ * @category State connection
193
+ */
194
+ readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
195
+ /**
196
+ * Item registry used for collection-driven keyboard behavior and mounted ordering.
197
+ * @since 1.0.0
198
+ * @category Item registration
199
+ */
200
+ readonly collection?: RefSubject.RefSubject<Collection.State<string>>;
201
+ /**
202
+ * Stable id used for collection identity and ARIA relationships.
203
+ * @since 1.0.0
204
+ * @category Identity and relationships
205
+ */
206
+ readonly id: string;
207
+ /**
208
+ * Renderable child content for the component host.
209
+ * @since 1.0.0
210
+ * @category Rendered content
211
+ */
212
+ readonly content: Renderable.Any;
213
+ /**
214
+ * Search text used by typeahead independently of rendered markup.
215
+ * @since 1.0.0
216
+ * @category Text matching
217
+ */
218
+ readonly textValue?: string;
219
+ /**
220
+ * Flag used by collection movement and widget handlers to skip activation by default.
221
+ * @since 1.0.0
222
+ * @category Availability
223
+ */
224
+ readonly disabled?: boolean;
225
+ }
226
+ declare function itemProps<const Options extends ItemOptions>(options: Options): () => {
227
+ readonly id: string;
228
+ readonly role: "button";
229
+ readonly "aria-disabled": boolean;
230
+ readonly tabindex: RefSubject.Computed<-1 | 0, Schema.SchemaError, never>;
231
+ readonly onfocus: Effect.Effect<void, never, never> | Effect.Effect<State, Schema.SchemaError, never>;
232
+ readonly ref: ((element: Element & HTMLDivElement & RefSubject.HydrationElement) => Effect.Effect<void, any, any>) | undefined;
233
+ };
234
+ type ItemProps<Options extends ItemOptions> = ReturnType<ReturnType<typeof itemProps<Options>>>;
235
+ /**
236
+ * Renders and optionally registers a toolbar button; focus activates it unless disabled.
237
+ *
238
+ * @remarks
239
+ * The returned Fx installs DOM refs, native listeners, state subscriptions, and optional
240
+ * collection registrations only when rendered. The rendering Scope removes those resources;
241
+ * unrelated nodes and attributes remain caller-owned.
242
+ *
243
+ * @since 1.0.0
244
+ * @category Toolbar commands
245
+ */
246
+ export declare function Item<const Options extends ItemOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ItemProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;
247
+ export {};
248
+ //# sourceMappingURL=Toolbar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.ts"],"names":[],"mappings":"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"}