@chayns-ui/core 0.9.2 → 0.10.0

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"}

package/dist/utils/native-ref.js

@@ -0,0 +1,24 @@
+//#region src/utils/native-ref.ts
+/** Composes native refs, including React 19 cleanup callbacks, without requiring React 19. */
+function composeNativeRefs(...refs) {
+	const cleanups = /* @__PURE__ */ new Map();
+	return (element) => {
+		for (const ref of refs) {
+			if (!ref) continue;
+			if (typeof ref === "function") {
+				const cleanup = cleanups.get(ref);
+				if (element === null && cleanup) {
+					cleanup();
+					cleanups.delete(ref);
+				} else {
+					const nextCleanup = ref(element);
+					if (typeof nextCleanup === "function") cleanups.set(ref, nextCleanup);
+				}
+			} else ref.current = element;
+		}
+	};
+}
+//#endregion
+export { composeNativeRefs };
+
+//# sourceMappingURL=native-ref.js.map

package/dist/utils/native-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-ref.js","names":[],"sources":["../../src/utils/native-ref.ts"],"sourcesContent":["import type { Ref, RefCallback } from 'react';\n\n/** Composes native refs, including React 19 cleanup callbacks, without requiring React 19. */\nexport function composeNativeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  const cleanups = new Map<Ref<T>, () => void>();\n  return (element) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === 'function') {\n        const cleanup = cleanups.get(ref);\n        if (element === null && cleanup) {\n          cleanup();\n          cleanups.delete(ref);\n        } else {\n          const nextCleanup = ref(element);\n          if (typeof nextCleanup === 'function') cleanups.set(ref, nextCleanup);\n        }\n      } else {\n        ref.current = element;\n      }\n    }\n  };\n}\n"],"mappings":";;AAGA,SAAgB,kBAAqB,GAAG,MAA8C;CACpF,MAAM,2BAAW,IAAI,IAAwB;CAC7C,QAAQ,YAAY;EAClB,KAAK,MAAM,OAAO,MAAM;GACtB,IAAI,CAAC,KAAK;GACV,IAAI,OAAO,QAAQ,YAAY;IAC7B,MAAM,UAAU,SAAS,IAAI,GAAG;IAChC,IAAI,YAAY,QAAQ,SAAS;KAC/B,QAAQ;KACR,SAAS,OAAO,GAAG;IACrB,OAAO;KACL,MAAM,cAAc,IAAI,OAAO;KAC/B,IAAI,OAAO,gBAAgB,YAAY,SAAS,IAAI,KAAK,WAAW;IACtE;GACF,OACE,IAAI,UAAU;EAElB;CACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",
@@ -43,7 +43,12 @@
     "./radio-group.css": "./dist/radio-group.css",
     "./segmented-control.css": "./dist/segmented-control.css",
     "./styles.css": "./dist/styles.css",
-    "./package.json": "./package.json"
+    "./breadcrumb.css": "./dist/breadcrumb.css",
+    "./pagination.css": "./dist/pagination.css",
+    "./slider.css": "./dist/slider.css",
+    "./package.json": "./package.json",
+    "./stepper.css": "./dist/stepper.css",
+    "./tooltip.css": "./dist/tooltip.css"
   },
   "peerDependencies": {
     "react": ">=18 <20"