@edsis/ui 0.0.2

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 (265) hide show
  1. package/README.md +40 -0
  2. package/accordion/README.md +195 -0
  3. package/alert/README.md +177 -0
  4. package/alert-dialog/README.md +239 -0
  5. package/aspect-ratio/README.md +112 -0
  6. package/avatar/README.md +176 -0
  7. package/badge/README.md +133 -0
  8. package/breadcrumb/README.md +216 -0
  9. package/button/README.md +139 -0
  10. package/button-group/README.md +204 -0
  11. package/calendar/README.md +132 -0
  12. package/card/README.md +220 -0
  13. package/carousel/README.md +276 -0
  14. package/chart/README.md +249 -0
  15. package/checkbox/README.md +149 -0
  16. package/collapsible/README.md +191 -0
  17. package/combobox/README.md +198 -0
  18. package/command/README.md +275 -0
  19. package/composer/README.md +235 -0
  20. package/context-menu/README.md +267 -0
  21. package/date-picker/README.md +177 -0
  22. package/dialog/README.md +237 -0
  23. package/drawer/README.md +145 -0
  24. package/dropdown-menu/README.md +311 -0
  25. package/editor/README.md +136 -0
  26. package/empty/README.md +183 -0
  27. package/fesm2022/edsis-ui-accordion.mjs +174 -0
  28. package/fesm2022/edsis-ui-accordion.mjs.map +1 -0
  29. package/fesm2022/edsis-ui-alert-dialog.mjs +242 -0
  30. package/fesm2022/edsis-ui-alert-dialog.mjs.map +1 -0
  31. package/fesm2022/edsis-ui-alert.mjs +90 -0
  32. package/fesm2022/edsis-ui-alert.mjs.map +1 -0
  33. package/fesm2022/edsis-ui-aspect-ratio.mjs +33 -0
  34. package/fesm2022/edsis-ui-aspect-ratio.mjs.map +1 -0
  35. package/fesm2022/edsis-ui-avatar.mjs +123 -0
  36. package/fesm2022/edsis-ui-avatar.mjs.map +1 -0
  37. package/fesm2022/edsis-ui-badge.mjs +47 -0
  38. package/fesm2022/edsis-ui-badge.mjs.map +1 -0
  39. package/fesm2022/edsis-ui-breadcrumb.mjs +186 -0
  40. package/fesm2022/edsis-ui-breadcrumb.mjs.map +1 -0
  41. package/fesm2022/edsis-ui-button-group.mjs +95 -0
  42. package/fesm2022/edsis-ui-button-group.mjs.map +1 -0
  43. package/fesm2022/edsis-ui-button.mjs +64 -0
  44. package/fesm2022/edsis-ui-button.mjs.map +1 -0
  45. package/fesm2022/edsis-ui-calendar.mjs +78 -0
  46. package/fesm2022/edsis-ui-calendar.mjs.map +1 -0
  47. package/fesm2022/edsis-ui-card.mjs +137 -0
  48. package/fesm2022/edsis-ui-card.mjs.map +1 -0
  49. package/fesm2022/edsis-ui-carousel.mjs +310 -0
  50. package/fesm2022/edsis-ui-carousel.mjs.map +1 -0
  51. package/fesm2022/edsis-ui-chart-area.mjs +6 -0
  52. package/fesm2022/edsis-ui-chart-area.mjs.map +1 -0
  53. package/fesm2022/edsis-ui-chart-bar.mjs +6 -0
  54. package/fesm2022/edsis-ui-chart-bar.mjs.map +1 -0
  55. package/fesm2022/edsis-ui-chart-line.mjs +6 -0
  56. package/fesm2022/edsis-ui-chart-line.mjs.map +1 -0
  57. package/fesm2022/edsis-ui-chart-pie.mjs +6 -0
  58. package/fesm2022/edsis-ui-chart-pie.mjs.map +1 -0
  59. package/fesm2022/edsis-ui-chart-radar.mjs +6 -0
  60. package/fesm2022/edsis-ui-chart-radar.mjs.map +1 -0
  61. package/fesm2022/edsis-ui-chart-radial.mjs +6 -0
  62. package/fesm2022/edsis-ui-chart-radial.mjs.map +1 -0
  63. package/fesm2022/edsis-ui-chart-scatter.mjs +6 -0
  64. package/fesm2022/edsis-ui-chart-scatter.mjs.map +1 -0
  65. package/fesm2022/edsis-ui-chart.mjs +3714 -0
  66. package/fesm2022/edsis-ui-chart.mjs.map +1 -0
  67. package/fesm2022/edsis-ui-checkbox.mjs +104 -0
  68. package/fesm2022/edsis-ui-checkbox.mjs.map +1 -0
  69. package/fesm2022/edsis-ui-collapsible.mjs +116 -0
  70. package/fesm2022/edsis-ui-collapsible.mjs.map +1 -0
  71. package/fesm2022/edsis-ui-combobox.mjs +263 -0
  72. package/fesm2022/edsis-ui-combobox.mjs.map +1 -0
  73. package/fesm2022/edsis-ui-command.mjs +268 -0
  74. package/fesm2022/edsis-ui-command.mjs.map +1 -0
  75. package/fesm2022/edsis-ui-composer.mjs +329 -0
  76. package/fesm2022/edsis-ui-composer.mjs.map +1 -0
  77. package/fesm2022/edsis-ui-context-menu.mjs +100 -0
  78. package/fesm2022/edsis-ui-context-menu.mjs.map +1 -0
  79. package/fesm2022/edsis-ui-date-picker.mjs +155 -0
  80. package/fesm2022/edsis-ui-date-picker.mjs.map +1 -0
  81. package/fesm2022/edsis-ui-dialog.mjs +262 -0
  82. package/fesm2022/edsis-ui-dialog.mjs.map +1 -0
  83. package/fesm2022/edsis-ui-drawer.mjs +6 -0
  84. package/fesm2022/edsis-ui-drawer.mjs.map +1 -0
  85. package/fesm2022/edsis-ui-dropdown-menu.mjs +466 -0
  86. package/fesm2022/edsis-ui-dropdown-menu.mjs.map +1 -0
  87. package/fesm2022/edsis-ui-editor.mjs +692 -0
  88. package/fesm2022/edsis-ui-editor.mjs.map +1 -0
  89. package/fesm2022/edsis-ui-empty.mjs +132 -0
  90. package/fesm2022/edsis-ui-empty.mjs.map +1 -0
  91. package/fesm2022/edsis-ui-form.mjs +334 -0
  92. package/fesm2022/edsis-ui-form.mjs.map +1 -0
  93. package/fesm2022/edsis-ui-hover-card.mjs +284 -0
  94. package/fesm2022/edsis-ui-hover-card.mjs.map +1 -0
  95. package/fesm2022/edsis-ui-input-group.mjs +164 -0
  96. package/fesm2022/edsis-ui-input-group.mjs.map +1 -0
  97. package/fesm2022/edsis-ui-input-otp.mjs +485 -0
  98. package/fesm2022/edsis-ui-input-otp.mjs.map +1 -0
  99. package/fesm2022/edsis-ui-input.mjs +43 -0
  100. package/fesm2022/edsis-ui-input.mjs.map +1 -0
  101. package/fesm2022/edsis-ui-item.mjs +241 -0
  102. package/fesm2022/edsis-ui-item.mjs.map +1 -0
  103. package/fesm2022/edsis-ui-kanban.mjs +289 -0
  104. package/fesm2022/edsis-ui-kanban.mjs.map +1 -0
  105. package/fesm2022/edsis-ui-kbd.mjs +51 -0
  106. package/fesm2022/edsis-ui-kbd.mjs.map +1 -0
  107. package/fesm2022/edsis-ui-label.mjs +30 -0
  108. package/fesm2022/edsis-ui-label.mjs.map +1 -0
  109. package/fesm2022/edsis-ui-menubar.mjs +302 -0
  110. package/fesm2022/edsis-ui-menubar.mjs.map +1 -0
  111. package/fesm2022/edsis-ui-native-select.mjs +61 -0
  112. package/fesm2022/edsis-ui-native-select.mjs.map +1 -0
  113. package/fesm2022/edsis-ui-navigation-menu.mjs +399 -0
  114. package/fesm2022/edsis-ui-navigation-menu.mjs.map +1 -0
  115. package/fesm2022/edsis-ui-pagination.mjs +216 -0
  116. package/fesm2022/edsis-ui-pagination.mjs.map +1 -0
  117. package/fesm2022/edsis-ui-pillbox.mjs +777 -0
  118. package/fesm2022/edsis-ui-pillbox.mjs.map +1 -0
  119. package/fesm2022/edsis-ui-popover.mjs +163 -0
  120. package/fesm2022/edsis-ui-popover.mjs.map +1 -0
  121. package/fesm2022/edsis-ui-progress.mjs +53 -0
  122. package/fesm2022/edsis-ui-progress.mjs.map +1 -0
  123. package/fesm2022/edsis-ui-radio.mjs +111 -0
  124. package/fesm2022/edsis-ui-radio.mjs.map +1 -0
  125. package/fesm2022/edsis-ui-resizable.mjs +454 -0
  126. package/fesm2022/edsis-ui-resizable.mjs.map +1 -0
  127. package/fesm2022/edsis-ui-scroll-area.mjs +48 -0
  128. package/fesm2022/edsis-ui-scroll-area.mjs.map +1 -0
  129. package/fesm2022/edsis-ui-select.mjs +164 -0
  130. package/fesm2022/edsis-ui-select.mjs.map +1 -0
  131. package/fesm2022/edsis-ui-separator.mjs +33 -0
  132. package/fesm2022/edsis-ui-separator.mjs.map +1 -0
  133. package/fesm2022/edsis-ui-sheet.mjs +264 -0
  134. package/fesm2022/edsis-ui-sheet.mjs.map +1 -0
  135. package/fesm2022/edsis-ui-skeleton.mjs +29 -0
  136. package/fesm2022/edsis-ui-skeleton.mjs.map +1 -0
  137. package/fesm2022/edsis-ui-slider.mjs +405 -0
  138. package/fesm2022/edsis-ui-slider.mjs.map +1 -0
  139. package/fesm2022/edsis-ui-spinner.mjs +58 -0
  140. package/fesm2022/edsis-ui-spinner.mjs.map +1 -0
  141. package/fesm2022/edsis-ui-switch.mjs +107 -0
  142. package/fesm2022/edsis-ui-switch.mjs.map +1 -0
  143. package/fesm2022/edsis-ui-table.mjs +139 -0
  144. package/fesm2022/edsis-ui-table.mjs.map +1 -0
  145. package/fesm2022/edsis-ui-tabs.mjs +252 -0
  146. package/fesm2022/edsis-ui-tabs.mjs.map +1 -0
  147. package/fesm2022/edsis-ui-textarea.mjs +37 -0
  148. package/fesm2022/edsis-ui-textarea.mjs.map +1 -0
  149. package/fesm2022/edsis-ui-timeline.mjs +213 -0
  150. package/fesm2022/edsis-ui-timeline.mjs.map +1 -0
  151. package/fesm2022/edsis-ui-toast.mjs +71 -0
  152. package/fesm2022/edsis-ui-toast.mjs.map +1 -0
  153. package/fesm2022/edsis-ui-toggle-group.mjs +269 -0
  154. package/fesm2022/edsis-ui-toggle-group.mjs.map +1 -0
  155. package/fesm2022/edsis-ui-toggle.mjs +76 -0
  156. package/fesm2022/edsis-ui-toggle.mjs.map +1 -0
  157. package/fesm2022/edsis-ui-tooltip.mjs +339 -0
  158. package/fesm2022/edsis-ui-tooltip.mjs.map +1 -0
  159. package/fesm2022/edsis-ui-utils.mjs +13 -0
  160. package/fesm2022/edsis-ui-utils.mjs.map +1 -0
  161. package/fesm2022/edsis-ui.mjs +11 -0
  162. package/fesm2022/edsis-ui.mjs.map +1 -0
  163. package/form/README.md +210 -0
  164. package/hover-card/README.md +146 -0
  165. package/input/README.md +159 -0
  166. package/input-group/README.md +234 -0
  167. package/input-otp/README.md +273 -0
  168. package/item/README.md +247 -0
  169. package/kanban/README.md +81 -0
  170. package/kbd/README.md +139 -0
  171. package/label/README.md +136 -0
  172. package/menubar/README.md +269 -0
  173. package/native-select/README.md +176 -0
  174. package/navigation-menu/README.md +160 -0
  175. package/package.json +310 -0
  176. package/pagination/README.md +144 -0
  177. package/pillbox/README.md +67 -0
  178. package/popover/README.md +43 -0
  179. package/progress/README.md +160 -0
  180. package/radio/README.md +209 -0
  181. package/resizable/README.md +164 -0
  182. package/scroll-area/README.md +143 -0
  183. package/select/README.md +174 -0
  184. package/separator/README.md +170 -0
  185. package/sheet/README.md +183 -0
  186. package/skeleton/README.md +158 -0
  187. package/slider/README.md +207 -0
  188. package/spinner/README.md +160 -0
  189. package/switch/README.md +166 -0
  190. package/table/README.md +291 -0
  191. package/tabs/README.md +214 -0
  192. package/textarea/README.md +154 -0
  193. package/timeline/README.md +94 -0
  194. package/toast/README.md +321 -0
  195. package/toggle/README.md +131 -0
  196. package/toggle-group/README.md +206 -0
  197. package/tooltip/README.md +211 -0
  198. package/types/edsis-ui-accordion.d.ts +51 -0
  199. package/types/edsis-ui-alert-dialog.d.ts +93 -0
  200. package/types/edsis-ui-alert.d.ts +37 -0
  201. package/types/edsis-ui-aspect-ratio.d.ts +12 -0
  202. package/types/edsis-ui-avatar.d.ts +51 -0
  203. package/types/edsis-ui-badge.d.ts +19 -0
  204. package/types/edsis-ui-breadcrumb.d.ts +46 -0
  205. package/types/edsis-ui-button-group.d.ts +26 -0
  206. package/types/edsis-ui-button.d.ts +22 -0
  207. package/types/edsis-ui-calendar.d.ts +33 -0
  208. package/types/edsis-ui-card.d.ts +60 -0
  209. package/types/edsis-ui-carousel.d.ts +86 -0
  210. package/types/edsis-ui-chart-area.d.ts +1 -0
  211. package/types/edsis-ui-chart-bar.d.ts +1 -0
  212. package/types/edsis-ui-chart-line.d.ts +1 -0
  213. package/types/edsis-ui-chart-pie.d.ts +1 -0
  214. package/types/edsis-ui-chart-radar.d.ts +1 -0
  215. package/types/edsis-ui-chart-radial.d.ts +1 -0
  216. package/types/edsis-ui-chart-scatter.d.ts +1 -0
  217. package/types/edsis-ui-chart.d.ts +1094 -0
  218. package/types/edsis-ui-checkbox.d.ts +35 -0
  219. package/types/edsis-ui-collapsible.d.ts +42 -0
  220. package/types/edsis-ui-combobox.d.ts +51 -0
  221. package/types/edsis-ui-command.d.ts +99 -0
  222. package/types/edsis-ui-composer.d.ts +90 -0
  223. package/types/edsis-ui-context-menu.d.ts +35 -0
  224. package/types/edsis-ui-date-picker.d.ts +41 -0
  225. package/types/edsis-ui-dialog.d.ts +87 -0
  226. package/types/edsis-ui-drawer.d.ts +1 -0
  227. package/types/edsis-ui-dropdown-menu.d.ts +136 -0
  228. package/types/edsis-ui-editor.d.ts +123 -0
  229. package/types/edsis-ui-empty.d.ts +50 -0
  230. package/types/edsis-ui-form.d.ts +141 -0
  231. package/types/edsis-ui-hover-card.d.ts +74 -0
  232. package/types/edsis-ui-input-group.d.ts +51 -0
  233. package/types/edsis-ui-input-otp.d.ts +136 -0
  234. package/types/edsis-ui-input.d.ts +16 -0
  235. package/types/edsis-ui-item.d.ts +88 -0
  236. package/types/edsis-ui-kanban.d.ts +70 -0
  237. package/types/edsis-ui-kbd.d.ts +16 -0
  238. package/types/edsis-ui-label.d.ts +11 -0
  239. package/types/edsis-ui-menubar.d.ts +67 -0
  240. package/types/edsis-ui-native-select.d.ts +26 -0
  241. package/types/edsis-ui-navigation-menu.d.ts +96 -0
  242. package/types/edsis-ui-pagination.d.ts +34 -0
  243. package/types/edsis-ui-pillbox.d.ts +157 -0
  244. package/types/edsis-ui-popover.d.ts +43 -0
  245. package/types/edsis-ui-progress.d.ts +17 -0
  246. package/types/edsis-ui-radio.d.ts +40 -0
  247. package/types/edsis-ui-resizable.d.ts +99 -0
  248. package/types/edsis-ui-scroll-area.d.ts +19 -0
  249. package/types/edsis-ui-select.d.ts +57 -0
  250. package/types/edsis-ui-separator.d.ts +14 -0
  251. package/types/edsis-ui-sheet.d.ts +76 -0
  252. package/types/edsis-ui-skeleton.d.ts +10 -0
  253. package/types/edsis-ui-slider.d.ts +74 -0
  254. package/types/edsis-ui-spinner.d.ts +13 -0
  255. package/types/edsis-ui-switch.d.ts +40 -0
  256. package/types/edsis-ui-table.d.ts +52 -0
  257. package/types/edsis-ui-tabs.d.ts +92 -0
  258. package/types/edsis-ui-textarea.d.ts +12 -0
  259. package/types/edsis-ui-timeline.d.ts +63 -0
  260. package/types/edsis-ui-toast.d.ts +38 -0
  261. package/types/edsis-ui-toggle-group.d.ts +89 -0
  262. package/types/edsis-ui-toggle.d.ts +25 -0
  263. package/types/edsis-ui-tooltip.d.ts +89 -0
  264. package/types/edsis-ui-utils.d.ts +5 -0
  265. package/types/edsis-ui.d.ts +2 -0
@@ -0,0 +1,176 @@
1
+ # Native Select
2
+
3
+ Styled native HTML select for browser-native dropdown behavior, mobile-friendly pickers, and lightweight form integrations.
4
+
5
+ Use Native Select when you want the platform select interaction rather than the custom overlay behavior of `ui-select`.
6
+
7
+ ## Import
8
+
9
+ ```ts
10
+ import {
11
+ NativeSelectComponent,
12
+ NativeSelectOptGroupDirective,
13
+ NativeSelectOptionDirective,
14
+ } from '@edsis/ui/native-select';
15
+ import {
16
+ FormControlDirective,
17
+ FormDescriptionComponent,
18
+ FormFieldComponent,
19
+ FormLabelComponent,
20
+ FormMessageComponent,
21
+ } from '@edsis/ui/form';
22
+ ```
23
+
24
+ ## Composition
25
+
26
+ The Angular structure keeps the native `<select>`, `<option>`, and `<optgroup>` elements in the DOM while adding shadcn-style design tokens.
27
+
28
+ ```text
29
+ select[ui-native-select]
30
+ ├── option[ui-native-select-option]
31
+ ├── option[ui-native-select-option]
32
+ └── optgroup[ui-native-select-opt-group]
33
+ ├── option[ui-native-select-option]
34
+ └── option[ui-native-select-option]
35
+ ```
36
+
37
+ ## Basic usage
38
+
39
+ Use the directive on a real `<select>` so Angular forms continue to work through the native control.
40
+
41
+ ```html
42
+ <label ui-label for="status-select">Status</label>
43
+ <select id="status-select" ui-native-select [(ngModel)]="status">
44
+ <option ui-native-select-option value="">Select status</option>
45
+ <option ui-native-select-option value="todo">Todo</option>
46
+ <option ui-native-select-option value="in-progress">In progress</option>
47
+ <option ui-native-select-option value="done">Done</option>
48
+ </select>
49
+ ```
50
+
51
+ ## Common patterns
52
+
53
+ ### Grouped options
54
+
55
+ Use `optgroup[ui-native-select-opt-group]` when the options belong to clear categories.
56
+
57
+ ```html
58
+ <select ui-native-select [(ngModel)]="department">
59
+ <option ui-native-select-option value="">Select department</option>
60
+
61
+ <optgroup ui-native-select-opt-group label="Engineering">
62
+ <option ui-native-select-option value="frontend">Frontend</option>
63
+ <option ui-native-select-option value="backend">Backend</option>
64
+ </optgroup>
65
+
66
+ <optgroup ui-native-select-opt-group label="Operations">
67
+ <option ui-native-select-option value="support">Support</option>
68
+ <option ui-native-select-option value="product">Product</option>
69
+ </optgroup>
70
+ </select>
71
+ ```
72
+
73
+ ### Form-field integration
74
+
75
+ When you want label, helper text, and invalid state wiring similar to the newer shadcn `Field` examples, compose the native select with the existing form primitives.
76
+
77
+ ```html
78
+ <ui-form-field>
79
+ <ui-form-label>Timezone</ui-form-label>
80
+ <select ui-native-select uiFormControl [(ngModel)]="timezone">
81
+ <option ui-native-select-option value="">Select timezone</option>
82
+ <option ui-native-select-option value="utc">UTC</option>
83
+ <option ui-native-select-option value="gmt-plus-7">GMT+7</option>
84
+ </select>
85
+ <ui-form-description>Used for scheduling and invoice timestamps.</ui-form-description>
86
+ </ui-form-field>
87
+ ```
88
+
89
+ ### Invalid state
90
+
91
+ Forward `aria-invalid="true"` when validation is managed outside Angular forms, or let `uiFormControl` mirror the state from `NgControl`.
92
+
93
+ ```html
94
+ <ui-form-field invalid>
95
+ <ui-form-label>Department</ui-form-label>
96
+ <select ui-native-select uiFormControl aria-invalid="true">
97
+ <option ui-native-select-option value="">Choose department</option>
98
+ <option ui-native-select-option value="engineering">Engineering</option>
99
+ <option ui-native-select-option value="sales">Sales</option>
100
+ </select>
101
+ <ui-form-message>Select a department before continuing.</ui-form-message>
102
+ </ui-form-field>
103
+ ```
104
+
105
+ ### Disabled and RTL
106
+
107
+ Disabled state stays fully native, and right-to-left layouts only need a wrapping `dir="rtl"` container or a direct `dir` attribute on the select.
108
+
109
+ ```html
110
+ <section dir="rtl" lang="ar" class="max-w-sm text-right">
111
+ <select ui-native-select disabled>
112
+ <option ui-native-select-option value="">اختر الحالة</option>
113
+ <option ui-native-select-option value="todo">مهام</option>
114
+ <option ui-native-select-option value="done">منجز</option>
115
+ </select>
116
+ </section>
117
+ ```
118
+
119
+ ## API reference
120
+
121
+ ### `NativeSelectComponent`
122
+
123
+ | Input | Type | Default |
124
+ | ------- | -------- | ------- |
125
+ | `class` | `string` | `''` |
126
+
127
+ Public methods:
128
+
129
+ - `focus()` focuses the underlying native select element.
130
+
131
+ All native `<select>` attributes and Angular form bindings such as `name`, `required`, `disabled`, `multiple`, `[(ngModel)]`, and `formControlName` pass through unchanged.
132
+
133
+ ### `NativeSelectOptionDirective`
134
+
135
+ | Input | Type | Default |
136
+ | ------- | -------- | ------- |
137
+ | `class` | `string` | `''` |
138
+
139
+ All native `<option>` attributes such as `value`, `disabled`, and `selected` pass through unchanged.
140
+
141
+ ### `NativeSelectOptGroupDirective`
142
+
143
+ | Input | Type | Default |
144
+ | ------- | -------- | ------- |
145
+ | `class` | `string` | `''` |
146
+
147
+ All native `<optgroup>` attributes such as `label` and `disabled` pass through unchanged.
148
+
149
+ ## Styling and theming
150
+
151
+ The control uses the shared border, ring, foreground, muted, and destructive theme tokens so it matches the rest of the library. The chevron is decorative and hidden automatically for multi-select or listbox-style `size` configurations.
152
+
153
+ Pass `class` when a layout needs custom width, margin, or grid placement utilities around the native select.
154
+
155
+ ## Accessibility
156
+
157
+ - Prefer a visible label or another accessible name source for every select.
158
+ - Use grouped options only when the categories help people scan the choices faster.
159
+ - Keep the placeholder option descriptive when the empty value is a valid initial state.
160
+ - `uiFormControl` can synchronize `id`, `aria-describedby`, and invalid state when the select lives inside `ui-form-field`.
161
+
162
+ ## Keyboard interactions
163
+
164
+ - Native browser select keyboard interactions stay intact.
165
+ - Closed single selects open and cycle according to the platform behavior.
166
+ - Multi-select and `size` listbox modes keep the browser's built-in selection model.
167
+
168
+ ## Angular notes
169
+
170
+ - `select[ui-native-select]` works with template-driven and reactive forms without a custom value accessor.
171
+ - The directive is the Angular mapping for upstream `NativeSelect`; the local API intentionally keeps the real HTML elements instead of wrapping them in another component tree.
172
+ - Use `ui-select` when you need the Material-backed custom panel rather than the native browser picker.
173
+
174
+ ## Source parity
175
+
176
+ This Angular entrypoint follows the shadcn Native Select information architecture while staying honest about local differences: the runtime surface is a styled native `<select>`, and the upstream `Field` examples map to the existing form primitives instead of a new field package.
@@ -0,0 +1,160 @@
1
+ # Navigation Menu
2
+
3
+ Horizontal website navigation primitive with top-level triggers, direct links, and explicit Angular content templates.
4
+
5
+ This implementation follows the shadcn Navigation Menu information architecture while keeping the panel layout owned by the consuming template through `ng-template[uiNavigationMenuContent]`.
6
+
7
+ ## Import
8
+
9
+ ```ts
10
+ import {
11
+ NavigationMenuComponent,
12
+ NavigationMenuContentDirective,
13
+ NavigationMenuItemComponent,
14
+ NavigationMenuLinkDirective,
15
+ NavigationMenuListComponent,
16
+ NavigationMenuTriggerDirective,
17
+ } from '@edsis/ui/navigation-menu';
18
+ ```
19
+
20
+ ## Composition
21
+
22
+ ```text
23
+ ui-navigation-menu
24
+ └── ui-navigation-menu-list
25
+ ├── ui-navigation-menu-item
26
+ │ ├── button[uiNavigationMenuTrigger]
27
+ │ └── ng-template[uiNavigationMenuContent]
28
+ │ └── custom panel markup with a[uiNavigationMenuLink]
29
+ └── ui-navigation-menu-item
30
+ └── a[uiNavigationMenuLink] variant="trigger"
31
+ ```
32
+
33
+ ## Basic usage
34
+
35
+ ```html
36
+ <ui-navigation-menu ariaLabel="Primary documentation navigation">
37
+ <ui-navigation-menu-list>
38
+ <ui-navigation-menu-item>
39
+ <button type="button" [uiNavigationMenuTrigger]="gettingStartedMenu">Getting started</button>
40
+ <ng-template uiNavigationMenuContent #gettingStartedMenu="uiNavigationMenuContent">
41
+ <div class="w-[540px] rounded-xl border border-border bg-popover p-4 shadow-md">
42
+ <div class="grid gap-3 md:grid-cols-[1.05fr_1.25fr]">
43
+ <a
44
+ uiNavigationMenuLink
45
+ href="/docs/introduction"
46
+ class="flex min-h-[220px] flex-col justify-end rounded-lg bg-gradient-to-b from-muted/80 to-muted/40 p-6">
47
+ <span class="text-sm font-semibold text-foreground">Acme UI</span>
48
+ <p class="text-sm leading-5 text-muted-foreground">
49
+ Build consistent interfaces with Angular-first primitives and theme tokens.
50
+ </p>
51
+ </a>
52
+ <div class="grid gap-2">
53
+ <a uiNavigationMenuLink href="/docs/getting-started/installation">
54
+ <div class="text-sm font-medium">Installation</div>
55
+ <p class="text-sm leading-5 text-muted-foreground">Set up the package, providers, and theme layer.</p>
56
+ </a>
57
+ <a uiNavigationMenuLink href="/docs/components/shadcn/navigation-menu">
58
+ <div class="text-sm font-medium">Navigation Menu docs</div>
59
+ <p class="text-sm leading-5 text-muted-foreground">
60
+ Learn the Angular composition and API surface of this entrypoint.
61
+ </p>
62
+ </a>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </ng-template>
67
+ </ui-navigation-menu-item>
68
+
69
+ <ui-navigation-menu-item>
70
+ <a uiNavigationMenuLink variant="trigger" href="/docs/introduction">Docs</a>
71
+ </ui-navigation-menu-item>
72
+ </ui-navigation-menu-list>
73
+ </ui-navigation-menu>
74
+ ```
75
+
76
+ ## Common patterns
77
+
78
+ ### Dropdown groups
79
+
80
+ Use `uiNavigationMenuTrigger` for top-level items that should open a content panel. The panel layout is just template markup, so you can mix hero cards, compact lists, grids, and external links without a rigid viewport component.
81
+
82
+ ### Direct links
83
+
84
+ Use `a[uiNavigationMenuLink] variant="trigger"` when a top-level item should navigate immediately instead of opening a panel.
85
+
86
+ ### RTL
87
+
88
+ Wrap the root in `dir="rtl"` when the page runs in a right-to-left language. The root uses computed direction to reverse left and right keyboard movement.
89
+
90
+ ## API reference
91
+
92
+ ### `NavigationMenuComponent`
93
+
94
+ | Input | Type | Default |
95
+ | ----------- | --------- | ------------------- |
96
+ | `class` | `string` | `''` |
97
+ | `ariaLabel` | `string` | `'Main navigation'` |
98
+ | `loop` | `boolean` | `true` |
99
+
100
+ Role: `navigation`.
101
+
102
+ ### `NavigationMenuListComponent`
103
+
104
+ Top-level row wrapper with `role="menubar"`.
105
+
106
+ ### `NavigationMenuItemComponent`
107
+
108
+ Structural wrapper for one trigger or direct-link item.
109
+
110
+ ### `NavigationMenuTriggerDirective`
111
+
112
+ | Input | Type | Default |
113
+ | ------------------------- | -------------------------------- | --------- |
114
+ | `uiNavigationMenuTrigger` | `NavigationMenuContentDirective` | required |
115
+ | `align` | `'start' \| 'center' \| 'end'` | `'start'` |
116
+ | `class` | `string` | `''` |
117
+ | `disabled` | `boolean` | `false` |
118
+
119
+ Output: `openedChange: boolean`.
120
+
121
+ Methods: `open()`, `close()`, `toggle()`.
122
+
123
+ ### `NavigationMenuContentDirective`
124
+
125
+ Template hook for dropdown panel markup.
126
+
127
+ ### `NavigationMenuLinkDirective`
128
+
129
+ | Input | Type | Default |
130
+ | ---------- | ------------------------ | ----------- |
131
+ | `variant` | `'trigger' \| 'content'` | `'content'` |
132
+ | `class` | `string` | `''` |
133
+ | `disabled` | `boolean` | `false` |
134
+
135
+ Use the default content variant for panel cards and `variant="trigger"` for top-level direct links.
136
+
137
+ ## Styling and theming
138
+
139
+ - Pass `class` to the root, list, item, trigger, or link primitives when the layout needs local adjustments.
140
+ - Style panel width, grid, and card composition inside the `ng-template` block.
141
+ - Use shared tokens such as `border-border`, `bg-popover`, and `text-muted-foreground` inside panel cards.
142
+
143
+ ## Accessibility
144
+
145
+ - Set `ariaLabel` when the page contains more than one navigation landmark.
146
+ - Use real anchors for destinations so browser and assistive-technology link semantics stay intact.
147
+ - Keep panel cards concise and descriptive so trigger-to-content relationships stay understandable.
148
+
149
+ ## Keyboard interactions
150
+
151
+ - `ArrowLeft` and `ArrowRight` move focus across the top-level items.
152
+ - `Home` and `End` jump to the first and last top-level item.
153
+ - `ArrowDown` opens the active trigger and moves focus into the first focusable panel item.
154
+ - `Escape` closes the active panel and returns focus to the trigger.
155
+
156
+ ## Angular notes
157
+
158
+ - The Angular surface uses `ng-template[uiNavigationMenuContent]` instead of a JSX-style child component so overlay ownership stays explicit.
159
+ - There is no `asChild` prop. Compose anchors and buttons directly with the provided directives.
160
+ - Use `variant="trigger"` on `uiNavigationMenuLink` when the top-level item should navigate immediately.
package/package.json ADDED
@@ -0,0 +1,310 @@
1
+ {
2
+ "name": "@edsis/ui",
3
+ "version": "0.0.2",
4
+ "repository": {
5
+ "type": "git",
6
+ "url": "git+https://github.com/edsis/angular.git"
7
+ },
8
+ "homepage": "https://github.com/edsis/angular#readme",
9
+ "bugs": {
10
+ "url": "https://github.com/edsis/angular/issues"
11
+ },
12
+ "peerDependencies": {
13
+ "@angular/common": "^21.2.0",
14
+ "@angular/core": "^21.2.0"
15
+ },
16
+ "dependencies": {
17
+ "@types/d3-array": "^3.2.2",
18
+ "@types/d3-scale": "^4.0.9",
19
+ "@types/d3-shape": "^3.1.8",
20
+ "d3-array": "^3.2.4",
21
+ "d3-scale": "^4.0.2",
22
+ "d3-shape": "^3.2.0",
23
+ "tslib": "^2.3.0"
24
+ },
25
+ "publishConfig": {
26
+ "access": "public",
27
+ "registry": "https://registry.npmjs.org/"
28
+ },
29
+ "sideEffects": false,
30
+ "module": "fesm2022/edsis-ui.mjs",
31
+ "typings": "types/edsis-ui.d.ts",
32
+ "exports": {
33
+ "./package.json": {
34
+ "default": "./package.json"
35
+ },
36
+ ".": {
37
+ "types": "./types/edsis-ui.d.ts",
38
+ "default": "./fesm2022/edsis-ui.mjs"
39
+ },
40
+ "./accordion": {
41
+ "types": "./types/edsis-ui-accordion.d.ts",
42
+ "default": "./fesm2022/edsis-ui-accordion.mjs"
43
+ },
44
+ "./alert": {
45
+ "types": "./types/edsis-ui-alert.d.ts",
46
+ "default": "./fesm2022/edsis-ui-alert.mjs"
47
+ },
48
+ "./alert-dialog": {
49
+ "types": "./types/edsis-ui-alert-dialog.d.ts",
50
+ "default": "./fesm2022/edsis-ui-alert-dialog.mjs"
51
+ },
52
+ "./aspect-ratio": {
53
+ "types": "./types/edsis-ui-aspect-ratio.d.ts",
54
+ "default": "./fesm2022/edsis-ui-aspect-ratio.mjs"
55
+ },
56
+ "./avatar": {
57
+ "types": "./types/edsis-ui-avatar.d.ts",
58
+ "default": "./fesm2022/edsis-ui-avatar.mjs"
59
+ },
60
+ "./badge": {
61
+ "types": "./types/edsis-ui-badge.d.ts",
62
+ "default": "./fesm2022/edsis-ui-badge.mjs"
63
+ },
64
+ "./breadcrumb": {
65
+ "types": "./types/edsis-ui-breadcrumb.d.ts",
66
+ "default": "./fesm2022/edsis-ui-breadcrumb.mjs"
67
+ },
68
+ "./button": {
69
+ "types": "./types/edsis-ui-button.d.ts",
70
+ "default": "./fesm2022/edsis-ui-button.mjs"
71
+ },
72
+ "./button-group": {
73
+ "types": "./types/edsis-ui-button-group.d.ts",
74
+ "default": "./fesm2022/edsis-ui-button-group.mjs"
75
+ },
76
+ "./calendar": {
77
+ "types": "./types/edsis-ui-calendar.d.ts",
78
+ "default": "./fesm2022/edsis-ui-calendar.mjs"
79
+ },
80
+ "./card": {
81
+ "types": "./types/edsis-ui-card.d.ts",
82
+ "default": "./fesm2022/edsis-ui-card.mjs"
83
+ },
84
+ "./carousel": {
85
+ "types": "./types/edsis-ui-carousel.d.ts",
86
+ "default": "./fesm2022/edsis-ui-carousel.mjs"
87
+ },
88
+ "./chart": {
89
+ "types": "./types/edsis-ui-chart.d.ts",
90
+ "default": "./fesm2022/edsis-ui-chart.mjs"
91
+ },
92
+ "./chart/area": {
93
+ "types": "./types/edsis-ui-chart-area.d.ts",
94
+ "default": "./fesm2022/edsis-ui-chart-area.mjs"
95
+ },
96
+ "./chart/bar": {
97
+ "types": "./types/edsis-ui-chart-bar.d.ts",
98
+ "default": "./fesm2022/edsis-ui-chart-bar.mjs"
99
+ },
100
+ "./chart/line": {
101
+ "types": "./types/edsis-ui-chart-line.d.ts",
102
+ "default": "./fesm2022/edsis-ui-chart-line.mjs"
103
+ },
104
+ "./chart/pie": {
105
+ "types": "./types/edsis-ui-chart-pie.d.ts",
106
+ "default": "./fesm2022/edsis-ui-chart-pie.mjs"
107
+ },
108
+ "./chart/radar": {
109
+ "types": "./types/edsis-ui-chart-radar.d.ts",
110
+ "default": "./fesm2022/edsis-ui-chart-radar.mjs"
111
+ },
112
+ "./chart/radial": {
113
+ "types": "./types/edsis-ui-chart-radial.d.ts",
114
+ "default": "./fesm2022/edsis-ui-chart-radial.mjs"
115
+ },
116
+ "./chart/scatter": {
117
+ "types": "./types/edsis-ui-chart-scatter.d.ts",
118
+ "default": "./fesm2022/edsis-ui-chart-scatter.mjs"
119
+ },
120
+ "./checkbox": {
121
+ "types": "./types/edsis-ui-checkbox.d.ts",
122
+ "default": "./fesm2022/edsis-ui-checkbox.mjs"
123
+ },
124
+ "./collapsible": {
125
+ "types": "./types/edsis-ui-collapsible.d.ts",
126
+ "default": "./fesm2022/edsis-ui-collapsible.mjs"
127
+ },
128
+ "./combobox": {
129
+ "types": "./types/edsis-ui-combobox.d.ts",
130
+ "default": "./fesm2022/edsis-ui-combobox.mjs"
131
+ },
132
+ "./command": {
133
+ "types": "./types/edsis-ui-command.d.ts",
134
+ "default": "./fesm2022/edsis-ui-command.mjs"
135
+ },
136
+ "./composer": {
137
+ "types": "./types/edsis-ui-composer.d.ts",
138
+ "default": "./fesm2022/edsis-ui-composer.mjs"
139
+ },
140
+ "./context-menu": {
141
+ "types": "./types/edsis-ui-context-menu.d.ts",
142
+ "default": "./fesm2022/edsis-ui-context-menu.mjs"
143
+ },
144
+ "./date-picker": {
145
+ "types": "./types/edsis-ui-date-picker.d.ts",
146
+ "default": "./fesm2022/edsis-ui-date-picker.mjs"
147
+ },
148
+ "./dialog": {
149
+ "types": "./types/edsis-ui-dialog.d.ts",
150
+ "default": "./fesm2022/edsis-ui-dialog.mjs"
151
+ },
152
+ "./drawer": {
153
+ "types": "./types/edsis-ui-drawer.d.ts",
154
+ "default": "./fesm2022/edsis-ui-drawer.mjs"
155
+ },
156
+ "./dropdown-menu": {
157
+ "types": "./types/edsis-ui-dropdown-menu.d.ts",
158
+ "default": "./fesm2022/edsis-ui-dropdown-menu.mjs"
159
+ },
160
+ "./editor": {
161
+ "types": "./types/edsis-ui-editor.d.ts",
162
+ "default": "./fesm2022/edsis-ui-editor.mjs"
163
+ },
164
+ "./empty": {
165
+ "types": "./types/edsis-ui-empty.d.ts",
166
+ "default": "./fesm2022/edsis-ui-empty.mjs"
167
+ },
168
+ "./form": {
169
+ "types": "./types/edsis-ui-form.d.ts",
170
+ "default": "./fesm2022/edsis-ui-form.mjs"
171
+ },
172
+ "./hover-card": {
173
+ "types": "./types/edsis-ui-hover-card.d.ts",
174
+ "default": "./fesm2022/edsis-ui-hover-card.mjs"
175
+ },
176
+ "./input": {
177
+ "types": "./types/edsis-ui-input.d.ts",
178
+ "default": "./fesm2022/edsis-ui-input.mjs"
179
+ },
180
+ "./input-group": {
181
+ "types": "./types/edsis-ui-input-group.d.ts",
182
+ "default": "./fesm2022/edsis-ui-input-group.mjs"
183
+ },
184
+ "./input-otp": {
185
+ "types": "./types/edsis-ui-input-otp.d.ts",
186
+ "default": "./fesm2022/edsis-ui-input-otp.mjs"
187
+ },
188
+ "./item": {
189
+ "types": "./types/edsis-ui-item.d.ts",
190
+ "default": "./fesm2022/edsis-ui-item.mjs"
191
+ },
192
+ "./kanban": {
193
+ "types": "./types/edsis-ui-kanban.d.ts",
194
+ "default": "./fesm2022/edsis-ui-kanban.mjs"
195
+ },
196
+ "./kbd": {
197
+ "types": "./types/edsis-ui-kbd.d.ts",
198
+ "default": "./fesm2022/edsis-ui-kbd.mjs"
199
+ },
200
+ "./label": {
201
+ "types": "./types/edsis-ui-label.d.ts",
202
+ "default": "./fesm2022/edsis-ui-label.mjs"
203
+ },
204
+ "./menubar": {
205
+ "types": "./types/edsis-ui-menubar.d.ts",
206
+ "default": "./fesm2022/edsis-ui-menubar.mjs"
207
+ },
208
+ "./native-select": {
209
+ "types": "./types/edsis-ui-native-select.d.ts",
210
+ "default": "./fesm2022/edsis-ui-native-select.mjs"
211
+ },
212
+ "./navigation-menu": {
213
+ "types": "./types/edsis-ui-navigation-menu.d.ts",
214
+ "default": "./fesm2022/edsis-ui-navigation-menu.mjs"
215
+ },
216
+ "./pagination": {
217
+ "types": "./types/edsis-ui-pagination.d.ts",
218
+ "default": "./fesm2022/edsis-ui-pagination.mjs"
219
+ },
220
+ "./pillbox": {
221
+ "types": "./types/edsis-ui-pillbox.d.ts",
222
+ "default": "./fesm2022/edsis-ui-pillbox.mjs"
223
+ },
224
+ "./popover": {
225
+ "types": "./types/edsis-ui-popover.d.ts",
226
+ "default": "./fesm2022/edsis-ui-popover.mjs"
227
+ },
228
+ "./progress": {
229
+ "types": "./types/edsis-ui-progress.d.ts",
230
+ "default": "./fesm2022/edsis-ui-progress.mjs"
231
+ },
232
+ "./radio": {
233
+ "types": "./types/edsis-ui-radio.d.ts",
234
+ "default": "./fesm2022/edsis-ui-radio.mjs"
235
+ },
236
+ "./resizable": {
237
+ "types": "./types/edsis-ui-resizable.d.ts",
238
+ "default": "./fesm2022/edsis-ui-resizable.mjs"
239
+ },
240
+ "./scroll-area": {
241
+ "types": "./types/edsis-ui-scroll-area.d.ts",
242
+ "default": "./fesm2022/edsis-ui-scroll-area.mjs"
243
+ },
244
+ "./select": {
245
+ "types": "./types/edsis-ui-select.d.ts",
246
+ "default": "./fesm2022/edsis-ui-select.mjs"
247
+ },
248
+ "./separator": {
249
+ "types": "./types/edsis-ui-separator.d.ts",
250
+ "default": "./fesm2022/edsis-ui-separator.mjs"
251
+ },
252
+ "./sheet": {
253
+ "types": "./types/edsis-ui-sheet.d.ts",
254
+ "default": "./fesm2022/edsis-ui-sheet.mjs"
255
+ },
256
+ "./skeleton": {
257
+ "types": "./types/edsis-ui-skeleton.d.ts",
258
+ "default": "./fesm2022/edsis-ui-skeleton.mjs"
259
+ },
260
+ "./slider": {
261
+ "types": "./types/edsis-ui-slider.d.ts",
262
+ "default": "./fesm2022/edsis-ui-slider.mjs"
263
+ },
264
+ "./spinner": {
265
+ "types": "./types/edsis-ui-spinner.d.ts",
266
+ "default": "./fesm2022/edsis-ui-spinner.mjs"
267
+ },
268
+ "./switch": {
269
+ "types": "./types/edsis-ui-switch.d.ts",
270
+ "default": "./fesm2022/edsis-ui-switch.mjs"
271
+ },
272
+ "./table": {
273
+ "types": "./types/edsis-ui-table.d.ts",
274
+ "default": "./fesm2022/edsis-ui-table.mjs"
275
+ },
276
+ "./tabs": {
277
+ "types": "./types/edsis-ui-tabs.d.ts",
278
+ "default": "./fesm2022/edsis-ui-tabs.mjs"
279
+ },
280
+ "./textarea": {
281
+ "types": "./types/edsis-ui-textarea.d.ts",
282
+ "default": "./fesm2022/edsis-ui-textarea.mjs"
283
+ },
284
+ "./timeline": {
285
+ "types": "./types/edsis-ui-timeline.d.ts",
286
+ "default": "./fesm2022/edsis-ui-timeline.mjs"
287
+ },
288
+ "./toast": {
289
+ "types": "./types/edsis-ui-toast.d.ts",
290
+ "default": "./fesm2022/edsis-ui-toast.mjs"
291
+ },
292
+ "./toggle": {
293
+ "types": "./types/edsis-ui-toggle.d.ts",
294
+ "default": "./fesm2022/edsis-ui-toggle.mjs"
295
+ },
296
+ "./toggle-group": {
297
+ "types": "./types/edsis-ui-toggle-group.d.ts",
298
+ "default": "./fesm2022/edsis-ui-toggle-group.mjs"
299
+ },
300
+ "./tooltip": {
301
+ "types": "./types/edsis-ui-tooltip.d.ts",
302
+ "default": "./fesm2022/edsis-ui-tooltip.mjs"
303
+ },
304
+ "./utils": {
305
+ "types": "./types/edsis-ui-utils.d.ts",
306
+ "default": "./fesm2022/edsis-ui-utils.mjs"
307
+ }
308
+ },
309
+ "type": "module"
310
+ }