draft-components 3.5.0 → 4.0.0

package/dist/components/button/button.d.ts

@@ -1,13 +1,13 @@
-import { ComponentPropsWithRef, JSX, ReactNode } from 'react';
-type ButtonHTMLProps = ComponentPropsWithRef<'button'>;
+import { type ComponentProps, type JSX, type ReactNode } from 'react';
 export type ButtonStyle = 'filled' | 'tinted' | 'plain';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type ButtonTint = 'gray' | 'blue' | 'red' | 'green';
+export type ButtonTint = 'light' | 'dark' | 'sky' | 'blue' | 'indigo' | 'rose' | 'red' | 'orange' | 'yellow' | 'lime' | 'green';
 export type ButtonRenderer = (props: {
     className: string;
     children: JSX.Element;
 }) => JSX.Element;
-export type ButtonProps = {
+type ButtonHTMLProps = ComponentProps<'button'>;
+type ButtonBaseProps = {
     fullWidth?: boolean;
     loading?: boolean;
     buttonStyle?: ButtonStyle;
@@ -17,6 +17,7 @@ export type ButtonProps = {
     iconLeft?: ReactNode;
     iconRight?: ReactNode;
     renderAs?: ButtonRenderer;
-} & ButtonHTMLProps;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type ButtonProps = ButtonBaseProps & Omit<ButtonHTMLProps, keyof ButtonBaseProps>;
+export declare function Button({ fullWidth, disabled, loading, buttonStyle, size, tint, iconLeft, iconRight, caption, className, children, type, renderAs, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/button/button.js

@@ -1,24 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 Button = forwardRef(function Button({ fullWidth, disabled, loading, buttonStyle = 'filled', size = 'sm', tint = 'default', iconLeft, iconRight, caption, className, children, type = 'button', renderAs, ...props }, ref) {
-    children = (_jsxs(_Fragment, { children: [loading
-                ? _jsx(Spinner, { "data-testid": "button-spinner", size: "1.15em" })
-                : iconLeft, caption
-                ? (_jsxs("div", { className: "dc-button__label", children: [children, _jsx("small", { className: "dc-button__caption", children: caption })] }))
-                : children, iconRight] }));
-    className = classNames(className, 'dc-button', {
-        [`dc-button_style_${buttonStyle}`]: buttonStyle,
-        [`dc-button_tint_${tint}`]: tint,
-        [`dc-button_${size}`]: size,
+export function Button({ fullWidth, disabled, loading, buttonStyle = 'filled', size = 'sm', tint = 'light', iconLeft, iconRight, caption, className, children, type = 'button', renderAs, ...props }) {
+    if (loading) {
+        iconLeft = _jsx(Spinner, { "data-testid": "button-spinner", size: "1.15em" });
+    }
+    if (caption) {
+        children = (_jsxs("div", { className: "dc-button__label", children: [children, _jsx("small", { className: "dc-button__caption", children: caption })] }));
+    }
+    children = (_jsxs(_Fragment, { children: [iconLeft, children, iconRight] }));
+    className = classNames(className, {
+        'dc-button': true,
         'dc-button_full-width': fullWidth,
         'dc-button_loading': loading,
         'dc-button_has_icon-left': iconLeft,
         'dc-button_has_icon-right': iconRight,
+        [`dc-button_${size}`]: size,
+        [`dc-button_tint_${tint}`]: tint,
+        [`dc-button_style_${buttonStyle}`]: buttonStyle,
     });
     if (typeof renderAs === 'function') {
         return renderAs({ className, children });
     }
-    return (_jsx("button", { ref: ref, type: type, disabled: disabled || loading, className: className, ...props, children: children }));
-});
+    return (_jsx("button", { type: type, disabled: disabled || loading, className: className, ...props, children: children }));
+}
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AA0C9C,MAAM,UAAU,MAAM,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,QAAQ,EACtB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,GAAG,KAAC,OAAO,mBAAa,gBAAgB,EAAC,IAAI,EAAC,QAAQ,GAAG,CAAC;IACpE,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,GAAG,CACT,eAAK,SAAS,EAAC,kBAAkB,aAC9B,QAAQ,EACT,gBAAO,SAAS,EAAC,oBAAoB,YAAE,OAAO,GAAS,IACnD,CACP,CAAC;IACJ,CAAC;IAED,QAAQ,GAAG,CACT,8BACG,QAAQ,EACR,QAAQ,EACR,SAAS,IACT,CACJ,CAAC;IAEF,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE;QAChC,WAAW,EAAE,IAAI;QACjB,sBAAsB,EAAE,SAAS;QACjC,mBAAmB,EAAE,OAAO;QAC5B,yBAAyB,EAAE,QAAQ;QACnC,0BAA0B,EAAE,SAAS;QACrC,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE,IAAI;QAC3B,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAAE,IAAI;QAChC,CAAC,mBAAmB,WAAW,EAAE,CAAC,EAAE,WAAW;KAChD,CAAC,CAAC;IAEH,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACnC,OAAO,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAC7B,SAAS,EAAE,SAAS,KAChB,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/components/button/icon-button.d.ts

@@ -1,3 +1,3 @@
-import { ButtonProps } from './button.js';
+import { type ButtonProps } from './button.js';
 export type IconButtonProps = Omit<ButtonProps, 'caption' | 'iconLeft' | 'iconRight'>;
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function IconButton({ className, children, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button/icon-button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { Button } from './button.js';
-export const IconButton = forwardRef(function IconButton({ className, children, ...props }, ref) {
-    return (_jsx(Button, { ...props, ref: ref, className: classNames('dc-button_icon-only', className), iconLeft: children }));
-});
+export function IconButton({ className, children, ...props }) {
+    return (_jsx(Button, { ...props, className: classNames('dc-button_icon-only', className), iconLeft: children }));
+}
+//# sourceMappingURL=icon-button.js.map

package/dist/components/button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AAOvD,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,KAAC,MAAM,OACD,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,EACvD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC"}

package/dist/components/button/index.js

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

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

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

package/dist/components/button-group/button-group.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithoutRef, JSX } from 'react';
-type ButtonGroupBaseProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-export type ButtonGroupProps = ButtonGroupBaseProps & {
+import { type ComponentProps, type JSX } from 'react';
+type ButtonGroupHTMLProps = ComponentProps<'div'>;
+type ButtonGroupBaseProps = {
     children: JSX.Element | JSX.Element[];
 };
+export type ButtonGroupProps = ButtonGroupBaseProps & Omit<ButtonGroupHTMLProps, keyof ButtonGroupBaseProps>;
 export declare function ButtonGroup({ className, children, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/button-group/button-group.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export function ButtonGroup({ className, children, ...props }) {
     return (_jsx("div", { ...props, className: classNames(className, 'dc-button-group'), children: children }));
 }
+//# sourceMappingURL=button-group.js.map

package/dist/components/button-group/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/components/button-group/button-group.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiC,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAYxD,MAAM,UAAU,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACS;IACjB,OAAO,CACL,iBAAS,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,iBAAiB,CAAC,YAChE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/button-group/index.js

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

package/dist/components/button-group/index.js.map

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

package/dist/components/caption/caption.css

@@ -2,30 +2,30 @@
   display: block;
   align-items: center;
   font: var(--dc-text-sm);
-  color: var(--dc-secondary-text-color);
+  color: var(--dc-text-color-secondary);
   text-align: left;
   color-scheme: light;
 }
 
 .dc-caption_color_blue {
-  color: var(--dc-info-text-color);
+  color: var(--dc-text-color-info);
 }
 
 .dc-caption_color_green {
-  color: var(--dc-success-text-color);
+  color: var(--dc-text-color-success);
 }
 
 .dc-caption_color_orange {
-  color: var(--dc-warning-text-color);
+  color: var(--dc-text-color-warning);
 }
 
 .dc-caption_color_red {
-  color: var(--dc-error-text-color);
+  color: var(--dc-text-color-error);
 }
 
 .dc-caption__icon {
-  display: inline-flex;
   float: left;
+  display: inline-flex;
   margin-right: 0.5em;
   color: inherit;
 }

package/dist/components/caption/caption.d.ts

@@ -1,10 +1,10 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
-type CaptionHTMLProps = ComponentPropsWithRef<'div'>;
-type CaptionBaseProps = Omit<CaptionHTMLProps, 'color'>;
+import { type ComponentProps, type ReactNode } from 'react';
 export type CaptionColor = 'gray' | 'blue' | 'green' | 'orange' | 'red';
-export type CaptionProps = {
+type CaptionHTMLProps = ComponentProps<'div'>;
+type CaptionBaseProps = {
     icon?: ReactNode;
     color?: CaptionColor;
-} & CaptionBaseProps;
-export declare const Caption: import("react").ForwardRefExoticComponent<Omit<CaptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type CaptionProps = CaptionBaseProps & Omit<CaptionHTMLProps, keyof CaptionBaseProps>;
+export declare function Caption({ color, icon, children, className, ...props }: CaptionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/caption/caption.js

@@ -1,10 +1,12 @@
 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 Caption = forwardRef(function Caption({ color = 'gray', icon, children, className, ...props }, ref) {
-    return (_jsxs("div", { ...props, ref: ref, className: classNames(className, 'dc-caption', {
+export function Caption({ color = 'gray', icon, children, className, ...props }) {
+    return (_jsxs("div", { ...props, className: classNames(className, {
+            'dc-caption': true,
             [`dc-caption_color_${color}`]: color,
         }), children: [icon
                 ? _jsx("span", { className: "dc-caption__icon", children: icon })
                 : null, children] }));
-});
+}
+//# sourceMappingURL=caption.js.map

package/dist/components/caption/caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"caption.js","sourceRoot":"","sources":["../../../src/components/caption/caption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAoBxD,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,GAAG,MAAM,EACd,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACK;IACb,OAAO,CACL,kBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,YAAY,EAAE,IAAI;YAClB,CAAC,oBAAoB,KAAK,EAAE,CAAC,EAAE,KAAK;SACrC,CAAC,aAED,IAAI;gBACH,CAAC,CAAC,eAAM,SAAS,EAAC,kBAAkB,YAAE,IAAI,GAAQ;gBAClD,CAAC,CAAC,IAAI,EACP,QAAQ,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/caption/index.js

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

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

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

package/dist/components/checkbox/checkbox.css

@@ -1,18 +1,18 @@
 .dc-checkbox {
-  --dc-checkbox-size: 20px;
-  --dc-checkbox-radius: 6px;
-  --dc-checkbox-bg: var(--dc-control-bg);
-  --dc-checkbox-bg-checked: var(--dc-control-primary-color);
-  --dc-checkbox-border-color: var(--dc-control-border-color);
-  --dc-checkbox-border-color-checked: var(--dc-control-primary-color);
-  --dc-checkbox-icon-color: var(--dc-control-on-primary-color);
-  --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
+  --size: 20px;
+  --radius: 6px;
+  --background: var(--dc-white);
+  --background-checked: var(--dc-blue-500);
+  --border-color: var(--dc-neutral-300);
+  --border-color-checked: rgb(var(--dc-black-rgb) / 10%);
+  --icon-color: var(--dc-white);
+  --focus-ring-color: var(--dc-focus-ring-color);
 
   position: relative;
   display: inline-block;
   flex-shrink: 0;
-  width: var(--dc-checkbox-size);
-  height: var(--dc-checkbox-size);
+  width: var(--size);
+  height: var(--size);
   line-height: 0;
   text-align: left;
   color-scheme: light;
@@ -25,9 +25,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-checkbox__check {
@@ -39,9 +39,9 @@
   width: 100%;
   height: 100%;
   vertical-align: middle;
-  background: var(--dc-checkbox-bg);
-  border: 1px solid var(--dc-checkbox-border-color);
-  border-radius: var(--dc-checkbox-radius);
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
   transition: opacity 0.2s;
 }
 
@@ -49,12 +49,12 @@
   display: none;
   width: 100%;
   height: 100%;
-  color: var(--dc-checkbox-icon-color);
+  color: var(--icon-color);
 }
 
 .dc-checkbox__input:checked + .dc-checkbox__check {
-  background: var(--dc-checkbox-bg-checked);
-  border-color: var(--dc-checkbox-border-color-checked);
+  background: var(--background-checked);
+  border-color: var(--border-color-checked);
 }
 
 .dc-checkbox__input:checked + .dc-checkbox__check .dc-checkbox__icon {
@@ -70,20 +70,16 @@
   outline: none;
 }
 
-.dc-checkbox__input:focus + .dc-checkbox__check::after {
-  position: absolute;
-  inset: -3px;
-  pointer-events: none;
-  content: "";
-  border-radius: calc(3px + var(--dc-checkbox-radius));
-  box-shadow: 0 0 0 3px var(--dc-checkbox-focus-ring-color);
-}
-
-.dc-checkbox__input:focus:not(:focus-visible) + .dc-checkbox__check::after {
-  content: none;
+.dc-checkbox__input:focus-visible + .dc-checkbox__check {
+  outline: 2px solid var(--focus-ring-color);
+  outline-offset: 2px;
 }
 
 .dark .dc-checkbox,
 .dark.dc-checkbox {
+  --background: var(--dc-neutral-800);
+  --border-color: var(--dc-neutral-600);
+  --border-color-checked: rgb(var(--dc-white-rgb) / 10%);
+
   color-scheme: dark;
 }

package/dist/components/checkbox/checkbox.d.ts

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

package/dist/components/checkbox/checkbox.js

@@ -1,17 +1,22 @@
 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 Checkbox = forwardRef(function Checkbox({ hasMixedState = false, style, className, onChange, onToggle, ...props }, ref) {
-    return (_jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
-                    onChange?.(event);
-                    onToggle?.(event.target.checked);
+export function Checkbox({ hasMixedState = false, style, className, onChange, onToggle, ...props }) {
+    return (_jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [_jsx("input", { ...props, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
+                    if (typeof onChange === 'function') {
+                        onChange(event);
+                    }
+                    if (typeof onToggle === 'function') {
+                        onToggle(event.target.checked);
+                    }
                 } }), _jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState
                     ? (_jsx(DashIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon" }))
                     : (_jsx(CheckIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-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: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function DashIcon(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: "M5 10H15", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round" }) }));
 }
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAexD,MAAM,UAAU,QAAQ,CAAC,EACvB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACM;IACd,OAAO,CACL,iBAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,aAClE,mBACM,KAAK,EACT,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,oBAAoB,EAC9B,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,eACE,SAAS,EAAC,oBAAoB,iBAClB,gBAAgB,iBACf,IAAI,YAEhB,aAAa;oBACZ,CAAC,CAAC,CACE,KAAC,QAAQ,IACP,SAAS,EAAC,mBAAmB,iBACjB,oBAAoB,GAChC,CACH;oBACH,CAAC,CAAC,CACE,KAAC,SAAS,IACR,SAAS,EAAC,mBAAmB,iBACjB,qBAAqB,GACjC,CACH,GACA,IACD,CACT,CAAC;AACJ,CAAC;AAED,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,sBAAsB,EACxB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAA4B;IAC5C,OAAO,CACL,cACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,KACN,KAAK,YAET,eACE,CAAC,EAAC,UAAU,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,GAAG,EAChB,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AACJ,CAAC"}

package/dist/components/checkbox/index.js

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

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

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

package/dist/components/color-picker/color-picker-button.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ChangeEventHandler, ReactNode } from 'react';
+import { type CSSProperties, type ChangeEventHandler, type ReactNode } from 'react';
 export type ColorPickerButtonProps<T extends string | number> = {
     style?: CSSProperties;
     className?: string;

package/dist/components/color-picker/color-picker-button.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export function ColorPickerButton({ style, className, label, name, color, value, checked, defaultChecked, onChange, onChangeValue, }) {
     const customProperties = {
-        '--dc-color-picker-btn-color': color,
+        '--button-color': color,
     };
     return (_jsxs("label", { style: { ...customProperties, ...style }, className: classNames('dc-color-picker__btn', className), children: [_jsx("input", { type: "radio", name: name, value: value, checked: checked, defaultChecked: defaultChecked, onChange: (event) => {
-                    onChange?.(event);
-                    onChangeValue?.(value);
+                    if (typeof onChange === 'function') {
+                        onChange(event);
+                    }
+                    if (typeof onChangeValue === 'function') {
+                        onChangeValue(value);
+                    }
                 } }), _jsx("span", { className: "dc-color-picker__btn-check", "aria-hidden": true }), label] }));
 }
+//# sourceMappingURL=color-picker-button.js.map

package/dist/components/color-picker/color-picker-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-button.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA+D,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAexD,MAAM,UAAU,iBAAiB,CAA4B,EAC3D,KAAK,EACL,SAAS,EACT,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,cAAc,EACd,QAAQ,EACR,aAAa,GACa;IAC1B,MAAM,gBAAgB,GAAG;QACvB,gBAAgB,EAAE,KAAK;KACxB,CAAC;IACF,OAAO,CACL,iBACE,KAAK,EAAE,EAAE,GAAG,gBAAgB,EAAE,GAAG,KAAK,EAAE,EACxC,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,aAExD,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,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,aAAa,KAAK,UAAU,EAAE,CAAC;wBACxC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACvB,CAAC;gBACH,CAAC,GACD,EACF,eACE,SAAS,EAAC,4BAA4B,iBACzB,IAAI,GACjB,EACD,KAAK,IACA,CACT,CAAC;AACJ,CAAC"}

package/dist/components/color-picker/color-picker.css

@@ -1,9 +1,9 @@
 .dc-color-picker {
-  --dc-color-picker-btn-size: 24px;
-  --dc-color-picker-btn-color: var(--dc-control-on-primary-color);
-  --dc-color-picker-btn-check-color: white;
-  --dc-color-picker-btn-inner-border-color: rgb(var(--dc-black-rgb) / 5%);
-  --dc-color-picker-btn-focus-ring-color: var(--dc-focus-ring-color);
+  --button-size: 24px;
+  --button-color: var(--dc-blue);
+  --button-check-color: var(--dc-white);
+  --button-inner-border-color: rgb(var(--dc-black-rgb) / 5%);
+  --button-focus-ring-color: var(--dc-focus-ring-color);
 
   display: inline-flex;
   flex-wrap: wrap;
@@ -26,13 +26,13 @@
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--dc-color-picker-btn-size);
-  height: var(--dc-color-picker-btn-size);
+  width: var(--button-size);
+  height: var(--button-size);
   font-size: 0;
   color: transparent;
-  background: var(--dc-color-picker-btn-color);
+  background: var(--button-color);
   border-radius: 50%;
-  box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);
+  box-shadow: inset 0 0 0 1px var(--button-inner-border-color);
 }
 
 .dc-color-picker_disabled .dc-color-picker__btn {
@@ -44,9 +44,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 
 .dc-color-picker__btn > input + .dc-color-picker__btn-check {
@@ -60,7 +60,7 @@
   display: inline-block;
   width: 38%;
   height: 38%;
-  background: var(--dc-color-picker-btn-check-color);
+  background: var(--button-check-color);
   border-radius: 50%;
   box-shadow: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 5%);
   transform: translate(-50%, -50%);
@@ -73,12 +73,12 @@
   display: inline-block;
   content: "";
   border-radius: 50%;
-  box-shadow: 0 0 0 3px var(--dc-color-picker-btn-focus-ring-color);
+  box-shadow: 0 0 0 3px var(--button-focus-ring-color);
 }
 
 .dark .dc-color-picker,
 .dark.dc-color-picker {
-  --dc-color-picker-btn-inner-border-color: rgb(255 255 255 / 10%);
+  --button-inner-border-color: rgb(var(--dc-white-rgb) / 10%);
 
   color-scheme: dark;
 }

package/dist/components/color-picker/color-picker.d.ts

@@ -1,15 +1,19 @@
-import { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from 'react';
-export type ColorPickerOption<T extends string | number> = {
+import { type ChangeEventHandler, type ComponentProps, type ReactNode } from 'react';
+export type ColorPickerValue = string | number;
+export type ColorPickerOption<T extends ColorPickerValue> = {
     value: T;
     color: string;
     label?: ReactNode;
 };
-export type ColorPickerProps<T extends string | number> = {
-    name: string;
+type ColorPickerHTMLProps = ComponentProps<'fieldset'>;
+type ColorPickerBaseProps<T extends ColorPickerValue> = {
     options: ColorPickerOption<T>[] | Readonly<ColorPickerOption<T>[]>;
+    name: string;
     value?: T;
     defaultValue?: T;
     onChange?: ChangeEventHandler<HTMLInputElement>;
     onChangeValue?: (value: T) => void;
-} & ComponentPropsWithoutRef<'fieldset'>;
-export declare function ColorPicker<T extends string | number>({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }: ColorPickerProps<T>): import("react/jsx-runtime").JSX.Element;
+};
+export type ColorPickerProps<T extends ColorPickerValue> = ColorPickerBaseProps<T> & Omit<ColorPickerHTMLProps, keyof ColorPickerBaseProps<T>>;
+export declare function ColorPicker<T extends ColorPickerValue>({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }: ColorPickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/color-picker/color-picker.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 import { ColorPickerButton } from './color-picker-button.js';
 export function ColorPicker({ className, name, disabled, options, value, defaultValue, onChange, onChangeValue, ...props }) {
@@ -17,3 +18,4 @@ export function ColorPicker({ className, name, disabled, options, value, default
             return (_jsx(ColorPickerButton, { name: name, label: option.label, color: option.color, value: option.value, checked: checked, defaultChecked: defaultChecked, onChange: onChange, onChangeValue: onChangeValue }, option.value));
         }) }));
 }
+//# sourceMappingURL=color-picker.js.map

package/dist/components/color-picker/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAyB7D,MAAM,UAAU,WAAW,CAA6B,EACtD,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACY;IACpB,OAAO,CACL,sBACM,KAAK,EACT,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,iBAAiB,EAAE,IAAI;YACvB,0BAA0B,EAAE,QAAQ;SACrC,CAAC,YAED,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,IAAI,OAA4B,CAAC;YACjC,IAAI,cAAmC,CAAC;YACxC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,OAAO,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;YACnC,CAAC;iBAAM,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;gBACtC,cAAc,GAAG,MAAM,CAAC,KAAK,KAAK,YAAY,CAAC;YACjD,CAAC;YACD,OAAO,CACL,KAAC,iBAAiB,IAEhB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,IARvB,MAAM,CAAC,KAAK,CASjB,CACH,CAAC;QACJ,CAAC,CAAC,GACO,CACZ,CAAC;AACJ,CAAC"}

package/dist/components/color-picker/index.js

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

package/dist/components/color-picker/index.js.map

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

package/dist/components/date-picker/calendar-day.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef } from 'react';
-type CalendarDayHTMLProps = ComponentPropsWithoutRef<'button'>;
-export type CalendarDayProps = {
+import { type ComponentProps } from 'react';
+type CalendarDayHTMLProps = ComponentProps<'button'>;
+type CalendarDayBaseProps = {
     date: Date;
     dateISO: string;
     locale?: string;
@@ -12,6 +12,7 @@ export type CalendarDayProps = {
     inRange?: boolean;
     isRangeStart?: boolean;
     isRangeEnd?: boolean;
-} & CalendarDayHTMLProps;
+};
+export type CalendarDayProps = CalendarDayBaseProps & Omit<CalendarDayHTMLProps, keyof CalendarDayBaseProps>;
 export declare function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isFocusable, isToday, isWeekend, inRange, isRangeStart, isRangeEnd, ...props }: CalendarDayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker/calendar-day.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 export function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isFocusable, isToday, isWeekend, inRange, isRangeStart, isRangeEnd, ...props }) {
     return (_jsx("button", { ...props, className: classNames('dc-calendar-day', {
@@ -10,3 +11,4 @@ export function CalendarDay({ date, dateISO, locale, isSelected, isDisabled, isF
             'dc-calendar-day_range-end': isRangeEnd,
         }), disabled: isDisabled, tabIndex: isFocusable ? 0 : -1, "data-date": dateISO, "aria-label": date.toLocaleString(locale, { dateStyle: 'long' }), children: _jsx("span", { className: "dc-calendar-day__body", children: date.getDate() }) }));
 }
+//# sourceMappingURL=calendar-day.js.map

package/dist/components/date-picker/calendar-day.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-day.js","sourceRoot":"","sources":["../../../src/components/date-picker/calendar-day.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAsBxD,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,MAAM,EACN,UAAU,EACV,UAAU,EACV,WAAW,EACX,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,UAAU,EACV,GAAG,KAAK,EACS;IACjB,OAAO,CACL,oBACM,KAAK,EACT,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;YACvC,0BAA0B,EAAE,UAAU;YACtC,uBAAuB,EAAE,OAAO;YAChC,yBAAyB,EAAE,SAAS;YACpC,0BAA0B,EAAE,OAAO;YACnC,6BAA6B,EAAE,YAAY;YAC3C,2BAA2B,EAAE,UAAU;SACxC,CAAC,EACF,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eACnB,OAAO,gBACN,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,YAE9D,eAAM,SAAS,EAAC,uBAAuB,YACpC,IAAI,CAAC,OAAO,EAAE,GACV,GACA,CACV,CAAC;AACJ,CAAC"}

package/dist/components/date-picker/calendar-grid-head.d.ts

@@ -1,4 +1,4 @@
-import { Weekday } from './date-helpers.js';
+import { type Weekday } from './date-helpers.js';
 export type CalendarGridHeadProps = {
     locale?: string;
     weekStartsOn?: Weekday;

package/dist/components/date-picker/calendar-grid-head.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
 import { DAYS_IN_WEEK, addDays, getStartOfWeek } from './date-helpers.js';
 export function CalendarGridHead({ locale, weekStartsOn, }) {
     const columns = [];
@@ -9,3 +10,4 @@ export function CalendarGridHead({ locale, weekStartsOn, }) {
     }
     return (_jsx("thead", { children: _jsx("tr", { role: "row", children: columns }) }));
 }
+//# sourceMappingURL=calendar-grid-head.js.map

package/dist/components/date-picker/calendar-grid-head.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid-head.js","sourceRoot":"","sources":["../../../src/components/date-picker/calendar-grid-head.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,YAAY,EAAgB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOxF,MAAM,UAAU,gBAAgB,CAAC,EAC/B,MAAM,EACN,YAAY,GACU;IACtB,MAAM,OAAO,GAAkB,EAAE,CAAC;IAClC,MAAM,MAAM,GAAG,cAAc,CAAC,IAAI,IAAI,EAAE,EAAE,YAAY,CAAC,CAAC;IACxD,KAAK,IAAI,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,YAAY,EAAE,OAAO,IAAI,CAAC,EAAE,CAAC;QAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACtC,OAAO,CAAC,IAAI,CACV,aAEE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,YAEzD,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,IAJjD,OAAO,CAKT,CACN,CAAC;IACJ,CAAC;IAED,OAAO,CACL,0BACE,aAAI,IAAI,EAAC,KAAK,YAAE,OAAO,GAAM,GACvB,CACT,CAAC;AACJ,CAAC"}

package/dist/components/date-picker/calendar-grid.d.ts

@@ -1,5 +1,5 @@
 import { type Weekday } from './date-helpers.js';
-import { CalendarDayProps } from './calendar-day.js';
+import { type CalendarDayProps } from './calendar-day.js';
 export type GetCalendarDayProps = (date: Date) => Pick<CalendarDayProps, 'isSelected' | 'inRange' | 'isRangeStart' | 'isRangeEnd'>;
 export type CalendarGridProps = {
     focusDay: Date;