@typed/ui 1.0.0-beta.6 → 1.0.0-beta.8

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 (130) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +1 -1
  3. package/dist/Alert.d.ts +35 -41
  4. package/dist/Alert.d.ts.map +1 -1
  5. package/dist/Alert.js +23 -20
  6. package/dist/Button.d.ts +34 -78
  7. package/dist/Button.d.ts.map +1 -1
  8. package/dist/Button.js +16 -12
  9. package/dist/Carousel.d.ts +35 -236
  10. package/dist/Carousel.d.ts.map +1 -1
  11. package/dist/Carousel.js +13 -136
  12. package/dist/Checkbox.d.ts +55 -90
  13. package/dist/Checkbox.d.ts.map +1 -1
  14. package/dist/Checkbox.js +44 -38
  15. package/dist/Collection.d.ts +15 -15
  16. package/dist/Collection.js +7 -7
  17. package/dist/Combobox.d.ts +38 -187
  18. package/dist/Combobox.d.ts.map +1 -1
  19. package/dist/Combobox.js +9 -80
  20. package/dist/Component.d.ts +30 -24
  21. package/dist/Component.d.ts.map +1 -1
  22. package/dist/Component.js +23 -12
  23. package/dist/Composite.d.ts +50 -50
  24. package/dist/Composite.js +20 -20
  25. package/dist/Dialog.d.ts +34 -34
  26. package/dist/Dialog.d.ts.map +1 -1
  27. package/dist/Dialog.js +16 -14
  28. package/dist/Disclosure.d.ts +15 -15
  29. package/dist/Disclosure.js +6 -6
  30. package/dist/Dom/Events.d.ts +4 -4
  31. package/dist/Dom/Events.js +4 -4
  32. package/dist/Dom/Props.d.ts +9 -9
  33. package/dist/Dom/Props.js +4 -4
  34. package/dist/Dom/Refs.d.ts +2 -2
  35. package/dist/Dom/Refs.js +1 -1
  36. package/dist/Dom/Render.d.ts +2 -2
  37. package/dist/Dom/Render.js +2 -2
  38. package/dist/Dom/Types.d.ts +33 -33
  39. package/dist/Dom/index.d.ts +5 -5
  40. package/dist/Dom/index.d.ts.map +1 -1
  41. package/dist/Dom/index.js +4 -4
  42. package/dist/Dom.d.ts +1 -1
  43. package/dist/Dom.js +1 -1
  44. package/dist/Focusable.d.ts +5 -5
  45. package/dist/Focusable.js +1 -1
  46. package/dist/Form.d.ts +565 -533
  47. package/dist/Form.d.ts.map +1 -1
  48. package/dist/Form.js +350 -195
  49. package/dist/Grid.d.ts +39 -220
  50. package/dist/Grid.d.ts.map +1 -1
  51. package/dist/Grid.js +12 -107
  52. package/dist/Group.d.ts +50 -69
  53. package/dist/Group.d.ts.map +1 -1
  54. package/dist/Group.js +33 -25
  55. package/dist/Heading.d.ts +41 -40
  56. package/dist/Heading.d.ts.map +1 -1
  57. package/dist/Heading.js +26 -16
  58. package/dist/Hovercard.d.ts +18 -18
  59. package/dist/Hovercard.js +6 -6
  60. package/dist/HttpRouter.d.ts +3 -3
  61. package/dist/HttpRouter.js +5 -5
  62. package/dist/Link.d.ts +17 -21
  63. package/dist/Link.d.ts.map +1 -1
  64. package/dist/Link.js +11 -0
  65. package/dist/Listbox.d.ts +31 -163
  66. package/dist/Listbox.d.ts.map +1 -1
  67. package/dist/Listbox.js +9 -80
  68. package/dist/Menu.d.ts +67 -376
  69. package/dist/Menu.d.ts.map +1 -1
  70. package/dist/Menu.js +17 -179
  71. package/dist/Menubar.d.ts +24 -142
  72. package/dist/Menubar.d.ts.map +1 -1
  73. package/dist/Menubar.js +8 -66
  74. package/dist/Meter.d.ts +72 -132
  75. package/dist/Meter.d.ts.map +1 -1
  76. package/dist/Meter.js +35 -42
  77. package/dist/NativeDetails.d.ts +1 -1
  78. package/dist/NativeDetails.js +1 -1
  79. package/dist/NativeDialog.d.ts +7 -5
  80. package/dist/NativeDialog.d.ts.map +1 -1
  81. package/dist/NativeDialog.js +42 -4
  82. package/dist/NativePopover.d.ts +6 -4
  83. package/dist/NativePopover.d.ts.map +1 -1
  84. package/dist/NativePopover.js +43 -5
  85. package/dist/Popover.d.ts +18 -19
  86. package/dist/Popover.d.ts.map +1 -1
  87. package/dist/Popover.js +7 -8
  88. package/dist/RadioGroup.d.ts +86 -188
  89. package/dist/RadioGroup.d.ts.map +1 -1
  90. package/dist/RadioGroup.js +55 -105
  91. package/dist/Role.d.ts +4 -4
  92. package/dist/Role.js +1 -1
  93. package/dist/Select.d.ts +109 -220
  94. package/dist/Select.d.ts.map +1 -1
  95. package/dist/Select.js +67 -117
  96. package/dist/Separator.d.ts +30 -26
  97. package/dist/Separator.d.ts.map +1 -1
  98. package/dist/Separator.js +16 -10
  99. package/dist/Slider.d.ts +64 -111
  100. package/dist/Slider.d.ts.map +1 -1
  101. package/dist/Slider.js +47 -42
  102. package/dist/SpinButton.d.ts +64 -111
  103. package/dist/SpinButton.d.ts.map +1 -1
  104. package/dist/SpinButton.js +47 -42
  105. package/dist/Storybook.d.ts +2 -2
  106. package/dist/Storybook.js +1 -1
  107. package/dist/Switch.d.ts +52 -91
  108. package/dist/Switch.d.ts.map +1 -1
  109. package/dist/Switch.js +30 -36
  110. package/dist/Tabs.d.ts +44 -224
  111. package/dist/Tabs.d.ts.map +1 -1
  112. package/dist/Tabs.js +10 -94
  113. package/dist/Toolbar.d.ts +24 -142
  114. package/dist/Toolbar.d.ts.map +1 -1
  115. package/dist/Toolbar.js +8 -66
  116. package/dist/Tooltip.d.ts +20 -20
  117. package/dist/Tooltip.js +6 -6
  118. package/dist/Tree.d.ts +43 -229
  119. package/dist/Tree.d.ts.map +1 -1
  120. package/dist/Tree.js +12 -113
  121. package/dist/TreeGrid.d.ts +45 -264
  122. package/dist/TreeGrid.d.ts.map +1 -1
  123. package/dist/TreeGrid.js +13 -125
  124. package/dist/VisuallyHidden.d.ts +41 -27
  125. package/dist/VisuallyHidden.d.ts.map +1 -1
  126. package/dist/VisuallyHidden.js +27 -10
  127. package/dist/WindowSplitter.d.ts +68 -108
  128. package/dist/WindowSplitter.d.ts.map +1 -1
  129. package/dist/WindowSplitter.js +106 -23
  130. package/package.json +13 -12
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IACtE;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACnE;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,OAAO,EAAE,OAAO,kBACpD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,OAAO;aACb,KAAK;aACL,QAAQ;aACR,GAAG;aACH,GAAG;aACH,IAAI;aACJ,OAAO;aAKP,GAAG;EAER;AACD,KAAK,mBAAmB,CAAC,OAAO,SAAS,aAAa,IAAI,UAAU,CAClE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC/F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAW9F"}
1
+ {"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;GACG;AACH,MAAM,WAAW,KAAK;IACpB;OACG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;GACG;AACH,MAAM,WAAW,YAAY;IAC3B;OACG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;GACG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;GACG;AACH,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IACtE;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACnE;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,OAAO,EAAE,OAAO,kBACpD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,OAAO;aACb,KAAK;aACL,QAAQ;aACR,GAAG;aACH,GAAG;aACH,IAAI;aACJ,OAAO;aAKP,GAAG;EAER;AACD,KAAK,mBAAmB,CAAC,OAAO,SAAS,aAAa,IAAI,UAAU,CAClE,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,MAAM,CAAC,KAAK,CAAC,OAAO,SAAS,aAAa,EAAE,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAC/F,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAW9F"}
package/dist/Slider.js CHANGED
@@ -1,23 +1,26 @@
1
+ /**
2
+ * Native range input publishing numeric updates during input.
3
+ * Keep programmatic values coherent with bounds and control expensive downstream work separately.
4
+ *
5
+ * Read the [Slider guide](/explore/ui-slider) for a complete example.
6
+ *
7
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).
8
+ * @since 1.0.0
9
+ * @category Overview
10
+ * @packageDocumentation
11
+ */
1
12
  import * as Effect from "effect/Effect";
2
13
  import * as Schema from "effect/Schema";
3
14
  import { RefSubject } from "@typed/fx";
4
15
  import { EventHandler, html } from "@typed/template";
5
16
  import * as Dom from "./Dom.js";
6
- /** Schema for slider hydration state.
7
- * @remarks
8
- * ## Why
9
- * Finite validation prevents invalid serialized range values.
10
- * ## Ownership and lifetime
11
- * The immutable schema acquires no resources.
12
- * @since 1.0.0
13
- * @category schemas
17
+ /**
14
18
  */
15
19
  export const StateSchema = Schema.Struct({ value: Schema.Finite });
16
- /** Creates hydrated slider state.
20
+ /**
21
+ * Creates hydrated slider state.
17
22
  * @remarks
18
- * ## Why
19
23
  * State can be composed and tested independently of the renderer.
20
- * ## Ownership and lifetime
21
24
  * The calling Effect Scope owns the returned RefSubject.
22
25
  * @example
23
26
  * ```ts
@@ -29,29 +32,20 @@ export const StateSchema = Schema.Struct({ value: Schema.Finite });
29
32
  * })
30
33
  * ```
31
34
  * @since 1.0.0
32
- * @category constructors
35
+ * @category State construction
33
36
  */
34
37
  export function makeState(initial) {
35
38
  return RefSubject.hydrate(StateSchema, initial);
36
39
  }
37
- /** Updates the synchronized slider value.
38
- * @remarks
39
- * ## Why
40
- * An explicit Effect transition preserves RefSubject failures and services.
41
- * ## Ownership and lifetime
42
- * It uses the existing state lifetime and acquires no resource.
43
- * @example
44
- * ```ts
45
- * import { Effect } from "effect"
46
- * import * as Slider from "@typed/ui/Slider"
40
+ /**
41
+ * Assigns a range value without clamping or snapping it.
47
42
  *
48
- * const program = Effect.gen(function* () {
49
- * const state = yield* Slider.makeState({ value: 25 })
50
- * yield* Slider.setValue(state, 50)
51
- * })
52
- * ```
43
+ * @remarks
44
+ * min, max, and step belong to the native input options and are not consulted here. Validate or
45
+ * normalize programmatic values before assignment so the subject and browser-sanitized range
46
+ * value stay consistent.
53
47
  * @since 1.0.0
54
- * @category state
48
+ * @category State transitions
55
49
  */
56
50
  export function setValue(state, value) {
57
51
  return RefSubject.update(state, (current) => ({ ...current, value }));
@@ -68,26 +62,37 @@ function internalProps(options) {
68
62
  ref: options.state,
69
63
  });
70
64
  }
71
- /** Renders a native range input synchronized with hydrated state.
65
+ /**
66
+ * Renders a native range input whose input events update numeric state.
67
+ *
72
68
  * @remarks
73
- * ## Why
74
- * Browser pointer, keyboard, constraints, and accessibility remain intact;
75
- * input events update the same RefSubject consumed elsewhere.
76
- * ## Ownership and lifetime
77
- * Running the Fx owns native listeners and subscriptions in its Scope. A
78
- * custom host must preserve type, value, range props, and the hydration ref.
69
+ * Dragging publishes through input, so expensive downstream work should control its own update
70
+ * rate. Native min/max/step, keyboard interaction, and pointer behavior stay with the browser.
71
+ * Supply a label and a unit-bearing readout; a custom non-input host must implement the
72
+ * interaction itself.
73
+ *
79
74
  * @example
80
75
  * ```ts
81
- * import { Effect } from "effect"
82
- * import * as Slider from "@typed/ui/Slider"
76
+ * import { RefSubject } from "@typed/fx";
77
+ * import { html } from "@typed/template";
78
+ * import { component } from "@typed/ui/Component";
79
+ * import * as Slider from "@typed/ui/Slider";
83
80
  *
84
- * const program = Effect.gen(function* () {
85
- * const state = yield* Slider.makeState({ value: 50 })
86
- * return Slider.Slider({ state, min: 0, max: 100 })
87
- * })
81
+ * export const ZoomControl = component(function* () {
82
+ * const state = yield* Slider.makeState({ value: 100 });
83
+ * const percentage = RefSubject.map(state, ({ value }) => `${value}%`);
84
+ * return html`<div class="zoom-control">
85
+ * <label for="preview-zoom">Preview zoom</label>
86
+ * ${Slider.Slider({
87
+ * state, min: 50, max: 200, step: 10,
88
+ * props: { id: "preview-zoom", name: "zoom", "aria-valuetext": percentage },
89
+ * })}
90
+ * <output for="preview-zoom">${percentage}</output>
91
+ * </div>`;
92
+ * });
88
93
  * ```
89
94
  * @since 1.0.0
90
- * @category components
95
+ * @category Native controls
91
96
  */
92
97
  export function Slider(options, host) {
93
98
  return Dom.renderHost()(options, host, internalProps(options), "", (props) => {
@@ -1,68 +1,43 @@
1
+ /**
2
+ * Native number entry publishing valueAsNumber at the change boundary.
3
+ * This thin primitive does not maintain draft strings or filter invalid numeric writes.
4
+ *
5
+ * Read the [SpinButton guide](/explore/ui-spin-button) for a complete example.
6
+ *
7
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).
8
+ * @since 1.0.0
9
+ * @category Overview
10
+ * @packageDocumentation
11
+ */
1
12
  import * as Effect from "effect/Effect";
2
13
  import * as Schema from "effect/Schema";
3
14
  import { RefSubject } from "@typed/fx";
4
15
  import { EventHandler, type Renderable } from "@typed/template";
5
16
  import * as Dom from "./Dom.js";
6
17
  import type { HostResult } from "./Dom/Types.js";
7
- /** Current renderer-independent spin-button value.
8
- * @remarks
9
- * ## Why
10
- * Numeric state can be transformed and tested without an input element.
11
- * ## Ownership and lifetime
12
- * Plain state is resource-free; RefSubject ownership is Scope-based.
13
- * @since 1.0.0
14
- * @category state
18
+ /**
15
19
  */
16
20
  export interface State {
17
- /** Finite value reflected by the native number input.
18
- * @remarks
19
- * ## Why
20
- * One source keeps form control and application state aligned.
21
- * ## Ownership and lifetime
22
- * Plain data acquires no resources.
23
- * @since 1.0.0
24
- * @category state
21
+ /**
25
22
  */
26
23
  readonly value: number;
27
24
  }
28
- /** Initial spin-button value.
29
- * @remarks
30
- * ## Why
31
- * Explicit state gives SSR and hydration the same numeric snapshot.
32
- * ## Ownership and lifetime
33
- * Configuration is inert.
34
- * @since 1.0.0
35
- * @category state
25
+ /**
36
26
  */
37
27
  export interface InitialState {
38
- /** Finite initial value.
39
- * @remarks
40
- * ## Why
41
- * It seeds synchronized state before the element mounts.
42
- * ## Ownership and lifetime
43
- * Plain data retains no resources.
44
- * @since 1.0.0
45
- * @category state
28
+ /**
46
29
  */
47
30
  readonly value: number;
48
31
  }
49
- /** Schema for spin-button hydration state.
50
- * @remarks
51
- * ## Why
52
- * Finite validation prevents invalid serialized number values.
53
- * ## Ownership and lifetime
54
- * The immutable schema acquires no resources.
55
- * @since 1.0.0
56
- * @category schemas
32
+ /**
57
33
  */
58
34
  export declare const StateSchema: Schema.Struct<{
59
35
  readonly value: Schema.Finite;
60
36
  }>;
61
- /** Creates hydrated spin-button state.
37
+ /**
38
+ * Creates hydrated spin-button state.
62
39
  * @remarks
63
- * ## Why
64
40
  * State remains renderer-independent and directly testable.
65
- * ## Ownership and lifetime
66
41
  * The calling Effect Scope owns the returned RefSubject.
67
42
  * @example
68
43
  * ```ts
@@ -74,80 +49,47 @@ export declare const StateSchema: Schema.Struct<{
74
49
  * })
75
50
  * ```
76
51
  * @since 1.0.0
77
- * @category constructors
52
+ * @category State construction
78
53
  */
79
54
  export declare function makeState(initial: InitialState): Effect.Effect<RefSubject.HydratedRefSubject<{
80
55
  readonly value: number;
81
56
  }, Schema.SchemaError, never, never>, never, import("effect/Scope").Scope>;
82
- /** Updates the synchronized numeric value.
83
- * @remarks
84
- * ## Why
85
- * An explicit Effect transition preserves RefSubject errors and services.
86
- * ## Ownership and lifetime
87
- * It uses the existing state lifetime and acquires no resource.
88
- * @example
89
- * ```ts
90
- * import { Effect } from "effect"
91
- * import * as SpinButton from "@typed/ui/SpinButton"
57
+ /**
58
+ * Assigns a numeric value without bounds checks or draft filtering.
92
59
  *
93
- * const program = Effect.gen(function* () {
94
- * const state = yield* SpinButton.makeState({ value: 1 })
95
- * yield* SpinButton.setValue(state, 2)
96
- * })
97
- * ```
60
+ * @remarks
61
+ * The helper does not consult min/max/step or reject NaN. The hydration schema describes finite
62
+ * snapshots, but this update is not a decoder. Choose Form.NumberInput or an explicit draft
63
+ * model when invalid text needs structured feedback.
98
64
  * @since 1.0.0
99
- * @category state
65
+ * @category State transitions
100
66
  */
101
67
  export declare function setValue<E, R>(state: RefSubject.RefSubject<State, E, R>, value: number): Effect.Effect<State, E, R>;
102
- /** Options for a native number input.
103
- * @remarks
104
- * ## Why
105
- * Native spin-button behavior supplies editing, stepping, forms, and
106
- * accessibility while Typed synchronizes state.
107
- * ## Ownership and lifetime
108
- * Options are inert; the mounted component owns subscriptions by Scope.
109
- * @since 1.0.0
110
- * @category models
68
+ /**
111
69
  */
112
70
  export interface SpinButtonOptions extends Dom.HostOptions<HTMLInputElement> {
113
- /** Hydrated value state.
114
- * @remarks
115
- * ## Why
116
- * One source serves SSR, UI, and renderer-free state logic.
117
- * ## Ownership and lifetime
118
- * The component borrows state and subscribes only while mounted.
71
+ /**
72
+ * Hydrated value state.
119
73
  * @since 1.0.0
120
- * @category state
74
+ * @category State connection
121
75
  */
122
76
  readonly state: RefSubject.HydratedRefSubject<State, Schema.SchemaError>;
123
- /** Native minimum value.
124
- * @remarks
125
- * ## Why
126
- * The platform applies this bound to stepping and validation.
127
- * ## Ownership and lifetime
128
- * Dynamic attributes follow the component Scope.
77
+ /**
78
+ * Native minimum value.
129
79
  * @since 1.0.0
130
- * @category attributes
80
+ * @category Numeric bounds
131
81
  */
132
82
  readonly min?: Renderable.Any<number | null | undefined>;
133
- /** Native maximum value.
134
- * @remarks
135
- * ## Why
136
- * The platform applies this bound to stepping and validation.
137
- * ## Ownership and lifetime
138
- * Dynamic attributes follow the component Scope.
83
+ /**
84
+ * Native maximum value.
139
85
  * @since 1.0.0
140
- * @category attributes
86
+ * @category Numeric bounds
141
87
  */
142
88
  readonly max?: Renderable.Any<number | null | undefined>;
143
- /** Native step value or `"any"`.
144
- * @remarks
145
- * ## Why
146
- * Increment semantics remain delegated to the number input.
147
- * ## Ownership and lifetime
148
- * Dynamic attributes follow the component Scope.
89
+ /**
90
+ * Native step value or `"any"`.
149
91
  * @since 1.0.0
150
- * @category attributes
92
+ * @category Numeric bounds
151
93
  */
152
94
  readonly step?: Renderable.Any<number | "any" | null | undefined>;
153
95
  }
@@ -162,26 +104,37 @@ declare function internalProps<const Options extends SpinButtonOptions>(options:
162
104
  readonly ref: RefSubject.HydratedRefSubject<State, Schema.SchemaError, never, never>;
163
105
  };
164
106
  type SpinButtonInternalProps<Options extends SpinButtonOptions> = ReturnType<ReturnType<typeof internalProps<Options>>>;
165
- /** Renders a native number input synchronized with hydrated state.
107
+ /**
108
+ * Renders a native number input that writes valueAsNumber on change.
109
+ *
166
110
  * @remarks
167
- * ## Why
168
- * Browser editing, stepping, validation, and form behavior remain intact while
169
- * change events update renderer-independent state.
170
- * ## Ownership and lifetime
171
- * Running the Fx owns listener/state subscriptions in its Scope. A custom host
172
- * must preserve type, value, constraints, and the single hydration ref owner.
111
+ * State updates occur at the change boundary rather than every input event. Empty or invalid
112
+ * native text can yield NaN; the handler does not filter it before assignment. This thin
113
+ * primitive does not preserve a separate draft string, create field errors, or clamp
114
+ * programmatic writes.
115
+ *
173
116
  * @example
174
117
  * ```ts
175
- * import { Effect } from "effect"
176
- * import * as SpinButton from "@typed/ui/SpinButton"
118
+ * import { RefSubject } from "@typed/fx";
119
+ * import { html } from "@typed/template";
120
+ * import { component } from "@typed/ui/Component";
121
+ * import * as SpinButton from "@typed/ui/SpinButton";
177
122
  *
178
- * const program = Effect.gen(function* () {
179
- * const state = yield* SpinButton.makeState({ value: 1 })
180
- * return SpinButton.SpinButton({ state, min: 0 })
181
- * })
123
+ * export const CopyCount = component(function* () {
124
+ * const state = yield* SpinButton.makeState({ value: 1 });
125
+ * const summary = RefSubject.map(state, ({ value }) => `Copies requested: ${value}`);
126
+ * return html`<div class="copy-count">
127
+ * <label for="print-copies">Number of copies</label>
128
+ * ${SpinButton.SpinButton({
129
+ * state, min: 1, max: 100, step: 1,
130
+ * props: { id: "print-copies", name: "copies", required: true },
131
+ * })}
132
+ * <p>${summary}</p>
133
+ * </div>`;
134
+ * });
182
135
  * ```
183
136
  * @since 1.0.0
184
- * @category components
137
+ * @category Native controls
185
138
  */
186
139
  export declare function SpinButton<const Options extends SpinButtonOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, SpinButtonInternalProps<Options>>, "", Host>): import("./Dom/Types.js").HostComponent<Host | Options>;
187
140
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"SpinButton.d.ts","sourceRoot":"","sources":["../src/SpinButton.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,iBAAkB,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IAC1E;;;;;;;;OAQG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;;;;;OAQG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACnE;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,kBACxD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,QAAQ;aACd,KAAK;aACL,QAAQ;aACR,GAAG;aACH,GAAG;aACH,IAAI;aACJ,QAAQ;aAKR,GAAG;EAER;AACD,KAAK,uBAAuB,CAAC,OAAO,SAAS,iBAAiB,IAAI,UAAU,CAC1E,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CACxB,KAAK,CAAC,OAAO,SAAS,iBAAiB,EACvC,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAErC,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAWlG"}
1
+ {"version":3,"file":"SpinButton.d.ts","sourceRoot":"","sources":["../src/SpinButton.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,YAAY,EAAQ,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;GACG;AACH,MAAM,WAAW,KAAK;IACpB;OACG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;GACG;AACH,MAAM,WAAW,YAAY;IAC3B;OACG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED;GACG;AACH,eAAO,MAAM,WAAW;;EAA0C,CAAC;AAEnE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,YAAY;;2EAE9C;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAC3B,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,KAAK,EAAE,MAAM,GACZ,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAE5B;AAED;GACG;AACH,MAAM,WAAW,iBAAkB,SAAQ,GAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC;IAC1E;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC;IACzE;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACnE;AAED,iBAAS,aAAa,CAAC,KAAK,CAAC,OAAO,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,kBACxD,GAAG,CAAC,oBAAoB,CAAC,OAAO,CAAC;aAEnD,IAAI,EAAE,QAAQ;aACd,KAAK;aACL,QAAQ;aACR,GAAG;aACH,GAAG;aACH,IAAI;aACJ,QAAQ;aAKR,GAAG;EAER;AACD,KAAK,uBAAuB,CAAC,OAAO,SAAS,iBAAiB,IAAI,UAAU,CAC1E,UAAU,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,CAC1C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,UAAU,CACxB,KAAK,CAAC,OAAO,SAAS,iBAAiB,EACvC,KAAK,CAAC,IAAI,SAAS,UAAU,GAAG,KAAK,EAErC,OAAO,EAAE,OAAO,EAChB,IAAI,CAAC,EAAE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC,OAAO,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,0DAWlG"}
@@ -1,23 +1,26 @@
1
+ /**
2
+ * Native number entry publishing valueAsNumber at the change boundary.
3
+ * This thin primitive does not maintain draft strings or filter invalid numeric writes.
4
+ *
5
+ * Read the [SpinButton guide](/explore/ui-spin-button) for a complete example.
6
+ *
7
+ * [APG interaction reference](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).
8
+ * @since 1.0.0
9
+ * @category Overview
10
+ * @packageDocumentation
11
+ */
1
12
  import * as Effect from "effect/Effect";
2
13
  import * as Schema from "effect/Schema";
3
14
  import { RefSubject } from "@typed/fx";
4
15
  import { EventHandler, html } from "@typed/template";
5
16
  import * as Dom from "./Dom.js";
6
- /** Schema for spin-button hydration state.
7
- * @remarks
8
- * ## Why
9
- * Finite validation prevents invalid serialized number values.
10
- * ## Ownership and lifetime
11
- * The immutable schema acquires no resources.
12
- * @since 1.0.0
13
- * @category schemas
17
+ /**
14
18
  */
15
19
  export const StateSchema = Schema.Struct({ value: Schema.Finite });
16
- /** Creates hydrated spin-button state.
20
+ /**
21
+ * Creates hydrated spin-button state.
17
22
  * @remarks
18
- * ## Why
19
23
  * State remains renderer-independent and directly testable.
20
- * ## Ownership and lifetime
21
24
  * The calling Effect Scope owns the returned RefSubject.
22
25
  * @example
23
26
  * ```ts
@@ -29,29 +32,20 @@ export const StateSchema = Schema.Struct({ value: Schema.Finite });
29
32
  * })
30
33
  * ```
31
34
  * @since 1.0.0
32
- * @category constructors
35
+ * @category State construction
33
36
  */
34
37
  export function makeState(initial) {
35
38
  return RefSubject.hydrate(StateSchema, initial);
36
39
  }
37
- /** Updates the synchronized numeric value.
38
- * @remarks
39
- * ## Why
40
- * An explicit Effect transition preserves RefSubject errors and services.
41
- * ## Ownership and lifetime
42
- * It uses the existing state lifetime and acquires no resource.
43
- * @example
44
- * ```ts
45
- * import { Effect } from "effect"
46
- * import * as SpinButton from "@typed/ui/SpinButton"
40
+ /**
41
+ * Assigns a numeric value without bounds checks or draft filtering.
47
42
  *
48
- * const program = Effect.gen(function* () {
49
- * const state = yield* SpinButton.makeState({ value: 1 })
50
- * yield* SpinButton.setValue(state, 2)
51
- * })
52
- * ```
43
+ * @remarks
44
+ * The helper does not consult min/max/step or reject NaN. The hydration schema describes finite
45
+ * snapshots, but this update is not a decoder. Choose Form.NumberInput or an explicit draft
46
+ * model when invalid text needs structured feedback.
53
47
  * @since 1.0.0
54
- * @category state
48
+ * @category State transitions
55
49
  */
56
50
  export function setValue(state, value) {
57
51
  return RefSubject.update(state, (current) => ({ ...current, value }));
@@ -68,26 +62,37 @@ function internalProps(options) {
68
62
  ref: options.state,
69
63
  });
70
64
  }
71
- /** Renders a native number input synchronized with hydrated state.
65
+ /**
66
+ * Renders a native number input that writes valueAsNumber on change.
67
+ *
72
68
  * @remarks
73
- * ## Why
74
- * Browser editing, stepping, validation, and form behavior remain intact while
75
- * change events update renderer-independent state.
76
- * ## Ownership and lifetime
77
- * Running the Fx owns listener/state subscriptions in its Scope. A custom host
78
- * must preserve type, value, constraints, and the single hydration ref owner.
69
+ * State updates occur at the change boundary rather than every input event. Empty or invalid
70
+ * native text can yield NaN; the handler does not filter it before assignment. This thin
71
+ * primitive does not preserve a separate draft string, create field errors, or clamp
72
+ * programmatic writes.
73
+ *
79
74
  * @example
80
75
  * ```ts
81
- * import { Effect } from "effect"
82
- * import * as SpinButton from "@typed/ui/SpinButton"
76
+ * import { RefSubject } from "@typed/fx";
77
+ * import { html } from "@typed/template";
78
+ * import { component } from "@typed/ui/Component";
79
+ * import * as SpinButton from "@typed/ui/SpinButton";
83
80
  *
84
- * const program = Effect.gen(function* () {
85
- * const state = yield* SpinButton.makeState({ value: 1 })
86
- * return SpinButton.SpinButton({ state, min: 0 })
87
- * })
81
+ * export const CopyCount = component(function* () {
82
+ * const state = yield* SpinButton.makeState({ value: 1 });
83
+ * const summary = RefSubject.map(state, ({ value }) => `Copies requested: ${value}`);
84
+ * return html`<div class="copy-count">
85
+ * <label for="print-copies">Number of copies</label>
86
+ * ${SpinButton.SpinButton({
87
+ * state, min: 1, max: 100, step: 1,
88
+ * props: { id: "print-copies", name: "copies", required: true },
89
+ * })}
90
+ * <p>${summary}</p>
91
+ * </div>`;
92
+ * });
88
93
  * ```
89
94
  * @since 1.0.0
90
- * @category components
95
+ * @category Native controls
91
96
  */
92
97
  export function SpinButton(options, host) {
93
98
  return Dom.renderHost()(options, host, internalProps(options), "", (props) => {
@@ -16,7 +16,7 @@ import { type RenderEvent, type RenderTemplate } from "@typed/template";
16
16
  * removal observer; removing the canvas is the observer's cleanup boundary.
17
17
  *
18
18
  * @since 1.0.0
19
- * @category testing
19
+ * @category Story lifetime
20
20
  */
21
21
  export interface MountedStory {
22
22
  /** Detached div containing the story's real rendered DOM. */
@@ -70,7 +70,7 @@ export interface MountedStory {
70
70
  * ```
71
71
  *
72
72
  * @since 1.0.0
73
- * @category testing
73
+ * @category Story mounting
74
74
  */
75
75
  export declare function mount<E>(content: Fx.Fx<RenderEvent, E, Scope.Scope | RenderTemplate>, document?: Document): Promise<MountedStory>;
76
76
  //# sourceMappingURL=Storybook.d.ts.map
package/dist/Storybook.js CHANGED
@@ -51,7 +51,7 @@ import { DomRenderTemplate, render as renderDom, } from "@typed/template";
51
51
  * ```
52
52
  *
53
53
  * @since 1.0.0
54
- * @category testing
54
+ * @category Story mounting
55
55
  */
56
56
  export async function mount(content, document = globalThis.document) {
57
57
  const canvas = document.createElement("div");