draft-components 2.10.3 → 3.0.0

package/dist/components/slider/range-slider.d.ts

@@ -6,25 +6,25 @@ export type RangeSliderValue = {
 };
 export type RangeSliderProps = {
     'aria-label'?: string;
-    id?: string;
-    style?: CSSProperties;
-    className?: string;
-    disabled?: boolean;
-    fullWidth?: boolean;
-    showLabels?: boolean;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
-    tickMarks?: SliderTickMark[];
-    name?: string;
-    step?: number;
-    min?: number;
-    minThumbName?: string;
-    minThumbAriaLabel?: string;
-    max?: number;
-    maxThumbName?: string;
-    maxThumbAriaLabel?: string;
-    value: RangeSliderValue;
-    onChange: (value: RangeSliderValue) => void;
-    formatValue?: (value: number) => ReactNode;
+    'id'?: string;
+    'style'?: CSSProperties;
+    'className'?: string;
+    'disabled'?: boolean;
+    'fullWidth'?: boolean;
+    'showLabels'?: boolean;
+    'iconLeft'?: ReactNode;
+    'iconRight'?: ReactNode;
+    'tickMarks'?: SliderTickMark[];
+    'name'?: string;
+    'step'?: number;
+    'min'?: number;
+    'minThumbName'?: string;
+    'minThumbAriaLabel'?: string;
+    'max'?: number;
+    'maxThumbName'?: string;
+    'maxThumbAriaLabel'?: string;
+    'format'?: (value: number) => ReactNode;
+    'value': RangeSliderValue;
+    'onChange': (value: RangeSliderValue) => void;
 };
-export declare function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabels, iconLeft, iconRight, tickMarks, step, min, minThumbName, minThumbAriaLabel, max, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabels, iconLeft, iconRight, tickMarks, step, min, minThumbName, minThumbAriaLabel, max, maxThumbName, maxThumbAriaLabel, name, value, format, onChange, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/range-slider.js

@@ -6,34 +6,34 @@ import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.js';
 import { SliderTickMarks } from './slider-tick-marks.js';
 const numberFormatter = new Intl.NumberFormat();
-export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabels, iconLeft, iconRight, tickMarks, step = 1, min = 0, minThumbName, minThumbAriaLabel, max = 100, maxThumbName, maxThumbAriaLabel, name, value: range, onChange, formatValue = numberFormatter.format, }) {
+export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabels, iconLeft, iconRight, tickMarks, step = 1, min = 0, minThumbName, minThumbAriaLabel, max = 100, maxThumbName, maxThumbAriaLabel, name, value, format = numberFormatter.format, onChange, }) {
     const defaultId = useId();
-    const [focusedThumb, setFocusedThumb] = useState('min');
-    const positionMin = calcPosition(range.min, { min, max });
-    const positionMax = calcPosition(range.max, { min, max });
+    const [activeThumb, setActiveThumb] = useState('min');
+    const positionMin = calcPosition(value.min, { min, max });
+    const positionMax = calcPosition(value.max, { min, max });
     let dataListId;
     let tickMarksElement;
     if (tickMarks && tickMarks.length > 0) {
         dataListId = `${defaultId}slider-datalist`;
         tickMarksElement = (_jsx(SliderTickMarks, { tickMarks: tickMarks, dataListId: dataListId, min: min, max: max }));
     }
-    const handleChangeMin = (value) => {
+    const handleChangeMin = (min) => {
         onChange({
-            ...range,
-            min: Math.min(range.max, value),
+            ...value,
+            min: Math.min(value.max, min),
         });
     };
-    const handleFocusMinThumb = () => {
-        setFocusedThumb('min');
+    const handlePointerDownOnMinThumb = () => {
+        setActiveThumb('min');
     };
-    const handleChangeMax = (value) => {
+    const handleChangeMax = (max) => {
         onChange({
-            ...range,
-            max: Math.max(range.min, value),
+            ...value,
+            max: Math.max(value.min, max),
         });
     };
-    const handleFocusMaxThumb = () => {
-        setFocusedThumb('max');
+    const handlePointerDownOnMaxThumb = () => {
+        setActiveThumb('max');
     };
     return (_jsx("fieldset", { id: id, style: style, className: classNames(className, {
             'dc-slider': true,
@@ -44,5 +44,5 @@ export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, dis
                 'dc-slider__body': true,
                 'dc-slider__body_has_labels': showLabels,
                 'dc-slider__body_has_tick-marks': tickMarksElement,
-            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: positionMin, positionEnd: positionMax, children: [tickMarksElement, _jsx(SliderThumb, { name: minThumbName || (name && `${name}[min]`), active: focusedThumb === 'min', "aria-label": minThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMin, step: step, min: min, max: max, value: range.min, formatValue: formatValue, onChange: handleChangeMin, onFocus: handleFocusMinThumb }), _jsx(SliderThumb, { name: maxThumbName || (name && `${name}[max]`), active: focusedThumb === 'max', "aria-label": maxThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMax, step: step, min: min, max: max, value: range.max, formatValue: formatValue, onChange: handleChangeMax, onFocus: handleFocusMaxThumb })] }), iconRight] }) }));
+            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: positionMin, positionEnd: positionMax, children: [tickMarksElement, _jsx(SliderThumb, { name: minThumbName || (name && `${name}[min]`), active: activeThumb === 'min', "aria-label": minThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMin, step: step, min: min, max: max, value: value.min, format: format, onChange: handleChangeMin, onPointerDown: handlePointerDownOnMinThumb }), _jsx(SliderThumb, { name: maxThumbName || (name && `${name}[max]`), active: activeThumb === 'max', "aria-label": maxThumbAriaLabel, showLabel: showLabels, dataListId: dataListId, position: positionMax, step: step, min: min, max: max, value: value.max, format: format, onChange: handleChangeMax, onPointerDown: handlePointerDownOnMaxThumb })] }), iconRight] }) }));
 }

package/dist/components/slider/slider-thumb.d.ts

@@ -1,20 +1,19 @@
-import { FocusEventHandler, ReactNode } from 'react';
+import { PointerEventHandler, ReactNode } from 'react';
 export type SliderThumbProps = {
     'aria-label'?: string;
-    id?: string;
-    name?: string;
-    active?: boolean;
-    disabled?: boolean;
-    showLabel?: boolean;
-    dataListId?: string;
-    position: number;
-    step: number;
-    min: number;
-    max: number;
-    value: number;
-    formatValue: (value: number) => ReactNode;
-    onChange: (value: number) => void;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
+    'id'?: string;
+    'name'?: string;
+    'active'?: boolean;
+    'disabled'?: boolean;
+    'showLabel'?: boolean;
+    'dataListId'?: string;
+    'position': number;
+    'step': number;
+    'min': number;
+    'max': number;
+    'value': number;
+    'format': (value: number) => ReactNode;
+    'onChange': (value: number) => void;
+    'onPointerDown'?: PointerEventHandler<HTMLInputElement>;
 };
-export declare function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, formatValue, onChange, onFocus, onBlur, }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, format, onChange, onPointerDown, }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider-thumb.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
 import { classNames } from '../../lib/index.js';
-export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, formatValue, onChange, onFocus, onBlur, }) {
+export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disabled, showLabel, dataListId, position, step, min, max, value, format, onChange, onPointerDown, }) {
     const handleChange = (event) => {
         onChange(event.target.valueAsNumber);
     };
     return (_jsxs(_Fragment, { children: [_jsx("input", { id: id, className: classNames({
                     'dc-slider__input': true,
                     'dc-slider__input_active': active,
-                }), type: "range", name: name, "aria-label": ariaLabel, list: dataListId, step: step, min: min, max: max, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }), showLabel && (_jsx("output", { style: { left: getOffsetRelativeToThumb(position) }, className: classNames({
+                }), type: "range", name: name, "aria-label": ariaLabel, list: dataListId, step: step, min: min, max: max, disabled: disabled, value: value, onChange: handleChange, onPointerDown: onPointerDown }), showLabel && (_jsx("output", { style: { left: getOffsetRelativeToThumb(position) }, className: classNames({
                     'dc-slider__label': true,
                     'dc-slider__label_active': active,
-                }), htmlFor: id, children: _jsx("span", { className: "dc-slider__label-text", children: formatValue(value) }) }))] }));
+                }), htmlFor: id, children: _jsx("span", { className: "dc-slider__label-text", children: format(value) }) }))] }));
 }

package/dist/components/slider/slider-track.js

@@ -3,12 +3,12 @@ import { formatPercent } from '../../lib/index.js';
 export function SliderTrack({ positionStart, positionEnd, children, }) {
     const start = formatPercent(positionStart);
     const end = formatPercent(positionEnd);
-    const background = 'linear-gradient(' +
-        'to right, ' +
-        `var(--dc-slider-track-bg) ${start}, ` +
-        `var(--dc-slider-active-track-bg) ${start}, ` +
-        `var(--dc-slider-active-track-bg) ${end}, ` +
-        `var(--dc-slider-track-bg) ${end}` +
-        ')';
+    const background = 'linear-gradient('
+        + 'to right, '
+        + `var(--dc-slider-track-bg) ${start}, `
+        + `var(--dc-slider-active-track-bg) ${start}, `
+        + `var(--dc-slider-active-track-bg) ${end}, `
+        + `var(--dc-slider-track-bg) ${end}`
+        + ')';
     return (_jsx("div", { style: { background }, className: "dc-slider__track", children: children }));
 }

package/dist/components/slider/slider.css

@@ -0,0 +1,261 @@
+.dc-slider {
+  --dc-slider-icon-color: var(--dc-secondary-text-color);
+
+  /* Track properties */
+  --dc-slider-track-height: 4px;
+  --dc-slider-track-radius: 2px;
+  --dc-slider-track-bg: var(--dc-control-bg-inset);
+  --dc-slider-active-track-bg: var(--dc-control-primary-color);
+
+  /* Thumb properties */
+  --dc-slider-thumb-height: 20px;
+  --dc-slider-thumb-width: 20px;
+  --dc-slider-thumb-radius: 50%;
+  --dc-slider-thumb-bg: var(--dc-control-primary-color);
+  --dc-slider-thumb-border: 2px solid var(--dc-control-bg);
+  --dc-slider-thumb-transition: box-shadow 150ms ease-in-out;
+  --dc-slider-thumb-shadow:
+    var(--dc-shadow-sm),
+    var(--dc-shadow),
+    var(--dc-shadow-md);
+  --dc-slider-thumb-focus-ring:
+    var(--dc-slider-thumb-shadow),
+    0 0 0 4px var(--dc-focus-ring-color);
+
+  /* Label properties */
+  --dc-slider-label-gap: 4px;
+  --dc-slider-label-height: 24px;
+  --dc-slider-label-max-width: 80px;
+  --dc-slider-label-padding-x: 0.5em;
+  --dc-slider-label-radius: 6px;
+  --dc-slider-label-border: 1px solid var(--dc-white);
+  --dc-slider-label-text-color: var(--dc-gray-50);
+  --dc-slider-label-bg: var(--dc-gray-800);
+
+  /* Tick mark properties */
+  --dc-slider-tick-mark-width: 1px;
+  --dc-slider-tick-mark-height: 6px;
+  --dc-slider-tick-mark-color: rgb(var(--dc-gray-900-rgb) / 30%);
+  --dc-slider-tick-marks-gap: 4px;
+
+  display: inline-flex;
+  width: 240px;
+  min-width: 0;
+  max-width: 100%;
+  color-scheme: light;
+}
+
+.dc-slider_range {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.dc-slider_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-slider_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-slider__body {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-height: var(--dc-slider-thumb-height);
+  color: var(--dc-slider-icon-color);
+}
+
+.dc-slider__body_has_labels {
+  margin-top: calc(
+    var(--dc-slider-label-height) +
+    var(--dc-slider-label-gap)
+  );
+}
+
+.dc-slider__body_has_tick-marks {
+  margin-bottom: calc(
+    var(--dc-slider-tick-mark-height) -
+    var(--dc-slider-thumb-height) / 2 +
+    var(--dc-slider-track-height) / 2 +
+    var(--dc-slider-tick-marks-gap)
+  );
+}
+
+.dc-slider__track {
+  position: relative;
+  width: 100%;
+  height: var(--dc-slider-track-height);
+  background-color: var(--dc-slider-track-bg);
+  border-radius: var(--dc-slider-track-radius);
+}
+
+.dc-slider__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+}
+
+.dc-slider__input:focus {
+  outline: none;
+}
+
+.dc-slider_range .dc-slider__input {
+  pointer-events: none;
+}
+
+.dc-slider__input::-moz-range-track {
+  -moz-appearance: none;
+       appearance: none;
+  background: none;
+}
+
+.dc-slider__input::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+          appearance: none;
+  background: none;
+}
+
+.dc-slider__input::-moz-range-thumb {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: var(--dc-slider-thumb-width);
+  height: var(--dc-slider-thumb-height);
+  -moz-appearance: none;
+       appearance: none;
+  background: var(--dc-slider-thumb-bg);
+  border: var(--dc-slider-thumb-border);
+  border-radius: var(--dc-slider-thumb-radius);
+  box-shadow: var(--dc-slider-thumb-shadow);
+  -moz-transition: var(--dc-slider-thumb-transition);
+  transition: var(--dc-slider-thumb-transition);
+}
+
+.dc-slider_range .dc-slider__input::-moz-range-thumb {
+  pointer-events: all;
+}
+
+.dc-slider__input:focus::-moz-range-thumb {
+  box-shadow: var(--dc-slider-thumb-focus-ring);
+}
+
+.dc-slider__input:focus:not(:focus-visible)::-moz-range-thumb {
+  box-shadow: var(--dc-slider-thumb-shadow);
+}
+
+.dc-slider__input::-webkit-slider-thumb {
+  box-sizing: border-box;
+  display: inline-block;
+  width: var(--dc-slider-thumb-width);
+  height: var(--dc-slider-thumb-height);
+  -webkit-appearance: none;
+          appearance: none;
+  background: var(--dc-slider-thumb-bg);
+  border: var(--dc-slider-thumb-border);
+  border-radius: var(--dc-slider-thumb-radius);
+  box-shadow: var(--dc-slider-thumb-shadow);
+  -webkit-transition: var(--dc-slider-thumb-transition);
+  transition: var(--dc-slider-thumb-transition);
+}
+
+.dc-slider_range .dc-slider__input::-webkit-slider-thumb {
+  pointer-events: all;
+}
+
+.dc-slider__input:focus::-webkit-slider-thumb {
+  box-shadow: var(--dc-slider-thumb-focus-ring);
+}
+
+.dc-slider__input:focus:not(:focus-visible)::-webkit-slider-thumb {
+  box-shadow: var(--dc-slider-thumb-shadow);
+}
+
+.dc-slider__label {
+  position: absolute;
+  bottom: calc(
+    var(--dc-slider-thumb-height) / 2 -
+    var(--dc-slider-track-height) / 2 +
+    var(--dc-slider-label-gap) +
+    var(--dc-slider-track-height)
+  );
+  left: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--dc-slider-label-height);
+  max-width: var(--dc-slider-label-max-width);
+  height: var(--dc-slider-label-height);
+  padding: 0 var(--dc-slider-label-padding-x);
+  font: var(--dc-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--dc-slider-label-text-color);
+  background: var(--dc-slider-label-bg);
+  border: var(--dc-slider-label-border);
+  border-radius: var(--dc-slider-label-radius);
+  transform: translateX(-50%);
+}
+
+.dc-slider__label-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dc-slider__input_active,
+.dc-slider__label_active {
+  z-index: 1;
+}
+
+.dc-slider__tick-marks {
+  position: relative;
+  top: calc(
+    var(--dc-slider-track-height) +
+    var(--dc-slider-tick-marks-gap)
+  );
+  left: 0;
+  width: 100%;
+  height: var(--dc-slider-tick-mark-height);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.dc-slider__tick-marks > li {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  width: var(--dc-slider-tick-mark-width);
+  height: var(--dc-slider-tick-mark-height);
+  background: var(--dc-slider-tick-mark-color);
+  transform: translateX(-50%);
+}
+
+.dark .dc-slider,
+.dark.dc-slider {
+  /* Thumb properties */
+  --dc-slider-thumb-border: 2px solid var(--dc-gray-200);
+  --dc-slider-thumb-focus-ring:
+    var(--dc-slider-thumb-shadow),
+    0 0 0 4px var(--dc-focus-ring-color);
+
+  /* Label properties */
+  --dc-slider-label-border: 1px solid var(--dc-gray-600);
+  --dc-slider-label-bg: var(--dc-gray-700);
+
+  /* Tick mark properties */
+  --dc-slider-tick-mark-color: rgb(var(--dc-gray-50-rgb) / 50%);
+}

package/dist/components/slider/slider.d.ts

@@ -2,21 +2,21 @@ import { CSSProperties, ReactNode } from 'react';
 import { SliderTickMark } from './slider-track.js';
 export type SliderProps = {
     'aria-label'?: string;
-    id?: string;
-    style?: CSSProperties;
-    className?: string;
-    disabled?: boolean;
-    fullWidth?: boolean;
-    showLabel?: boolean;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
-    tickMarks?: SliderTickMark[];
-    name?: string;
-    step?: number;
-    min?: number;
-    max?: number;
-    value: number;
-    onChange: (value: number) => void;
-    formatValue?: (value: number) => ReactNode;
+    'id'?: string;
+    'style'?: CSSProperties;
+    'className'?: string;
+    'disabled'?: boolean;
+    'fullWidth'?: boolean;
+    'showLabel'?: boolean;
+    'iconLeft'?: ReactNode;
+    'iconRight'?: ReactNode;
+    'tickMarks'?: SliderTickMark[];
+    'name'?: string;
+    'step'?: number;
+    'min'?: number;
+    'max'?: number;
+    'value': number;
+    'format'?: (value: number) => ReactNode;
+    'onChange': (value: number) => void;
 };
-export declare function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, max, name, value, onChange, formatValue, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step, min, max, name, value, format, onChange, }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slider/slider.js

@@ -6,7 +6,7 @@ import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.js';
 import { SliderTickMarks } from './slider-tick-marks.js';
 const numberFormatter = new Intl.NumberFormat();
-export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step = 1, min = 0, max = 100, name, value, onChange, formatValue = numberFormatter.format, }) {
+export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled, fullWidth, showLabel, iconLeft, iconRight, tickMarks, step = 1, min = 0, max = 100, name, value, format = numberFormatter.format, onChange, }) {
     const defaultId = useId();
     const thumbId = id || `${defaultId}slider-thumb`;
     const position = calcPosition(value, { min, max });
@@ -24,5 +24,5 @@ export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled
                 'dc-slider__body': true,
                 'dc-slider__body_has_labels': showLabel,
                 'dc-slider__body_has_tick-marks': tickMarksElement,
-            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: 0, positionEnd: position, children: [tickMarksElement, _jsx(SliderThumb, { id: thumbId, name: name, "aria-label": ariaLabel, disabled: disabled, showLabel: showLabel, dataListId: dataListId, position: position, step: step, min: min, max: max, value: value, onChange: onChange, formatValue: formatValue })] }), iconRight] }) }));
+            }), children: [iconLeft, _jsxs(SliderTrack, { positionStart: 0, positionEnd: position, children: [tickMarksElement, _jsx(SliderThumb, { id: thumbId, name: name, "aria-label": ariaLabel, disabled: disabled, showLabel: showLabel, dataListId: dataListId, position: position, step: step, min: min, max: max, value: value, onChange: onChange, format: format })] }), iconRight] }) }));
 }

package/dist/components/spinner/spinner.css

@@ -0,0 +1,42 @@
+@keyframes dc-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dc-spinner-dash-animation {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -30;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120;
+  }
+}
+
+.dc-spinner {
+  color-scheme: light;
+  animation: dc-spinner-rotate 2s linear infinite;
+}
+
+.dc-spinner circle {
+  stroke-linecap: round;
+  transition: color 0.2s;
+  animation: dc-spinner-dash-animation 1.5s ease-in-out infinite;
+}
+
+.dark .dc-spinner,
+.dark.dc-spinner {
+  color-scheme: dark;
+}

package/dist/components/spinner/spinner.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export const Spinner = forwardRef(function Spinner({ size = 24, width = size, height = size, className = '', ...props }, ref) {
-    return _jsx("svg", { ...props, ref: ref, className: classNames('dc-spinner', className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: width, height: height, children: _jsx("circle", { cx: 25, cy: 25, r: 20, fill: "none", stroke: "currentColor", strokeWidth: 5 }) });
+    return (_jsx("svg", { ...props, ref: ref, className: classNames('dc-spinner', className), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: width, height: height, children: _jsx("circle", { cx: 25, cy: 25, r: 20, fill: "none", stroke: "currentColor", strokeWidth: 5 }) }));
 });

package/dist/components/switch/switch.css

@@ -0,0 +1,123 @@
+.dc-switch {
+  --dc-switch-width: 38px;
+  --dc-switch-height: 24px;
+  --dc-switch-radius: calc(var(--dc-switch-height) / 2);
+  --dc-switch-track-bg: var(--dc-control-bg-inset);
+  --dc-switch-track-bg-checked: var(--dc-control-primary-color);
+  --dc-switch-thumb-size: calc(var(--dc-switch-height) - var(--dc-switch-thumb-offset) * 2);
+  --dc-switch-thumb-offset: 2px;
+  --dc-switch-thumb-bg: var(--dc-control-on-primary-color);
+  --dc-switch-icon-color: var(--dc-control-primary-color);
+  --dc-switch-focus-ring-color: var(--dc-focus-ring-color);
+
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--dc-switch-width);
+  height: var(--dc-switch-height);
+  line-height: 0;
+  text-align: left;
+  color-scheme: light;
+}
+
+.dc-switch__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dc-switch__track,
+.dc-switch__thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+}
+
+.dc-switch__track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  cursor: pointer;
+  background: var(--dc-switch-track-bg);
+  border-radius: var(--dc-switch-radius);
+  transition-duration: 0.2s;
+  transition-property: opacity, background-color;
+}
+
+.dc-switch__thumb {
+  width: var(--dc-switch-thumb-size);
+  height: var(--dc-switch-thumb-size);
+  background: var(--dc-switch-thumb-bg);
+  border-radius: 50%;
+  box-shadow:
+    0 1px 3px 0 rgb(var(--dc-black-rgb) / 10%),
+    0 4px 6px -1px rgb(var(--dc-black-rgb) / 10%),
+    0 2px 4px -1px rgb(var(--dc-black-rgb) / 6%);
+  transition: transform 0.2s;
+  transform:
+    translateX(var(--dc-switch-thumb-offset))
+    translateY(var(--dc-switch-thumb-offset));
+}
+
+.dc-switch__icon {
+  width: var(--dc-switch-thumb-size);
+  height: var(--dc-switch-thumb-size);
+  color: var(--dc-switch-icon-color);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.dc-switch__input:checked + .dc-switch__track {
+  background: var(--dc-switch-track-bg-checked);
+}
+
+.dc-switch__input:checked + .dc-switch__track .dc-switch__thumb {
+  transform:
+    translateX(
+      calc(
+        var(--dc-switch-width) -
+        var(--dc-switch-thumb-size) -
+        var(--dc-switch-thumb-offset)
+      )
+    )
+    translateY(var(--dc-switch-thumb-offset));
+}
+
+.dc-switch__input:checked + .dc-switch__track .dc-switch__icon {
+  opacity: 1;
+}
+
+.dc-switch__input:disabled + .dc-switch__track {
+  cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-switch__input:focus {
+  outline: none;
+}
+
+.dc-switch__input:focus + .dc-switch__track::after {
+  position: absolute;
+  inset: -3px;
+  pointer-events: none;
+  content: "";
+  border-radius: calc(3px + var(--dc-switch-radius));
+  box-shadow: 0 0 0 3px var(--dc-switch-focus-ring-color);
+}
+
+.dc-switch__input:focus:not(:focus-visible) + .dc-switch__track::after {
+  content: none;
+}
+
+.dark .dc-switch,
+.dark.dc-switch {
+  color-scheme: dark;
+}