draft-components 2.11.0 → 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;
-    format?: (value: number) => ReactNode;
-    value: RangeSliderValue;
-    onChange: (value: RangeSliderValue) => void;
+    '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, format, onChange, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,19 @@
 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;
-    format: (value: number) => ReactNode;
-    onChange: (value: number) => void;
-    onPointerDown?: PointerEventHandler<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, format, onChange, onPointerDown, }: SliderThumbProps): import("react/jsx-runtime").JSX.Element;

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;
-    format?: (value: number) => ReactNode;
-    onChange: (value: number) => void;
+    '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, format, onChange, }: SliderProps): import("react/jsx-runtime").JSX.Element;

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;
+}

package/dist/components/table/table-head-cell.js

@@ -17,7 +17,7 @@ const stateMapping = {
 export const TableHeadCell = forwardRef(function TableHeaderCell({ isSortable = false, sort = 'none', className, children, onChangeSort, ...props }, ref) {
     if (isSortable) {
         const Icon = iconMapping[sort];
-        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, " ", _jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
+        children = (_jsxs("button", { className: "dc-table-cell__sort-btn", type: "button", onClick: () => onChangeSort?.(stateMapping[sort]), children: [children, ' ', _jsx(Icon, { className: "dc-table-cell__sort-icon", "aria-hidden": true, strokeWidth: 2 })] }));
     }
     return (_jsx("th", { ...props, className: classNames(className, {
             'dc-table-cell': true,