@chayns-ui/core 0.4.0 → 0.4.2

package/dist/button.css

@@ -14,6 +14,13 @@
     text-align: center;
     color: var(--text);
     cursor: pointer;
+    transition:
+      background 0.2s ease,
+      color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease,
+      transform 0.15s ease,
+      filter 0.2s ease;
   }
 
   .chayns-button {
@@ -142,12 +149,14 @@
     :where(.chayns-button--primary, .chayns-icon-button--primary):hover:not(:disabled) {
       background: var(--accent-hover);
       box-shadow: var(--shadow-btn-hover);
+      transform: translateY(-1px);
     }
 
     :where(.chayns-button--outline, .chayns-icon-button--outline):hover:not(:disabled) {
       background: var(--accent);
       color: var(--on-accent);
       box-shadow: var(--shadow-btn-hover);
+      transform: translateY(-1px);
     }
 
     :where(.chayns-button--ghost, .chayns-icon-button--ghost):hover:not(:disabled) {
@@ -157,6 +166,7 @@
 
     :where(.chayns-button--danger, .chayns-icon-button--danger):hover:not(:disabled) {
       background: var(--danger-bg-hover);
+      transform: translateY(-1px);
     }
 
     :where(.chayns-button, .chayns-icon-button):hover:not(:disabled)
@@ -188,4 +198,10 @@
       outline-offset: 1px;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.chayns-button, .chayns-icon-button) {
+      transition: none;
+    }
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAwJvF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;CAAmD,CAAC;AAE1E,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAyB,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAqMvF,QAAA,MAAM,gBAAgB;;;;;;;;;;;;CAAmD,CAAC;AAE1E,eAAe,gBAAgB,CAAC"}

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

@@ -56,6 +56,11 @@ var SegmentedControlRoot = forwardRef(function SegmentedControlRoot({ children,
 	const labelId = useId();
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const segments = useRef(/* @__PURE__ */ new Map());
+	const segmentsElement = useRef(null);
+	const [indicator, setIndicator] = useState({
+		offset: 0,
+		width: 0
+	});
 	const selectedValue = value ?? uncontrolledValue ?? "";
 	const resolvedClassName = ["chayns-segmented-control", className].filter(Boolean).join(" ");
 	function selectValue(nextValue) {
@@ -83,6 +88,25 @@ var SegmentedControlRoot = forwardRef(function SegmentedControlRoot({ children,
 		selectValue(nextValue);
 		nextElement.focus();
 	}
+	useLayoutEffect(() => {
+		const container = segmentsElement.current;
+		const selectedSegment = segments.current.get(selectedValue);
+		if (container === null || selectedSegment === void 0) return;
+		const observedContainer = container;
+		const observedSegment = selectedSegment;
+		function updateIndicator() {
+			const paddingInlineStart = Number.parseFloat(window.getComputedStyle(observedContainer).paddingInlineStart);
+			setIndicator({
+				offset: observedSegment.offsetLeft - (Number.isNaN(paddingInlineStart) ? 0 : paddingInlineStart),
+				width: observedSegment.offsetWidth
+			});
+		}
+		updateIndicator();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateIndicator);
+		observer.observe(observedContainer);
+		return () => observer.disconnect();
+	}, [selectedValue]);
 	return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, {
 		value: {
 			moveFocus,
@@ -100,9 +124,17 @@ var SegmentedControlRoot = forwardRef(function SegmentedControlRoot({ children,
 				className: "chayns-segmented-control__label",
 				id: labelId,
 				children: label
-			}), /* @__PURE__ */ jsx("div", {
+			}), /* @__PURE__ */ jsxs("div", {
 				className: "chayns-segmented-control__segments",
-				children
+				ref: segmentsElement,
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "chayns-segmented-control__indicator",
+					style: {
+						transform: `translateX(${indicator.offset}px)`,
+						width: indicator.width
+					}
+				}), children]
 			})]
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { SegmentedControlContext, useSegmentedControlContext } from './SegmentedControlContext.js';\nimport type { SegmentedControlProps, SegmentProps } from './SegmentedControl.types.js';\n\nfunction getOrderedSegments(segments: Map<string, HTMLButtonElement>) {\n  return [...segments.entries()]\n    .filter(([, element]) => !element.disabled)\n    .sort(([, first], [, second]) => {\n      const position = first.compareDocumentPosition(second);\n      return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n    });\n}\n\nconst Segment = forwardRef<HTMLButtonElement, SegmentProps>(function Segment(\n  { children, className, disabled, value, ...buttonProps },\n  ref,\n) {\n  const control = useSegmentedControlContext();\n  const localRef = useRef<HTMLButtonElement>(null);\n  const isSelected = control.value === value;\n  const resolvedClassName = [\n    'chayns-segmented-control__segment',\n    isSelected ? 'chayns-segmented-control__segment--selected' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useLayoutEffect(() => {\n    if (localRef.current === null) {\n      return undefined;\n    }\n\n    return control.registerSegment(value, localRef.current);\n  }, [control, value]);\n\n  function setRef(element: HTMLButtonElement | null) {\n    localRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    const keys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];\n\n    if (keys.includes(event.key)) {\n      event.preventDefault();\n      control.moveFocus(value, event.key);\n    }\n  }\n\n  return (\n    <button\n      {...buttonProps}\n      aria-checked={isSelected}\n      className={resolvedClassName}\n      disabled={disabled}\n      onClick={() => control.selectValue(value)}\n      onKeyDown={handleKeyDown}\n      ref={setRef}\n      role=\"radio\"\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControlRoot(\n    { children, className, defaultValue, label, onValueChange, value, ...rootProps },\n    ref,\n  ) {\n    const labelId = useId();\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const segments = useRef(new Map<string, HTMLButtonElement>());\n    const selectedValue = value ?? uncontrolledValue ?? '';\n    const resolvedClassName = ['chayns-segmented-control', className].filter(Boolean).join(' ');\n\n    function selectValue(nextValue: string) {\n      if (value === undefined) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\n    }\n\n    function registerSegment(segmentValue: string, element: HTMLButtonElement) {\n      segments.current.set(segmentValue, element);\n\n      return () => {\n        segments.current.delete(segmentValue);\n      };\n    }\n\n    function moveFocus(currentValue: string, key: string) {\n      const enabledSegments = getOrderedSegments(segments.current);\n      const currentIndex = enabledSegments.findIndex(\n        ([segmentValue]) => segmentValue === currentValue,\n      );\n\n      if (currentIndex === -1 || enabledSegments.length === 0) {\n        return;\n      }\n\n      let targetIndex = currentIndex;\n\n      if (key === 'Home') {\n        targetIndex = 0;\n      } else if (key === 'End') {\n        targetIndex = enabledSegments.length - 1;\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        targetIndex = (currentIndex - 1 + enabledSegments.length) % enabledSegments.length;\n      } else if (key === 'ArrowRight' || key === 'ArrowDown') {\n        targetIndex = (currentIndex + 1) % enabledSegments.length;\n      }\n\n      const nextSegment = enabledSegments[targetIndex];\n\n      if (nextSegment === undefined) {\n        return;\n      }\n\n      const [nextValue, nextElement] = nextSegment;\n      selectValue(nextValue);\n      nextElement.focus();\n    }\n\n    return (\n      <SegmentedControlContext.Provider\n        value={{ moveFocus, registerSegment, selectValue, value: selectedValue }}\n      >\n        <div\n          {...rootProps}\n          aria-labelledby={labelId}\n          className={resolvedClassName}\n          ref={ref}\n          role=\"radiogroup\"\n        >\n          <span className=\"chayns-segmented-control__label\" id={labelId}>\n            {label}\n          </span>\n          <div className=\"chayns-segmented-control__segments\">{children}</div>\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  },\n);\n\nconst SegmentedControl = Object.assign(SegmentedControlRoot, { Segment });\n\nexport default SegmentedControl;\n"],"mappings":";;;;AAMA,SAAS,mBAAmB,UAA0C;CACpE,OAAO,CAAC,GAAG,SAAS,QAAQ,CAAC,CAAC,CAC3B,QAAQ,GAAG,aAAa,CAAC,QAAQ,QAAQ,CAAC,CAC1C,MAAM,GAAG,QAAQ,GAAG,YAAY;EAE/B,OADiB,MAAM,wBAAwB,MACxC,IAAW,KAAK,8BAA8B,KAAK;CAC5D,CAAC;AACL;AAEA,IAAM,UAAU,WAA4C,SAAS,QACnE,EAAE,UAAU,WAAW,UAAU,OAAO,GAAG,eAC3C,KACA;CACA,MAAM,UAAU,2BAA2B;CAC3C,MAAM,WAAW,OAA0B,IAAI;CAC/C,MAAM,aAAa,QAAQ,UAAU;CACrC,MAAM,oBAAoB;EACxB;EACA,aAAa,gDAAgD;EAC7D;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,sBAAsB;EACpB,IAAI,SAAS,YAAY,MACvB;EAGF,OAAO,QAAQ,gBAAgB,OAAO,SAAS,OAAO;CACxD,GAAG,CAAC,SAAS,KAAK,CAAC;CAEnB,SAAS,OAAO,SAAmC;EACjD,SAAS,UAAU;EAEnB,IAAI,OAAO,QAAQ,YACjB,IAAI,OAAO;OACN,IAAI,QAAQ,MACjB,IAAI,UAAU;CAElB;CAEA,SAAS,cAAc,OAAyC;EAG9D,IAAI;GAFU;GAAa;GAAa;GAAc;GAAW;GAAO;EAEpE,CAAA,CAAK,SAAS,MAAM,GAAG,GAAG;GAC5B,MAAM,eAAe;GACrB,QAAQ,UAAU,OAAO,MAAM,GAAG;EACpC;CACF;CAEA,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,gBAAc;EACd,WAAW;EACD;EACV,eAAe,QAAQ,YAAY,KAAK;EACxC,WAAW;EACX,KAAK;EACL,MAAK;EACL,UAAU,aAAa,IAAI;EAC3B,MAAK;EAEJ;CACK,CAAA;AAEZ,CAAC;AAED,IAAM,uBAAuB,WAC3B,SAAS,qBACP,EAAE,UAAU,WAAW,cAAc,OAAO,eAAe,OAAO,GAAG,aACrE,KACA;CACA,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,YAAY;CACvE,MAAM,WAAW,uBAAO,IAAI,IAA+B,CAAC;CAC5D,MAAM,gBAAgB,SAAS,qBAAqB;CACpD,MAAM,oBAAoB,CAAC,4BAA4B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1F,SAAS,YAAY,WAAmB;EACtC,IAAI,UAAU,KAAA,GACZ,qBAAqB,SAAS;EAGhC,gBAAgB,SAAS;CAC3B;CAEA,SAAS,gBAAgB,cAAsB,SAA4B;EACzE,SAAS,QAAQ,IAAI,cAAc,OAAO;EAE1C,aAAa;GACX,SAAS,QAAQ,OAAO,YAAY;EACtC;CACF;CAEA,SAAS,UAAU,cAAsB,KAAa;EACpD,MAAM,kBAAkB,mBAAmB,SAAS,OAAO;EAC3D,MAAM,eAAe,gBAAgB,WAClC,CAAC,kBAAkB,iBAAiB,YACvC;EAEA,IAAI,iBAAiB,MAAM,gBAAgB,WAAW,GACpD;EAGF,IAAI,cAAc;EAElB,IAAI,QAAQ,QACV,cAAc;OACT,IAAI,QAAQ,OACjB,cAAc,gBAAgB,SAAS;OAClC,IAAI,QAAQ,eAAe,QAAQ,WACxC,eAAe,eAAe,IAAI,gBAAgB,UAAU,gBAAgB;OACvE,IAAI,QAAQ,gBAAgB,QAAQ,aACzC,eAAe,eAAe,KAAK,gBAAgB;EAGrD,MAAM,cAAc,gBAAgB;EAEpC,IAAI,gBAAgB,KAAA,GAClB;EAGF,MAAM,CAAC,WAAW,eAAe;EACjC,YAAY,SAAS;EACrB,YAAY,MAAM;CACpB;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EACE,OAAO;GAAE;GAAW;GAAiB;GAAa,OAAO;EAAc;EAEvE,UAAA,qBAAC,OAAD;GACE,GAAI;GACJ,mBAAiB;GACjB,WAAW;GACN;GACL,MAAK;GALP,UAAA,CAOE,oBAAC,QAAD;IAAM,WAAU;IAAkC,IAAI;IACnD,UAAA;GACG,CAAA,GACN,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CAC2B,CAAA;AAEtC,CACF;AAEA,IAAM,mBAAmB,OAAO,OAAO,sBAAsB,EAAE,QAAQ,CAAC"}
+{"version":3,"file":"SegmentedControl.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { SegmentedControlContext, useSegmentedControlContext } from './SegmentedControlContext.js';\nimport type { SegmentedControlProps, SegmentProps } from './SegmentedControl.types.js';\n\nfunction getOrderedSegments(segments: Map<string, HTMLButtonElement>) {\n  return [...segments.entries()]\n    .filter(([, element]) => !element.disabled)\n    .sort(([, first], [, second]) => {\n      const position = first.compareDocumentPosition(second);\n      return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n    });\n}\n\nconst Segment = forwardRef<HTMLButtonElement, SegmentProps>(function Segment(\n  { children, className, disabled, value, ...buttonProps },\n  ref,\n) {\n  const control = useSegmentedControlContext();\n  const localRef = useRef<HTMLButtonElement>(null);\n  const isSelected = control.value === value;\n  const resolvedClassName = [\n    'chayns-segmented-control__segment',\n    isSelected ? 'chayns-segmented-control__segment--selected' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  useLayoutEffect(() => {\n    if (localRef.current === null) {\n      return undefined;\n    }\n\n    return control.registerSegment(value, localRef.current);\n  }, [control, value]);\n\n  function setRef(element: HTMLButtonElement | null) {\n    localRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    const keys = ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home'];\n\n    if (keys.includes(event.key)) {\n      event.preventDefault();\n      control.moveFocus(value, event.key);\n    }\n  }\n\n  return (\n    <button\n      {...buttonProps}\n      aria-checked={isSelected}\n      className={resolvedClassName}\n      disabled={disabled}\n      onClick={() => control.selectValue(value)}\n      onKeyDown={handleKeyDown}\n      ref={setRef}\n      role=\"radio\"\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  );\n});\n\nconst SegmentedControlRoot = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControlRoot(\n    { children, className, defaultValue, label, onValueChange, value, ...rootProps },\n    ref,\n  ) {\n    const labelId = useId();\n    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n    const segments = useRef(new Map<string, HTMLButtonElement>());\n    const segmentsElement = useRef<HTMLDivElement>(null);\n    const [indicator, setIndicator] = useState({ offset: 0, width: 0 });\n    const selectedValue = value ?? uncontrolledValue ?? '';\n    const resolvedClassName = ['chayns-segmented-control', className].filter(Boolean).join(' ');\n\n    function selectValue(nextValue: string) {\n      if (value === undefined) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onValueChange?.(nextValue);\n    }\n\n    function registerSegment(segmentValue: string, element: HTMLButtonElement) {\n      segments.current.set(segmentValue, element);\n\n      return () => {\n        segments.current.delete(segmentValue);\n      };\n    }\n\n    function moveFocus(currentValue: string, key: string) {\n      const enabledSegments = getOrderedSegments(segments.current);\n      const currentIndex = enabledSegments.findIndex(\n        ([segmentValue]) => segmentValue === currentValue,\n      );\n\n      if (currentIndex === -1 || enabledSegments.length === 0) {\n        return;\n      }\n\n      let targetIndex = currentIndex;\n\n      if (key === 'Home') {\n        targetIndex = 0;\n      } else if (key === 'End') {\n        targetIndex = enabledSegments.length - 1;\n      } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n        targetIndex = (currentIndex - 1 + enabledSegments.length) % enabledSegments.length;\n      } else if (key === 'ArrowRight' || key === 'ArrowDown') {\n        targetIndex = (currentIndex + 1) % enabledSegments.length;\n      }\n\n      const nextSegment = enabledSegments[targetIndex];\n\n      if (nextSegment === undefined) {\n        return;\n      }\n\n      const [nextValue, nextElement] = nextSegment;\n      selectValue(nextValue);\n      nextElement.focus();\n    }\n\n    useLayoutEffect(() => {\n      const container = segmentsElement.current;\n      const selectedSegment = segments.current.get(selectedValue);\n\n      if (container === null || selectedSegment === undefined) {\n        return undefined;\n      }\n\n      const observedContainer = container;\n      const observedSegment = selectedSegment;\n\n      function updateIndicator() {\n        const paddingInlineStart = Number.parseFloat(\n          window.getComputedStyle(observedContainer).paddingInlineStart,\n        );\n\n        setIndicator({\n          offset:\n            observedSegment.offsetLeft -\n            (Number.isNaN(paddingInlineStart) ? 0 : paddingInlineStart),\n          width: observedSegment.offsetWidth,\n        });\n      }\n\n      updateIndicator();\n\n      if (typeof ResizeObserver === 'undefined') {\n        return undefined;\n      }\n\n      const observer = new ResizeObserver(updateIndicator);\n      observer.observe(observedContainer);\n\n      return () => observer.disconnect();\n    }, [selectedValue]);\n\n    return (\n      <SegmentedControlContext.Provider\n        value={{ moveFocus, registerSegment, selectValue, value: selectedValue }}\n      >\n        <div\n          {...rootProps}\n          aria-labelledby={labelId}\n          className={resolvedClassName}\n          ref={ref}\n          role=\"radiogroup\"\n        >\n          <span className=\"chayns-segmented-control__label\" id={labelId}>\n            {label}\n          </span>\n          <div className=\"chayns-segmented-control__segments\" ref={segmentsElement}>\n            <span\n              aria-hidden=\"true\"\n              className=\"chayns-segmented-control__indicator\"\n              style={{ transform: `translateX(${indicator.offset}px)`, width: indicator.width }}\n            />\n            {children}\n          </div>\n        </div>\n      </SegmentedControlContext.Provider>\n    );\n  },\n);\n\nconst SegmentedControl = Object.assign(SegmentedControlRoot, { Segment });\n\nexport default SegmentedControl;\n"],"mappings":"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"}

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, label, placeholder, ...textareaProps }: TextAreaProps): import("react").JSX.Element;
+declare function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }: TextAreaProps): import("react").JSX.Element;
 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,KAAK,EACL,WAAW,EACX,GAAG,aAAa,EACjB,EAAE,aAAa,+BAqCf;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,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"}

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

@@ -1,7 +1,7 @@
 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, label, placeholder, ...textareaProps }) {
+function TextArea({ className, counter, error, helpText, id, placeholder, ...textareaProps }) {
 	const generatedId = useId();
 	const textareaId = id ?? generatedId;
 	const hasError = error !== void 0;
@@ -18,13 +18,13 @@ function TextArea({ className, counter, error, helpText, id, label, placeholder,
 				"aria-invalid": hasError || void 0,
 				className: textareaClassName,
 				id: textareaId,
-				placeholder: placeholder ?? " "
+				placeholder: placeholder === void 0 ? void 0 : " "
 			}),
-			/* @__PURE__ */ jsx("label", {
+			placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
 				className: "chayns-text-area__label",
 				htmlFor: textareaId,
-				children: label
-			}),
+				children: placeholder
+			}) : null,
 			helpText !== void 0 || hasError || counter !== void 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "chayns-text-area__help",
 				children: [/* @__PURE__ */ jsxs("div", { children: [helpText !== void 0 ? /* @__PURE__ */ jsx("div", {

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  label,\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 ?? ' '}\n      />\n      <label className=\"chayns-text-area__label\" htmlFor={textareaId}>\n        {label}\n      </label>\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,OACA,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,eAAe;GAC7B,CAAA;GACD,oBAAC,SAAD;IAAO,WAAU;IAA0B,SAAS;IACjD,UAAA;GACI,CAAA;GACN,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 { 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"}

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

@@ -1,8 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-/** Props for a labelled native multi-line textarea. */
+/** Props for a native multi-line textarea with optional help and error content. */
 export interface TextAreaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'aria-describedby' | 'aria-invalid' | 'children'> {
-    /** Visible label associated with the native textarea. */
-    label: ReactNode;
     /** Supporting content linked to the textarea. */
     helpText?: ReactNode;
     /** Validation content linked to the textarea and reflected through aria-invalid. */

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.types.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,uDAAuD;AACvD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,qBAAqB,CAAC,UAAU,CAAC,EACjC,kBAAkB,GAAG,cAAc,GAAG,UAAU,CACjD;IACC,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAE3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB"}
+{"version":3,"file":"TextArea.types.d.ts","sourceRoot":"","sources":["../../../src/components/text-area/TextArea.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,mFAAmF;AACnF,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,qBAAqB,CAAC,UAAU,CAAC,EACjC,kBAAkB,GAAG,cAAc,GAAG,UAAU,CACjD;IACC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAE3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB"}

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, label, placeholder, ...inputProps }: TextFieldProps): import("react").JSX.Element;
+declare function TextField({ className, counter, error, helpText, id, placeholder, ...inputProps }: TextFieldProps): import("react").JSX.Element;
 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,KAAK,EACL,WAAW,EACX,GAAG,UAAU,EACd,EAAE,cAAc,+BAqChB;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,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"}

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

@@ -1,7 +1,7 @@
 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, label, placeholder, ...inputProps }) {
+function TextField({ className, counter, error, helpText, id, placeholder, ...inputProps }) {
 	const generatedId = useId();
 	const inputId = id ?? generatedId;
 	const hasError = error !== void 0;
@@ -18,13 +18,13 @@ function TextField({ className, counter, error, helpText, id, label, placeholder
 				"aria-invalid": hasError || void 0,
 				className: inputClassName,
 				id: inputId,
-				placeholder: placeholder ?? " "
+				placeholder: placeholder === void 0 ? void 0 : " "
 			}),
-			/* @__PURE__ */ jsx("label", {
+			placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
 				className: "chayns-text-field__label",
 				htmlFor: inputId,
-				children: label
-			}),
+				children: placeholder
+			}) : null,
 			helpText !== void 0 || hasError || counter !== void 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "chayns-text-field__help",
 				children: [/* @__PURE__ */ jsxs("div", { children: [helpText !== void 0 ? /* @__PURE__ */ jsx("div", {

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  label,\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 ?? ' '}\n      />\n      <label className=\"chayns-text-field__label\" htmlFor={inputId}>\n        {label}\n      </label>\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,OACA,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,eAAe;GAC7B,CAAA;GACD,oBAAC,SAAD;IAAO,WAAU;IAA2B,SAAS;IAClD,UAAA;GACI,CAAA;GACN,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 { 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"}

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

@@ -1,8 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-/** Props for a labelled native single-line input. */
+/** Props for a native single-line input with optional help and error content. */
 export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'aria-describedby' | 'aria-invalid' | 'children'> {
-    /** Visible label associated with the native input. */
-    label: ReactNode;
     /** Supporting content linked to the input. */
     helpText?: ReactNode;
     /** Validation content linked to the input and reflected through aria-invalid. */

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.types.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/TextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,qDAAqD;AACrD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,qBAAqB,CAAC,OAAO,CAAC,EAC9B,kBAAkB,GAAG,cAAc,GAAG,UAAU,CACjD;IACC,sDAAsD;IACtD,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAE3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB"}
+{"version":3,"file":"TextField.types.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/TextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,iFAAiF;AACjF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,qBAAqB,CAAC,OAAO,CAAC,EAC9B,kBAAkB,GAAG,cAAc,GAAG,UAAU,CACjD;IACC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kDAAkD;IAClD,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAE3B,2EAA2E;IAC3E,cAAc,CAAC,EAAE,KAAK,CAAC;CACxB"}

package/dist/segmented-control.css

@@ -13,17 +13,34 @@
   }
 
   .chayns-segmented-control__segments {
-    display: flex;
-    flex-wrap: wrap;
+    position: relative;
+    display: inline-grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
     gap: var(--k4);
     padding: var(--k4);
     border-radius: 12px;
     background: var(--toggle-bg);
   }
 
+  .chayns-segmented-control__indicator {
+    position: absolute;
+    z-index: 0;
+    inset-block: var(--k4);
+    inset-inline-start: var(--k4);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+    pointer-events: none;
+    transition: transform 0.2s ease;
+  }
+
   .chayns-segmented-control__segment {
     min-block-size: var(--ctrl-h);
-    flex: 1 1 0;
+    position: relative;
+    z-index: 1;
+    min-inline-size: 0;
     padding: calc(9 * var(--u)) var(--k12);
     border: 0;
     border-radius: 8px;
@@ -36,11 +53,6 @@
     text-align: center;
   }
 
-  .chayns-segmented-control__segment--selected {
-    background: var(--surface);
-    box-shadow: var(--shadow-card);
-  }
-
   .chayns-segmented-control__segment:focus-visible {
     outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
     outline-offset: 2px;
@@ -52,10 +64,16 @@
   }
 
   .chayns-segmented-control__segment:hover:not(:disabled) {
-    background: var(--hover-bg);
+    background: var(--hover);
   }
 
   .chayns-segmented-control__segment--selected:hover:not(:disabled) {
-    background: var(--surface);
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-segmented-control__indicator {
+      transition: none;
+    }
   }
 }

package/dist/text-area.css

@@ -19,6 +19,9 @@
     color: var(--text);
     background: var(--surface);
     outline: none;
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease;
   }
 
   .chayns-text-area__label {
@@ -26,15 +29,18 @@
     inset-block-start: 0;
     inset-inline-start: 10px;
     padding-inline: var(--k5);
+    color: var(--text-3);
+    pointer-events: none;
     font-size: var(--fs-body);
     font-weight: 400;
     line-height: 1.2;
-    color: var(--text-3);
-    pointer-events: none;
+    white-space: nowrap;
     background: var(--surface);
     transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
     transform-origin: left center;
-    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+    transition:
+      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+      color 0.15s ease;
   }
 
   :where(.chayns-text-area__input:hover:not(:disabled)) {
@@ -47,33 +53,58 @@
       rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
   }
 
-  :where(
-    .chayns-text-area__input:focus + .chayns-text-area__label,
-    .chayns-text-area__input:not(:placeholder-shown) + .chayns-text-area__label
-  ) {
-    color: var(--accent);
-    transform: translateY(-50%) scale(0.8);
+  .chayns-text-area__input:disabled {
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+    background: var(--disabled-bg);
+    border-color: var(--disabled-border);
+  }
+
+  .chayns-text-area__input:read-only {
+    color: var(--text-2);
+    cursor: text;
+    background: var(--surface-2);
+  }
+
+  .chayns-text-area--error .chayns-text-area__label {
+    color: var(--danger);
+  }
+
+  .chayns-text-area__input:disabled + .chayns-text-area__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-area__input:read-only + .chayns-text-area__label {
+    background: var(--surface-2);
   }
 
   .chayns-text-area--error .chayns-text-area__input {
     border-color: var(--danger);
   }
 
-  .chayns-text-area--error .chayns-text-area__label {
+  .chayns-text-area__input:focus + .chayns-text-area__label,
+  .chayns-text-area__input:not(:placeholder-shown) + .chayns-text-area__label {
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-text-area__input:focus + .chayns-text-area__label {
+    color: var(--accent);
+  }
+
+  .chayns-text-area--error .chayns-text-area__input:focus + .chayns-text-area__label {
     color: var(--danger);
   }
 
-  .chayns-text-area__input:disabled {
+  .chayns-text-area--error .chayns-text-area__input:disabled {
     color: var(--disabled-fg);
-    cursor: not-allowed;
     background: var(--disabled-bg);
     border-color: var(--disabled-border);
   }
 
-  .chayns-text-area__input:read-only {
-    color: var(--text-2);
-    cursor: text;
-    background: var(--surface-2);
+  .chayns-text-area--error .chayns-text-area__input:disabled + .chayns-text-area__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
   }
 
   .chayns-text-area__help {
@@ -90,16 +121,16 @@
     color: var(--danger);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .chayns-text-area__label {
-      transition: none;
-    }
-  }
-
   @media (forced-colors: active) {
     .chayns-text-area__input:focus-visible {
       outline: var(--focus-ring-size) solid ButtonText;
       outline-offset: 1px;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-text-area__label {
+      transition: none;
+    }
+  }
 }

package/dist/text-field.css

@@ -16,6 +16,9 @@
     color: var(--text);
     background: var(--surface);
     outline: none;
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease;
   }
 
   .chayns-text-field__label {
@@ -23,15 +26,18 @@
     inset-block-start: 0;
     inset-inline-start: 10px;
     padding-inline: var(--k5);
+    color: var(--text-3);
+    pointer-events: none;
     font-size: var(--fs-body);
     font-weight: 400;
     line-height: 1.2;
-    color: var(--text-3);
-    pointer-events: none;
+    white-space: nowrap;
     background: var(--surface);
     transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
     transform-origin: left center;
-    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
+    transition:
+      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+      color 0.15s ease;
   }
 
   :where(.chayns-text-field__input:hover:not(:disabled)) {
@@ -44,18 +50,6 @@
       rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
   }
 
-  :where(
-    .chayns-text-field__input:focus + .chayns-text-field__label,
-    .chayns-text-field__input:not(:placeholder-shown) + .chayns-text-field__label
-  ) {
-    color: var(--accent);
-    transform: translateY(-50%) scale(0.8);
-  }
-
-  .chayns-text-field--error .chayns-text-field__input {
-    border-color: var(--danger);
-  }
-
   .chayns-text-field__input:disabled {
     color: var(--disabled-fg);
     cursor: not-allowed;
@@ -69,15 +63,52 @@
     background: var(--surface-2);
   }
 
-  .chayns-text-field--error .chayns-text-field__input:focus {
-    box-shadow: 0 0 0 var(--focus-ring-size)
-      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  .chayns-text-field--error .chayns-text-field__label {
+    color: var(--danger);
   }
 
-  .chayns-text-field--error .chayns-text-field__label {
+  .chayns-text-field__input:disabled + .chayns-text-field__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-field__input:read-only + .chayns-text-field__label {
+    background: var(--surface-2);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input {
+    border-color: var(--danger);
+  }
+
+  .chayns-text-field__input:focus + .chayns-text-field__label,
+  .chayns-text-field__input:not(:placeholder-shown) + .chayns-text-field__label {
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-text-field__input:focus + .chayns-text-field__label {
+    color: var(--accent);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:focus + .chayns-text-field__label {
     color: var(--danger);
   }
 
+  .chayns-text-field--error .chayns-text-field__input:disabled {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+    border-color: var(--disabled-border);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:disabled + .chayns-text-field__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-field--error .chayns-text-field__input:focus {
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
   .chayns-text-field__help {
     display: flex;
     align-items: center;
@@ -92,16 +123,16 @@
     color: var(--danger);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .chayns-text-field__label {
-      transition: none;
-    }
-  }
-
   @media (forced-colors: active) {
     .chayns-text-field__input:focus-visible {
       outline: var(--focus-ring-size) solid ButtonText;
       outline-offset: 1px;
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-text-field__label {
+      transition: none;
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",