@central-ui/react 0.0.0-stage → 0.1.1
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/LICENSE +21 -0
- package/README.md +33 -2
- package/dist/components/accordion/index.d.ts +73 -0
- package/dist/components/accordion/index.d.ts.map +1 -0
- package/dist/components/accordion/index.js +92 -0
- package/dist/components/accordion/index.js.map +1 -0
- package/dist/components/autocomplete/index.d.ts +365 -0
- package/dist/components/autocomplete/index.d.ts.map +1 -0
- package/dist/components/autocomplete/index.js +369 -0
- package/dist/components/autocomplete/index.js.map +1 -0
- package/dist/components/avatar/index.d.ts +48 -0
- package/dist/components/avatar/index.d.ts.map +1 -0
- package/dist/components/avatar/index.js +60 -0
- package/dist/components/avatar/index.js.map +1 -0
- package/dist/components/badge/index.d.ts +29 -0
- package/dist/components/badge/index.d.ts.map +1 -0
- package/dist/components/badge/index.js +36 -0
- package/dist/components/badge/index.js.map +1 -0
- package/dist/components/banner/index.d.ts +71 -0
- package/dist/components/banner/index.d.ts.map +1 -0
- package/dist/components/banner/index.js +119 -0
- package/dist/components/banner/index.js.map +1 -0
- package/dist/components/breadcrumb/index.d.ts +31 -0
- package/dist/components/breadcrumb/index.d.ts.map +1 -0
- package/dist/components/breadcrumb/index.js +42 -0
- package/dist/components/breadcrumb/index.js.map +1 -0
- package/dist/components/button/index.d.ts +48 -0
- package/dist/components/button/index.d.ts.map +1 -0
- package/dist/components/button/index.js +60 -0
- package/dist/components/button/index.js.map +1 -0
- package/dist/components/card/index.d.ts +34 -0
- package/dist/components/card/index.d.ts.map +1 -0
- package/dist/components/card/index.js +45 -0
- package/dist/components/card/index.js.map +1 -0
- package/dist/components/checkbox/index.d.ts +66 -0
- package/dist/components/checkbox/index.d.ts.map +1 -0
- package/dist/components/checkbox/index.js +146 -0
- package/dist/components/checkbox/index.js.map +1 -0
- package/dist/components/chip/index.d.ts +26 -0
- package/dist/components/chip/index.d.ts.map +1 -0
- package/dist/components/chip/index.js +40 -0
- package/dist/components/chip/index.js.map +1 -0
- package/dist/components/combobox/index.d.ts +427 -0
- package/dist/components/combobox/index.d.ts.map +1 -0
- package/dist/components/combobox/index.js +416 -0
- package/dist/components/combobox/index.js.map +1 -0
- package/dist/components/datepicker/index.d.ts +297 -0
- package/dist/components/datepicker/index.d.ts.map +1 -0
- package/dist/components/datepicker/index.js +507 -0
- package/dist/components/datepicker/index.js.map +1 -0
- package/dist/components/dialog/index.d.ts +88 -0
- package/dist/components/dialog/index.d.ts.map +1 -0
- package/dist/components/dialog/index.js +102 -0
- package/dist/components/dialog/index.js.map +1 -0
- package/dist/components/divider/index.d.ts +21 -0
- package/dist/components/divider/index.d.ts.map +1 -0
- package/dist/components/divider/index.js +24 -0
- package/dist/components/divider/index.js.map +1 -0
- package/dist/components/drawer/index.d.ts +99 -0
- package/dist/components/drawer/index.d.ts.map +1 -0
- package/dist/components/drawer/index.js +137 -0
- package/dist/components/drawer/index.js.map +1 -0
- package/dist/components/empty/index.d.ts +40 -0
- package/dist/components/empty/index.d.ts.map +1 -0
- package/dist/components/empty/index.js +61 -0
- package/dist/components/empty/index.js.map +1 -0
- package/dist/components/fileupload/index.d.ts +107 -0
- package/dist/components/fileupload/index.d.ts.map +1 -0
- package/dist/components/fileupload/index.js +185 -0
- package/dist/components/fileupload/index.js.map +1 -0
- package/dist/components/form/index.d.ts +34 -0
- package/dist/components/form/index.d.ts.map +1 -0
- package/dist/components/form/index.js +35 -0
- package/dist/components/form/index.js.map +1 -0
- package/dist/components/input/index.d.ts +85 -0
- package/dist/components/input/index.d.ts.map +1 -0
- package/dist/components/input/index.js +249 -0
- package/dist/components/input/index.js.map +1 -0
- package/dist/components/menu/index.d.ts +115 -0
- package/dist/components/menu/index.d.ts.map +1 -0
- package/dist/components/menu/index.js +188 -0
- package/dist/components/menu/index.js.map +1 -0
- package/dist/components/metric/index.d.ts +24 -0
- package/dist/components/metric/index.d.ts.map +1 -0
- package/dist/components/metric/index.js +26 -0
- package/dist/components/metric/index.js.map +1 -0
- package/dist/components/numberinput/index.d.ts +105 -0
- package/dist/components/numberinput/index.d.ts.map +1 -0
- package/dist/components/numberinput/index.js +240 -0
- package/dist/components/numberinput/index.js.map +1 -0
- package/dist/components/otpinput/index.d.ts +63 -0
- package/dist/components/otpinput/index.d.ts.map +1 -0
- package/dist/components/otpinput/index.js +133 -0
- package/dist/components/otpinput/index.js.map +1 -0
- package/dist/components/page/index.d.ts +54 -0
- package/dist/components/page/index.d.ts.map +1 -0
- package/dist/components/page/index.js +100 -0
- package/dist/components/page/index.js.map +1 -0
- package/dist/components/passwordinput/index.d.ts +88 -0
- package/dist/components/passwordinput/index.d.ts.map +1 -0
- package/dist/components/passwordinput/index.js +251 -0
- package/dist/components/passwordinput/index.js.map +1 -0
- package/dist/components/popover/index.d.ts +67 -0
- package/dist/components/popover/index.d.ts.map +1 -0
- package/dist/components/popover/index.js +76 -0
- package/dist/components/popover/index.js.map +1 -0
- package/dist/components/radio/index.d.ts +90 -0
- package/dist/components/radio/index.d.ts.map +1 -0
- package/dist/components/radio/index.js +232 -0
- package/dist/components/radio/index.js.map +1 -0
- package/dist/components/ratinginput/index.d.ts +59 -0
- package/dist/components/ratinginput/index.d.ts.map +1 -0
- package/dist/components/ratinginput/index.js +88 -0
- package/dist/components/ratinginput/index.js.map +1 -0
- package/dist/components/select/index.d.ts +205 -0
- package/dist/components/select/index.d.ts.map +1 -0
- package/dist/components/select/index.js +234 -0
- package/dist/components/select/index.js.map +1 -0
- package/dist/components/skeleton/index.d.ts +19 -0
- package/dist/components/skeleton/index.d.ts.map +1 -0
- package/dist/components/skeleton/index.js +20 -0
- package/dist/components/skeleton/index.js.map +1 -0
- package/dist/components/slider/index.d.ts +72 -0
- package/dist/components/slider/index.d.ts.map +1 -0
- package/dist/components/slider/index.js +159 -0
- package/dist/components/slider/index.js.map +1 -0
- package/dist/components/spinner/index.d.ts +14 -0
- package/dist/components/spinner/index.d.ts.map +1 -0
- package/dist/components/spinner/index.js +15 -0
- package/dist/components/spinner/index.js.map +1 -0
- package/dist/components/splitter/index.d.ts +49 -0
- package/dist/components/splitter/index.d.ts.map +1 -0
- package/dist/components/splitter/index.js +67 -0
- package/dist/components/splitter/index.js.map +1 -0
- package/dist/components/stepper/index.d.ts +82 -0
- package/dist/components/stepper/index.d.ts.map +1 -0
- package/dist/components/stepper/index.js +100 -0
- package/dist/components/stepper/index.js.map +1 -0
- package/dist/components/switch/index.d.ts +57 -0
- package/dist/components/switch/index.d.ts.map +1 -0
- package/dist/components/switch/index.js +101 -0
- package/dist/components/switch/index.js.map +1 -0
- package/dist/components/table/index.d.ts +110 -0
- package/dist/components/table/index.d.ts.map +1 -0
- package/dist/components/table/index.js +211 -0
- package/dist/components/table/index.js.map +1 -0
- package/dist/components/tabs/index.d.ts +67 -0
- package/dist/components/tabs/index.d.ts.map +1 -0
- package/dist/components/tabs/index.js +78 -0
- package/dist/components/tabs/index.js.map +1 -0
- package/dist/components/textarea/index.d.ts +72 -0
- package/dist/components/textarea/index.d.ts.map +1 -0
- package/dist/components/textarea/index.js +205 -0
- package/dist/components/textarea/index.js.map +1 -0
- package/dist/components/textlink/index.d.ts +39 -0
- package/dist/components/textlink/index.d.ts.map +1 -0
- package/dist/components/textlink/index.js +42 -0
- package/dist/components/textlink/index.js.map +1 -0
- package/dist/components/toast/index.d.ts +111 -0
- package/dist/components/toast/index.d.ts.map +1 -0
- package/dist/components/toast/index.js +205 -0
- package/dist/components/toast/index.js.map +1 -0
- package/dist/components/toggle/index.d.ts +41 -0
- package/dist/components/toggle/index.d.ts.map +1 -0
- package/dist/components/toggle/index.js +78 -0
- package/dist/components/toggle/index.js.map +1 -0
- package/dist/components/tooltip/index.d.ts +44 -0
- package/dist/components/tooltip/index.d.ts.map +1 -0
- package/dist/components/tooltip/index.js +51 -0
- package/dist/components/tooltip/index.js.map +1 -0
- package/dist/index.d.ts +50 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +46 -0
- package/dist/index.js.map +1 -0
- package/dist/types/Style.d.ts +14 -0
- package/dist/types/Style.d.ts.map +1 -0
- package/dist/types/Style.js +2 -0
- package/dist/types/Style.js.map +1 -0
- package/dist/types/Tone.d.ts +4 -0
- package/dist/types/Tone.d.ts.map +1 -0
- package/dist/types/Tone.js +2 -0
- package/dist/types/Tone.js.map +1 -0
- package/dist/utils/ArkStateToDataAttributes.d.ts +4 -0
- package/dist/utils/ArkStateToDataAttributes.d.ts.map +1 -0
- package/dist/utils/ArkStateToDataAttributes.js +9 -0
- package/dist/utils/ArkStateToDataAttributes.js.map +1 -0
- package/dist/utils/Tone.d.ts +3 -0
- package/dist/utils/Tone.d.ts.map +1 -0
- package/dist/utils/Tone.js +7 -0
- package/dist/utils/Tone.js.map +1 -0
- package/dist/utils/useForwardClickToInput.d.ts +4 -0
- package/dist/utils/useForwardClickToInput.d.ts.map +1 -0
- package/dist/utils/useForwardClickToInput.js +27 -0
- package/dist/utils/useForwardClickToInput.js.map +1 -0
- package/dist/utils/virtualization/useVirtualizedAutocomplete.d.ts +198 -0
- package/dist/utils/virtualization/useVirtualizedAutocomplete.d.ts.map +1 -0
- package/dist/utils/virtualization/useVirtualizedAutocomplete.js +180 -0
- package/dist/utils/virtualization/useVirtualizedAutocomplete.js.map +1 -0
- package/dist/utils/virtualization/useVirtualizedCombobox.d.ts +200 -0
- package/dist/utils/virtualization/useVirtualizedCombobox.d.ts.map +1 -0
- package/dist/utils/virtualization/useVirtualizedCombobox.js +174 -0
- package/dist/utils/virtualization/useVirtualizedCombobox.js.map +1 -0
- package/dist/utils/virtualization/useVirtualizedTable.d.ts +169 -0
- package/dist/utils/virtualization/useVirtualizedTable.d.ts.map +1 -0
- package/dist/utils/virtualization/useVirtualizedTable.js +127 -0
- package/dist/utils/virtualization/useVirtualizedTable.js.map +1 -0
- package/package.json +64 -4
- package/src/presets/shopify-polaris/shopify-polaris-accordion.css +28 -0
- package/src/presets/shopify-polaris/shopify-polaris-autocomplete.css +155 -0
- package/src/presets/shopify-polaris/shopify-polaris-avatar.css +47 -0
- package/src/presets/shopify-polaris/shopify-polaris-badge.css +27 -0
- package/src/presets/shopify-polaris/shopify-polaris-banner.css +111 -0
- package/src/presets/shopify-polaris/shopify-polaris-breadcrumb.css +16 -0
- package/src/presets/shopify-polaris/shopify-polaris-button.css +79 -0
- package/src/presets/shopify-polaris/shopify-polaris-card.css +28 -0
- package/src/presets/shopify-polaris/shopify-polaris-checkbox.css +52 -0
- package/src/presets/shopify-polaris/shopify-polaris-chip.css +16 -0
- package/src/presets/shopify-polaris/shopify-polaris-combobox.css +179 -0
- package/src/presets/shopify-polaris/shopify-polaris-datepicker.css +183 -0
- package/src/presets/shopify-polaris/shopify-polaris-dialog.css +40 -0
- package/src/presets/shopify-polaris/shopify-polaris-divider.css +12 -0
- package/src/presets/shopify-polaris/shopify-polaris-drawer.css +40 -0
- package/src/presets/shopify-polaris/shopify-polaris-empty.css +32 -0
- package/src/presets/shopify-polaris/shopify-polaris-fileupload.css +78 -0
- package/src/presets/shopify-polaris/shopify-polaris-form.css +8 -0
- package/src/presets/shopify-polaris/shopify-polaris-input.css +72 -0
- package/src/presets/shopify-polaris/shopify-polaris-menu.css +112 -0
- package/src/presets/shopify-polaris/shopify-polaris-metric.css +16 -0
- package/src/presets/shopify-polaris/shopify-polaris-numberinput.css +88 -0
- package/src/presets/shopify-polaris/shopify-polaris-otpinput.css +42 -0
- package/src/presets/shopify-polaris/shopify-polaris-page.css +69 -0
- package/src/presets/shopify-polaris/shopify-polaris-passwordinput.css +76 -0
- package/src/presets/shopify-polaris/shopify-polaris-popover.css +47 -0
- package/src/presets/shopify-polaris/shopify-polaris-radio.css +54 -0
- package/src/presets/shopify-polaris/shopify-polaris-ratinginput.css +42 -0
- package/src/presets/shopify-polaris/shopify-polaris-select.css +119 -0
- package/src/presets/shopify-polaris/shopify-polaris-skeleton.css +8 -0
- package/src/presets/shopify-polaris/shopify-polaris-slider.css +86 -0
- package/src/presets/shopify-polaris/shopify-polaris-spinner.css +16 -0
- package/src/presets/shopify-polaris/shopify-polaris-splitter.css +34 -0
- package/src/presets/shopify-polaris/shopify-polaris-stepper.css +55 -0
- package/src/presets/shopify-polaris/shopify-polaris-switch.css +38 -0
- package/src/presets/shopify-polaris/shopify-polaris-table.css +72 -0
- package/src/presets/shopify-polaris/shopify-polaris-tabs.css +33 -0
- package/src/presets/shopify-polaris/shopify-polaris-textarea.css +61 -0
- package/src/presets/shopify-polaris/shopify-polaris-textlink.css +8 -0
- package/src/presets/shopify-polaris/shopify-polaris-toggle.css +52 -0
- package/src/presets/shopify-polaris/shopify-polaris-tooltip.css +31 -0
- package/src/presets/shopify-polaris/shopify-polaris.css +380 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-accordion.css +28 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-autocomplete.css +155 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-avatar.css +47 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-badge.css +27 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-banner.css +96 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-breadcrumb.css +16 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-button.css +68 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-card.css +28 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-checkbox.css +52 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-chip.css +16 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-combobox.css +184 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-datepicker.css +187 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-dialog.css +40 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-divider.css +12 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-drawer.css +40 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-empty.css +32 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-fileupload.css +72 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-form.css +8 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-input.css +72 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-menu.css +112 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-metric.css +16 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-numberinput.css +88 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-otpinput.css +42 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-page.css +69 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-passwordinput.css +76 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-popover.css +47 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-radio.css +54 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-ratinginput.css +42 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-select.css +118 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-skeleton.css +8 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-slider.css +86 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-spinner.css +16 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-splitter.css +34 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-stepper.css +55 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-switch.css +38 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-table.css +72 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-tabs.css +33 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-textarea.css +61 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-textlink.css +8 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-toast.css +43 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-toggle.css +52 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-tooltip.css +31 -0
- package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy.css +381 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Central UI contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,34 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Central UI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Accessible, unstyled React components with optional Shopify Polaris style presets and virtualization hooks. Compose the parts you need, use a preset for a ready-made appearance, or style them yourself with `className`.
|
|
4
|
+
|
|
5
|
+
Built on semantic HTML, Base UI, and other accessibility primitives. Style presets are raw Tailwind CSS v4 stylesheets, processed by your application's build. Maintained primarily for internal team use and available publicly under the MIT license.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @central-ui/react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Use
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Button, Combobox } from '@central-ui/react'
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
With Tailwind CSS v4.2.1 or later within v4, import the optional raw preset in your application's Tailwind stylesheet:
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
@import 'tailwindcss';
|
|
23
|
+
@import '@central-ui/react/presets/shopify-polaris-legacy.css';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
For the new Polaris appearance, use `@central-ui/react/presets/shopify-polaris.css` instead. It currently includes the global foundation and styles for Button, Input, NumberInput, Textarea, PasswordInput, OTPInput, Autocomplete, Combobox, Select, Menu, DatePicker, Checkbox, Radio, RatingInput, Slider, Switch, Toggle, FileUpload, Stepper, Splitter, Tabs, Accordion, Tooltip, Dialog, Drawer, Banner, Page, Badge, Chip, TextLink, Empty, Spinner, Popover, Table, Card, Skeleton, Avatar, Metric, Divider, Breadcrumb, and Form; other components will be added separately. The demo layout's style preset selector switches between the two presets on the same routes.
|
|
27
|
+
|
|
28
|
+
The preset includes global fonts, scrollbar styles, and animations. It sets the font family to Inter; load that font in your application if desired. Component styles are organized in internal files imported by the preset; those files are not public package imports.
|
|
29
|
+
|
|
30
|
+
Import no preset to omit the extracted visual styles. Core inline styles needed for positioning remain. Set `disableStyle` on an individual styleable part to replace its preset rules with your own `className`. This does not disable other parts or global preset styles. Behavior-only handlers do not have a `disableStyle` prop.
|
|
31
|
+
|
|
32
|
+
## License
|
|
33
|
+
|
|
34
|
+
MIT. See `LICENSE`.
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import type { StyleProps } from '../../types/Style.ts';
|
|
2
|
+
import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
|
|
3
|
+
import type { ReactElement } from 'react';
|
|
4
|
+
import type { LucideProps } from 'lucide-react';
|
|
5
|
+
/**
|
|
6
|
+
* Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenerTitle and let OpenerIndicator reflect expansion.
|
|
7
|
+
*
|
|
8
|
+
* @example Complete composition
|
|
9
|
+
* import { Accordion } from '@central-ui/react'
|
|
10
|
+
*
|
|
11
|
+
* const questions = [
|
|
12
|
+
* {
|
|
13
|
+
* value: 'shipping',
|
|
14
|
+
* title: 'When will my order arrive?',
|
|
15
|
+
* answer: 'Orders usually arrive within three days.',
|
|
16
|
+
* },
|
|
17
|
+
* {
|
|
18
|
+
* value: 'returns',
|
|
19
|
+
* title: 'Can I return an item?',
|
|
20
|
+
* answer: 'Returns are accepted within thirty days.',
|
|
21
|
+
* },
|
|
22
|
+
* {
|
|
23
|
+
* value: 'payment',
|
|
24
|
+
* title: 'Which payment methods can I use?',
|
|
25
|
+
* answer: 'You can pay with your debit or credit card.',
|
|
26
|
+
* },
|
|
27
|
+
* ]
|
|
28
|
+
* function Example() {
|
|
29
|
+
* return (
|
|
30
|
+
* <Accordion.Root>
|
|
31
|
+
* <Accordion.List>
|
|
32
|
+
* {questions.map((question) => (
|
|
33
|
+
* <Accordion.Item key={question.value} value={question.value}>
|
|
34
|
+
* <Accordion.OpenButton>
|
|
35
|
+
* <Accordion.OpenerTitle>{question.title}</Accordion.OpenerTitle>
|
|
36
|
+
* <Accordion.OpenerIndicator />
|
|
37
|
+
* </Accordion.OpenButton>
|
|
38
|
+
* <Accordion.Content>
|
|
39
|
+
* <div className="p-3">{question.answer}</div>
|
|
40
|
+
* </Accordion.Content>
|
|
41
|
+
* </Accordion.Item>
|
|
42
|
+
* ))}
|
|
43
|
+
* </Accordion.List>
|
|
44
|
+
* </Accordion.Root>
|
|
45
|
+
* )
|
|
46
|
+
* }
|
|
47
|
+
*
|
|
48
|
+
* @example Allow several items to stay open
|
|
49
|
+
* // Keep the same List and Item composition from above.
|
|
50
|
+
* ;<Accordion.Root multiple defaultValue={['shipping', 'returns']}>
|
|
51
|
+
* {
|
|
52
|
+
* // Rest of components here
|
|
53
|
+
* }
|
|
54
|
+
* </Accordion.Root>
|
|
55
|
+
*/
|
|
56
|
+
export declare function Root({ children, ...props }: Omit<BaseAccordion.Root.Props, 'render' | 'className'>): import("react").JSX.Element;
|
|
57
|
+
export declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
58
|
+
export declare const Item: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionItemProps, "className" | "render"> & {
|
|
59
|
+
className?: string;
|
|
60
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
61
|
+
export declare const OpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionTriggerProps, "className"> & {
|
|
62
|
+
className?: string;
|
|
63
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
64
|
+
export declare const OpenerTitle: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
65
|
+
/** Supplies the expansion icon and follows open state automatically. Omit children for the default; pass an icon only to replace it. */
|
|
66
|
+
export declare const OpenerIndicator: import("react").ForwardRefExoticComponent<Omit<LucideProps & {
|
|
67
|
+
/** Omit for the supplied default icon; pass a child only to replace it. */
|
|
68
|
+
children?: ReactElement<LucideProps>;
|
|
69
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
70
|
+
export declare const Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AccordionPanelProps, "className"> & {
|
|
71
|
+
className?: string;
|
|
72
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
73
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,OAAO,CAAA;AAGzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,WAAW,CAAC,+BAUxD;AACD,eAAO,MAAM,IAAI,uNAaf,CAAA;AAEF,eAAO,MAAM,IAAI;gBAGD,MAAM;uEAkBpB,CAAA;AACF,eAAO,MAAM,UAAU;gBAE2C,MAAM;0EActE,CAAA;AACF,eAAO,MAAM,WAAW,0NAatB,CAAA;AAEF,wIAAwI;AACxI,eAAO,MAAM,eAAe;IAGxB,2EAA2E;eAChE,YAAY,CAAC,WAAW,CAAC;sEAmBtC,CAAA;AAEF,eAAO,MAAM,OAAO;gBAE4C,MAAM;uEAYpE,CAAA"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
|
|
3
|
+
import { cloneElement, createContext, forwardRef, useContext } from 'react';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
import { ChevronDown } from 'lucide-react';
|
|
6
|
+
/**
|
|
7
|
+
* Use List → Item → OpenButton and Content. Item owns its expansion; do not add your own visibility conditions. Put the heading inside OpenerTitle and let OpenerIndicator reflect expansion.
|
|
8
|
+
*
|
|
9
|
+
* @example Complete composition
|
|
10
|
+
* import { Accordion } from '@central-ui/react'
|
|
11
|
+
*
|
|
12
|
+
* const questions = [
|
|
13
|
+
* {
|
|
14
|
+
* value: 'shipping',
|
|
15
|
+
* title: 'When will my order arrive?',
|
|
16
|
+
* answer: 'Orders usually arrive within three days.',
|
|
17
|
+
* },
|
|
18
|
+
* {
|
|
19
|
+
* value: 'returns',
|
|
20
|
+
* title: 'Can I return an item?',
|
|
21
|
+
* answer: 'Returns are accepted within thirty days.',
|
|
22
|
+
* },
|
|
23
|
+
* {
|
|
24
|
+
* value: 'payment',
|
|
25
|
+
* title: 'Which payment methods can I use?',
|
|
26
|
+
* answer: 'You can pay with your debit or credit card.',
|
|
27
|
+
* },
|
|
28
|
+
* ]
|
|
29
|
+
* function Example() {
|
|
30
|
+
* return (
|
|
31
|
+
* <Accordion.Root>
|
|
32
|
+
* <Accordion.List>
|
|
33
|
+
* {questions.map((question) => (
|
|
34
|
+
* <Accordion.Item key={question.value} value={question.value}>
|
|
35
|
+
* <Accordion.OpenButton>
|
|
36
|
+
* <Accordion.OpenerTitle>{question.title}</Accordion.OpenerTitle>
|
|
37
|
+
* <Accordion.OpenerIndicator />
|
|
38
|
+
* </Accordion.OpenButton>
|
|
39
|
+
* <Accordion.Content>
|
|
40
|
+
* <div className="p-3">{question.answer}</div>
|
|
41
|
+
* </Accordion.Content>
|
|
42
|
+
* </Accordion.Item>
|
|
43
|
+
* ))}
|
|
44
|
+
* </Accordion.List>
|
|
45
|
+
* </Accordion.Root>
|
|
46
|
+
* )
|
|
47
|
+
* }
|
|
48
|
+
*
|
|
49
|
+
* @example Allow several items to stay open
|
|
50
|
+
* // Keep the same List and Item composition from above.
|
|
51
|
+
* ;<Accordion.Root multiple defaultValue={['shipping', 'returns']}>
|
|
52
|
+
* {
|
|
53
|
+
* // Rest of components here
|
|
54
|
+
* }
|
|
55
|
+
* </Accordion.Root>
|
|
56
|
+
*/
|
|
57
|
+
export function Root({ children, ...props }) {
|
|
58
|
+
// Native Root renders a div; the fragment preserves our wrapper-free Root contract.
|
|
59
|
+
return (_jsx(BaseAccordion.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }));
|
|
60
|
+
}
|
|
61
|
+
export const List = forwardRef(function List({ disableStyle, className, ...props }, ref) {
|
|
62
|
+
return (_jsx("div", { ...props, ref: ref, "data-component": "accordion-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
63
|
+
});
|
|
64
|
+
export const Item = forwardRef(function Item({ disableStyle, className, ...props }, ref) {
|
|
65
|
+
return (_jsx(BaseAccordion.Item, { ...props, ref: ref, "data-component": "accordion-item", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (itemProps, state) => (_jsx(ItemContext.Provider, { value: state.open, children: _jsx("div", { ...itemProps }) })) }));
|
|
66
|
+
});
|
|
67
|
+
export const OpenButton = forwardRef(function OpenButton({ disableStyle, className, ...props }, ref) {
|
|
68
|
+
return (_jsx(BaseAccordion.Header, { children: _jsx(BaseAccordion.Trigger, { ...props, ref: ref, "data-component": "accordion-openbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }) }));
|
|
69
|
+
});
|
|
70
|
+
export const OpenerTitle = forwardRef(function OpenerTitle({ disableStyle, className, ...props }, ref) {
|
|
71
|
+
return (_jsx("span", { ...props, ref: ref, "data-component": "accordion-openertitle", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
72
|
+
});
|
|
73
|
+
/** Supplies the expansion icon and follows open state automatically. Omit children for the default; pass an icon only to replace it. */
|
|
74
|
+
export const OpenerIndicator = forwardRef(function OpenerIndicator({ disableStyle, children, className, ...props }, ref) {
|
|
75
|
+
const open = useContext(ItemContext);
|
|
76
|
+
return cloneElement(children ?? _jsx(ChevronDown, {}), {
|
|
77
|
+
...props,
|
|
78
|
+
ref,
|
|
79
|
+
'aria-hidden': true,
|
|
80
|
+
'data-panel-open': open ? '' : undefined,
|
|
81
|
+
...{
|
|
82
|
+
'data-component': 'accordion-openerindicator',
|
|
83
|
+
'data-style-disabled': disableStyle ? '' : undefined,
|
|
84
|
+
},
|
|
85
|
+
className: twMerge(children?.props.className, className),
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
export const Content = forwardRef(function Content({ disableStyle, className, ...props }, ref) {
|
|
89
|
+
return (_jsx(BaseAccordion.Panel, { ...props, ref: ref, "data-component": "accordion-content", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
90
|
+
});
|
|
91
|
+
const ItemContext = createContext(false);
|
|
92
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/accordion/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
|
|
2
|
+
import type { LucideProps } from 'lucide-react';
|
|
3
|
+
import type { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
|
|
4
|
+
type StyleProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Disables preset styling for this element.
|
|
7
|
+
* Rarely needed: prefer className for normal overrides. Use only when explicitly
|
|
8
|
+
* choosing to redesign this part, or when extensive overrides justify starting
|
|
9
|
+
* from an unstyled baseline instead of overriding the preset.
|
|
10
|
+
* Your className and core inline styles still apply.
|
|
11
|
+
* Does not disable other Autocomplete parts or the preset's global styles.
|
|
12
|
+
*
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
disableStyle?: boolean;
|
|
16
|
+
};
|
|
17
|
+
/** Keep extra application data on items; callbacks preserve those fields. */
|
|
18
|
+
export type ItemShape = {
|
|
19
|
+
/** Label used automatically for input display and built-in text filtering. */
|
|
20
|
+
label: string;
|
|
21
|
+
/** Keep a stable identifier on each suggestion; use it for React keys. The input submits its displayed text. */
|
|
22
|
+
value: string;
|
|
23
|
+
};
|
|
24
|
+
/** The items data defines grouping; the component does not group by a field. */
|
|
25
|
+
export type GroupShape = {
|
|
26
|
+
/** Group heading. Use an empty string for an unlabeled group and omit GroupLabel. */
|
|
27
|
+
label: string;
|
|
28
|
+
/** Items belonging to this group. Keep this group wrapper even for a flat list. */
|
|
29
|
+
items: readonly ItemShape[];
|
|
30
|
+
};
|
|
31
|
+
/** Manually type a GroupsList callback argument with GroupType<typeof rootItems>, using the exact items variable passed to Root. Preserves custom fields. */
|
|
32
|
+
export type GroupType<T extends readonly GroupShape[]> = T[number];
|
|
33
|
+
/** Manually type an ItemsList callback argument with ItemType<typeof rootItems>, using the exact items variable passed to Root. Preserves custom fields. */
|
|
34
|
+
export type ItemType<T extends readonly GroupShape[]> = GroupType<T>['items'][number];
|
|
35
|
+
export type RootProps<T extends readonly GroupShape[]> = Omit<BaseAutocomplete.Root.Props<ItemType<T>>, 'items' | 'filteredItems' | 'itemToStringValue' | 'id'> & {
|
|
36
|
+
/** Let Label target this input automatically. Omit to generate a stable id. */
|
|
37
|
+
id?: BaseAutocomplete.Root.Props<ItemType<T>>['id'];
|
|
38
|
+
/**
|
|
39
|
+
* Prepare groups in your data; Autocomplete does not group by a field.
|
|
40
|
+
* To make the list look flat, use one group with label: '' and omit GroupLabel.
|
|
41
|
+
* Keep Group around ItemsList even without a visible heading.
|
|
42
|
+
* Let the built-in label handling and filtering work; no accessors are needed.
|
|
43
|
+
*/
|
|
44
|
+
items: T;
|
|
45
|
+
/**
|
|
46
|
+
* Omit for built-in filtering. Supply only to control the displayed suggestions,
|
|
47
|
+
* such as recommendations before typing or results filtered on a server.
|
|
48
|
+
* Preserve the grouped structure; return undefined to restore built-in filtering.
|
|
49
|
+
*/
|
|
50
|
+
filteredItems?: readonly GroupType<T>[];
|
|
51
|
+
/** Changes the validation appearance; does not validate or show messages. @default 'neutral' */
|
|
52
|
+
tone?: 'neutral' | 'valid' | 'invalid';
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Suggests cities while allowing users to keep their own text. Use Combobox instead
|
|
56
|
+
* when the user must choose an existing item. Input handles filtering and completion;
|
|
57
|
+
* do not rebuild those behaviors with change or click handlers.
|
|
58
|
+
*
|
|
59
|
+
* Prepare grouping in items. For a flat-looking list, supply one group with label: ''
|
|
60
|
+
* and omit GroupLabel; keep the Group wrapper and the same popup nesting.
|
|
61
|
+
* IMPORTANT: manually annotate children callback data with Autocomplete.GroupType
|
|
62
|
+
* and Autocomplete.ItemType, using typeof the SAME items variable passed to Root.
|
|
63
|
+
*
|
|
64
|
+
* Use InputGroup with Input and optional Addon buttons. For your own layout, omit
|
|
65
|
+
* Container but keep Label, InputGroup, and the same popup composition.
|
|
66
|
+
* The examples reuse cities and groups from the complete composition.
|
|
67
|
+
*
|
|
68
|
+
* To virtualize, import useVirtualizedAutocomplete from '@central-ui/react'.
|
|
69
|
+
* See the hook's types and documentation for configuration and integration examples.
|
|
70
|
+
*
|
|
71
|
+
* @example Complete grouped composition
|
|
72
|
+
* import { Autocomplete } from '@central-ui/react'
|
|
73
|
+
*
|
|
74
|
+
* const cities = [
|
|
75
|
+
* { value: 'city_1', label: 'Casablanca', country: 'Morocco', population: 3359818 },
|
|
76
|
+
* { value: 'city_2', label: 'Rabat', country: 'Morocco', population: 580000 },
|
|
77
|
+
* { value: 'city_3', label: 'Paris', country: 'France', population: 2102650 },
|
|
78
|
+
* ]
|
|
79
|
+
* // Prepare groups in your data; there is no groupBy prop.
|
|
80
|
+
* const groups = [
|
|
81
|
+
* { label: 'Morocco', items: cities.filter((city) => city.country === 'Morocco') },
|
|
82
|
+
* { label: 'France', items: cities.filter((city) => city.country === 'France') },
|
|
83
|
+
* ]
|
|
84
|
+
* // Callback annotations below use typeof groups because Root receives items={groups}.
|
|
85
|
+
*
|
|
86
|
+
* function CityAutocomplete() {
|
|
87
|
+
* return (
|
|
88
|
+
* <Autocomplete.Root items={groups} name="city-search">
|
|
89
|
+
* <Autocomplete.Container>
|
|
90
|
+
* <Autocomplete.Label>City</Autocomplete.Label>
|
|
91
|
+
* <Autocomplete.InputGroup>
|
|
92
|
+
* <Autocomplete.Input placeholder="Search cities" />
|
|
93
|
+
* <Autocomplete.Addon>
|
|
94
|
+
* <Autocomplete.AddonOpenButton aria-label="Show cities">
|
|
95
|
+
* <Autocomplete.AddonOpenButtonIcon />
|
|
96
|
+
* </Autocomplete.AddonOpenButton>
|
|
97
|
+
* <Autocomplete.AddonClearButton aria-label="Clear city">
|
|
98
|
+
* <Autocomplete.AddonClearButtonIcon />
|
|
99
|
+
* </Autocomplete.AddonClearButton>
|
|
100
|
+
* </Autocomplete.Addon>
|
|
101
|
+
* </Autocomplete.InputGroup>
|
|
102
|
+
* <Autocomplete.Popup>
|
|
103
|
+
* <Autocomplete.Empty // Required: keep mounted; contents show only for no matches.
|
|
104
|
+
* >
|
|
105
|
+
* <Autocomplete.EmptyText>No cities found.</Autocomplete.EmptyText>
|
|
106
|
+
* </Autocomplete.Empty>
|
|
107
|
+
* <Autocomplete.ScrollArea // Required: provides listbox semantics and keyboard handling.
|
|
108
|
+
* >
|
|
109
|
+
* <Autocomplete.GroupsList // Required: renders the filtered groups automatically.
|
|
110
|
+
* >
|
|
111
|
+
* {(group: Autocomplete.GroupType<typeof groups>, groupIndex) => (
|
|
112
|
+
* <Autocomplete.Group
|
|
113
|
+
* key={groupIndex}
|
|
114
|
+
* items={group.items} // Required even without a heading.
|
|
115
|
+
* >
|
|
116
|
+
* <Autocomplete.GroupLabel // Optional: display the group label; omit for a flat list.
|
|
117
|
+
* >
|
|
118
|
+
* {group.label}
|
|
119
|
+
* </Autocomplete.GroupLabel>
|
|
120
|
+
* <Autocomplete.ItemsList // Required: renders this group's filtered items.
|
|
121
|
+
* >
|
|
122
|
+
* {(city: Autocomplete.ItemType<typeof groups>) => (
|
|
123
|
+
* <Autocomplete.Item
|
|
124
|
+
* key={city.value}
|
|
125
|
+
* value={city} // Required: pass the complete item object.
|
|
126
|
+
* >
|
|
127
|
+
* <Autocomplete.ItemText>{city.label}</Autocomplete.ItemText>
|
|
128
|
+
* </Autocomplete.Item>
|
|
129
|
+
* )}
|
|
130
|
+
* </Autocomplete.ItemsList>
|
|
131
|
+
* </Autocomplete.Group>
|
|
132
|
+
* )}
|
|
133
|
+
* </Autocomplete.GroupsList>
|
|
134
|
+
* </Autocomplete.ScrollArea>
|
|
135
|
+
* </Autocomplete.Popup>
|
|
136
|
+
* </Autocomplete.Container>
|
|
137
|
+
* </Autocomplete.Root>
|
|
138
|
+
* )
|
|
139
|
+
* }
|
|
140
|
+
*
|
|
141
|
+
* @example Flat-looking suggestions
|
|
142
|
+
* // Keep Group and ItemsList; omit GroupLabel in the composition above.
|
|
143
|
+
* ;<Autocomplete.Root items={[{ label: '', items: cities }]}>
|
|
144
|
+
* {
|
|
145
|
+
* // Rest of components here
|
|
146
|
+
* }
|
|
147
|
+
* </Autocomplete.Root>
|
|
148
|
+
*
|
|
149
|
+
* @example Controlled search text
|
|
150
|
+
* import { useState } from 'react'
|
|
151
|
+
* function ControlledCitySearch() {
|
|
152
|
+
* const [query, setQuery] = useState('')
|
|
153
|
+
* return (
|
|
154
|
+
* <Autocomplete.Root items={groups} value={query} onValueChange={setQuery}>
|
|
155
|
+
* {
|
|
156
|
+
* // Rest of components here
|
|
157
|
+
* }
|
|
158
|
+
* </Autocomplete.Root>
|
|
159
|
+
* )
|
|
160
|
+
* }
|
|
161
|
+
*
|
|
162
|
+
* @example Show recommended suggestions before typing
|
|
163
|
+
* function RecommendedCitySearch() {
|
|
164
|
+
* const [query, setQuery] = useState('')
|
|
165
|
+
* const recommended = [{ label: '', items: [cities[0], cities[2]] }]
|
|
166
|
+
* return (
|
|
167
|
+
* <Autocomplete.Root
|
|
168
|
+
* items={groups}
|
|
169
|
+
* value={query}
|
|
170
|
+
* onValueChange={setQuery}
|
|
171
|
+
* openOnInputClick
|
|
172
|
+
* // Return undefined once typing starts to restore built-in filtering.
|
|
173
|
+
* filteredItems={query.trim() === '' ? recommended : undefined}
|
|
174
|
+
* >
|
|
175
|
+
* {
|
|
176
|
+
* // Rest of components here
|
|
177
|
+
* }
|
|
178
|
+
* </Autocomplete.Root>
|
|
179
|
+
* )
|
|
180
|
+
* }
|
|
181
|
+
*
|
|
182
|
+
* @example Complete text as users navigate suggestions
|
|
183
|
+
* // Keep the same input and popup composition; only change Root configuration.
|
|
184
|
+
* ;<Autocomplete.Root items={groups} mode="both" autoHighlight>
|
|
185
|
+
* {
|
|
186
|
+
* // Rest of components here
|
|
187
|
+
* }
|
|
188
|
+
* </Autocomplete.Root>
|
|
189
|
+
*
|
|
190
|
+
* @example Optional asynchronous suggestions
|
|
191
|
+
* // Inside Popup, below Empty and above ScrollArea. Omit Loading for synchronous data.
|
|
192
|
+
* // For async data, keep Loading mounted and toggle only its children from request state.
|
|
193
|
+
* ;<Autocomplete.Loading>
|
|
194
|
+
* {isLoading && (
|
|
195
|
+
* <>
|
|
196
|
+
* <Autocomplete.LoadingIcon />
|
|
197
|
+
* <Autocomplete.LoadingText>Loading cities…</Autocomplete.LoadingText>
|
|
198
|
+
* </>
|
|
199
|
+
* )}
|
|
200
|
+
* </Autocomplete.Loading>
|
|
201
|
+
*
|
|
202
|
+
* @example Use a custom trigger button
|
|
203
|
+
* // Replace the AddonOpenButton in Addon; do not add a second opener beside it.
|
|
204
|
+
* // PopupOpenHandler adds behavior only. Its child owns the appearance.
|
|
205
|
+
* ;<Autocomplete.PopupOpenHandler>
|
|
206
|
+
* <button type="button" className="rounded-lg px-2">
|
|
207
|
+
* Show cities
|
|
208
|
+
* </button>
|
|
209
|
+
* </Autocomplete.PopupOpenHandler>
|
|
210
|
+
*
|
|
211
|
+
* @example Replace styling on one part
|
|
212
|
+
* // All other parts keep their imported preset styles.
|
|
213
|
+
* ;<Autocomplete.AddonOpenButton
|
|
214
|
+
* disableStyle
|
|
215
|
+
* className="rounded-full bg-blue-600 p-2"
|
|
216
|
+
* aria-label="Show suggestions"
|
|
217
|
+
* >
|
|
218
|
+
* <Autocomplete.AddonOpenButtonIcon />
|
|
219
|
+
* </Autocomplete.AddonOpenButton>
|
|
220
|
+
*/
|
|
221
|
+
export declare function Root<T extends readonly GroupShape[]>({ children, id, tone, open, defaultOpen, onOpenChange, ...props }: RootProps<T>): import("react").JSX.Element;
|
|
222
|
+
/** Use for the standard stacked layout, or omit when supplying your own layout. */
|
|
223
|
+
export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
224
|
+
/** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
|
|
225
|
+
export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
226
|
+
/** Let the input handle suggestion filtering and completion. It accepts free text; choosing a suggestion is optional. Label association is automatic. */
|
|
227
|
+
export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputProps, "className" | "id"> & {
|
|
228
|
+
className?: string;
|
|
229
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
230
|
+
/** Use only for an additional custom display of the current input text. Do not use it to build the editable input; Input already handles that. */
|
|
231
|
+
export declare const Value: typeof BaseAutocomplete.Value;
|
|
232
|
+
export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.List>, 'children' | 'className'> & {
|
|
233
|
+
className?: string;
|
|
234
|
+
/** Keep GroupsList inside this listbox rather than nesting another listbox primitive. */
|
|
235
|
+
children?: ReactNode;
|
|
236
|
+
} & StyleProps;
|
|
237
|
+
/** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
|
|
238
|
+
export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
239
|
+
export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
|
|
240
|
+
/**
|
|
241
|
+
* Return Group with its ItemsList; do not filter the collection again.
|
|
242
|
+
* Manually annotate group with Autocomplete.GroupType<typeof rootItems>, using
|
|
243
|
+
* the exact items variable passed to Root so custom fields remain available.
|
|
244
|
+
*/
|
|
245
|
+
children: ReactNode | ((group: Group, index: number) => ReactNode);
|
|
246
|
+
} & StyleProps;
|
|
247
|
+
/** Required groups container inside ScrollArea. A children callback receives each automatically filtered group; do not filter or map the original groups again. Manually annotate group with Autocomplete.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
|
|
248
|
+
export declare function GroupsList<Group extends GroupShape = GroupShape>({ disableStyle, children, className, style, ...props }: GroupsListProps<Group>): import("react").JSX.Element;
|
|
249
|
+
export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<'div'>, 'children' | 'className'> & {
|
|
250
|
+
className?: string;
|
|
251
|
+
/**
|
|
252
|
+
* Return Item with ItemText. Manually annotate item with
|
|
253
|
+
* Autocomplete.ItemType<typeof rootItems>, using the exact items variable passed
|
|
254
|
+
* to Root; the surrounding Root does not infer this callback's data shape.
|
|
255
|
+
*/
|
|
256
|
+
children: ReactNode | ((item: Item, index: number) => ReactNode);
|
|
257
|
+
} & StyleProps;
|
|
258
|
+
/** Required inside Group. Let the collection filter suggestions; manually annotate its callback with Autocomplete.ItemType<typeof rootItems>, using the exact items variable passed to Root. */
|
|
259
|
+
export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ...props }: ItemsListProps<Item>): import("react").JSX.Element;
|
|
260
|
+
export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Group>, 'items' | 'className'> & {
|
|
261
|
+
className?: string;
|
|
262
|
+
/** Pass group.items from GroupsList, including for an unlabeled group. */
|
|
263
|
+
items: readonly Item[];
|
|
264
|
+
} & StyleProps;
|
|
265
|
+
/** Required wrapper around ItemsList, even for a visually flat list. Pass group.items. A GroupLabel is optional; omit it when the group has an empty label. */
|
|
266
|
+
export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: GroupProps<Item>): import("react").JSX.Element;
|
|
267
|
+
export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Item>, 'value' | 'className'> & {
|
|
268
|
+
className?: string;
|
|
269
|
+
/** Pass the suggestion supplied by ItemsList so built-in completion can resolve its label. */
|
|
270
|
+
value: Item;
|
|
271
|
+
} & StyleProps;
|
|
272
|
+
/** Required suggestion inside ItemsList. Let it fill the input when chosen; do not implement a duplicate click handler. Keep ItemText inside. */
|
|
273
|
+
export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item>): import("react").JSX.Element;
|
|
274
|
+
export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseAutocomplete.Popup>, 'className'> & {
|
|
275
|
+
className?: string;
|
|
276
|
+
} & Pick<BaseAutocomplete.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseAutocomplete.Positioner.Props, 'anchor' | 'positionMethod' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & {
|
|
277
|
+
/** Choose which side of the input to prefer; collisions may change it. @default 'bottom' */
|
|
278
|
+
side?: BaseAutocomplete.Positioner.Props['side'];
|
|
279
|
+
/** Adjust the gap between the input and suggestions. @default 5 */
|
|
280
|
+
sideOffset?: BaseAutocomplete.Positioner.Props['sideOffset'];
|
|
281
|
+
/** Choose which input edge to align the popup with. @default 'start' */
|
|
282
|
+
align?: BaseAutocomplete.Positioner.Props['align'];
|
|
283
|
+
} & StyleProps;
|
|
284
|
+
/** Popup containing Empty, an optional Loading message, and ScrollArea, in that order. Already includes the portal and positioner: do not add either yourself. Defaults to bottom/start with a 5px gap. Core available-space and anchor-width inline styles stay active when preset styling is disabled. */
|
|
285
|
+
export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
|
|
286
|
+
/** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
|
|
287
|
+
export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
288
|
+
/** Behavior only: turns its single child element into the popup trigger. Adds no preset styling and has no disableStyle prop. Use an accessible button child; pass className to the child for its appearance. */
|
|
289
|
+
export declare const PopupOpenHandler: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteTriggerProps, "children" | "className" | "render"> & {
|
|
290
|
+
className?: string;
|
|
291
|
+
/** Supply the button that should open the popup; no additional click handler needed. */
|
|
292
|
+
children: ReactElement;
|
|
293
|
+
}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
294
|
+
/** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
|
|
295
|
+
export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
296
|
+
/** Use emphasized for a shaded addon. Does not add interaction. @default 'normal' */
|
|
297
|
+
variant?: "normal" | "emphasized";
|
|
298
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
299
|
+
/** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
|
|
300
|
+
export declare const AddonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<LucideProps, "strokeWidth"> & {
|
|
301
|
+
/** @default 1.5 */
|
|
302
|
+
strokeWidth?: LucideProps["strokeWidth"];
|
|
303
|
+
} & {
|
|
304
|
+
/** Supply your decorative icon; its own classes are preserved. */
|
|
305
|
+
children: ReactElement<LucideProps>;
|
|
306
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
307
|
+
/** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
|
|
308
|
+
export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "disabled"> & {
|
|
309
|
+
/** Keep the default to avoid submitting a surrounding form. @default 'button' */
|
|
310
|
+
type?: ComponentProps<"button">["type"];
|
|
311
|
+
/** Root disabled or readOnly already disables this button; use for an additional condition. */
|
|
312
|
+
disabled?: ComponentProps<"button">["disabled"];
|
|
313
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
314
|
+
/** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root tone changes appearance only. */
|
|
315
|
+
export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputGroupProps, "className"> & {
|
|
316
|
+
className?: string;
|
|
317
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
318
|
+
/** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
|
|
319
|
+
export declare const AddonOpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteTriggerProps, "className"> & {
|
|
320
|
+
className?: string;
|
|
321
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
322
|
+
/** Clears the input automatically; no click handler needed. Supply AddonClearButtonIcon and an accessible label. */
|
|
323
|
+
export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteClearProps, "className"> & {
|
|
324
|
+
className?: string;
|
|
325
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
326
|
+
/** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
|
|
327
|
+
export declare const GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "className"> & {
|
|
328
|
+
className?: string;
|
|
329
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
330
|
+
/** Required empty-results message inside Popup, before optional Loading and ScrollArea. Keep mounted statically: Base UI renders its children only when no items match. Do not manually toggle, hide, or conditionally mount it. */
|
|
331
|
+
export declare const Empty: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteEmptyProps, "className"> & {
|
|
332
|
+
className?: string;
|
|
333
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
334
|
+
/** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
|
|
335
|
+
export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteSeparatorProps, "className"> & {
|
|
336
|
+
className?: string;
|
|
337
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
338
|
+
/** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
|
|
339
|
+
export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
340
|
+
/** Optional decorative text inside Addon. Supply the text as children. */
|
|
341
|
+
export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
342
|
+
/** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
|
|
343
|
+
export declare const EmptyText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
344
|
+
/** Optional supporting text. Supply its content; it does not connect itself to the input with aria-describedby. Use matching id and Input aria-describedby when needed. */
|
|
345
|
+
export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
346
|
+
/** Optional alert message. You control when it is rendered and its contents; tone does not validate or show this message automatically. */
|
|
347
|
+
export declare const Error: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
348
|
+
/** Optional success status. You control when it is rendered and its contents; tone does not show this message automatically. */
|
|
349
|
+
export declare const Success: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
350
|
+
/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
|
|
351
|
+
export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
352
|
+
/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
|
|
353
|
+
export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
354
|
+
/** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
|
|
355
|
+
export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
356
|
+
/** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
|
|
357
|
+
export declare const Loading: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteStatusProps, "className"> & {
|
|
358
|
+
className?: string;
|
|
359
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
360
|
+
/** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
|
|
361
|
+
export declare const LoadingText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
362
|
+
/** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
|
|
363
|
+
export declare const LoadingIcon: import("react").ForwardRefExoticComponent<Omit<LucideProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
|
|
364
|
+
export {};
|
|
365
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/index.tsx"],"names":[],"mappings":"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"}
|