@jsenv/navi 0.10.1 → 0.11.0

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 (207) hide show
  1. package/dist/jsenv_navi.js +13858 -23295
  2. package/dist/jsenv_navi.js.map +1281 -0
  3. package/package.json +5 -7
  4. package/index.js +0 -122
  5. package/src/action_private_properties.js +0 -11
  6. package/src/action_proxy_test.html +0 -353
  7. package/src/action_run_states.js +0 -5
  8. package/src/actions.js +0 -1401
  9. package/src/browser_integration/browser_integration.js +0 -216
  10. package/src/browser_integration/document_back_and_forward.js +0 -17
  11. package/src/browser_integration/document_loading_signal.js +0 -100
  12. package/src/browser_integration/document_state_signal.js +0 -9
  13. package/src/browser_integration/document_url_signal.js +0 -9
  14. package/src/browser_integration/use_is_visited.js +0 -19
  15. package/src/browser_integration/via_history.js +0 -232
  16. package/src/browser_integration/via_navigation.js +0 -168
  17. package/src/components/action_execution/form_context.js +0 -5
  18. package/src/components/action_execution/render_actionable_component.jsx +0 -29
  19. package/src/components/action_execution/use_action.js +0 -99
  20. package/src/components/action_execution/use_execute_action.js +0 -177
  21. package/src/components/action_execution/use_run_on_mount.js +0 -9
  22. package/src/components/action_renderer.jsx +0 -125
  23. package/src/components/callout/callout.js +0 -990
  24. package/src/components/callout/callout_demo.html +0 -201
  25. package/src/components/callout/test_dynamic_positioning.html +0 -161
  26. package/src/components/callout/test_html_document_iframe.html +0 -182
  27. package/src/components/demos/0_button_demo.html +0 -707
  28. package/src/components/demos/10_column_reordering_debug.html +0 -277
  29. package/src/components/demos/11_table_selection_debug.html +0 -432
  30. package/src/components/demos/1_checkbox_demo.html +0 -754
  31. package/src/components/demos/2_input_textual_demo.html +0 -286
  32. package/src/components/demos/3_radio_demo.html +0 -874
  33. package/src/components/demos/4_select_demo.html +0 -100
  34. package/src/components/demos/5_list_scrollable_demo.html +0 -153
  35. package/src/components/demos/6_tablist_demo.html +0 -77
  36. package/src/components/demos/7_table_selection_demo.html +0 -176
  37. package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
  38. package/src/components/demos/9_table_column_drag_demo.html +0 -325
  39. package/src/components/demos/action/0_button_demo.html +0 -204
  40. package/src/components/demos/action/10_shortcuts_demo.html +0 -189
  41. package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
  42. package/src/components/demos/action/1_input_text_demo.html +0 -876
  43. package/src/components/demos/action/2_form_multiple.html +0 -303
  44. package/src/components/demos/action/3_details_demo.html +0 -203
  45. package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
  46. package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
  47. package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
  48. package/src/components/demos/action/7_radio_list_demo.html +0 -357
  49. package/src/components/demos/action/8_editable_demo.html +0 -431
  50. package/src/components/demos/action/9_link_demo.html +0 -194
  51. package/src/components/demos/demo.md +0 -0
  52. package/src/components/demos/route/basic/basic.html +0 -14
  53. package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
  54. package/src/components/demos/route/multi/multi.html +0 -14
  55. package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
  56. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
  57. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
  58. package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
  59. package/src/components/details/details.jsx +0 -245
  60. package/src/components/details/summary_marker.jsx +0 -141
  61. package/src/components/edition/editable.jsx +0 -186
  62. package/src/components/error_boundary_context.js +0 -9
  63. package/src/components/field/README.md +0 -247
  64. package/src/components/field/button.jsx +0 -429
  65. package/src/components/field/checkbox_list.jsx +0 -185
  66. package/src/components/field/collect_form_element_values.js +0 -82
  67. package/src/components/field/custom_field.js +0 -106
  68. package/src/components/field/form.jsx +0 -209
  69. package/src/components/field/input.jsx +0 -16
  70. package/src/components/field/input_checkbox.jsx +0 -434
  71. package/src/components/field/input_radio.jsx +0 -432
  72. package/src/components/field/input_textual.jsx +0 -389
  73. package/src/components/field/label.jsx +0 -46
  74. package/src/components/field/radio_list.jsx +0 -183
  75. package/src/components/field/select.jsx +0 -256
  76. package/src/components/field/use_action_events.js +0 -132
  77. package/src/components/field/use_form_events.js +0 -59
  78. package/src/components/field/use_ui_state_controller.js +0 -506
  79. package/src/components/item_tracker/README.md +0 -461
  80. package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
  81. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
  82. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
  83. package/src/components/item_tracker/use_item_tracker.jsx +0 -143
  84. package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
  85. package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
  86. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
  87. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
  88. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
  89. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
  90. package/src/components/keyboard_shortcuts/os.js +0 -9
  91. package/src/components/layout/demos/demo_flex.html +0 -638
  92. package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
  93. package/src/components/layout/demos/demo_layout_style_input.html +0 -226
  94. package/src/components/layout/demos/demo_layout_style_text.html +0 -514
  95. package/src/components/layout/flex.jsx +0 -109
  96. package/src/components/layout/layout_context.jsx +0 -3
  97. package/src/components/layout/spacing.jsx +0 -20
  98. package/src/components/layout/use_layout_style.js +0 -249
  99. package/src/components/link/link.jsx +0 -267
  100. package/src/components/link/link_with_icon.jsx +0 -52
  101. package/src/components/loader/loader_background.jsx +0 -372
  102. package/src/components/loader/loading_spinner.jsx +0 -68
  103. package/src/components/loader/network_speed.js +0 -83
  104. package/src/components/loader/rectangle_loading.jsx +0 -244
  105. package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
  106. package/src/components/props_composition/with_props_class_name.js +0 -37
  107. package/src/components/props_composition/with_props_style.js +0 -26
  108. package/src/components/route.jsx +0 -19
  109. package/src/components/selection/selection.jsx +0 -1583
  110. package/src/components/svg/font_sized_svg.jsx +0 -59
  111. package/src/components/svg/icon_and_text.jsx +0 -21
  112. package/src/components/svg/svg_mask_overlay.jsx +0 -105
  113. package/src/components/table/drag/table_drag.jsx +0 -506
  114. package/src/components/table/resize/table_resize.jsx +0 -650
  115. package/src/components/table/resize/table_size.js +0 -43
  116. package/src/components/table/selection/table_selection.js +0 -106
  117. package/src/components/table/selection/table_selection.jsx +0 -203
  118. package/src/components/table/sticky/sticky_group.js +0 -354
  119. package/src/components/table/sticky/table_sticky.js +0 -25
  120. package/src/components/table/sticky/table_sticky.jsx +0 -501
  121. package/src/components/table/table.jsx +0 -721
  122. package/src/components/table/table_css.js +0 -211
  123. package/src/components/table/table_ui.jsx +0 -49
  124. package/src/components/table/use_cells_and_columns.js +0 -90
  125. package/src/components/table/use_object_array_to_cells.js +0 -46
  126. package/src/components/table/z_indexes.js +0 -23
  127. package/src/components/tablist/tablist.jsx +0 -99
  128. package/src/components/text/demos/demo_text_and_icon.html +0 -421
  129. package/src/components/text/overflow.jsx +0 -15
  130. package/src/components/text/text.jsx +0 -83
  131. package/src/components/text/text_and_count.jsx +0 -28
  132. package/src/components/ui_transition.jsx +0 -128
  133. package/src/components/use_auto_focus.js +0 -94
  134. package/src/components/use_batch_during_render.js +0 -33
  135. package/src/components/use_debounce_true.js +0 -31
  136. package/src/components/use_dependencies_diff.js +0 -35
  137. package/src/components/use_focus_group.js +0 -20
  138. package/src/components/use_initial_value.js +0 -78
  139. package/src/components/use_is_visited.js +0 -19
  140. package/src/components/use_ref_array.js +0 -38
  141. package/src/components/use_signal_sync.js +0 -50
  142. package/src/components/use_stable_callback.js +0 -68
  143. package/src/components/use_state_array.js +0 -47
  144. package/src/docs/actions.md +0 -250
  145. package/src/docs/demos/resource/action_status.jsx +0 -42
  146. package/src/docs/demos/resource/demo.md +0 -1
  147. package/src/docs/demos/resource/resource_demo_0.html +0 -84
  148. package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
  149. package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
  150. package/src/docs/demos/resource/resource_demo_2.html +0 -173
  151. package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
  152. package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
  153. package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
  154. package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
  155. package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
  156. package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
  157. package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
  158. package/src/docs/demos/resource/tata.jsx +0 -3
  159. package/src/docs/demos/resource/toto.jsx +0 -3
  160. package/src/docs/demos/user_nav/user_nav.html +0 -12
  161. package/src/docs/demos/user_nav/user_nav.jsx +0 -330
  162. package/src/docs/resource_dependencies.md +0 -103
  163. package/src/docs/resource_with_params.md +0 -80
  164. package/src/navi_css_vars.js +0 -14
  165. package/src/notes.md +0 -34
  166. package/src/route/route.js +0 -596
  167. package/src/route/route.xtest.html +0 -228
  168. package/src/store/array_signal_store.js +0 -537
  169. package/src/store/local_storage_signal.js +0 -17
  170. package/src/store/resource_graph.js +0 -1304
  171. package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
  172. package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
  173. package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
  174. package/src/store/value_in_local_storage.js +0 -187
  175. package/src/symbol_object_signal.js +0 -1
  176. package/src/use_action_data.js +0 -10
  177. package/src/use_action_status.js +0 -47
  178. package/src/utils/add_many_event_listeners.js +0 -15
  179. package/src/utils/array_add_remove.js +0 -61
  180. package/src/utils/array_signal.js +0 -15
  181. package/src/utils/compare_two_js_values.js +0 -172
  182. package/src/utils/execute_with_cleanup.js +0 -21
  183. package/src/utils/get_caller_info.js +0 -85
  184. package/src/utils/is_signal.js +0 -20
  185. package/src/utils/js_value_weak_map.js +0 -162
  186. package/src/utils/js_value_weak_map_demo.html +0 -690
  187. package/src/utils/merge_two_js_values.js +0 -53
  188. package/src/utils/stringify_for_display.js +0 -131
  189. package/src/utils/weak_effect.js +0 -48
  190. package/src/validation/constraints/confirm_constraint.js +0 -14
  191. package/src/validation/constraints/create_unique_value_constraint.js +0 -27
  192. package/src/validation/constraints/native_constraints.js +0 -338
  193. package/src/validation/constraints/readonly_constraint.js +0 -41
  194. package/src/validation/constraints/same_as_constraint.js +0 -42
  195. package/src/validation/constraints/single_space_constraint.js +0 -13
  196. package/src/validation/custom_constraint_validation.js +0 -793
  197. package/src/validation/custom_message.js +0 -18
  198. package/src/validation/demos/browser_style.png +0 -0
  199. package/src/validation/demos/demo_same_as_constraint.html +0 -259
  200. package/src/validation/demos/form_validation_demo.html +0 -142
  201. package/src/validation/demos/form_validation_demo_preact.html +0 -87
  202. package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
  203. package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
  204. package/src/validation/hooks/use_constraints.js +0 -23
  205. package/src/validation/hooks/use_custom_validation_ref.js +0 -73
  206. package/src/validation/hooks/use_validation_message.js +0 -19
  207. package/src/validation/input_change_effect.js +0 -106
package/src/components/demos/3_radio_demo.html DELETED
@@ -1,874 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" href="data:," />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Radio Demo</title>
8
- <style>
9
- body {
10
- font-family:
11
- -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12
- max-width: 1400px;
13
- margin: 0 auto;
14
- padding: 20px;
15
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
16
- min-height: 100vh;
17
- }
18
-
19
- h1 {
20
- text-align: center;
21
- color: #2c3e50;
22
- margin-bottom: 30px;
23
- font-size: 2.5rem;
24
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
25
- }
26
-
27
- .demo-grid {
28
- display: grid;
29
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
30
- gap: 20px;
31
- margin-bottom: 30px;
32
- }
33
-
34
- .demo-card {
35
- background: white;
36
- border-radius: 12px;
37
- padding: 25px;
38
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
39
- border: 1px solid #e1e8ed;
40
- transition:
41
- transform 0.2s ease,
42
- box-shadow 0.2s ease;
43
- }
44
-
45
- .demo-card:hover {
46
- transform: translateY(-2px);
47
- box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
48
- }
49
-
50
- .demo-title {
51
- color: #2c3e50;
52
- margin: 0 0 20px 0;
53
- font-size: 1.3rem;
54
- font-weight: 600;
55
- border-bottom: 3px solid #e74c3c;
56
- padding-bottom: 10px;
57
- display: flex;
58
- align-items: center;
59
- gap: 10px;
60
- }
61
-
62
- .demo-title::before {
63
- content: "🔘";
64
- font-size: 1.2rem;
65
- }
66
-
67
- .radio-row {
68
- display: flex;
69
- align-items: center;
70
- gap: 15px;
71
- margin: 15px 0;
72
- padding: 12px;
73
- background: #f8f9fa;
74
- border-radius: 8px;
75
- border: 1px solid #e9ecef;
76
- transition: background 0.2s ease;
77
- }
78
-
79
- .radio-row:hover {
80
- background: #e8f4f8;
81
- }
82
-
83
- .radio-label {
84
- display: flex;
85
- align-items: center;
86
- gap: 10px;
87
- font-size: 1rem;
88
- color: #495057;
89
- flex: 1;
90
- min-width: 0;
91
- }
92
-
93
- .toggle-button {
94
- padding: 8px 16px;
95
- background: linear-gradient(45deg, #e74c3c, #c0392b);
96
- color: white;
97
- border: none;
98
- border-radius: 6px;
99
- cursor: pointer;
100
- font-size: 0.9rem;
101
- font-weight: 500;
102
- transition: all 0.2s ease;
103
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
104
- flex-shrink: 0;
105
- white-space: nowrap;
106
- }
107
-
108
- .toggle-button:hover {
109
- background: linear-gradient(45deg, #c0392b, #a93226);
110
- transform: translateY(-1px);
111
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
112
- }
113
-
114
- .comparison {
115
- display: flex;
116
- flex-direction: column;
117
- gap: 8px;
118
- margin-top: 15px;
119
- padding: 12px;
120
- background: #fff3cd;
121
- border-radius: 6px;
122
- border-left: 4px solid #ffc107;
123
- }
124
-
125
- .comparison-label {
126
- font-size: 0.85rem;
127
- color: #856404;
128
- font-weight: 500;
129
- margin-bottom: 5px;
130
- }
131
-
132
- .native-examples {
133
- display: flex;
134
- flex-direction: column;
135
- gap: 8px;
136
- }
137
-
138
- .native-examples label {
139
- display: flex;
140
- align-items: center;
141
- gap: 10px;
142
- font-size: 0.9rem;
143
- color: #495057;
144
- }
145
-
146
- .prop-control-demo {
147
- grid-column: 1 / -1;
148
- background: linear-gradient(45deg, #e74c3c 0%, #c0392b 100%);
149
- color: white;
150
- }
151
-
152
- .prop-control-demo .demo-title {
153
- color: white;
154
- border-bottom-color: #ffffff;
155
- }
156
-
157
- .prop-control-demo .demo-title::before {
158
- content: "🎛️";
159
- }
160
-
161
- .color-controls {
162
- margin-bottom: 25px;
163
- display: grid;
164
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
165
- gap: 15px;
166
- }
167
-
168
- .color-select-group {
169
- background: rgba(255, 255, 255, 0.1);
170
- padding: 15px;
171
- border-radius: 8px;
172
- border: 1px solid rgba(255, 255, 255, 0.2);
173
- }
174
-
175
- .color-select-label {
176
- display: block;
177
- margin-bottom: 8px;
178
- font-weight: 500;
179
- font-size: 0.95rem;
180
- }
181
-
182
- .color-select {
183
- width: 100%;
184
- padding: 8px 12px;
185
- border: none;
186
- border-radius: 6px;
187
- background: white;
188
- color: #333;
189
- font-size: 0.9rem;
190
- cursor: pointer;
191
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
192
- }
193
-
194
- .state-controls {
195
- background: rgba(255, 255, 255, 0.1);
196
- padding: 15px;
197
- border-radius: 8px;
198
- border: 1px solid rgba(255, 255, 255, 0.2);
199
- margin-bottom: 20px;
200
- }
201
-
202
- .state-controls h4 {
203
- margin-top: 0;
204
- margin-bottom: 15px;
205
- font-size: 1.1rem;
206
- }
207
-
208
- .state-toggles {
209
- display: grid;
210
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
211
- gap: 10px;
212
- }
213
-
214
- .state-toggle {
215
- background: rgba(255, 255, 255, 0.9);
216
- color: #333;
217
- border: none;
218
- padding: 10px 15px;
219
- border-radius: 6px;
220
- cursor: pointer;
221
- font-size: 0.9rem;
222
- font-weight: 500;
223
- transition: all 0.2s ease;
224
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
225
- }
226
-
227
- .state-toggle:hover {
228
- background: white;
229
- transform: translateY(-1px);
230
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
231
- }
232
-
233
- .state-toggle.active {
234
- background: #ffffff;
235
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
236
- }
237
-
238
- .radio-group {
239
- display: flex;
240
- flex-direction: column;
241
- gap: 10px;
242
- margin: 15px 0;
243
- padding: 15px;
244
- background: rgba(255, 255, 255, 0.1);
245
- border-radius: 8px;
246
- border: 1px solid rgba(255, 255, 255, 0.2);
247
- }
248
-
249
- .radio-group h4 {
250
- margin: 0 0 10px 0;
251
- font-size: 1rem;
252
- color: white;
253
- }
254
-
255
- .custom-styles-test {
256
- background: rgba(255, 255, 255, 0.9);
257
- color: #333;
258
- padding: 20px;
259
- border-radius: 8px;
260
- border: 1px solid rgba(255, 255, 255, 0.2);
261
- margin: 15px 0;
262
- }
263
-
264
- .custom-styles-test h4 {
265
- margin-top: 0;
266
- color: #2c3e50;
267
- font-size: 1.1rem;
268
- }
269
-
270
- .custom-styles-comparison {
271
- display: grid;
272
- grid-template-columns: 1fr 1fr;
273
- gap: 20px;
274
- margin-top: 15px;
275
- }
276
-
277
- .comparison-item {
278
- background: rgba(255, 255, 255, 0.05);
279
- padding: 15px;
280
- border-radius: 6px;
281
- border: 1px solid rgba(255, 255, 255, 0.1);
282
- }
283
-
284
- .comparison-item h5 {
285
- margin-top: 0;
286
- margin-bottom: 10px;
287
- color: #34495e;
288
- font-size: 0.9rem;
289
- }
290
-
291
- @media (max-width: 768px) {
292
- .demo-grid {
293
- grid-template-columns: 1fr;
294
- }
295
-
296
- h1 {
297
- font-size: 2rem;
298
- }
299
-
300
- .radio-row {
301
- flex-direction: column;
302
- align-items: stretch;
303
- gap: 10px;
304
- }
305
- }
306
- </style>
307
- </head>
308
- <body>
309
- <h1>🔘 Interactive Radio Demo</h1>
310
- <div id="root"></div>
311
-
312
- <script type="module" jsenv-type="module/jsx">
313
- import { render } from "preact";
314
- import { useState } from "preact/hooks";
315
- import {
316
- // eslint-disable-next-line no-unused-vars
317
- Input,
318
- // eslint-disable-next-line no-unused-vars
319
- Label,
320
- } from "@jsenv/navi";
321
-
322
- // eslint-disable-next-line no-unused-vars
323
- const App = () => {
324
- return (
325
- <div className="demo-grid">
326
- <LoadingDemo />
327
- <ReadOnlyDemo />
328
- <DisabledDemo />
329
- <PropControlDemo />
330
- <CustomStylesDemo />
331
- </div>
332
- );
333
- };
334
-
335
- // eslint-disable-next-line no-unused-vars
336
- const LoadingDemo = () => {
337
- const [loading, setLoading] = useState(false);
338
- const [selectedValue, setSelectedValue] = useState("option1");
339
-
340
- return (
341
- <div className="demo-card">
342
- <h3 className="demo-title">Loading States</h3>
343
-
344
- <div className="radio-group">
345
- <h4>Radio Group (Loading: {loading ? "Yes" : "No"})</h4>
346
- <Label className="radio-label">
347
- <Input
348
- type="radio"
349
- name="loading-demo"
350
- value="option1"
351
- checked={selectedValue === "option1"}
352
- onUIStateChange={(checked) => {
353
- if (checked) {
354
- setSelectedValue("option1");
355
- }
356
- }}
357
- loading={loading}
358
- />
359
- Option 1
360
- </Label>
361
- <Label className="radio-label">
362
- <Input
363
- type="radio"
364
- name="loading-demo"
365
- value="option2"
366
- checked={selectedValue === "option2"}
367
- onUIStateChange={(checked) => {
368
- if (checked) {
369
- setSelectedValue("option2");
370
- }
371
- }}
372
- loading={loading}
373
- />
374
- Option 2
375
- </Label>
376
- <Label className="radio-label">
377
- <Input
378
- type="radio"
379
- name="loading-demo"
380
- value="option3"
381
- checked={selectedValue === "option3"}
382
- onUIStateChange={(checked) => {
383
- if (checked) {
384
- setSelectedValue("option3");
385
- }
386
- }}
387
- loading={loading}
388
- />
389
- Option 3
390
- </Label>
391
- </div>
392
-
393
- <button
394
- className="toggle-button"
395
- onClick={() => setLoading(!loading)}
396
- >
397
- {loading ? "Stop Loading" : "Start Loading"}
398
- </button>
399
-
400
- <div className="comparison">
401
- <span className="comparison-label">Native comparison:</span>
402
- <div className="native-examples">
403
- <label>
404
- <input type="radio" name="native-loading" value="1" />
405
- Native Radio 1
406
- </label>
407
- <label>
408
- <input type="radio" name="native-loading" value="2" />
409
- Native Radio 2
410
- </label>
411
- <label>
412
- <input type="radio" name="native-loading" value="3" />
413
- Native Radio 3
414
- </label>
415
- </div>
416
- </div>
417
- </div>
418
- );
419
- };
420
-
421
- // eslint-disable-next-line no-unused-vars
422
- const ReadOnlyDemo = () => {
423
- const [readOnly, setReadOnly] = useState(true);
424
- const [selectedValue, setSelectedValue] = useState("option2");
425
-
426
- return (
427
- <div className="demo-card">
428
- <h3 className="demo-title">Read-Only States</h3>
429
-
430
- <div className="radio-group">
431
- <h4>Radio Group (Read-only: {readOnly ? "Yes" : "No"})</h4>
432
- <Label className="radio-label">
433
- <Input
434
- type="radio"
435
- name="readonly-demo"
436
- value="option1"
437
- checked={selectedValue === "option1"}
438
- onChange={() => !readOnly && setSelectedValue("option1")}
439
- readOnly={readOnly}
440
- />
441
- Option 1
442
- </Label>
443
- <Label className="radio-label">
444
- <Input
445
- type="radio"
446
- name="readonly-demo"
447
- value="option2"
448
- checked={selectedValue === "option2"}
449
- onChange={() => !readOnly && setSelectedValue("option2")}
450
- readOnly={readOnly}
451
- />
452
- Option 2 (Initially Selected)
453
- </Label>
454
- <Label className="radio-label">
455
- <Input
456
- type="radio"
457
- name="readonly-demo"
458
- value="option3"
459
- checked={selectedValue === "option3"}
460
- onChange={() => !readOnly && setSelectedValue("option3")}
461
- readOnly={readOnly}
462
- />
463
- Option 3
464
- </Label>
465
- </div>
466
-
467
- <button
468
- className="toggle-button"
469
- onClick={() => setReadOnly(!readOnly)}
470
- >
471
- {readOnly ? "Make Editable" : "Make Read-Only"}
472
- </button>
473
-
474
- <div className="comparison">
475
- <span className="comparison-label">Native comparison:</span>
476
- <div className="native-examples">
477
- <label>
478
- <input
479
- type="radio"
480
- name="native-readonly"
481
- value="1"
482
- readOnly
483
- />
484
- Native Read-Only Radio 1
485
- </label>
486
- <label>
487
- <input
488
- type="radio"
489
- name="native-readonly"
490
- value="2"
491
- readOnly
492
- checked
493
- />
494
- Native Read-Only Radio 2
495
- </label>
496
- <label>
497
- <input
498
- type="radio"
499
- name="native-readonly"
500
- value="3"
501
- readOnly
502
- />
503
- Native Read-Only Radio 3
504
- </label>
505
- </div>
506
- </div>
507
- </div>
508
- );
509
- };
510
-
511
- // eslint-disable-next-line no-unused-vars
512
- const DisabledDemo = () => {
513
- const [disabled, setDisabled] = useState(true);
514
-
515
- return (
516
- <div className="demo-card">
517
- <h3 className="demo-title">Disabled States</h3>
518
-
519
- <div className="radio-group">
520
- <h4>Radio Group (Disabled: {disabled ? "Yes" : "No"})</h4>
521
- <Label className="radio-label">
522
- <Input
523
- type="radio"
524
- name="disabled-demo"
525
- value="option1"
526
- checked={true}
527
- onUIStateChange={() => {}}
528
- disabled={disabled}
529
- />
530
- Option 1 (Initially Selected)
531
- </Label>
532
- <Label className="radio-label">
533
- <Input
534
- type="radio"
535
- name="disabled-demo"
536
- value="option2"
537
- disabled={disabled}
538
- />
539
- Option 2
540
- </Label>
541
- <Label className="radio-label">
542
- <Input
543
- type="radio"
544
- name="disabled-demo"
545
- value="option3"
546
- disabled={disabled}
547
- />
548
- Option 3
549
- </Label>
550
- </div>
551
-
552
- <button
553
- className="toggle-button"
554
- onClick={() => setDisabled(!disabled)}
555
- >
556
- {disabled ? "Enable Radios" : "Disable Radios"}
557
- </button>
558
-
559
- <div className="comparison">
560
- <span className="comparison-label">Native comparison:</span>
561
- <div className="native-examples">
562
- <label>
563
- <input
564
- type="radio"
565
- name="native-disabled"
566
- value="1"
567
- disabled
568
- checked
569
- />
570
- Native Disabled Radio 1
571
- </label>
572
- <label>
573
- <input
574
- type="radio"
575
- name="native-disabled"
576
- value="2"
577
- disabled
578
- />
579
- Native Disabled Radio 2
580
- </label>
581
- <label>
582
- <input
583
- type="radio"
584
- name="native-disabled"
585
- value="3"
586
- disabled
587
- />
588
- Native Disabled Radio 3
589
- </label>
590
- </div>
591
- </div>
592
- </div>
593
- );
594
- };
595
-
596
- // eslint-disable-next-line no-unused-vars
597
- const PropControlDemo = () => {
598
- const [radiomarkColor, setRadiomarkColor] = useState("#e74c3c");
599
- const [borderColor, setBorderColor] = useState("#767676");
600
- const [backgroundColor, setBackgroundColor] = useState("#ffffff");
601
- const [loading, setLoading] = useState(false);
602
- const [readOnly, setReadOnly] = useState(false);
603
- const [disabled, setDisabled] = useState(false);
604
- const [selectedValue, setSelectedValue] = useState("option2");
605
-
606
- return (
607
- <div className="demo-card prop-control-demo">
608
- <h3 className="demo-title">Property Controls</h3>
609
-
610
- <div className="color-controls">
611
- <div className="color-select-group">
612
- <label className="color-select-label">Radiomark Color:</label>
613
- <select
614
- className="color-select"
615
- value={radiomarkColor}
616
- onChange={(e) => setRadiomarkColor(e.target.value)}
617
- >
618
- <option value="#e74c3c">Red (Default)</option>
619
- <option value="#3498db">Blue</option>
620
- <option value="#2ecc71">Green</option>
621
- <option value="#f39c12">Orange</option>
622
- <option value="#9b59b6">Purple</option>
623
- <option value="#1abc9c">Teal</option>
624
- <option value="#34495e">Dark Gray</option>
625
- </select>
626
- </div>
627
-
628
- <div className="color-select-group">
629
- <label className="color-select-label">Border Color:</label>
630
- <select
631
- className="color-select"
632
- value={borderColor}
633
- onChange={(e) => setBorderColor(e.target.value)}
634
- >
635
- <option value="#767676">Gray (Default)</option>
636
- <option value="#e74c3c">Red</option>
637
- <option value="#3498db">Blue</option>
638
- <option value="#2ecc71">Green</option>
639
- <option value="#34495e">Dark</option>
640
- <option value="#95a5a6">Light Gray</option>
641
- </select>
642
- </div>
643
-
644
- <div className="color-select-group">
645
- <label className="color-select-label">Background Color:</label>
646
- <select
647
- className="color-select"
648
- value={backgroundColor}
649
- onChange={(e) => setBackgroundColor(e.target.value)}
650
- >
651
- <option value="#ffffff">White (Default)</option>
652
- <option value="#ecf0f1">Light Gray</option>
653
- <option value="#bdc3c7">Medium Gray</option>
654
- <option value="#f8f9fa">Off White</option>
655
- <option value="#fff5f5">Light Pink</option>
656
- <option value="#f0f8ff">Light Blue</option>
657
- </select>
658
- </div>
659
- </div>
660
-
661
- <div className="state-controls">
662
- <h4>State Controls:</h4>
663
- <div className="state-toggles">
664
- <button
665
- className={`state-toggle ${loading ? "active" : ""}`}
666
- onClick={() => setLoading(!loading)}
667
- >
668
- {loading ? "Stop Loading" : "Start Loading"}
669
- </button>
670
- <button
671
- className={`state-toggle ${readOnly ? "active" : ""}`}
672
- onClick={() => setReadOnly(!readOnly)}
673
- >
674
- {readOnly ? "Make Editable" : "Make Read-Only"}
675
- </button>
676
- <button
677
- className={`state-toggle ${disabled ? "active" : ""}`}
678
- onClick={() => setDisabled(!disabled)}
679
- >
680
- {disabled ? "Enable" : "Disable"}
681
- </button>
682
- </div>
683
- </div>
684
-
685
- <div
686
- className="radio-group"
687
- style={{
688
- "--navi-radiomark-color": radiomarkColor,
689
- "--border-color": borderColor,
690
- "--background-color": backgroundColor,
691
- }}
692
- >
693
- <h4>Customized Radio Group</h4>
694
- <Label className="radio-label">
695
- <Input
696
- type="radio"
697
- name="prop-control-demo"
698
- value="option1"
699
- checked={selectedValue === "option1"}
700
- onChange={() =>
701
- !readOnly && !disabled && setSelectedValue("option1")
702
- }
703
- loading={loading}
704
- readOnly={readOnly}
705
- disabled={disabled}
706
- />
707
- Option 1
708
- </Label>
709
- <Label className="radio-label">
710
- <Input
711
- type="radio"
712
- name="prop-control-demo"
713
- value="option2"
714
- checked={selectedValue === "option2"}
715
- onChange={() =>
716
- !readOnly && !disabled && setSelectedValue("option2")
717
- }
718
- loading={loading}
719
- readOnly={readOnly}
720
- disabled={disabled}
721
- />
722
- Option 2 (Initially Selected)
723
- </Label>
724
- <Label className="radio-label">
725
- <Input
726
- type="radio"
727
- name="prop-control-demo"
728
- value="option3"
729
- checked={selectedValue === "option3"}
730
- onChange={() =>
731
- !readOnly && !disabled && setSelectedValue("option3")
732
- }
733
- loading={loading}
734
- readOnly={readOnly}
735
- disabled={disabled}
736
- />
737
- Option 3
738
- </Label>
739
- </div>
740
-
741
- <div className="custom-styles-test">
742
- <h4>Current CSS Custom Properties:</h4>
743
- <pre style={{ fontSize: "0.8rem", lineHeight: "1.4" }}>
744
- {`--navi-radiomark-color: ${radiomarkColor};
745
- --border-color: ${borderColor};
746
- --background-color: ${backgroundColor};`}
747
- </pre>
748
- </div>
749
- </div>
750
- );
751
- };
752
-
753
- // eslint-disable-next-line no-unused-vars
754
- const CustomStylesDemo = () => {
755
- const [selectedValue1, setSelectedValue1] = useState("small");
756
- const [selectedValue2, setSelectedValue2] = useState("medium");
757
-
758
- return (
759
- <div className="demo-card">
760
- <h3 className="demo-title">Custom Styles</h3>
761
-
762
- <div className="custom-styles-comparison">
763
- <div className="comparison-item">
764
- <h5>Small Radio Buttons</h5>
765
- <div
766
- className="radio-group"
767
- style={{
768
- "--width": "10px",
769
- "--height": "10px",
770
- "--navi-radiomark-color": "#3498db",
771
- }}
772
- >
773
- <Label className="radio-label">
774
- <Input
775
- type="radio"
776
- name="small-radios"
777
- value="small"
778
- checked={selectedValue1 === "small"}
779
- onChange={() => setSelectedValue1("small")}
780
- />
781
- Small Option
782
- </Label>
783
- <Label className="radio-label">
784
- <Input
785
- type="radio"
786
- name="small-radios"
787
- value="medium"
788
- checked={selectedValue1 === "medium"}
789
- onChange={() => setSelectedValue1("medium")}
790
- />
791
- Medium Option
792
- </Label>
793
- <Label className="radio-label">
794
- <Input
795
- type="radio"
796
- name="small-radios"
797
- value="large"
798
- checked={selectedValue1 === "large"}
799
- onChange={() => setSelectedValue1("large")}
800
- />
801
- Large Option
802
- </Label>
803
- </div>
804
- </div>
805
-
806
- <div className="comparison-item">
807
- <h5>Large Radio Buttons</h5>
808
- <div
809
- className="radio-group"
810
- style={{
811
- "--width": "20px",
812
- "--height": "20px",
813
- "--navi-radiomark-color": "#e74c3c",
814
- }}
815
- >
816
- <Label className="radio-label">
817
- <Input
818
- type="radio"
819
- name="large-radios"
820
- value="small"
821
- checked={selectedValue2 === "small"}
822
- onChange={() => setSelectedValue2("small")}
823
- />
824
- Small Option
825
- </Label>
826
- <Label className="radio-label">
827
- <Input
828
- type="radio"
829
- name="large-radios"
830
- value="medium"
831
- checked={selectedValue2 === "medium"}
832
- onChange={() => setSelectedValue2("medium")}
833
- />
834
- Medium Option
835
- </Label>
836
- <Label className="radio-label">
837
- <Input
838
- type="radio"
839
- name="large-radios"
840
- value="large"
841
- checked={selectedValue2 === "large"}
842
- onChange={() => setSelectedValue2("large")}
843
- />
844
- Large Option
845
- </Label>
846
- </div>
847
- </div>
848
- </div>
849
-
850
- <div className="comparison">
851
- <span className="comparison-label">Native comparison:</span>
852
- <div className="native-examples">
853
- <label>
854
- <input type="radio" name="native-custom" value="1" />
855
- Native Radio 1
856
- </label>
857
- <label>
858
- <input type="radio" name="native-custom" value="2" />
859
- Native Radio 2
860
- </label>
861
- <label>
862
- <input type="radio" name="native-custom" value="3" />
863
- Native Radio 3
864
- </label>
865
- </div>
866
- </div>
867
- </div>
868
- );
869
- };
870
-
871
- render(<App />, document.getElementById("root"));
872
- </script>
873
- </body>
874
- </html>