@chayns-ui/core 0.9.2 → 0.10.0

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 { 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"}
+{"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\nTextField.displayName = 'TextField';\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;AAED,UAAU,cAAc"}

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from './Tooltip.types.js';
+declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLElement>>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,oBAAoB,CAAC;AAK5E,QAAA,MAAM,OAAO,sGAiFX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,75 @@
+import { composeNativeRefs } from "../../utils/native-ref.js";
+import { useOverlayPosition } from "../../hooks/useOverlayPosition.js";
+import { useTooltipInteraction } from "./hooks/useTooltipInteraction.js";
+import { tooltipTriggerProps } from "./tooltip-trigger-props.js";
+import { Fragment, cloneElement, forwardRef, isValidElement, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/tooltip/Tooltip.tsx
+var ANCHOR_GAP = 9;
+var Tooltip = forwardRef(function Tooltip({ children, content, ...nativeProps }, ref) {
+	const id = useId();
+	const [trigger, setTrigger] = useState(null);
+	const surface = useRef(null);
+	const interaction = useTooltipInteraction(trigger, surface);
+	useOverlayPosition(surface, trigger, interaction.open, "top", ANCHOR_GAP);
+	const child = isValidElement(children) ? children : void 0;
+	const descriptorRef = child ? Object.getOwnPropertyDescriptor(child, "ref")?.value : void 0;
+	const childRef = child?.props.ref ?? descriptorRef;
+	const mergedRef = useMemo(() => composeNativeRefs(childRef, setTrigger, ref), [childRef, ref]);
+	if (!child || child.type === Fragment || child.props.disabled) throw new Error("Tooltip requires one enabled ref-/native-prop-capable trigger element.");
+	const props = tooltipTriggerProps(child.props, nativeProps);
+	const description = [...new Set([
+		child.props["aria-describedby"],
+		nativeProps["aria-describedby"],
+		id
+	].filter(Boolean).flatMap((value) => value?.split(/\s+/) ?? []))].join(" ");
+	const triggerProps = {
+		...props,
+		ref: mergedRef,
+		"aria-describedby": description,
+		onPointerEnter: (event) => {
+			props.onPointerEnter?.(event);
+			if (!event.defaultPrevented) interaction.enter();
+		},
+		onPointerLeave: (event) => {
+			props.onPointerLeave?.(event);
+			if (!event.defaultPrevented) interaction.leave(event.relatedTarget);
+		},
+		onFocus: (event) => {
+			props.onFocus?.(event);
+			if (!event.defaultPrevented) interaction.focus();
+		},
+		onBlur: (event) => {
+			props.onBlur?.(event);
+			if (!event.defaultPrevented) interaction.blur();
+		},
+		onClick: (event) => {
+			props.onClick?.(event);
+			if (!event.defaultPrevented) interaction.enter();
+		},
+		onKeyDown: (event) => {
+			props.onKeyDown?.(event);
+			if (!event.defaultPrevented && interaction.open && event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				interaction.dismiss();
+			}
+		}
+	};
+	const triggerElement = cloneElement(child, triggerProps);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [triggerElement, trigger && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("span", {
+		"aria-hidden": !interaction.open,
+		className: `chayns-tooltip${interaction.open ? " chayns-tooltip--open" : ""}`,
+		id,
+		onPointerLeave: (event) => interaction.leave(event.relatedTarget),
+		ref: surface,
+		role: "tooltip",
+		children: content
+	}), document.body) : null] });
+});
+Tooltip.displayName = "Tooltip";
+//#endregion
+export { Tooltip as default };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { Ref } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOverlayPosition } from '../../hooks/useOverlayPosition.js';\nimport { composeNativeRefs } from '../../utils/native-ref.js';\nimport { useTooltipInteraction } from './hooks/useTooltipInteraction.js';\nimport { tooltipTriggerProps } from './tooltip-trigger-props.js';\nimport type { TooltipProps, TooltipTriggerProps } from './Tooltip.types.js';\n\n// Fixed anchor gap in the verified Bodywork .tipbox reference.\nconst ANCHOR_GAP = 9;\n\nconst Tooltip = forwardRef<HTMLElement, TooltipProps>(function Tooltip(\n  { children, content, ...nativeProps },\n  ref,\n) {\n  const id = useId();\n  const [trigger, setTrigger] = useState<HTMLElement | null>(null);\n  const surface = useRef<HTMLSpanElement>(null);\n  const interaction = useTooltipInteraction(trigger, surface);\n  useOverlayPosition(surface, trigger, interaction.open, 'top', ANCHOR_GAP);\n\n  const child = isValidElement<TooltipTriggerProps>(children) ? children : undefined;\n  const descriptorRef = child\n    ? (Object.getOwnPropertyDescriptor(child, 'ref')?.value as Ref<HTMLElement> | undefined)\n    : undefined;\n  const childRef = child?.props.ref ?? descriptorRef;\n  const mergedRef = useMemo(() => composeNativeRefs(childRef, setTrigger, ref), [childRef, ref]);\n  if (!child || child.type === Fragment || child.props.disabled)\n    throw new Error('Tooltip requires one enabled ref-/native-prop-capable trigger element.');\n\n  const props = tooltipTriggerProps(child.props, nativeProps);\n  const description = [\n    ...new Set(\n      [child.props['aria-describedby'], nativeProps['aria-describedby'], id]\n        .filter(Boolean)\n        .flatMap((value) => value?.split(/\\s+/) ?? []),\n    ),\n  ].join(' ');\n  const triggerProps: TooltipTriggerProps = {\n    ...props,\n    ref: mergedRef,\n    'aria-describedby': description,\n    onPointerEnter: (event) => {\n      props.onPointerEnter?.(event);\n      if (!event.defaultPrevented) interaction.enter();\n    },\n    onPointerLeave: (event) => {\n      props.onPointerLeave?.(event);\n      if (!event.defaultPrevented) interaction.leave(event.relatedTarget);\n    },\n    onFocus: (event) => {\n      props.onFocus?.(event);\n      if (!event.defaultPrevented) interaction.focus();\n    },\n    onBlur: (event) => {\n      props.onBlur?.(event);\n      if (!event.defaultPrevented) interaction.blur();\n    },\n    onClick: (event) => {\n      props.onClick?.(event);\n      if (!event.defaultPrevented) interaction.enter();\n    },\n    onKeyDown: (event) => {\n      props.onKeyDown?.(event);\n      if (!event.defaultPrevented && interaction.open && event.key === 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        interaction.dismiss();\n      }\n    },\n  };\n  const triggerElement = cloneElement(child, triggerProps);\n  return (\n    <>\n      {triggerElement}\n      {trigger && typeof document !== 'undefined'\n        ? createPortal(\n            <span\n              aria-hidden={!interaction.open}\n              className={`chayns-tooltip${interaction.open ? ' chayns-tooltip--open' : ''}`}\n              id={id}\n              onPointerLeave={(event) => interaction.leave(event.relatedTarget)}\n              ref={surface}\n              role=\"tooltip\"\n            >\n              {content}\n            </span>,\n            document.body,\n          )\n        : null}\n    </>\n  );\n});\nTooltip.displayName = 'Tooltip';\nexport default Tooltip;\n"],"mappings":";;;;;;;;AAmBA,IAAM,aAAa;AAEnB,IAAM,UAAU,WAAsC,SAAS,QAC7D,EAAE,UAAU,SAAS,GAAG,eACxB,KACA;CACA,MAAM,KAAK,MAAM;CACjB,MAAM,CAAC,SAAS,cAAc,SAA6B,IAAI;CAC/D,MAAM,UAAU,OAAwB,IAAI;CAC5C,MAAM,cAAc,sBAAsB,SAAS,OAAO;CAC1D,mBAAmB,SAAS,SAAS,YAAY,MAAM,OAAO,UAAU;CAExE,MAAM,QAAQ,eAAoC,QAAQ,IAAI,WAAW,KAAA;CACzE,MAAM,gBAAgB,QACjB,OAAO,yBAAyB,OAAO,KAAK,CAAC,EAAE,QAChD,KAAA;CACJ,MAAM,WAAW,OAAO,MAAM,OAAO;CACrC,MAAM,YAAY,cAAc,kBAAkB,UAAU,YAAY,GAAG,GAAG,CAAC,UAAU,GAAG,CAAC;CAC7F,IAAI,CAAC,SAAS,MAAM,SAAS,YAAY,MAAM,MAAM,UACnD,MAAM,IAAI,MAAM,wEAAwE;CAE1F,MAAM,QAAQ,oBAAoB,MAAM,OAAO,WAAW;CAC1D,MAAM,cAAc,CAClB,GAAG,IAAI,IACL;EAAC,MAAM,MAAM;EAAqB,YAAY;EAAqB;CAAE,CAAC,CACnE,OAAO,OAAO,CAAC,CACf,SAAS,UAAU,OAAO,MAAM,KAAK,KAAK,CAAC,CAAC,CACjD,CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM,eAAoC;EACxC,GAAG;EACH,KAAK;EACL,oBAAoB;EACpB,iBAAiB,UAAU;GACzB,MAAM,iBAAiB,KAAK;GAC5B,IAAI,CAAC,MAAM,kBAAkB,YAAY,MAAM;EACjD;EACA,iBAAiB,UAAU;GACzB,MAAM,iBAAiB,KAAK;GAC5B,IAAI,CAAC,MAAM,kBAAkB,YAAY,MAAM,MAAM,aAAa;EACpE;EACA,UAAU,UAAU;GAClB,MAAM,UAAU,KAAK;GACrB,IAAI,CAAC,MAAM,kBAAkB,YAAY,MAAM;EACjD;EACA,SAAS,UAAU;GACjB,MAAM,SAAS,KAAK;GACpB,IAAI,CAAC,MAAM,kBAAkB,YAAY,KAAK;EAChD;EACA,UAAU,UAAU;GAClB,MAAM,UAAU,KAAK;GACrB,IAAI,CAAC,MAAM,kBAAkB,YAAY,MAAM;EACjD;EACA,YAAY,UAAU;GACpB,MAAM,YAAY,KAAK;GACvB,IAAI,CAAC,MAAM,oBAAoB,YAAY,QAAQ,MAAM,QAAQ,UAAU;IACzE,MAAM,eAAe;IACrB,MAAM,gBAAgB;IACtB,YAAY,QAAQ;GACtB;EACF;CACF;CACA,MAAM,iBAAiB,aAAa,OAAO,YAAY;CACvD,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,gBACA,WAAW,OAAO,aAAa,cAC5B,aACE,oBAAC,QAAD;EACE,eAAa,CAAC,YAAY;EAC1B,WAAW,iBAAiB,YAAY,OAAO,0BAA0B;EACrE;EACJ,iBAAiB,UAAU,YAAY,MAAM,MAAM,aAAa;EAChE,KAAK;EACL,MAAK;EAEJ,UAAA;CACG,CAAA,GACN,SAAS,IACX,IACA,IACJ,EAAA,CAAA;AAEN,CAAC;AACD,QAAQ,cAAc"}

package/dist/components/tooltip/Tooltip.types.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react';
+export interface TooltipTriggerProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    disabled?: boolean;
+}
+/** Explains one existing enabled trigger without changing its native action. */
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'content'> {
+    children: ReactElement<TooltipTriggerProps>;
+    /** Already localized non-interactive explanation; never essential instructions or actions. */
+    content: ReactNode;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/dist/components/tooltip/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1E,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,gFAAgF;AAChF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC7F,QAAQ,EAAE,YAAY,CAAC,mBAAmB,CAAC,CAAC;IAC5C,8FAA8F;IAC9F,OAAO,EAAE,SAAS,CAAC;CACpB"}

package/dist/components/tooltip/hooks/useTooltipInteraction.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+/** Tracks focus/hover independently, including Escape suppression and outside dismissal. */
+export declare function useTooltipInteraction(trigger: HTMLElement | null, surface: RefObject<HTMLSpanElement | null>): {
+    open: boolean;
+    enter: () => void;
+    leave: (relatedTarget: EventTarget | null) => void;
+    focus: () => void;
+    blur: () => void;
+    dismiss: () => void;
+};
+//# sourceMappingURL=useTooltipInteraction.d.ts.map

package/dist/components/tooltip/hooks/useTooltipInteraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipInteraction.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/hooks/useTooltipInteraction.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,4FAA4F;AAC5F,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,OAAO,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC;;;2BAQZ,WAAW,GAAG,IAAI;;;;EAuCjD"}

package/dist/components/tooltip/hooks/useTooltipInteraction.js

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/tooltip/hooks/useTooltipInteraction.ts
+/** Tracks focus/hover independently, including Escape suppression and outside dismissal. */
+function useTooltipInteraction(trigger, surface) {
+	const [open, setOpen] = useState(false);
+	const focused = useRef(false);
+	function enter() {
+		setOpen(true);
+	}
+	function leave(relatedTarget) {
+		if (relatedTarget instanceof Node && (surface.current?.contains(relatedTarget) || trigger?.contains(relatedTarget))) return;
+		if (!focused.current) setOpen(false);
+	}
+	function dismiss() {
+		setOpen(false);
+	}
+	function focus() {
+		focused.current = true;
+		enter();
+	}
+	function blur() {
+		focused.current = false;
+		setOpen(false);
+	}
+	useEffect(() => {
+		if (!open) return void 0;
+		function keyDown(event) {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			setOpen(false);
+		}
+		function pointerDown(event) {
+			if (event.defaultPrevented || !(event.target instanceof Node)) return;
+			if (trigger?.contains(event.target) || surface.current?.contains(event.target)) return;
+			setOpen(false);
+		}
+		document.addEventListener("keydown", keyDown);
+		document.addEventListener("pointerdown", pointerDown);
+		return () => {
+			document.removeEventListener("keydown", keyDown);
+			document.removeEventListener("pointerdown", pointerDown);
+		};
+	}, [
+		open,
+		surface,
+		trigger
+	]);
+	return {
+		open,
+		enter,
+		leave,
+		focus,
+		blur,
+		dismiss
+	};
+}
+//#endregion
+export { useTooltipInteraction };
+
+//# sourceMappingURL=useTooltipInteraction.js.map

package/dist/components/tooltip/hooks/useTooltipInteraction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipInteraction.js","names":[],"sources":["../../../../src/components/tooltip/hooks/useTooltipInteraction.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { RefObject } from 'react';\n\n/** Tracks focus/hover independently, including Escape suppression and outside dismissal. */\nexport function useTooltipInteraction(\n  trigger: HTMLElement | null,\n  surface: RefObject<HTMLSpanElement | null>,\n) {\n  const [open, setOpen] = useState(false);\n  const focused = useRef(false);\n\n  function enter() {\n    setOpen(true);\n  }\n  function leave(relatedTarget: EventTarget | null) {\n    if (\n      relatedTarget instanceof Node &&\n      (surface.current?.contains(relatedTarget) || trigger?.contains(relatedTarget))\n    )\n      return;\n    if (!focused.current) setOpen(false);\n  }\n  function dismiss() {\n    setOpen(false);\n  }\n  function focus() {\n    focused.current = true;\n    enter();\n  }\n  function blur() {\n    focused.current = false;\n    setOpen(false);\n  }\n\n  useEffect(() => {\n    if (!open) return undefined;\n    function keyDown(event: KeyboardEvent) {\n      if (event.key !== 'Escape' || event.defaultPrevented) return;\n      setOpen(false);\n    }\n    function pointerDown(event: PointerEvent) {\n      if (event.defaultPrevented || !(event.target instanceof Node)) return;\n      if (trigger?.contains(event.target) || surface.current?.contains(event.target)) return;\n      setOpen(false);\n    }\n    document.addEventListener('keydown', keyDown);\n    document.addEventListener('pointerdown', pointerDown);\n    return () => {\n      document.removeEventListener('keydown', keyDown);\n      document.removeEventListener('pointerdown', pointerDown);\n    };\n  }, [open, surface, trigger]);\n  return { open, enter, leave, focus, blur, dismiss };\n}\n"],"mappings":";;;AAIA,SAAgB,sBACd,SACA,SACA;CACA,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,OAAO,KAAK;CAE5B,SAAS,QAAQ;EACf,QAAQ,IAAI;CACd;CACA,SAAS,MAAM,eAAmC;EAChD,IACE,yBAAyB,SACxB,QAAQ,SAAS,SAAS,aAAa,KAAK,SAAS,SAAS,aAAa,IAE5E;EACF,IAAI,CAAC,QAAQ,SAAS,QAAQ,KAAK;CACrC;CACA,SAAS,UAAU;EACjB,QAAQ,KAAK;CACf;CACA,SAAS,QAAQ;EACf,QAAQ,UAAU;EAClB,MAAM;CACR;CACA,SAAS,OAAO;EACd,QAAQ,UAAU;EAClB,QAAQ,KAAK;CACf;CAEA,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAClB,SAAS,QAAQ,OAAsB;GACrC,IAAI,MAAM,QAAQ,YAAY,MAAM,kBAAkB;GACtD,QAAQ,KAAK;EACf;EACA,SAAS,YAAY,OAAqB;GACxC,IAAI,MAAM,oBAAoB,EAAE,MAAM,kBAAkB,OAAO;GAC/D,IAAI,SAAS,SAAS,MAAM,MAAM,KAAK,QAAQ,SAAS,SAAS,MAAM,MAAM,GAAG;GAChF,QAAQ,KAAK;EACf;EACA,SAAS,iBAAiB,WAAW,OAAO;EAC5C,SAAS,iBAAiB,eAAe,WAAW;EACpD,aAAa;GACX,SAAS,oBAAoB,WAAW,OAAO;GAC/C,SAAS,oBAAoB,eAAe,WAAW;EACzD;CACF,GAAG;EAAC;EAAM;EAAS;CAAO,CAAC;CAC3B,OAAO;EAAE;EAAM;EAAO;EAAO;EAAO;EAAM;CAAQ;AACpD"}

package/dist/components/tooltip/tooltip-trigger-props.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'react';
+/** Preserve child listeners before outer listeners for every shared native event. */
+export declare function tooltipTriggerProps(child: HTMLAttributes<HTMLElement>, outer: HTMLAttributes<HTMLElement>): HTMLAttributes<HTMLElement>;
+//# sourceMappingURL=tooltip-trigger-props.d.ts.map

package/dist/components/tooltip/tooltip-trigger-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger-props.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip-trigger-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAC;AAI5D,qFAAqF;AACrF,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,EAClC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,GAcjB,cAAc,CAAC,WAAW,CAAC,CAC7C"}

package/dist/components/tooltip/tooltip-trigger-props.js

@@ -0,0 +1,25 @@
+//#region src/components/tooltip/tooltip-trigger-props.ts
+/** Preserve child listeners before outer listeners for every shared native event. */
+function tooltipTriggerProps(child, outer) {
+	const merged = {
+		...child,
+		...outer
+	};
+	for (const [name, listener] of Object.entries(outer)) {
+		const previous = child[name];
+		if (/^on[A-Z]/.test(name) && typeof previous === "function" && typeof listener === "function") merged[name] = (event) => {
+			previous(event);
+			if (!event.defaultPrevented) listener(event);
+		};
+	}
+	merged.className = [child.className, outer.className].filter(Boolean).join(" ") || void 0;
+	merged.style = {
+		...child.style,
+		...outer.style
+	};
+	return merged;
+}
+//#endregion
+export { tooltipTriggerProps };
+
+//# sourceMappingURL=tooltip-trigger-props.js.map

package/dist/components/tooltip/tooltip-trigger-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger-props.js","names":[],"sources":["../../../src/components/tooltip/tooltip-trigger-props.ts"],"sourcesContent":["import type { HTMLAttributes, SyntheticEvent } from 'react';\n\ntype Handler = (event: SyntheticEvent<HTMLElement>) => void;\n\n/** Preserve child listeners before outer listeners for every shared native event. */\nexport function tooltipTriggerProps(\n  child: HTMLAttributes<HTMLElement>,\n  outer: HTMLAttributes<HTMLElement>,\n) {\n  const merged: Record<string, unknown> = { ...child, ...outer };\n  for (const [name, listener] of Object.entries(outer)) {\n    const previous = (child as Record<string, unknown>)[name];\n    if (/^on[A-Z]/.test(name) && typeof previous === 'function' && typeof listener === 'function') {\n      merged[name] = (event: SyntheticEvent<HTMLElement>) => {\n        (previous as Handler)(event);\n        if (!event.defaultPrevented) (listener as Handler)(event);\n      };\n    }\n  }\n  merged.className = [child.className, outer.className].filter(Boolean).join(' ') || undefined;\n  merged.style = { ...child.style, ...outer.style };\n  return merged as HTMLAttributes<HTMLElement>;\n}\n"],"mappings":";;AAKA,SAAgB,oBACd,OACA,OACA;CACA,MAAM,SAAkC;EAAE,GAAG;EAAO,GAAG;CAAM;CAC7D,KAAK,MAAM,CAAC,MAAM,aAAa,OAAO,QAAQ,KAAK,GAAG;EACpD,MAAM,WAAY,MAAkC;EACpD,IAAI,WAAW,KAAK,IAAI,KAAK,OAAO,aAAa,cAAc,OAAO,aAAa,YACjF,OAAO,SAAS,UAAuC;GACrD,SAAsB,KAAK;GAC3B,IAAI,CAAC,MAAM,kBAAkB,SAAsB,KAAK;EAC1D;CAEJ;CACA,OAAO,YAAY,CAAC,MAAM,WAAW,MAAM,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CACnF,OAAO,QAAQ;EAAE,GAAG,MAAM;EAAO,GAAG,MAAM;CAAM;CAChD,OAAO;AACT"}

package/dist/date-time-picker.css

@@ -1,6 +1,6 @@
 @layer chayns.components {
   .chayns-date-time-picker {
-    display: inline-block;
+    display: inline-grid;
     max-inline-size: 100%;
     position: relative;
   }
@@ -11,6 +11,8 @@
 
   .chayns-date-time-picker__trigger {
     box-sizing: border-box;
+    grid-area: 1 / 1;
+    inline-size: 100%;
     max-inline-size: 100%;
     min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
     padding: var(--input-py) var(--input-px);
@@ -25,6 +27,21 @@
     text-align: start;
   }
 
+  .chayns-date-time-picker__sizer {
+    display: grid;
+    grid-area: 1 / 1;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .chayns-date-time-picker__sizer > span {
+    grid-area: 1 / 1;
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid transparent;
+    font: inherit;
+    line-height: 1.2;
+  }
+
   .chayns-date-time-picker__trigger:focus-visible {
     border-color: var(--accent);
     box-shadow: 0 0 0 var(--focus-ring-size)
@@ -53,10 +70,13 @@
   }
 
   .chayns-date-time-picker__popup {
+    box-sizing: border-box;
     position: absolute;
     inset-block-start: calc(100% + var(--k4));
-    inset-inline: 0;
+    inset-inline-start: 0;
     z-index: var(--z-popover);
+    inline-size: max-content;
+    min-inline-size: 100%;
     overflow: hidden;
     padding: var(--k8);
     border: 1px solid var(--border);
@@ -118,4 +138,15 @@
     transform-origin: center;
     transform-style: preserve-3d;
   }
+
+  .chayns-date-time-picker--date .chayns-date-time-picker__wheel {
+    flex: 0 0 auto;
+    min-inline-size: max-content;
+  }
+
+  .chayns-date-time-picker--date .chayns-date-time-picker__wheel-option {
+    inline-size: max-content;
+    min-inline-size: 100%;
+    padding-inline: var(--k8);
+  }
 }

package/dist/hooks/useOverlayPosition.d.ts

@@ -0,0 +1,4 @@
+import type { RefObject } from 'react';
+/** Positions a non-modal surface at its trigger and keeps it inside the viewport. */
+export declare function useOverlayPosition(surfaceRef: RefObject<HTMLElement | null>, trigger: HTMLElement | null, open: boolean, placement?: 'bottom' | 'top', gap?: number): void;
+//# sourceMappingURL=useOverlayPosition.d.ts.map

package/dist/hooks/useOverlayPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useOverlayPosition.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,qFAAqF;AACrF,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACzC,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,IAAI,EAAE,OAAO,EACb,SAAS,GAAE,QAAQ,GAAG,KAAgB,EACtC,GAAG,SAAI,QAyDR"}

package/dist/hooks/useOverlayPosition.js

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+//#region src/hooks/useOverlayPosition.ts
+/** Positions a non-modal surface at its trigger and keeps it inside the viewport. */
+function useOverlayPosition(surfaceRef, trigger, open, placement = "bottom", gap = 0) {
+	useEffect(() => {
+		const surface = surfaceRef.current;
+		if (!open || surface === null || trigger === null) return void 0;
+		let frame;
+		function update() {
+			if (surface === null || trigger === null) return;
+			const anchor = trigger.getBoundingClientRect();
+			surface.style.maxWidth = `${window.innerWidth}px`;
+			surface.style.maxHeight = `${window.innerHeight}px`;
+			const size = surface.getBoundingClientRect();
+			const above = anchor.top - gap - size.height;
+			const below = anchor.bottom + gap;
+			const fitsAbove = above >= 0;
+			const fitsBelow = below + size.height <= window.innerHeight;
+			let top = below;
+			if (placement === "top") {
+				if (fitsAbove || !fitsBelow) top = above;
+			} else if (!fitsBelow && fitsAbove) top = above;
+			const left = placement === "top" ? anchor.left + (anchor.width - size.width) / 2 : anchor.left;
+			surface.style.top = `${Math.max(0, Math.min(top, window.innerHeight - size.height))}px`;
+			const resolvedLeft = Math.max(0, Math.min(left, window.innerWidth - size.width));
+			surface.style.left = `${resolvedLeft}px`;
+			surface.style.setProperty("--chayns-overlay-anchor-x", `${anchor.left + anchor.width / 2 - resolvedLeft}px`);
+			surface.dataset.placement = top === above ? "top" : "bottom";
+		}
+		function scheduleUpdate() {
+			if (frame !== void 0) return;
+			frame = window.requestAnimationFrame(() => {
+				frame = void 0;
+				update();
+			});
+		}
+		update();
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(scheduleUpdate);
+		observer?.observe(surface);
+		observer?.observe(trigger);
+		window.addEventListener("resize", scheduleUpdate);
+		window.addEventListener("scroll", scheduleUpdate, true);
+		return () => {
+			if (frame !== void 0) window.cancelAnimationFrame(frame);
+			observer?.disconnect();
+			window.removeEventListener("resize", scheduleUpdate);
+			window.removeEventListener("scroll", scheduleUpdate, true);
+		};
+	}, [
+		gap,
+		open,
+		placement,
+		surfaceRef,
+		trigger
+	]);
+}
+//#endregion
+export { useOverlayPosition };
+
+//# sourceMappingURL=useOverlayPosition.js.map

package/dist/hooks/useOverlayPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverlayPosition.js","names":[],"sources":["../../src/hooks/useOverlayPosition.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport type { RefObject } from 'react';\n\n/** Positions a non-modal surface at its trigger and keeps it inside the viewport. */\nexport function useOverlayPosition(\n  surfaceRef: RefObject<HTMLElement | null>,\n  trigger: HTMLElement | null,\n  open: boolean,\n  placement: 'bottom' | 'top' = 'bottom',\n  gap = 0,\n) {\n  useEffect(() => {\n    const surface = surfaceRef.current;\n    if (!open || surface === null || trigger === null) return undefined;\n\n    let frame: number | undefined;\n    function update() {\n      if (surface === null || trigger === null) return;\n      const anchor = trigger.getBoundingClientRect();\n      surface.style.maxWidth = `${window.innerWidth}px`;\n      surface.style.maxHeight = `${window.innerHeight}px`;\n      const size = surface.getBoundingClientRect();\n      const above = anchor.top - gap - size.height;\n      const below = anchor.bottom + gap;\n      const fitsAbove = above >= 0;\n      const fitsBelow = below + size.height <= window.innerHeight;\n      let top = below;\n      if (placement === 'top') {\n        if (fitsAbove || !fitsBelow) top = above;\n      } else if (!fitsBelow && fitsAbove) {\n        top = above;\n      }\n      const left =\n        placement === 'top' ? anchor.left + (anchor.width - size.width) / 2 : anchor.left;\n      surface.style.top = `${Math.max(0, Math.min(top, window.innerHeight - size.height))}px`;\n      const resolvedLeft = Math.max(0, Math.min(left, window.innerWidth - size.width));\n      surface.style.left = `${resolvedLeft}px`;\n      surface.style.setProperty(\n        '--chayns-overlay-anchor-x',\n        `${anchor.left + anchor.width / 2 - resolvedLeft}px`,\n      );\n      surface.dataset.placement = top === above ? 'top' : 'bottom';\n    }\n\n    function scheduleUpdate() {\n      if (frame !== undefined) return;\n      frame = window.requestAnimationFrame(() => {\n        frame = undefined;\n        update();\n      });\n    }\n\n    update();\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(scheduleUpdate);\n    observer?.observe(surface);\n    observer?.observe(trigger);\n    window.addEventListener('resize', scheduleUpdate);\n    window.addEventListener('scroll', scheduleUpdate, true);\n    return () => {\n      if (frame !== undefined) window.cancelAnimationFrame(frame);\n      observer?.disconnect();\n      window.removeEventListener('resize', scheduleUpdate);\n      window.removeEventListener('scroll', scheduleUpdate, true);\n    };\n  }, [gap, open, placement, surfaceRef, trigger]);\n}\n"],"mappings":";;;AAIA,SAAgB,mBACd,YACA,SACA,MACA,YAA8B,UAC9B,MAAM,GACN;CACA,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,YAAY,QAAQ,YAAY,MAAM,OAAO,KAAA;EAE1D,IAAI;EACJ,SAAS,SAAS;GAChB,IAAI,YAAY,QAAQ,YAAY,MAAM;GAC1C,MAAM,SAAS,QAAQ,sBAAsB;GAC7C,QAAQ,MAAM,WAAW,GAAG,OAAO,WAAW;GAC9C,QAAQ,MAAM,YAAY,GAAG,OAAO,YAAY;GAChD,MAAM,OAAO,QAAQ,sBAAsB;GAC3C,MAAM,QAAQ,OAAO,MAAM,MAAM,KAAK;GACtC,MAAM,QAAQ,OAAO,SAAS;GAC9B,MAAM,YAAY,SAAS;GAC3B,MAAM,YAAY,QAAQ,KAAK,UAAU,OAAO;GAChD,IAAI,MAAM;GACV,IAAI,cAAc,OACZ;QAAA,aAAa,CAAC,WAAW,MAAM;GAAA,OAC9B,IAAI,CAAC,aAAa,WACvB,MAAM;GAER,MAAM,OACJ,cAAc,QAAQ,OAAO,QAAQ,OAAO,QAAQ,KAAK,SAAS,IAAI,OAAO;GAC/E,QAAQ,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,cAAc,KAAK,MAAM,CAAC,EAAE;GACpF,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,OAAO,aAAa,KAAK,KAAK,CAAC;GAC/E,QAAQ,MAAM,OAAO,GAAG,aAAa;GACrC,QAAQ,MAAM,YACZ,6BACA,GAAG,OAAO,OAAO,OAAO,QAAQ,IAAI,aAAa,GACnD;GACA,QAAQ,QAAQ,YAAY,QAAQ,QAAQ,QAAQ;EACtD;EAEA,SAAS,iBAAiB;GACxB,IAAI,UAAU,KAAA,GAAW;GACzB,QAAQ,OAAO,4BAA4B;IACzC,QAAQ,KAAA;IACR,OAAO;GACT,CAAC;EACH;EAEA,OAAO;EACP,MAAM,WACJ,OAAO,mBAAmB,cAAc,KAAA,IAAY,IAAI,eAAe,cAAc;EACvF,UAAU,QAAQ,OAAO;EACzB,UAAU,QAAQ,OAAO;EACzB,OAAO,iBAAiB,UAAU,cAAc;EAChD,OAAO,iBAAiB,UAAU,gBAAgB,IAAI;EACtD,aAAa;GACX,IAAI,UAAU,KAAA,GAAW,OAAO,qBAAqB,KAAK;GAC1D,UAAU,WAAW;GACrB,OAAO,oBAAoB,UAAU,cAAc;GACnD,OAAO,oBAAoB,UAAU,gBAAgB,IAAI;EAC3D;CACF,GAAG;EAAC;EAAK;EAAM;EAAW;EAAY;CAAO,CAAC;AAChD"}

package/dist/index.d.ts

@@ -1,27 +1,27 @@
 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 { BUTTON_VARIANTS, ButtonVariants } from './components/button/Button.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 { BADGE_SIZES, BADGE_TONES, BadgeSizes, BadgeTones, } from './components/badge/Badge.types.js';
 export type { BadgeProps, BadgeSize, BadgeTone } from './components/badge/Badge.types.js';
 export { default as Skeleton } from './components/skeleton/Skeleton.js';
-export { SKELETON_SHAPES } from './components/skeleton/Skeleton.types.js';
+export { SKELETON_SHAPES, SkeletonShapes } from './components/skeleton/Skeleton.types.js';
 export type { SkeletonProps, SkeletonShape } from './components/skeleton/Skeleton.types.js';
 export { default as Spinner } from './components/spinner/Spinner.js';
 export type { SpinnerProps } from './components/spinner/Spinner.types.js';
 export { default as Progress } from './components/progress/Progress.js';
 export type { ProgressProps } from './components/progress/Progress.types.js';
 export { default as Banner } from './components/banner/Banner.js';
-export { BANNER_TONES } from './components/banner/Banner.types.js';
+export { BANNER_TONES, BannerTones } 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 { DATE_TIME_PICKER_MODES, DATE_TIME_PICKER_MINUTE_STEPS, DateTimePickerModes, DateTimePickerMinuteSteps, 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';
@@ -41,12 +41,26 @@ export { default as Card } from './components/card/Card.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';
+export { AVATAR_SIZES, AvatarSizes } from './components/avatar/Avatar.types.js';
+export type { AvatarProps, AvatarSize } from './components/avatar/Avatar.types.js';
 export type { AvatarGroupProps } from './components/avatar-group/AvatarGroup.types.js';
 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 { ACCORDION_APPEARANCES } from './components/accordion/Accordion.types.js';
+export { ACCORDION_APPEARANCES, AccordionAppearances, } from './components/accordion/Accordion.types.js';
 export type { AccordionAppearance, AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionProps, AccordionGroupProps, AccordionPartProps, } from './components/accordion/Accordion.types.js';
+export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb.js';
+export type { BreadcrumbProps } from './components/breadcrumb/Breadcrumb.types.js';
+export type { BreadcrumbItem } from './components/breadcrumb/Breadcrumb.types.js';
+export { default as Pagination } from './components/pagination/Pagination.js';
+export type { PaginationProps } from './components/pagination/Pagination.types.js';
+export type { PaginationLabels } from './components/pagination/Pagination.types.js';
+export { default as Slider } from './components/slider/Slider.js';
+export type { SliderProps } from './components/slider/Slider.types.js';
+export { default as Stepper } from './components/stepper/Stepper.js';
+export { STEPPER_PRECISIONS, StepperPrecisions } from './components/stepper/Stepper.types.js';
+export type { StepperPrecision, StepperProps } from './components/stepper/Stepper.types.js';
+export { default as Tooltip } from './components/tooltip/Tooltip.js';
+export type { TooltipProps, TooltipTriggerProps } from './components/tooltip/Tooltip.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":"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"}

package/dist/index.js

@@ -1,17 +1,17 @@
 import Button from "./components/button/Button.js";
 import IconButton from "./components/icon-button/IconButton.js";
-import { BUTTON_VARIANTS } from "./components/button/Button.types.js";
+import { BUTTON_VARIANTS, ButtonVariants } 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 { BADGE_SIZES, BADGE_TONES, BadgeSizes, BadgeTones } from "./components/badge/Badge.types.js";
 import Skeleton from "./components/skeleton/Skeleton.js";
-import { SKELETON_SHAPES } from "./components/skeleton/Skeleton.types.js";
+import { SKELETON_SHAPES, SkeletonShapes } from "./components/skeleton/Skeleton.types.js";
 import Spinner from "./components/spinner/Spinner.js";
 import Progress from "./components/progress/Progress.js";
 import Banner from "./components/banner/Banner.js";
-import { BANNER_TONES } from "./components/banner/Banner.types.js";
+import { BANNER_TONES, BannerTones } 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 { DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES, DateTimePickerMinuteSteps, DateTimePickerModes } 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";
@@ -24,8 +24,15 @@ import SplitButton from "./components/split-button/SplitButton.js";
 import Card from "./components/card/Card.js";
 import Avatar from "./components/avatar/Avatar.js";
 import AvatarGroup from "./components/avatar-group/AvatarGroup.js";
+import { AVATAR_SIZES, AvatarSizes } from "./components/avatar/Avatar.types.js";
 import List from "./components/list/List.js";
 import Accordion from "./components/accordion/Accordion.js";
 import AccordionGroup from "./components/accordion-group/AccordionGroup.js";
-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, Progress, RadioGroup, SKELETON_SHAPES, SegmentedControl, Skeleton, Spinner, SplitButton, Switch, TextArea, TextField };
+import { ACCORDION_APPEARANCES, AccordionAppearances } from "./components/accordion/Accordion.types.js";
+import Breadcrumb from "./components/breadcrumb/Breadcrumb.js";
+import Pagination from "./components/pagination/Pagination.js";
+import Slider from "./components/slider/Slider.js";
+import Stepper from "./components/stepper/Stepper.js";
+import { STEPPER_PRECISIONS, StepperPrecisions } from "./components/stepper/Stepper.types.js";
+import Tooltip from "./components/tooltip/Tooltip.js";
+export { ACCORDION_APPEARANCES, AVATAR_SIZES, Accordion, AccordionAppearances, AccordionGroup, Avatar, AvatarGroup, AvatarSizes, BADGE_SIZES, BADGE_TONES, BANNER_TONES, BUTTON_VARIANTS, Badge, BadgeSizes, BadgeTones, Banner, BannerTones, Breadcrumb, Button, ButtonVariants, Card, Checkbox, ComboBox, DATE_TIME_PICKER_MINUTE_STEPS, DATE_TIME_PICKER_MODES, DateTimePicker, DateTimePickerMinuteSteps, DateTimePickerModes, IconButton, List, Pagination, Popup_default as Popup, PopupList, Progress, RadioGroup, SKELETON_SHAPES, STEPPER_PRECISIONS, SegmentedControl, Skeleton, SkeletonShapes, Slider, Spinner, SplitButton, Stepper, StepperPrecisions, Switch, TextArea, TextField, Tooltip };

package/dist/pagination.css

@@ -0,0 +1,54 @@
+@import url('./button.css');
+
+@layer chayns.components {
+  .chayns-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--k6);
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+
+  .chayns-pagination__page,
+  .chayns-pagination__arrow {
+    flex: none;
+    min-inline-size: var(--k34);
+    block-size: var(--k34);
+    padding-inline: var(--k6);
+    border: 0;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text);
+    font: inherit;
+    font-size: var(--fs-body);
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .chayns-pagination__arrow {
+    border: 1px solid var(--border);
+    color: var(--text-2);
+    font-size: var(--fs-caption);
+  }
+
+  .chayns-pagination__page[aria-current='page'] {
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  .chayns-pagination__arrow:disabled {
+    color: var(--disabled-text);
+    cursor: not-allowed;
+  }
+
+  .chayns-pagination__page:focus-visible,
+  .chayns-pagination__arrow:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+
+  .chayns-pagination__ellipsis {
+    color: var(--text-2);
+  }
+}

package/dist/popup.css

@@ -1,6 +1,10 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-popup {
     position: fixed;
+    box-sizing: border-box;
+    overflow: auto;
     z-index: var(--z-popover);
     min-inline-size: 14rem;
     padding: var(--sp-2);

package/dist/progress.css

@@ -8,7 +8,7 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: 7px;
-    color: var(--muted);
+    color: var(--text-3);
     font-size: var(--fs-meta);
   }
 

package/dist/segmented-control.css

@@ -1,3 +1,5 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-segmented-control {
     display: grid;