@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/source-badge.d.ts

@@ -3,21 +3,20 @@ import { SourceBadgeKnobStyle } from "./knob-contracts/source-badge-knobs.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/source-badge.d.ts
-type SourceBadgeProps = Omit<ComponentProps<"a">, "href" | "style"> & {
+export type SourceBadgeProps = Omit<ComponentProps<"a">, "href" | "style"> & {
   faviconSrc?: string | false;
   href: string;
   style?: CSSProperties & SourceBadgeKnobStyle & BadgeKnobStyle;
 };
-declare function sourceHostname(href: string): string;
-declare function sourceFaviconHref(href: string): string | undefined;
-type SourceFaviconProps = Omit<ComponentProps<typeof Avatar>, "children" | "style"> & {
+export declare function sourceHostname(href: string): string;
+export declare function sourceFaviconHref(href: string): string | undefined;
+export type SourceFaviconProps = Omit<ComponentProps<typeof Avatar>, "children" | "style"> & {
   faviconSrc?: string | false;
   href: string;
   imageProps?: Omit<ComponentProps<typeof AvatarImage>, "src">;
   fallbackProps?: ComponentProps<typeof AvatarFallback>;
   style?: CSSProperties & SourceBadgeKnobStyle;
 };
-declare function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }: SourceFaviconProps): import("react").JSX.Element;
-declare function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }: SourceBadgeProps): import("react").JSX.Element;
-//#endregion
-export { SourceBadge, SourceBadgeProps, SourceFavicon, SourceFaviconProps, sourceFaviconHref, sourceHostname };
+export declare function SourceFavicon({ faviconSrc, href, imageProps, fallbackProps, className, ...props }: SourceFaviconProps): import("react").JSX.Element;
+export declare function SourceBadge({ faviconSrc, href, children, className, rel, target, ...props }: SourceBadgeProps): import("react").JSX.Element;
+//#endregion

package/dist/styles/index.css

@@ -26,17 +26,18 @@
 @import "./recipes/chat-message.css";
 @import "./recipes/chat-composer.css";
 @import "./chat-composer-editor.css";
+@import "./recipes/spinner.css";
 @import "./recipes/chat-composer-attachment.css";
 @import "./recipes/choice.css";
 @import "./code.css";
 @import "./recipes/code.css";
-@import "./recipes/code-block-editor.css";
 @import "./recipes/code-diff.css";
 @import "./recipes/sidebar.css";
 @import "./recipes/sidebar-menu.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
+@import "./recipes/empty.css";
 @import "./recipes/context.css";
 @import "./recipes/popup-drawer.css";
 @import "./recipes/dockable-panel.css";
@@ -46,7 +47,6 @@
 @import "./recipes/dynamic-notification.css";
 @import "./recipes/dynamic-notification-input.css";
 @import "./recipes/dynamic-notification-motion.css";
-@import "./recipes/empty.css";
 @import "./recipes/environment-variables.css";
 @import "./recipes/resizable.css";
 @import "./recipes/gradient-editor.css";
@@ -59,11 +59,11 @@
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
 @import "./recipes/morphing-panel.css";
+@import "./recipes/page-layout.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
 @import "./recipes/rich-tooltip.css";
 @import "./recipes/skeleton.css";
-@import "./recipes/spinner.css";
 @import "./recipes/stepper.css";
 @import "./recipes/switch.css";
 @import "./recipes/table.css";
@@ -79,5 +79,3 @@
 @import "./type-scale.css";
 @import "./recipes/user-ask.css";
 @import "./recipes/user-ask-details.css";
-@import "./skin-theme.css";
-@import "./skin.css";

package/dist/styles/recipes/accordion.css

@@ -1,12 +1,13 @@
 @layer components {
   :where([data-control-family="accordion"][data-slot="root"]) {
     --cui-accordion-item-border-color: var(--border);
+    --cui-accordion-item-border-width: 1px;
     --cui-accordion-trigger-foreground: var(--foreground);
     --cui-accordion-trigger-hover-foreground: oklch(from var(--foreground) l c h / 0.8);
     --cui-accordion-icon-foreground: var(--muted-foreground);
   }
   :where([data-control-family="accordion"][data-slot="item"]) {
-    border-block-end: 1px solid var(--cui-accordion-item-border-color);
+    border-block-end: var(--cui-accordion-item-border-width) solid var(--cui-accordion-item-border-color);
   }
 
   :where([data-control-family="accordion"][data-slot="item"]:last-child) {
@@ -19,7 +20,6 @@
     color: var(--cui-accordion-trigger-foreground);
     font-size: var(--text-body);
     outline: none;
-    transition: color var(--duration-fast) var(--ease-standard);
     text-align: left;
     font-weight: var(--font-weight-medium);
   }
@@ -68,6 +68,12 @@
   initial-value: transparent;
 }
 
+@property --cui-accordion-item-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-accordion-trigger-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/action-bar.css

@@ -1,19 +1,54 @@
 @layer components {
   :where([data-control-family="action-bar"][data-slot="root"]) {
+    --cui-action-bar-hidden-opacity: 0;
+    --cui-action-bar-visible-opacity: 1;
     margin-block-start: calc(var(--spacing) * 1);
     min-block-size: calc(var(--spacing) * 8);
     gap: calc(var(--spacing) * 1);
-    opacity: 0;
-    transition: opacity var(--duration-base) var(--ease-standard);
+    opacity: var(--cui-action-bar-visible-opacity);
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="chat-layout"][data-slot="turn"] [data-control-family="action-bar"][data-slot="root"]) {
+      opacity: var(--cui-action-bar-hidden-opacity);
+    }
+
     :where([data-control-family="chat-layout"][data-slot="turn"]:hover [data-control-family="action-bar"][data-slot="root"]) {
-      opacity: 1;
+      opacity: var(--cui-action-bar-visible-opacity);
     }
   }
 
   :where([data-control-family="chat-layout"][data-slot="turn"]:focus-within [data-control-family="action-bar"][data-slot="root"]) {
-    opacity: 1;
+    opacity: var(--cui-action-bar-visible-opacity);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="action-bar"][data-slot="root"] [data-control-family="button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+}
+
+@property --cui-action-bar-hidden-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --cui-action-bar-visible-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
 }

package/dist/styles/recipes/activity.css

@@ -1,10 +1,11 @@
 @layer components {
   :where([data-control-family="activity"][data-slot="root"]) {
-    margin-block: calc(var(--spacing) * 1);
     --cui-activity-row-foreground: var(--muted-foreground);
     --cui-activity-trigger-hover-background: oklch(from var(--muted) l c h / 0.45);
     --cui-activity-trigger-radius: var(--radius-control);
     --cui-activity-code-background: oklch(from var(--muted) l c h / 0.5);
+    --cui-activity-code-radius: var(--radius-control);
+    margin-block: calc(var(--spacing) * 1);
     font-size: var(--text-body);
   }
 
@@ -36,6 +37,11 @@
     inline-size: calc(var(--spacing) * 3.5);
     block-size: calc(var(--spacing) * 3.5);
     color: oklch(from var(--muted-foreground) l c h / 0.75);
+    transition: rotate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="activity"][data-slot="trigger"][data-state="open"] [data-slot="chevron"]) {
+    rotate: 90deg;
   }
 
   :where([data-control-family="activity"][data-slot="icon"]) {
@@ -59,7 +65,7 @@
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="running"] [data-slot="icon"][data-status-icon] svg) {
-    animation: spin var(--duration-slow) linear infinite;
+    animation: activity-spin calc(var(--duration-slow) * 2) linear infinite;
   }
 
   :where([data-control-family="activity"][data-slot="root"][data-activity-state="error"] [data-slot="icon"]) {
@@ -99,9 +105,30 @@
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1.5);
     background: var(--cui-activity-code-background);
-    border-radius: var(--radius-control);
+    border-radius: var(--cui-activity-code-radius);
     font-size: var(--text-caption);
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="activity"][data-slot="trigger"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="activity"][data-slot="trigger"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+}
+
+@keyframes activity-spin {
+  to {
+    rotate: 360deg;
+  }
 }
 
 @property --cui-activity-row-foreground {
@@ -127,3 +154,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-activity-code-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/alert.css

@@ -4,34 +4,47 @@
     --cui-alert-background: var(--card);
     --cui-alert-border-color: var(--border);
     --cui-alert-shadow: none;
-    --_alert-foreground: var(--card-foreground);
-    --_alert-description-color: var(--muted-foreground);
-    row-gap: calc(var(--spacing) * 0.5);
-    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
-    border: 1px solid var(--cui-alert-border-color);
+    --cui-alert-foreground: var(--card-foreground);
+    --cui-alert-description-foreground: var(--muted-foreground);
+    --cui-alert-border-width: 1px;
+    --cui-alert-padding: calc(var(--spacing) * 3);
+    --cui-alert-padding-inline: calc(var(--spacing) * 4);
+    --cui-alert-gap: calc(var(--spacing) * 0.5);
+    --cui-alert-icon-gap: calc(var(--spacing) * 3);
+    --cui-alert-icon-size: calc(var(--spacing) * 4);
+    --cui-alert-font-size: var(--text-sm);
+    --cui-alert-title-font-weight: var(--font-weight-medium);
+    --cui-alert-description-gap: var(--spacing);
+    grid-template-columns: 0 minmax(0, 1fr);
+    row-gap: var(--cui-alert-gap);
+    padding: var(--cui-alert-padding) var(--cui-alert-padding-inline);
+    border: var(--cui-alert-border-width) solid var(--cui-alert-border-color);
     border-radius: var(--cui-alert-radius);
     background: var(--cui-alert-background);
     box-shadow: var(--cui-alert-shadow);
-    color: var(--_alert-foreground);
-    font-size: var(--text-sm);
+    color: var(--cui-alert-foreground);
+    font-size: var(--cui-alert-font-size);
     line-height: var(--text-sm--line-height);
+    overflow-wrap: anywhere;
   }
 
   :where([data-control-family="alert"][data-slot="root"][data-variant="destructive"]) {
-    --_alert-foreground: var(--destructive-text);
+    --cui-alert-foreground: var(--destructive-text);
     --cui-alert-border-color: oklch(from var(--destructive) l c h / 0.5);
-    --_alert-description-color: oklch(from var(--destructive-text) l c h / 0.9);
+    --cui-alert-description-foreground: oklch(from var(--destructive-text) l c h / 0.9);
   }
 
   :where([data-control-family="alert"][data-slot="root"]:has(> svg)) {
-    column-gap: calc(var(--spacing) * 3);
+    grid-template-columns: var(--cui-alert-icon-size) minmax(0, 1fr);
+    column-gap: var(--cui-alert-icon-gap);
   }
 
   :where([data-control-family="alert"][data-slot="description"]) {
-    gap: calc(var(--spacing) * 1);
-    color: var(--_alert-description-color);
-    font-size: var(--text-sm);
+    gap: var(--cui-alert-description-gap);
+    color: var(--cui-alert-description-foreground);
+    font-size: var(--cui-alert-font-size);
     line-height: var(--text-sm--line-height);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="alert"][data-slot="description"] p) {
@@ -39,14 +52,16 @@
   }
 
   :where([data-control-family="alert"][data-slot="title"]) {
-    min-block-size: calc(var(--spacing) * 4);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-alert-title-font-weight);
     letter-spacing: var(--tracking-tight);
+    text-wrap: balance;
   }
 
   :where([data-control-family="alert"][data-slot="root"] > svg) {
     color: currentcolor;
-    translate: 0 calc(var(--spacing) * 0.5);
+    inline-size: var(--cui-alert-icon-size);
+    block-size: var(--cui-alert-icon-size);
+    margin-block-start: max(0px, calc((1lh - var(--cui-alert-icon-size)) / 2));
   }
 }
 
@@ -73,3 +88,69 @@
   inherits: true;
   initial-value: none;
 }
+
+@property --cui-alert-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-alert-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-alert-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-padding {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-icon-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-icon-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-description-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-title-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 500;
+}

package/dist/styles/recipes/audio-visualizer.css

@@ -2,6 +2,7 @@
   :where([data-control-family="audio-visualizer"][data-variant]) {
     --cui-audio-visualizer-radius: var(--radius-control);
     --cui-audio-visualizer-bar-background: oklch(from var(--primary) l c h / 0.8);
+    --cui-audio-visualizer-bar-radius: var(--radius-control);
     --cui-audio-visualizer-line-fill: oklch(from var(--primary) l c h / 0.18);
     --cui-audio-visualizer-line-stroke: oklch(from var(--primary) l c h / 0.8);
   }
@@ -47,7 +48,7 @@
 
   :where([data-control-family="audio-visualizer"][data-slot="bar"]) {
     background: var(--cui-audio-visualizer-bar-background);
-    border-radius: var(--radius-control);
+    border-radius: var(--cui-audio-visualizer-bar-radius);
     opacity: var(--_audio-visualizer-level-opacity);
     transition:
       clip-path var(--duration-base) var(--ease-standard),
@@ -71,6 +72,12 @@
   initial-value: 0px;
 }
 
+@property --cui-audio-visualizer-bar-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-audio-visualizer-bar-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/avatar.css

@@ -1,5 +1,6 @@
 @layer components {
   :where([data-control-family="avatar"][data-slot="root"]) {
+    --cui-avatar-image-outline-color: oklch(from var(--foreground) l c h / 0.1);
     inline-size: calc(var(--spacing) * 9);
     block-size: calc(var(--spacing) * 9);
   }
@@ -14,12 +15,21 @@
     border-radius: var(--cui-avatar-radius);
   }
 
+  :where([data-control-family="avatar"][data-slot="root"])::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--cui-avatar-image-outline-color);
+  }
+
   :where([data-control-family="avatar"][data-slot="group"] > [data-control-family="avatar"]) {
     box-shadow: 0 0 0 2px var(--cui-avatar-group-ring-color);
   }
 
   :where([data-control-family="avatar"][data-slot="fallback"]) {
-    border-radius: 9999px;
+    border-radius: inherit;
     background: var(--cui-avatar-fallback-background);
     color: var(--cui-avatar-fallback-foreground);
     font-size: var(--text-caption);
@@ -50,3 +60,9 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-avatar-image-outline-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/badge.css

@@ -16,7 +16,6 @@
     background: var(--cui-badge-background);
     color: var(--cui-badge-foreground);
     outline: none;
-    transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
   :where([data-control-family="badge"][data-slot="root"][data-size="sm"]) {

package/dist/styles/recipes/button-group.css

@@ -83,6 +83,14 @@
   :where([data-control-family="button-group"][data-slot="root"] > [data-active="true"]:focus-within) {
     z-index: 3;
   }
+
+  @media (pointer: coarse) {
+    :where(
+        [data-control-family="button-group"][data-slot="root"][data-orientation="vertical"] [data-control-family="button"][data-size="xs"]
+      )::after {
+      block-size: 100%;
+    }
+  }
 }
 
 @property --cui-button-group-text-radius {

package/dist/styles/recipes/button.css

@@ -1,10 +1,34 @@
 @layer components {
+  @media (pointer: coarse) {
+    :where([data-control-family="button"][data-size="xs"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="button"][data-size="xs"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]
+      > [data-control-family="button"][data-popup-part="close"][data-icon-only="true"]
+  ) {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
   :where([data-control-family="button"][data-control="true"]) {
     --cui-button-radius: var(--radius-control);
     --cui-button-gap: calc(var(--spacing) * 1.5);
     --cui-button-icon: 1rem;
     --cui-button-height: var(--control-h-md);
     --cui-button-padding-inline: var(--padding-x);
+    --cui-button-icon-padding-inline: max(0px, calc(var(--cui-button-padding-inline) - var(--spacing) * 0.5));
     --cui-button-font-size: var(--text-body);
     --cui-button-background: transparent;
     --cui-button-background-image: none;
@@ -31,7 +55,7 @@
     cursor: pointer;
     font-weight: var(--font-weight-medium);
     outline: none;
-    transition-property: color, background-color, border-color, box-shadow, scale, translate, opacity, filter, backdrop-filter;
+    transition-property: scale, translate;
     transition-timing-function: var(--ease-standard);
     transition-duration: var(--duration-fast);
   }
@@ -65,6 +89,24 @@
     font-size: var(--cui-button-font-size);
   }
 
+  :where(
+    [data-control-family="button"][data-control="true"][data-size]:not([data-icon-only="true"]):has(
+      > :is(svg, [data-slot="icon"]):first-child:not(:only-child),
+      > [data-slot="content"] > :is(svg, [data-slot="icon"]):first-child:not(:only-child)
+    )
+  ) {
+    padding-inline-start: var(--cui-button-icon-padding-inline);
+  }
+
+  :where(
+    [data-control-family="button"][data-control="true"][data-size]:not([data-icon-only="true"]):has(
+      > :is(svg, [data-slot="icon"]):last-child:not(:only-child),
+      > [data-slot="content"] > :is(svg, [data-slot="icon"]):last-child:not(:only-child)
+    )
+  ) {
+    padding-inline-end: var(--cui-button-icon-padding-inline);
+  }
+
   :where([data-control-family="button"][data-icon-only="true"]) {
     aspect-ratio: 1;
     padding-inline: 0;
@@ -205,13 +247,6 @@
     gap: calc(var(--spacing) * 1.5);
   }
 
-  :where([data-control-family="button"][data-button-kind="model-switcher"][data-slot="indicator"]) {
-    inline-size: calc(var(--spacing) * 1.5);
-    block-size: calc(var(--spacing) * 1.5);
-    border-radius: calc(infinity * 1px);
-    background-color: var(--primary);
-  }
-
   :where([data-control-family="button"][data-slot="group"]) {
     gap: calc(var(--spacing) * 1);
   }
@@ -247,6 +282,12 @@
   initial-value: 0px;
 }
 
+@property --cui-button-icon-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-button-font-size {
   syntax: "<length-percentage>";
   inherits: true;

package/dist/styles/recipes/calendar.css

@@ -41,9 +41,6 @@
     border-radius: var(--radius-control);
     outline: none;
     color: var(--muted-foreground);
-    transition-property: background-color, color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
   }
 
   @media (hover: hover) {
@@ -66,9 +63,7 @@
     font-size: var(--text-sm);
     font-weight: var(--font-weight-normal);
     line-height: 1;
-    transition-property: background-color, color, box-shadow;
-    transition-duration: var(--duration-fast);
-    transition-timing-function: var(--ease-standard);
+    font-variant-numeric: tabular-nums;
   }
 
   @media (hover: hover) {
@@ -119,6 +114,26 @@
     margin-block-start: calc(var(--spacing) * 1);
     border-collapse: collapse;
   }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="calendar"][data-slot="day"]) {
+      min-inline-size: 44px;
+      min-block-size: 44px;
+    }
+
+    :where([data-control-family="calendar"][data-slot="nav-button"]) {
+      position: relative;
+    }
+
+    :where([data-control-family="calendar"][data-slot="nav-button"])::after {
+      content: "";
+      position: absolute;
+      inset: 50% 50%;
+      translate: -50% -50%;
+      inline-size: 100%;
+      block-size: max(100%, 44px);
+    }
+  }
 }
 
 @property --cui-calendar-day-radius {

package/dist/styles/recipes/card.css

@@ -48,11 +48,13 @@
   :where([data-control-family="card"][data-slot="title"]) {
     font-weight: var(--font-weight-semibold);
     line-height: 1;
+    text-wrap: balance;
   }
 
   :where([data-control-family="card"][data-slot="description"]) {
     color: var(--muted-foreground);
     font-size: var(--text-body);
+    text-wrap: pretty;
   }
 }