@andrilla/mado-ui 1.1.0 → 1.1.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.
- package/README.md +23 -1
- package/dist/client/components/index.js +347 -192
- package/dist/client.js +353 -200
- package/dist/components/index.js +347 -192
- package/dist/components/search.d.ts +46 -4
- package/dist/components/select.d.ts +17 -7
- package/dist/hooks/create-fast-context.d.ts +8 -9
- package/dist/hooks/index.js +30 -35
- package/dist/hooks/use-form-status.d.ts +8 -10
- package/dist/index.js +353 -200
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -153,6 +153,28 @@ Same setup as Input, but for checkbox built on Headless UI's Checkbox.
|
|
|
153
153
|
<Checkbox name='terms' label='I agree to the terms and conditions' />
|
|
154
154
|
```
|
|
155
155
|
|
|
156
|
+
### Search
|
|
157
|
+
|
|
158
|
+
Same setup as Input, but for select built on Headless UI's Combobox. Uses uncontrolled state by default. Works great with `multiple` prop for multi-select. Includes an `allowCustom` prop to provide users with the option to write in their own options.
|
|
159
|
+
|
|
160
|
+
#### SearchOption
|
|
161
|
+
|
|
162
|
+
Add options to your Search component built on Headless UI's ComboboxOption. Designed to have customizable children, to display unique option values (e.g. icons, descriptions, etc.), while displaying just the option name in the select box.
|
|
163
|
+
|
|
164
|
+
#### Example
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
<Search name='faq' label='Search our FAQ'>
|
|
168
|
+
<SearchOption name='Does it work?' value='does_it_work'>
|
|
169
|
+
Does it work?
|
|
170
|
+
</SearchOption>
|
|
171
|
+
|
|
172
|
+
<SearchOption name='Can I use it?' value='can_i_use_it'>
|
|
173
|
+
Can I use it?
|
|
174
|
+
</SearchOption>
|
|
175
|
+
</Search>
|
|
176
|
+
```
|
|
177
|
+
|
|
156
178
|
### Select
|
|
157
179
|
|
|
158
180
|
Same setup as Input, but for select built on Headless UI's Listbox. Uses uncontrolled state by default. Works great with `multiple` prop for multi-select.
|
|
@@ -164,7 +186,7 @@ Add options to your Select component built on Headless UI's ListboxOption. Desig
|
|
|
164
186
|
#### Example
|
|
165
187
|
|
|
166
188
|
```tsx
|
|
167
|
-
<Select label='Do you like good design?'>
|
|
189
|
+
<Select name='good_design' label='Do you like good design?'>
|
|
168
190
|
<SelectOption name='YES!' value='yes'>
|
|
169
191
|
<ThumbsUp />
|
|
170
192
|
YES!
|