tutuca 0.9.39 → 0.9.41

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 (88) hide show
  1. package/dist/tutuca-cli.js +92 -39
  2. package/dist/tutuca-dev.js +18 -0
  3. package/dist/tutuca-dev.min.js +1 -1
  4. package/package.json +6 -7
  5. package/skill/immutable-js/SKILL.md +79 -0
  6. package/skill/immutable-js/references/collection.md +346 -0
  7. package/skill/immutable-js/references/conversions.md +99 -0
  8. package/skill/immutable-js/references/deep-updates.md +172 -0
  9. package/skill/immutable-js/references/equality.md +95 -0
  10. package/skill/immutable-js/references/list.md +266 -0
  11. package/skill/immutable-js/references/map.md +300 -0
  12. package/skill/immutable-js/references/predicates.md +93 -0
  13. package/skill/immutable-js/references/range-repeat.md +55 -0
  14. package/skill/immutable-js/references/record.md +196 -0
  15. package/skill/immutable-js/references/seq.md +248 -0
  16. package/skill/immutable-js/references/set.md +270 -0
  17. package/skill/immutable-js/references/shallow-functional.md +99 -0
  18. package/skill/immutable-js/references/stack.md +210 -0
  19. package/skill/margaui/SKILL.md +101 -0
  20. package/skill/margaui/components/accordion.md +127 -0
  21. package/skill/margaui/components/alert.md +174 -0
  22. package/skill/margaui/components/avatar.md +220 -0
  23. package/skill/margaui/components/badge.md +193 -0
  24. package/skill/margaui/components/breadcrumbs.md +103 -0
  25. package/skill/margaui/components/button.md +322 -0
  26. package/skill/margaui/components/calendar.md +67 -0
  27. package/skill/margaui/components/card.md +373 -0
  28. package/skill/margaui/components/carousel.md +387 -0
  29. package/skill/margaui/components/chat.md +171 -0
  30. package/skill/margaui/components/checkbox.md +101 -0
  31. package/skill/margaui/components/collapse.md +172 -0
  32. package/skill/margaui/components/countdown.md +165 -0
  33. package/skill/margaui/components/diff.md +53 -0
  34. package/skill/margaui/components/divider.md +107 -0
  35. package/skill/margaui/components/dock.md +173 -0
  36. package/skill/margaui/components/drawer.md +184 -0
  37. package/skill/margaui/components/dropdown.md +388 -0
  38. package/skill/margaui/components/fab.md +346 -0
  39. package/skill/margaui/components/fieldset.md +88 -0
  40. package/skill/margaui/components/file-input.md +84 -0
  41. package/skill/margaui/components/filter.md +52 -0
  42. package/skill/margaui/components/footer.md +583 -0
  43. package/skill/margaui/components/hero.md +135 -0
  44. package/skill/margaui/components/hover-3d.md +129 -0
  45. package/skill/margaui/components/hover-gallery.md +49 -0
  46. package/skill/margaui/components/indicator.md +265 -0
  47. package/skill/margaui/components/input.md +389 -0
  48. package/skill/margaui/components/join.md +100 -0
  49. package/skill/margaui/components/kbd.md +127 -0
  50. package/skill/margaui/components/label.md +102 -0
  51. package/skill/margaui/components/link.md +96 -0
  52. package/skill/margaui/components/list.md +182 -0
  53. package/skill/margaui/components/loading.md +105 -0
  54. package/skill/margaui/components/mask.md +168 -0
  55. package/skill/margaui/components/menu.md +856 -0
  56. package/skill/margaui/components/mockup-browser.md +39 -0
  57. package/skill/margaui/components/mockup-code.md +81 -0
  58. package/skill/margaui/components/mockup-phone.md +39 -0
  59. package/skill/margaui/components/mockup-window.md +33 -0
  60. package/skill/margaui/components/modal.md +178 -0
  61. package/skill/margaui/components/navbar.md +282 -0
  62. package/skill/margaui/components/pagination.md +122 -0
  63. package/skill/margaui/components/progress.md +135 -0
  64. package/skill/margaui/components/radial-progress.md +67 -0
  65. package/skill/margaui/components/radio.md +133 -0
  66. package/skill/margaui/components/range.md +134 -0
  67. package/skill/margaui/components/rating.md +170 -0
  68. package/skill/margaui/components/select.md +225 -0
  69. package/skill/margaui/components/skeleton.md +64 -0
  70. package/skill/margaui/components/stack.md +142 -0
  71. package/skill/margaui/components/stat.md +254 -0
  72. package/skill/margaui/components/status.md +73 -0
  73. package/skill/margaui/components/steps.md +138 -0
  74. package/skill/margaui/components/swap.md +152 -0
  75. package/skill/margaui/components/tab.md +248 -0
  76. package/skill/margaui/components/table.md +1018 -0
  77. package/skill/margaui/components/text-rotate.md +91 -0
  78. package/skill/margaui/components/textarea.md +85 -0
  79. package/skill/margaui/components/theme-controller.md +266 -0
  80. package/skill/margaui/components/timeline.md +1356 -0
  81. package/skill/margaui/components/toast.md +165 -0
  82. package/skill/margaui/components/toggle.md +135 -0
  83. package/skill/margaui/components/tooltip.md +181 -0
  84. package/skill/margaui/components/validator.md +163 -0
  85. package/skill/{advanced.md → tutuca/advanced.md} +5 -0
  86. package/skill/{cli.md → tutuca/cli.md} +17 -0
  87. package/skill/{core.md → tutuca/core.md} +5 -0
  88. /package/skill/{SKILL.md → tutuca/SKILL.md} +0 -0
@@ -0,0 +1,248 @@
1
+ # tab
2
+
3
+ _tabbed content (radio inputs or anchors)_
4
+
5
+ ## What it does
6
+
7
+ Tab strip — radio-driven (CSS-only, supports content panels per tab) or anchor-driven (just visual styling).
8
+
9
+ ## When to use
10
+
11
+ - Section switchers within a page.
12
+
13
+ ## Core classes
14
+
15
+ `tabs`; style `tabs-box|border|lift`; size `tabs-xs|sm|md|lg|xl`; child `tab`, `tab-active`; content `tab-content`.
16
+
17
+ ## Examples
18
+
19
+ ### Radio tabs border — tab content
20
+
21
+ Source: `playground/components/tab/radio-tabs-border--tab-content.html`
22
+
23
+ ```html
24
+ <!-- name of each tab group should be unique -->
25
+ <div class="tabs tabs-border">
26
+ <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 1" />
27
+ <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>
28
+
29
+ <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 2" checked="checked" />
30
+ <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>
31
+
32
+ <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 3" />
33
+ <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
34
+ </div>
35
+ ```
36
+
37
+ ### Radio tabs box — tab content
38
+
39
+ Source: `playground/components/tab/radio-tabs-box--tab-content.html`
40
+
41
+ ```html
42
+ <!-- name of each tab group should be unique -->
43
+ <div class="tabs tabs-box">
44
+ <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 1" />
45
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
46
+
47
+ <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 2" checked="checked" />
48
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
49
+
50
+ <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 3" />
51
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
52
+ </div>
53
+ ```
54
+
55
+ ### Radio tabs lift — tab content on bottom
56
+
57
+ Source: `playground/components/tab/radio-tabs-lift--tab-content-on-bottom.html`
58
+
59
+ ```html
60
+ <!-- name of each tab group should be unique -->
61
+ <div class="tabs tabs-lift tabs-bottom">
62
+ <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 1" />
63
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
64
+
65
+ <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 2" checked="checked" />
66
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
67
+
68
+ <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 3" />
69
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
70
+ </div>
71
+ ```
72
+
73
+ ### Radio tabs lift — tab content
74
+
75
+ Source: `playground/components/tab/radio-tabs-lift--tab-content.html`
76
+
77
+ ```html
78
+ <!-- name of each tab group should be unique -->
79
+ <div class="tabs tabs-lift">
80
+ <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 1" />
81
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
82
+
83
+ <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 2" checked="checked" />
84
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
85
+
86
+ <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 3" />
87
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
88
+ </div>
89
+ ```
90
+
91
+ ### Radio tabs lift with icons — tab content
92
+
93
+ Source: `playground/components/tab/radio-tabs-lift-with-icons--tab-content.html`
94
+
95
+ ```html
96
+ <!-- name of each tab group should be unique -->
97
+ <div class="tabs tabs-lift">
98
+ <label class="tab">
99
+ <input type="radio" name="my_tabs_4" />
100
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>
101
+ Live
102
+ </label>
103
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
104
+
105
+ <label class="tab">
106
+ <input type="radio" name="my_tabs_4" checked="checked" />
107
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
108
+ Laugh
109
+ </label>
110
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
111
+
112
+ <label class="tab">
113
+ <input type="radio" name="my_tabs_4" />
114
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
115
+ Love
116
+ </label>
117
+ <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
118
+ </div>
119
+ ```
120
+
121
+ ### Sizes
122
+
123
+ Source: `playground/components/tab/sizes.html`
124
+
125
+ ```html
126
+
127
+ <div role="tablist" class="tabs tabs-lift tabs-xs">
128
+ <a role="tab" class="tab">Xsmall</a>
129
+ <a role="tab" class="tab tab-active">Xsmall</a>
130
+ <a role="tab" class="tab">Xsmall</a>
131
+ </div>
132
+
133
+ <div role="tablist" class="tabs tabs-lift tabs-sm">
134
+ <a role="tab" class="tab">Small</a>
135
+ <a role="tab" class="tab tab-active">Small</a>
136
+ <a role="tab" class="tab">Small</a>
137
+ </div>
138
+
139
+ <div role="tablist" class="tabs tabs-lift">
140
+ <a role="tab" class="tab">Medium</a>
141
+ <a role="tab" class="tab tab-active">Medium</a>
142
+ <a role="tab" class="tab">Medium</a>
143
+ </div>
144
+
145
+ <div role="tablist" class="tabs tabs-lift tabs-lg">
146
+ <a role="tab" class="tab">Large</a>
147
+ <a role="tab" class="tab tab-active">Large</a>
148
+ <a role="tab" class="tab">Large</a>
149
+ </div>
150
+
151
+ <div role="tablist" class="tabs tabs-lift tabs-xl">
152
+ <a role="tab" class="tab">Xlarge</a>
153
+ <a role="tab" class="tab tab-active">Xlarge</a>
154
+ <a role="tab" class="tab">Xlarge</a>
155
+ </div>
156
+ ```
157
+
158
+ ### Tabs border
159
+
160
+ Source: `playground/components/tab/tabs-border.html`
161
+
162
+ ```html
163
+ <div role="tablist" class="tabs tabs-border">
164
+ <a role="tab" class="tab">Tab 1</a>
165
+ <a role="tab" class="tab tab-active">Tab 2</a>
166
+ <a role="tab" class="tab">Tab 3</a>
167
+ </div>
168
+ ```
169
+
170
+ ### Tabs box using radio inputs
171
+
172
+ Source: `playground/components/tab/tabs-box-using-radio-inputs.html`
173
+
174
+ ```html
175
+ <!-- name of each tab group should be unique -->
176
+ <div class="tabs tabs-box">
177
+ <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 1" />
178
+ <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 2" checked="checked" />
179
+ <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 3" />
180
+ </div>
181
+ ```
182
+
183
+ ### Tabs box with a horizontal scroll when theres no space
184
+
185
+ Source: `playground/components/tab/tabs-box-with-a-horizontal-scroll-when-theres-no-space.html`
186
+
187
+ ```html
188
+ <div class="overflow-x-auto max-w-60">
189
+ <div class="tabs-lift tabs min-w-max">
190
+ <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 1" />
191
+ <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 1</div>
192
+ <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 2" checked="checked" />
193
+ <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 2</div>
194
+ <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 3" />
195
+ <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 3</div>
196
+ <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 4" />
197
+ <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 4</div>
198
+ </div>
199
+ </div>
200
+ ```
201
+
202
+ ### Tabs box
203
+
204
+ Source: `playground/components/tab/tabs-box.html`
205
+
206
+ ```html
207
+ <div role="tablist" class="tabs tabs-box">
208
+ <a role="tab" class="tab">Tab 1</a>
209
+ <a role="tab" class="tab tab-active">Tab 2</a>
210
+ <a role="tab" class="tab">Tab 3</a>
211
+ </div>
212
+ ```
213
+
214
+ ### Tabs lift
215
+
216
+ Source: `playground/components/tab/tabs-lift.html`
217
+
218
+ ```html
219
+ <div role="tablist" class="tabs tabs-lift">
220
+ <a role="tab" class="tab">Tab 1</a>
221
+ <a role="tab" class="tab tab-active">Tab 2</a>
222
+ <a role="tab" class="tab">Tab 3</a>
223
+ </div>
224
+ ```
225
+
226
+ ### Tabs with custom color
227
+
228
+ Source: `playground/components/tab/tabs-with-custom-color.html`
229
+
230
+ ```html
231
+ <div role="tablist" class="tabs tabs-lift">
232
+ <a role="tab" class="tab">Tab 1</a>
233
+ <a role="tab" class="tab tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]"> Tab 2</a>
234
+ <a role="tab" class="tab">Tab 3</a>
235
+ </div>
236
+ ```
237
+
238
+ ### Tabs
239
+
240
+ Source: `playground/components/tab/tabs.html`
241
+
242
+ ```html
243
+ <div role="tablist" class="tabs">
244
+ <a role="tab" class="tab">Tab 1</a>
245
+ <a role="tab" class="tab tab-active">Tab 2</a>
246
+ <a role="tab" class="tab">Tab 3</a>
247
+ </div>
248
+ ```