@cladd-ui/react 0.8.1 → 0.10.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/CHANGELOG.md +34 -0
- package/calendar/Calendar.d.ts +21 -0
- package/calendar/Calendar.d.ts.map +1 -0
- package/calendar/Calendar.js +158 -0
- package/calendar/Calendar.js.map +1 -0
- package/calendar/CalendarIcon.d.ts +2 -0
- package/calendar/CalendarIcon.d.ts.map +1 -0
- package/calendar/CalendarIcon.js +5 -0
- package/calendar/CalendarIcon.js.map +1 -0
- package/calendar/DatePicker.d.ts +91 -0
- package/calendar/DatePicker.d.ts.map +1 -0
- package/calendar/DatePicker.js +79 -0
- package/calendar/DatePicker.js.map +1 -0
- package/calendar/index.d.ts +4 -0
- package/calendar/index.d.ts.map +1 -0
- package/calendar/index.js +3 -0
- package/calendar/index.js.map +1 -0
- package/components/AccordionContext.d.ts +22 -0
- package/components/AccordionContext.d.ts.map +1 -0
- package/components/AccordionContext.js +14 -0
- package/components/AccordionContext.js.map +1 -0
- package/components/AccordionItem.d.ts +27 -0
- package/components/AccordionItem.d.ts.map +1 -0
- package/components/AccordionItem.js +36 -0
- package/components/AccordionItem.js.map +1 -0
- package/components/AccordionRoot.d.ts +47 -0
- package/components/AccordionRoot.d.ts.map +1 -0
- package/components/AccordionRoot.js +53 -0
- package/components/AccordionRoot.js.map +1 -0
- package/components/Button.js +2 -2
- package/components/Button.js.map +1 -1
- package/components/Checkbox.js +2 -2
- package/components/Checkbox.js.map +1 -1
- package/components/CollapsibleContext.d.ts +36 -0
- package/components/CollapsibleContext.d.ts.map +1 -0
- package/components/CollapsibleContext.js +24 -0
- package/components/CollapsibleContext.js.map +1 -0
- package/components/CollapsibleIndicator.d.ts +45 -0
- package/components/CollapsibleIndicator.d.ts.map +1 -0
- package/components/CollapsibleIndicator.js +34 -0
- package/components/CollapsibleIndicator.js.map +1 -0
- package/components/CollapsiblePanel.d.ts +35 -0
- package/components/CollapsiblePanel.d.ts.map +1 -0
- package/components/CollapsiblePanel.js +104 -0
- package/components/CollapsiblePanel.js.map +1 -0
- package/components/CollapsibleRoot.d.ts +35 -0
- package/components/CollapsibleRoot.d.ts.map +1 -0
- package/components/CollapsibleRoot.js +43 -0
- package/components/CollapsibleRoot.js.map +1 -0
- package/components/CollapsibleTrigger.d.ts +21 -0
- package/components/CollapsibleTrigger.d.ts.map +1 -0
- package/components/CollapsibleTrigger.js +36 -0
- package/components/CollapsibleTrigger.js.map +1 -0
- package/components/ColorEditor.d.ts +84 -0
- package/components/ColorEditor.d.ts.map +1 -0
- package/components/ColorEditor.js +517 -0
- package/components/ColorEditor.js.map +1 -0
- package/components/ColorPicker.d.ts +127 -0
- package/components/ColorPicker.d.ts.map +1 -0
- package/components/ColorPicker.js +136 -0
- package/components/ColorPicker.js.map +1 -0
- package/components/{FocusableLayer.d.ts → FocusRing.d.ts} +2 -2
- package/components/FocusRing.d.ts.map +1 -0
- package/components/{FocusableLayer.js → FocusRing.js} +2 -2
- package/components/FocusRing.js.map +1 -0
- package/components/Input.d.ts +2 -0
- package/components/Input.d.ts.map +1 -1
- package/components/Input.js +4 -4
- package/components/Input.js.map +1 -1
- package/components/Link.js +2 -2
- package/components/Link.js.map +1 -1
- package/components/NumberScrubber.d.ts +2 -0
- package/components/NumberScrubber.d.ts.map +1 -1
- package/components/NumberScrubber.js +3 -3
- package/components/NumberScrubber.js.map +1 -1
- package/components/OTPField.d.ts.map +1 -1
- package/components/OTPField.js +2 -2
- package/components/OTPField.js.map +1 -1
- package/components/Popover.d.ts.map +1 -1
- package/components/Popover.js +8 -2
- package/components/Popover.js.map +1 -1
- package/components/Radio.js +2 -2
- package/components/Radio.js.map +1 -1
- package/components/Segmented.js +2 -2
- package/components/Segmented.js.map +1 -1
- package/components/Select.d.ts +2 -0
- package/components/Select.d.ts.map +1 -1
- package/components/Select.js +5 -5
- package/components/Select.js.map +1 -1
- package/components/Slider.d.ts +34 -3
- package/components/Slider.d.ts.map +1 -1
- package/components/Slider.js +27 -14
- package/components/Slider.js.map +1 -1
- package/components/Switch.js +2 -2
- package/components/Switch.js.map +1 -1
- package/components/Tab.d.ts +19 -0
- package/components/Tab.d.ts.map +1 -0
- package/components/Tab.js +22 -0
- package/components/Tab.js.map +1 -0
- package/components/TabPanel.d.ts +31 -0
- package/components/TabPanel.d.ts.map +1 -0
- package/components/TabPanel.js +19 -0
- package/components/TabPanel.js.map +1 -0
- package/components/Tabs.d.ts +33 -0
- package/components/Tabs.d.ts.map +1 -0
- package/components/Tabs.js +36 -0
- package/components/Tabs.js.map +1 -0
- package/components/TabsContext.d.ts +25 -0
- package/components/TabsContext.d.ts.map +1 -0
- package/components/TabsContext.js +18 -0
- package/components/TabsContext.js.map +1 -0
- package/components/TabsList.d.ts +12 -0
- package/components/TabsList.d.ts.map +1 -0
- package/components/TabsList.js +52 -0
- package/components/TabsList.js.map +1 -0
- package/components/Textarea.d.ts +2 -0
- package/components/Textarea.d.ts.map +1 -1
- package/components/Textarea.js +3 -3
- package/components/Textarea.js.map +1 -1
- package/components/ThemeContext.d.ts +26 -0
- package/components/ThemeContext.d.ts.map +1 -1
- package/components/ThemeContext.js.map +1 -1
- package/components/ToggleButton.d.ts +44 -0
- package/components/ToggleButton.d.ts.map +1 -0
- package/components/ToggleButton.js +66 -0
- package/components/ToggleButton.js.map +1 -0
- package/components/ToggleGroup.d.ts +50 -0
- package/components/ToggleGroup.d.ts.map +1 -0
- package/components/ToggleGroup.js +57 -0
- package/components/ToggleGroup.js.map +1 -0
- package/components/ToggleGroupContext.d.ts +31 -0
- package/components/ToggleGroupContext.d.ts.map +1 -0
- package/components/ToggleGroupContext.js +14 -0
- package/components/ToggleGroupContext.js.map +1 -0
- package/components/icons/ArrowLeftIcon.d.ts +2 -0
- package/components/icons/ArrowLeftIcon.d.ts.map +1 -0
- package/components/icons/ArrowLeftIcon.js +5 -0
- package/components/icons/ArrowLeftIcon.js.map +1 -0
- package/components/icons/ChevronLeftIcon.d.ts +2 -0
- package/components/icons/ChevronLeftIcon.d.ts.map +1 -0
- package/components/icons/ChevronLeftIcon.js +5 -0
- package/components/icons/ChevronLeftIcon.js.map +1 -0
- package/components/icons/FlipIcon.d.ts +2 -0
- package/components/icons/FlipIcon.d.ts.map +1 -0
- package/components/icons/FlipIcon.js +5 -0
- package/components/icons/FlipIcon.js.map +1 -0
- package/components/icons/GradientColorIcon.d.ts +2 -0
- package/components/icons/GradientColorIcon.d.ts.map +1 -0
- package/components/icons/GradientColorIcon.js +5 -0
- package/components/icons/GradientColorIcon.js.map +1 -0
- package/components/icons/SolidColorIcon.d.ts +2 -0
- package/components/icons/SolidColorIcon.d.ts.map +1 -0
- package/components/icons/SolidColorIcon.js +5 -0
- package/components/icons/SolidColorIcon.js.map +1 -0
- package/index.d.ts +20 -1
- package/index.d.ts.map +1 -1
- package/index.js +18 -0
- package/index.js.map +1 -1
- package/package.json +11 -1
- package/shared/color.d.ts +122 -0
- package/shared/color.d.ts.map +1 -0
- package/shared/color.js +319 -0
- package/shared/color.js.map +1 -0
- package/styles/colors.css +4 -4
- package/components/FocusableLayer.d.ts.map +0 -1
- package/components/FocusableLayer.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.10.0 (2026-06-01)
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- add ColorPicker (87a7f61)
|
|
8
|
+
- add ColorEditor (4ef1a11)
|
|
9
|
+
- iconClassName prop for icon-wrapping fields (2fa8710)
|
|
10
|
+
- add Accordion and Collapsible (05389a6)
|
|
11
|
+
- add ToggleGroup and ToggleButton (9be07d4)
|
|
12
|
+
- Segmented - reads Toolbar's rounded value as default (6fe5e48)
|
|
13
|
+
- add Tabs component (707f2bc)
|
|
14
|
+
- add track variant to Slider (3c3f1a7)
|
|
15
|
+
- add Calendar and DatePicker components (b4af769)
|
|
16
|
+
- tweak fg colors chroma in dark-colors theme (89830ea)
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
- keep Popover open when a drag starts inside and releases outside (86c5f83)
|
|
21
|
+
- scroll Select option list to keyboard-highlighted option (0b93c9b)
|
|
22
|
+
|
|
23
|
+
### Refactoring
|
|
24
|
+
|
|
25
|
+
- FocusableLayer -> FocusRing (3391ffa)
|
|
26
|
+
|
|
27
|
+
### Styles
|
|
28
|
+
|
|
29
|
+
- redraw GradientColorIcon with halftone dots (7f28acb)
|
|
30
|
+
|
|
31
|
+
## 0.9.0 (2026-05-29)
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
- popover open duration 400ms -> 300ms (13de1ab)
|
|
36
|
+
|
|
3
37
|
## 0.8.1 (2026-05-25)
|
|
4
38
|
|
|
5
39
|
### Features
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type DayPickerProps } from 'react-day-picker';
|
|
3
|
+
import { ButtonSize } from '../components/Button.js';
|
|
4
|
+
import { Color } from '../types.js';
|
|
5
|
+
export type CalendarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
6
|
+
export type CalendarProps = DayPickerProps & {
|
|
7
|
+
/** Sizing token. Drives day-cell size and font sizes. Default `'md'`. */
|
|
8
|
+
size?: CalendarSize;
|
|
9
|
+
/** Size of the nav buttons and caption dropdowns. Default `'sm'`. */
|
|
10
|
+
controlSize?: ButtonSize;
|
|
11
|
+
/** Accent color token. Sets the `cladd-color-{name}` class - drives selected fill, today, and focus ring. Default: theme accent. */
|
|
12
|
+
color?: Color;
|
|
13
|
+
/** Custom content rendered above the calendar grid, inside the calendar container (mirrors `footer`). */
|
|
14
|
+
header?: ReactNode;
|
|
15
|
+
/** Extra classes for the `header` wrapper. */
|
|
16
|
+
headerClassName?: string;
|
|
17
|
+
/** Extra classes for the `footer` element. */
|
|
18
|
+
footerClassName?: string;
|
|
19
|
+
};
|
|
20
|
+
export declare const Calendar: (props: CalendarProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
//# sourceMappingURL=Calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,cAAc,EAQpB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAU,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAM1D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAgD7D,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG;IAC3C,yEAAyE;IACzE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,oIAAoI;IACpI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,yGAAyG;IACzG,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAgOF,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAiG5C,CAAC"}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useEffect, useRef, } from 'react';
|
|
3
|
+
import { DayPicker, } from 'react-day-picker';
|
|
4
|
+
import { Button } from '../components/Button.js';
|
|
5
|
+
import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon.js';
|
|
6
|
+
import { Select } from '../components/Select.js';
|
|
7
|
+
import { Toolbar } from '../components/Toolbar.js';
|
|
8
|
+
import { ToolbarButton } from '../components/ToolbarButton.js';
|
|
9
|
+
import { cn } from '../shared/cn.js';
|
|
10
|
+
const SIZES = {
|
|
11
|
+
sm: {
|
|
12
|
+
box: 'size-cladd-sm',
|
|
13
|
+
col: 'w-cladd-sm',
|
|
14
|
+
dayText: 'text-cladd-2xs',
|
|
15
|
+
weekdayText: 'text-cladd-2xs',
|
|
16
|
+
captionText: 'text-cladd-xs',
|
|
17
|
+
},
|
|
18
|
+
md: {
|
|
19
|
+
box: 'size-cladd-md',
|
|
20
|
+
col: 'w-cladd-md',
|
|
21
|
+
dayText: 'text-cladd-xs',
|
|
22
|
+
weekdayText: 'text-cladd-2xs',
|
|
23
|
+
captionText: 'text-cladd-xs',
|
|
24
|
+
},
|
|
25
|
+
lg: {
|
|
26
|
+
box: 'size-cladd-lg',
|
|
27
|
+
col: 'w-cladd-lg',
|
|
28
|
+
dayText: 'text-cladd-xs',
|
|
29
|
+
weekdayText: 'text-cladd-xs',
|
|
30
|
+
captionText: 'text-cladd-xs',
|
|
31
|
+
},
|
|
32
|
+
xl: {
|
|
33
|
+
box: 'size-cladd-xl',
|
|
34
|
+
col: 'w-cladd-xl',
|
|
35
|
+
dayText: 'text-cladd-sm',
|
|
36
|
+
weekdayText: 'text-cladd-xs',
|
|
37
|
+
captionText: 'text-cladd-sm',
|
|
38
|
+
},
|
|
39
|
+
'2xl': {
|
|
40
|
+
box: 'size-cladd-2xl',
|
|
41
|
+
col: 'w-cladd-2xl',
|
|
42
|
+
dayText: 'text-cladd-sm',
|
|
43
|
+
weekdayText: 'text-cladd-xs',
|
|
44
|
+
captionText: 'text-cladd-sm',
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
const CHEVRON_ROTATION = {
|
|
48
|
+
left: 'rotate-0',
|
|
49
|
+
right: 'rotate-180',
|
|
50
|
+
up: 'rotate-90',
|
|
51
|
+
down: '-rotate-90',
|
|
52
|
+
};
|
|
53
|
+
const Chevron = ({ orientation = 'left', className }) => {
|
|
54
|
+
return (_jsx(ChevronLeftIcon, { className: cn(className, CHEVRON_ROTATION[orientation]) }));
|
|
55
|
+
};
|
|
56
|
+
const CalendarContext = createContext({
|
|
57
|
+
size: 'lg',
|
|
58
|
+
controlSize: 'sm',
|
|
59
|
+
hasNavigation: true,
|
|
60
|
+
navLayout: 'after',
|
|
61
|
+
color: 'brand',
|
|
62
|
+
});
|
|
63
|
+
const PreviousMonthButton = ({ className, onClick, }) => {
|
|
64
|
+
const { controlSize } = useContext(CalendarContext);
|
|
65
|
+
return (_jsx(Toolbar, { size: controlSize, className: className, children: _jsx(ToolbarButton, { square: true, onClick: onClick, children: _jsx(ChevronLeftIcon, {}) }) }));
|
|
66
|
+
};
|
|
67
|
+
const NextMonthButton = ({ className, onClick }) => {
|
|
68
|
+
const { controlSize } = useContext(CalendarContext);
|
|
69
|
+
return (_jsx(Toolbar, { size: controlSize, className: className, children: _jsx(ToolbarButton, { square: true, onClick: onClick, children: _jsx(ChevronLeftIcon, { className: "rotate-180" }) }) }));
|
|
70
|
+
};
|
|
71
|
+
const Nav = ({ className, onPreviousClick, onNextClick, previousMonth, nextMonth, ...rest }) => {
|
|
72
|
+
const { controlSize } = useContext(CalendarContext);
|
|
73
|
+
return (_jsxs(Toolbar, { as: "nav", size: controlSize, className: cn('cladd-calendar-nav', className), ...rest, children: [_jsx(ToolbarButton, { type: "button", square: true, "aria-label": "Go to previous month", disabled: !previousMonth, onClick: onPreviousClick, children: _jsx(ChevronLeftIcon, {}) }), _jsx(ToolbarButton, { type: "button", square: true, "aria-label": "Go to next month", disabled: !nextMonth, onClick: onNextClick, children: _jsx(ChevronLeftIcon, { className: "rotate-180" }) })] }));
|
|
74
|
+
};
|
|
75
|
+
const DropdownNav = ({ className, children, ...rest }) => {
|
|
76
|
+
const { controlSize, hasNavigation } = useContext(CalendarContext);
|
|
77
|
+
return (_jsx(Toolbar, { size: controlSize, className: cn(hasNavigation && 'max-w-[calc(100%-3.5rem)]', className), contentClassName: cn(hasNavigation && 'w-full', '[&>span]:px-1.5 [&>span]:text-cladd-xs [&>span]:font-medium'), ...rest, children: children }));
|
|
78
|
+
};
|
|
79
|
+
const Dropdown = ({ options = [], value, onChange, 'aria-label': ariaLabel, }) => {
|
|
80
|
+
const { controlSize, hasNavigation } = useContext(CalendarContext);
|
|
81
|
+
const labelFor = (v) => options.find((o) => o.value === v)?.label ?? '';
|
|
82
|
+
const searchable = options.length > 20;
|
|
83
|
+
return (_jsx(Select, { size: controlSize, className: cn(hasNavigation && 'w-auto min-w-0 shrink'), rounded: true, variant: "transparent", outline: false, "aria-label": ariaLabel, value: value, options: options.map((o) => o.value), isOptionDisabled: (v) => !!options.find((o) => o.value === v)?.disabled, renderOption: ({ value: v }) => labelFor(v), keyboardHints: false, search: searchable, searchFocus: searchable, onSearch: (query) => options
|
|
84
|
+
.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase()))
|
|
85
|
+
.map((o) => o.value), onChange: (v) => onChange?.({
|
|
86
|
+
target: { value: String(v) },
|
|
87
|
+
}), popoverClassName: "max-h-72 w-40", contentClassName: cn(hasNavigation && '', 'gap-0.5 pr-0.5 pl-1.5'), valueClassName: cn(hasNavigation && 'truncate'), scrollToSelected: true, children: labelFor(value) }));
|
|
88
|
+
};
|
|
89
|
+
const DayButton = ({ day: _day, modifiers, className, ...rest }) => {
|
|
90
|
+
const ref = useRef(null);
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
if (modifiers.focused)
|
|
93
|
+
ref.current?.focus();
|
|
94
|
+
}, [modifiers.focused]);
|
|
95
|
+
const { size, color } = useContext(CalendarContext);
|
|
96
|
+
const inRangeMiddle = !!modifiers.range_middle;
|
|
97
|
+
const isFilled = !!modifiers.selected && !inRangeMiddle;
|
|
98
|
+
const roundedEnd = modifiers.range_start && !modifiers.range_end
|
|
99
|
+
? 'rounded-r-none'
|
|
100
|
+
: modifiers.range_end && !modifiers.range_start
|
|
101
|
+
? 'rounded-l-none'
|
|
102
|
+
: '';
|
|
103
|
+
return (_jsx(Button, { ...rest, ref: ref, color: isFilled ? color : undefined, square: true, rounded: true, size: size, outline: false, variant: isFilled ? 'gradient-fill' : 'transparent', disabled: !!modifiers.disabled, className: cn('font-medium', SIZES[size].dayText, isFilled && cn('font-semibold', roundedEnd), modifiers.today &&
|
|
104
|
+
!modifiers.selected &&
|
|
105
|
+
'font-semibold text-cladd-primary', modifiers.outside && !modifiers.selected && 'text-cladd-fg-softer', modifiers.disabled && 'text-cladd-fg-softest', className) }));
|
|
106
|
+
};
|
|
107
|
+
const Root = ({ rootRef, children, ...rest }) => {
|
|
108
|
+
const { header, headerClassName } = useContext(CalendarContext);
|
|
109
|
+
return (_jsxs("div", { ref: rootRef, ...rest, children: [header && (_jsx("div", { className: cn('cladd-calendar-header mb-2', headerClassName), children: header })), children] }));
|
|
110
|
+
};
|
|
111
|
+
export const Calendar = (props) => {
|
|
112
|
+
const { size = 'lg', controlSize = 'sm', navLayout = 'after', hideNavigation, disableNavigation, color = 'brand', header, headerClassName, footerClassName, className, classNames, components, modifiersClassNames, showOutsideDays = true, ...rest } = props;
|
|
113
|
+
const hasNavigation = !hideNavigation;
|
|
114
|
+
const t = SIZES[size];
|
|
115
|
+
const baseClassNames = {
|
|
116
|
+
footer: cn('mt-2 pl-2 text-cladd-xs text-cladd-fg-soft', footerClassName),
|
|
117
|
+
months: 'relative flex gap-4',
|
|
118
|
+
month: 'flex flex-col gap-4',
|
|
119
|
+
month_caption: cn('flex min-h-8 items-center', navLayout === 'after' && 'pr-1', hasNavigation && navLayout === 'around' && 'justify-center'),
|
|
120
|
+
caption_label: cn('font-semibold text-cladd-fg', (navLayout === 'after' || !hasNavigation) && 'pl-2', t.captionText),
|
|
121
|
+
button_previous: 'absolute z-10 left-0 top-0',
|
|
122
|
+
button_next: 'absolute z-10 right-0 top-0',
|
|
123
|
+
nav: 'absolute top-0 right-0 z-10',
|
|
124
|
+
chevron: 'size-4',
|
|
125
|
+
month_grid: 'border-collapse',
|
|
126
|
+
weekdays: 'flex',
|
|
127
|
+
weekday: cn('flex items-center justify-center pb-1 font-normal text-cladd-fg-soft', t.col, t.weekdayText),
|
|
128
|
+
week: 'mt-0.5 flex',
|
|
129
|
+
day: cn('relative flex items-center justify-center p-0', t.box),
|
|
130
|
+
hidden: 'invisible',
|
|
131
|
+
};
|
|
132
|
+
const baseModifierClassNames = {
|
|
133
|
+
range_middle: 'bg-cladd-primary/5',
|
|
134
|
+
};
|
|
135
|
+
return (_jsx(CalendarContext.Provider, { value: {
|
|
136
|
+
size,
|
|
137
|
+
controlSize,
|
|
138
|
+
hasNavigation,
|
|
139
|
+
navLayout,
|
|
140
|
+
color,
|
|
141
|
+
header,
|
|
142
|
+
headerClassName,
|
|
143
|
+
}, children: _jsx(DayPicker, { navLayout: navLayout, hideNavigation: hideNavigation, disableNavigation: disableNavigation, showOutsideDays: showOutsideDays, className: cn('cladd-calendar', className), classNames: { ...baseClassNames, ...classNames }, modifiersClassNames: {
|
|
144
|
+
...baseModifierClassNames,
|
|
145
|
+
...modifiersClassNames,
|
|
146
|
+
}, components: {
|
|
147
|
+
Root,
|
|
148
|
+
Chevron,
|
|
149
|
+
DayButton,
|
|
150
|
+
PreviousMonthButton,
|
|
151
|
+
NextMonthButton,
|
|
152
|
+
Nav,
|
|
153
|
+
Dropdown,
|
|
154
|
+
DropdownNav,
|
|
155
|
+
...components,
|
|
156
|
+
}, ...rest }) }));
|
|
157
|
+
};
|
|
158
|
+
//# sourceMappingURL=Calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/calendar/Calendar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarIcon.d.ts","sourceRoot":"","sources":["../../../src/calendar/CalendarIcon.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,4CAkBhE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const CalendarIcon = (props) => {
|
|
3
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", ...props, children: _jsxs("g", { fill: "currentColor", fillRule: "evenodd", children: [_jsx("path", { d: "M5.111 3.556a.667.667 0 0 1-.667-.667V1.11a.667.667 0 0 1 1.334 0V2.89a.667.667 0 0 1-.667.667M10.889 3.556a.667.667 0 0 1-.667-.667V1.11a.667.667 0 0 1 1.334 0V2.89a.667.667 0 0 1-.667.667" }), _jsx("path", { fillRule: "nonzero", d: "M12.222 2.222H3.778a2.447 2.447 0 0 0-2.445 2.445v7.555a2.447 2.447 0 0 0 2.445 2.445h8.444a2.447 2.447 0 0 0 2.445-2.445V4.667a2.447 2.447 0 0 0-2.445-2.445m0 11.111H3.778a1.11 1.11 0 0 1-1.111-1.11V6.666h10.666v5.555c0 .613-.498 1.111-1.11 1.111" })] }) }));
|
|
4
|
+
};
|
|
5
|
+
//# sourceMappingURL=CalendarIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarIcon.js","sourceRoot":"","sources":["../../../src/calendar/CalendarIcon.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAoC,EAAE,EAAE;IACnE,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,KACf,KAAK,YAET,aAAG,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,SAAS,aACvC,eAAM,CAAC,EAAC,+LAA+L,GAAG,EAC1M,eACE,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yPAAyP,GAC3P,IACA,GACA,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { ReactNode, Ref } from 'react';
|
|
2
|
+
import type { DateRange, PropsBase } from 'react-day-picker';
|
|
3
|
+
import { ButtonSize } from '../components/Button.js';
|
|
4
|
+
import { PopoverOffset, PopoverPosition } from '../components/Popover.js';
|
|
5
|
+
import { Color } from '../types.js';
|
|
6
|
+
import { CalendarSize } from './Calendar.js';
|
|
7
|
+
export type DatePickerSize = ButtonSize;
|
|
8
|
+
interface DatePickerBaseProps {
|
|
9
|
+
/** Trigger button size. Forwarded to `Button.size`. Default `'md'`. */
|
|
10
|
+
size?: ButtonSize;
|
|
11
|
+
/** Calendar size inside the popover. Default `'lg'`. */
|
|
12
|
+
calendarSize?: CalendarSize;
|
|
13
|
+
/** Accent color token. Drives the trigger and the calendar. Default: theme accent. */
|
|
14
|
+
color?: Color;
|
|
15
|
+
/** Show the chevron indicator on the right of the trigger. Default `true`. */
|
|
16
|
+
dropdownIcon?: boolean;
|
|
17
|
+
/** Shown in the trigger when nothing is selected. Default `'Select date'`. */
|
|
18
|
+
placeholder?: ReactNode;
|
|
19
|
+
/** Dim the trigger and block opening. */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Show the value but block opening the popover. */
|
|
22
|
+
readOnly?: boolean;
|
|
23
|
+
/** Pill-style trigger. Forwarded to `Button.rounded`. */
|
|
24
|
+
rounded?: boolean;
|
|
25
|
+
/** Trigger surface outline ring. Forwarded to `Button.outline`. */
|
|
26
|
+
outline?: boolean;
|
|
27
|
+
/** Extra classes for the trigger button. */
|
|
28
|
+
className?: string;
|
|
29
|
+
/** Extra classes for the trigger's inner content row. */
|
|
30
|
+
contentClassName?: string;
|
|
31
|
+
/** Icon node in the trigger. Defaults to a calendar glyph; pass `null` to hide. */
|
|
32
|
+
icon?: ReactNode;
|
|
33
|
+
/** Extra classes for the icon wrapper. */
|
|
34
|
+
iconClassName?: string;
|
|
35
|
+
/** Extra props forwarded to the underlying `Calendar` (e.g. `numberOfMonths`, `disabled`, `startMonth`, `endMonth`). */
|
|
36
|
+
calendarProps?: Omit<Partial<PropsBase>, 'mode' | 'required'> & {
|
|
37
|
+
size?: CalendarSize;
|
|
38
|
+
controlSize?: ButtonSize;
|
|
39
|
+
color?: Color;
|
|
40
|
+
};
|
|
41
|
+
/** Popover anchor side + alignment. Default `'bottom-end'`. */
|
|
42
|
+
popoverPosition?: PopoverPosition;
|
|
43
|
+
/** Popover spacing from the trigger. Default `['-50%', 4]`. */
|
|
44
|
+
popoverOffset?: PopoverOffset;
|
|
45
|
+
/** Extra classes for the popover surface. Default `'w-auto'`. */
|
|
46
|
+
popoverClassName?: string;
|
|
47
|
+
/** Accent color for the popover. Defaults to `color`. */
|
|
48
|
+
popoverColor?: Color;
|
|
49
|
+
/** Surface level for the popover. */
|
|
50
|
+
popoverSurfaceLevel?: number | string;
|
|
51
|
+
/** Controlled popover open state. Pair with `onOpenChange`. */
|
|
52
|
+
open?: boolean;
|
|
53
|
+
/** Fires whenever the popover open state changes. */
|
|
54
|
+
onOpenChange?: (open: boolean) => void;
|
|
55
|
+
/** Forwarded to the trigger button's root element. */
|
|
56
|
+
ref?: Ref<HTMLElement>;
|
|
57
|
+
}
|
|
58
|
+
type SingleDatePickerProps = DatePickerBaseProps & {
|
|
59
|
+
/** Selection mode. Default `'single'`. */
|
|
60
|
+
mode?: 'single';
|
|
61
|
+
/** Selected date. */
|
|
62
|
+
value?: Date;
|
|
63
|
+
/** Fires when the selected date changes. */
|
|
64
|
+
onChange?: (value: Date | undefined) => void;
|
|
65
|
+
/** Format the selected date into the trigger label. Default `toLocaleDateString`. */
|
|
66
|
+
format?: (value: Date) => ReactNode;
|
|
67
|
+
/** Close the popover after a pick. Default `true`. */
|
|
68
|
+
closeOnSelect?: boolean;
|
|
69
|
+
};
|
|
70
|
+
type MultipleDatePickerProps = DatePickerBaseProps & {
|
|
71
|
+
mode: 'multiple';
|
|
72
|
+
/** Selected dates. */
|
|
73
|
+
value?: Date[];
|
|
74
|
+
/** Fires when the selected dates change. */
|
|
75
|
+
onChange?: (value: Date[]) => void;
|
|
76
|
+
/** Format the selected dates into the trigger label. */
|
|
77
|
+
format?: (value: Date[]) => ReactNode;
|
|
78
|
+
};
|
|
79
|
+
type RangeDatePickerProps = DatePickerBaseProps & {
|
|
80
|
+
mode: 'range';
|
|
81
|
+
/** Selected range. */
|
|
82
|
+
value?: DateRange;
|
|
83
|
+
/** Fires when the selected range changes. */
|
|
84
|
+
onChange?: (value: DateRange | undefined) => void;
|
|
85
|
+
/** Format the selected range into the trigger label. */
|
|
86
|
+
format?: (value: DateRange) => ReactNode;
|
|
87
|
+
};
|
|
88
|
+
export type DatePickerProps = SingleDatePickerProps | MultipleDatePickerProps | RangeDatePickerProps;
|
|
89
|
+
export declare function DatePicker(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
|
|
90
|
+
export {};
|
|
91
|
+
//# sourceMappingURL=DatePicker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/calendar/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState } from 'react';
|
|
3
|
+
import { Button, buttonIconSizes } from '../components/Button.js';
|
|
4
|
+
import { DropdownIcon } from '../components/icons/DropdownIcon.js';
|
|
5
|
+
import { Popover } from '../components/Popover.js';
|
|
6
|
+
import { cn } from '../shared/cn.js';
|
|
7
|
+
import { Calendar } from './Calendar.js';
|
|
8
|
+
import { CalendarIcon } from './CalendarIcon.js';
|
|
9
|
+
const formatDate = (d) => d.toLocaleDateString();
|
|
10
|
+
export function DatePicker(props) {
|
|
11
|
+
const { size = 'md', calendarSize = 'lg', color, placeholder = 'Select date', disabled, readOnly, rounded, outline, className, contentClassName, icon = _jsx(CalendarIcon, {}), iconClassName, dropdownIcon = true, calendarProps, popoverPosition = 'bottom-end', popoverOffset = ['-50%', 4], popoverClassName = 'w-auto', popoverColor, popoverSurfaceLevel, open: openProp, onOpenChange, ref, } = props;
|
|
12
|
+
const triggerRef = useRef(null);
|
|
13
|
+
const [internalOpen, setInternalOpen] = useState(false);
|
|
14
|
+
const isControlled = openProp !== undefined;
|
|
15
|
+
const open = isControlled ? openProp : internalOpen;
|
|
16
|
+
const setOpen = (next) => {
|
|
17
|
+
if (!isControlled)
|
|
18
|
+
setInternalOpen(next);
|
|
19
|
+
onOpenChange?.(next);
|
|
20
|
+
};
|
|
21
|
+
const setTriggerRef = (el) => {
|
|
22
|
+
triggerRef.current = el;
|
|
23
|
+
if (typeof ref === 'function')
|
|
24
|
+
ref(el);
|
|
25
|
+
else if (ref)
|
|
26
|
+
ref.current = el;
|
|
27
|
+
};
|
|
28
|
+
let label = placeholder;
|
|
29
|
+
let hasValue = false;
|
|
30
|
+
if (props.mode === 'multiple') {
|
|
31
|
+
const v = props.value;
|
|
32
|
+
if (v && v.length > 0) {
|
|
33
|
+
hasValue = true;
|
|
34
|
+
label = props.format ? props.format(v) : v.map(formatDate).join(', ');
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
else if (props.mode === 'range') {
|
|
38
|
+
const v = props.value;
|
|
39
|
+
if (v?.from) {
|
|
40
|
+
hasValue = true;
|
|
41
|
+
label = props.format
|
|
42
|
+
? props.format(v)
|
|
43
|
+
: v.to
|
|
44
|
+
? `${formatDate(v.from)} – ${formatDate(v.to)}`
|
|
45
|
+
: formatDate(v.from);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
const v = props.value;
|
|
50
|
+
if (v) {
|
|
51
|
+
hasValue = true;
|
|
52
|
+
label = props.format ? props.format(v) : formatDate(v);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
const shared = {
|
|
56
|
+
size: calendarSize,
|
|
57
|
+
...calendarProps,
|
|
58
|
+
color: calendarProps?.color ?? color,
|
|
59
|
+
};
|
|
60
|
+
let calendar;
|
|
61
|
+
if (props.mode === 'multiple') {
|
|
62
|
+
const onChange = props.onChange;
|
|
63
|
+
calendar = (_jsx(Calendar, { ...shared, mode: "multiple", selected: props.value, onSelect: (v) => onChange?.(v ?? []) }));
|
|
64
|
+
}
|
|
65
|
+
else if (props.mode === 'range') {
|
|
66
|
+
const onChange = props.onChange;
|
|
67
|
+
calendar = (_jsx(Calendar, { ...shared, mode: "range", selected: props.value, onSelect: (v) => onChange?.(v) }));
|
|
68
|
+
}
|
|
69
|
+
else {
|
|
70
|
+
const { onChange, closeOnSelect } = props;
|
|
71
|
+
calendar = (_jsx(Calendar, { ...shared, mode: "single", selected: props.value, onSelect: (v) => {
|
|
72
|
+
onChange?.(v);
|
|
73
|
+
if (closeOnSelect !== false)
|
|
74
|
+
setOpen(false);
|
|
75
|
+
} }));
|
|
76
|
+
}
|
|
77
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Button, { "data-part": "trigger", ref: setTriggerRef, className: cn('cladd-date-picker w-full', className), size: size, rounded: rounded, outline: outline, color: color, disabled: disabled, readOnly: readOnly, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, onClick: () => setOpen(!open), contentClassName: cn('flex w-full min-w-0 items-center gap-2', dropdownIcon && 'pr-1.5', contentClassName), children: [icon && (_jsx("div", { "data-part": "icon", className: cn('shrink-0 text-cladd-fg-soft', buttonIconSizes[size], iconClassName), children: icon })), _jsx("div", { "data-part": "value", className: cn('w-full min-w-0 shrink truncate text-left', !hasValue && 'text-cladd-fg-softer'), children: label }), dropdownIcon && (_jsx(DropdownIcon, { "data-part": "dropdown-icon", className: "size-4 shrink-0 text-cladd-fg-softer" }))] }), !readOnly && !disabled && (_jsx(Popover, { open: open, onOpenChange: setOpen, anchorRef: triggerRef, position: popoverPosition, offset: popoverOffset, className: popoverClassName, onClick: (e) => e.stopPropagation(), color: popoverColor ?? color, surfaceLevel: popoverSurfaceLevel, children: _jsx("div", { className: "p-2", children: calendar }) }))] }));
|
|
78
|
+
}
|
|
79
|
+
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/calendar/DatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAC7E,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyC,MAAM,YAAY,CAAC;AAC7E,OAAO,EACL,UAAU,GAGX,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Group state published by `AccordionRoot` to its `AccordionItem`s. Each item
|
|
4
|
+
* derives its own open state from this and, in turn, publishes a
|
|
5
|
+
* `CollapsibleContextValue` to the disclosure parts inside it.
|
|
6
|
+
*/
|
|
7
|
+
export interface AccordionContextValue {
|
|
8
|
+
/** Whether the item with the given value is currently open. */
|
|
9
|
+
isItemOpen: (value: string) => boolean;
|
|
10
|
+
/** Toggle the item with the given value, honoring single/`multiple` mode. */
|
|
11
|
+
toggleItem: (value: string) => void;
|
|
12
|
+
/** Whether the whole accordion is disabled. */
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
/** Stable id base used to wire each item's trigger and panel. */
|
|
15
|
+
baseId: string;
|
|
16
|
+
}
|
|
17
|
+
export declare function useAccordionContext(): AccordionContextValue;
|
|
18
|
+
export declare function AccordionContextProvider(props: {
|
|
19
|
+
value: AccordionContextValue;
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=AccordionContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionContext.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,6EAA6E;IAC7E,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,+CAA+C;IAC/C,QAAQ,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,mBAAmB,IAAI,qBAAqB,CAQ3D;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE;IAC9C,KAAK,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAMA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
|
+
const AccordionContext = createContext(null);
|
|
4
|
+
export function useAccordionContext() {
|
|
5
|
+
const ctx = useContext(AccordionContext);
|
|
6
|
+
if (!ctx) {
|
|
7
|
+
throw new Error('Cladd: `AccordionItem` must be rendered inside an `AccordionRoot`.');
|
|
8
|
+
}
|
|
9
|
+
return ctx;
|
|
10
|
+
}
|
|
11
|
+
export function AccordionContextProvider(props) {
|
|
12
|
+
return (_jsx(AccordionContext.Provider, { value: props.value, children: props.children }));
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=AccordionContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionContext.js","sourceRoot":"","sources":["../../../src/components/AccordionContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAa,MAAM,OAAO,CAAC;AAkB7D,MAAM,gBAAgB,GAAG,aAAa,CAA+B,IAAI,CAAC,CAAC;AAE3E,MAAM,UAAU,mBAAmB;IACjC,MAAM,GAAG,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACzC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,oEAAoE,CACrE,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,KAGxC;IACC,OAAO,CACL,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YAC1C,KAAK,CAAC,QAAQ,GACW,CAC7B,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
|
|
2
|
+
interface AccordionItemOwnProps {
|
|
3
|
+
/** The item's trigger, panel and (optional) indicator. */
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
/** Extra classes for the item wrapper. */
|
|
6
|
+
className?: string;
|
|
7
|
+
/** Identifies this item - matched against the accordion's open value(s). */
|
|
8
|
+
value: string;
|
|
9
|
+
/** Disable just this item. Combined with the accordion's own `disabled`. */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/** Forwarded to the underlying `<div>`. */
|
|
12
|
+
ref?: Ref<HTMLDivElement>;
|
|
13
|
+
}
|
|
14
|
+
export type AccordionItemProps = AccordionItemOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AccordionItemOwnProps>;
|
|
15
|
+
/** Shape of `AccordionItem` defaults that can be supplied via `CladdProvider`'s `defaults` prop. */
|
|
16
|
+
export type AccordionItemDefaultProps = Partial<Omit<AccordionItemOwnProps, 'children' | 'value' | 'ref'>>;
|
|
17
|
+
/**
|
|
18
|
+
* One disclosure within an `AccordionRoot`. Binds a `value`, derives its open
|
|
19
|
+
* state from the surrounding accordion, and republishes it as a
|
|
20
|
+
* `CollapsibleContextValue` - so the same `CollapsibleTrigger`/`CollapsiblePanel`
|
|
21
|
+
* /`CollapsibleIndicator` (and their `Accordion*` aliases) work inside it.
|
|
22
|
+
*
|
|
23
|
+
* Renders a single `<div>` wrapper carrying `data-open` / `data-disabled`.
|
|
24
|
+
*/
|
|
25
|
+
export declare const AccordionItem: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
27
|
+
//# sourceMappingURL=AccordionItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../src/components/AccordionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAOjE,UAAU,qBAAqB;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GACpD,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC;AAErE,oGAAoG;AACpG,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,IAAI,CAAC,qBAAqB,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC,CAC1D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CA2CtD,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useComponentDefaults } from '../hooks/use-component-defaults.js';
|
|
3
|
+
import { cn } from '../shared/cn.js';
|
|
4
|
+
import { useAccordionContext } from './AccordionContext.js';
|
|
5
|
+
import { CollapsibleContextProvider } from './CollapsibleContext.js';
|
|
6
|
+
/**
|
|
7
|
+
* One disclosure within an `AccordionRoot`. Binds a `value`, derives its open
|
|
8
|
+
* state from the surrounding accordion, and republishes it as a
|
|
9
|
+
* `CollapsibleContextValue` - so the same `CollapsibleTrigger`/`CollapsiblePanel`
|
|
10
|
+
* /`CollapsibleIndicator` (and their `Accordion*` aliases) work inside it.
|
|
11
|
+
*
|
|
12
|
+
* Renders a single `<div>` wrapper carrying `data-open` / `data-disabled`.
|
|
13
|
+
*/
|
|
14
|
+
export const AccordionItem = (props) => {
|
|
15
|
+
const accordion = useAccordionContext();
|
|
16
|
+
const { children, className = '', value, disabled: itemDisabled = false, ref, ...rest } = useComponentDefaults('AccordionItem', props);
|
|
17
|
+
const disabled = accordion.disabled || itemDisabled;
|
|
18
|
+
const open = accordion.isItemOpen(value);
|
|
19
|
+
const setOpen = (next) => {
|
|
20
|
+
if (disabled || next === open)
|
|
21
|
+
return;
|
|
22
|
+
accordion.toggleItem(value);
|
|
23
|
+
};
|
|
24
|
+
return (_jsx(CollapsibleContextProvider, { value: {
|
|
25
|
+
open,
|
|
26
|
+
toggle: () => {
|
|
27
|
+
if (!disabled)
|
|
28
|
+
accordion.toggleItem(value);
|
|
29
|
+
},
|
|
30
|
+
setOpen,
|
|
31
|
+
disabled,
|
|
32
|
+
triggerId: `${accordion.baseId}-trigger-${value}`,
|
|
33
|
+
panelId: `${accordion.baseId}-panel-${value}`,
|
|
34
|
+
}, children: _jsx("div", { ref: ref, "data-open": open || undefined, "data-disabled": disabled || undefined, className: cn('cladd-accordion-item', className), ...rest, children: children }) }));
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=AccordionItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../src/components/AccordionItem.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAC;AAuBlE;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,SAAS,GAAG,mBAAmB,EAAE,CAAC;IACxC,MAAM,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,EACL,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,GAAG,EACH,GAAG,IAAI,EACR,GAAG,oBAAoB,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,IAAI,YAAY,CAAC;IACpD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAEzC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,EAAE;QAChC,IAAI,QAAQ,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QACtC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,0BAA0B,IACzB,KAAK,EAAE;YACL,IAAI;YACJ,MAAM,EAAE,GAAG,EAAE;gBACX,IAAI,CAAC,QAAQ;oBAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YAC7C,CAAC;YACD,OAAO;YACP,QAAQ;YACR,SAAS,EAAE,GAAG,SAAS,CAAC,MAAM,YAAY,KAAK,EAAE;YACjD,OAAO,EAAE,GAAG,SAAS,CAAC,MAAM,UAAU,KAAK,EAAE;SAC9C,YAED,cACE,GAAG,EAAE,GAAG,eACG,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,EACpC,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,KAC5C,IAAI,YAEP,QAAQ,GACL,GACqB,CAC9B,CAAC;AACJ,CAAC,CAAC"}
|