@chayns-ui/core 0.5.0 → 0.7.0

package/dist/components/switch/Switch.js

@@ -1,17 +1,25 @@
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/switch/Switch.tsx
-function Switch({ children, className, ...inputProps }) {
+var Switch = forwardRef(function Switch({ children, className, description, ...inputProps }, ref) {
 	const inputClassName = ["chayns-switch__input", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs("label", {
 		className: "chayns-switch",
 		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "chayns-switch__label",
-				children
+			/* @__PURE__ */ jsxs("span", {
+				className: "chayns-switch__content",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "chayns-switch__label",
+					children
+				}), description !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: "chayns-switch__description",
+					children: description
+				}) : null]
 			}),
 			/* @__PURE__ */ jsx("input", {
 				...inputProps,
 				className: inputClassName,
+				ref,
 				type: "checkbox"
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -21,7 +29,7 @@ function Switch({ children, className, ...inputProps }) {
 			})
 		]
 	});
-}
+});
 //#endregion
 export { Switch as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { SwitchProps } from './Switch.types.js';\n\nfunction Switch({ children, className, ...inputProps }: SwitchProps) {\n  const inputClassName = ['chayns-switch__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-switch\">\n      <span className=\"chayns-switch__label\">{children}</span>\n      <input {...inputProps} className={inputClassName} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-switch__control\">\n        <span className=\"chayns-switch__knob\" />\n      </span>\n    </label>\n  );\n}\n\nexport default Switch;\n"],"mappings":";;AAEA,SAAS,OAAO,EAAE,UAAU,WAAW,GAAG,cAA2B;CACnE,MAAM,iBAAiB,CAAC,wBAAwB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,oBAAC,QAAD;IAAM,WAAU;IAAwB;GAAe,CAAA;GACvD,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAgB,MAAK;GAAY,CAAA;GACnE,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,QAAD,EAAM,WAAU,sBAAuB,CAAA;GACnC,CAAA;EACD;;AAEX"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { SwitchProps } from './Switch.types.js';\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  { children, className, description, ...inputProps },\n  ref,\n) {\n  const inputClassName = ['chayns-switch__input', className].filter(Boolean).join(' ');\n\n  return (\n    <label className=\"chayns-switch\">\n      <span className=\"chayns-switch__content\">\n        <span className=\"chayns-switch__label\">{children}</span>\n        {description !== undefined ? (\n          <span className=\"chayns-switch__description\">{description}</span>\n        ) : null}\n      </span>\n      <input {...inputProps} className={inputClassName} ref={ref} type=\"checkbox\" />\n      <span aria-hidden=\"true\" className=\"chayns-switch__control\">\n        <span className=\"chayns-switch__knob\" />\n      </span>\n    </label>\n  );\n});\n\nexport default Switch;\n"],"mappings":";;;AAIA,IAAM,SAAS,WAA0C,SAAS,OAChE,EAAE,UAAU,WAAW,aAAa,GAAG,cACvC,KACA;CACA,MAAM,iBAAiB,CAAC,wBAAwB,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEnF,OACE,qBAAC,SAAD;EAAO,WAAU;EAAjB,UAAA;GACE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAwB;IAAe,CAAA,GACtD,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAA8B,UAAA;IAAkB,CAAA,IAC9D,IACA;;GACN,oBAAC,SAAD;IAAO,GAAI;IAAY,WAAW;IAAqB;IAAK,MAAK;GAAY,CAAA;GAC7E,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,QAAD,EAAM,WAAU,sBAAuB,CAAA;GACnC,CAAA;EACD;;AAEX,CAAC"}

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

@@ -3,6 +3,8 @@ import type { ComponentPropsWithRef, ReactNode } from 'react';
 export interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'children' | 'type'> {
     /** Visible, localized label associated with the native checkbox. */
     children: Exclude<ReactNode, boolean | null | undefined>;
+    /** Optional localized supporting text associated with the switch label. */
+    description?: ReactNode;
     /** Switch owns its native input type. */
     type?: never;
 }

package/dist/components/switch/Switch.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,8EAA8E;AAC9E,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5F,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,yCAAyC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,8EAA8E;AAC9E,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5F,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAEzD,2EAA2E;IAC3E,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,yCAAyC;IACzC,IAAI,CAAC,EAAE,KAAK,CAAC;CACd"}

package/dist/components/text-area/TextArea.d.ts

@@ -1,4 +1,4 @@
 import type { TextAreaProps } from './TextArea.types.js';
-declare function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }: TextAreaProps): import("react").JSX.Element;
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/components/text-area/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,WAAW,EACX,GAAG,aAAa,EACjB,EAAE,aAAa,+BAuCf;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzD,QAAA,MAAM,QAAQ,4HA2CZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/components/text-area/TextArea.js

@@ -1,7 +1,7 @@
+import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 //#region src/components/text-area/TextArea.tsx
-function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }) {
+var TextArea = forwardRef(function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }, ref) {
 	const generatedId = useId();
 	const textareaId = id ?? generatedId;
 	const hasError = error !== void 0;
@@ -18,7 +18,8 @@ function TextArea({ className, counter, error, helpText, id, placeholder, ...tex
 				"aria-invalid": hasError || void 0,
 				className: textareaClassName,
 				id: textareaId,
-				placeholder: placeholder === void 0 ? void 0 : " "
+				placeholder: placeholder === void 0 ? void 0 : " ",
+				ref
 			}),
 			placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
 				className: "chayns-text-area__label",
@@ -38,7 +39,7 @@ function TextArea({ className, counter, error, helpText, id, placeholder, ...tex
 			}) : null
 		]
 	});
-}
+});
 //#endregion
 export { TextArea as default };
 

package/dist/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":[],"sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport type { TextAreaProps } from './TextArea.types.js';\n\nfunction TextArea({\n  className,\n  counter,\n  error,\n  helpText,\n  id,\n  placeholder,\n  ...textareaProps\n}: TextAreaProps) {\n  const generatedId = useId();\n  const textareaId = id ?? generatedId;\n  const hasError = error !== undefined;\n  const helpId = helpText !== undefined ? `${textareaId}-help` : undefined;\n  const errorId = hasError ? `${textareaId}-error` : undefined;\n  const describedBy = [helpId, errorId].filter(Boolean).join(' ') || undefined;\n  const textareaClassName = ['chayns-text-area__input', className].filter(Boolean).join(' ');\n\n  return (\n    <div className={`chayns-text-area${hasError ? ' chayns-text-area--error' : ''}`}>\n      <textarea\n        {...textareaProps}\n        aria-describedby={describedBy}\n        aria-invalid={hasError || undefined}\n        className={textareaClassName}\n        id={textareaId}\n        placeholder={placeholder === undefined ? undefined : ' '}\n      />\n      {placeholder !== undefined ? (\n        <label className=\"chayns-text-area__label\" htmlFor={textareaId}>\n          {placeholder}\n        </label>\n      ) : null}\n      {helpText !== undefined || hasError || counter !== undefined ? (\n        <div className=\"chayns-text-area__help\">\n          <div>\n            {helpText !== undefined ? <div id={helpId}>{helpText}</div> : null}\n            {hasError ? (\n              <div className=\"chayns-text-area__error\" id={errorId}>\n                {error}\n              </div>\n            ) : null}\n          </div>\n          {counter !== undefined ? <div>{counter}</div> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport default TextArea;\n"],"mappings":";;;AAIA,SAAS,SAAS,EAChB,WACA,SACA,OACA,UACA,IACA,aACA,GAAG,iBACa;CAChB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,WAAW,UAAU,KAAA;CAC3B,MAAM,SAAS,aAAa,KAAA,IAAY,GAAG,WAAW,SAAS,KAAA;CAC/D,MAAM,UAAU,WAAW,GAAG,WAAW,UAAU,KAAA;CACnD,MAAM,cAAc,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACnE,MAAM,oBAAoB,CAAC,2BAA2B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEzF,OACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB,WAAW,6BAA6B;EAA3E,UAAA;GACE,oBAAC,YAAD;IACE,GAAI;IACJ,oBAAkB;IAClB,gBAAc,YAAY,KAAA;IAC1B,WAAW;IACX,IAAI;IACJ,aAAa,gBAAgB,KAAA,IAAY,KAAA,IAAY;GACtD,CAAA;GACA,gBAAgB,KAAA,IACf,oBAAC,SAAD;IAAO,WAAU;IAA0B,SAAS;IACjD,UAAA;GACI,CAAA,IACL;GACH,aAAa,KAAA,KAAa,YAAY,YAAY,KAAA,IACjD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA,CACG,aAAa,KAAA,IAAY,oBAAC,OAAD;KAAK,IAAI;KAAS,UAAA;IAAc,CAAA,IAAI,MAC7D,WACC,oBAAC,OAAD;KAAK,WAAU;KAA0B,IAAI;KAC1C,UAAA;IACE,CAAA,IACH,IACD,EAAA,CAAA,GACJ,YAAY,KAAA,IAAY,oBAAC,OAAD,EAAA,UAAM,QAAa,CAAA,IAAI,IAC7C;GACH,CAAA,IAAA;EACD;;AAET"}
+{"version":3,"file":"TextArea.js","names":[],"sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport type { TextAreaProps } from './TextArea.types.js';\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(\n  { className, counter, error, helpText, id, placeholder, ...textareaProps },\n  ref,\n) {\n  const generatedId = useId();\n  const textareaId = id ?? generatedId;\n  const hasError = error !== undefined;\n  const helpId = helpText !== undefined ? `${textareaId}-help` : undefined;\n  const errorId = hasError ? `${textareaId}-error` : undefined;\n  const describedBy = [helpId, errorId].filter(Boolean).join(' ') || undefined;\n  const textareaClassName = ['chayns-text-area__input', className].filter(Boolean).join(' ');\n\n  return (\n    <div className={`chayns-text-area${hasError ? ' chayns-text-area--error' : ''}`}>\n      <textarea\n        {...textareaProps}\n        aria-describedby={describedBy}\n        aria-invalid={hasError || undefined}\n        className={textareaClassName}\n        id={textareaId}\n        placeholder={placeholder === undefined ? undefined : ' '}\n        ref={ref}\n      />\n      {placeholder !== undefined ? (\n        <label className=\"chayns-text-area__label\" htmlFor={textareaId}>\n          {placeholder}\n        </label>\n      ) : null}\n      {helpText !== undefined || hasError || counter !== undefined ? (\n        <div className=\"chayns-text-area__help\">\n          <div>\n            {helpText !== undefined ? <div id={helpId}>{helpText}</div> : null}\n            {hasError ? (\n              <div className=\"chayns-text-area__error\" id={errorId}>\n                {error}\n              </div>\n            ) : null}\n          </div>\n          {counter !== undefined ? <div>{counter}</div> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nexport default TextArea;\n"],"mappings":";;;AAIA,IAAM,WAAW,WAA+C,SAAS,SACvE,EAAE,WAAW,SAAS,OAAO,UAAU,IAAI,aAAa,GAAG,iBAC3D,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,WAAW,UAAU,KAAA;CAC3B,MAAM,SAAS,aAAa,KAAA,IAAY,GAAG,WAAW,SAAS,KAAA;CAC/D,MAAM,UAAU,WAAW,GAAG,WAAW,UAAU,KAAA;CACnD,MAAM,cAAc,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACnE,MAAM,oBAAoB,CAAC,2BAA2B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEzF,OACE,qBAAC,OAAD;EAAK,WAAW,mBAAmB,WAAW,6BAA6B;EAA3E,UAAA;GACE,oBAAC,YAAD;IACE,GAAI;IACJ,oBAAkB;IAClB,gBAAc,YAAY,KAAA;IAC1B,WAAW;IACX,IAAI;IACJ,aAAa,gBAAgB,KAAA,IAAY,KAAA,IAAY;IAChD;GACN,CAAA;GACA,gBAAgB,KAAA,IACf,oBAAC,SAAD;IAAO,WAAU;IAA0B,SAAS;IACjD,UAAA;GACI,CAAA,IACL;GACH,aAAa,KAAA,KAAa,YAAY,YAAY,KAAA,IACjD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA,CACG,aAAa,KAAA,IAAY,oBAAC,OAAD;KAAK,IAAI;KAAS,UAAA;IAAc,CAAA,IAAI,MAC7D,WACC,oBAAC,OAAD;KAAK,WAAU;KAA0B,IAAI;KAC1C,UAAA;IACE,CAAA,IACH,IACD,EAAA,CAAA,GACJ,YAAY,KAAA,IAAY,oBAAC,OAAD,EAAA,UAAM,QAAa,CAAA,IAAI,IAC7C;GACH,CAAA,IAAA;EACD;;AAET,CAAC"}

package/dist/components/text-field/TextField.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './TextField.types.js';
-declare function TextField({ className, counter, error, helpText, id, placeholder, ...inputProps }: TextFieldProps): import("react").JSX.Element;
+declare const TextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default TextField;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/text-field/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,WAAW,EACX,GAAG,UAAU,EACd,EAAE,cAAc,+BAuChB;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,SAAS,0HA2Cb,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/components/text-field/TextField.js

@@ -1,7 +1,7 @@
+import { forwardRef, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 //#region src/components/text-field/TextField.tsx
-function TextField({ className, counter, error, helpText, id, placeholder, ...inputProps }) {
+var TextField = forwardRef(function TextField({ className, counter, error, helpText, id, placeholder, ...inputProps }, ref) {
 	const generatedId = useId();
 	const inputId = id ?? generatedId;
 	const hasError = error !== void 0;
@@ -18,7 +18,8 @@ function TextField({ className, counter, error, helpText, id, placeholder, ...in
 				"aria-invalid": hasError || void 0,
 				className: inputClassName,
 				id: inputId,
-				placeholder: placeholder === void 0 ? void 0 : " "
+				placeholder: placeholder === void 0 ? void 0 : " ",
+				ref
 			}),
 			placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
 				className: "chayns-text-field__label",
@@ -38,7 +39,7 @@ function TextField({ className, counter, error, helpText, id, placeholder, ...in
 			}) : null
 		]
 	});
-}
+});
 //#endregion
 export { TextField as default };
 

package/dist/components/text-field/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport type { TextFieldProps } from './TextField.types.js';\n\nfunction TextField({\n  className,\n  counter,\n  error,\n  helpText,\n  id,\n  placeholder,\n  ...inputProps\n}: TextFieldProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const hasError = error !== undefined;\n  const helpId = helpText !== undefined ? `${inputId}-help` : undefined;\n  const errorId = hasError ? `${inputId}-error` : undefined;\n  const describedBy = [helpId, errorId].filter(Boolean).join(' ') || undefined;\n  const inputClassName = ['chayns-text-field__input', className].filter(Boolean).join(' ');\n\n  return (\n    <div className={`chayns-text-field${hasError ? ' chayns-text-field--error' : ''}`}>\n      <input\n        {...inputProps}\n        aria-describedby={describedBy}\n        aria-invalid={hasError || undefined}\n        className={inputClassName}\n        id={inputId}\n        placeholder={placeholder === undefined ? undefined : ' '}\n      />\n      {placeholder !== undefined ? (\n        <label className=\"chayns-text-field__label\" htmlFor={inputId}>\n          {placeholder}\n        </label>\n      ) : null}\n      {helpText !== undefined || hasError || counter !== undefined ? (\n        <div className=\"chayns-text-field__help\">\n          <div>\n            {helpText !== undefined ? <div id={helpId}>{helpText}</div> : null}\n            {hasError ? (\n              <div className=\"chayns-text-field__error\" id={errorId}>\n                {error}\n              </div>\n            ) : null}\n          </div>\n          {counter !== undefined ? <div>{counter}</div> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport default TextField;\n"],"mappings":";;;AAIA,SAAS,UAAU,EACjB,WACA,SACA,OACA,UACA,IACA,aACA,GAAG,cACc;CACjB,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,UAAU,KAAA;CAC3B,MAAM,SAAS,aAAa,KAAA,IAAY,GAAG,QAAQ,SAAS,KAAA;CAC5D,MAAM,UAAU,WAAW,GAAG,QAAQ,UAAU,KAAA;CAChD,MAAM,cAAc,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACnE,MAAM,iBAAiB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEvF,OACE,qBAAC,OAAD;EAAK,WAAW,oBAAoB,WAAW,8BAA8B;EAA7E,UAAA;GACE,oBAAC,SAAD;IACE,GAAI;IACJ,oBAAkB;IAClB,gBAAc,YAAY,KAAA;IAC1B,WAAW;IACX,IAAI;IACJ,aAAa,gBAAgB,KAAA,IAAY,KAAA,IAAY;GACtD,CAAA;GACA,gBAAgB,KAAA,IACf,oBAAC,SAAD;IAAO,WAAU;IAA2B,SAAS;IAClD,UAAA;GACI,CAAA,IACL;GACH,aAAa,KAAA,KAAa,YAAY,YAAY,KAAA,IACjD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA,CACG,aAAa,KAAA,IAAY,oBAAC,OAAD;KAAK,IAAI;KAAS,UAAA;IAAc,CAAA,IAAI,MAC7D,WACC,oBAAC,OAAD;KAAK,WAAU;KAA2B,IAAI;KAC3C,UAAA;IACE,CAAA,IACH,IACD,EAAA,CAAA,GACJ,YAAY,KAAA,IAAY,oBAAC,OAAD,EAAA,UAAM,QAAa,CAAA,IAAI,IAC7C;GACH,CAAA,IAAA;EACD;;AAET"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport type { TextFieldProps } from './TextField.types.js';\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(\n  { className, counter, error, helpText, id, placeholder, ...inputProps },\n  ref,\n) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const hasError = error !== undefined;\n  const helpId = helpText !== undefined ? `${inputId}-help` : undefined;\n  const errorId = hasError ? `${inputId}-error` : undefined;\n  const describedBy = [helpId, errorId].filter(Boolean).join(' ') || undefined;\n  const inputClassName = ['chayns-text-field__input', className].filter(Boolean).join(' ');\n\n  return (\n    <div className={`chayns-text-field${hasError ? ' chayns-text-field--error' : ''}`}>\n      <input\n        {...inputProps}\n        aria-describedby={describedBy}\n        aria-invalid={hasError || undefined}\n        className={inputClassName}\n        id={inputId}\n        placeholder={placeholder === undefined ? undefined : ' '}\n        ref={ref}\n      />\n      {placeholder !== undefined ? (\n        <label className=\"chayns-text-field__label\" htmlFor={inputId}>\n          {placeholder}\n        </label>\n      ) : null}\n      {helpText !== undefined || hasError || counter !== undefined ? (\n        <div className=\"chayns-text-field__help\">\n          <div>\n            {helpText !== undefined ? <div id={helpId}>{helpText}</div> : null}\n            {hasError ? (\n              <div className=\"chayns-text-field__error\" id={errorId}>\n                {error}\n              </div>\n            ) : null}\n          </div>\n          {counter !== undefined ? <div>{counter}</div> : null}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nexport default TextField;\n"],"mappings":";;;AAIA,IAAM,YAAY,WAA6C,SAAS,UACtE,EAAE,WAAW,SAAS,OAAO,UAAU,IAAI,aAAa,GAAG,cAC3D,KACA;CACA,MAAM,cAAc,MAAM;CAC1B,MAAM,UAAU,MAAM;CACtB,MAAM,WAAW,UAAU,KAAA;CAC3B,MAAM,SAAS,aAAa,KAAA,IAAY,GAAG,QAAQ,SAAS,KAAA;CAC5D,MAAM,UAAU,WAAW,GAAG,QAAQ,UAAU,KAAA;CAChD,MAAM,cAAc,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACnE,MAAM,iBAAiB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEvF,OACE,qBAAC,OAAD;EAAK,WAAW,oBAAoB,WAAW,8BAA8B;EAA7E,UAAA;GACE,oBAAC,SAAD;IACE,GAAI;IACJ,oBAAkB;IAClB,gBAAc,YAAY,KAAA;IAC1B,WAAW;IACX,IAAI;IACJ,aAAa,gBAAgB,KAAA,IAAY,KAAA,IAAY;IAChD;GACN,CAAA;GACA,gBAAgB,KAAA,IACf,oBAAC,SAAD;IAAO,WAAU;IAA2B,SAAS;IAClD,UAAA;GACI,CAAA,IACL;GACH,aAAa,KAAA,KAAa,YAAY,YAAY,KAAA,IACjD,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD,EAAA,UAAA,CACG,aAAa,KAAA,IAAY,oBAAC,OAAD;KAAK,IAAI;KAAS,UAAA;IAAc,CAAA,IAAI,MAC7D,WACC,oBAAC,OAAD;KAAK,WAAU;KAA2B,IAAI;KAC3C,UAAA;IACE,CAAA,IACH,IACD,EAAA,CAAA,GACJ,YAAY,KAAA,IAAY,oBAAC,OAAD,EAAA,UAAM,QAAa,CAAA,IAAI,IAC7C;GACH,CAAA,IAAA;EACD;;AAET,CAAC"}

package/dist/date-time-picker.css

@@ -0,0 +1,121 @@
+@layer chayns.components {
+  .chayns-date-time-picker {
+    display: inline-block;
+    max-inline-size: 100%;
+    position: relative;
+  }
+
+  .chayns-date-time-picker--time {
+    min-inline-size: 100px;
+  }
+
+  .chayns-date-time-picker__trigger {
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid var(--input-border);
+    border-radius: var(--k10);
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1.2;
+    outline: none;
+    text-align: start;
+  }
+
+  .chayns-date-time-picker__trigger:focus-visible {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
+  .chayns-date-time-picker__label {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: var(--k10);
+    padding-inline: var(--k5);
+    background: var(--surface);
+    color: var(--text-3);
+    font-size: var(--fs-body);
+    line-height: 1.2;
+    pointer-events: none;
+    transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
+    transform-origin: left center;
+    white-space: nowrap;
+  }
+
+  .chayns-date-time-picker--open .chayns-date-time-picker__label,
+  .chayns-date-time-picker--filled .chayns-date-time-picker__label {
+    color: var(--accent);
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-date-time-picker__popup {
+    position: absolute;
+    inset-block-start: calc(100% + var(--k4));
+    inset-inline: 0;
+    z-index: var(--z-popover);
+    overflow: hidden;
+    padding: var(--k8);
+    border: 1px solid var(--border);
+    border-radius: var(--k12);
+    background: var(--surface);
+    box-shadow: var(--shadow-pop);
+  }
+
+  .chayns-date-time-picker__wheels {
+    display: flex;
+    position: relative;
+    block-size: calc(var(--k40) * 5);
+  }
+
+  .chayns-date-time-picker__selection {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: var(--k8);
+    z-index: 1;
+    block-size: var(--k40);
+    border-radius: var(--k6);
+    background: rgb(var(--accent-rgb), 0.1);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  .chayns-date-time-picker__wheel {
+    flex: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-block: calc(var(--k40) * 2);
+    perspective: 18rem;
+    perspective-origin: center;
+    scrollbar-width: none;
+    scroll-snap-type: y mandatory;
+    text-align: center;
+    user-select: none;
+  }
+
+  .chayns-date-time-picker__wheel:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+
+  .chayns-date-time-picker__wheel::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chayns-date-time-picker__wheel-option {
+    display: block;
+    inline-size: 100%;
+    min-block-size: var(--k40);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font: inherit;
+    scroll-snap-align: center;
+    transform-origin: center;
+    transform-style: preserve-3d;
+  }
+}

package/dist/index.d.ts

@@ -2,14 +2,19 @@ export { default as Button } from './components/button/Button.js';
 export { default as IconButton } from './components/icon-button/IconButton.js';
 export type { ButtonContent, ButtonIcon, ButtonProps, ButtonVariant, } from './components/button/Button.types.js';
 export { BUTTON_VARIANTS } from './components/button/Button.types.js';
-export type { IconButtonProps } from './components/icon-button/IconButton.types.js';
+export type { IconButtonBaseProps, IconButtonProps, } from './components/icon-button/IconButton.types.js';
 export { default as Badge } from './components/badge/Badge.js';
 export { BADGE_SIZES, BADGE_TONES } from './components/badge/Badge.types.js';
 export type { BadgeProps, BadgeSize, BadgeTone } from './components/badge/Badge.types.js';
+export { default as Banner } from './components/banner/Banner.js';
+export { BANNER_TONES } from './components/banner/Banner.types.js';
+export type { BannerProps, BannerTone, ClosableBannerProps, StaticBannerProps, } from './components/banner/Banner.types.js';
 export { default as ComboBox } from './components/combo-box/ComboBox.js';
 export type { ComboBoxMultipleProps, ComboBoxOptionProps, ComboBoxProps, ComboBoxSingleProps, } from './components/combo-box/ComboBox.types.js';
 export { default as TextField } from './components/text-field/TextField.js';
 export type { TextFieldProps } from './components/text-field/TextField.types.js';
+export { default as DateTimePicker } from './components/date-time-picker/DateTimePicker.js';
+export { DATE_TIME_PICKER_MODES, DATE_TIME_PICKER_MINUTE_STEPS, type DateTimePickerMinuteStep, type DateTimePickerMode, type DateTimePickerProps, type DateTimePickerWheelLabels, } from './components/date-time-picker/DateTimePicker.types.js';
 export { default as TextArea } from './components/text-area/TextArea.js';
 export type { TextAreaProps } from './components/text-area/TextArea.types.js';
 export { default as Checkbox } from './components/checkbox/Checkbox.js';
@@ -20,15 +25,13 @@ export { default as RadioGroup } from './components/radio-group/RadioGroup.js';
 export type { RadioGroupProps, RadioProps } from './components/radio-group/RadioGroup.types.js';
 export { default as SegmentedControl } from './components/segmented-control/SegmentedControl.js';
 export type { SegmentedControlProps, SegmentProps, } from './components/segmented-control/SegmentedControl.types.js';
-export { default as MessageBox } from './components/message-box/MessageBox.js';
-export type { MessageBoxProps, MessageBoxTone } from './components/message-box/MessageBox.types.js';
 export { default as Popup } from './components/popup/Popup.js';
 export { default as PopupList } from './components/popup/PopupList.js';
 export type { PopupListItem, PopupListProps, PopupProps } from './components/popup/Popup.types.js';
 export { default as SplitButton } from './components/split-button/SplitButton.js';
 export type { SplitButtonProps } from './components/split-button/SplitButton.types.js';
 export { default as Card } from './components/card/Card.js';
-export type { CardProps } from './components/card/Card.types.js';
+export type { CardHeaderProps, CardProps } from './components/card/Card.types.js';
 export { default as Avatar } from './components/avatar/Avatar.js';
 export { default as AvatarGroup } from './components/avatar-group/AvatarGroup.js';
 export type { AvatarProps } from './components/avatar/Avatar.types.js';
@@ -37,5 +40,6 @@ export { default as List } from './components/list/List.js';
 export type { ListItemActionProps, ListItemPartProps, ListItemProps, ListItemStatusProps, ListProps, } from './components/list/List.types.js';
 export { default as Accordion } from './components/accordion/Accordion.js';
 export { default as AccordionGroup } from './components/accordion-group/AccordionGroup.js';
-export type { AccordionProps, AccordionGroupProps, } from './components/accordion/Accordion.types.js';
+export { ACCORDION_APPEARANCES } from './components/accordion/Accordion.types.js';
+export type { AccordionAppearance, AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionProps, AccordionGroupProps, AccordionPartProps, } from './components/accordion/Accordion.types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,YAAY,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,aAAa,GACd,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,YAAY,EACV,mBAAmB,EACnB,eAAe,GAChB,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC7E,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAE1F,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,YAAY,EACV,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,GACpB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC5E,YAAY,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAEjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iDAAiD,CAAC;AAC5F,OAAO,EACL,sBAAsB,EACtB,6BAA6B,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,yBAAyB,GAC/B,MAAM,uDAAuD,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAEhG,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACjG,YAAY,EACV,qBAAqB,EACrB,YAAY,GACb,MAAM,0DAA0D,CAAC;AAElE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEnG,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAEvF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAElF,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAClF,YAAY,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AACvE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAEvF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAC5D,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,aAAa,EACb,mBAAmB,EACnB,SAAS,GACV,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,YAAY,EACV,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,2CAA2C,CAAC"}

package/dist/index.js

@@ -3,14 +3,17 @@ import IconButton from "./components/icon-button/IconButton.js";
 import { BUTTON_VARIANTS } from "./components/button/Button.types.js";
 import Badge from "./components/badge/Badge.js";
 import { BADGE_SIZES, BADGE_TONES } from "./components/badge/Badge.types.js";
+import Banner from "./components/banner/Banner.js";
+import { BANNER_TONES } from "./components/banner/Banner.types.js";
 import ComboBox from "./components/combo-box/ComboBox.js";
 import TextField from "./components/text-field/TextField.js";
+import { DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES } from "./components/date-time-picker/DateTimePicker.types.js";
+import DateTimePicker from "./components/date-time-picker/DateTimePicker.js";
 import TextArea from "./components/text-area/TextArea.js";
 import Checkbox from "./components/checkbox/Checkbox.js";
 import Switch from "./components/switch/Switch.js";
 import RadioGroup from "./components/radio-group/RadioGroup.js";
 import SegmentedControl from "./components/segmented-control/SegmentedControl.js";
-import MessageBox from "./components/message-box/MessageBox.js";
 import Popup_default from "./components/popup/Popup.js";
 import PopupList from "./components/popup/PopupList.js";
 import SplitButton from "./components/split-button/SplitButton.js";
@@ -20,4 +23,5 @@ import AvatarGroup from "./components/avatar-group/AvatarGroup.js";
 import List from "./components/list/List.js";
 import Accordion from "./components/accordion/Accordion.js";
 import AccordionGroup from "./components/accordion-group/AccordionGroup.js";
-export { Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BUTTON_VARIANTS, Badge, Button, Card, Checkbox, ComboBox, IconButton, List, MessageBox, Popup_default as Popup, PopupList, RadioGroup, SegmentedControl, SplitButton, Switch, TextArea, TextField };
+import { ACCORDION_APPEARANCES } from "./components/accordion/Accordion.types.js";
+export { ACCORDION_APPEARANCES, Accordion, AccordionGroup, Avatar, AvatarGroup, BADGE_SIZES, BADGE_TONES, BANNER_TONES, BUTTON_VARIANTS, Badge, Banner, Button, Card, Checkbox, ComboBox, DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES, DateTimePicker, IconButton, List, Popup_default as Popup, PopupList, RadioGroup, SegmentedControl, SplitButton, Switch, TextArea, TextField };

package/dist/list.css

@@ -10,7 +10,7 @@
   .chayns-list-item {
     display: flex;
     align-items: stretch;
-    border-radius: 10px;
+    border-radius: 12px;
   }
 
   .chayns-list-item__action {
@@ -21,9 +21,9 @@
     gap: var(--k12);
     min-inline-size: 0;
     margin: 0;
-    padding: var(--k10) var(--k16);
+    padding: var(--k12) var(--k16);
     border: 0;
-    border-radius: 10px;
+    border-radius: 12px;
     background: transparent;
     color: var(--text);
     cursor: pointer;
@@ -77,7 +77,7 @@
     flex: none;
     align-items: flex-start;
     gap: var(--k8);
-    padding: var(--k10) var(--k16) 0 0;
+    padding: var(--k12) var(--k16) 0 0;
     color: var(--text-3);
     font-size: var(--fs-meta);
   }

package/dist/radio-group.css

@@ -23,7 +23,7 @@
 
   .chayns-radio {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--k12);
     color: var(--text);
     cursor: pointer;
@@ -94,6 +94,18 @@
     line-height: 1.4;
   }
 
+  .chayns-radio__content {
+    display: grid;
+    gap: var(--k2);
+    min-inline-size: 0;
+  }
+
+  .chayns-radio__description {
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    line-height: 1.4;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .chayns-radio__control::after {
       transition: none;

package/dist/segmented-control.css

@@ -6,16 +6,20 @@
   }
 
   .chayns-segmented-control__label {
-    color: var(--text);
-    font-size: var(--fs-body);
-    font-weight: 600;
-    line-height: 1.4;
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
 
   .chayns-segmented-control__segments {
     position: relative;
     display: inline-grid;
-    grid-auto-columns: minmax(0, 1fr);
+    inline-size: max-content;
+    max-inline-size: 100%;
+    grid-auto-columns: 1fr;
     grid-auto-flow: column;
     gap: var(--k4);
     padding: var(--k4);
@@ -37,11 +41,15 @@
   }
 
   .chayns-segmented-control__segment {
-    min-block-size: var(--ctrl-h);
+    min-block-size: var(--k32);
     position: relative;
     z-index: 1;
     min-inline-size: 0;
-    padding: calc(9 * var(--u)) var(--k12);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--k6);
+    padding: var(--k8) var(--k18);
     border: 0;
     border-radius: 8px;
     background: transparent;
@@ -51,6 +59,15 @@
     font-weight: 500;
     line-height: 1.4;
     text-align: center;
+    white-space: nowrap;
+  }
+
+  .chayns-segmented-control__segment:not(.chayns-segmented-control__segment--selected) {
+    color: var(--text-3);
+  }
+
+  .chayns-segmented-control__segment--selected {
+    color: var(--accent);
   }
 
   .chayns-segmented-control__segment:focus-visible {

package/dist/split-button.css

@@ -66,7 +66,7 @@
   }
 
   .chayns-split-button__trigger:active:not(:disabled) {
-    transform: scale(0.97);
+    transform: scale(0.96);
   }
 
   .chayns-split-button__trigger.chayns-button--primary:active:not(:disabled) {

package/dist/styles.css

@@ -1,5 +1,6 @@
 @import url('./button.css');
 @import url('./badge.css');
+@import url('./banner.css');
 @import url('./combo-box.css');
 @import url('./card.css');
 @import url('./avatar.css');
@@ -8,9 +9,9 @@
 @import url('./popup.css');
 @import url('./split-button.css');
 @import url('./text-field.css');
+@import url('./date-time-picker.css');
 @import url('./text-area.css');
 @import url('./checkbox.css');
 @import url('./switch.css');
 @import url('./radio-group.css');
 @import url('./segmented-control.css');
-@import url('./message-box.css');

package/dist/switch.css

@@ -1,6 +1,7 @@
 @layer chayns.components {
   .chayns-switch {
-    display: inline-flex;
+    display: flex;
+    inline-size: 100%;
     align-items: center;
     justify-content: space-between;
     gap: var(--k14);
@@ -25,11 +26,23 @@
     line-height: 1.4;
   }
 
+  .chayns-switch__content {
+    display: grid;
+    gap: var(--k2);
+    min-inline-size: 0;
+  }
+
+  .chayns-switch__description {
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    line-height: 1.4;
+  }
+
   .chayns-switch__control {
     box-sizing: border-box;
     display: flex;
-    inline-size: 42px;
-    block-size: 24px;
+    inline-size: var(--k42);
+    block-size: var(--k24);
     flex: none;
     padding: var(--k3);
     border-radius: 999px;
@@ -41,7 +54,7 @@
     block-size: var(--k18);
     border-radius: 50%;
     background: var(--surface);
-    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+    box-shadow: var(--shadow-card);
     transform: translateX(0);
     transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
   }
@@ -51,7 +64,7 @@
   }
 
   .chayns-switch__input:checked + .chayns-switch__control .chayns-switch__knob {
-    transform: translateX(18px);
+    transform: translateX(var(--k18));
   }
 
   .chayns-switch__input:focus-visible + .chayns-switch__control {

package/dist/text-area.css

@@ -8,7 +8,7 @@
     box-sizing: border-box;
     display: block;
     inline-size: 100%;
-    min-block-size: 84px;
+    min-block-size: var(--k84);
     padding: var(--input-py) var(--input-px);
     border: 1.5px solid var(--input-border);
     border-radius: 10px;
@@ -112,7 +112,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--k10);
-    margin-block-start: 6px;
+    margin-block-start: var(--k6);
     font-size: var(--fs-caption);
     color: var(--text-3);
   }

package/dist/text-field.css

@@ -114,7 +114,7 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--k10);
-    margin-block-start: 6px;
+    margin-block-start: var(--k6);
     font-size: var(--fs-caption);
     color: var(--text-3);
   }