@chayns-ui/core 0.9.2 → 0.10.0

package/dist/accordion.css

@@ -1,3 +1,5 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-accordion {
     box-sizing: border-box;
@@ -10,7 +12,7 @@
     background: var(--surface);
   }
 
-  .chayns-accordion--wrapped {
+  .chayns-accordion--wrapped:not(.chayns-accordion--grouped) {
     overflow: hidden;
     border: 1px solid var(--border);
     border-radius: 10px;

package/dist/badge.css

@@ -10,6 +10,13 @@
     font-size: var(--fs-caption);
     font-weight: 500;
     line-height: 1.2;
+    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-badge--md {
@@ -31,16 +38,34 @@
   .chayns-badge--success {
     /* stylelint-disable-next-line custom-property-pattern */
     background: var(--success-bg);
-    color: var(--success);
+    color: var(--on-success);
   }
 
   .chayns-badge--warning {
     background: var(--warning-bg);
-    color: var(--warning);
+    color: var(--on-warning);
   }
 
   .chayns-badge--danger {
     background: var(--danger-bg);
-    color: var(--danger);
+    color: var(--on-danger);
+  }
+
+  @media (hover: hover) {
+    .chayns-badge:hover {
+      transform: translateY(-2px);
+      filter: saturate(1.18);
+      box-shadow: 0 5px 12px -5px rgb(16 40 46 / 30%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-badge {
+      transition: none;
+    }
+
+    .chayns-badge:hover {
+      transform: none;
+    }
   }
 }

package/dist/banner.css

@@ -1,3 +1,5 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-banner {
     box-sizing: border-box;

package/dist/breadcrumb.css

@@ -0,0 +1,63 @@
+@import url('./button.css');
+
+@layer chayns.components {
+  .chayns-breadcrumb {
+    min-inline-size: 0;
+    overflow-x: auto;
+  }
+
+  .chayns-breadcrumb__list {
+    display: flex;
+    align-items: center;
+    gap: var(--k9);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--fs-body);
+  }
+
+  .chayns-breadcrumb__item {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: var(--k9);
+  }
+
+  .chayns-breadcrumb__link,
+  .chayns-breadcrumb__current {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--k6);
+    min-block-size: max(24px, var(--k24));
+  }
+
+  .chayns-breadcrumb__link {
+    color: var(--text-2);
+    text-decoration: none;
+  }
+
+  .chayns-breadcrumb__current {
+    color: var(--text);
+    font-weight: 500;
+  }
+
+  .chayns-breadcrumb__separator {
+    color: var(--text-2);
+    font-size: var(--icon);
+  }
+
+  .chayns-breadcrumb__link:hover {
+    text-decoration: underline;
+  }
+
+  @media (width <= 640px) {
+    .chayns-breadcrumb__list,
+    .chayns-breadcrumb__item {
+      gap: var(--k6);
+    }
+  }
+
+  .chayns-breadcrumb__link:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+}

package/dist/button.css

@@ -24,6 +24,10 @@
   }
 
   .chayns-button {
+    transition:
+      transform 0.14s ease,
+      box-shadow 0.18s ease,
+      filter 0.18s ease;
     gap: var(--sp-2);
     padding-block: var(--btn-py);
     padding-inline: var(--btn-px);
@@ -61,33 +65,7 @@
 
   :where(.chayns-button--danger, .chayns-icon-button--danger) {
     background: var(--danger-bg);
-    color: var(--danger);
-  }
-
-  :where(.chayns-button, .chayns-icon-button):active:not(:disabled) {
-    transform: scale(0.96);
-  }
-
-  :where(.chayns-icon-button):active:not(:disabled) {
-    transform: scale(0.96);
-  }
-
-  :where(.chayns-button--primary, .chayns-icon-button--primary):active:not(:disabled) {
-    background: var(--accent-active);
-  }
-
-  :where(.chayns-button--outline, .chayns-icon-button--outline):active:not(:disabled) {
-    background: var(--accent);
-    color: var(--on-accent);
-  }
-
-  :where(.chayns-button--ghost, .chayns-icon-button--ghost):active:not(:disabled) {
-    background: var(--surface-alt);
-    color: var(--accent);
-  }
-
-  :where(.chayns-button--danger, .chayns-icon-button--danger):active:not(:disabled) {
-    background: var(--danger-bg-hover);
+    color: var(--on-danger);
   }
 
   :where(.chayns-button, .chayns-icon-button):disabled {
@@ -95,6 +73,7 @@
     cursor: not-allowed;
     box-shadow: none;
     transform: none;
+    filter: none;
   }
 
   :where(
@@ -116,6 +95,7 @@
   }
 
   .chayns-button-icon {
+    pointer-events: none;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -139,17 +119,46 @@
     animation: chayns-button-spin 0.8s linear infinite;
   }
 
-  :where(.chayns-button, .chayns-icon-button):active:not(:disabled)
+  :where(
+      .chayns-button,
+      .chayns-icon-button,
+      .chayns-split-button__trigger,
+      .chayns-stepper__button,
+      .chayns-pagination__arrow,
+      .chayns-segmented-control__segment,
+      .chayns-popup-list__item,
+      .chayns-combo-box__trigger,
+      .chayns-banner__close,
+      .chayns-breadcrumb__link,
+      .chayns-accordion__header
+    ):active:not(:disabled)
     .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
     display: none;
   }
 
-  :where(.chayns-button, .chayns-icon-button):active:not(:disabled)
+  :where(
+      .chayns-button,
+      .chayns-icon-button,
+      .chayns-split-button__trigger,
+      .chayns-stepper__button,
+      .chayns-pagination__arrow,
+      .chayns-segmented-control__segment,
+      .chayns-popup-list__item,
+      .chayns-combo-box__trigger,
+      .chayns-banner__close,
+      .chayns-breadcrumb__link,
+      .chayns-accordion__header
+    ):active:not(:disabled)
     .chayns-button-icon__weight--active {
     display: inline-flex;
   }
 
   @media (hover: hover) {
+    .chayns-button:hover:not(:disabled) {
+      filter: brightness(1.06);
+      transform: translateY(-1px);
+    }
+
     :where(.chayns-button--primary, .chayns-icon-button--primary):hover:not(:disabled) {
       background: var(--accent-hover);
       box-shadow: var(--shadow-btn-hover);
@@ -173,41 +182,100 @@
       transform: translateY(-1px);
     }
 
-    :where(.chayns-button, .chayns-icon-button):hover:not(:disabled)
+    .chayns-icon-button:hover:not(:disabled) {
+      transform: translateY(-2px);
+      box-shadow: 0 7px 16px -6px rgb(var(--accent-rgb), 0.55);
+    }
+
+    :where(
+        .chayns-button,
+        .chayns-icon-button,
+        .chayns-split-button__trigger,
+        .chayns-stepper__button,
+        .chayns-pagination__arrow,
+        .chayns-segmented-control__segment,
+        .chayns-popup-list__item,
+        .chayns-combo-box__trigger,
+        .chayns-banner__close,
+        .chayns-breadcrumb__link,
+        .chayns-accordion__header
+      ):hover:not(:disabled)
       .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
       display: none;
     }
 
-    :where(.chayns-button, .chayns-icon-button):hover:not(:disabled)
+    :where(
+        .chayns-button,
+        .chayns-icon-button,
+        .chayns-split-button__trigger,
+        .chayns-stepper__button,
+        .chayns-pagination__arrow,
+        .chayns-segmented-control__segment,
+        .chayns-popup-list__item,
+        .chayns-combo-box__trigger,
+        .chayns-banner__close,
+        .chayns-breadcrumb__link,
+        .chayns-accordion__header
+      ):hover:not(:disabled)
       .chayns-button-icon__weight--active {
       display: inline-flex;
     }
   }
 
-  :where(.chayns-button, .chayns-icon-button):focus-visible {
+  :is(.chayns-button, .chayns-icon-button):active:not(:disabled) {
+    transform: translateY(0) scale(0.97);
+  }
+
+  .chayns-icon-button:active:not(:disabled) {
+    transform: translateY(0) scale(0.9);
+  }
+
+  :where(.chayns-button--primary, .chayns-icon-button--primary):active:not(:disabled) {
+    background: var(--accent-active);
+  }
+
+  :where(.chayns-button--outline, .chayns-icon-button--outline):active:not(:disabled) {
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  :where(.chayns-button--ghost, .chayns-icon-button--ghost):active:not(:disabled) {
+    background: var(--surface-alt);
+    color: var(--accent);
+  }
+
+  :where(.chayns-button--danger, .chayns-icon-button--danger):active:not(:disabled) {
+    background: var(--danger-bg-hover);
+  }
+
+  :is(.chayns-button, .chayns-icon-button):focus-visible:not(:disabled) {
     outline: none;
     box-shadow: 0 0 0 var(--focus-ring-size)
       rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
   }
 
-  :where(.chayns-button--primary, .chayns-icon-button--primary):focus-visible {
+  :is(.chayns-button--primary, .chayns-icon-button--primary):focus-visible:not(:disabled) {
     box-shadow:
       0 0 0 var(--focus-ring-size) rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong)),
       var(--shadow-btn);
   }
 
   @media (forced-colors: active) {
-    :where(.chayns-button, .chayns-icon-button):focus-visible {
+    :is(.chayns-button, .chayns-icon-button):focus-visible:not(:disabled) {
       outline: var(--focus-ring-size) solid ButtonText;
       outline-offset: 1px;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    :where(.chayns-button, .chayns-icon-button) {
+    :is(.chayns-button, .chayns-icon-button) {
       transition: none;
     }
 
+    :is(.chayns-button, .chayns-icon-button):is(:hover, :active):not(:disabled) {
+      transform: none;
+    }
+
     :where(.chayns-button--loading, .chayns-icon-button--loading) .chayns-button-icon {
       animation: none;
     }

package/dist/card.css

@@ -1,3 +1,5 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-card {
     box-sizing: border-box;
@@ -6,6 +8,9 @@
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 16px;
+    transition:
+      transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
+      box-shadow 0.22s ease;
   }
 
   .chayns-card__header {
@@ -26,6 +31,11 @@
     place-items: center;
     border-radius: 8px;
     background: var(--surface-alt);
+    color: var(--accent);
+    transition:
+      transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
+      background 0.22s ease,
+      color 0.22s ease;
   }
 
   .chayns-card__header-content {
@@ -35,6 +45,35 @@
   @media (hover: hover) {
     .chayns-card:hover {
       box-shadow: var(--shadow-hover);
+      transform: translateY(-4px);
+    }
+
+    .chayns-card:hover .chayns-card__header-icon {
+      transform: scale(1.08);
+      background: var(--accent);
+      color: var(--on-accent);
+    }
+
+    .chayns-card:hover
+      .chayns-card__header-icon
+      .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
+      display: none;
+    }
+
+    .chayns-card:hover .chayns-card__header-icon .chayns-button-icon__weight--active {
+      display: inline-flex;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-card,
+    .chayns-card__header-icon {
+      transition: none;
+    }
+
+    .chayns-card:hover,
+    .chayns-card:hover .chayns-card__header-icon {
+      transform: none;
     }
   }
 }

package/dist/checkbox.css

@@ -35,7 +35,7 @@
     transition: all 0.15s ease;
   }
 
-  .chayns-checkbox__control > i {
+  .chayns-checkbox__control > :is(i, svg) {
     opacity: 0;
     transform: scale(0.4);
     transition:
@@ -48,7 +48,7 @@
     background: var(--accent);
   }
 
-  .chayns-checkbox__input:checked + .chayns-checkbox__control > i {
+  .chayns-checkbox__input:checked + .chayns-checkbox__control > :is(i, svg) {
     opacity: 1;
     transform: scale(1);
   }
@@ -87,7 +87,7 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .chayns-checkbox__control > i {
+    .chayns-checkbox__control > :is(i, svg) {
       transition: none;
     }
   }

package/dist/combo-box.css

@@ -1,3 +1,5 @@
+@import url('./button.css');
+
 @layer chayns.components {
   .chayns-combo-box {
     position: relative;
@@ -72,10 +74,9 @@
   }
 
   .chayns-combo-box__popup {
-    position: absolute;
-    inset-block-start: calc(100% + var(--k4));
-    inset-inline: 0;
+    position: fixed;
     z-index: var(--z-popover);
+    box-sizing: border-box;
     max-block-size: min(320px, 50vh);
     overflow: auto;
     padding: var(--k6);
@@ -83,6 +84,17 @@
     border-radius: 12px;
     background: var(--surface);
     box-shadow: var(--shadow-pop);
+    opacity: 1;
+    transform: translateY(0);
+    transform-origin: top center;
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease;
+  }
+
+  .chayns-combo-box__popup[data-state='closed'] {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--k4)));
   }
 
   .chayns-combo-box__option {
@@ -147,7 +159,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .chayns-combo-box__trigger,
-    .chayns-combo-box__chevron {
+    .chayns-combo-box__chevron,
+    .chayns-combo-box__popup {
       transition: none;
     }
   }

package/dist/components/accordion/Accordion.d.ts

@@ -1,11 +1,10 @@
 import type { AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionPartProps, AccordionProps } from './Accordion.types.js';
-declare function HeadContent({ className, subtitle, title }: AccordionHeadContentProps): import("react").JSX.Element;
 declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Content: import("react").ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Head: import("react").ForwardRefExoticComponent<Omit<AccordionHeadProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>> & {
-        Content: typeof HeadContent;
-        Leading: (props: AccordionPartProps) => import("react").JSX.Element;
-        Trailing: (props: AccordionPartProps) => import("react").JSX.Element;
+        Content: import("react").ForwardRefExoticComponent<Omit<AccordionHeadContentProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Leading: import("react").ForwardRefExoticComponent<Omit<AccordionPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        Trailing: import("react").ForwardRefExoticComponent<Omit<AccordionPartProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
     };
 };
 export default Accordion;

package/dist/components/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAC;AAgB9B,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,yBAAyB,+BAS7E;AA8JD,QAAA,MAAM,SAAS;;;;yBA1Ka,kBAAkB;0BACjB,kBAAkB;;CAgL7C,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAC;AAuM9B,QAAA,MAAM,SAAS;;;;;;;CAOb,CAAC;AASH,eAAe,SAAS,CAAC"}

package/dist/components/accordion/Accordion.js

@@ -1,26 +1,29 @@
+import ButtonIcon from "../button/button-icon/ButtonIcon.js";
 import { AccordionDepthContext, AccordionGroupContext, AccordionItemContext, useAccordionItemContext } from "./AccordionContext.js";
 import { Children, createElement, forwardRef, isValidElement, useContext, useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion/Accordion.tsx
-function Part({ children, className, name }) {
-	useAccordionItemContext(name);
-	return /* @__PURE__ */ jsx("span", {
-		className: [`chayns-accordion__${name.toLowerCase()}`, className].filter(Boolean).join(" "),
-		children
+function createHeadPart(name) {
+	const HeadPart = forwardRef(function HeadPart({ children, className, ...spanProps }, ref) {
+		useAccordionItemContext(`Head.${name}`);
+		return /* @__PURE__ */ jsx("span", {
+			...spanProps,
+			className: [`chayns-accordion__${name.toLowerCase()}`, className].filter(Boolean).join(" "),
+			ref,
+			children
+		});
 	});
+	HeadPart.displayName = `Accordion.Head.${name}`;
+	return HeadPart;
 }
-var HeadLeading = (props) => /* @__PURE__ */ jsx(Part, {
-	...props,
-	name: "leading"
-});
-var HeadTrailing = (props) => /* @__PURE__ */ jsx(Part, {
-	...props,
-	name: "trailing"
-});
-function HeadContent({ className, subtitle, title }) {
+var HeadLeading = createHeadPart("Leading");
+var HeadTrailing = createHeadPart("Trailing");
+var HeadContent = forwardRef(function HeadContent({ className, subtitle, title, ...spanProps }, ref) {
 	useAccordionItemContext("Head.Content");
 	return /* @__PURE__ */ jsxs("span", {
+		...spanProps,
 		className: ["chayns-accordion__head-content", className].filter(Boolean).join(" "),
+		ref,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "chayns-accordion__title",
 			children: title
@@ -29,7 +32,7 @@ function HeadContent({ className, subtitle, title }) {
 			children: subtitle
 		}) : null]
 	});
-}
+});
 var AccordionHead = forwardRef(function AccordionHead({ children, className, onClick, ...buttonProps }, ref) {
 	const { disabled, headerId, isOpen, onToggle, panelId } = useAccordionItemContext("Head");
 	function handleClick(event) {
@@ -46,9 +49,10 @@ var AccordionHead = forwardRef(function AccordionHead({ children, className, onC
 		onClick: handleClick,
 		ref,
 		type: "button",
-		children: [/* @__PURE__ */ jsx("i", {
+		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: "chayns-accordion__chevron far fa-chevron-right"
+			className: "chayns-accordion__chevron",
+			children: /* @__PURE__ */ jsx(ButtonIcon, { icon: "fa-chevron-right" })
 		}), children]
 	});
 });
@@ -72,9 +76,12 @@ var AccordionContent = forwardRef(function AccordionContent({ children, classNam
 			className: "chayns-accordion__inner",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "chayns-accordion__content",
-				children: /* @__PURE__ */ jsx(AccordionDepthContext.Provider, {
-					value: depth + 1,
-					children
+				children: /* @__PURE__ */ jsx(AccordionGroupContext.Provider, {
+					value: null,
+					children: /* @__PURE__ */ jsx(AccordionDepthContext.Provider, {
+						value: depth + 1,
+						children
+					})
 				})
 			})
 		})
@@ -88,7 +95,7 @@ var AccordionRoot = forwardRef(function Accordion({ appearance = "default", chil
 	const headerId = `${baseId}-header`;
 	const panelId = `${baseId}-panel`;
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-	const isGrouped = group !== null && depth === 0;
+	const isGrouped = group !== null;
 	const isOpen = isGrouped ? group.isOpen(baseId) : open ?? uncontrolledOpen;
 	const wrapped = depth > 0;
 	const isList = appearance === "list";
@@ -101,13 +108,14 @@ var AccordionRoot = forwardRef(function Accordion({ appearance = "default", chil
 		if (open === void 0) setUncontrolledOpen(nextOpen);
 		onOpenChange?.(nextOpen);
 	}
-	const variantClassName = isGrouped ? "chayns-accordion--grouped" : wrapped ? "chayns-accordion--wrapped" : "chayns-accordion--standalone";
 	const directChildren = Children.toArray(children);
 	const compoundHead = directChildren.find((child) => isValidElement(child) && child.type === AccordionHead);
 	const hasCompoundLeading = isValidElement(compoundHead) && Children.toArray(compoundHead.props.children).some((child) => isValidElement(child) && child.type === HeadLeading);
 	const rootClassName = [
 		"chayns-accordion",
-		variantClassName,
+		isGrouped ? "chayns-accordion--grouped" : null,
+		wrapped ? "chayns-accordion--wrapped" : null,
+		!isGrouped && !wrapped ? "chayns-accordion--standalone" : null,
 		isOpen ? "chayns-accordion--open" : null,
 		disabled ? "chayns-accordion--disabled" : null,
 		leading || hasCompoundLeading ? "chayns-accordion--has-leading" : null,
@@ -146,6 +154,12 @@ var Accordion = Object.assign(AccordionRoot, {
 		Trailing: HeadTrailing
 	})
 });
+Object.assign(HeadLeading, { displayName: "Accordion.Head.Leading" });
+Object.assign(HeadTrailing, { displayName: "Accordion.Head.Trailing" });
+Object.assign(HeadContent, { displayName: "Accordion.Head.Content" });
+AccordionHead.displayName = "Accordion.Head";
+AccordionContent.displayName = "Accordion.Content";
+AccordionRoot.displayName = "Accordion";
 //#endregion
 export { Accordion as default };