draft-components 3.5.0 → 4.0.0

package/dist/components/segmented-control/segmented-control.css

@@ -1,28 +1,30 @@
 .dc-segmented {
-  --dc-segmented-border-color: var(--dc-control-border-color);
-  --dc-segmented-bg: var(--dc-bg-transparent-1);
-  --dc-segmented-delimiter-color: var(--dc-border-color-transparent-3);
-  --dc-segmented-button-height: 36px;
-  --dc-segmented-button-padding-x: 16px;
-  --dc-segmented-button-radius: 9px;
-  --dc-segmented-button-text-color: var(--dc-primary-text-color);
-  --dc-segmented-button-border-color: transparent;
-  --dc-segmented-button-border-color-focus: var(--dc-blue-600);
-  --dc-segmented-button-border-color-selected: var(--dc-gray-500);
-  --dc-segmented-button-bg: none;
-  --dc-segmented-button-bg-selected: var(--dc-white);
-  --dc-segmented-button-focus-ring-color: var(--dc-focus-ring-color);
+  --border-color: var(--dc-neutral-300);
+  --background: rgb(var(--dc-neutral-900-rgb) / 5%);
+  --delimiter-color: rgb(var(--dc-neutral-900-rgb) / 20%);
+  --button-height: 36px;
+  --button-padding-x: 16px;
+  --button-radius: 9px;
+  --button-color: var(--dc-neutral-900);
+  --button-color-selected: var(--dc-neutral-900);
+  --button-border-color: transparent;
+  --button-border-color-selected: var(--dc-neutral-400);
+  --button-background: none;
+  --button-background-selected: var(--dc-white);
+  --button-focus-ring-color: var(--dc-focus-ring-color);
+  --button-focus-ring-outline: 3px solid var(--button-focus-ring-color);
+  --button-focus-ring-offset: -1px;
 
   display: inline-flex;
   flex-shrink: 0;
   padding: 0;
   margin: 0;
   font: 14px/1 var(--dc-primary-font);
-  list-style: none;
   color-scheme: light;
-  background: var(--dc-segmented-bg);
-  border-radius: var(--dc-segmented-button-radius);
-  box-shadow: inset 0 0 0 1px var(--dc-segmented-border-color);
+  list-style: none;
+  background: var(--background);
+  border-radius: var(--button-radius);
+  box-shadow: inset 0 0 0 1px var(--border-color);
 }
 
 .dc-segmented_disabled {
@@ -31,17 +33,17 @@
 }
 
 .dc-segmented_size_sm {
-  --dc-segmented-button-height: 32px;
-  --dc-segmented-button-padding-x: 12px;
-  --dc-segmented-button-radius: 8px;
+  --button-height: 32px;
+  --button-padding-x: 12px;
+  --button-radius: 8px;
 
   font-size: 13px;
 }
 
 .dc-segmented_size_lg {
-  --dc-segmented-button-height: 40px;
-  --dc-segmented-button-padding-x: 18px;
-  --dc-segmented-button-radius: 10px;
+  --button-height: 40px;
+  --button-padding-x: 18px;
+  --button-radius: 10px;
 
   font-size: 15px;
 }
@@ -49,7 +51,7 @@
 .dc-segmented__item + .dc-segmented__item {
   background-image: linear-gradient(to bottom,
     transparent 25%,
-    var(--dc-segmented-delimiter-color) 25% 75%,
+    var(--delimiter-color) 25% 75%,
     transparent 75%
   );
   background-repeat: no-repeat;
@@ -66,47 +68,50 @@
   box-sizing: border-box;
   display: flex;
   flex: auto;
-  gap: calc(var(--dc-segmented-button-padding-x) / 2);
+  gap: calc(var(--button-padding-x) / 2);
   align-items: center;
   justify-content: center;
-  height: var(--dc-segmented-button-height);
-  padding: 0 var(--dc-segmented-button-padding-x);
+  height: var(--button-height);
+  padding: 0 var(--button-padding-x);
   font: inherit;
-  color: var(--dc-segmented-button-text-color);
+  color: var(--button-color);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  background: var(--dc-segmented-button-bg);
-  border: 1px solid var(--dc-segmented-button-border-color);
-  border-radius: var(--dc-segmented-button-radius);
+  background: var(--button-background);
+  border: 1px solid var(--button-border-color);
+  border-radius: var(--button-radius);
 }
 
 .dc-segmented-button[aria-current="true"] {
-  --dc-segmented-button-border-color: var(--dc-segmented-button-border-color-selected);
-  --dc-segmented-button-bg: var(--dc-segmented-button-bg-selected);
+  --button-color: var(--button-color-selected);
+  --button-background: var(--button-background-selected);
+  --button-border-color: var(--button-border-color-selected);
 
   cursor: default;
 }
 
 .dc-segmented-button:focus {
-  border-color: var(--dc-segmented-button-border-color-focus);
   outline: none;
-  box-shadow: 0 0 0 3px var(--dc-segmented-button-focus-ring-color);
 }
 
-.dc-segmented-button:focus:not(:focus-visible) {
-  border-color: var(--dc-segmented-button-border-color);
-  box-shadow: none;
+.dc-segmented-button:focus-visible {
+  outline: var(--button-focus-ring-outline);
+  outline-offset: var(--button-focus-ring-offset);
 }
 
 .dark .dc-segmented,
 .dark.dc-segmented {
-  --dc-segmented-btn-bg-checked: var(--dc-gray-600);
-  --dc-segmented-btn-border-color-focus: var(--dc-blue-400);
-  --dc-segmented-btn-border-color-checked: var(--dc-gray-400);
+  --border-color: var(--dc-neutral-600);
+  --background: rgb(var(--dc-neutral-50-rgb) / 10%);
+  --delimiter-color: rgb(var(--dc-neutral-50-rgb) / 40%);
+  --button-color: var(--dc-white);
+  --button-color-selected: var(--dc-neutral-900);
+  --button-border-color: transparent;
+  --button-border-color-selected: var(--dc-neutral-600);
 
   color-scheme: dark;
 }

package/dist/components/segmented-control/segmented-control.d.ts

@@ -1,17 +1,18 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-type SegmentedControlHTMLProps = ComponentPropsWithoutRef<'ul'>;
+import { type ComponentProps, type ReactNode } from 'react';
 export type SegmentedControlSize = 'sm' | 'md' | 'lg';
 export type SegmentedControlOption<T extends string | number> = {
     value: T;
     icon?: ReactNode;
     label?: ReactNode;
 };
-export type SegmentedControlProps<T extends string | number> = {
+type SegmentedControlHTMLProps = ComponentProps<'ul'>;
+type SegmentedControlBaseProps<T extends string | number> = {
     size?: SegmentedControlSize;
     disabled?: boolean;
     options: SegmentedControlOption<T>[];
     value: T;
     onChangeValue: (value: T) => void;
-} & SegmentedControlHTMLProps;
+};
+export type SegmentedControlProps<T extends string | number> = SegmentedControlBaseProps<T> & Omit<SegmentedControlHTMLProps, keyof SegmentedControlBaseProps<T>>;
 export declare function SegmentedControl<T extends string | number>({ size, disabled, className, value, options, onChangeValue, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/segmented-control/segmented-control.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { SegmentedButton } from './segmented-button.js';
 export function SegmentedControl({ size = 'md', disabled, className, value, options, onChangeValue, ...props }) {
@@ -13,3 +14,4 @@ export function SegmentedControl({ size = 'md', disabled, className, value, opti
                 }), children: _jsx(SegmentedButton, { icon: option.icon, value: option.value, disabled: disabled, selected: selected, onChangeValue: onChangeValue, children: option.label }) }, option.value));
         }) }));
 }
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAwBxD,MAAM,UAAU,gBAAgB,CAA4B,EAC1D,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,aAAa,EACb,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,gBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE;YAC/C,CAAC,qBAAqB,IAAI,EAAE,CAAC,EAAE,IAAI;YACnC,uBAAuB,EAAE,QAAQ;SAClC,CAAC,YAED,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,QAAQ,GAAG,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;YACxC,OAAO,CACL,aAEE,SAAS,EAAE,UAAU,CAAC;oBACpB,oBAAoB,EAAE,IAAI;oBAC1B,6BAA6B,EAAE,QAAQ;iBACxC,CAAC,YAEF,KAAC,eAAe,IACd,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,YAE3B,MAAM,CAAC,KAAK,GACG,IAdb,MAAM,CAAC,KAAK,CAed,CACN,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

package/dist/components/select/index.js

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

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

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

package/dist/components/select/select.css

@@ -1,35 +1,35 @@
 .dc-select {
-  --dc-select-font-size: 14px;
-  --dc-select-text-color: var(--dc-control-primary-text-color);
-  --dc-select-height: 36px;
-  --dc-select-padding-x: 12px;
-  --dc-select-radius: 7px;
-  --dc-select-border-color: var(--dc-control-border-color);
-  --dc-select-border-color-error: var(--dc-control-error-color);
-  --dc-select-bg: var(--dc-control-bg);
-  --dc-select-focus-ring-color: var(--dc-control-primary-color);
+  --font-size: 14px;
+  --color: var(--dc-neutral-900);
+  --height: 36px;
+  --padding-x: 12px;
+  --radius: 7px;
+  --border-color: var(--dc-neutral-300);
+  --border-color-error: var(--dc-red-500);
+  --background: var(--dc-white);
+  --focus-ring-color: var(--dc-focus-ring-color);
 
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
   align-items: stretch;
   max-width: 100%;
-  height: var(--dc-select-height);
+  height: var(--height);
   font-family: var(--dc-primary-font);
-  font-size: var(--dc-select-font-size);
+  font-size: var(--font-size);
   font-weight: 400;
   line-height: 1.25;
-  color: var(--dc-select-text-color);
   vertical-align: middle;
+  color: var(--color);
   color-scheme: light;
-  background: var(--dc-select-bg);
-  border: 1px solid var(--dc-select-border-color);
-  border-radius: var(--dc-select-radius);
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
 }
 
 .dc-select:focus-within {
-  border-color: var(--dc-select-focus-ring-color);
-  box-shadow: 0 0 0 1px var(--dc-select-focus-ring-color);
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 1px var(--focus-ring-color);
 }
 
 .dc-select_multiple {
@@ -42,7 +42,7 @@
 }
 
 .dc-select_invalid {
-  border-color: var(--dc-select-border-color-error);
+  border-color: var(--border-color-error);
 }
 
 .dc-select_full-width {
@@ -51,24 +51,24 @@
 }
 
 .dc-select_sm {
-  --dc-select-font-size: 13px;
-  --dc-select-height: 32px;
-  --dc-select-padding-x: 8px;
-  --dc-select-radius: 6px;
+  --font-size: 13px;
+  --height: 32px;
+  --padding-x: 8px;
+  --radius: 6px;
 }
 
 .dc-select_lg {
-  --dc-select-font-size: 15px;
-  --dc-select-height: 40px;
-  --dc-select-padding-x: 16px;
-  --dc-select-radius: 8px;
+  --font-size: 15px;
+  --height: 40px;
+  --padding-x: 16px;
+  --radius: 8px;
 }
 
 .dc-select__native {
   flex-grow: 1;
   max-width: 100%;
-  padding-right: calc(var(--dc-select-height) + 0.5em);
-  padding-left: var(--dc-select-padding-x);
+  padding-right: calc(var(--height) + 0.5em);
+  padding-left: var(--padding-x);
   font: inherit;
   color: inherit;
   text-transform: none;
@@ -93,8 +93,8 @@
 
 .dc-select_multiple .dc-select__native {
   padding: 0;
-  margin-top: var(--dc-select-radius);
-  margin-bottom: var(--dc-select-radius);
+  margin-top: var(--radius);
+  margin-bottom: var(--radius);
 }
 
 .dc-select__slot-left {
@@ -104,8 +104,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--dc-select-height);
-  height: var(--dc-select-height);
+  width: var(--height);
+  height: var(--height);
   pointer-events: none;
   background: none;
 }
@@ -116,5 +116,10 @@
 
 .dark .dc-select,
 .dark.dc-select {
+  --color: var(--dc-white);
+  --border-color: var(--dc-neutral-600);
+  --border-color-error: var(--dc-red-400);
+  --background: var(--dc-neutral-800);
+
   color-scheme: dark;
 }

package/dist/components/select/select.d.ts

@@ -1,14 +1,14 @@
-import { ComponentPropsWithRef } from 'react';
+import { type ComponentProps } from 'react';
 export type SelectSize = 'sm' | 'md' | 'lg';
-type SelectHTMLProps = ComponentPropsWithRef<'select'>;
-type SelectBaseProps = Omit<SelectHTMLProps, 'size' | 'multiple' | 'value' | 'defaultValue'> & {
+type SelectHTMLProps = ComponentProps<'select'>;
+type SelectCommonProps = {
     fullWidth?: boolean;
     invalid?: boolean;
     loading?: boolean;
     size?: SelectSize;
     displayedOptionsCount?: number;
 };
-export type SelectProps = SelectBaseProps & ({
+type SelectBaseProps = SelectCommonProps & ({
     multiple?: false;
     value?: string | number;
     defaultValue?: string | number;
@@ -19,31 +19,6 @@ export type SelectProps = SelectBaseProps & ({
     defaultValue?: string[];
     onChangeValue?: (value: string[]) => void;
 });
-export declare const Select: import("react").ForwardRefExoticComponent<(Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
-}, "defaultValue" | "size" | "value" | "multiple"> & {
-    fullWidth?: boolean;
-    invalid?: boolean;
-    loading?: boolean;
-    size?: SelectSize;
-    displayedOptionsCount?: number;
-} & {
-    multiple?: false;
-    value?: string | number;
-    defaultValue?: string | number;
-    onChangeValue?: (value: string) => void;
-}, "ref"> | Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
-    ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
-}, "defaultValue" | "size" | "value" | "multiple"> & {
-    fullWidth?: boolean;
-    invalid?: boolean;
-    loading?: boolean;
-    size?: SelectSize;
-    displayedOptionsCount?: number;
-} & {
-    multiple: true;
-    value?: string[];
-    defaultValue?: string[];
-    onChangeValue?: (value: string[]) => void;
-}, "ref">) & import("react").RefAttributes<HTMLSelectElement>>;
+export type SelectProps = SelectBaseProps & Omit<SelectHTMLProps, keyof SelectBaseProps>;
+export declare function Select({ fullWidth, invalid, loading, size, style, className, disabled, multiple, displayedOptionsCount, children, onChange, onChangeValue, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/select/select.js

@@ -1,8 +1,8 @@
 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';
 import { Spinner } from '../spinner/index.js';
-export const Select = forwardRef(function Select({ fullWidth, invalid, loading, size = 'md', style, className, disabled, multiple, displayedOptionsCount, children, onChange, onChangeValue, ...props }, ref) {
+export function Select({ fullWidth, invalid, loading, size = 'md', style, className, disabled, multiple, displayedOptionsCount, children, onChange, onChangeValue, ...props }) {
     const handleChange = (event) => {
         if (typeof onChange === 'function') {
             onChange(event);
@@ -30,5 +30,6 @@ export const Select = forwardRef(function Select({ fullWidth, invalid, loading,
             'dc-select_invalid': invalid,
             'dc-select_disabled': disabled,
             'dc-select_multiple': multiple,
-        }), children: [_jsx("select", { ...props, ref: ref, className: "dc-select__native", size: displayedOptionsCount, multiple: multiple, disabled: disabled || loading, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange, children: children }), _jsx("span", { className: "dc-select__slot-left", "aria-hidden": true, children: slotElement })] }));
-});
+        }), children: [_jsx("select", { ...props, className: "dc-select__native", size: displayedOptionsCount, multiple: multiple, disabled: disabled || loading, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange, children: children }), _jsx("span", { className: "dc-select__slot-left", "aria-hidden": true, children: slotElement })] }));
+}
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AA8B9C,MAAM,UAAU,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,OAAO,EACP,IAAI,GAAG,IAAI,EACX,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACrB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACI;IACZ,MAAM,YAAY,GAA0C,CAAC,KAAK,EAAE,EAAE;QACpE,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC;QACD,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE,CAAC;YACxC,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;gBACtB,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;qBAC5C,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC;qBACnC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACjC,aAAa,CAAC,MAAM,CAAC,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACpC,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,GAAG,CAChB,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,MAAM,EAAC,KAAK,EACZ,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,IAAI,EAAC,MAAM,YAEX,eACE,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,mDAAmD,GACrD,GACE,CACP,CAAC;IACF,IAAI,OAAO,EAAE,CAAC;QACZ,WAAW,GAAG,CACZ,KAAC,OAAO,IACN,KAAK,EAAC,cAAc,EACpB,MAAM,EAAC,KAAK,GACZ,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE;YAC5C,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,sBAAsB,EAAE,SAAS;YACjC,mBAAmB,EAAE,OAAO;YAC5B,mBAAmB,EAAE,OAAO;YAC5B,oBAAoB,EAAE,QAAQ;YAC9B,oBAAoB,EAAE,QAAQ;SAC/B,CAAC,aAEF,oBACM,KAAK,EACT,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAE,qBAAqB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,kBACf,KAAK,CAAC,cAAc,CAAC,IAAI,OAAO,EAC9C,QAAQ,EAAE,YAAY,YAErB,QAAQ,GACF,EACT,eAAM,SAAS,EAAC,sBAAsB,iBAAc,IAAI,YACrD,WAAW,GACP,IACH,CACP,CAAC;AACJ,CAAC"}

package/dist/components/selection-control/index.js

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

package/dist/components/selection-control/index.js.map

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

package/dist/components/selection-control/selection-control.d.ts

@@ -1,19 +1,14 @@
-import { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
-export type SelectionControlRenderFn = (props: {
+import { type ComponentProps, type JSX, type ReactNode } from 'react';
+export type SelectionControlRenderer = (props: {
     id: string;
 }) => JSX.Element;
-type SelectionControlHTMLProps = ComponentPropsWithoutRef<'div'>;
-type SelectionControlBaseProps = Omit<SelectionControlHTMLProps, 'children'>;
-export type SelectionControlProps = {
+type SelectionControlHTMLProps = ComponentProps<'div'>;
+type SelectionControlBaseProps = {
     labelFor?: string;
     caption?: ReactNode;
     label: ReactNode;
-    children: JSX.Element | SelectionControlRenderFn;
-} & SelectionControlBaseProps;
-export declare const SelectionControl: import("react").ForwardRefExoticComponent<{
-    labelFor?: string;
-    caption?: ReactNode;
-    label: ReactNode;
-    children: JSX.Element | SelectionControlRenderFn;
-} & SelectionControlBaseProps & import("react").RefAttributes<HTMLDivElement>>;
+    children: JSX.Element | SelectionControlRenderer;
+};
+export type SelectionControlProps = SelectionControlBaseProps & Omit<SelectionControlHTMLProps, keyof SelectionControlBaseProps>;
+export declare function SelectionControl({ label, labelFor, caption, className, children, ...props }: SelectionControlProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/selection-control/selection-control.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, useId } from 'react';
+import { cloneElement, useId } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Label } from '../label/index.js';
 import { Caption } from '../caption/index.js';
-export const SelectionControl = forwardRef(function SelectionControl({ label, labelFor, caption, className, children, ...props }, ref) {
+export function SelectionControl({ label, labelFor, caption, className, children, ...props }) {
     const defaultId = useId();
     const controlId = labelFor || defaultId;
-    return (_jsxs("div", { ...props, ref: ref, className: classNames(className, {
+    return (_jsxs("div", { ...props, className: classNames(className, {
             'dc-selection-control': true,
             'dc-selection-control__with_caption': caption,
         }), children: [_jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
@@ -14,4 +14,5 @@ export const SelectionControl = forwardRef(function SelectionControl({ label, la
                     : cloneElement(children, { id: children.props.id || controlId }) }), _jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), caption
                 ? (_jsx(Caption, { className: "dc-selection-control__caption", children: caption }))
                 : null] }));
-});
+}
+//# sourceMappingURL=selection-control.js.map

package/dist/components/selection-control/selection-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/components/selection-control/selection-control.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiD,YAAY,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAiB9C,MAAM,UAAU,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACc;IACtB,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,SAAS,GAAG,QAAQ,IAAI,SAAS,CAAC;IAExC,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,sBAAsB,EAAE,IAAI;YAC5B,oCAAoC,EAAE,OAAO;SAC9C,CAAC,aAEF,cAAK,SAAS,EAAC,6BAA6B,YACzC,OAAO,QAAQ,KAAK,UAAU;oBAC7B,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC;oBAC7B,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,SAAS,EAAE,CAAC,GAC9D,EACN,KAAC,KAAK,IAAC,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,SAAS,YAC9D,KAAK,GACA,EACP,OAAO;gBACN,CAAC,CAAC,CACE,KAAC,OAAO,IAAC,SAAS,EAAC,+BAA+B,YAC/C,OAAO,GACA,CACX;gBACH,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/slider/calc-position.js

@@ -1,3 +1,4 @@
 export function calcPosition(value, opts) {
     return (value - opts.min) / (opts.max - opts.min);
 }
+//# sourceMappingURL=calc-position.js.map

package/dist/components/slider/calc-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc-position.js","sourceRoot":"","sources":["../../../src/components/slider/calc-position.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,YAAY,CAAC,KAAa,EAAE,IAG3C;IACC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;AACpD,CAAC"}

package/dist/components/slider/get-offset-relative-to-thumb.js

@@ -1,8 +1,9 @@
-import { formatNumber, formatPercent } from '../../lib/index.js';
+import { roundNumber, formatPercent } from '../../lib/helpers.js';
 export function getOffsetRelativeToThumb(position) {
     return 'calc('
         + `${formatPercent(position)} - `
-        + `var(--dc-slider-thumb-width) * ${formatNumber(position / 2)} + `
-        + `var(--dc-slider-thumb-width) * ${formatNumber((1 - position) / 2)}`
+        + `var(--thumb-width) * ${roundNumber(position / 2)} + `
+        + `var(--thumb-width) * ${roundNumber((1 - position) / 2)}`
         + ')';
 }
+//# sourceMappingURL=get-offset-relative-to-thumb.js.map

package/dist/components/slider/get-offset-relative-to-thumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-offset-relative-to-thumb.js","sourceRoot":"","sources":["../../../src/components/slider/get-offset-relative-to-thumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAElE,MAAM,UAAU,wBAAwB,CAAC,QAAgB;IACvD,OAAO,OAAO;UACV,GAAG,aAAa,CAAC,QAAQ,CAAC,KAAK;UAC/B,wBAAwB,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,KAAK;UACtD,wBAAwB,WAAW,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;UACzD,GAAG,CAAC;AACV,CAAC"}

package/dist/components/slider/index.js

@@ -1,2 +1,4 @@
+export {} from './slider-tick-marks.js';
 export * from './slider.js';
 export * from './range-slider.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,MAAM,wBAAwB,CAAC;AAC7D,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}

package/dist/components/slider/range-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 RangeSliderValue = {
     readonly min: number;
     readonly max: number;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } 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';
@@ -46,3 +46,4 @@ export function RangeSlider({ 'aria-label': ariaLabel, id, style, className, dis
                 '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: 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] }) }));
 }
+//# sourceMappingURL=range-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../../../src/components/slider/range-slider.tsx"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { PointerEventHandler, ReactNode } from 'react';
+import { type PointerEventHandler, type ReactNode } from 'react';
 export type SliderThumbProps = {
     'aria-label'?: string;
     'id'?: string;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
-import { classNames } from '../../lib/index.js';
+import { classNames } from '../../lib/react-helpers.js';
 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);
@@ -13,3 +14,4 @@ export function SliderThumb({ 'aria-label': ariaLabel, id, name, active, disable
                     'dc-slider__label_active': active,
                 }), htmlFor: id, children: _jsx("span", { className: "dc-slider__label-text", children: format(value) }) }))] }));
 }
+//# sourceMappingURL=slider-thumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-thumb.js","sourceRoot":"","sources":["../../../src/components/slider/slider-thumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqE,MAAM,OAAO,CAAC;AAC1F,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAoBxD,MAAM,UAAU,WAAW,CAAC,EAC1B,YAAY,EAAE,SAAS,EACvB,EAAE,EACF,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,GAAG,EACH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,aAAa,GACI;IACjB,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;QACnE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,gBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,UAAU,CAAC;oBACpB,kBAAkB,EAAE,IAAI;oBACxB,yBAAyB,EAAE,MAAM;iBAClC,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,gBACE,SAAS,EACrB,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,aAAa,GAC5B,EACD,SAAS,IAAI,CACZ,iBACE,KAAK,EAAE,EAAE,IAAI,EAAE,wBAAwB,CAAC,QAAQ,CAAC,EAAE,EACnD,SAAS,EAAE,UAAU,CAAC;oBACpB,kBAAkB,EAAE,IAAI;oBACxB,yBAAyB,EAAE,MAAM;iBAClC,CAAC,EACF,OAAO,EAAE,EAAE,YAEX,eAAM,SAAS,EAAC,uBAAuB,YACpC,MAAM,CAAC,KAAK,CAAC,GACT,GACA,CACV,IACA,CACJ,CAAC;AACJ,CAAC"}

package/dist/components/slider/slider-tick-marks.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type SliderTickMark = {
     value: number;
     label?: ReactNode;

package/dist/components/slider/slider-tick-marks.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { getOffsetRelativeToThumb } from './get-offset-relative-to-thumb.js';
 import { calcPosition } from './calc-position.js';
 export function SliderTickMarks({ dataListId, min, max, tickMarks, }) {
@@ -14,3 +15,4 @@ export function SliderTickMarks({ dataListId, min, max, tickMarks, }) {
     }
     return (_jsxs(_Fragment, { children: [_jsx("datalist", { id: dataListId, children: options }), _jsx("ol", { className: "dc-slider__tick-marks", children: listItems })] }));
 }
+//# sourceMappingURL=slider-tick-marks.js.map

package/dist/components/slider/slider-tick-marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-tick-marks.js","sourceRoot":"","sources":["../../../src/components/slider/slider-tick-marks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAclD,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,GAAG,EACH,GAAG,EACH,SAAS,GACY;IACrB,MAAM,OAAO,GAAgB,EAAE,CAAC;IAChC,MAAM,SAAS,GAAgB,EAAE,CAAC;IAClC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;QACzD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,GAAG,GAAG,aAAa,KAAK,IAAI,KAAK,EAAE,CAAC;QAE1C,OAAO,CAAC,IAAI,CACV,iBAEE,KAAK,EAAE,KAAK,iBACA,yBAAyB,YAEpC,KAAK,IAJD,GAAG,CAKD,CACV,CAAC;QAEF,SAAS,CAAC,IAAI,CACZ,aACE,SAAS,EAAC,sBAAsB,gBAEpB,KAAK,EACjB,KAAK,EAAE;gBACL,IAAI,EAAE,wBAAwB,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;aAClE,IAJI,GAAG,CAKR,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BACE,mBAAU,EAAE,EAAE,UAAU,YACrB,OAAO,GACC,EACX,aAAI,SAAS,EAAC,uBAAuB,YAClC,SAAS,GACP,IACJ,CACJ,CAAC;AACJ,CAAC"}

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type SliderTickMark = {
     value: number;
     label?: ReactNode;

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { formatPercent } from '../../lib/index.js';
+import {} from 'react';
+import { formatPercent } from '../../lib/helpers.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}`
+        + `var(--track-background) ${start}, `
+        + `var(--track-background-filled) ${start}, `
+        + `var(--track-background-filled) ${end}, `
+        + `var(--track-background) ${end}`
         + ')';
     return (_jsx("div", { style: { background }, className: "dc-slider__track", children: children }));
 }
+//# sourceMappingURL=slider-track.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-track.js","sourceRoot":"","sources":["../../../src/components/slider/slider-track.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAarD,MAAM,UAAU,WAAW,CAAC,EAC1B,aAAa,EACb,WAAW,EACX,QAAQ,GACS;IACjB,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,GAAG,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,kBAAkB;UACjC,YAAY;UACZ,2BAA2B,KAAK,IAAI;UACpC,kCAAkC,KAAK,IAAI;UAC3C,kCAAkC,GAAG,IAAI;UACzC,2BAA2B,GAAG,EAAE;UAChC,GAAG,CAAC;IACR,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,EAAE,SAAS,EAAC,kBAAkB,YACrD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}