@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
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
|
|
3
|
+
import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
|
|
4
|
+
import { createContext, forwardRef, useContext, useEffect, useId, useState, } from 'react';
|
|
5
|
+
import { Check, Minus } from 'lucide-react';
|
|
6
|
+
import { ToneProvider, useToneContext } from "../../utils/Tone.js";
|
|
7
|
+
/**
|
|
8
|
+
* Keep Button and Indicator inside the same Root as Label. Indicator tracks checked and indeterminate state automatically; no conditional checkmark needed. Use CheckboxGroup only when coordinating several checkbox roots.
|
|
9
|
+
*
|
|
10
|
+
* @example Complete composition
|
|
11
|
+
* import { Checkbox } from '@central-ui/react'
|
|
12
|
+
*
|
|
13
|
+
* function Example() {
|
|
14
|
+
* return (
|
|
15
|
+
* <Checkbox.Root name="terms" value="accepted">
|
|
16
|
+
* <Checkbox.Container>
|
|
17
|
+
* <Checkbox.Button>
|
|
18
|
+
* <Checkbox.Indicator />
|
|
19
|
+
* </Checkbox.Button>
|
|
20
|
+
* <Checkbox.Label>Accept the terms</Checkbox.Label>
|
|
21
|
+
* <Checkbox.Description>Required to continue.</Checkbox.Description>
|
|
22
|
+
* </Checkbox.Container>
|
|
23
|
+
* </Checkbox.Root>
|
|
24
|
+
* )
|
|
25
|
+
* }
|
|
26
|
+
*
|
|
27
|
+
* @example Control acceptance in application state
|
|
28
|
+
* import { useState } from 'react'
|
|
29
|
+
* function ControlledExample() {
|
|
30
|
+
* const [checked, setChecked] = useState(false)
|
|
31
|
+
* return (
|
|
32
|
+
* <Checkbox.Root checked={checked} onCheckedChange={setChecked}>
|
|
33
|
+
* <Checkbox.Container>
|
|
34
|
+
* {
|
|
35
|
+
* // Rest of components here
|
|
36
|
+
* }
|
|
37
|
+
* </Checkbox.Container>
|
|
38
|
+
* </Checkbox.Root>
|
|
39
|
+
* )
|
|
40
|
+
* }
|
|
41
|
+
*/
|
|
42
|
+
export function Root({ children, id, tone = 'neutral', ...coreProps }) {
|
|
43
|
+
const generatedId = useId();
|
|
44
|
+
const [messageIds, setMessageIds] = useState([]);
|
|
45
|
+
const [state, setState] = useState({
|
|
46
|
+
checked: coreProps.checked ?? coreProps.defaultChecked ?? false,
|
|
47
|
+
indeterminate: coreProps.indeterminate ?? false,
|
|
48
|
+
disabled: coreProps.disabled ?? false,
|
|
49
|
+
readOnly: coreProps.readOnly ?? false,
|
|
50
|
+
required: coreProps.required ?? false,
|
|
51
|
+
});
|
|
52
|
+
return (_jsx(CheckboxContext.Provider, { value: {
|
|
53
|
+
coreProps: { ...coreProps, id: id ?? generatedId },
|
|
54
|
+
state,
|
|
55
|
+
setState,
|
|
56
|
+
messageIds,
|
|
57
|
+
setMessageIds,
|
|
58
|
+
}, children: _jsx(ToneProvider, { value: tone, children: children }) }));
|
|
59
|
+
}
|
|
60
|
+
/** Optional: controls multiple checkboxes as a native array of checked values. Put individual Roots inside and give each child a value. For a select-all checkbox, use parent on its Root and provide allValues on this controlled group; Base UI derives checked and indeterminate automatically. */
|
|
61
|
+
export const CheckboxGroup = forwardRef(function CheckboxGroup({ disableStyle, className, ...props }, ref) {
|
|
62
|
+
return (_jsx(BaseCheckboxGroup, { ...props, ref: ref, "data-component": "checkbox-checkboxgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
63
|
+
});
|
|
64
|
+
export const Container = forwardRef(function Container({ disableStyle, className, ...props }, ref) {
|
|
65
|
+
return (_jsx("div", { ...props, ref: ref, "data-component": "checkbox-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
66
|
+
});
|
|
67
|
+
export const Button = forwardRef(function Button({ disableStyle, className, ...props }, ref) {
|
|
68
|
+
const context = useCheckboxContext();
|
|
69
|
+
const tone = useToneContext();
|
|
70
|
+
return (_jsx(BaseCheckbox.Root, { ...props, ...context.coreProps, ref: ref, "data-tone": tone, "aria-invalid": tone === 'invalid' || props['aria-invalid'] || undefined, "aria-describedby": [props['aria-describedby'], ...context.messageIds]
|
|
71
|
+
.filter(Boolean)
|
|
72
|
+
.join(' ') || undefined, "data-component": "checkbox-button", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (buttonProps, state) => (_jsx(CheckboxButtonSurface, { ...buttonProps, state: state })) }));
|
|
73
|
+
});
|
|
74
|
+
/** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
|
|
75
|
+
export const Indicator = forwardRef(function Indicator({ disableStyle, className, ...props }, ref) {
|
|
76
|
+
return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, "data-component": "checkbox-indicator", "data-style-disabled": disableStyle ? '' : undefined, className: className, render: (indicatorProps, state) => (_jsx("span", { ...indicatorProps, children: state.indeterminate ? (_jsx(Minus, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-1" })) : state.checked ? (_jsx(Check, { "aria-hidden": true, strokeWidth: 3.5, "data-component": "checkbox-indicator-2" })) : null })) }));
|
|
77
|
+
});
|
|
78
|
+
/** Labels the associated control automatically. Supply the visible text; do not wire a second label association. */
|
|
79
|
+
export const Label = forwardRef(function Label({ disableStyle, className, ...props }, ref) {
|
|
80
|
+
const context = useCheckboxContext();
|
|
81
|
+
return (_jsx("label", { ...usePartAttributes(), ...props, ref: ref, htmlFor: context.coreProps.id, "data-component": "checkbox-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
82
|
+
});
|
|
83
|
+
export const Description = forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
|
|
84
|
+
const messageId = useMessageId(id);
|
|
85
|
+
return (_jsx("span", { ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
86
|
+
});
|
|
87
|
+
/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
|
|
88
|
+
export const Error = forwardRef(function Error({ disableStyle, className, id, ...props }, ref) {
|
|
89
|
+
const messageId = useMessageId(id);
|
|
90
|
+
return (_jsx("span", { role: "alert", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-error", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
91
|
+
});
|
|
92
|
+
/** You decide when to show this feedback. Changing tone does not validate data or render the message for you. */
|
|
93
|
+
export const Success = forwardRef(function Success({ disableStyle, className, id, ...props }, ref) {
|
|
94
|
+
const messageId = useMessageId(id);
|
|
95
|
+
return (_jsx("span", { role: "status", "aria-atomic": "true", ...usePartAttributes(), ...props, ref: ref, id: messageId, "data-component": "checkbox-success", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
96
|
+
});
|
|
97
|
+
const CheckboxContext = createContext(null);
|
|
98
|
+
function useCheckboxContext() {
|
|
99
|
+
const context = useContext(CheckboxContext);
|
|
100
|
+
if (!context)
|
|
101
|
+
throw new globalThis.Error('Checkbox parts must be inside Checkbox.Root');
|
|
102
|
+
return context;
|
|
103
|
+
}
|
|
104
|
+
function usePartAttributes() {
|
|
105
|
+
const { state } = useCheckboxContext();
|
|
106
|
+
const tone = useToneContext();
|
|
107
|
+
return {
|
|
108
|
+
'data-checked': state.checked ? '' : undefined,
|
|
109
|
+
'data-indeterminate': state.indeterminate ? '' : undefined,
|
|
110
|
+
'data-disabled': state.disabled ? '' : undefined,
|
|
111
|
+
'data-readonly': state.readOnly ? '' : undefined,
|
|
112
|
+
'data-required': state.required ? '' : undefined,
|
|
113
|
+
'data-tone': tone,
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
const CheckboxButtonSurface = forwardRef(function CheckboxButtonSurface({ state, ...props }, ref) {
|
|
117
|
+
const { setState } = useCheckboxContext();
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
setState({
|
|
120
|
+
checked: state.checked,
|
|
121
|
+
indeterminate: state.indeterminate,
|
|
122
|
+
disabled: state.disabled,
|
|
123
|
+
readOnly: state.readOnly,
|
|
124
|
+
required: state.required,
|
|
125
|
+
});
|
|
126
|
+
}, [
|
|
127
|
+
state.checked,
|
|
128
|
+
state.indeterminate,
|
|
129
|
+
state.disabled,
|
|
130
|
+
state.readOnly,
|
|
131
|
+
state.required,
|
|
132
|
+
setState,
|
|
133
|
+
]);
|
|
134
|
+
return _jsx("span", { ...props, ref: ref });
|
|
135
|
+
});
|
|
136
|
+
function useMessageId(id) {
|
|
137
|
+
const generatedId = useId();
|
|
138
|
+
const messageId = id ?? generatedId;
|
|
139
|
+
const { setMessageIds } = useCheckboxContext();
|
|
140
|
+
useEffect(() => {
|
|
141
|
+
setMessageIds((current) => [...current, messageId]);
|
|
142
|
+
return () => setMessageIds((current) => current.filter((value) => value !== messageId));
|
|
143
|
+
}, [messageId, setMessageIds]);
|
|
144
|
+
return messageId;
|
|
145
|
+
}
|
|
146
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { StyleProps } from '../../types/Style.ts';
|
|
2
|
+
import type { ComponentProps, ReactElement } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Use Chip for a compact, non-interactive label. Only CloseButton has built-in interaction styling. Add CloseButton only when removal is supported; your callback decides what to remove from application data.
|
|
5
|
+
*
|
|
6
|
+
* @example Complete composition
|
|
7
|
+
* import { Chip } from '@central-ui/react'
|
|
8
|
+
*
|
|
9
|
+
* function Example() {
|
|
10
|
+
* return (
|
|
11
|
+
* <div className="flex flex-wrap gap-2">
|
|
12
|
+
* <Chip.Chip>Design system</Chip.Chip>
|
|
13
|
+
* <Chip.Chip>React</Chip.Chip>
|
|
14
|
+
* <Chip.Chip>Accessibility</Chip.Chip>
|
|
15
|
+
* </div>
|
|
16
|
+
* )
|
|
17
|
+
* }
|
|
18
|
+
*/
|
|
19
|
+
export declare function Chip({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
|
|
20
|
+
export declare function CloseButton({ disableStyle, type, className, ...props }: ComponentProps<'button'> & StyleProps): import("react").JSX.Element;
|
|
21
|
+
/** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
|
|
22
|
+
export declare function CloseButtonIcon({ disableStyle, children, className, ...props }: (Omit<ComponentProps<'svg'>, 'children'> & {
|
|
23
|
+
/** Omit for the supplied default icon; pass a child only to replace it. */
|
|
24
|
+
children?: ReactElement<ComponentProps<'svg'>>;
|
|
25
|
+
}) & StyleProps): ReactElement<import("react").SVGProps<SVGSVGElement>, string | import("react").JSXElementConstructor<any>>;
|
|
26
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAIzD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAAC,EACnB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG,UAAU,+BASpC;AAED,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,IAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,UAAU,+BAUvC;AAED,8GAA8G;AAC9G,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,QAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5C,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;CAC/C,CAAC,GACA,UAAU,8GAWX"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { X } from 'lucide-react';
|
|
3
|
+
import { cloneElement } from 'react';
|
|
4
|
+
import { twMerge } from 'tailwind-merge';
|
|
5
|
+
/**
|
|
6
|
+
* Use Chip for a compact, non-interactive label. Only CloseButton has built-in interaction styling. Add CloseButton only when removal is supported; your callback decides what to remove from application data.
|
|
7
|
+
*
|
|
8
|
+
* @example Complete composition
|
|
9
|
+
* import { Chip } from '@central-ui/react'
|
|
10
|
+
*
|
|
11
|
+
* function Example() {
|
|
12
|
+
* return (
|
|
13
|
+
* <div className="flex flex-wrap gap-2">
|
|
14
|
+
* <Chip.Chip>Design system</Chip.Chip>
|
|
15
|
+
* <Chip.Chip>React</Chip.Chip>
|
|
16
|
+
* <Chip.Chip>Accessibility</Chip.Chip>
|
|
17
|
+
* </div>
|
|
18
|
+
* )
|
|
19
|
+
* }
|
|
20
|
+
*/
|
|
21
|
+
export function Chip({ disableStyle, className, ...props }) {
|
|
22
|
+
return (_jsx("div", { ...props, "data-component": "chip-chip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
23
|
+
}
|
|
24
|
+
export function CloseButton({ disableStyle, type = 'button', className, ...props }) {
|
|
25
|
+
return (_jsx("button", { ...props, type: type, "data-component": "chip-closebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
|
|
26
|
+
}
|
|
27
|
+
/** A default icon is supplied. Omit children for the usual case; pass an icon only to replace that visual. */
|
|
28
|
+
export function CloseButtonIcon({ disableStyle, children = _jsx(X, {}), className, ...props }) {
|
|
29
|
+
return cloneElement(children, {
|
|
30
|
+
...children.props,
|
|
31
|
+
...props,
|
|
32
|
+
...{
|
|
33
|
+
'data-component': 'chip-closebuttonicon',
|
|
34
|
+
'data-style-disabled': disableStyle ? '' : undefined,
|
|
35
|
+
},
|
|
36
|
+
className: twMerge(children.props.className, className),
|
|
37
|
+
strokeWidth: props.strokeWidth ?? children.props.strokeWidth ?? 1.5,
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/chip/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EAC2B;IACnC,OAAO,CACL,iBACM,KAAK,oBACM,WAAW,yBACL,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,YAAY,EACZ,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,GAAG,KAAK,EAC8B;IACtC,OAAO,CACL,oBACM,KAAK,EACT,IAAI,EAAE,IAAI,oBACK,kBAAkB,yBACZ,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAClD,SAAS,EAAE,SAAS,GACpB,CACH,CAAA;AACH,CAAC;AAED,8GAA8G;AAC9G,MAAM,UAAU,eAAe,CAAC,EAC9B,YAAY,EACZ,QAAQ,GAAG,KAAC,CAAC,KAAG,EAChB,SAAS,EACT,GAAG,KAAK,EAKE;IACV,OAAO,YAAY,CAAC,QAAQ,EAAE;QAC5B,GAAG,QAAQ,CAAC,KAAK;QACjB,GAAG,KAAK;QACR,GAAG;YACD,gBAAgB,EAAE,sBAAsB;YACxC,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;QACvD,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,QAAQ,CAAC,KAAK,CAAC,WAAW,IAAI,GAAG;KACpE,CAAC,CAAA;AACJ,CAAC"}
|