@sixthshift/design-system 0.5.0 → 0.7.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 +132 -87
- package/dist/components/Badge/Badge.d.ts +12 -4
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +8 -6
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Button/Button.d.ts +26 -3
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +14 -5
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +1 -0
- package/dist/components/Calendar/Calendar.js.map +1 -1
- package/dist/components/Calendar/CalendarView.d.ts +0 -11
- package/dist/components/Calendar/CalendarView.d.ts.map +1 -1
- package/dist/components/Calendar/CalendarView.js +1 -0
- package/dist/components/Calendar/CalendarView.js.map +1 -1
- package/dist/components/Calendar/calendar.hooks.d.ts.map +1 -1
- package/dist/components/Calendar/calendar.hooks.js +1 -0
- package/dist/components/Calendar/calendar.hooks.js.map +1 -1
- package/dist/components/Card/Card.d.ts +2 -2
- package/dist/components/Card/Card.d.ts.map +1 -1
- package/dist/components/Card/Card.js +3 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +1 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +1 -0
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Code/Editor/Editor.d.ts.map +1 -1
- package/dist/components/Code/Editor/Editor.js +1 -0
- package/dist/components/Code/Editor/Editor.js.map +1 -1
- package/dist/components/Code/Workspace/StatusBar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/StatusBar.js +1 -0
- package/dist/components/Code/Workspace/StatusBar.js.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.js +1 -0
- package/dist/components/Code/Workspace/Toolbar.js.map +1 -1
- package/dist/components/Code/Workspace/Workspace.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Workspace.js +1 -0
- package/dist/components/Code/Workspace/Workspace.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +7 -1
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DatePicker/DateSegments.d.ts.map +1 -1
- package/dist/components/DatePicker/DateSegments.js +1 -0
- package/dist/components/DatePicker/DateSegments.js.map +1 -1
- package/dist/components/DatePicker/datepicker.hooks.d.ts.map +1 -1
- package/dist/components/DatePicker/datepicker.hooks.js +1 -0
- package/dist/components/DatePicker/datepicker.hooks.js.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +1 -0
- package/dist/components/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.d.ts.map +1 -1
- package/dist/components/DateTimePicker/DateTimePicker.js +7 -1
- package/dist/components/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/components/DateTimePicker/DateTimeSegments.d.ts.map +1 -1
- package/dist/components/DateTimePicker/DateTimeSegments.js +1 -0
- package/dist/components/DateTimePicker/DateTimeSegments.js.map +1 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.d.ts.map +1 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js +7 -1
- package/dist/components/DateTimeRangePicker/DateTimeRangePicker.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +31 -10
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js +46 -17
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/FormField/index.d.ts +2 -2
- package/dist/components/FormField/index.d.ts.map +1 -1
- package/dist/components/FormField/index.js +1 -1
- package/dist/components/FormField/index.js.map +1 -1
- package/dist/components/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/components/HoverCard/HoverCard.js +4 -0
- package/dist/components/HoverCard/HoverCard.js.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContent.d.ts +16 -2
- package/dist/components/HoverCard/components/HoverCardContent.d.ts.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContent.js +4 -3
- package/dist/components/HoverCard/components/HoverCardContent.js.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContext.d.ts +2 -0
- package/dist/components/HoverCard/components/HoverCardContext.d.ts.map +1 -1
- package/dist/components/HoverCard/components/HoverCardContext.js +1 -0
- package/dist/components/HoverCard/components/HoverCardContext.js.map +1 -1
- package/dist/components/HoverCard/components/HoverCardTrigger.d.ts.map +1 -1
- package/dist/components/HoverCard/components/HoverCardTrigger.js +1 -0
- package/dist/components/HoverCard/components/HoverCardTrigger.js.map +1 -1
- package/dist/components/Message/Message.d.ts +5 -1
- package/dist/components/Message/Message.d.ts.map +1 -1
- package/dist/components/Message/Message.js +3 -3
- package/dist/components/Message/Message.js.map +1 -1
- package/dist/components/Modal/Modal.d.ts +26 -9
- package/dist/components/Modal/Modal.d.ts.map +1 -1
- package/dist/components/Modal/Modal.js +46 -21
- package/dist/components/Modal/Modal.js.map +1 -1
- package/dist/components/Modal/components/ModalContext.d.ts.map +1 -1
- package/dist/components/Modal/components/ModalContext.js +1 -0
- 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 +1 -0
- package/dist/components/Modal/components/ModalHeader.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts +3 -1
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +8 -0
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/components/PopoverBody.d.ts +16 -2
- package/dist/components/Popover/components/PopoverBody.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverBody.js +4 -3
- package/dist/components/Popover/components/PopoverBody.js.map +1 -1
- package/dist/components/Popover/components/PopoverClose.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverClose.js +1 -0
- package/dist/components/Popover/components/PopoverClose.js.map +1 -1
- package/dist/components/Popover/components/PopoverContext.d.ts +2 -0
- package/dist/components/Popover/components/PopoverContext.d.ts.map +1 -1
- package/dist/components/Popover/components/PopoverContext.js +1 -0
- 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 +1 -0
- package/dist/components/Popover/components/PopoverTrigger.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.d.ts.map +1 -1
- package/dist/components/RadioButton/RadioButton.js +1 -0
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js +1 -0
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +10 -7
- package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/SearchInput/SearchInput.js +11 -6
- package/dist/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/components/Select/Select.d.ts +6 -0
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +11 -4
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/SelectDropdown.d.ts +3 -1
- package/dist/components/Select/SelectDropdown.d.ts.map +1 -1
- package/dist/components/Select/SelectDropdown.js +3 -2
- package/dist/components/Select/SelectDropdown.js.map +1 -1
- package/dist/components/Select/SelectTrigger.d.ts.map +1 -1
- package/dist/components/Select/SelectTrigger.js +5 -1
- package/dist/components/Select/SelectTrigger.js.map +1 -1
- package/dist/components/Select/useSelectKeyboard.d.ts.map +1 -1
- package/dist/components/Select/useSelectKeyboard.js +1 -0
- package/dist/components/Select/useSelectKeyboard.js.map +1 -1
- package/dist/components/Sheet/Sheet.d.ts +12 -0
- package/dist/components/Sheet/Sheet.d.ts.map +1 -1
- package/dist/components/Sheet/Sheet.js +26 -10
- package/dist/components/Sheet/Sheet.js.map +1 -1
- package/dist/components/Sheet/components/SheetContext.d.ts.map +1 -1
- package/dist/components/Sheet/components/SheetContext.js +1 -0
- package/dist/components/Sheet/components/SheetContext.js.map +1 -1
- package/dist/components/Sheet/components/SheetHeader.d.ts.map +1 -1
- package/dist/components/Sheet/components/SheetHeader.js +1 -0
- package/dist/components/Sheet/components/SheetHeader.js.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts +2 -2
- package/dist/components/Spinner/Spinner.js +2 -2
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +1 -0
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.js +1 -0
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Tabs/components/TabsContext.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsContext.js +1 -0
- package/dist/components/Tabs/components/TabsContext.js.map +1 -1
- package/dist/components/Tabs/components/TabsList.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsList.js +1 -0
- package/dist/components/Tabs/components/TabsList.js.map +1 -1
- package/dist/components/Tabs/components/TabsPanels.d.ts.map +1 -1
- package/dist/components/Tabs/components/TabsPanels.js +1 -0
- 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 +2 -1
- package/dist/components/Tabs/components/TabsTrigger.js.map +1 -1
- package/dist/components/TagChip/TagChip.d.ts.map +1 -1
- package/dist/components/TagChip/TagChip.js +1 -0
- package/dist/components/TagChip/TagChip.js.map +1 -1
- package/dist/components/TagInput/TagInput.d.ts +8 -2
- package/dist/components/TagInput/TagInput.d.ts.map +1 -1
- package/dist/components/TagInput/TagInput.js +8 -5
- package/dist/components/TagInput/TagInput.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +21 -5
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +31 -5
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/TimePicker/PeriodSelector.d.ts.map +1 -1
- package/dist/components/TimePicker/PeriodSelector.js +1 -0
- package/dist/components/TimePicker/PeriodSelector.js.map +1 -1
- package/dist/components/TimePicker/TimeColumn.d.ts.map +1 -1
- package/dist/components/TimePicker/TimeColumn.js +1 -0
- package/dist/components/TimePicker/TimeColumn.js.map +1 -1
- package/dist/components/TimePicker/TimePicker.d.ts.map +1 -1
- package/dist/components/TimePicker/TimePicker.js +7 -1
- package/dist/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/components/TimePicker/TimeSegments.d.ts.map +1 -1
- package/dist/components/TimePicker/TimeSegments.js +1 -0
- package/dist/components/TimePicker/TimeSegments.js.map +1 -1
- package/dist/components/Toast/Toast.d.ts +16 -2
- package/dist/components/Toast/Toast.d.ts.map +1 -1
- package/dist/components/Toast/Toast.js +17 -7
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +5 -1
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.js +4 -3
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +3 -0
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.js +4 -3
- package/dist/components/ToggleGroup/ToggleGroupMultiple.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +3 -0
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupSingle.js +4 -3
- package/dist/components/ToggleGroup/ToggleGroupSingle.js.map +1 -1
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts +13 -0
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +3 -1
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +4 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipBody.d.ts +16 -2
- package/dist/components/Tooltip/components/TooltipBody.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipBody.js +4 -3
- package/dist/components/Tooltip/components/TooltipBody.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipContext.d.ts +2 -0
- package/dist/components/Tooltip/components/TooltipContext.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipContext.js +1 -0
- package/dist/components/Tooltip/components/TooltipContext.js.map +1 -1
- package/dist/components/Tooltip/components/TooltipTrigger.d.ts.map +1 -1
- package/dist/components/Tooltip/components/TooltipTrigger.js +1 -0
- package/dist/components/Tooltip/components/TooltipTrigger.js.map +1 -1
- package/dist/hooks/useCollapsible.d.ts.map +1 -1
- package/dist/hooks/useCollapsible.js +1 -0
- package/dist/hooks/useCollapsible.js.map +1 -1
- package/dist/hooks/useControllableState.d.ts.map +1 -1
- package/dist/hooks/useControllableState.js +1 -0
- package/dist/hooks/useControllableState.js.map +1 -1
- package/dist/hooks/useDebouncedCallback.d.ts.map +1 -1
- package/dist/hooks/useDebouncedCallback.js +1 -0
- package/dist/hooks/useDebouncedCallback.js.map +1 -1
- package/dist/hooks/useDebouncedState.d.ts.map +1 -1
- package/dist/hooks/useDebouncedState.js +1 -0
- package/dist/hooks/useDebouncedState.js.map +1 -1
- package/dist/hooks/useDeviceFormFactor.d.ts.map +1 -1
- package/dist/hooks/useDeviceFormFactor.js +1 -0
- package/dist/hooks/useDeviceFormFactor.js.map +1 -1
- package/dist/hooks/useLocalStorage.d.ts.map +1 -1
- package/dist/hooks/useLocalStorage.js +1 -0
- package/dist/hooks/useLocalStorage.js.map +1 -1
- package/dist/hooks/useMergedFloatingRef.d.ts.map +1 -1
- package/dist/hooks/useMergedFloatingRef.js +1 -0
- package/dist/hooks/useMergedFloatingRef.js.map +1 -1
- package/dist/hooks/usePresence.d.ts.map +1 -1
- package/dist/hooks/usePresence.js +1 -0
- package/dist/hooks/usePresence.js.map +1 -1
- package/dist/hooks/useStack.d.ts.map +1 -1
- package/dist/hooks/useStack.js +34 -10
- package/dist/hooks/useStack.js.map +1 -1
- package/dist/hooks/useTheme.d.ts.map +1 -1
- package/dist/hooks/useTheme.js +1 -0
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/internal/PickerField.d.ts.map +1 -1
- package/dist/internal/PickerField.js +1 -0
- package/dist/internal/PickerField.js.map +1 -1
- package/dist/internal/SegmentedField.d.ts.map +1 -1
- package/dist/internal/SegmentedField.js +1 -0
- package/dist/internal/SegmentedField.js.map +1 -1
- package/dist/internal/brandScope.d.ts +25 -0
- package/dist/internal/brandScope.d.ts.map +1 -0
- package/dist/internal/brandScope.js +37 -0
- package/dist/internal/brandScope.js.map +1 -0
- package/dist/internal/escapeLayers.d.ts +12 -0
- package/dist/internal/escapeLayers.d.ts.map +1 -0
- package/dist/internal/escapeLayers.js +48 -0
- package/dist/internal/escapeLayers.js.map +1 -0
- package/dist/lib/ErrorBoundary.d.ts.map +1 -1
- package/dist/lib/ErrorBoundary.js +1 -0
- package/dist/lib/ErrorBoundary.js.map +1 -1
- package/dist/lib/contexts/ComponentsContext/ComponentsContext.d.ts.map +1 -1
- package/dist/lib/contexts/ComponentsContext/ComponentsContext.js +1 -0
- package/dist/lib/contexts/ComponentsContext/ComponentsContext.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/OverlayContext.d.ts +9 -4
- package/dist/lib/contexts/OverlayContext/OverlayContext.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/OverlayContext.js +25 -12
- package/dist/lib/contexts/OverlayContext/OverlayContext.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/ToastStack.d.ts +20 -0
- package/dist/lib/contexts/OverlayContext/ToastStack.d.ts.map +1 -0
- package/dist/lib/contexts/OverlayContext/ToastStack.js +45 -0
- package/dist/lib/contexts/OverlayContext/ToastStack.js.map +1 -0
- package/dist/lib/contexts/OverlayContext/hooks/useModal.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/hooks/useModal.js +1 -0
- package/dist/lib/contexts/OverlayContext/hooks/useModal.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/hooks/useToast.d.ts +27 -10
- package/dist/lib/contexts/OverlayContext/hooks/useToast.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/hooks/useToast.js +31 -49
- package/dist/lib/contexts/OverlayContext/hooks/useToast.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/index.d.ts +2 -0
- package/dist/lib/contexts/OverlayContext/index.d.ts.map +1 -1
- package/dist/lib/contexts/OverlayContext/index.js +2 -0
- package/dist/lib/contexts/OverlayContext/index.js.map +1 -1
- package/dist/lib/contexts/OverlayContext/toastStore.d.ts +68 -0
- package/dist/lib/contexts/OverlayContext/toastStore.d.ts.map +1 -0
- package/dist/lib/contexts/OverlayContext/toastStore.js +69 -0
- package/dist/lib/contexts/OverlayContext/toastStore.js.map +1 -0
- package/dist/lib/withErrorBoundary.d.ts.map +1 -1
- package/dist/lib/withErrorBoundary.js +1 -0
- package/dist/lib/withErrorBoundary.js.map +1 -1
- package/dist/lib/withSuspenseAndErrorBoundary.d.ts.map +1 -1
- package/dist/lib/withSuspenseAndErrorBoundary.js +1 -0
- package/dist/lib/withSuspenseAndErrorBoundary.js.map +1 -1
- package/dist/{theme/schema.d.ts → theming/vocabulary.d.ts} +4 -4
- package/dist/theming/vocabulary.d.ts.map +1 -0
- package/dist/{theme/schema.js → theming/vocabulary.js} +4 -4
- package/dist/theming/vocabulary.js.map +1 -0
- package/package.json +18 -6
- package/src/components/Badge/Badge.tsx +12 -6
- package/src/components/Button/Button.tsx +25 -5
- package/src/{theme/recipes/button.css → components/Button/button.recipe.css} +2 -2
- package/src/components/Calendar/Calendar.tsx +2 -0
- package/src/components/Calendar/CalendarView.tsx +2 -0
- package/src/components/Calendar/calendar.hooks.ts +2 -0
- package/src/components/Card/Card.tsx +4 -2
- package/src/components/Checkbox/Checkbox.tsx +2 -0
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +2 -0
- package/src/components/Code/Editor/Editor.tsx +2 -0
- package/src/components/Code/Workspace/StatusBar.tsx +2 -0
- package/src/components/Code/Workspace/Toolbar.tsx +2 -0
- package/src/components/Code/Workspace/Workspace.tsx +2 -0
- package/src/components/DatePicker/DatePicker.tsx +10 -0
- package/src/components/DatePicker/DateSegments.tsx +2 -0
- package/src/components/DatePicker/datepicker.hooks.ts +2 -0
- package/src/components/DateRangePicker/DateRangePicker.tsx +2 -0
- package/src/components/DateTimePicker/DateTimePicker.tsx +10 -1
- package/src/components/DateTimePicker/DateTimeSegments.tsx +2 -0
- package/src/components/DateTimeRangePicker/DateTimeRangePicker.tsx +10 -1
- package/src/components/FormField/FormField.tsx +94 -42
- package/src/components/FormField/index.ts +2 -2
- package/src/components/HoverCard/HoverCard.tsx +5 -0
- package/src/components/HoverCard/components/HoverCardContent.tsx +13 -3
- package/src/components/HoverCard/components/HoverCardContext.tsx +4 -0
- package/src/components/HoverCard/components/HoverCardTrigger.tsx +2 -0
- package/src/components/Message/Message.tsx +27 -23
- package/src/components/Modal/Modal.tsx +88 -51
- package/src/components/Modal/components/ModalContext.tsx +2 -0
- package/src/components/Modal/components/ModalHeader.tsx +2 -0
- package/src/components/Popover/Popover.tsx +10 -0
- package/src/components/Popover/components/PopoverBody.tsx +13 -3
- package/src/components/Popover/components/PopoverClose.tsx +2 -0
- package/src/components/Popover/components/PopoverContext.tsx +4 -0
- package/src/components/Popover/components/PopoverTrigger.tsx +2 -0
- package/src/components/RadioButton/RadioButton.tsx +2 -0
- package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +2 -0
- package/src/components/SearchInput/SearchInput.tsx +15 -8
- package/src/components/Select/Select.tsx +27 -2
- package/src/components/Select/SelectDropdown.tsx +6 -0
- package/src/components/Select/SelectTrigger.tsx +5 -0
- package/src/components/Select/useSelectKeyboard.ts +2 -0
- package/src/components/Sheet/Sheet.tsx +59 -34
- package/src/components/Sheet/components/SheetContext.tsx +2 -0
- package/src/components/Sheet/components/SheetHeader.tsx +2 -0
- package/src/components/Spinner/Spinner.tsx +2 -2
- package/src/components/Switch/Switch.tsx +2 -0
- package/src/components/Tabs/Tabs.tsx +2 -0
- package/src/components/Tabs/components/TabsContext.tsx +2 -0
- package/src/components/Tabs/components/TabsList.tsx +2 -0
- package/src/components/Tabs/components/TabsPanels.tsx +2 -0
- package/src/components/Tabs/components/TabsTrigger.tsx +3 -1
- package/src/{theme/recipes/tabs.css → components/Tabs/tabs.recipe.css} +1 -1
- package/src/components/TagChip/TagChip.tsx +2 -0
- package/src/components/TagInput/TagInput.tsx +15 -6
- package/src/components/Textarea/Textarea.tsx +42 -6
- package/src/{theme/recipes/textarea.css → components/Textarea/textarea.recipe.css} +1 -1
- package/src/components/TimePicker/PeriodSelector.tsx +2 -0
- package/src/components/TimePicker/TimeColumn.tsx +2 -0
- package/src/components/TimePicker/TimePicker.tsx +10 -0
- package/src/components/TimePicker/TimeSegments.tsx +2 -0
- package/src/components/Toast/Toast.tsx +26 -6
- package/src/components/Toggle/Toggle.tsx +20 -3
- package/src/components/ToggleGroup/ToggleGroupMultiple.tsx +8 -1
- package/src/components/ToggleGroup/ToggleGroupSingle.tsx +8 -0
- package/src/components/ToggleGroup/toggleGroup.types.ts +13 -0
- package/src/components/Tooltip/Tooltip.tsx +5 -0
- package/src/components/Tooltip/components/TooltipBody.tsx +13 -3
- package/src/components/Tooltip/components/TooltipContext.tsx +4 -0
- package/src/components/Tooltip/components/TooltipTrigger.tsx +2 -0
- package/src/hooks/useCollapsible.ts +2 -0
- package/src/hooks/useControllableState.ts +2 -0
- package/src/hooks/useDebouncedCallback.ts +2 -0
- package/src/hooks/useDebouncedState.ts +2 -0
- package/src/hooks/useDeviceFormFactor.ts +2 -0
- package/src/hooks/useLocalStorage.ts +2 -0
- package/src/hooks/useMergedFloatingRef.ts +2 -0
- package/src/hooks/usePresence.ts +2 -0
- package/src/hooks/useStack.ts +35 -12
- package/src/hooks/useTheme.ts +2 -0
- package/src/internal/PickerField.tsx +2 -0
- package/src/internal/SegmentedField.tsx +2 -0
- package/src/internal/brandScope.ts +39 -0
- package/src/internal/escapeLayers.ts +53 -0
- package/src/lib/ErrorBoundary.tsx +2 -0
- package/src/lib/contexts/ComponentsContext/ComponentsContext.tsx +2 -0
- package/src/lib/contexts/OverlayContext/OverlayContext.tsx +42 -26
- package/src/lib/contexts/OverlayContext/ToastStack.tsx +71 -0
- package/src/lib/contexts/OverlayContext/hooks/useModal.tsx +2 -0
- package/src/lib/contexts/OverlayContext/hooks/useToast.ts +30 -73
- package/src/lib/contexts/OverlayContext/index.ts +2 -0
- package/src/lib/contexts/OverlayContext/toastStore.ts +138 -0
- package/src/lib/withErrorBoundary.tsx +2 -0
- package/src/lib/withSuspenseAndErrorBoundary.tsx +2 -0
- package/src/theme/linen/index.css +11 -0
- package/src/theme/linen/palette.css +87 -0
- package/src/theme/linen/theme.css +371 -0
- package/src/theming/tailwind.css +356 -0
- package/src/{theme/schema.ts → theming/vocabulary.ts} +3 -3
- package/dist/theme/index.d.ts +0 -9
- package/dist/theme/index.d.ts.map +0 -1
- package/dist/theme/index.js +0 -8
- package/dist/theme/index.js.map +0 -1
- package/dist/theme/schema.d.ts.map +0 -1
- package/dist/theme/schema.js.map +0 -1
- package/src/theme/index.ts +0 -39
- package/src/theme/recipes/index.css +0 -28
- package/src/theme/tokens.css +0 -824
- /package/src/{theme/recipes/badge.css → components/Badge/badge.recipe.css} +0 -0
- /package/src/{theme/recipes/card.css → components/Card/card.recipe.css} +0 -0
- /package/src/{theme/recipes/checkbox.css → components/Checkbox/checkbox.recipe.css} +0 -0
- /package/src/{theme/recipes/field.css → components/Field/field.recipe.css} +0 -0
- /package/src/{theme/recipes/input.css → components/Input/input.recipe.css} +0 -0
- /package/src/{theme/recipes/message.css → components/Message/message.recipe.css} +0 -0
- /package/src/{theme/recipes/modal.css → components/Modal/modal.recipe.css} +0 -0
- /package/src/{theme/recipes/radio-button.css → components/RadioButton/radio-button.recipe.css} +0 -0
- /package/src/{theme/recipes/search-input.css → components/SearchInput/search-input.recipe.css} +0 -0
- /package/src/{theme/recipes/select.css → components/Select/select.recipe.css} +0 -0
- /package/src/{theme/recipes/sheet.css → components/Sheet/sheet.recipe.css} +0 -0
- /package/src/{theme/recipes/spinner.css → components/Spinner/spinner.recipe.css} +0 -0
- /package/src/{theme/recipes/switch.css → components/Switch/switch.recipe.css} +0 -0
- /package/src/{theme/recipes/tag-chip.css → components/TagChip/tag-chip.recipe.css} +0 -0
- /package/src/{theme/recipes/toggle.css → components/Toggle/toggle.recipe.css} +0 -0
package/README.md
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Personal design system: design tokens, theme pipeline, and a React component library. Consumed as a versioned dependency (MUI-style), configured through the theme surface — never by editing component source in the consumer.
|
|
4
4
|
|
|
5
|
-
A single package, `@sixthshift/design-system`: ~80 components (primitives, overlays, forms, pickers, charts, typography) + a
|
|
5
|
+
A single package, `@sixthshift/design-system`: ~80 components (primitives, overlays, forms, pickers, charts, typography) + a two-layer CSS token pipeline + Tailwind config. Built on [shadcn/ui](https://ui.shadcn.com) patterns.
|
|
6
6
|
|
|
7
7
|
Browse the components: **[sixthshift.github.io/design-system](https://sixthshift.github.io/design-system/)** — Storybook, rebuilt from `main` by `.github/workflows/pages.yml`.
|
|
8
8
|
|
|
9
9
|
## Orientation
|
|
10
10
|
|
|
11
|
-
**Owns:** The component library — 80+ exports via subpath imports, design tokens, theme system (
|
|
11
|
+
**Owns:** The component library — 80+ exports via subpath imports, design tokens, theme system (two CSS token layers — semantic and component — authored over a palette convention), Tailwind config, and Storybook stories. Components span primitives, composites, typography, charts, and overlays.
|
|
12
12
|
|
|
13
13
|
**Boundaries:** Bundles a `./date-time` module (`@sixthshift/design-system/date-time`, wrapping `@js-temporal/polyfill`) used internally by the date/time components — those components exchange ISO 8601 strings, so consuming one does not require adopting Temporal. Also Floating UI (popover/tooltip positioning) and CVA (variant styling). Peer-depends on React 18 or 19. No app/domain coupling — domain-specific components live in consuming apps.
|
|
14
14
|
|
|
@@ -23,7 +23,7 @@ npm install @sixthshift/design-system
|
|
|
23
23
|
```css
|
|
24
24
|
/* your CSS entry — Tailwind 4 is a required peer */
|
|
25
25
|
@import "tailwindcss";
|
|
26
|
-
@import "@sixthshift/design-system/
|
|
26
|
+
@import "@sixthshift/design-system/themes/linen.css";
|
|
27
27
|
@source "../node_modules/@sixthshift/design-system";
|
|
28
28
|
```
|
|
29
29
|
|
|
@@ -36,12 +36,60 @@ system's tokens and takes over a few globals. See
|
|
|
36
36
|
import { Button } from "@sixthshift/design-system/button";
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
-
**What ships:** compiled ESM (`.js`) plus type declarations (`.d.ts`) in `dist/`, and the tokens as CSS. No prebuilt stylesheet: the components are Tailwind classes, so your build compiles them from the `@theme` block
|
|
39
|
+
**What ships:** compiled ESM (`.js`) plus type declarations (`.d.ts`) in `dist/`, and the tokens as CSS. No prebuilt stylesheet: the components are Tailwind classes, so your build compiles them from the `@theme` block the theme import brings with it. Nothing runs on install and no consumer toolchain has to transpile this package. The module tree is preserved rather than bundled, so subpath imports still tree-shake.
|
|
40
|
+
|
|
41
|
+
That last sentence is measured, not asserted. `bun run check:size` bundles ten
|
|
42
|
+
representative subpaths in isolation and holds each to a committed budget —
|
|
43
|
+
`/button` is 9.9 kB gzipped and cannot reach Floating UI, Temporal or Monaco;
|
|
44
|
+
`/code-editor` is 2.5 kB because Monaco stays an optional peer. Tree-shaking is
|
|
45
|
+
doing real work: lucide-react is 1.4 MB of source and contributes 1.6 kB to
|
|
46
|
+
`/date-picker`. `bun run scripts/check-size.ts --why ./button` breaks any entry
|
|
47
|
+
down by what actually survives into the bundle.
|
|
40
48
|
|
|
41
49
|
TypeScript sources are published too, but only as the target of the declaration and source maps — nothing resolves to them. Go-to-definition lands on real `.tsx`, and stack traces map back to it.
|
|
42
50
|
|
|
43
51
|
**Module resolution:** subpath types only resolve under `"moduleResolution": "bundler"`, `"node16"`, or `"nodenext"` in `tsconfig.json`. The older `"node"` setting ignores the `exports` map entirely and fails with `TS2307` on every subpath. The package is also ESM-only — every `exports` entry has an `"import"` condition and nothing else, so `require("@sixthshift/design-system/button")` fails with `ERR_PACKAGE_PATH_NOT_EXPORTED`. A CJS test runner (e.g. Jest without ESM configured) needs to be set up for ESM before it can import this package.
|
|
44
52
|
|
|
53
|
+
Those four sentences are enforced, not just written down. `bun run check:consumer-resolution`
|
|
54
|
+
type-checks [a real consumer](fixtures/consumer-resolution/consumer.tsx) — importing
|
|
55
|
+
by package name, so resolution goes through `exports` — under each of
|
|
56
|
+
`bundler`, `node16` and `nodenext`, and asserts that `node10` still fails with
|
|
57
|
+
`TS2307` on every subpath. `bun run check:published` runs
|
|
58
|
+
[publint](https://publint.dev) and [arethetypeswrong](https://arethetypeswrong.github.io)
|
|
59
|
+
over the packed tarball and holds all 69 subpath entries to the same
|
|
60
|
+
`{ types, import }` shape, so an accidental `require` condition cannot slip in.
|
|
61
|
+
Both run in CI.
|
|
62
|
+
|
|
63
|
+
### Server Components / Next.js App Router
|
|
64
|
+
|
|
65
|
+
Nothing to configure — import components straight into a server file:
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
// app/page.tsx — a Server Component, no "use client" needed
|
|
69
|
+
import { Button } from "@sixthshift/design-system/button";
|
|
70
|
+
import { Heading } from "@sixthshift/design-system/heading";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Every module that needs a client boundary carries its own `"use client"`
|
|
74
|
+
prologue, placed on the implementation module rather than the subpath entry. So
|
|
75
|
+
the boundary starts where the interactivity does: `Heading`, `Body`, `Text`,
|
|
76
|
+
`Badge`, `Input`, `Spinner` and the rest of the static surface render on the
|
|
77
|
+
server and ship no JS, while `Switch`, `Select`, `Card`, the pickers and the
|
|
78
|
+
overlays become client components at the point you use them.
|
|
79
|
+
|
|
80
|
+
Two consequences worth knowing:
|
|
81
|
+
|
|
82
|
+
- **Event handlers still can't cross the boundary.** `<Button onClick={...} />`
|
|
83
|
+
needs `"use client"` in *your* file — that is React's rule about passing
|
|
84
|
+
functions to Client Components, not something this package can lift.
|
|
85
|
+
- **Hooks are client-only.** `@sixthshift/design-system/hooks`,
|
|
86
|
+
`useModal`/`useToast`, and `OverlayProvider` have to be called from a client
|
|
87
|
+
component.
|
|
88
|
+
|
|
89
|
+
A DOM-less `renderToString` pass over every component story runs in CI
|
|
90
|
+
(`bun run test`, the `ssr` project), and `bun run check:use-client` fails the
|
|
91
|
+
build on a missing or spurious directive.
|
|
92
|
+
|
|
45
93
|
### Peer dependencies
|
|
46
94
|
|
|
47
95
|
`react`, `react-dom` and `tailwindcss` are the required peers — React at **18 or 19**, Tailwind at **4**. CI runs the type-check and the full unit suite against both React versions on every change, so that range is verified rather than merely declared.
|
|
@@ -181,27 +229,44 @@ ISO helpers above cover what they were reachable for.
|
|
|
181
229
|
|
|
182
230
|
## Theming
|
|
183
231
|
|
|
184
|
-
Tokens are CSS
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
232
|
+
Tokens are CSS. The theme is a folder under `src/theme/` — `palette.css` (raw
|
|
233
|
+
scales) plus `theme.css` (semantic tokens per mode) — plus one import of the
|
|
234
|
+
shared, theme-independent system (`theming/tailwind.css`, which carries the
|
|
235
|
+
component recipes and the Tailwind config), published as `themes/linen.css`. **Linen** is
|
|
236
|
+
the system's one theme: one warm temperature through everything, the grey
|
|
237
|
+
included, consolidated from the `plans/10` palette explorations (the six
|
|
238
|
+
alternatives live at the `themes-exploration` git tag). The artifact holds the palette, the semantic tokens for each mode, and the
|
|
239
|
+
`@theme` block that tells Tailwind which utilities exist — so a token and its
|
|
240
|
+
utility can never disagree.
|
|
188
241
|
|
|
189
242
|
Light/dark switch via the `data-theme` attribute on the root element. Consumers
|
|
190
243
|
restyle by overriding CSS variables at runtime — component source stays
|
|
191
|
-
untouched.
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
244
|
+
untouched. The
|
|
245
|
+
[Theme page in Storybook](https://sixthshift.github.io/design-system/?path=/docs/design-system-theme--docs)
|
|
246
|
+
emits a starting theme file for you to copy — every token, pre-filled with the
|
|
247
|
+
shipped values — and lists every variable the system declares. The
|
|
248
|
+
[Theming page](https://sixthshift.github.io/design-system/?path=/docs/design-system-theming--docs)
|
|
249
|
+
is the guide to what the names mean; [docs/design-tokens.md](docs/design-tokens.md)
|
|
250
|
+
is the architecture behind both.
|
|
251
|
+
|
|
252
|
+
Tokens come in two layers, and the one you reach for depends on the *kind* of
|
|
195
253
|
change you are making:
|
|
196
254
|
|
|
197
|
-
|
|
|
255
|
+
| Layer | Example | Change it to | Scope |
|
|
198
256
|
| --- | --- | --- | --- |
|
|
199
|
-
|
|
|
200
|
-
|
|
|
201
|
-
| Component | `--button-bg` | **re-wire** — *this* part uses a different meaning | one component, or one subtree |
|
|
257
|
+
| Semantic (`theme.css`) | `--bg-brand` | **re-skin** — brand is now purple | every surface that means "brand" |
|
|
258
|
+
| Component (recipes) | `--button-bg` | **re-wire** — *this* part uses a different meaning | one component, or one subtree |
|
|
202
259
|
|
|
203
|
-
|
|
204
|
-
|
|
260
|
+
The semantic layer *is* the theme, and it is the default way to restyle anything
|
|
261
|
+
that has a name and recurs. Re-skinning is a token *value* change and it is
|
|
262
|
+
global by design. Re-wiring is a recipe change, the exception card — if you find
|
|
263
|
+
yourself writing the same component-token override in more than one scope,
|
|
264
|
+
you are doing semantic work at the component layer: hoist it.
|
|
265
|
+
|
|
266
|
+
Behind the semantic layer sits a palette (`--color-blue-600` and friends). It is
|
|
267
|
+
an authoring convention that keeps the theme's values coordinated — not a third
|
|
268
|
+
layer: components never reference it, and it is not API for consumers either.
|
|
269
|
+
Reach for a semantic token or bring your own value.
|
|
205
270
|
|
|
206
271
|
### Tailwind integration
|
|
207
272
|
|
|
@@ -232,85 +297,55 @@ non-optional peer dependency.
|
|
|
232
297
|
### Restyling a component
|
|
233
298
|
|
|
234
299
|
Every component reads its colours from its own tokens rather than naming a
|
|
235
|
-
semantic token directly. `Button`
|
|
236
|
-
|
|
300
|
+
semantic token directly. `Button` paints `var(--button-bg)`, and a recipe in the
|
|
301
|
+
published stylesheet decides what that resolves to for each cell:
|
|
237
302
|
|
|
238
303
|
```css
|
|
239
304
|
/* what ships, in @layer components */
|
|
240
|
-
.btn[data-variant="solid"][data-intent="
|
|
305
|
+
.btn[data-variant="solid"][data-intent="brand"] {
|
|
241
306
|
--button-bg: var(--bg-brand);
|
|
242
307
|
--button-bg-hovered: var(--bg-brand-hovered);
|
|
243
308
|
--button-fg: var(--fg-on-brand);
|
|
244
309
|
}
|
|
245
310
|
```
|
|
246
311
|
|
|
247
|
-
That recipe is data, not compiled-in class names, so
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
<Button style={{ "--button-bg": "var(--bg-strong)" } as React.CSSProperties} />
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
```css
|
|
256
|
-
/* one subtree — impossible with token values, which are global */
|
|
257
|
-
.checkout .btn[data-intent="neutral"] { --button-bg: var(--bg-success); }
|
|
258
|
-
|
|
259
|
-
/* one cell, app-wide — reject a house opinion */
|
|
260
|
-
.btn[data-variant="link"][data-intent="neutral"] { --button-fg: var(--fg-normal); }
|
|
261
|
-
|
|
262
|
-
/* every button */
|
|
263
|
-
.btn { --button-bg-hovered: var(--button-bg); } /* no hover shift, anywhere */
|
|
264
|
-
```
|
|
265
|
-
|
|
266
|
-
**Write your overrides unlayered.** The cascade compares layers *before*
|
|
267
|
-
specificity, and unlayered author CSS outranks any layered author CSS — which is
|
|
268
|
-
why a bare `.btn { … }` beats the library's three-attribute selector without an
|
|
269
|
-
`!important`. The corollary is the trap: wrap the same rule in
|
|
270
|
-
`@layer components` (a Tailwind 3 habit) and it lands in the library's own layer,
|
|
271
|
-
where specificity decides again and your override silently loses on every cell
|
|
272
|
-
the library ships.
|
|
273
|
-
|
|
274
|
-
#### Adding an intent the library never shipped
|
|
312
|
+
That recipe is data, not compiled-in class names, so any cell can be re-pointed
|
|
313
|
+
from your own stylesheet — one instance, one subtree, one cell app-wide, or
|
|
314
|
+
every instance. **Write component-token overrides in `@layer overrides`** — a
|
|
315
|
+
layer the theme declares last, so it outranks the recipes (`components`) and
|
|
316
|
+
the utilities by layer order alone:
|
|
275
317
|
|
|
276
318
|
```css
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
--button-bg: var(--bg-info);
|
|
285
|
-
--button-fg: var(--fg-on-info);
|
|
319
|
+
@layer overrides {
|
|
320
|
+
.checkout-confirm {
|
|
321
|
+
--button-bg: var(--bg-success);
|
|
322
|
+
--button-bg-hovered: var(--bg-success-hovered);
|
|
323
|
+
--button-bg-pressed: var(--bg-success-pressed);
|
|
324
|
+
--button-fg: var(--fg-on-success);
|
|
325
|
+
}
|
|
286
326
|
}
|
|
287
327
|
```
|
|
288
328
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
Intent and variant never appear in a token *name*; they select via the `data-*`
|
|
307
|
-
attributes. That is what lets you add one.
|
|
308
|
-
|
|
309
|
-
**These names are public API** and change only under semver, like any export.
|
|
329
|
+
No selector mimicry, no `!important`: the cascade compares layers before
|
|
330
|
+
specificity, so one plain class beats the recipe's three-attribute selector.
|
|
331
|
+
Unlayered CSS still wins over everything, so existing unlayered overrides keep
|
|
332
|
+
working. One asymmetry to know: **semantic-token re-skins stay unlayered** —
|
|
333
|
+
the theme's own `:root` blocks are unlayered, and unlayered library CSS beats
|
|
334
|
+
any layered rule of yours, so a re-skin wrapped in `@layer` silently loses.
|
|
335
|
+
Rule of thumb: component vars → `@layer overrides`; semantic tokens → plain
|
|
336
|
+
CSS after the import.
|
|
337
|
+
|
|
338
|
+
**The semantic layer — the naming grammar, what each token means, the
|
|
339
|
+
utilities they compile into, light and dark, and re-skinning — is the
|
|
340
|
+
[Theming page in Storybook](https://sixthshift.github.io/design-system/?path=/docs/design-system-theming--docs).**
|
|
341
|
+
The component-token techniques above are running live, with controls, under
|
|
342
|
+
[Component Tokens](https://sixthshift.github.io/design-system/?path=/docs/design-system-component-tokens--docs).
|
|
343
|
+
Component token names are public API and change only under semver;
|
|
344
|
+
`bun run check:recipes --list` prints them all.
|
|
310
345
|
|
|
311
346
|
### What the theme takes over
|
|
312
347
|
|
|
313
|
-
This is a design system, not a component grab-bag: importing
|
|
348
|
+
This is a design system, not a component grab-bag: importing a theme adopts
|
|
314
349
|
its opinions across your whole app, not just inside its components. All of it is
|
|
315
350
|
deliberate, and all of it is worth knowing before you commit.
|
|
316
351
|
|
|
@@ -320,14 +355,14 @@ deliberate, and all of it is worth knowing before you commit.
|
|
|
320
355
|
| **`dark:` means `[data-theme="dark"]`** | Not `prefers-color-scheme`. Theming here is a runtime attribute swap, so every `dark:` utility in your app follows the attribute instead of the OS setting. |
|
|
321
356
|
| **`font-sans` and `font-mono`** | Resolve to Inter Variable and JetBrains Mono. Install the [font peers](#fonts) or the stacks fall through to the system defaults. |
|
|
322
357
|
| **Three global rules** | `*` gets `border-color: var(--border-normal)`, so a bare `border` is the token colour rather than `currentColor`; `:focus-visible` gets the system focus ring; and under `prefers-reduced-motion` every animation and transition is pinned to `0.01ms`. These apply to your elements as well as ours. |
|
|
323
|
-
| **`--color-{
|
|
358
|
+
| **`--color-{blue,green,amber,red}-*`** | 44 variable names shared with Tailwind's palette hold this system's values. Only reachable if you read the variables directly in your own CSS — don't: the palette is an authoring convention, not API, and its names can change without a major version. |
|
|
324
359
|
|
|
325
360
|
If you want a specific stock colour back, re-declare it in your own `@theme`
|
|
326
361
|
block after the import — everything you do not name stays gone:
|
|
327
362
|
|
|
328
363
|
```css
|
|
329
364
|
@import "tailwindcss";
|
|
330
|
-
@import "@sixthshift/design-system/
|
|
365
|
+
@import "@sixthshift/design-system/themes/linen.css";
|
|
331
366
|
|
|
332
367
|
@theme {
|
|
333
368
|
--color-red-500: oklch(63.7% 0.237 25.331);
|
|
@@ -337,11 +372,12 @@ block after the import — everything you do not name stays gone:
|
|
|
337
372
|
## Development
|
|
338
373
|
|
|
339
374
|
```bash
|
|
340
|
-
bun install
|
|
341
|
-
bun run dev
|
|
342
|
-
bun run test
|
|
343
|
-
bun run
|
|
344
|
-
bun run check
|
|
375
|
+
bun install # `prepare` builds JS, types and styles into dist/
|
|
376
|
+
bun run dev # component workbench on :6006
|
|
377
|
+
bun run test # unit + date-time + server-render (ssr) tests
|
|
378
|
+
bun run test:coverage # the same suite, with the coverage gate CI enforces
|
|
379
|
+
bun run type-check # tsc --noEmit (src and tests)
|
|
380
|
+
bun run check # biome lint + format
|
|
345
381
|
```
|
|
346
382
|
|
|
347
383
|
## Structure
|
|
@@ -363,6 +399,15 @@ src/
|
|
|
363
399
|
|
|
364
400
|
Semver via git tags (`v0.1.0`, ...). Component props **and token names** are public API — renaming a token is a breaking change.
|
|
365
401
|
|
|
402
|
+
[`api/public-api.txt`](api/public-api.txt) is what makes that checkable rather
|
|
403
|
+
than merely stated: every subpath's exports, the resolved shape of every type,
|
|
404
|
+
and all 443 token names, in one committed file. `bun run check:api` regenerates
|
|
405
|
+
it from `dist/` and fails if it differs, so a rename or removal arrives as a diff
|
|
406
|
+
in the pull request. `bun run api:update` accepts an intentional change. This is
|
|
407
|
+
worth more here than in most packages because the bump is derived from the commit
|
|
408
|
+
*subject* and releases are unattended — a rename filed as `refactor:` cuts a
|
|
409
|
+
patch and ships to consumers with no human in between.
|
|
410
|
+
|
|
366
411
|
Versioning and releasing are automatic, driven by
|
|
367
412
|
[Conventional Commit](https://www.conventionalcommits.org) subjects and derived
|
|
368
413
|
by `scripts/next-version.ts`.
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
* Geometry and behaviour only.
|
|
5
5
|
*
|
|
6
6
|
* Every colour reads a `--badge-*` component token whose value is decided by
|
|
7
|
-
* src/
|
|
7
|
+
* src/components/Badge/badge.recipe.css. That file is the mapping from
|
|
8
8
|
* `(variant, intent)` to a semantic token — the layer that used to be
|
|
9
9
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
10
10
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
@@ -31,19 +31,25 @@ export type BadgeIntent = Loose<BadgeIntentName>;
|
|
|
31
31
|
export type BadgeRecipeProps = VariantProps<typeof badgeVariants> & {
|
|
32
32
|
variant?: BadgeVariant | undefined;
|
|
33
33
|
intent?: BadgeIntent | undefined;
|
|
34
|
+
/** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
|
|
35
|
+
brand?: string | undefined;
|
|
34
36
|
className?: string | undefined;
|
|
35
37
|
};
|
|
36
38
|
/**
|
|
37
|
-
* The class string plus the
|
|
39
|
+
* The class string plus the attributes the recipe selects on. `data-brand` is
|
|
40
|
+
* omitted unless `brand` is set, same as `buttonRecipe`.
|
|
38
41
|
*/
|
|
39
|
-
export declare function badgeRecipe({ variant, intent, className }: BadgeRecipeProps): {
|
|
42
|
+
export declare function badgeRecipe({ variant, intent, brand, className }: BadgeRecipeProps): {
|
|
40
43
|
className: string;
|
|
41
44
|
"data-variant": BadgeVariant;
|
|
42
45
|
"data-intent": BadgeIntent;
|
|
46
|
+
"data-brand": string | undefined;
|
|
43
47
|
};
|
|
44
48
|
export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
45
49
|
variant?: BadgeVariant | undefined;
|
|
46
50
|
intent?: BadgeIntent | undefined;
|
|
51
|
+
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
|
|
52
|
+
brand?: string | undefined;
|
|
47
53
|
};
|
|
48
54
|
/**
|
|
49
55
|
* Small label for status, category, or count.
|
|
@@ -56,13 +62,15 @@ export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
|
56
62
|
* does not manage an accessible name of its own.
|
|
57
63
|
*
|
|
58
64
|
* Colour is not decided here: each `(variant, intent)` pairing resolves
|
|
59
|
-
* through a `--badge-*` component token (src/
|
|
65
|
+
* through a `--badge-*` component token (src/components/Badge/badge.recipe.css), the
|
|
60
66
|
* same seam Button uses, so a consumer can re-point a cell without a
|
|
61
67
|
* release.
|
|
62
68
|
*/
|
|
63
69
|
export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
64
70
|
variant?: BadgeVariant | undefined;
|
|
65
71
|
intent?: BadgeIntent | undefined;
|
|
72
|
+
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the badge follows the nearest `data-brand` ancestor. */
|
|
73
|
+
brand?: string | undefined;
|
|
66
74
|
} & React.RefAttributes<HTMLSpanElement>>;
|
|
67
75
|
export { badgeVariants };
|
|
68
76
|
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.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,aAAa,2FAOlB,CAAC;AAcF;;;;GAIG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC5D;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/F,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.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,aAAa,2FAOlB,CAAC;AAcF;;;;GAIG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAC5D;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC/F,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,eAAe,CAAC,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAClE,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,OAAiB,EAAE,MAAgB,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB;;;;;EAOtG;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IAC/D,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACjC,iIAAiI;IACjI,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;cArBN,YAAY,GAAG,SAAS;aACzB,WAAW,GAAG,SAAS;IAChC,iIAAiI;YACzH,MAAM,GAAG,SAAS;yCAoB1B,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -6,7 +6,7 @@ import * as React from "react";
|
|
|
6
6
|
* Geometry and behaviour only.
|
|
7
7
|
*
|
|
8
8
|
* Every colour reads a `--badge-*` component token whose value is decided by
|
|
9
|
-
* src/
|
|
9
|
+
* src/components/Badge/badge.recipe.css. That file is the mapping from
|
|
10
10
|
* `(variant, intent)` to a semantic token — the layer that used to be
|
|
11
11
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
12
12
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
@@ -30,13 +30,15 @@ const variantStructure = {
|
|
|
30
30
|
outline: "",
|
|
31
31
|
};
|
|
32
32
|
/**
|
|
33
|
-
* The class string plus the
|
|
33
|
+
* The class string plus the attributes the recipe selects on. `data-brand` is
|
|
34
|
+
* omitted unless `brand` is set, same as `buttonRecipe`.
|
|
34
35
|
*/
|
|
35
|
-
export function badgeRecipe({ variant = "solid", intent = "brand", className }) {
|
|
36
|
+
export function badgeRecipe({ variant = "solid", intent = "brand", brand, className }) {
|
|
36
37
|
return {
|
|
37
38
|
className: cn(variantStructure[variant], badgeVariants({ className })),
|
|
38
39
|
"data-variant": variant,
|
|
39
40
|
"data-intent": intent,
|
|
41
|
+
"data-brand": brand,
|
|
40
42
|
};
|
|
41
43
|
}
|
|
42
44
|
/**
|
|
@@ -50,12 +52,12 @@ export function badgeRecipe({ variant = "solid", intent = "brand", className })
|
|
|
50
52
|
* does not manage an accessible name of its own.
|
|
51
53
|
*
|
|
52
54
|
* Colour is not decided here: each `(variant, intent)` pairing resolves
|
|
53
|
-
* through a `--badge-*` component token (src/
|
|
55
|
+
* through a `--badge-*` component token (src/components/Badge/badge.recipe.css), the
|
|
54
56
|
* same seam Button uses, so a consumer can re-point a cell without a
|
|
55
57
|
* release.
|
|
56
58
|
*/
|
|
57
|
-
export const Badge = React.forwardRef(({ className, variant = "solid", intent = "brand", ...props }, ref) => {
|
|
58
|
-
return _jsx("span", { ref: ref, ...badgeRecipe({ variant, intent, className }), ...props });
|
|
59
|
+
export const Badge = React.forwardRef(({ className, variant = "solid", intent = "brand", brand, ...props }, ref) => {
|
|
60
|
+
return _jsx("span", { ref: ref, ...badgeRecipe({ variant, intent, brand, className }), ...props });
|
|
59
61
|
});
|
|
60
62
|
Badge.displayName = "Badge";
|
|
61
63
|
export { badgeVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.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,aAAa,GAAG,GAAG;AACvB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,8PAA8P,EAC9P,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;CACZ,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.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,aAAa,GAAG,GAAG;AACvB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,8PAA8P,EAC9P,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,OAAO,EAAE,EAAE;CACZ,CAAC;AA6BF;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,SAAS,EAAoB;IACrG,OAAO;QACL,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;QACtE,cAAc,EAAE,OAAO;QACvB,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,KAAK;KACpB,CAAC;AACJ,CAAC;AASD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9I,OAAO,eAAM,GAAG,EAAE,GAAG,KAAM,WAAW,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,KAAM,KAAK,GAAI,CAAC;AAC/F,CAAC,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
* Geometry and behaviour only.
|
|
5
5
|
*
|
|
6
6
|
* Every colour reads a `--button-*` component token whose value is decided by
|
|
7
|
-
* src/
|
|
7
|
+
* src/components/Button/button.recipe.css. That file is the mapping from
|
|
8
8
|
* `(variant, intent, state)` to a semantic token — the layer that used to be
|
|
9
9
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
10
10
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
@@ -31,24 +31,36 @@ export type ButtonIntent = Loose<ButtonIntentName>;
|
|
|
31
31
|
export type ButtonRecipeProps = VariantProps<typeof buttonVariants> & {
|
|
32
32
|
variant?: ButtonVariant | undefined;
|
|
33
33
|
intent?: ButtonIntent | undefined;
|
|
34
|
+
/** Re-points this element's brand tokens to a brand the theme defines. See the Scoped brands docs. */
|
|
35
|
+
brand?: string | undefined;
|
|
34
36
|
iconOnly?: boolean | undefined;
|
|
35
37
|
className?: string | undefined;
|
|
36
38
|
};
|
|
37
39
|
/**
|
|
38
|
-
* The class string plus the
|
|
40
|
+
* The class string plus the attributes the recipe selects on.
|
|
41
|
+
*
|
|
42
|
+
* `data-brand` is only emitted when `brand` is set: `undefined` makes React
|
|
43
|
+
* omit the attribute, so the element takes its brand from its surroundings.
|
|
39
44
|
*
|
|
40
45
|
* Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
|
|
41
46
|
* data attributes are half the contract now, so anything reusing that look has
|
|
42
47
|
* to emit them as well or it lands on the recipe's floor instead of a cell.
|
|
43
48
|
*/
|
|
44
|
-
export declare function buttonRecipe({ variant, intent, size, iconOnly, className }: ButtonRecipeProps): {
|
|
49
|
+
export declare function buttonRecipe({ variant, intent, brand, size, iconOnly, className }: ButtonRecipeProps): {
|
|
45
50
|
className: string;
|
|
46
51
|
"data-variant": ButtonVariant;
|
|
47
52
|
"data-intent": ButtonIntent;
|
|
53
|
+
"data-brand": string | undefined;
|
|
48
54
|
};
|
|
49
55
|
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
|
|
50
56
|
variant?: ButtonVariant | undefined;
|
|
51
57
|
intent?: ButtonIntent | undefined;
|
|
58
|
+
/**
|
|
59
|
+
* Name of a brand the theme defines, rendered as `data-brand`. Re-points
|
|
60
|
+
* every brand token on this element, so `intent="brand"` takes that brand's
|
|
61
|
+
* colour. Omitted, the button follows the nearest `data-brand` ancestor.
|
|
62
|
+
*/
|
|
63
|
+
brand?: string | undefined;
|
|
52
64
|
/** Square the button at its current size, for an icon with no label. */
|
|
53
65
|
iconOnly?: boolean;
|
|
54
66
|
asChild?: boolean;
|
|
@@ -82,6 +94,11 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Varian
|
|
|
82
94
|
* `aria-label`, since there is no text to name it. It is a separate prop rather
|
|
83
95
|
* than a size, so `size="sm" iconOnly` is expressible.
|
|
84
96
|
*
|
|
97
|
+
* `brand` scopes the `brand` intent to one of the theme's named brands
|
|
98
|
+
* (`<Button intent="brand" brand="mint">`), for a theme with more than one
|
|
99
|
+
* brand colour. It renders `data-brand` and nothing else; the theme's CSS gives
|
|
100
|
+
* the name meaning, and an unknown name falls back to the surrounding brand.
|
|
101
|
+
*
|
|
85
102
|
* `asChild` renders the child element with Button's styling instead of a
|
|
86
103
|
* `<button>`, for links that should look like buttons. `loading` shows a spinner
|
|
87
104
|
* and disables the control, so it does not need `disabled` as well.
|
|
@@ -91,6 +108,12 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
|
|
|
91
108
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
92
109
|
variant?: ButtonVariant | undefined;
|
|
93
110
|
intent?: ButtonIntent | undefined;
|
|
111
|
+
/**
|
|
112
|
+
* Name of a brand the theme defines, rendered as `data-brand`. Re-points
|
|
113
|
+
* every brand token on this element, so `intent="brand"` takes that brand's
|
|
114
|
+
* colour. Omitted, the button follows the nearest `data-brand` ancestor.
|
|
115
|
+
*/
|
|
116
|
+
brand?: string | undefined;
|
|
94
117
|
/** Square the button at its current size, for an icon with no label. */
|
|
95
118
|
iconOnly?: boolean;
|
|
96
119
|
asChild?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc;;8EAoBnB,CAAC;AAiCF;;;;;;;;;GASG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc;;8EAoBnB,CAAC;AAiCF;;;;;;;;;GASG;AACH,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAiB,EAAE,MAAkB,EAAE,KAAK,EAAE,IAAI,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,iBAAiB;;;;;EAWlI;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACrE,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,QAAA,MAAM,MAAM;;;cAnDE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC;;;;OAIG;YACK,MAAM,GAAG,SAAS;IAC1B,wEAAwE;eAC7D,OAAO;cACR,OAAO;cACP,OAAO;2CAkEpB,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { Slot } from "../../internal/Slot.js";
|
|
|
7
7
|
* Geometry and behaviour only.
|
|
8
8
|
*
|
|
9
9
|
* Every colour reads a `--button-*` component token whose value is decided by
|
|
10
|
-
* src/
|
|
10
|
+
* src/components/Button/button.recipe.css. That file is the mapping from
|
|
11
11
|
* `(variant, intent, state)` to a semantic token — the layer that used to be
|
|
12
12
|
* `compoundVariants` here, where it was compiled into class-name literals and
|
|
13
13
|
* unreachable from outside. Nothing in this file names a colour, which is the
|
|
@@ -62,19 +62,23 @@ const iconOnlyGeometry = {
|
|
|
62
62
|
xl: "w-12 px-0",
|
|
63
63
|
};
|
|
64
64
|
/**
|
|
65
|
-
* The class string plus the
|
|
65
|
+
* The class string plus the attributes the recipe selects on.
|
|
66
|
+
*
|
|
67
|
+
* `data-brand` is only emitted when `brand` is set: `undefined` makes React
|
|
68
|
+
* omit the attribute, so the element takes its brand from its surroundings.
|
|
66
69
|
*
|
|
67
70
|
* Shared with Toggle and ToggleGroupItem, which are built on Button's look. The
|
|
68
71
|
* data attributes are half the contract now, so anything reusing that look has
|
|
69
72
|
* to emit them as well or it lands on the recipe's floor instead of a cell.
|
|
70
73
|
*/
|
|
71
|
-
export function buttonRecipe({ variant = "solid", intent = "neutral", size, iconOnly = false, className }) {
|
|
74
|
+
export function buttonRecipe({ variant = "solid", intent = "neutral", brand, size, iconOnly = false, className }) {
|
|
72
75
|
return {
|
|
73
76
|
className: cn(variantStructure[variant],
|
|
74
77
|
// `className` stays last so a caller still outranks the icon geometry.
|
|
75
78
|
buttonVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) })),
|
|
76
79
|
"data-variant": variant,
|
|
77
80
|
"data-intent": intent,
|
|
81
|
+
"data-brand": brand,
|
|
78
82
|
};
|
|
79
83
|
}
|
|
80
84
|
/**
|
|
@@ -105,13 +109,18 @@ export function buttonRecipe({ variant = "solid", intent = "neutral", size, icon
|
|
|
105
109
|
* `aria-label`, since there is no text to name it. It is a separate prop rather
|
|
106
110
|
* than a size, so `size="sm" iconOnly` is expressible.
|
|
107
111
|
*
|
|
112
|
+
* `brand` scopes the `brand` intent to one of the theme's named brands
|
|
113
|
+
* (`<Button intent="brand" brand="mint">`), for a theme with more than one
|
|
114
|
+
* brand colour. It renders `data-brand` and nothing else; the theme's CSS gives
|
|
115
|
+
* the name meaning, and an unknown name falls back to the surrounding brand.
|
|
116
|
+
*
|
|
108
117
|
* `asChild` renders the child element with Button's styling instead of a
|
|
109
118
|
* `<button>`, for links that should look like buttons. `loading` shows a spinner
|
|
110
119
|
* and disables the control, so it does not need `disabled` as well.
|
|
111
120
|
*/
|
|
112
|
-
const Button = React.forwardRef(({ className, variant = "solid", intent = "neutral", size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
|
|
121
|
+
const Button = React.forwardRef(({ className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, asChild = false, loading = false, children, disabled, ...props }, ref) => {
|
|
113
122
|
const Comp = asChild ? Slot : "button";
|
|
114
|
-
return (_jsx(Comp, { ...buttonRecipe({ variant, intent, size, iconOnly, className }), ref: ref, disabled: disabled || loading, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin", 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" })] }), children] })) : (children) }));
|
|
123
|
+
return (_jsx(Comp, { ...buttonRecipe({ variant, intent, brand, size, iconOnly, className }), ref: ref, disabled: disabled || loading, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin", 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" })] }), children] })) : (children) }));
|
|
115
124
|
});
|
|
116
125
|
Button.displayName = "Button";
|
|
117
126
|
export { Button, buttonVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.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;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C;;;;;;;;;GASG;AACH,MAAM,cAAc,GAAG,GAAG;AACxB,6EAA6E;AAC7E,6EAA6E;AAC7E,6EAA6E;AAC7E,+BAA+B;AAC/B,2eAA2e,EAC3e;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,iCAAiC;SACtC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,oCAAoC;CAC3C,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;CAChB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,aAAa,EAAmD,MAAM,kBAAkB,CAAC;AAEvG,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,sFAsFnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"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"}
|