@sixthshift/design-system 0.2.1 → 0.4.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/README.md +242 -33
- package/dist/components/Badge/Badge.d.ts +65 -7
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +56 -46
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/BarChart/BarChart.d.ts +20 -2
- package/dist/components/BarChart/BarChart.d.ts.map +1 -1
- package/dist/components/BarChart/BarChart.js +17 -3
- package/dist/components/BarChart/BarChart.js.map +1 -1
- package/dist/components/Button/Button.d.ts +85 -6
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +97 -106
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Calendar/Calendar.d.ts +31 -1
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +94 -225
- package/dist/components/Calendar/Calendar.js.map +1 -1
- package/dist/components/Calendar/CalendarView.d.ts +15 -0
- package/dist/components/Calendar/CalendarView.d.ts.map +1 -0
- package/dist/components/Calendar/CalendarView.js +263 -0
- package/dist/components/Calendar/CalendarView.js.map +1 -0
- package/dist/components/Calendar/calendar.types.d.ts +87 -27
- package/dist/components/Calendar/calendar.types.d.ts.map +1 -1
- package/dist/components/Calendar/calendar.types.js +10 -3
- package/dist/components/Calendar/calendar.types.js.map +1 -1
- package/dist/components/Calendar/index.d.ts +16 -2
- package/dist/components/Calendar/index.d.ts.map +1 -1
- package/dist/components/Calendar/index.js +15 -1
- package/dist/components/Calendar/index.js.map +1 -1
- package/dist/components/Card/Card.d.ts +13 -0
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +15 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +21 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +22 -1
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +22 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +22 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Code/Editor/Editor.js +2 -2
- package/dist/components/Code/Editor/Editor.js.map +1 -1
- package/dist/components/Code/Editor/themes.d.ts +2 -2
- package/dist/components/Code/Editor/themes.d.ts.map +1 -1
- package/dist/components/Code/Editor/themes.js +50 -32
- package/dist/components/Code/Editor/themes.js.map +1 -1
- package/dist/components/Code/ValidationStatus/ValidationStatus.d.ts.map +1 -1
- package/dist/components/Code/ValidationStatus/ValidationStatus.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +45 -2
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +228 -11
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DatePicker/DateSegments.d.ts +60 -0
- package/dist/components/DatePicker/DateSegments.d.ts.map +1 -0
- package/dist/components/DatePicker/DateSegments.js +80 -0
- package/dist/components/DatePicker/DateSegments.js.map +1 -0
- package/dist/components/DatePicker/datepicker.types.d.ts +53 -37
- package/dist/components/DatePicker/datepicker.types.d.ts.map +1 -1
- package/dist/components/DatePicker/datepicker.types.js +5 -3
- package/dist/components/DatePicker/datepicker.types.js.map +1 -1
- package/dist/components/DatePicker/index.d.ts +10 -1
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +8 -0
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +22 -3
- package/dist/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +38 -24
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/DateRangePicker/daterangepicker.types.d.ts +26 -21
- package/dist/components/DateRangePicker/daterangepicker.types.d.ts.map +1 -1
- package/dist/components/DateRangePicker/daterangepicker.types.js +6 -0
- package/dist/components/DateRangePicker/daterangepicker.types.js.map +1 -1
- package/dist/components/DateRangePicker/index.d.ts +8 -1
- package/dist/components/DateRangePicker/index.d.ts.map +1 -1
- package/dist/components/DateRangePicker/index.js +6 -0
- package/dist/components/DateRangePicker/index.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.d.ts +32 -4
- package/dist/components/DateTimePicker/DateTimePicker.d.ts.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.js +133 -42
- package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimeSegments.d.ts +41 -0
- package/dist/components/DateTimePicker/DateTimeSegments.d.ts.map +1 -0
- package/dist/components/DateTimePicker/DateTimeSegments.js +67 -0
- package/dist/components/DateTimePicker/DateTimeSegments.js.map +1 -0
- package/dist/components/DateTimePicker/datetimepicker.types.d.ts +26 -18
- package/dist/components/DateTimePicker/datetimepicker.types.d.ts.map +1 -1
- package/dist/components/DateTimePicker/datetimepicker.types.js +10 -0
- package/dist/components/DateTimePicker/datetimepicker.types.js.map +1 -1
- package/dist/components/DateTimePicker/index.d.ts +8 -1
- package/dist/components/DateTimePicker/index.d.ts.map +1 -1
- package/dist/components/DateTimePicker/index.js +6 -0
- package/dist/components/DateTimePicker/index.js.map +1 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts +30 -4
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +1 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js +171 -72
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js.map +1 -1
- package/dist/components/DateTimeRangePicker/datetimerangepicker.types.d.ts +28 -19
- package/dist/components/DateTimeRangePicker/datetimerangepicker.types.d.ts.map +1 -1
- package/dist/components/DateTimeRangePicker/datetimerangepicker.types.js +8 -0
- package/dist/components/DateTimeRangePicker/datetimerangepicker.types.js.map +1 -1
- package/dist/components/DateTimeRangePicker/index.d.ts +8 -0
- package/dist/components/DateTimeRangePicker/index.d.ts.map +1 -1
- package/dist/components/DateTimeRangePicker/index.js +7 -0
- package/dist/components/DateTimeRangePicker/index.js.map +1 -1
- package/dist/components/Field/Field.d.ts +18 -20
- package/dist/components/Field/Field.d.ts.map +1 -1
- package/dist/components/Field/Field.js +22 -5
- package/dist/components/Field/Field.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +15 -0
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js +15 -0
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/HoverCard/HoverCard.d.ts +6 -0
- package/dist/components/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/components/HoverCard/HoverCard.js +6 -0
- package/dist/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/components/Input/Input.d.ts +15 -0
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js +18 -3
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/LineChart/LineChart.d.ts +35 -2
- package/dist/components/LineChart/LineChart.d.ts.map +1 -1
- package/dist/components/LineChart/LineChart.js +22 -3
- package/dist/components/LineChart/LineChart.js.map +1 -1
- package/dist/components/Markdown/Markdown.d.ts +19 -4
- package/dist/components/Markdown/Markdown.d.ts.map +1 -1
- package/dist/components/Markdown/Markdown.js +20 -2
- package/dist/components/Markdown/Markdown.js.map +1 -1
- package/dist/components/Message/Message.d.ts +49 -4
- package/dist/components/Message/Message.d.ts.map +1 -1
- package/dist/components/Message/Message.js +62 -11
- package/dist/components/Message/Message.js.map +1 -1
- package/dist/components/Message/index.d.ts +1 -1
- package/dist/components/Message/index.d.ts.map +1 -1
- package/dist/components/Modal/Modal.d.ts +60 -5
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/Modal/Modal.js +52 -6
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/components/ModalContext.d.ts +14 -0
- package/dist/components/Modal/components/ModalContext.d.ts.map +1 -1
- package/dist/components/Modal/components/ModalContext.js.map +1 -1
- package/dist/components/Modal/components/ModalHeader.d.ts.map +1 -1
- package/dist/components/Modal/components/ModalHeader.js +13 -2
- package/dist/components/Modal/components/ModalHeader.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts +29 -0
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +36 -0
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/components/PopoverBody.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverBody.js +5 -2
- package/dist/components/Popover/components/PopoverBody.js.map +1 -1
- package/dist/components/Popover/components/PopoverContext.d.ts +1 -0
- package/dist/components/Popover/components/PopoverContext.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverContext.js.map +1 -1
- package/dist/components/Popover/components/PopoverTrigger.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverTrigger.js +2 -2
- package/dist/components/Popover/components/PopoverTrigger.js.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.d.ts +16 -1
- package/dist/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +19 -3
- package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.d.ts +26 -0
- package/dist/components/RadioButton/RadioButton.d.ts.map +1 -1
- package/dist/components/RadioButton/RadioButton.js +35 -1
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts +26 -0
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js +33 -0
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +10 -0
- package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/SearchInput/SearchInput.js +12 -1
- package/dist/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/components/Select/Select.d.ts +10 -2
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +63 -18
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/SelectDropdown.d.ts +14 -2
- package/dist/components/Select/SelectDropdown.d.ts.map +1 -1
- package/dist/components/Select/SelectDropdown.js +20 -4
- package/dist/components/Select/SelectDropdown.js.map +1 -1
- package/dist/components/Select/SelectTrigger.d.ts +10 -3
- package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
- package/dist/components/Select/SelectTrigger.js +12 -3
- package/dist/components/Select/SelectTrigger.js.map +1 -1
- package/dist/components/Select/useSelectKeyboard.d.ts +15 -1
- package/dist/components/Select/useSelectKeyboard.d.ts.map +1 -1
- package/dist/components/Select/useSelectKeyboard.js +73 -65
- package/dist/components/Select/useSelectKeyboard.js.map +1 -1
- package/dist/components/Separator/Separator.d.ts +10 -0
- package/dist/components/Separator/Separator.d.ts.map +1 -1
- package/dist/components/Separator/Separator.js +10 -0
- package/dist/components/Separator/Separator.js.map +1 -1
- package/dist/components/Sheet/Sheet.d.ts +25 -5
- package/dist/components/Sheet/Sheet.d.ts.map +1 -1
- package/dist/components/Sheet/Sheet.js +24 -6
- package/dist/components/Sheet/Sheet.js.map +1 -1
- package/dist/components/Sheet/components/SheetContext.d.ts +10 -0
- package/dist/components/Sheet/components/SheetContext.d.ts.map +1 -1
- package/dist/components/Sheet/components/SheetContext.js.map +1 -1
- package/dist/components/Sheet/components/SheetFooter.js +1 -1
- package/dist/components/Sheet/components/SheetFooter.js.map +1 -1
- package/dist/components/Sheet/components/SheetHeader.d.ts.map +1 -1
- package/dist/components/Sheet/components/SheetHeader.js +11 -2
- package/dist/components/Sheet/components/SheetHeader.js.map +1 -1
- package/dist/components/Sparkline/Sparkline.d.ts +21 -2
- package/dist/components/Sparkline/Sparkline.d.ts.map +1 -1
- package/dist/components/Sparkline/Sparkline.js +16 -3
- package/dist/components/Sparkline/Sparkline.js.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts +27 -2
- package/dist/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/Spinner/Spinner.js +28 -3
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/Switch/Switch.d.ts +18 -0
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +19 -1
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts +8 -2
- package/dist/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.js +6 -0
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Tabs/components/TabsList.d.ts +1 -1
- package/dist/components/Tabs/components/TabsList.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsList.js +5 -4
- package/dist/components/Tabs/components/TabsList.js.map +1 -1
- package/dist/components/Tabs/components/TabsPanels.d.ts +1 -1
- package/dist/components/Tabs/components/TabsPanels.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsPanels.js +5 -3
- package/dist/components/Tabs/components/TabsPanels.js.map +1 -1
- package/dist/components/Tabs/components/TabsTrigger.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsTrigger.js +22 -6
- package/dist/components/Tabs/components/TabsTrigger.js.map +1 -1
- package/dist/components/TagChip/TagChip.d.ts +16 -13
- package/dist/components/TagChip/TagChip.d.ts.map +1 -1
- package/dist/components/TagChip/TagChip.js +18 -3
- package/dist/components/TagChip/TagChip.js.map +1 -1
- package/dist/components/TagInput/TagInput.d.ts +12 -9
- package/dist/components/TagInput/TagInput.d.ts.map +1 -1
- package/dist/components/TagInput/TagInput.js +16 -4
- package/dist/components/TagInput/TagInput.js.map +1 -1
- package/dist/components/Text/Text.d.ts +9 -0
- package/dist/components/Text/Text.d.ts.map +1 -1
- package/dist/components/Text/Text.js +9 -0
- package/dist/components/Text/Text.js.map +1 -1
- package/dist/components/TextInline/TextInline.d.ts +15 -4
- package/dist/components/TextInline/TextInline.d.ts.map +1 -1
- package/dist/components/TextInline/TextInline.js +11 -0
- package/dist/components/TextInline/TextInline.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +12 -0
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +13 -1
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/TimePicker/TimeColumn.d.ts +10 -1
- package/dist/components/TimePicker/TimeColumn.d.ts.map +1 -1
- package/dist/components/TimePicker/TimeColumn.js +8 -1
- package/dist/components/TimePicker/TimeColumn.js.map +1 -1
- package/dist/components/TimePicker/TimePicker.d.ts +34 -2
- package/dist/components/TimePicker/TimePicker.d.ts.map +1 -1
- package/dist/components/TimePicker/TimePicker.js +118 -15
- package/dist/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/components/TimePicker/TimeSegments.d.ts +50 -0
- package/dist/components/TimePicker/TimeSegments.d.ts.map +1 -0
- package/dist/components/TimePicker/TimeSegments.js +93 -0
- package/dist/components/TimePicker/TimeSegments.js.map +1 -0
- package/dist/components/TimePicker/timepicker.hooks.d.ts +0 -4
- package/dist/components/TimePicker/timepicker.hooks.d.ts.map +1 -1
- package/dist/components/TimePicker/timepicker.hooks.js +1 -23
- package/dist/components/TimePicker/timepicker.hooks.js.map +1 -1
- package/dist/components/TimePicker/timepicker.types.d.ts +14 -15
- package/dist/components/TimePicker/timepicker.types.d.ts.map +1 -1
- package/dist/components/TimePicker/timepicker.types.js +4 -3
- package/dist/components/TimePicker/timepicker.types.js.map +1 -1
- package/dist/components/Toast/Toast.d.ts +27 -0
- package/dist/components/Toast/Toast.d.ts.map +1 -1
- package/dist/components/Toast/Toast.js +28 -1
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +31 -12
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.js +19 -31
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/Toggle/index.d.ts +1 -1
- package/dist/components/Toggle/index.d.ts.map +1 -1
- package/dist/components/Toggle/index.js +1 -1
- package/dist/components/Toggle/index.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +17 -0
- package/dist/components/ToggleGroup/ToggleGroup.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.js +17 -0
- package/dist/components/ToggleGroup/ToggleGroup.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.js +7 -6
- package/dist/components/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +4 -3
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.js +2 -2
- package/dist/components/ToggleGroup/ToggleGroupMultiple.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +4 -3
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupSingle.js +2 -2
- package/dist/components/ToggleGroup/ToggleGroupSingle.js.map +1 -1
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts +12 -3
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +6 -0
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +6 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/date-time/index.d.ts +2 -0
- package/dist/date-time/index.d.ts.map +1 -1
- package/dist/date-time/index.js +9 -1
- package/dist/date-time/index.js.map +1 -1
- package/dist/date-time/iso.d.ts +261 -0
- package/dist/date-time/iso.d.ts.map +1 -0
- package/dist/date-time/iso.js +358 -0
- package/dist/date-time/iso.js.map +1 -0
- package/dist/date-time/now.d.ts +7 -6
- package/dist/date-time/now.d.ts.map +1 -1
- package/dist/date-time/now.js +3 -3
- package/dist/date-time/now.js.map +1 -1
- package/dist/internal/PickerField.d.ts +45 -0
- package/dist/internal/PickerField.d.ts.map +1 -0
- package/dist/internal/PickerField.js +24 -0
- package/dist/internal/PickerField.js.map +1 -0
- package/dist/internal/SegmentedField.d.ts +98 -0
- package/dist/internal/SegmentedField.d.ts.map +1 -0
- package/dist/internal/SegmentedField.js +315 -0
- package/dist/internal/SegmentedField.js.map +1 -0
- package/dist/internal/index.d.ts +2 -0
- package/dist/internal/index.d.ts.map +1 -1
- package/dist/internal/index.js +2 -0
- package/dist/internal/index.js.map +1 -1
- package/dist/theme/index.d.ts +4 -3
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +3 -2
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/schema.d.ts +49 -33
- package/dist/theme/schema.d.ts.map +1 -1
- package/dist/theme/schema.js +30 -21
- package/dist/theme/schema.js.map +1 -1
- package/package.json +11 -59
- package/src/components/Badge/Badge.tsx +87 -49
- package/src/components/Badge/index.ts +10 -1
- package/src/components/BarChart/BarChart.tsx +37 -30
- package/src/components/Button/Button.tsx +129 -106
- package/src/components/Button/index.ts +10 -1
- package/src/components/Calendar/Calendar.tsx +104 -401
- package/src/components/Calendar/CalendarView.tsx +454 -0
- package/src/components/Calendar/calendar.types.ts +104 -29
- package/src/components/Calendar/index.ts +16 -17
- package/src/components/Card/Card.tsx +15 -2
- package/src/components/Checkbox/Checkbox.tsx +22 -2
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +22 -0
- package/src/components/Code/Editor/Editor.tsx +2 -2
- package/src/components/Code/Editor/themes.ts +50 -32
- package/src/components/Code/ValidationStatus/ValidationStatus.tsx +6 -3
- package/src/components/DatePicker/DatePicker.tsx +369 -42
- package/src/components/DatePicker/DateSegments.tsx +125 -0
- package/src/components/DatePicker/datepicker.types.ts +58 -39
- package/src/components/DatePicker/index.ts +11 -3
- package/src/components/DateRangePicker/DateRangePicker.tsx +38 -24
- package/src/components/DateRangePicker/daterangepicker.types.ts +29 -23
- package/src/components/DateRangePicker/index.ts +9 -1
- package/src/components/DateTimePicker/DateTimePicker.tsx +189 -88
- package/src/components/DateTimePicker/DateTimeSegments.tsx +113 -0
- package/src/components/DateTimePicker/datetimepicker.types.ts +29 -19
- package/src/components/DateTimePicker/index.ts +9 -1
- package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx +251 -126
- package/src/components/DateTimeRangePicker/datetimerangepicker.types.ts +31 -20
- package/src/components/DateTimeRangePicker/index.ts +9 -0
- package/src/components/Field/Field.tsx +25 -26
- package/src/components/FormField/FormField.tsx +15 -0
- package/src/components/HoverCard/HoverCard.tsx +6 -0
- package/src/components/Input/Input.tsx +19 -4
- package/src/components/LineChart/LineChart.tsx +164 -141
- package/src/components/Markdown/Markdown.tsx +21 -3
- package/src/components/Message/Message.tsx +83 -17
- package/src/components/Message/index.ts +1 -1
- package/src/components/Modal/Modal.tsx +157 -86
- package/src/components/Modal/components/ModalContext.tsx +14 -0
- package/src/components/Modal/components/ModalHeader.tsx +15 -3
- package/src/components/Popover/Popover.tsx +36 -0
- package/src/components/Popover/components/PopoverBody.tsx +6 -1
- package/src/components/Popover/components/PopoverContext.tsx +1 -0
- package/src/components/Popover/components/PopoverTrigger.tsx +2 -1
- package/src/components/ProgressBar/ProgressBar.tsx +46 -28
- package/src/components/RadioButton/RadioButton.tsx +34 -3
- package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +32 -0
- package/src/components/SearchInput/SearchInput.tsx +13 -2
- package/src/components/Select/Select.tsx +75 -19
- package/src/components/Select/SelectDropdown.tsx +45 -12
- package/src/components/Select/SelectTrigger.tsx +31 -8
- package/src/components/Select/useSelectKeyboard.ts +20 -10
- package/src/components/Separator/Separator.tsx +10 -0
- package/src/components/Sheet/Sheet.tsx +114 -83
- package/src/components/Sheet/components/SheetContext.tsx +10 -0
- package/src/components/Sheet/components/SheetFooter.tsx +1 -1
- package/src/components/Sheet/components/SheetHeader.tsx +18 -3
- package/src/components/Sparkline/Sparkline.tsx +40 -36
- package/src/components/Spinner/Spinner.tsx +28 -3
- package/src/components/Switch/Switch.tsx +27 -4
- package/src/components/Tabs/Tabs.tsx +6 -0
- package/src/components/Tabs/components/TabsList.tsx +5 -3
- package/src/components/Tabs/components/TabsPanels.tsx +5 -3
- package/src/components/Tabs/components/TabsTrigger.tsx +22 -5
- package/src/components/TagChip/TagChip.tsx +27 -18
- package/src/components/TagInput/TagInput.tsx +16 -11
- package/src/components/Text/Text.tsx +9 -0
- package/src/components/TextInline/TextInline.tsx +11 -0
- package/src/components/Textarea/Textarea.tsx +13 -1
- package/src/components/TimePicker/TimeColumn.tsx +24 -1
- package/src/components/TimePicker/TimePicker.tsx +157 -51
- package/src/components/TimePicker/TimeSegments.tsx +131 -0
- package/src/components/TimePicker/timepicker.hooks.ts +1 -24
- package/src/components/TimePicker/timepicker.types.ts +14 -16
- package/src/components/Toast/Toast.tsx +28 -1
- package/src/components/Toggle/Toggle.tsx +34 -32
- package/src/components/Toggle/index.ts +1 -1
- package/src/components/ToggleGroup/ToggleGroup.tsx +17 -0
- package/src/components/ToggleGroup/ToggleGroupItem.tsx +13 -8
- package/src/components/ToggleGroup/ToggleGroupMultiple.tsx +3 -1
- package/src/components/ToggleGroup/ToggleGroupSingle.tsx +3 -1
- package/src/components/ToggleGroup/toggleGroup.types.ts +12 -3
- package/src/components/Tooltip/Tooltip.tsx +6 -0
- package/src/date-time/index.ts +61 -1
- package/src/date-time/iso.ts +511 -0
- package/src/date-time/now.ts +10 -9
- package/src/internal/PickerField.tsx +90 -0
- package/src/internal/SegmentedField.tsx +445 -0
- package/src/internal/index.ts +2 -0
- package/src/theme/index.ts +11 -9
- package/src/theme/recipes/badge.css +140 -0
- package/src/theme/recipes/button.css +167 -0
- package/src/theme/recipes/card.css +26 -0
- package/src/theme/recipes/checkbox.css +44 -0
- package/src/theme/recipes/field.css +14 -0
- package/src/theme/recipes/index.css +28 -0
- package/src/theme/recipes/input.css +29 -0
- package/src/theme/recipes/message.css +47 -0
- package/src/theme/recipes/modal.css +31 -0
- package/src/theme/recipes/radio-button.css +42 -0
- package/src/theme/recipes/search-input.css +16 -0
- package/src/theme/recipes/select.css +105 -0
- package/src/theme/recipes/sheet.css +34 -0
- package/src/theme/recipes/spinner.css +17 -0
- package/src/theme/recipes/switch.css +39 -0
- package/src/theme/recipes/tabs.css +41 -0
- package/src/theme/recipes/tag-chip.css +27 -0
- package/src/theme/recipes/textarea.css +20 -0
- package/src/theme/recipes/toggle.css +92 -0
- package/src/theme/schema.ts +59 -58
- package/src/theme/tokens.css +824 -0
- package/dist/components/Avatar/Avatar.d.ts +0 -6
- package/dist/components/Avatar/Avatar.d.ts.map +0 -1
- package/dist/components/Avatar/Avatar.js +0 -11
- package/dist/components/Avatar/Avatar.js.map +0 -1
- package/dist/components/Avatar/index.d.ts +0 -2
- package/dist/components/Avatar/index.d.ts.map +0 -1
- package/dist/components/Avatar/index.js +0 -2
- package/dist/components/Avatar/index.js.map +0 -1
- package/dist/components/Breadcrumb/Breadcrumb.d.ts +0 -12
- package/dist/components/Breadcrumb/Breadcrumb.d.ts.map +0 -1
- package/dist/components/Breadcrumb/Breadcrumb.js +0 -19
- package/dist/components/Breadcrumb/Breadcrumb.js.map +0 -1
- package/dist/components/Breadcrumb/index.d.ts +0 -2
- package/dist/components/Breadcrumb/index.d.ts.map +0 -1
- package/dist/components/Breadcrumb/index.js +0 -2
- package/dist/components/Breadcrumb/index.js.map +0 -1
- package/dist/components/ColorDot/ColorDot.d.ts +0 -13
- package/dist/components/ColorDot/ColorDot.d.ts.map +0 -1
- package/dist/components/ColorDot/ColorDot.js +0 -34
- package/dist/components/ColorDot/ColorDot.js.map +0 -1
- package/dist/components/ColorDot/index.d.ts +0 -2
- package/dist/components/ColorDot/index.d.ts.map +0 -1
- package/dist/components/ColorDot/index.js +0 -2
- package/dist/components/ColorDot/index.js.map +0 -1
- package/dist/components/EmptyState/EmptyState.d.ts +0 -15
- package/dist/components/EmptyState/EmptyState.d.ts.map +0 -1
- package/dist/components/EmptyState/EmptyState.js +0 -7
- package/dist/components/EmptyState/EmptyState.js.map +0 -1
- package/dist/components/EmptyState/index.d.ts +0 -2
- package/dist/components/EmptyState/index.d.ts.map +0 -1
- package/dist/components/EmptyState/index.js +0 -2
- package/dist/components/EmptyState/index.js.map +0 -1
- package/dist/components/HeatMap/HeatMapCalendar.d.ts +0 -11
- package/dist/components/HeatMap/HeatMapCalendar.d.ts.map +0 -1
- package/dist/components/HeatMap/HeatMapCalendar.js +0 -68
- package/dist/components/HeatMap/HeatMapCalendar.js.map +0 -1
- package/dist/components/HeatMap/HeatMapMatrix.d.ts +0 -12
- package/dist/components/HeatMap/HeatMapMatrix.d.ts.map +0 -1
- package/dist/components/HeatMap/HeatMapMatrix.js +0 -35
- package/dist/components/HeatMap/HeatMapMatrix.js.map +0 -1
- package/dist/components/HeatMap/heat-map.utils.d.ts +0 -10
- package/dist/components/HeatMap/heat-map.utils.d.ts.map +0 -1
- package/dist/components/HeatMap/heat-map.utils.js +0 -10
- package/dist/components/HeatMap/heat-map.utils.js.map +0 -1
- package/dist/components/HeatMap/index.d.ts +0 -4
- package/dist/components/HeatMap/index.d.ts.map +0 -1
- package/dist/components/HeatMap/index.js +0 -3
- package/dist/components/HeatMap/index.js.map +0 -1
- package/dist/components/MetricList/MetricList.d.ts +0 -9
- package/dist/components/MetricList/MetricList.d.ts.map +0 -1
- package/dist/components/MetricList/MetricList.js +0 -6
- package/dist/components/MetricList/MetricList.js.map +0 -1
- package/dist/components/MetricList/MetricRow.d.ts +0 -13
- package/dist/components/MetricList/MetricRow.d.ts.map +0 -1
- package/dist/components/MetricList/MetricRow.js +0 -13
- package/dist/components/MetricList/MetricRow.js.map +0 -1
- package/dist/components/MetricList/index.d.ts +0 -3
- package/dist/components/MetricList/index.d.ts.map +0 -1
- package/dist/components/MetricList/index.js +0 -3
- package/dist/components/MetricList/index.js.map +0 -1
- package/dist/components/NavBottom/NavBottom.d.ts +0 -15
- package/dist/components/NavBottom/NavBottom.d.ts.map +0 -1
- package/dist/components/NavBottom/NavBottom.js +0 -19
- package/dist/components/NavBottom/NavBottom.js.map +0 -1
- package/dist/components/NavBottom/index.d.ts +0 -3
- package/dist/components/NavBottom/index.d.ts.map +0 -1
- package/dist/components/NavBottom/index.js +0 -2
- package/dist/components/NavBottom/index.js.map +0 -1
- package/dist/components/NavSide/NavItem.d.ts +0 -9
- package/dist/components/NavSide/NavItem.d.ts.map +0 -1
- package/dist/components/NavSide/NavItem.js +0 -13
- package/dist/components/NavSide/NavItem.js.map +0 -1
- package/dist/components/NavSide/NavSide.d.ts +0 -15
- package/dist/components/NavSide/NavSide.d.ts.map +0 -1
- package/dist/components/NavSide/NavSide.js +0 -10
- package/dist/components/NavSide/NavSide.js.map +0 -1
- package/dist/components/NavSide/index.d.ts +0 -3
- package/dist/components/NavSide/index.d.ts.map +0 -1
- package/dist/components/NavSide/index.js +0 -2
- package/dist/components/NavSide/index.js.map +0 -1
- package/dist/components/NavSide/types.d.ts +0 -38
- package/dist/components/NavSide/types.d.ts.map +0 -1
- package/dist/components/NavSide/types.js +0 -2
- package/dist/components/NavSide/types.js.map +0 -1
- package/dist/components/Pagination/Pagination.d.ts +0 -35
- package/dist/components/Pagination/Pagination.d.ts.map +0 -1
- package/dist/components/Pagination/Pagination.js +0 -26
- package/dist/components/Pagination/Pagination.js.map +0 -1
- package/dist/components/Pagination/index.d.ts +0 -3
- package/dist/components/Pagination/index.d.ts.map +0 -1
- package/dist/components/Pagination/index.js +0 -2
- package/dist/components/Pagination/index.js.map +0 -1
- package/dist/components/Skeleton/Skeleton.d.ts +0 -3
- package/dist/components/Skeleton/Skeleton.d.ts.map +0 -1
- package/dist/components/Skeleton/Skeleton.js +0 -7
- package/dist/components/Skeleton/Skeleton.js.map +0 -1
- package/dist/components/Skeleton/index.d.ts +0 -2
- package/dist/components/Skeleton/index.d.ts.map +0 -1
- package/dist/components/Skeleton/index.js +0 -2
- package/dist/components/Skeleton/index.js.map +0 -1
- package/dist/components/StatsCard/StatsCard.d.ts +0 -17
- package/dist/components/StatsCard/StatsCard.d.ts.map +0 -1
- package/dist/components/StatsCard/StatsCard.js +0 -13
- package/dist/components/StatsCard/StatsCard.js.map +0 -1
- package/dist/components/StatsCard/index.d.ts +0 -2
- package/dist/components/StatsCard/index.d.ts.map +0 -1
- package/dist/components/StatsCard/index.js +0 -2
- package/dist/components/StatsCard/index.js.map +0 -1
- package/dist/styles.css +0 -2
- package/dist/theme.generated.css +0 -438
- package/src/components/Avatar/Avatar.tsx +0 -19
- package/src/components/Avatar/index.ts +0 -1
- package/src/components/Breadcrumb/Breadcrumb.tsx +0 -47
- package/src/components/Breadcrumb/index.ts +0 -5
- package/src/components/ColorDot/ColorDot.tsx +0 -50
- package/src/components/ColorDot/index.ts +0 -1
- package/src/components/EmptyState/EmptyState.tsx +0 -29
- package/src/components/EmptyState/index.ts +0 -1
- package/src/components/HeatMap/HeatMapCalendar.tsx +0 -127
- package/src/components/HeatMap/HeatMapMatrix.tsx +0 -75
- package/src/components/HeatMap/heat-map.utils.ts +0 -15
- package/src/components/HeatMap/index.ts +0 -3
- package/src/components/MetricList/MetricList.tsx +0 -13
- package/src/components/MetricList/MetricRow.tsx +0 -30
- package/src/components/MetricList/index.ts +0 -2
- package/src/components/NavBottom/NavBottom.tsx +0 -53
- package/src/components/NavBottom/index.ts +0 -3
- package/src/components/NavSide/NavItem.tsx +0 -39
- package/src/components/NavSide/NavSide.tsx +0 -40
- package/src/components/NavSide/index.ts +0 -2
- package/src/components/NavSide/types.ts +0 -36
- package/src/components/Pagination/Pagination.tsx +0 -86
- package/src/components/Pagination/index.ts +0 -2
- package/src/components/Skeleton/Skeleton.tsx +0 -7
- package/src/components/Skeleton/index.ts +0 -1
- package/src/components/StatsCard/StatsCard.tsx +0 -40
- package/src/components/StatsCard/index.ts +0 -1
- package/src/styles/base.css +0 -41
- package/src/theme/palette.json +0 -100
- package/src/theme/palette.schema.json +0 -40
- package/src/theme/theme.json +0 -349
- package/src/theme/theme.schema.json +0 -876
- package/src/theme/typography.json +0 -7
- package/src/theme/typography.schema.json +0 -36
- package/tailwind.config.ts +0 -261
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAExH,MAAM,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;AAErF,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"SheetContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAExH,MAAM,MAAM,OAAO,GAAG,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;AAErF,UAAU,iBAAiB;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,wBAAgB,eAAe,sBAM9B;AAED,eAAO,MAAM,oBAAoB,oCAAqC,iBAAiB,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,gCAGhI,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetContext.js","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAA+D,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SheetContext.js","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAA+D,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAmBxH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAC;IACjE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAA+D,EAAE,EAAE;IACnI,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC1E,OAAO,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CAAC;AACjF,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "@sixthshift/design-system/utils";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
export const SheetFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("
|
|
4
|
+
export const SheetFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("sheet-footer border-(color:--sheet-footer-border) flex items-center border-t p-4", className), ...props })));
|
|
5
5
|
SheetFooter.displayName = "SheetFooter";
|
|
6
6
|
//# sourceMappingURL=SheetFooter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetFooter.js","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9G,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"SheetFooter.js","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC9G,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kFAAkF,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC3I,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"SheetHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEpE,eAAO,MAAM,WAAW,yFAmCtB,CAAC"}
|
|
@@ -3,11 +3,20 @@ import { cn } from "@sixthshift/design-system/utils";
|
|
|
3
3
|
import { X } from "lucide-react";
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { SheetContext } from "./SheetContext.js";
|
|
6
|
-
export const SheetHeader = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
6
|
+
export const SheetHeader = React.forwardRef(({ className, children, id, ...props }, ref) => {
|
|
7
7
|
const context = React.useContext(SheetContext);
|
|
8
8
|
const closable = context?.closable;
|
|
9
9
|
const onClose = context?.onClose;
|
|
10
|
-
|
|
10
|
+
const registerTitle = context?.registerTitle;
|
|
11
|
+
// Report the title to the sheet so it can name itself, and withdraw it on
|
|
12
|
+
// unmount. A caller-supplied `id` wins over the generated one — which the
|
|
13
|
+
// sheet can no longer resolve, so it is told there is no title to point at.
|
|
14
|
+
const ownsTitleId = id === undefined;
|
|
15
|
+
React.useEffect(() => {
|
|
16
|
+
registerTitle?.(ownsTitleId);
|
|
17
|
+
return () => registerTitle?.(false);
|
|
18
|
+
}, [registerTitle, ownsTitleId]);
|
|
19
|
+
return (_jsxs("div", { ref: ref, id: id ?? context?.titleId, className: cn("sheet-header border-(color:--sheet-header-border) flex flex-col space-y-1.5 border-b p-6", closable && "pr-12", className), ...props, children: [children, closable && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "sheet-close absolute top-4 right-4 cursor-pointer rounded-md p-1 text-(--sheet-close-fg) transition-colors hover:bg-(--sheet-close-bg-hovered) hover:text-(--sheet-close-fg-hovered)", children: _jsx(X, { size: 16 }) }))] }));
|
|
11
20
|
});
|
|
12
21
|
SheetHeader.displayName = "SheetHeader";
|
|
13
22
|
//# sourceMappingURL=SheetHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SheetHeader.js","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"SheetHeader.js","sourceRoot":"","sources":["../../../../src/components/Sheet/components/SheetHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3H,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,OAAO,EAAE,QAAQ,CAAC;IACnC,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,CAAC;IACjC,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa,CAAC;IAE7C,0EAA0E;IAC1E,0EAA0E;IAC1E,4EAA4E;IAC5E,MAAM,WAAW,GAAG,EAAE,KAAK,SAAS,CAAC;IACrC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,aAAa,EAAE,CAAC,WAAW,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAEjC,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,IAAI,OAAO,EAAE,OAAO,EAC1B,SAAS,EAAE,EAAE,CAAC,0FAA0F,EAAE,QAAQ,IAAI,OAAO,EAAE,SAAS,CAAC,KACrI,KAAK,aAER,QAAQ,EACR,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACL,OAAO,EAClB,SAAS,EAAC,sLAAsL,YAEhM,KAAC,CAAC,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Interpolation } from "@sixthshift/design-system/line-chart";
|
|
2
|
-
import
|
|
2
|
+
import * as React from "react";
|
|
3
3
|
export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
4
4
|
data: number[];
|
|
5
5
|
width?: number;
|
|
@@ -9,5 +9,24 @@ export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
|
9
9
|
interpolation?: Interpolation;
|
|
10
10
|
strokeWidth?: number;
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* A minimal inline trend line for embedding in a table cell or card — an
|
|
14
|
+
* `<svg>` inside an `inline-block` `<span>`, sized to `width`/`height` rather
|
|
15
|
+
* than a chart that lays out its own labels or axes.
|
|
16
|
+
*
|
|
17
|
+
* Requires at least 2 data points; with fewer it renders nothing (`null`).
|
|
18
|
+
* `color` is a single CSS color string (default `var(--fg-brand)`), and
|
|
19
|
+
* `interpolation` reuses the same `Interpolation` type as `LineChart`. The
|
|
20
|
+
* accessible name is a static `aria-label="Trend line"` — it does not
|
|
21
|
+
* describe the actual values.
|
|
22
|
+
*/
|
|
23
|
+
export declare const Sparkline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
24
|
+
data: number[];
|
|
25
|
+
width?: number;
|
|
26
|
+
height?: number;
|
|
27
|
+
color?: string;
|
|
28
|
+
fillArea?: boolean;
|
|
29
|
+
interpolation?: Interpolation;
|
|
30
|
+
strokeWidth?: number;
|
|
31
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
13
32
|
//# sourceMappingURL=Sparkline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,KAAK,
|
|
1
|
+
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAE1E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAyCF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;UA3Dd,MAAM,EAAE;YACN,MAAM;aACL,MAAM;YACP,MAAM;eACH,OAAO;oBACF,aAAa;kBACf,MAAM;yCAoFrB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "@sixthshift/design-system/utils";
|
|
3
|
+
import * as React from "react";
|
|
3
4
|
function buildPath(points, interpolation) {
|
|
4
5
|
if (points.length === 0)
|
|
5
6
|
return "";
|
|
@@ -37,7 +38,18 @@ function buildPath(points, interpolation) {
|
|
|
37
38
|
}
|
|
38
39
|
return parts.join(" ");
|
|
39
40
|
}
|
|
40
|
-
|
|
41
|
+
/**
|
|
42
|
+
* A minimal inline trend line for embedding in a table cell or card — an
|
|
43
|
+
* `<svg>` inside an `inline-block` `<span>`, sized to `width`/`height` rather
|
|
44
|
+
* than a chart that lays out its own labels or axes.
|
|
45
|
+
*
|
|
46
|
+
* Requires at least 2 data points; with fewer it renders nothing (`null`).
|
|
47
|
+
* `color` is a single CSS color string (default `var(--fg-brand)`), and
|
|
48
|
+
* `interpolation` reuses the same `Interpolation` type as `LineChart`. The
|
|
49
|
+
* accessible name is a static `aria-label="Trend line"` — it does not
|
|
50
|
+
* describe the actual values.
|
|
51
|
+
*/
|
|
52
|
+
export const Sparkline = React.forwardRef(({ data, width = 80, height = 24, color = "var(--fg-brand)", fillArea = false, interpolation = "monotone", strokeWidth = 1.5, className, ...rest }, ref) => {
|
|
41
53
|
if (data.length < 2)
|
|
42
54
|
return null;
|
|
43
55
|
const min = Math.min(...data);
|
|
@@ -52,6 +64,7 @@ export const Sparkline = ({ data, width = 80, height = 24, color = "var(--fg-bra
|
|
|
52
64
|
y: padY + innerH - ((v - min) / range) * innerH,
|
|
53
65
|
}));
|
|
54
66
|
const path = buildPath(points, interpolation);
|
|
55
|
-
return (_jsx("span", { ...rest, className: cn("inline-block align-middle", className), children: _jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": "Trend line", children: [fillArea && path && (_jsx("path", { d: `${path} L ${points[points.length - 1].x} ${height - padY} L ${points[0].x} ${height - padY} Z`, fill: color, opacity: 0.12 })), _jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
|
|
56
|
-
};
|
|
67
|
+
return (_jsx("span", { ref: ref, ...rest, className: cn("inline-block align-middle", className), children: _jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": "Trend line", children: [fillArea && path && (_jsx("path", { d: `${path} L ${points[points.length - 1].x} ${height - padY} L ${points[0].x} ${height - padY} Z`, fill: color, opacity: 0.12 })), _jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
|
|
68
|
+
});
|
|
69
|
+
Sparkline.displayName = "Sparkline";
|
|
57
70
|
//# sourceMappingURL=Sparkline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,36 @@
|
|
|
1
1
|
import { type VariantProps } from "class-variance-authority";
|
|
2
2
|
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Geometry (size) plus the one `--spinner-fg` component token.
|
|
5
|
+
*
|
|
6
|
+
* The colour used to be `text-fg-subtle`, a semantic token named directly in
|
|
7
|
+
* the class string — the one thing a consumer could not do was recolour a
|
|
8
|
+
* spinner without fighting `className` against it. `--spinner-fg` in
|
|
9
|
+
* src/theme/recipes/spinner.css is now that seam: a consumer overrides the
|
|
10
|
+
* variable, scoped to whatever subtree they like, instead of overriding a
|
|
11
|
+
* class.
|
|
12
|
+
*/
|
|
3
13
|
declare const spinnerVariants: (props?: ({
|
|
4
|
-
size?: "
|
|
14
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
5
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
16
|
export type SpinnerProps = React.SVGAttributes<SVGElement> & VariantProps<typeof spinnerVariants>;
|
|
17
|
+
/**
|
|
18
|
+
* Animated loading indicator — an inline `<svg>`, `size` scales it (`sm` |
|
|
19
|
+
* `md` | `lg` | `xl`). Use it for a fetching-more state at the bottom
|
|
20
|
+
* of an already-rendered list, and for an initial load inside a container that
|
|
21
|
+
* already reserves its final height, so resolving the load does not jump the
|
|
22
|
+
* layout (see docs/states.md).
|
|
23
|
+
*
|
|
24
|
+
* It is `aria-hidden="true"` unconditionally — it announces nothing to
|
|
25
|
+
* assistive tech on its own, so pair it with visible or `sr-only` text (or a
|
|
26
|
+
* live region) if the loading state needs to be announced.
|
|
27
|
+
*
|
|
28
|
+
* Colour reads the `--spinner-fg` component token
|
|
29
|
+
* (src/theme/recipes/spinner.css) rather than a class name, so a consumer
|
|
30
|
+
* can recolour a spinner scoped to a subtree without fighting `className`.
|
|
31
|
+
*/
|
|
7
32
|
declare const Spinner: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & VariantProps<(props?: ({
|
|
8
|
-
size?: "
|
|
33
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
9
34
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<SVGSVGElement>>;
|
|
10
35
|
export { Spinner, spinnerVariants };
|
|
11
36
|
//# sourceMappingURL=Spinner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,eAAe;;8EAYnB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAElG,QAAA,MAAM,OAAO;;qHAiBX,CAAC;AAGH,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,QAAA,MAAM,eAAe;;8EAYnB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAElG;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO;;qHAiBX,CAAC;AAGH,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -2,19 +2,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { cn } from "@sixthshift/design-system/utils";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Geometry (size) plus the one `--spinner-fg` component token.
|
|
7
|
+
*
|
|
8
|
+
* The colour used to be `text-fg-subtle`, a semantic token named directly in
|
|
9
|
+
* the class string — the one thing a consumer could not do was recolour a
|
|
10
|
+
* spinner without fighting `className` against it. `--spinner-fg` in
|
|
11
|
+
* src/theme/recipes/spinner.css is now that seam: a consumer overrides the
|
|
12
|
+
* variable, scoped to whatever subtree they like, instead of overriding a
|
|
13
|
+
* class.
|
|
14
|
+
*/
|
|
15
|
+
const spinnerVariants = cva("spinner animate-spin text-(--spinner-fg)", {
|
|
6
16
|
variants: {
|
|
7
17
|
size: {
|
|
8
18
|
sm: "h-4 w-4",
|
|
9
|
-
|
|
19
|
+
md: "h-6 w-6",
|
|
10
20
|
lg: "h-8 w-8",
|
|
11
21
|
xl: "h-12 w-12",
|
|
12
22
|
},
|
|
13
23
|
},
|
|
14
24
|
defaultVariants: {
|
|
15
|
-
size: "
|
|
25
|
+
size: "md",
|
|
16
26
|
},
|
|
17
27
|
});
|
|
28
|
+
/**
|
|
29
|
+
* Animated loading indicator — an inline `<svg>`, `size` scales it (`sm` |
|
|
30
|
+
* `md` | `lg` | `xl`). Use it for a fetching-more state at the bottom
|
|
31
|
+
* of an already-rendered list, and for an initial load inside a container that
|
|
32
|
+
* already reserves its final height, so resolving the load does not jump the
|
|
33
|
+
* layout (see docs/states.md).
|
|
34
|
+
*
|
|
35
|
+
* It is `aria-hidden="true"` unconditionally — it announces nothing to
|
|
36
|
+
* assistive tech on its own, so pair it with visible or `sr-only` text (or a
|
|
37
|
+
* live region) if the loading state needs to be announced.
|
|
38
|
+
*
|
|
39
|
+
* Colour reads the `--spinner-fg` component token
|
|
40
|
+
* (src/theme/recipes/spinner.css) rather than a class name, so a consumer
|
|
41
|
+
* can recolour a spinner scoped to a subtree without fighting `className`.
|
|
42
|
+
*/
|
|
18
43
|
const Spinner = React.forwardRef(({ className, size, ...props }, ref) => (_jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", className: cn(spinnerVariants({ size, className })), "aria-hidden": "true", ...props, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })));
|
|
19
44
|
Spinner.displayName = "Spinner";
|
|
20
45
|
export { Spinner, spinnerVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,eAAe,GAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;GASG;AACH,MAAM,eAAe,GAAG,GAAG,CAAC,0CAA0C,EAAE;IACtE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,WAAW;SAChB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAIH;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACpG,eACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,EACnB,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,iBACvC,MAAM,KACd,KAAK,aAET,iBAAQ,SAAS,EAAC,YAAY,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,GAAG,EAC9F,eACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACnH,IACE,CACP,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -17,6 +17,24 @@ export type SwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
|
|
|
17
17
|
/** Classes applied to the wrapping element when `label` is provided */
|
|
18
18
|
labelClassName?: string;
|
|
19
19
|
};
|
|
20
|
+
/**
|
|
21
|
+
* A boolean on/off control rendered as a track with a sliding thumb.
|
|
22
|
+
*
|
|
23
|
+
* Controlled via `checked`/`defaultChecked`/`onCheckedChange`
|
|
24
|
+
* (`useControllableState`). Renders `role="switch"` with `aria-checked`, plus
|
|
25
|
+
* a `data-state="checked" | "unchecked"` attribute the theme recipe
|
|
26
|
+
* (`switch.css`) styles off of.
|
|
27
|
+
*
|
|
28
|
+
* `pending` shows a spinner in the thumb and blocks clicks without disabling
|
|
29
|
+
* the control — it sets `aria-busy` rather than `disabled`, so the switch
|
|
30
|
+
* stays perceivable and focusable while the change is in flight.
|
|
31
|
+
*
|
|
32
|
+
* Pass `label` to wrap the switch in a `<Label>` linked to it by `id`;
|
|
33
|
+
* without one, the caller is responsible for its own accessible name (e.g.
|
|
34
|
+
* `aria-label`). Pass `name` to also render a hidden, read-only checkbox
|
|
35
|
+
* input so the value participates in native form submission (`value`
|
|
36
|
+
* defaults to `"on"`).
|
|
37
|
+
*/
|
|
20
38
|
declare const Switch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & {
|
|
21
39
|
/** Controlled checked state */
|
|
22
40
|
checked?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACpG,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,QAAA,MAAM,MAAM;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACpG,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,MAAM;IApCV,+BAA+B;cACrB,OAAO;IACjB,kDAAkD;qBACjC,OAAO;IACxB,wCAAwC;sBACtB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;IAC5C,oEAAoE;cAC1D,OAAO;IACjB,qCAAqC;WAC9B,MAAM;IACb,mDAAmD;YAC3C,MAAM;IACd,sEAAsE;YAC9D,KAAK,CAAC,SAAS;IACvB,uEAAuE;qBACtD,MAAM;2CA8HxB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -3,6 +3,24 @@ import { useControllableState } from "@sixthshift/design-system/hooks";
|
|
|
3
3
|
import { Label } from "@sixthshift/design-system/label";
|
|
4
4
|
import { cn } from "@sixthshift/design-system/utils";
|
|
5
5
|
import * as React from "react";
|
|
6
|
+
/**
|
|
7
|
+
* A boolean on/off control rendered as a track with a sliding thumb.
|
|
8
|
+
*
|
|
9
|
+
* Controlled via `checked`/`defaultChecked`/`onCheckedChange`
|
|
10
|
+
* (`useControllableState`). Renders `role="switch"` with `aria-checked`, plus
|
|
11
|
+
* a `data-state="checked" | "unchecked"` attribute the theme recipe
|
|
12
|
+
* (`switch.css`) styles off of.
|
|
13
|
+
*
|
|
14
|
+
* `pending` shows a spinner in the thumb and blocks clicks without disabling
|
|
15
|
+
* the control — it sets `aria-busy` rather than `disabled`, so the switch
|
|
16
|
+
* stays perceivable and focusable while the change is in flight.
|
|
17
|
+
*
|
|
18
|
+
* Pass `label` to wrap the switch in a `<Label>` linked to it by `id`;
|
|
19
|
+
* without one, the caller is responsible for its own accessible name (e.g.
|
|
20
|
+
* `aria-label`). Pass `name` to also render a hidden, read-only checkbox
|
|
21
|
+
* input so the value participates in native form submission (`value`
|
|
22
|
+
* defaults to `"on"`).
|
|
23
|
+
*/
|
|
6
24
|
const Switch = React.forwardRef(({ className, checked: controlledChecked, defaultChecked = false, onCheckedChange, pending = false, disabled, name, value = "on", label, labelClassName, id: idProp, ...props }, ref) => {
|
|
7
25
|
const generatedId = React.useId();
|
|
8
26
|
const id = idProp ?? (label ? generatedId : undefined);
|
|
@@ -11,7 +29,7 @@ const Switch = React.forwardRef(({ className, checked: controlledChecked, defaul
|
|
|
11
29
|
defaultValue: defaultChecked,
|
|
12
30
|
onChange: onCheckedChange,
|
|
13
31
|
});
|
|
14
|
-
const button = (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", role: "switch", id: id, "aria-checked": checked, "aria-busy": pending || undefined, "data-state": checked ? "checked" : "unchecked", "data-pending": pending || undefined, disabled: disabled, ref: ref, onClick: () => !pending && setChecked(!checked), className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-
|
|
32
|
+
const button = (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", role: "switch", id: id, "aria-checked": checked, "aria-busy": pending || undefined, "data-state": checked ? "checked" : "unchecked", "data-pending": pending || undefined, disabled: disabled, ref: ref, onClick: () => !pending && setChecked(!checked), className: cn("switch peer focus-visible:ring-(color:--switch-ring) inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-(--switch-bg) shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-normal disabled:cursor-not-allowed disabled:opacity-50", pending && "cursor-default", className), ...props, children: _jsx("span", { className: cn("switch-thumb pointer-events-none flex h-4 w-4 items-center justify-center rounded-full bg-(--switch-thumb-bg) shadow-lg ring-0 transition-transform", checked ? "translate-x-4" : "translate-x-0"), children: pending && (_jsxs("svg", { className: "h-2.5 w-2.5 animate-spin text-(--switch-thumb-fg)", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })) }) }), name && (_jsx("input", { type: "checkbox", "aria-hidden": true, tabIndex: -1, name: name, value: value, checked: checked, disabled: disabled, readOnly: true, style: {
|
|
15
33
|
position: "absolute",
|
|
16
34
|
pointerEvents: "none",
|
|
17
35
|
opacity: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,EAAE,EAAE,MAAM,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAClC,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC;QACjD,KAAK,EAAE,iBAAiB;QACxB,YAAY,EAAE,cAAc;QAC5B,QAAQ,EAAE,eAAe;KAC1B,CAAC,CAAC;IAEH,MAAM,MAAM,GAAG,CACb,8BACE,iBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,kBACQ,OAAO,eACV,OAAO,IAAI,SAAS,gBACnB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,kBAC/B,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC,EAC/C,SAAS,EAAE,EAAE,CACX,
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,9 +12,15 @@ export type TabsProps = {
|
|
|
12
12
|
/** Children - compound components (Tabs.List, Tabs.Panels) */
|
|
13
13
|
children: React.ReactNode;
|
|
14
14
|
};
|
|
15
|
+
/**
|
|
16
|
+
* NOTE: Storybook shows the copy in Tabs.stories.tsx
|
|
17
|
+
* (`parameters.docs.description.component`), not this comment. react-docgen
|
|
18
|
+
* cannot extract a description from an `Object.assign` / cast export, so a
|
|
19
|
+
* second copy here would only drift. Edit the stories file.
|
|
20
|
+
*/
|
|
15
21
|
export declare const Tabs: (({ items, value: controlledValue, defaultValue, onValueChange, children }: TabsProps) => React.JSX.Element) & {
|
|
16
|
-
List:
|
|
17
|
-
Panels:
|
|
22
|
+
List: React.ForwardRefExoticComponent<import("./index.js").TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
Panels: React.ForwardRefExoticComponent<import("./index.js").TabsPanelsProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
24
|
};
|
|
19
25
|
export type { TabItem };
|
|
20
26
|
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,KAAK,OAAO,EAAe,MAAM,0BAA0B,CAAC;AAIrE,MAAM,MAAM,SAAS,GAAG;IACtB,sBAAsB;IACtB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAyBF,eAAO,MAAM,IAAI,
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,KAAK,OAAO,EAAe,MAAM,0BAA0B,CAAC;AAIrE,MAAM,MAAM,SAAS,GAAG;IACtB,sBAAsB;IACtB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAyBF;;;;;GAKG;AACH,eAAO,MAAM,IAAI,8EA7B2E,SAAS;;;CAgCnG,CAAC;AAEH,YAAY,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -22,6 +22,12 @@ const TabsRoot = ({ items, value: controlledValue, defaultValue, onValueChange,
|
|
|
22
22
|
};
|
|
23
23
|
return _jsx(TabsContext.Provider, { value: contextValue, children: children });
|
|
24
24
|
};
|
|
25
|
+
/**
|
|
26
|
+
* NOTE: Storybook shows the copy in Tabs.stories.tsx
|
|
27
|
+
* (`parameters.docs.description.component`), not this comment. react-docgen
|
|
28
|
+
* cannot extract a description from an `Object.assign` / cast export, so a
|
|
29
|
+
* second copy here would only drift. Edit the stories file.
|
|
30
|
+
*/
|
|
25
31
|
export const Tabs = Object.assign(TabsRoot, {
|
|
26
32
|
List: TabsList,
|
|
27
33
|
Panels: TabsPanels,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAgB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAerD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAa,EAAE,EAAE;IACvG,iEAAiE;IACjE,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;IAE/F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,KAAK,EAAE,eAAe;QACtB,YAAY,EAAE,YAAY,IAAI,iBAAiB;QAC/C,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,MAAM,GAAG,QAAQ,EAAE,EAAE,CAAC;IAE5B,MAAM,YAAY,GAA0C;QAC1D,KAAK;QACL,KAAK;QACL,aAAa,EAAE,QAAQ;QACvB,MAAM;KACP,CAAC;IAEF,OAAO,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,QAAQ,GAAwB,CAAC;AACtF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC1C,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,UAAU;CACnB,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAgB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAerD,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAa,EAAE,EAAE;IACvG,iEAAiE;IACjE,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;IAE/F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,KAAK,EAAE,eAAe;QACtB,YAAY,EAAE,YAAY,IAAI,iBAAiB;QAC/C,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,MAAM,GAAG,QAAQ,EAAE,EAAE,CAAC;IAE5B,MAAM,YAAY,GAA0C;QAC1D,KAAK;QACL,KAAK;QACL,aAAa,EAAE,QAAQ;QACvB,MAAM;KACP,CAAC;IAEF,OAAO,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAAG,QAAQ,GAAwB,CAAC;AACtF,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC1C,IAAI,EAAE,QAAQ;IACd,MAAM,EAAE,UAAU;CACnB,CAAC,CAAC"}
|
|
@@ -5,5 +5,5 @@ export type TabsListProps = {
|
|
|
5
5
|
/** Additional CSS classes */
|
|
6
6
|
className?: string;
|
|
7
7
|
};
|
|
8
|
-
export declare const TabsList:
|
|
8
|
+
export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
9
9
|
//# sourceMappingURL=TabsList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,aAAa,GAAG;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,MAAM,aAAa,GAAG;IAC1B,uBAAuB;IACvB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,sFAqFnB,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "@sixthshift/design-system/utils";
|
|
3
|
-
import { useCallback, useRef } from "react";
|
|
3
|
+
import { forwardRef, useCallback, useRef } from "react";
|
|
4
4
|
import { useTabsContext } from "./TabsContext.js";
|
|
5
5
|
import { TabsTrigger } from "./TabsTrigger.js";
|
|
6
|
-
export const TabsList = ({ orientation = "horizontal", className }) => {
|
|
6
|
+
export const TabsList = forwardRef(({ orientation = "horizontal", className }, ref) => {
|
|
7
7
|
const { items, value, onValueChange } = useTabsContext();
|
|
8
8
|
const triggerRefs = useRef([]);
|
|
9
9
|
// Get enabled items and their indices
|
|
@@ -54,8 +54,9 @@ export const TabsList = ({ orientation = "horizontal", className }) => {
|
|
|
54
54
|
focusAndSelect(targetItem.index);
|
|
55
55
|
}
|
|
56
56
|
}, [orientation, getCurrentEnabledIndex, enabledItems, focusAndSelect]);
|
|
57
|
-
return (_jsx("div", { role: "tablist", "aria-orientation": orientation, className: cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row items-center", className), onKeyDown: handleKeyDown, children: items.map((item, index) => (_jsx(TabsTrigger, { item: item, index: index, ref: (el) => {
|
|
57
|
+
return (_jsx("div", { ref: ref, role: "tablist", "aria-orientation": orientation, className: cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row items-center", className), onKeyDown: handleKeyDown, children: items.map((item, index) => (_jsx(TabsTrigger, { item: item, index: index, ref: (el) => {
|
|
58
58
|
triggerRefs.current[index] = el;
|
|
59
59
|
} }, item.value))) }));
|
|
60
|
-
};
|
|
60
|
+
});
|
|
61
|
+
TabsList.displayName = "TabsList";
|
|
61
62
|
//# sourceMappingURL=TabsList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsList.js","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TabsList.js","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,5 +2,5 @@ export type TabsPanelsProps = {
|
|
|
2
2
|
/** Additional CSS classes */
|
|
3
3
|
className?: string;
|
|
4
4
|
};
|
|
5
|
-
export declare const TabsPanels: (
|
|
5
|
+
export declare const TabsPanels: import("react").ForwardRefExoticComponent<TabsPanelsProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
6
|
//# sourceMappingURL=TabsPanels.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanels.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsPanels.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabsPanels.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsPanels.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,eAAe,GAAG;IAC5B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,UAAU,4GAiBrB,CAAC"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "@sixthshift/design-system/utils";
|
|
3
|
+
import { forwardRef } from "react";
|
|
3
4
|
import { useTabsContext } from "./TabsContext.js";
|
|
4
|
-
export const TabsPanels = ({ className }) => {
|
|
5
|
+
export const TabsPanels = forwardRef(({ className }, ref) => {
|
|
5
6
|
const { items, value, baseId } = useTabsContext();
|
|
6
7
|
const activeItem = items.find((item) => item.value === value);
|
|
7
8
|
if (!activeItem)
|
|
@@ -10,6 +11,7 @@ export const TabsPanels = ({ className }) => {
|
|
|
10
11
|
const triggerId = `${baseId}-trigger-${value}`;
|
|
11
12
|
// Support lazy content
|
|
12
13
|
const content = typeof activeItem.content === "function" ? activeItem.content() : activeItem.content;
|
|
13
|
-
return (_jsx("div", { id: panelId, role: "tabpanel", "aria-labelledby": triggerId, className: cn("focus-visible:outline-hidden", className), children: content }));
|
|
14
|
-
};
|
|
14
|
+
return (_jsx("div", { ref: ref, id: panelId, role: "tabpanel", "aria-labelledby": triggerId, className: cn("focus-visible:outline-hidden", className), children: content }));
|
|
15
|
+
});
|
|
16
|
+
TabsPanels.displayName = "TabsPanels";
|
|
15
17
|
//# sourceMappingURL=TabsPanels.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanels.js","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsPanels.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"TabsPanels.js","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsPanels.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAO/C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAkC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3F,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAElD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAC9D,IAAI,CAAC,UAAU;QAAE,OAAO,IAAI,CAAC;IAE7B,MAAM,OAAO,GAAG,GAAG,MAAM,UAAU,KAAK,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAG,GAAG,MAAM,YAAY,KAAK,EAAE,CAAC;IAE/C,uBAAuB;IACvB,MAAM,OAAO,GAAG,OAAO,UAAU,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC;IAErG,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,UAAU,qBAAkB,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,CAAC,YAC7H,OAAO,GACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAkB,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsTrigger.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAkB,MAAM,eAAe,CAAC;AAoC7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,WAAW,gHAsCtB,CAAC"}
|
|
@@ -4,14 +4,30 @@ import { cn } from "@sixthshift/design-system/utils";
|
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
6
|
import { useTabsContext } from "./TabsContext.js";
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Geometry and behaviour only.
|
|
9
|
+
*
|
|
10
|
+
* Colour reads `--tabs-trigger-bg` / `--tabs-trigger-fg` component tokens
|
|
11
|
+
* (each with a `-hovered` state) whose values are decided by
|
|
12
|
+
* src/theme/recipes/tabs.css. That file is the mapping from `selected` to a
|
|
13
|
+
* semantic token — the layer that used to be the two branches of a `cva`
|
|
14
|
+
* `selected` variant here, compiled into class-name literals and unreachable
|
|
15
|
+
* from outside. Nothing in this file names a colour, which is the point: the
|
|
16
|
+
* semantics are now configurable without a release.
|
|
17
|
+
*/
|
|
18
|
+
const tabsTriggerVariants = cva(`tabs-trigger inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
|
|
19
|
+
px-3 py-1.5 text-sm font-medium cursor-pointer transition-colors bg-(--tabs-trigger-bg)
|
|
20
|
+
text-(--tabs-trigger-fg) hover:bg-(--tabs-trigger-bg-hovered) hover:text-(--tabs-trigger-fg-hovered)
|
|
21
|
+
focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-(color:--tabs-trigger-ring)
|
|
10
22
|
focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`, {
|
|
11
23
|
variants: {
|
|
24
|
+
// No longer carries colour — see the recipe file. Kept as a variant
|
|
25
|
+
// (rather than dropped) purely so `data-selected` and the exported
|
|
26
|
+
// `tabsTriggerVariants` shape stay symmetric with the `isSelected` prop
|
|
27
|
+
// callers already pass.
|
|
12
28
|
selected: {
|
|
13
|
-
true: "
|
|
14
|
-
false: "
|
|
29
|
+
true: "",
|
|
30
|
+
false: "",
|
|
15
31
|
},
|
|
16
32
|
},
|
|
17
33
|
defaultVariants: {
|
|
@@ -28,7 +44,7 @@ export const TabsTrigger = forwardRef(({ item, index }, ref) => {
|
|
|
28
44
|
onValueChange(item.value);
|
|
29
45
|
}
|
|
30
46
|
};
|
|
31
|
-
return (_jsxs("button", { ref: ref, id: triggerId, role: "tab", type: "button", "aria-selected": isSelected, "aria-controls": isSelected ? panelId : undefined, tabIndex: isSelected ? 0 : -1, disabled: item.disabled, "data-index": index, className: cn(tabsTriggerVariants({ selected: isSelected })), onClick: handleClick, children: [item.label, item.badge !== undefined && (_jsx(Badge, { variant: "soft", intent: "neutral", className: "ml-1 min-w-[1.25rem] px-1.5 py-0", children: item.badge }))] }));
|
|
47
|
+
return (_jsxs("button", { ref: ref, id: triggerId, role: "tab", type: "button", "aria-selected": isSelected, "aria-controls": isSelected ? panelId : undefined, tabIndex: isSelected ? 0 : -1, disabled: item.disabled, "data-index": index, "data-selected": isSelected, className: cn(tabsTriggerVariants({ selected: isSelected })), onClick: handleClick, children: [item.label, item.badge !== undefined && (_jsx(Badge, { variant: "soft", intent: "neutral", className: "ml-1 min-w-[1.25rem] px-1.5 py-0", children: item.badge }))] }));
|
|
32
48
|
});
|
|
33
49
|
TabsTrigger.displayName = "TabsTrigger";
|
|
34
50
|
//# sourceMappingURL=TabsTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTrigger.js","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsTrigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAgB,cAAc,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,mBAAmB,GAAG,GAAG,CAC7B
|
|
1
|
+
{"version":3,"file":"TabsTrigger.js","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabsTrigger.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAgB,cAAc,EAAE,MAAM,eAAe,CAAC;AAE7D;;;;;;;;;;GAUG;AACH,MAAM,mBAAmB,GAAG,GAAG,CAC7B;;;;+EAI6E,EAC7E;IACE,QAAQ,EAAE;QACR,oEAAoE;QACpE,mEAAmE;QACnE,wEAAwE;QACxE,wBAAwB;QACxB,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,KAAK;KAChB;CACF,CACF,CAAC;AAOF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAsC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClG,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAC1D,MAAM,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;IACxC,MAAM,SAAS,GAAG,GAAG,MAAM,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;IACpD,MAAM,OAAO,GAAG,GAAG,MAAM,UAAU,IAAI,CAAC,KAAK,EAAE,CAAC;IAEhD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,mBACE,UAAU,mBAIV,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC/C,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,KAAK,mBACF,UAAU,EACzB,SAAS,EAAE,EAAE,CAAC,mBAAmB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,EAC5D,OAAO,EAAE,WAAW,aAEnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,KAAC,KAAK,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,kCAAkC,YAChF,IAAI,CAAC,KAAK,GACL,CACT,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|