@central-ui/react 0.0.0-stage → 0.1.0
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 +31 -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
|
@@ -0,0 +1,369 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
|
|
3
|
+
import { ChevronsUpDown, LoaderCircle, X } from 'lucide-react';
|
|
4
|
+
import { cloneElement, createContext, forwardRef, useContext, useId, useState, } from 'react';
|
|
5
|
+
import { twMerge } from 'tailwind-merge';
|
|
6
|
+
import { ToneProvider, useToneContext } from "../../utils/Tone.js";
|
|
7
|
+
/**
|
|
8
|
+
* Suggests cities while allowing users to keep their own text. Use Combobox instead
|
|
9
|
+
* when the user must choose an existing item. Input handles filtering and completion;
|
|
10
|
+
* do not rebuild those behaviors with change or click handlers.
|
|
11
|
+
*
|
|
12
|
+
* Prepare grouping in items. For a flat-looking list, supply one group with label: ''
|
|
13
|
+
* and omit GroupLabel; keep the Group wrapper and the same popup nesting.
|
|
14
|
+
* IMPORTANT: manually annotate children callback data with Autocomplete.GroupType
|
|
15
|
+
* and Autocomplete.ItemType, using typeof the SAME items variable passed to Root.
|
|
16
|
+
*
|
|
17
|
+
* Use InputGroup with Input and optional Addon buttons. For your own layout, omit
|
|
18
|
+
* Container but keep Label, InputGroup, and the same popup composition.
|
|
19
|
+
* The examples reuse cities and groups from the complete composition.
|
|
20
|
+
*
|
|
21
|
+
* To virtualize, import useVirtualizedAutocomplete from '@central-ui/react'.
|
|
22
|
+
* See the hook's types and documentation for configuration and integration examples.
|
|
23
|
+
*
|
|
24
|
+
* @example Complete grouped composition
|
|
25
|
+
* import { Autocomplete } from '@central-ui/react'
|
|
26
|
+
*
|
|
27
|
+
* const cities = [
|
|
28
|
+
* { value: 'city_1', label: 'Casablanca', country: 'Morocco', population: 3359818 },
|
|
29
|
+
* { value: 'city_2', label: 'Rabat', country: 'Morocco', population: 580000 },
|
|
30
|
+
* { value: 'city_3', label: 'Paris', country: 'France', population: 2102650 },
|
|
31
|
+
* ]
|
|
32
|
+
* // Prepare groups in your data; there is no groupBy prop.
|
|
33
|
+
* const groups = [
|
|
34
|
+
* { label: 'Morocco', items: cities.filter((city) => city.country === 'Morocco') },
|
|
35
|
+
* { label: 'France', items: cities.filter((city) => city.country === 'France') },
|
|
36
|
+
* ]
|
|
37
|
+
* // Callback annotations below use typeof groups because Root receives items={groups}.
|
|
38
|
+
*
|
|
39
|
+
* function CityAutocomplete() {
|
|
40
|
+
* return (
|
|
41
|
+
* <Autocomplete.Root items={groups} name="city-search">
|
|
42
|
+
* <Autocomplete.Container>
|
|
43
|
+
* <Autocomplete.Label>City</Autocomplete.Label>
|
|
44
|
+
* <Autocomplete.InputGroup>
|
|
45
|
+
* <Autocomplete.Input placeholder="Search cities" />
|
|
46
|
+
* <Autocomplete.Addon>
|
|
47
|
+
* <Autocomplete.AddonOpenButton aria-label="Show cities">
|
|
48
|
+
* <Autocomplete.AddonOpenButtonIcon />
|
|
49
|
+
* </Autocomplete.AddonOpenButton>
|
|
50
|
+
* <Autocomplete.AddonClearButton aria-label="Clear city">
|
|
51
|
+
* <Autocomplete.AddonClearButtonIcon />
|
|
52
|
+
* </Autocomplete.AddonClearButton>
|
|
53
|
+
* </Autocomplete.Addon>
|
|
54
|
+
* </Autocomplete.InputGroup>
|
|
55
|
+
* <Autocomplete.Popup>
|
|
56
|
+
* <Autocomplete.Empty // Required: keep mounted; contents show only for no matches.
|
|
57
|
+
* >
|
|
58
|
+
* <Autocomplete.EmptyText>No cities found.</Autocomplete.EmptyText>
|
|
59
|
+
* </Autocomplete.Empty>
|
|
60
|
+
* <Autocomplete.ScrollArea // Required: provides listbox semantics and keyboard handling.
|
|
61
|
+
* >
|
|
62
|
+
* <Autocomplete.GroupsList // Required: renders the filtered groups automatically.
|
|
63
|
+
* >
|
|
64
|
+
* {(group: Autocomplete.GroupType<typeof groups>, groupIndex) => (
|
|
65
|
+
* <Autocomplete.Group
|
|
66
|
+
* key={groupIndex}
|
|
67
|
+
* items={group.items} // Required even without a heading.
|
|
68
|
+
* >
|
|
69
|
+
* <Autocomplete.GroupLabel // Optional: display the group label; omit for a flat list.
|
|
70
|
+
* >
|
|
71
|
+
* {group.label}
|
|
72
|
+
* </Autocomplete.GroupLabel>
|
|
73
|
+
* <Autocomplete.ItemsList // Required: renders this group's filtered items.
|
|
74
|
+
* >
|
|
75
|
+
* {(city: Autocomplete.ItemType<typeof groups>) => (
|
|
76
|
+
* <Autocomplete.Item
|
|
77
|
+
* key={city.value}
|
|
78
|
+
* value={city} // Required: pass the complete item object.
|
|
79
|
+
* >
|
|
80
|
+
* <Autocomplete.ItemText>{city.label}</Autocomplete.ItemText>
|
|
81
|
+
* </Autocomplete.Item>
|
|
82
|
+
* )}
|
|
83
|
+
* </Autocomplete.ItemsList>
|
|
84
|
+
* </Autocomplete.Group>
|
|
85
|
+
* )}
|
|
86
|
+
* </Autocomplete.GroupsList>
|
|
87
|
+
* </Autocomplete.ScrollArea>
|
|
88
|
+
* </Autocomplete.Popup>
|
|
89
|
+
* </Autocomplete.Container>
|
|
90
|
+
* </Autocomplete.Root>
|
|
91
|
+
* )
|
|
92
|
+
* }
|
|
93
|
+
*
|
|
94
|
+
* @example Flat-looking suggestions
|
|
95
|
+
* // Keep Group and ItemsList; omit GroupLabel in the composition above.
|
|
96
|
+
* ;<Autocomplete.Root items={[{ label: '', items: cities }]}>
|
|
97
|
+
* {
|
|
98
|
+
* // Rest of components here
|
|
99
|
+
* }
|
|
100
|
+
* </Autocomplete.Root>
|
|
101
|
+
*
|
|
102
|
+
* @example Controlled search text
|
|
103
|
+
* import { useState } from 'react'
|
|
104
|
+
* function ControlledCitySearch() {
|
|
105
|
+
* const [query, setQuery] = useState('')
|
|
106
|
+
* return (
|
|
107
|
+
* <Autocomplete.Root items={groups} value={query} onValueChange={setQuery}>
|
|
108
|
+
* {
|
|
109
|
+
* // Rest of components here
|
|
110
|
+
* }
|
|
111
|
+
* </Autocomplete.Root>
|
|
112
|
+
* )
|
|
113
|
+
* }
|
|
114
|
+
*
|
|
115
|
+
* @example Show recommended suggestions before typing
|
|
116
|
+
* function RecommendedCitySearch() {
|
|
117
|
+
* const [query, setQuery] = useState('')
|
|
118
|
+
* const recommended = [{ label: '', items: [cities[0], cities[2]] }]
|
|
119
|
+
* return (
|
|
120
|
+
* <Autocomplete.Root
|
|
121
|
+
* items={groups}
|
|
122
|
+
* value={query}
|
|
123
|
+
* onValueChange={setQuery}
|
|
124
|
+
* openOnInputClick
|
|
125
|
+
* // Return undefined once typing starts to restore built-in filtering.
|
|
126
|
+
* filteredItems={query.trim() === '' ? recommended : undefined}
|
|
127
|
+
* >
|
|
128
|
+
* {
|
|
129
|
+
* // Rest of components here
|
|
130
|
+
* }
|
|
131
|
+
* </Autocomplete.Root>
|
|
132
|
+
* )
|
|
133
|
+
* }
|
|
134
|
+
*
|
|
135
|
+
* @example Complete text as users navigate suggestions
|
|
136
|
+
* // Keep the same input and popup composition; only change Root configuration.
|
|
137
|
+
* ;<Autocomplete.Root items={groups} mode="both" autoHighlight>
|
|
138
|
+
* {
|
|
139
|
+
* // Rest of components here
|
|
140
|
+
* }
|
|
141
|
+
* </Autocomplete.Root>
|
|
142
|
+
*
|
|
143
|
+
* @example Optional asynchronous suggestions
|
|
144
|
+
* // Inside Popup, below Empty and above ScrollArea. Omit Loading for synchronous data.
|
|
145
|
+
* // For async data, keep Loading mounted and toggle only its children from request state.
|
|
146
|
+
* ;<Autocomplete.Loading>
|
|
147
|
+
* {isLoading && (
|
|
148
|
+
* <>
|
|
149
|
+
* <Autocomplete.LoadingIcon />
|
|
150
|
+
* <Autocomplete.LoadingText>Loading cities…</Autocomplete.LoadingText>
|
|
151
|
+
* </>
|
|
152
|
+
* )}
|
|
153
|
+
* </Autocomplete.Loading>
|
|
154
|
+
*
|
|
155
|
+
* @example Use a custom trigger button
|
|
156
|
+
* // Replace the AddonOpenButton in Addon; do not add a second opener beside it.
|
|
157
|
+
* // PopupOpenHandler adds behavior only. Its child owns the appearance.
|
|
158
|
+
* ;<Autocomplete.PopupOpenHandler>
|
|
159
|
+
* <button type="button" className="rounded-lg px-2">
|
|
160
|
+
* Show cities
|
|
161
|
+
* </button>
|
|
162
|
+
* </Autocomplete.PopupOpenHandler>
|
|
163
|
+
*
|
|
164
|
+
* @example Replace styling on one part
|
|
165
|
+
* // All other parts keep their imported preset styles.
|
|
166
|
+
* ;<Autocomplete.AddonOpenButton
|
|
167
|
+
* disableStyle
|
|
168
|
+
* className="rounded-full bg-blue-600 p-2"
|
|
169
|
+
* aria-label="Show suggestions"
|
|
170
|
+
* >
|
|
171
|
+
* <Autocomplete.AddonOpenButtonIcon />
|
|
172
|
+
* </Autocomplete.AddonOpenButton>
|
|
173
|
+
*/
|
|
174
|
+
export function Root({ children, id, tone = 'neutral', open, defaultOpen = false, onOpenChange, ...props }) {
|
|
175
|
+
const generatedId = useId();
|
|
176
|
+
const inputId = id ?? generatedId;
|
|
177
|
+
const [openInternalState, setOpenInternalState] = useState(defaultOpen);
|
|
178
|
+
return (_jsx(BaseAutocomplete.Root, { ...props, id: inputId, open: open, defaultOpen: defaultOpen, onOpenChange: (nextOpen, details) => {
|
|
179
|
+
onOpenChange?.(nextOpen, details);
|
|
180
|
+
if (!details.isCanceled)
|
|
181
|
+
setOpenInternalState(nextOpen);
|
|
182
|
+
}, children: _jsx(AutocompleteContext.Provider, { value: {
|
|
183
|
+
inputId,
|
|
184
|
+
open: open ?? openInternalState,
|
|
185
|
+
disabled: props.disabled ?? false,
|
|
186
|
+
readOnly: props.readOnly ?? false,
|
|
187
|
+
required: props.required ?? false,
|
|
188
|
+
}, children: _jsx(ToneProvider, { value: tone, children: children }) }) }));
|
|
189
|
+
}
|
|
190
|
+
/** Use for the standard stacked layout, or omit when supplying your own layout. */
|
|
191
|
+
export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
|
|
192
|
+
return (_jsx("div", { ...props, ref: ref, "data-component": "autocomplete-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
193
|
+
});
|
|
194
|
+
/** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
|
|
195
|
+
export const Label = forwardRef(function Label({ disableStyle, className, ...props }, ref) {
|
|
196
|
+
const { inputId } = useAutocompleteContext();
|
|
197
|
+
const attributes = usePartAttributes();
|
|
198
|
+
return (_jsx("label", { ...attributes, ...props, ref: ref, htmlFor: inputId, "data-component": "autocomplete-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
199
|
+
});
|
|
200
|
+
/** Let the input handle suggestion filtering and completion. It accepts free text; choosing a suggestion is optional. Label association is automatic. */
|
|
201
|
+
export const Input = forwardRef(function Input({ disableStyle, className, ...props }, ref) {
|
|
202
|
+
const { inputId } = useAutocompleteContext();
|
|
203
|
+
return (_jsx(BaseAutocomplete.Input, { ...props, ref: ref, id: inputId, "data-component": "autocomplete-input", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
204
|
+
});
|
|
205
|
+
/** 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. */
|
|
206
|
+
export const Value = BaseAutocomplete.Value;
|
|
207
|
+
/** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
|
|
208
|
+
export const ScrollArea = forwardRef(function ScrollArea({ disableStyle, className, style, ...props }, ref) {
|
|
209
|
+
return (_jsx(BaseAutocomplete.List, { ...props, ref: ref, style: style, "data-component": "autocomplete-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
210
|
+
});
|
|
211
|
+
/** 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. */
|
|
212
|
+
export function GroupsList({ disableStyle, children, className, style, ...props }) {
|
|
213
|
+
return (_jsx("div", { ...props, style: style, "data-component": "autocomplete-groupslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? (_jsx(BaseAutocomplete.Collection, { children: children })) : (children) }));
|
|
214
|
+
}
|
|
215
|
+
/** 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. */
|
|
216
|
+
export function ItemsList({ disableStyle, children, className, ...props }) {
|
|
217
|
+
return (_jsx("div", { ...props, "data-component": "autocomplete-itemslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? (_jsx(BaseAutocomplete.Collection, { children: children })) : (children) }));
|
|
218
|
+
}
|
|
219
|
+
/** 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. */
|
|
220
|
+
export function Group({ disableStyle, className, ...props }) {
|
|
221
|
+
return (_jsx(BaseAutocomplete.Group, { ...props, "data-component": "autocomplete-group", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
222
|
+
}
|
|
223
|
+
/** Required suggestion inside ItemsList. Let it fill the input when chosen; do not implement a duplicate click handler. Keep ItemText inside. */
|
|
224
|
+
export function Item({ disableStyle, className, ...props }) {
|
|
225
|
+
return (_jsx(BaseAutocomplete.Item, { ...props, "data-component": "autocomplete-item", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
226
|
+
}
|
|
227
|
+
/** 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. */
|
|
228
|
+
export function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side = 'bottom', sideOffset = 5, align = 'start', alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }) {
|
|
229
|
+
const baseStyle = {
|
|
230
|
+
maxHeight: 'var(--available-height)',
|
|
231
|
+
minWidth: 'var(--anchor-width)',
|
|
232
|
+
};
|
|
233
|
+
return (_jsx(BaseAutocomplete.Portal, { container: container, keepMounted: keepMounted, children: _jsx(BaseAutocomplete.Positioner, { anchor: anchor, positionMethod: positionMethod, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, sticky: sticky, arrowPadding: arrowPadding, disableAnchorTracking: disableAnchorTracking, collisionAvoidance: collisionAvoidance, style: { zIndex: 80, maxWidth: 'var(--available-width)' }, children: _jsx(BaseAutocomplete.Popup, { ...props, "data-component": "autocomplete-popup", "data-style-disabled": disableStyle ? '' : undefined, className: className, style: typeof style === 'function'
|
|
234
|
+
? (state) => ({ ...baseStyle, ...style(state) })
|
|
235
|
+
: { ...baseStyle, ...style } }) }) }));
|
|
236
|
+
}
|
|
237
|
+
/** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
|
|
238
|
+
export const Arrow = forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
|
|
239
|
+
return (_jsxs(BaseAutocomplete.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "autocomplete-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "autocomplete-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "autocomplete-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "autocomplete-arrow-3" })] }));
|
|
240
|
+
});
|
|
241
|
+
/** 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. */
|
|
242
|
+
export const PopupOpenHandler = forwardRef(function PopupOpenHandler({ children, ...props }, ref) {
|
|
243
|
+
return _jsx(BaseAutocomplete.Trigger, { ...props, ref: ref, render: children });
|
|
244
|
+
});
|
|
245
|
+
/** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
|
|
246
|
+
export const Addon = forwardRef(function Addon({ disableStyle, variant = 'normal', className, ...props }, ref) {
|
|
247
|
+
return (_jsx("div", { ...props, ref: ref, "data-variant": variant, "data-component": "autocomplete-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
248
|
+
});
|
|
249
|
+
/** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
|
|
250
|
+
export const AddonIcon = forwardRef(function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ...props }, ref) {
|
|
251
|
+
const attributes = usePartAttributes();
|
|
252
|
+
return cloneElement(children, {
|
|
253
|
+
...attributes,
|
|
254
|
+
...props,
|
|
255
|
+
ref,
|
|
256
|
+
strokeWidth,
|
|
257
|
+
'aria-hidden': true,
|
|
258
|
+
'data-component': 'autocomplete-addonicon',
|
|
259
|
+
'data-style-disabled': disableStyle ? '' : undefined,
|
|
260
|
+
className: twMerge(children.props.className, className),
|
|
261
|
+
});
|
|
262
|
+
});
|
|
263
|
+
/** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
|
|
264
|
+
export const AddonButton = forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
|
|
265
|
+
const context = useAutocompleteContext();
|
|
266
|
+
const attributes = usePartAttributes();
|
|
267
|
+
return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "autocomplete-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
268
|
+
});
|
|
269
|
+
/** Use Input with optional Addon controls inside. An opener is optional for typing-driven suggestions. Root tone changes appearance only. */
|
|
270
|
+
export const InputGroup = forwardRef(function InputGroup({ disableStyle, className, ...props }, ref) {
|
|
271
|
+
const tone = useToneContext();
|
|
272
|
+
return (_jsx(BaseAutocomplete.InputGroup, { "data-tone": tone, ...props, ref: ref, "data-component": "autocomplete-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
273
|
+
});
|
|
274
|
+
/** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
|
|
275
|
+
export const AddonOpenButton = forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
|
|
276
|
+
return (_jsx(BaseAutocomplete.Trigger, { ...props, ref: ref, "data-component": "autocomplete-addonopenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
277
|
+
});
|
|
278
|
+
/** Clears the input automatically; no click handler needed. Supply AddonClearButtonIcon and an accessible label. */
|
|
279
|
+
export const AddonClearButton = forwardRef(function AddonClearButton({ disableStyle, className, ...props }, ref) {
|
|
280
|
+
return (_jsx(BaseAutocomplete.Clear, { ...props, ref: ref, "data-component": "autocomplete-addonclearbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
281
|
+
});
|
|
282
|
+
/** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
|
|
283
|
+
export const GroupLabel = forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
|
|
284
|
+
return (_jsx(BaseAutocomplete.GroupLabel, { ...props, ref: ref, "data-component": "autocomplete-grouplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
285
|
+
});
|
|
286
|
+
/** 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. */
|
|
287
|
+
export const Empty = forwardRef(function Empty({ disableStyle, className, ...props }, ref) {
|
|
288
|
+
return (_jsx(BaseAutocomplete.Empty, { ...props, ref: ref, "data-component": "autocomplete-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
289
|
+
});
|
|
290
|
+
/** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
|
|
291
|
+
export const Separator = forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
|
|
292
|
+
return (_jsx(BaseAutocomplete.Separator, { ...props, ref: ref, "data-component": "autocomplete-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
293
|
+
});
|
|
294
|
+
/** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
|
|
295
|
+
export const ItemText = forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
|
|
296
|
+
const attributes = usePartAttributes();
|
|
297
|
+
return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
298
|
+
});
|
|
299
|
+
/** Optional decorative text inside Addon. Supply the text as children. */
|
|
300
|
+
export const AddonText = forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
|
|
301
|
+
const attributes = usePartAttributes();
|
|
302
|
+
return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
303
|
+
});
|
|
304
|
+
/** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
|
|
305
|
+
export const EmptyText = forwardRef(function EmptyText({ disableStyle, className, ...props }, ref) {
|
|
306
|
+
const attributes = usePartAttributes();
|
|
307
|
+
return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-emptytext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
308
|
+
});
|
|
309
|
+
/** 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. */
|
|
310
|
+
export const Description = forwardRef(function Description({ disableStyle, className, ...props }, ref) {
|
|
311
|
+
const attributes = usePartAttributes();
|
|
312
|
+
return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "autocomplete-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
313
|
+
});
|
|
314
|
+
/** Optional alert message. You control when it is rendered and its contents; tone does not validate or show this message automatically. */
|
|
315
|
+
export const Error = forwardRef(function Error({ disableStyle, className, ...props }, ref) {
|
|
316
|
+
const attributes = usePartAttributes();
|
|
317
|
+
return (_jsx("div", { role: "alert", "aria-atomic": "true", ...attributes, ...props, ref: ref, "data-component": "autocomplete-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
318
|
+
});
|
|
319
|
+
/** Optional success status. You control when it is rendered and its contents; tone does not show this message automatically. */
|
|
320
|
+
export const Success = forwardRef(function Success({ disableStyle, className, ...props }, ref) {
|
|
321
|
+
const attributes = usePartAttributes();
|
|
322
|
+
return (_jsx("div", { role: "status", "aria-atomic": "true", ...attributes, ...props, ref: ref, "data-component": "autocomplete-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
323
|
+
});
|
|
324
|
+
/** Built-in decorative open-button icon. Place inside AddonOpenButton; no children needed. Defaults to strokeWidth 1.5. */
|
|
325
|
+
export const AddonOpenButtonIcon = forwardRef(function AddonOpenButtonIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
|
|
326
|
+
const attributes = usePartAttributes();
|
|
327
|
+
return (_jsx(ChevronsUpDown, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "autocomplete-addonopenbuttonicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
328
|
+
});
|
|
329
|
+
/** Built-in decorative clear icon. Place inside AddonClearButton; no children needed. Defaults to strokeWidth 1.5. */
|
|
330
|
+
export const AddonClearButtonIcon = forwardRef(function AddonClearButtonIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
|
|
331
|
+
const attributes = usePartAttributes();
|
|
332
|
+
return (_jsx(X, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "autocomplete-addonclearbuttonicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
333
|
+
});
|
|
334
|
+
/** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
|
|
335
|
+
export const AddonLoadingIcon = forwardRef(function AddonLoadingIcon({ disableStyle, className, strokeWidth = 1.5, ...props }, ref) {
|
|
336
|
+
const attributes = usePartAttributes();
|
|
337
|
+
return (_jsx(LoaderCircle, { ...attributes, "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "autocomplete-addonloadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
338
|
+
});
|
|
339
|
+
/** 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. */
|
|
340
|
+
export const Loading = forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
|
|
341
|
+
return (_jsx(BaseAutocomplete.Status, { ...props, ref: ref, "data-component": "autocomplete-loading", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
342
|
+
});
|
|
343
|
+
/** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
|
|
344
|
+
export const LoadingText = forwardRef(function LoadingText({ disableStyle, className, ...props }, ref) {
|
|
345
|
+
return (_jsx("div", { ...props, ref: ref, "data-component": "autocomplete-loadingtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
346
|
+
});
|
|
347
|
+
/** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
|
|
348
|
+
export const LoadingIcon = forwardRef(function LoadingIcon({ disableStyle, className, ...props }, ref) {
|
|
349
|
+
return (_jsx(LoaderCircle, { "aria-hidden": true, strokeWidth: undefined, ...props, ref: ref, "data-component": "autocomplete-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
350
|
+
});
|
|
351
|
+
const AutocompleteContext = createContext(null);
|
|
352
|
+
function useAutocompleteContext() {
|
|
353
|
+
const context = useContext(AutocompleteContext);
|
|
354
|
+
if (!context)
|
|
355
|
+
throw new globalThis.Error('Autocomplete parts must be inside Autocomplete.Root');
|
|
356
|
+
return context;
|
|
357
|
+
}
|
|
358
|
+
function usePartAttributes() {
|
|
359
|
+
const { open, disabled, readOnly, required } = useAutocompleteContext();
|
|
360
|
+
const tone = useToneContext();
|
|
361
|
+
return {
|
|
362
|
+
'data-open': open ? '' : undefined,
|
|
363
|
+
'data-disabled': disabled ? '' : undefined,
|
|
364
|
+
'data-readonly': readOnly ? '' : undefined,
|
|
365
|
+
'data-required': required ? '' : undefined,
|
|
366
|
+
'data-tone': tone,
|
|
367
|
+
};
|
|
368
|
+
}
|
|
369
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/autocomplete/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import type { StyleProps } from '../../types/Style.ts';
|
|
2
|
+
import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
|
|
3
|
+
export type RootProps = Omit<BaseAvatar.Root.Props, 'render' | 'className'> & {
|
|
4
|
+
/** Choose the shared size for the visible parts in this composition. */
|
|
5
|
+
size?: 'big' | 'medium' | 'small';
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Root supplies sizing and image/fallback coordination. Image loading chooses the fallback automatically; do not implement your own image-error state. Choose initials or an image fallback.
|
|
9
|
+
*
|
|
10
|
+
* @example Complete composition
|
|
11
|
+
* import { Avatar } from '@central-ui/react'
|
|
12
|
+
*
|
|
13
|
+
* function Example() {
|
|
14
|
+
* return (
|
|
15
|
+
* <Avatar.Root size="big">
|
|
16
|
+
* <Avatar.Image src="/missing-avatar.jpg" alt="Alex Morgan" />
|
|
17
|
+
* <Avatar.FallbackNameInitials color="#bfdbfe">
|
|
18
|
+
* Alex Morgan
|
|
19
|
+
* </Avatar.FallbackNameInitials>
|
|
20
|
+
* </Avatar.Root>
|
|
21
|
+
* )
|
|
22
|
+
* }
|
|
23
|
+
*
|
|
24
|
+
* @example Show several people in an overlapping list
|
|
25
|
+
* // List is optional; each person still has an independent Root.
|
|
26
|
+
* ;<Avatar.List>
|
|
27
|
+
* <Avatar.Root>
|
|
28
|
+
* <Avatar.FallbackNameInitials color="#dbeafe">Alex Morgan</Avatar.FallbackNameInitials>
|
|
29
|
+
* </Avatar.Root>
|
|
30
|
+
* <Avatar.Root>
|
|
31
|
+
* <Avatar.FallbackNameInitials color="#dcfce7">Sam Lee</Avatar.FallbackNameInitials>
|
|
32
|
+
* </Avatar.Root>
|
|
33
|
+
* </Avatar.List>
|
|
34
|
+
*/
|
|
35
|
+
export declare function Root({ children, size, ...props }: RootProps): import("react").JSX.Element;
|
|
36
|
+
export declare const List: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
37
|
+
export declare const Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarImageProps, "className"> & {
|
|
38
|
+
className?: string;
|
|
39
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
|
|
40
|
+
export declare const FallbackNameInitials: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AvatarFallbackProps, "children" | "className"> & {
|
|
41
|
+
className?: string;
|
|
42
|
+
/** Choose the initials background. The name-to-initials conversion is automatic. */
|
|
43
|
+
color: string;
|
|
44
|
+
/** Pass the full name; initials are derived automatically. Do not shorten it yourself. */
|
|
45
|
+
children: string;
|
|
46
|
+
} & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
|
|
47
|
+
export declare const FallbackImage: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & Pick<import("@base-ui/react").AvatarFallbackProps, "delay"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
|
|
48
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAK5D,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,WAAW,CAAC,GAAG;IAC5E,wEAAwE;IACxE,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAA;CAClC,CAAA;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAYtE;AACD,eAAO,MAAM,IAAI,uNAaf,CAAA;AAEF,eAAO,MAAM,KAAK;gBAE2C,MAAM;yEAcjE,CAAA;AACF,eAAO,MAAM,oBAAoB;gBAGjB,MAAM;IAClB,oFAAoF;WAC7E,MAAM;IACb,0FAA0F;cAChF,MAAM;wEAiClB,CAAA;AACF,eAAO,MAAM,aAAa,8RAgBxB,CAAA"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
|
|
3
|
+
import { createContext, forwardRef, useContext } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Root supplies sizing and image/fallback coordination. Image loading chooses the fallback automatically; do not implement your own image-error state. Choose initials or an image fallback.
|
|
6
|
+
*
|
|
7
|
+
* @example Complete composition
|
|
8
|
+
* import { Avatar } from '@central-ui/react'
|
|
9
|
+
*
|
|
10
|
+
* function Example() {
|
|
11
|
+
* return (
|
|
12
|
+
* <Avatar.Root size="big">
|
|
13
|
+
* <Avatar.Image src="/missing-avatar.jpg" alt="Alex Morgan" />
|
|
14
|
+
* <Avatar.FallbackNameInitials color="#bfdbfe">
|
|
15
|
+
* Alex Morgan
|
|
16
|
+
* </Avatar.FallbackNameInitials>
|
|
17
|
+
* </Avatar.Root>
|
|
18
|
+
* )
|
|
19
|
+
* }
|
|
20
|
+
*
|
|
21
|
+
* @example Show several people in an overlapping list
|
|
22
|
+
* // List is optional; each person still has an independent Root.
|
|
23
|
+
* ;<Avatar.List>
|
|
24
|
+
* <Avatar.Root>
|
|
25
|
+
* <Avatar.FallbackNameInitials color="#dbeafe">Alex Morgan</Avatar.FallbackNameInitials>
|
|
26
|
+
* </Avatar.Root>
|
|
27
|
+
* <Avatar.Root>
|
|
28
|
+
* <Avatar.FallbackNameInitials color="#dcfce7">Sam Lee</Avatar.FallbackNameInitials>
|
|
29
|
+
* </Avatar.Root>
|
|
30
|
+
* </Avatar.List>
|
|
31
|
+
*/
|
|
32
|
+
export function Root({ children, size = 'medium', ...props }) {
|
|
33
|
+
// Native Root renders a span; the fragment preserves our wrapper-free Root contract.
|
|
34
|
+
return (_jsx(SizeContext.Provider, { value: size, children: _jsx(BaseAvatar.Root, { ...props, render: (rootProps) => _jsx(_Fragment, { children: rootProps.children }), children: children }) }));
|
|
35
|
+
}
|
|
36
|
+
export const List = forwardRef(function List({ disableStyle, className, ...props }, ref) {
|
|
37
|
+
return (_jsx("div", { ...props, ref: ref, "data-component": "avatar-list", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
38
|
+
});
|
|
39
|
+
export const Image = forwardRef(function Image({ disableStyle, className, ...props }, ref) {
|
|
40
|
+
const size = useContext(SizeContext);
|
|
41
|
+
return (_jsx(BaseAvatar.Image, { ...props, ref: ref, "data-size": size, "data-component": "avatar-image", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
42
|
+
});
|
|
43
|
+
export const FallbackNameInitials = forwardRef(function FallbackNameInitials({ disableStyle, color, children, className, style, ...props }, ref) {
|
|
44
|
+
const size = useContext(SizeContext);
|
|
45
|
+
return (_jsx(BaseAvatar.Fallback, { ...props, ref: ref, "data-size": size, role: "img", "aria-label": children, style: typeof style === 'function'
|
|
46
|
+
? (state) => ({ backgroundColor: color, ...style(state) })
|
|
47
|
+
: { backgroundColor: color, ...style }, "data-component": "avatar-fallbacknameinitials", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: children
|
|
48
|
+
.trim()
|
|
49
|
+
.split(/\s+/)
|
|
50
|
+
.filter(Boolean)
|
|
51
|
+
.map((word) => word[0].toUpperCase())
|
|
52
|
+
.join('')
|
|
53
|
+
.slice(0, 2) }));
|
|
54
|
+
});
|
|
55
|
+
export const FallbackImage = forwardRef(function FallbackImage({ disableStyle, className, delay, ...props }, ref) {
|
|
56
|
+
const size = useContext(SizeContext);
|
|
57
|
+
return (_jsx(BaseAvatar.Fallback, { delay: delay, render: _jsx("img", { ...props, ref: ref }), "data-size": size, "data-component": "avatar-fallbackimage", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
58
|
+
});
|
|
59
|
+
const SizeContext = createContext('medium');
|
|
60
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/avatar/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAQ7D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,GAAG,KAAK,EAAa;IACrE,qFAAqF;IACrF,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,YAC/B,KAAC,UAAU,CAAC,IAAI,OACV,KAAK,EACT,MAAM,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,4BAAG,SAAS,CAAC,QAAQ,GAAI,YAE/C,QAAQ,GACO,GACG,CACxB,CAAA;AACH,CAAC;AACD,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAG5B,SAAS,IAAI,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IACxD,OAAO,CACL,iBACM,KAAK,EACT,GAAG,EAAE,GAAG,oBACO,aAAa,yBACP,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAI7B,SAAS,KAAK,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IACzD,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACpC,OAAO,CACL,KAAC,UAAU,CAAC,KAAK,OACX,KAAK,EACT,GAAG,EAAE,GAAG,eACG,IAAI,oBACA,cAAc,yBACR,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAU5C,SAAS,oBAAoB,CAC7B,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAC7D,GAAG;IAEH,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACpC,OAAO,CACL,KAAC,UAAU,CAAC,QAAQ,OACd,KAAK,EACT,GAAG,EAAE,GAAG,eACG,IAAI,EACf,IAAI,EAAC,KAAK,gBACE,QAAQ,EACpB,KAAK,EACH,OAAO,KAAK,KAAK,UAAU;YACzB,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;YAC1D,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,oBAE3B,6BAA6B,yBACvB,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,YAEnB,QAAQ;aACN,IAAI,EAAE;aACN,KAAK,CAAC,KAAK,CAAC;aACZ,MAAM,CAAC,OAAO,CAAC;aACf,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;aACpC,IAAI,CAAC,EAAE,CAAC;aACR,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GACM,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CAIrC,SAAS,aAAa,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IACxE,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IACpC,OAAO,CACL,KAAC,UAAU,CAAC,QAAQ,IAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,iBAAS,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,eACzB,IAAI,oBACA,sBAAsB,yBAChB,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,MAAM,WAAW,GAAG,aAAa,CAAiC,QAAQ,CAAC,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { StyleProps } from '../../types/Style.ts';
|
|
2
|
+
import type { ComponentProps, HTMLAttributes, ReactElement } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Use the default export for a compact status label. Tone chooses the status appearance; put an optional Icon beside the text.
|
|
5
|
+
*
|
|
6
|
+
* @example Complete composition
|
|
7
|
+
* import { Badge } from '@central-ui/react'
|
|
8
|
+
*
|
|
9
|
+
* function Example() {
|
|
10
|
+
* return (
|
|
11
|
+
* <div className="flex flex-wrap gap-2">
|
|
12
|
+
* <Badge.default tone="neutral">Draft</Badge.default>
|
|
13
|
+
* <Badge.default tone="success">Active</Badge.default>
|
|
14
|
+
* <Badge.default tone="caution">Pending</Badge.default>
|
|
15
|
+
* <Badge.default tone="danger">Failed</Badge.default>
|
|
16
|
+
* </div>
|
|
17
|
+
* )
|
|
18
|
+
* }
|
|
19
|
+
*/
|
|
20
|
+
export default function Badge({ disableStyle, className, tone, ...props }: (HTMLAttributes<HTMLDivElement> & {
|
|
21
|
+
/** Choose the visual tone. This does not validate data or show/hide feedback messages. */
|
|
22
|
+
tone: 'neutral' | 'informative' | 'success' | 'danger' | 'caution';
|
|
23
|
+
}) & StyleProps): import("react").JSX.Element;
|
|
24
|
+
/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
|
|
25
|
+
export declare function Icon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
|
|
26
|
+
/** Supply the decorative icon; the wrapper forwards the relevant state and preserves its classes. */
|
|
27
|
+
children: ReactElement<ComponentProps<'svg'>>;
|
|
28
|
+
}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
|
|
29
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAIzE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACnC,0FAA0F;IAC1F,IAAI,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;CACnE,CAAC,GACA,UAAU,+BAUX;AAED,wHAAwH;AACxH,wBAAgB,IAAI,CAAC,EACnB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5C,qGAAqG;IACrG,QAAQ,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;CAC9C,CAAC,GACA,UAAU,8GAUX"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cloneElement } from 'react';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
/**
|
|
5
|
+
* Use the default export for a compact status label. Tone chooses the status appearance; put an optional Icon beside the text.
|
|
6
|
+
*
|
|
7
|
+
* @example Complete composition
|
|
8
|
+
* import { Badge } from '@central-ui/react'
|
|
9
|
+
*
|
|
10
|
+
* function Example() {
|
|
11
|
+
* return (
|
|
12
|
+
* <div className="flex flex-wrap gap-2">
|
|
13
|
+
* <Badge.default tone="neutral">Draft</Badge.default>
|
|
14
|
+
* <Badge.default tone="success">Active</Badge.default>
|
|
15
|
+
* <Badge.default tone="caution">Pending</Badge.default>
|
|
16
|
+
* <Badge.default tone="danger">Failed</Badge.default>
|
|
17
|
+
* </div>
|
|
18
|
+
* )
|
|
19
|
+
* }
|
|
20
|
+
*/
|
|
21
|
+
export default function Badge({ disableStyle, className, tone, ...props }) {
|
|
22
|
+
return (_jsx("div", { "data-tone": tone, "data-component": "badge-badge", "data-style-disabled": disableStyle ? '' : undefined, className: className, ...props }));
|
|
23
|
+
}
|
|
24
|
+
/** Supply the decorative icon as a child. Its classes are preserved; interaction belongs to the surrounding control. */
|
|
25
|
+
export function Icon({ disableStyle, children, className, ...props }) {
|
|
26
|
+
return cloneElement(children, {
|
|
27
|
+
...children.props,
|
|
28
|
+
...props,
|
|
29
|
+
...{
|
|
30
|
+
'data-component': 'badge-icon',
|
|
31
|
+
'data-style-disabled': disableStyle ? '' : undefined,
|
|
32
|
+
},
|
|
33
|
+
className: twMerge(children.props.className, className),
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/badge/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EAKE;IACV,OAAO,CACL,2BACa,IAAI,oBACA,aAAa,yBACP,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED,wHAAwH;AACxH,MAAM,UAAU,IAAI,CAAC,EACnB,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EAKE;IACV,OAAO,YAAY,CAAC,QAAQ,EAAE;QAC5B,GAAG,QAAQ,CAAC,KAAK;QACjB,GAAG,KAAK;QACR,GAAG;YACD,gBAAgB,EAAE,YAAY;YAC9B,qBAAqB,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;SACrD;QACD,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC;KACxD,CAAC,CAAA;AACJ,CAAC"}
|