aplance-ui 1.3.0 → 1.5.0

package/registry/components/ui/accordion/accordion.tsx

@@ -9,6 +9,7 @@ import {
 import clsx from "clsx";
 import { IconChevronDown } from "@tabler/icons-react";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { Button } from "../button/button";
 import s from "./accordion.module.css";
 
 export type AccordionVariant = "bordered" | "minimal";
@@ -17,12 +18,23 @@ export type AccordionMode = "single" | "multiple";
 
 export type AccordionSize = "sm" | "md" | "lg";
 
+/**
+ * How an item opens. icon: the whole heading, with a chevron in it. button:
+ * the heading too, with a bordered chevron button at its end, as a table row
+ * ends in its menu button.
+ */
+export type AccordionToggle = "icon" | "button";
+
 export type AccordionItem = {
   id: string;
   title: ReactNode;
   content: ReactNode;
   disabled?: boolean;
   defaultOpen?: boolean;
+  /** Controls beside the heading, outside the button that opens it: a row's menu. */
+  actions?: ReactNode;
+  /** This item's own class, beside `itemClassName`: one marked apart from the rest. */
+  className?: string;
 };
 
 type AccordionBaseProps = {
@@ -35,6 +47,7 @@ type AccordionBaseProps = {
   size?: AccordionSize;
   icon?: ReactNode;
   iconRotation?: number;
+  toggle?: AccordionToggle;
 };
 
 type AccordionSingleProps = {
@@ -80,6 +93,7 @@ type ItemViewProps = {
   size: AccordionSize;
   variant: AccordionVariant;
   icon?: ReactNode;
+  toggle: AccordionToggle;
   itemClassName?: string;
   triggerClassName?: string;
   contentClassName?: string;
@@ -114,6 +128,7 @@ const AccordionItemView = ({
   size,
   variant,
   icon,
+  toggle,
   itemClassName,
   triggerClassName,
   contentClassName,
@@ -138,6 +153,13 @@ const AccordionItemView = ({
 
   useResizeObserver(contentRef, updateHeight, { enabled: isOpen });
 
+  const chevron = icon ?? (
+    <IconChevronDown size={size === "sm" ? 16 : size === "lg" ? 20 : 18} />
+  );
+  // With actions or a toggle button, the heading is a row: the button that
+  // opens the item, then the controls beside it, outside that button.
+  const row = toggle === "button" || item.actions !== undefined;
+
   return (
     <section
       className={clsx(
@@ -146,42 +168,90 @@ const AccordionItemView = ({
         isOpen && s.item_open,
         item.disabled && s.item_disabled,
         itemClassName,
+        item.className,
       )}
       data-state={isOpen ? "open" : "closed"}
     >
-      <button
-        id={triggerId}
-        type="button"
-        disabled={item.disabled}
-        aria-expanded={isOpen}
-        aria-controls={panelId}
-        onClick={onToggle}
-        className={clsx(
-          s.trigger,
-          s[`trigger_${size}`],
-          s[`trigger_${variant}`],
-          isOpen && s.trigger_open,
-          triggerClassName,
-        )}
-      >
-        <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
-        <span
-          className={clsx(s.icon, isOpen && s.icon_open)}
-          aria-hidden="true"
+      {row ? (
+        <div
+          className={clsx(
+            s.header,
+            s[`trigger_${size}`],
+            s[`header_${variant}`],
+            isOpen && s.trigger_open,
+          )}
         >
-          {icon ?? (
-            <IconChevronDown
-              size={size === "sm" ? 16 : size === "lg" ? 20 : 18}
-            />
+          <button
+            id={triggerId}
+            type="button"
+            disabled={item.disabled}
+            aria-expanded={isOpen}
+            aria-controls={panelId}
+            onClick={onToggle}
+            className={clsx(s.trigger, s.header_trigger, triggerClassName)}
+          >
+            <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+            {toggle === "icon" ? (
+              <span
+                className={clsx(s.icon, isOpen && s.icon_open)}
+                aria-hidden="true"
+              >
+                {chevron}
+              </span>
+            ) : null}
+          </button>
+          {item.actions !== undefined ? (
+            <div className={s.actions}>{item.actions}</div>
+          ) : null}
+          {toggle === "button" ? (
+            <Button
+              type="button"
+              variant="bordered"
+              size="sm"
+              layout="box"
+              aria-label={isOpen ? "Collapse section" : "Expand section"}
+              aria-expanded={isOpen}
+              aria-controls={panelId}
+              disabled={item.disabled}
+              onClick={onToggle}
+              className={clsx(s.toggle, isOpen && s.toggle_open)}
+            >
+              {chevron}
+            </Button>
+          ) : null}
+        </div>
+      ) : (
+        <button
+          id={triggerId}
+          type="button"
+          disabled={item.disabled}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={onToggle}
+          className={clsx(
+            s.trigger,
+            s[`trigger_${size}`],
+            s[`trigger_${variant}`],
+            isOpen && s.trigger_open,
+            triggerClassName,
           )}
-        </span>
-      </button>
+        >
+          <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+          <span
+            className={clsx(s.icon, isOpen && s.icon_open)}
+            aria-hidden="true"
+          >
+            {chevron}
+          </span>
+        </button>
+      )}
 
       <div
         id={panelId}
         role="region"
         aria-labelledby={triggerId}
         aria-hidden={!isOpen}
+        inert={!isOpen}
         className={clsx(s.panel, isOpen && s.panel_open)}
         style={{ height: `${panelHeight}px` }}
       >
@@ -212,6 +282,7 @@ export const Accordion = ({
   size = "md",
   icon,
   iconRotation = 180,
+  toggle = "icon",
   ...variantProps
 }: AccordionProps) => {
   const uid = useId();
@@ -317,6 +388,7 @@ export const Accordion = ({
           size={size}
           variant={variant}
           icon={icon}
+          toggle={toggle}
           itemClassName={itemClassName}
           triggerClassName={triggerClassName}
           contentClassName={contentClassName}

package/registry/components/ui/avatar/avatar.tsx

@@ -17,10 +17,10 @@ const COLORS = [
   { bg: "oklch(0.92 0.06 85)", fg: "oklch(0.4 0.15 85)" },
   { bg: "oklch(0.92 0.05 25)", fg: "oklch(0.4 0.15 25)" },
   { bg: "oklch(0.92 0.05 330)", fg: "oklch(0.4 0.15 330)" },
-];
+] as const;
 
 export function Avatar({ name, size = "md", className }: AvatarProps) {
-  const color = COLORS[hashName(name) % COLORS.length];
+  const color = COLORS[hashName(name) % COLORS.length] ?? COLORS[0];
   const initials = getInitials(name) || "?";
   return (
     <div

package/registry/components/ui/breadcrumbs/breadcrumbs.module.css

@@ -9,8 +9,7 @@
   --breadcrumbs-color-current: var(--color-foreground);
   --breadcrumbs-color-separator: var(--color-muted-foreground);
   --breadcrumbs-font-size: var(--font-size-sm);
-  --breadcrumbs-gap: var(--spacing-3);
-  --breadcrumbs-padding: var(--spacing-2) var(--spacing-3);
+  --breadcrumbs-gap: var(--spacing-5);
 
   display: block;
   width: 100%;
@@ -22,8 +21,7 @@
 
 .size_sm {
   --breadcrumbs-font-size: var(--font-size-xs);
-  --breadcrumbs-gap: var(--spacing-2);
-  --breadcrumbs-padding: var(--spacing-1) var(--spacing-2);
+  --breadcrumbs-gap: var(--spacing-4);
 }
 
 /* ─── List ───────────────────────────────────────────────────────────────── */
@@ -45,15 +43,18 @@
   min-width: 0;
 }
 
-/* ─── Crumb (link / button / span) ───────────────────────────────────────── */
+/* ─── Crumb (link / button / span) ───────────────────────────────────────────
+   A text link, not a button: no padding or hover fill, so every crumb sits on
+   the same edge as the content under it. Hover darkens the text.
+   ─────────────────────────────────────────────────────────────────────────── */
 
 .crumb {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
-  padding: var(--breadcrumbs-padding);
-  border-radius: var(--radius-md);
+  padding: 0;
+  border-radius: var(--radius-sm);
   color: inherit;
   background-color: transparent;
   font: inherit;
@@ -62,7 +63,7 @@
   white-space: nowrap;
   cursor: default;
   transition: var(--transition-fast);
-  transition-property: background-color, color;
+  transition-property: color;
 }
 
 .crumb_link {
@@ -71,7 +72,6 @@
 
   &:hover {
     color: var(--breadcrumbs-color-hover);
-    background-color: var(--color-muted);
   }
 
   &:focus-visible {

package/registry/components/ui/button/button.module.css

@@ -1,4 +1,4 @@
-.base {
+.base {
   --button-fg: var(--color-foreground);
   --button-placeholder: var(--button-fg);
   --button-icon: var(--button-fg);
@@ -11,7 +11,9 @@
   min-height: var(--spacing-11);
   border-radius: var(--radius-md);
   display: flex;
-  min-width: fit-content;
+  /* Never narrower than its label, unless the host sets the variable (a
+     full-width field trigger sets 0, so its label truncates). */
+  min-width: var(--button-min-width, fit-content);
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-4);
@@ -24,7 +26,7 @@
   outline: none;
   border: none;
 
-  line-height: 1.125;
+  line-height: 1.125;
 
   svg {
     cursor: pointer;
@@ -36,12 +38,16 @@
     font-size: var(--font-size-xs);
   }
 
-  &.box {
+  /* An icon button: as wide as it is high, its own size and never its
+     content's (the base keeps a button at least as wide as its content), so
+     a round one stays round; the icon sits in its middle. */
+  &.box {
     width: var(--spacing-11);
+    min-width: 0;
     min-height: unset;
     justify-content: center;
     height: var(--spacing-11);
-    padding: var(--spacing-2);
+    padding: 0;
 
     &.sm {
       width: var(--spacing-10);
@@ -183,6 +189,38 @@
   }
 }
 
+/* Same pattern - danger is the soft red a Badge's error tone uses, for an
+   action that cannot be taken back: deleting, purging, removing. It reads in
+   both themes from the error tokens alone. */
+:is(.danger, .tone_danger) {
+  --button-fg: var(--color-error-foreground);
+  --button-placeholder: var(--color-error-foreground);
+  --button-icon: var(--color-error-foreground);
+}
+
+.danger {
+  background-color: var(--color-error-subtle);
+  border: 1px solid
+    color-mix(in oklch, var(--color-error-foreground) 24%, var(--color-border));
+  color: var(--button-fg);
+  box-shadow: var(--shadow-sm);
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: color-mix(
+      in oklch,
+      var(--color-error-foreground) 14%,
+      var(--color-error-subtle)
+    );
+  }
+}
+
 /* Same pattern - ghost is transparent background; tone alias lets composing
    components inherit these vars without applying the full ghost layout rules. */
 :is(.ghost, .tone_ghost) {

package/registry/components/ui/button/button.tsx

@@ -12,7 +12,8 @@ export type ButtonVariant =
   | "secondary"
   | "bordered"
   | "border_b"
-  | "ghost";
+  | "ghost"
+  | "danger";
 export type ButtonSize = "default" | "sm";
 export type ButtonLayout = "default" | "box";
 export type AsProp = "button" | "div" | "span" | "link";

package/registry/components/ui/copy-button/copy-button.module.css

@@ -1,6 +1,8 @@
+/* A fixed control: long text beside it, as in a table cell, never squeezes it. */
 .base {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .icon {

package/registry/components/ui/copy-button/copy-button.tsx

@@ -18,6 +18,9 @@ export type CopyButtonProps = {
   layout?: ButtonLayout;
   preview?: CopyPreview;
   previewMaxLength?: number;
+  /** Called with the value after a successful copy (e.g. to toast, or clear a
+   *  one-time reveal). Not called if the copy fails. */
+  onCopy?: (value: string) => void;
 };
 
 const maskToken = (raw: string): string => {
@@ -44,6 +47,7 @@ export function CopyButton({
   layout,
   preview = "none",
   previewMaxLength = 24,
+  onCopy,
 }: CopyButtonProps) {
   const [copied, setCopied] = useState(false);
   const timeoutRef = useRef<number | null>(null);
@@ -82,6 +86,7 @@ export function CopyButton({
     const success = await copyWithFallback(value);
     if (!success) return;
 
+    onCopy?.(value);
     setCopied(true);
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);