draft-components 3.6.0 → 4.0.1

package/dist/components/slider/slider.css

@@ -1,42 +1,41 @@
 .dc-slider {
-  --dc-slider-icon-color: var(--dc-secondary-text-color);
+  --icon-color: var(--dc-neutral-500);
 
   /* 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);
+  --track-height: 4px;
+  --track-radius: 2px;
+  --track-background: rgb(var(--dc-neutral-900-rgb) / 15%);
+  --track-background-filled: var(--dc-blue-500);
 
   /* 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);
+  --thumb-height: 20px;
+  --thumb-width: 20px;
+  --thumb-radius: 50%;
+  --thumb-background: var(--dc-blue-500);
+  --thumb-border-color: var(--dc-white);
+  --thumb-border: 2px solid var(--thumb-border-color);
+  --thumb-transition: box-shadow 150ms ease-in-out;
+  --thumb-shadow: var(--dc-shadow-xs), var(--dc-shadow), var(--dc-shadow-md);
+  --focus-ring-color: var(--dc-focus-ring-color);
+  --focus-ring-outline: 2px solid var(--focus-ring-color);
+  --focus-ring-offset: 1px;
 
   /* 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);
+  --label-gap: 4px;
+  --label-height: 24px;
+  --label-max-width: 80px;
+  --label-padding-x: 0.5em;
+  --label-radius: 6px;
+  --label-border-color: var(--dc-white);
+  --label-border: 1px solid var(--label-border-color);
+  --label-color: var(--dc-neutral-50);
+  --label-background: var(--dc-neutral-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;
+  --tick-mark-width: 1px;
+  --tick-mark-height: 6px;
+  --tick-mark-color: rgb(var(--dc-neutral-900-rgb) / 15%);
+  --tick-marks-gap: 4px;
 
   display: inline-flex;
   width: 240px;
@@ -65,32 +64,29 @@
   gap: 8px;
   align-items: center;
   width: 100%;
-  min-height: var(--dc-slider-thumb-height);
-  color: var(--dc-slider-icon-color);
+  min-height: var(--thumb-height);
+  color: var(--icon-color);
 }
 
 .dc-slider__body_has_labels {
-  margin-top: calc(
-    var(--dc-slider-label-height) +
-    var(--dc-slider-label-gap)
-  );
+  margin-top: calc(var(--label-height) + var(--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)
+    var(--tick-mark-height)
+    - var(--thumb-height) / 2
+    + var(--track-height) / 2
+    + var(--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);
+  height: var(--track-height);
+  background-color: var(--track-background);
+  border-radius: var(--track-radius);
 }
 
 .dc-slider__input {
@@ -131,16 +127,16 @@
 .dc-slider__input::-moz-range-thumb {
   box-sizing: border-box;
   display: block;
-  width: var(--dc-slider-thumb-width);
-  height: var(--dc-slider-thumb-height);
+  width: var(--thumb-width);
+  height: var(--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);
+  background: var(--thumb-background);
+  border: var(--thumb-border);
+  border-radius: var(--thumb-radius);
+  box-shadow: var(--thumb-shadow);
+  -moz-transition: var(--thumb-transition);
+  transition: var(--thumb-transition);
 }
 
 .dc-slider_range .dc-slider__input::-moz-range-thumb {
@@ -148,26 +144,27 @@
 }
 
 .dc-slider__input:focus::-moz-range-thumb {
-  box-shadow: var(--dc-slider-thumb-focus-ring);
+  outline: none;
 }
 
-.dc-slider__input:focus:not(:focus-visible)::-moz-range-thumb {
-  box-shadow: var(--dc-slider-thumb-shadow);
+.dc-slider__input:focus-visible::-moz-range-thumb {
+  outline: var(--focus-ring-outline);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .dc-slider__input::-webkit-slider-thumb {
   box-sizing: border-box;
   display: block;
-  width: var(--dc-slider-thumb-width);
-  height: var(--dc-slider-thumb-height);
+  width: var(--thumb-width);
+  height: var(--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);
+  background: var(--thumb-background);
+  border: var(--thumb-border);
+  border-radius: var(--thumb-radius);
+  box-shadow: var(--thumb-shadow);
+  -webkit-transition: var(--thumb-transition);
+  transition: var(--thumb-transition);
 }
 
 .dc-slider__input::-webkit-slider-container {
@@ -179,36 +176,37 @@
 }
 
 .dc-slider__input:focus::-webkit-slider-thumb {
-  box-shadow: var(--dc-slider-thumb-focus-ring);
+  outline: none;
 }
 
-.dc-slider__input:focus:not(:focus-visible)::-webkit-slider-thumb {
-  box-shadow: var(--dc-slider-thumb-shadow);
+.dc-slider__input:focus-visible::-webkit-slider-thumb {
+  outline: var(--focus-ring-outline);
+  outline-offset: var(--focus-ring-offset);
 }
 
 .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)
+    var(--thumb-height) / 2
+    - var(--track-height) / 2
+    + var(--label-gap)
+    + var(--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);
+  min-width: var(--label-height);
+  max-width: var(--label-max-width);
+  height: var(--label-height);
+  padding: 0 var(--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);
+  color: var(--label-color);
+  background: var(--label-background);
+  border: var(--label-border);
+  border-radius: var(--label-radius);
   transform: translateX(-50%);
 }
 
@@ -225,13 +223,10 @@
 
 .dc-slider__tick-marks {
   position: relative;
-  top: calc(
-    var(--dc-slider-track-height) +
-    var(--dc-slider-tick-marks-gap)
-  );
+  top: calc(var(--track-height) + var(--tick-marks-gap));
   left: 0;
   width: 100%;
-  height: var(--dc-slider-tick-mark-height);
+  height: var(--tick-mark-height);
   padding: 0;
   margin: 0;
   list-style: none;
@@ -242,24 +237,24 @@
   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);
+  width: var(--tick-mark-width);
+  height: var(--tick-mark-height);
+  background: var(--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);
+  --icon-color: var(--dc-neutral-400);
+
+  /* Track properties */
+  --track-background: rgb(var(--dc-neutral-50-rgb) / 30%);
 
   /* Label properties */
-  --dc-slider-label-border: 1px solid var(--dc-gray-600);
-  --dc-slider-label-bg: var(--dc-gray-700);
+  --label-border-color: var(--dc-neutral-100);
+  --label-color: var(--dc-neutral-800);
+  --label-background: var(--dc-neutral-100);
 
   /* Tick mark properties */
-  --dc-slider-tick-mark-color: rgb(var(--dc-gray-50-rgb) / 50%);
+  --tick-mark-color: rgb(var(--dc-neutral-50-rgb) / 60%);
 }

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

@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
-import { SliderTickMark } from './slider-track.js';
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SliderTickMark } from './slider-track.js';
 export type SliderProps = {
     'aria-label'?: string;
     'id'?: string;

package/dist/components/slider/slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from 'react';
-import { classNames } from '../../lib/index.js';
+import { classNames } from '../../lib/react-helpers.js';
 import { calcPosition } from './calc-position.js';
 import { SliderTrack } from './slider-track.js';
 import { SliderThumb } from './slider-thumb.js';
@@ -26,3 +26,4 @@ export function Slider({ 'aria-label': ariaLabel, id, style, className, disabled
                 '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, format: format })] }), iconRight] }) }));
 }
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,KAAK,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAuB,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAsBzD,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;AAEhD,MAAM,UAAU,MAAM,CAAC,EACrB,YAAY,EAAE,SAAS,EACvB,EAAE,EACF,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GAAG,CAAC,EACR,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,EACJ,KAAK,EACL,MAAM,GAAG,eAAe,CAAC,MAAM,EAC/B,QAAQ,GACI;IACZ,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,OAAO,GAAG,EAAE,IAAI,GAAG,SAAS,cAAc,CAAC;IACjD,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IAEnD,IAAI,UAA8B,CAAC;IACnC,IAAI,gBAA2B,CAAC;IAChC,IAAI,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACtC,UAAU,GAAG,GAAG,SAAS,iBAAiB,CAAC;QAC3C,gBAAgB,GAAG,CACjB,KAAC,eAAe,IACd,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,WAAW,EAAE,IAAI;YACjB,oBAAoB,EAAE,QAAQ;YAC9B,sBAAsB,EAAE,SAAS;SAClC,CAAC,YAEF,eAAK,SAAS,EAAE,UAAU,CAAC;gBACzB,iBAAiB,EAAE,IAAI;gBACvB,4BAA4B,EAAE,SAAS;gBACvC,gCAAgC,EAAE,gBAAgB;aACnD,CAAC,aAEC,QAAQ,EACT,MAAC,WAAW,IACV,aAAa,EAAE,CAAC,EAChB,WAAW,EAAE,QAAQ,aAEpB,gBAAgB,EACjB,KAAC,WAAW,IACV,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,gBACE,SAAS,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,IACU,EACb,SAAS,IACN,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/spinner/index.js

@@ -1 +1,2 @@
 export * from './spinner.js';
+//# sourceMappingURL=index.js.map

package/dist/components/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/spinner/spinner.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type SpinnerProps = ComponentPropsWithoutRef<'svg'> & {
+import { type ComponentProps } from 'react';
+type SpinnerHTMLProps = ComponentProps<'svg'>;
+type SpinnerBaseProps = {
     size?: number | string;
 };
-export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    size?: number | string;
-} & import("react").RefAttributes<SVGSVGElement>>;
+export type SpinnerProps = SpinnerBaseProps & Omit<SpinnerHTMLProps, keyof SpinnerBaseProps>;
+export declare function Spinner({ size, width, height, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/spinner/spinner.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} 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 }) }));
-});
+export function Spinner({ size = 24, width = size, height = size, className = '', ...props }) {
+    return (_jsx("svg", { ...props, 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 }) }));
+}
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,IAAI,EACZ,MAAM,GAAG,IAAI,EACb,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACK;IACb,OAAO,CACL,iBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,YAEd,iBACE,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,EAAE,EACL,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,GACd,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/switch/index.js

@@ -1 +1,2 @@
 export * from './switch.js';
+//# sourceMappingURL=index.js.map

package/dist/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/switch/switch.css

@@ -1,20 +1,20 @@
 .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);
+  --width: 38px;
+  --height: 24px;
+  --radius: calc(var(--height) / 2);
+  --track-background: rgb(var(--dc-neutral-900-rgb) / 15%);
+  --track-background-checked: var(--dc-blue-500);
+  --thumb-size: calc(var(--height) - var(--thumb-offset) * 2);
+  --thumb-offset: 2px;
+  --thumb-background: var(--dc-white);
+  --icon-color: var(--dc-blue-500);
+  --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);
+  width: var(--width);
+  height: var(--height);
   line-height: 0;
   text-align: left;
   color-scheme: light;
@@ -27,9 +27,9 @@
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
+  clip: rect(0, 0, 0, 0);
 }
 
 .dc-switch__track,
@@ -45,49 +45,42 @@
   width: 100%;
   height: 100%;
   vertical-align: middle;
-  background: var(--dc-switch-track-bg);
-  border-radius: var(--dc-switch-radius);
+  background: var(--track-background);
+  border-radius: var(--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);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  background: var(--thumb-background);
   border-radius: 50%;
-  box-shadow:
-    0 1px 3px 0 rgb(var(--dc-black-rgb) / 10%),
+  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%);
+  transform: translateX(var(--thumb-offset))
+    translateY(var(--thumb-offset));
   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);
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  color: var(--icon-color);
   opacity: 0;
   transition: opacity 0.2s;
 }
 
 .dc-switch__input:checked + .dc-switch__track {
-  background: var(--dc-switch-track-bg-checked);
+  background: var(--track-background-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));
+  transform: translate(
+    calc(var(--width) - var(--thumb-size) - var(--thumb-offset)),
+    var(--thumb-offset)
+  );
 }
 
 .dc-switch__input:checked + .dc-switch__track .dc-switch__icon {
@@ -103,20 +96,14 @@
   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;
+.dc-switch__input:focus-visible + .dc-switch__track {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
 }
 
 .dark .dc-switch,
 .dark.dc-switch {
+  --track-background: rgb(var(--dc-neutral-50-rgb) / 30%);
+
   color-scheme: dark;
 }

package/dist/components/switch/switch.d.ts

@@ -1,10 +1,10 @@
-import { ComponentPropsWithRef } from 'react';
-type SwitchHTMLProps = ComponentPropsWithRef<'input'>;
-type SwitchBaseProps = Omit<SwitchHTMLProps, 'type'>;
+import { type ComponentProps } from 'react';
 export type SwitchToggleHandler = (checked: boolean) => void;
-export type SwitchProps = SwitchBaseProps & {
+type SwitchHTMLProps = ComponentProps<'input'>;
+type SwitchBaseProps = {
     showCheckIcon?: boolean;
     onToggle?: SwitchToggleHandler;
 };
-export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export type SwitchProps = SwitchBaseProps & Omit<SwitchHTMLProps, keyof SwitchBaseProps>;
+export declare function Switch({ showCheckIcon, style, className, onChange, onToggle, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/switch/switch.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const Switch = forwardRef(function Switch({ showCheckIcon = true, style, className, onChange, onToggle, ...props }, ref) {
-    return (_jsxs("label", { style: style, className: classNames('dc-switch', className), children: [_jsx("input", { ...props, ref: ref, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
-                    onChange?.(event);
-                    onToggle?.(event.target.checked);
+export function Switch({ showCheckIcon = true, style, className, onChange, onToggle, ...props }) {
+    return (_jsxs("label", { style: style, className: classNames('dc-switch', className), children: [_jsx("input", { ...props, className: "dc-switch__input", type: "checkbox", onChange: (event) => {
+                    if (typeof onChange === 'function') {
+                        onChange(event);
+                    }
+                    if (typeof onToggle === 'function') {
+                        onToggle(event.target.checked);
+                    }
                 } }), _jsx("span", { "data-testid": "switch-track", className: "dc-switch__track", "aria-hidden": true, children: _jsx("span", { className: "dc-switch__thumb", children: showCheckIcon && (_jsx(CheckIcon, { className: "dc-switch__icon", "data-testid": "switch-check-icon" })) }) })] }));
-});
+}
+;
 function CheckIcon(props) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: _jsx("path", { d: "M6 10.353L9 13L13.5 7", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAexD,MAAM,UAAU,MAAM,CAAC,EACrB,aAAa,GAAG,IAAI,EACpB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,OAAO,CACL,iBAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,aAChE,mBACM,KAAK,EACT,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAClB,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;wBACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBAClB,CAAC;oBACD,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;wBACnC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;oBACjC,CAAC;gBACH,CAAC,GACD,EACF,8BACc,cAAc,EAC1B,SAAS,EAAC,kBAAkB,iBACf,IAAI,YAEjB,eAAM,SAAS,EAAC,kBAAkB,YAC/B,aAAa,IAAI,CAChB,KAAC,SAAS,IACR,SAAS,EAAC,iBAAiB,iBACf,mBAAmB,GAC/B,CACH,GACI,GACF,IACD,CACT,CAAC;AACJ,CAAC;AAAA,CAAC;AAEF,SAAS,SAAS,CAAC,KAA4B;IAC7C,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,KACN,KAAK,YAET,eACE,CAAC,EAAC,uBAAuB,EACzB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/table/index.js

@@ -5,3 +5,4 @@ export * from './table-body.js';
 export * from './table-row.js';
 export * from './table-head-cell.js';
 export * from './table-cell.js';
+//# sourceMappingURL=index.js.map

package/dist/components/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}

package/dist/components/table/table-body.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from 'react';
-export type TableBodyProps = ComponentPropsWithRef<'tbody'>;
-export declare const TableBody: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-    ref?: ((instance: HTMLTableSectionElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+import { type ComponentProps } from 'react';
+type TableBodyHTMLProps = ComponentProps<'tbody'>;
+export type TableBodyProps = TableBodyHTMLProps;
+export declare function TableBody({ className, children, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/table-body.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const TableBody = forwardRef(function TableBody({ className, children, ...props }, ref) {
-    return (_jsx("tbody", { ...props, ref: ref, className: classNames(className, 'dc-table-body'), children: children }));
-});
+export function TableBody({ className, children, ...props }) {
+    return (_jsx("tbody", { ...props, className: classNames(className, 'dc-table-body'), children: children }));
+}
+//# sourceMappingURL=table-body.js.map

package/dist/components/table/table-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../src/components/table/table-body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACO;IACf,OAAO,CACL,mBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,eAAe,CAAC,YAEhD,QAAQ,GACH,CACT,CAAC;AACJ,CAAC"}

package/dist/components/table/table-cell.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from 'react';
-export type TableCellProps = ComponentPropsWithRef<'td'>;
-export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
-    ref?: ((instance: HTMLTableDataCellElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+import { type ComponentProps } from 'react';
+type TableCellHTMLProps = ComponentProps<'td'>;
+export type TableCellProps = TableCellHTMLProps;
+export declare function TableCell({ className, children, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const TableCell = forwardRef(function TableCell({ className, children, ...props }, ref) {
-    return (_jsx("td", { ...props, ref: ref, className: classNames('dc-table-cell', className), children: children }));
-});
+export function TableCell({ className, children, ...props }) {
+    return (_jsx("td", { ...props, className: classNames('dc-table-cell', className), children: children }));
+}
+//# sourceMappingURL=table-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.js","sourceRoot":"","sources":["../../../src/components/table/table-cell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAMxD,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACO;IACf,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,YAEhD,QAAQ,GACN,CACN,CAAC;AACJ,CAAC"}

package/dist/components/table/table-container.d.ts

@@ -1,13 +1,14 @@
-import { ComponentPropsWithRef } from 'react';
-type TableContainerBaseProps = ComponentPropsWithRef<'div'>;
+import { type ComponentProps } from 'react';
 export type TableContainerBorder = {
     top?: boolean;
     right?: boolean;
     bottom?: boolean;
     left?: boolean;
 };
-export type TableContainerProps = {
+type TableContainerHTMLProps = ComponentProps<'div'>;
+type TableContainerBaseProps = {
     border?: 'none' | 'all' | TableContainerBorder;
-} & TableContainerBaseProps;
-export declare const TableContainer: import("react").ForwardRefExoticComponent<Omit<TableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type TableContainerProps = TableContainerBaseProps & Omit<TableContainerHTMLProps, keyof TableContainerBaseProps>;
+export declare function TableContainer({ border, className, children, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};