@chayns-ui/core 0.9.4 → 0.10.0

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;

package/dist/slider.css

@@ -0,0 +1,109 @@
+@layer chayns.components {
+  .chayns-slider {
+    min-inline-size: 0;
+  }
+
+  .chayns-slider__label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--k8);
+    margin-block-end: var(--k10);
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 500;
+  }
+
+  .chayns-slider__value {
+    flex: none;
+    font-family: 'Roboto Mono', monospace;
+    color: var(--accent);
+    font-size: var(--fs-meta);
+    font-weight: 600;
+  }
+
+  .chayns-slider__input {
+    appearance: none;
+    inline-size: 100%;
+    min-block-size: max(24px, var(--k24));
+    block-size: var(--k20);
+    margin: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .chayns-slider__input::-webkit-slider-runnable-track {
+    block-size: 4px;
+    border-radius: 999px;
+    background: var(--input-border);
+  }
+
+  .chayns-slider__input::-moz-range-track {
+    block-size: 4px;
+    border-radius: 999px;
+    background: var(--input-border);
+  }
+
+  .chayns-slider__input::-moz-range-progress {
+    block-size: 4px;
+    border-radius: 999px;
+    background: var(--accent);
+  }
+
+  .chayns-slider__input::-webkit-slider-thumb {
+    appearance: none;
+    inline-size: var(--k18);
+    block-size: var(--k18);
+    margin-block-start: calc((4px - var(--k18)) / 2);
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+    transition: transform 0.15s ease;
+  }
+
+  .chayns-slider__input::-moz-range-thumb {
+    inline-size: var(--k18);
+    block-size: var(--k18);
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+    transition: transform 0.15s ease;
+  }
+
+  .chayns-slider__input:focus-visible {
+    outline: none;
+  }
+
+  .chayns-slider__input:focus-visible::-webkit-slider-thumb {
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+
+  .chayns-slider__input:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+
+  .chayns-slider__input:hover:not(:disabled)::-webkit-slider-thumb,
+  .chayns-slider__input:active:not(:disabled)::-webkit-slider-thumb {
+    transform: scale(1.12);
+  }
+
+  .chayns-slider__input:hover:not(:disabled)::-moz-range-thumb,
+  .chayns-slider__input:active:not(:disabled)::-moz-range-thumb {
+    transform: scale(1.12);
+  }
+
+  .chayns-slider__input:disabled {
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-slider__input::-webkit-slider-thumb,
+    .chayns-slider__input::-moz-range-thumb {
+      transition: none;
+    }
+  }
+}

package/dist/split-button.css

@@ -1,3 +1,5 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-split-button {
     display: inline-flex;
@@ -24,26 +26,9 @@
     cursor: pointer;
   }
 
-  .chayns-split-button__trigger.chayns-button--primary {
-    background: var(--accent);
-    color: var(--on-accent);
-  }
-
   .chayns-split-button__trigger.chayns-button--outline {
     border-block: 1.5px solid var(--accent);
     border-inline-end: 1.5px solid var(--accent);
-    background: var(--surface);
-    color: var(--accent);
-  }
-
-  .chayns-split-button__trigger.chayns-button--ghost {
-    background: transparent;
-    color: var(--text-2);
-  }
-
-  .chayns-split-button__trigger.chayns-button--danger {
-    background: var(--danger-bg);
-    color: var(--danger);
   }
 
   .chayns-split-button__trigger:disabled {
@@ -59,68 +44,6 @@
     background: var(--surface);
   }
 
-  .chayns-split-button__trigger:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-size)
-      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
-  }
-
-  .chayns-split-button__trigger:active:not(:disabled) {
-    transform: scale(0.96);
-  }
-
-  .chayns-split-button__trigger.chayns-button--primary:active:not(:disabled) {
-    background: var(--accent-active);
-  }
-
-  .chayns-split-button__trigger.chayns-button--outline:active:not(:disabled) {
-    background: var(--accent);
-    color: var(--on-accent);
-  }
-
-  .chayns-split-button__trigger.chayns-button--ghost:active:not(:disabled) {
-    background: var(--surface-alt);
-    color: var(--accent);
-  }
-
-  .chayns-split-button__trigger.chayns-button--danger:active:not(:disabled) {
-    background: var(--danger-bg-hover);
-  }
-
-  .chayns-split-button__trigger:active:not(:disabled)
-    .chayns-button-icon__weight:not(.chayns-button-icon__weight--active),
-  .chayns-split-button__trigger:hover:not(:disabled)
-    .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
-    display: none;
-  }
-
-  .chayns-split-button__trigger:active:not(:disabled) .chayns-button-icon__weight--active,
-  .chayns-split-button__trigger:hover:not(:disabled) .chayns-button-icon__weight--active {
-    display: inline-flex;
-  }
-
-  @media (hover: hover) {
-    .chayns-split-button__trigger.chayns-button--primary:hover:not(:disabled) {
-      background: var(--accent-hover);
-      box-shadow: var(--shadow-btn-hover);
-    }
-
-    .chayns-split-button__trigger.chayns-button--outline:hover:not(:disabled) {
-      background: var(--accent);
-      color: var(--on-accent);
-      box-shadow: var(--shadow-btn-hover);
-    }
-
-    .chayns-split-button__trigger.chayns-button--ghost:hover:not(:disabled) {
-      background: var(--surface-alt);
-      color: var(--accent);
-    }
-
-    .chayns-split-button__trigger.chayns-button--danger:hover:not(:disabled) {
-      background: var(--danger-bg-hover);
-    }
-  }
-
   .chayns-split-button__chevron .chayns-button-icon {
     inline-size: 1em;
     block-size: 1em;

package/dist/stepper.css

@@ -0,0 +1,77 @@
+@import url('./button.css');
+
+@layer chayns.components {
+  .chayns-stepper {
+    min-inline-size: 0;
+  }
+
+  .chayns-stepper__label {
+    display: block;
+    margin-block-end: var(--k10);
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 500;
+  }
+
+  .chayns-stepper__control {
+    display: flex;
+    align-items: center;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    overflow: hidden;
+    border: 1.5px solid var(--input-border);
+    border-radius: 10px;
+    background: var(--surface);
+  }
+
+  .chayns-stepper__button {
+    flex: none;
+    inline-size: var(--k40);
+    block-size: var(--k40);
+    padding: 0;
+    border: 0;
+    border-inline-end: 1.5px solid var(--input-border);
+    background: var(--surface);
+    color: var(--text-2);
+    font: inherit;
+    font-size: var(--fs-bodyl);
+    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-stepper__button--increase {
+    border-inline-start: 1.5px solid var(--input-border);
+    border-inline-end: 0;
+    color: var(--accent);
+  }
+
+  .chayns-stepper__button:disabled {
+    color: var(--disabled-text);
+    cursor: not-allowed;
+  }
+
+  .chayns-stepper__button:focus-visible {
+    outline-offset: calc(-1 * var(--focus-ring-size));
+  }
+
+  .chayns-stepper__value {
+    min-inline-size: var(--k52);
+    overflow-wrap: anywhere;
+    text-align: center;
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-stepper__button {
+      transition: none;
+    }
+  }
+}

package/dist/styles.css

@@ -18,3 +18,8 @@
 @import url('./switch.css');
 @import url('./radio-group.css');
 @import url('./segmented-control.css');
+@import url('./breadcrumb.css');
+@import url('./pagination.css');
+@import url('./slider.css');
+@import url('./stepper.css');
+@import url('./tooltip.css');

package/dist/tooltip.css

@@ -0,0 +1,68 @@
+@layer chayns.components {
+  .chayns-tooltip {
+    position: fixed;
+    inline-size: max-content;
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+    background: var(--text);
+    color: var(--surface);
+    font-size: var(--fs-caption);
+    font-weight: 500;
+    padding: var(--k6) var(--k10);
+    border-radius: 8px;
+    white-space: normal;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(4px);
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+    pointer-events: none;
+    z-index: var(--z-tooltip);
+    box-shadow: 0 6px 16px -6px rgb(0 0 0 / 40%);
+  }
+
+  .chayns-tooltip::before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 9px;
+  }
+
+  .chayns-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: clamp(5px, var(--chayns-overlay-anchor-x, 50%), calc(100% - 5px));
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: var(--text);
+  }
+
+  .chayns-tooltip[data-placement='bottom']::before {
+    top: auto;
+    bottom: 100%;
+  }
+
+  .chayns-tooltip[data-placement='bottom']::after {
+    top: auto;
+    bottom: 100%;
+    border-top-color: transparent;
+    border-bottom-color: var(--text);
+  }
+
+  .chayns-tooltip--open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-tooltip {
+      transition: none;
+    }
+  }
+}

package/dist/utils/native-ref.d.ts

@@ -0,0 +1,4 @@
+import type { Ref, RefCallback } from 'react';
+/** Composes native refs, including React 19 cleanup callbacks, without requiring React 19. */
+export declare function composeNativeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
+//# sourceMappingURL=native-ref.d.ts.map

package/dist/utils/native-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-ref.d.ts","sourceRoot":"","sources":["../../src/utils/native-ref.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C,8FAA8F;AAC9F,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,CAmBpF"}