tutuca 0.11.0 → 0.11.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 (116) hide show
  1. package/dist/tutuca-cli.js +264 -361
  2. package/dist/tutuca-components.js +175 -175
  3. package/dist/tutuca-dev.ext.js +250 -323
  4. package/dist/tutuca-dev.js +250 -323
  5. package/dist/tutuca-dev.min.js +4 -4
  6. package/dist/tutuca-extra.ext.js +55 -46
  7. package/dist/tutuca-extra.js +55 -46
  8. package/dist/tutuca-extra.min.js +3 -3
  9. package/dist/tutuca-storybook.js +29 -29
  10. package/dist/tutuca.ext.js +55 -46
  11. package/dist/tutuca.js +55 -46
  12. package/dist/tutuca.min.js +3 -3
  13. package/package.json +4 -3
  14. package/skill/margaui/SKILL.md +0 -105
  15. package/skill/margaui/components/accordion.md +0 -127
  16. package/skill/margaui/components/alert.md +0 -174
  17. package/skill/margaui/components/aura.md +0 -97
  18. package/skill/margaui/components/avatar.md +0 -220
  19. package/skill/margaui/components/badge.md +0 -193
  20. package/skill/margaui/components/breadcrumbs.md +0 -103
  21. package/skill/margaui/components/button.md +0 -322
  22. package/skill/margaui/components/calendar.md +0 -67
  23. package/skill/margaui/components/card.md +0 -373
  24. package/skill/margaui/components/carousel.md +0 -387
  25. package/skill/margaui/components/chat.md +0 -171
  26. package/skill/margaui/components/checkbox.md +0 -101
  27. package/skill/margaui/components/collapse.md +0 -172
  28. package/skill/margaui/components/countdown.md +0 -165
  29. package/skill/margaui/components/diff.md +0 -53
  30. package/skill/margaui/components/divider.md +0 -107
  31. package/skill/margaui/components/dock.md +0 -173
  32. package/skill/margaui/components/drawer.md +0 -184
  33. package/skill/margaui/components/dropdown.md +0 -388
  34. package/skill/margaui/components/fab.md +0 -346
  35. package/skill/margaui/components/fieldset.md +0 -88
  36. package/skill/margaui/components/file-input.md +0 -84
  37. package/skill/margaui/components/filter.md +0 -52
  38. package/skill/margaui/components/footer.md +0 -583
  39. package/skill/margaui/components/hero.md +0 -135
  40. package/skill/margaui/components/hover-3d.md +0 -129
  41. package/skill/margaui/components/hover-gallery.md +0 -49
  42. package/skill/margaui/components/indicator.md +0 -265
  43. package/skill/margaui/components/input.md +0 -389
  44. package/skill/margaui/components/join.md +0 -100
  45. package/skill/margaui/components/kbd.md +0 -127
  46. package/skill/margaui/components/label.md +0 -102
  47. package/skill/margaui/components/link.md +0 -96
  48. package/skill/margaui/components/list.md +0 -182
  49. package/skill/margaui/components/loading.md +0 -105
  50. package/skill/margaui/components/mask.md +0 -168
  51. package/skill/margaui/components/megamenu.md +0 -131
  52. package/skill/margaui/components/menu.md +0 -887
  53. package/skill/margaui/components/mockup-browser.md +0 -39
  54. package/skill/margaui/components/mockup-code.md +0 -81
  55. package/skill/margaui/components/mockup-phone.md +0 -39
  56. package/skill/margaui/components/mockup-window.md +0 -33
  57. package/skill/margaui/components/modal.md +0 -196
  58. package/skill/margaui/components/navbar.md +0 -282
  59. package/skill/margaui/components/otp.md +0 -171
  60. package/skill/margaui/components/pagination.md +0 -122
  61. package/skill/margaui/components/progress.md +0 -135
  62. package/skill/margaui/components/radial-progress.md +0 -67
  63. package/skill/margaui/components/radio.md +0 -133
  64. package/skill/margaui/components/range.md +0 -134
  65. package/skill/margaui/components/rating.md +0 -170
  66. package/skill/margaui/components/select.md +0 -225
  67. package/skill/margaui/components/skeleton.md +0 -64
  68. package/skill/margaui/components/stack.md +0 -142
  69. package/skill/margaui/components/stat.md +0 -254
  70. package/skill/margaui/components/status.md +0 -73
  71. package/skill/margaui/components/steps.md +0 -138
  72. package/skill/margaui/components/swap.md +0 -152
  73. package/skill/margaui/components/tab.md +0 -248
  74. package/skill/margaui/components/table.md +0 -1018
  75. package/skill/margaui/components/text-rotate.md +0 -91
  76. package/skill/margaui/components/textarea.md +0 -85
  77. package/skill/margaui/components/theme-controller.md +0 -266
  78. package/skill/margaui/components/timeline.md +0 -1356
  79. package/skill/margaui/components/toast.md +0 -165
  80. package/skill/margaui/components/toggle.md +0 -135
  81. package/skill/margaui/components/tooltip.md +0 -181
  82. package/skill/margaui/components/validator.md +0 -163
  83. package/skill/tutuca/SKILL.md +0 -56
  84. package/skill/tutuca/advanced.md +0 -212
  85. package/skill/tutuca/cli.md +0 -239
  86. package/skill/tutuca/component-design.md +0 -168
  87. package/skill/tutuca/core.md +0 -908
  88. package/skill/tutuca/iteration.md +0 -207
  89. package/skill/tutuca/macros.md +0 -86
  90. package/skill/tutuca/margaui.md +0 -175
  91. package/skill/tutuca/messages-and-intents.md +0 -399
  92. package/skill/tutuca/patterns/README.md +0 -48
  93. package/skill/tutuca/patterns/add-a-story.md +0 -26
  94. package/skill/tutuca/patterns/bind-text-and-attributes.md +0 -30
  95. package/skill/tutuca/patterns/conditional-attribute-value.md +0 -29
  96. package/skill/tutuca/patterns/coordinate-components.md +0 -54
  97. package/skill/tutuca/patterns/edit-through-a-dynamic-target.md +0 -27
  98. package/skill/tutuca/patterns/enrich-each-item.md +0 -25
  99. package/skill/tutuca/patterns/file-input.md +0 -39
  100. package/skill/tutuca/patterns/filter-a-list.md +0 -25
  101. package/skill/tutuca/patterns/filter-and-paginate.md +0 -60
  102. package/skill/tutuca/patterns/handle-events.md +0 -38
  103. package/skill/tutuca/patterns/iterate-a-list.md +0 -18
  104. package/skill/tutuca/patterns/paginate-a-list.md +0 -29
  105. package/skill/tutuca/patterns/render-a-child-component.md +0 -21
  106. package/skill/tutuca/patterns/reuse-markup-with-macros.md +0 -36
  107. package/skill/tutuca/patterns/share-state-across-the-tree.md +0 -38
  108. package/skill/tutuca/patterns/show-or-hide-content.md +0 -23
  109. package/skill/tutuca/patterns/switch-between-views.md +0 -30
  110. package/skill/tutuca/patterns/tabbed-interface.md +0 -43
  111. package/skill/tutuca/semantics.md +0 -195
  112. package/skill/tutuca/storybook.md +0 -270
  113. package/skill/tutuca/styles.md +0 -48
  114. package/skill/tutuca/testing.md +0 -346
  115. package/skill/tutuca-source/SKILL.md +0 -33
  116. package/skill/tutuca-source/tutuca.ext.js +0 -4235
package/skill/margaui/components/dropdown.md DELETED
@@ -1,388 +0,0 @@
1
- # dropdown
2
-
3
- _click/hover/focus menu attached to a trigger_
4
-
5
- ## What it does
6
-
7
- Pop-up menu attached to a button/element. Supports details/summary, focus-based, popover API, and anchor positioning variants.
8
-
9
- ## When to use
10
-
11
- - Action menus, settings menus, navbar sub-menus.
12
- - For full-screen modals, use **modal** instead.
13
-
14
- ## Core classes
15
-
16
- `dropdown`; positioning `dropdown-top|bottom|left|right`, `dropdown-start|center|end`; trigger `dropdown-hover|open|force-open|force-close`; inner `dropdown-content`.
17
-
18
- ## Examples
19
-
20
- ### Card as dropdown
21
-
22
- Source: `playground/components/dropdown/card-as-dropdown.html`
23
-
24
- ```html
25
- <div class="dropdown">
26
- <div tabindex="0" role="button" class="btn m-1">Click</div>
27
- <div
28
- tabindex="0"
29
- class="dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md">
30
- <div class="card-body">
31
- <p>This is a card. You can use any element as a dropdown.</p>
32
- </div>
33
- </div>
34
- </div>
35
- ```
36
-
37
- ### Dropdown — aligns to center of button horizontally
38
-
39
- Source: `playground/components/dropdown/dropdown--aligns-to-center-of-button-horizontally.html`
40
-
41
- ```html
42
- <div class="dropdown dropdown-center">
43
- <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
44
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
45
- <li><a>Item 1</a></li>
46
- <li><a>Item 2</a></li>
47
- </ul>
48
- </div>
49
- ```
50
-
51
- ### Dropdown — aligns to end of button horizontally
52
-
53
- Source: `playground/components/dropdown/dropdown--aligns-to-end-of-button-horizontally.html`
54
-
55
- ```html
56
- <div class="dropdown dropdown-end">
57
- <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
58
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
59
- <li><a>Item 1</a></li>
60
- <li><a>Item 2</a></li>
61
- </ul>
62
- </div>
63
- ```
64
-
65
- ### Dropdown — aligns to start of button horizontally
66
-
67
- Source: `playground/components/dropdown/dropdown--aligns-to-start-of-button-horizontally.html`
68
-
69
- ```html
70
- <div class="dropdown dropdown-start">
71
- <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
72
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
73
- <li><a>Item 1</a></li>
74
- <li><a>Item 2</a></li>
75
- </ul>
76
- </div>
77
- ```
78
-
79
- ### Dropdown bottom default — aligns to center of button horizontally
80
-
81
- Source: `playground/components/dropdown/dropdown-bottom-default--aligns-to-center-of-button-horizontally.html`
82
-
83
- ```html
84
- <div class="dropdown dropdown-bottom dropdown-center">
85
- <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
86
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
87
- <li><a>Item 1</a></li>
88
- <li><a>Item 2</a></li>
89
- </ul>
90
- </div>
91
- ```
92
-
93
- ### Dropdown bottom default — aligns to end of button horizontally
94
-
95
- Source: `playground/components/dropdown/dropdown-bottom-default--aligns-to-end-of-button-horizontally.html`
96
-
97
- ```html
98
- <div class="dropdown dropdown-bottom dropdown-end">
99
- <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
100
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
101
- <li><a>Item 1</a></li>
102
- <li><a>Item 2</a></li>
103
- </ul>
104
- </div>
105
- ```
106
-
107
- ### Dropdown bottom default
108
-
109
- Source: `playground/components/dropdown/dropdown-bottom-default.html`
110
-
111
- ```html
112
- <div class="dropdown dropdown-bottom">
113
- <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
114
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
115
- <li><a>Item 1</a></li>
116
- <li><a>Item 2</a></li>
117
- </ul>
118
- </div>
119
- ```
120
-
121
- ### Dropdown in navbar
122
-
123
- Source: `playground/components/dropdown/dropdown-in-navbar.html`
124
-
125
- ```html
126
- <div class="navbar bg-base-200">
127
- <div class="ps-4">
128
- <a class="text-lg font-bold">daisyUI</a>
129
- </div>
130
- <div class="flex grow justify-end px-2">
131
- <div class="flex items-stretch">
132
- <a class="btn btn-ghost rounded-field">Button</a>
133
- <div class="dropdown dropdown-end">
134
- <div tabindex="0" role="button" class="btn btn-ghost rounded-field">Dropdown</div>
135
- <ul
136
- tabindex="-1"
137
- class="menu dropdown-content bg-base-200 rounded-box z-1 mt-4 w-52 p-2 shadow-sm">
138
- <li><a>Item 1</a></li>
139
- <li><a>Item 2</a></li>
140
- </ul>
141
- </div>
142
- </div>
143
- </div>
144
- </div>
145
- ```
146
-
147
- ### Dropdown left — aligns to center of button vertically
148
-
149
- Source: `playground/components/dropdown/dropdown-left--aligns-to-center-of-button-vertically.html`
150
-
151
- ```html
152
- <div class="dropdown dropdown-left dropdown-center">
153
- <div tabindex="0" role="button" class="btn m-1">Click ⬅️</div>
154
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
155
- <li><a>Item 1</a></li>
156
- <li><a>Item 2</a></li>
157
- </ul>
158
- </div>
159
- ```
160
-
161
- ### Dropdown left — aligns to end of button vertically
162
-
163
- Source: `playground/components/dropdown/dropdown-left--aligns-to-end-of-button-vertically.html`
164
-
165
- ```html
166
- <div class="dropdown dropdown-left dropdown-end">
167
- <div tabindex="0" role="button" class="btn m-1">Click ⬅️</div>
168
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
169
- <li><a>Item 1</a></li>
170
- <li><a>Item 2</a></li>
171
- </ul>
172
- </div>
173
- ```
174
-
175
- ### Dropdown left
176
-
177
- Source: `playground/components/dropdown/dropdown-left.html`
178
-
179
- ```html
180
- <div class="dropdown dropdown-left">
181
- <div tabindex="0" role="button" class="btn m-1">Click ⬅️</div>
182
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
183
- <li><a>Item 1</a></li>
184
- <li><a>Item 2</a></li>
185
- </ul>
186
- </div>
187
- ```
188
-
189
- ### Dropdown menu
190
-
191
- Source: `playground/components/dropdown/dropdown-menu.html`
192
-
193
- ```html
194
- <div class="dropdown">
195
- <div tabindex="0" role="button" class="btn m-1">Click</div>
196
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
197
- <li><a>Item 1</a></li>
198
- <li><a>Item 2</a></li>
199
- </ul>
200
- </div>
201
- ```
202
-
203
- ### Dropdown on hover
204
-
205
- Source: `playground/components/dropdown/dropdown-on-hover.html`
206
-
207
- ```html
208
- <div class="dropdown dropdown-hover">
209
- <div tabindex="0" role="button" class="btn m-1">Hover</div>
210
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
211
- <li><a>Item 1</a></li>
212
- <li><a>Item 2</a></li>
213
- </ul>
214
- </div>
215
- ```
216
-
217
- ### Dropdown right — aligns to center of button vertically
218
-
219
- Source: `playground/components/dropdown/dropdown-right--aligns-to-center-of-button-vertically.html`
220
-
221
- ```html
222
- <div class="dropdown dropdown-right dropdown-center">
223
- <div tabindex="0" role="button" class="btn m-1">Click ➡️</div>
224
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
225
- <li><a>Item 1</a></li>
226
- <li><a>Item 2</a></li>
227
- </ul>
228
- </div>
229
- ```
230
-
231
- ### Dropdown right — aligns to end of button vertically
232
-
233
- Source: `playground/components/dropdown/dropdown-right--aligns-to-end-of-button-vertically.html`
234
-
235
- ```html
236
- <div class="dropdown dropdown-right dropdown-end">
237
- <div tabindex="0" role="button" class="btn m-1">Click ➡️</div>
238
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
239
- <li><a>Item 1</a></li>
240
- <li><a>Item 2</a></li>
241
- </ul>
242
- </div>
243
- ```
244
-
245
- ### Dropdown right
246
-
247
- Source: `playground/components/dropdown/dropdown-right.html`
248
-
249
- ```html
250
- <div class="dropdown dropdown-right">
251
- <div tabindex="0" role="button" class="btn m-1">Click ➡️</div>
252
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
253
- <li><a>Item 1</a></li>
254
- <li><a>Item 2</a></li>
255
- </ul>
256
- </div>
257
- ```
258
-
259
- ### Dropdown top — aligns to center of button horizontally
260
-
261
- Source: `playground/components/dropdown/dropdown-top--aligns-to-center-of-button-horizontally.html`
262
-
263
- ```html
264
- <div class="dropdown dropdown-top dropdown-center">
265
- <div tabindex="0" role="button" class="btn m-1">Click ⬆️</div>
266
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
267
- <li><a>Item 1</a></li>
268
- <li><a>Item 2</a></li>
269
- </ul>
270
- </div>
271
- ```
272
-
273
- ### Dropdown top — aligns to end of button horizontally
274
-
275
- Source: `playground/components/dropdown/dropdown-top--aligns-to-end-of-button-horizontally.html`
276
-
277
- ```html
278
- <div class="dropdown dropdown-top dropdown-end">
279
- <div tabindex="0" role="button" class="btn m-1">Click ⬆️</div>
280
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
281
- <li><a>Item 1</a></li>
282
- <li><a>Item 2</a></li>
283
- </ul>
284
- </div>
285
- ```
286
-
287
- ### Dropdown top
288
-
289
- Source: `playground/components/dropdown/dropdown-top.html`
290
-
291
- ```html
292
- <div class="dropdown dropdown-top">
293
- <div tabindex="0" role="button" class="btn m-1">Click ⬆️</div>
294
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
295
- <li><a>Item 1</a></li>
296
- <li><a>Item 2</a></li>
297
- </ul>
298
- </div>
299
- ```
300
-
301
- ### Dropdown using details and summary
302
-
303
- Source: `playground/components/dropdown/dropdown-using-details-and-summary.html`
304
-
305
- ```html
306
- <details class="dropdown">
307
- <summary class="btn m-1">open or close</summary>
308
- <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
309
- <li><a>Item 1</a></li>
310
- <li><a>Item 2</a></li>
311
- </ul>
312
- </details>
313
- ```
314
-
315
- ### Dropdown using popover api and anchor positioning
316
-
317
- Source: `playground/components/dropdown/dropdown-using-popover-api-and-anchor-positioning.html`
318
-
319
- ```html
320
- <!-- change popover-1 and --anchor-1 names. Use unique names for each dropdown -->
321
- <button class="btn" popovertarget="popover-1" style="anchor-name:--anchor-1">
322
- Button
323
- </button>
324
- <ul class="dropdown menu w-52 rounded-box bg-base-100 shadow-sm"
325
- popover id="popover-1" style="position-anchor:--anchor-1">
326
- <li><a>Item 1</a></li>
327
- <li><a>Item 2</a></li>
328
- </ul>
329
- ```
330
-
331
- ### Force close
332
-
333
- Source: `playground/components/dropdown/force-close.html`
334
-
335
- ```html
336
- <div class="dropdown dropdown-close">
337
- <div tabindex="0" role="button" class="btn m-1">Button</div>
338
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
339
- <li><a>Item 1</a></li>
340
- <li><a>Item 2</a></li>
341
- </ul>
342
- </div>
343
- ```
344
-
345
- ### Force open
346
-
347
- Source: `playground/components/dropdown/force-open.html`
348
-
349
- ```html
350
- <div class="dropdown dropdown-open">
351
- <div tabindex="0" role="button" class="btn m-1">Button</div>
352
- <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
353
- <li><a>Item 1</a></li>
354
- <li><a>Item 2</a></li>
355
- </ul>
356
- </div>
357
- ```
358
-
359
- ### Helper dropdown
360
-
361
- Source: `playground/components/dropdown/helper-dropdown.html`
362
-
363
- ```html
364
- <div class="dropdown dropdown-end">
365
- <div tabindex="0" role="button" class="btn btn-circle btn-ghost btn-xs text-info">
366
- <svg
367
- tabindex="0"
368
- xmlns="http://www.w3.org/2000/svg"
369
- fill="none"
370
- viewBox="0 0 24 24"
371
- class="h-4 w-4 stroke-current">
372
- <path
373
- stroke-linecap="round"
374
- stroke-linejoin="round"
375
- stroke-width="2"
376
- d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
377
- </svg>
378
- </div>
379
- <div
380
- tabindex="0"
381
- class="card card-sm dropdown-content bg-base-100 rounded-box z-1 w-64 shadow-sm">
382
- <div tabindex="0" class="card-body">
383
- <h2 class="card-title">You needed more info?</h2>
384
- <p>Here is a description!</p>
385
- </div>
386
- </div>
387
- </div>
388
- ```