@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/recipes/dropzone.css

@@ -3,7 +3,7 @@
     --cui-dropzone-surface-radius: var(--radius-panel);
     --cui-dropzone-surface-foreground: var(--foreground);
     --cui-dropzone-surface-border-color: var(--border);
-    --cui-dropzone-surface-border-width: 1px;
+    --cui-dropzone-surface-border-width: var(--control-rim-width);
     --cui-dropzone-accept-border-color: var(--primary);
     --cui-dropzone-reject-border-color: var(--destructive);
     --cui-dropzone-overlay-background: oklch(from var(--card) l c h / 0.95);
@@ -21,20 +21,19 @@
     padding: calc(var(--spacing) * 6);
     background-color: var(--card);
     text-align: center;
-    outline-style: none;
     transition-property: border-color, color, opacity, box-shadow;
     transition-duration: var(--duration-fast);
     transition-timing-function: var(--ease-standard);
   }
 
   @media (hover: hover) {
-    :where([data-control-family="dropzone"][data-slot="trigger"]:hover) {
+    :where([data-control-family="dropzone"][data-slot="trigger"]:hover:not(:disabled, [aria-disabled="true"])) {
       background-color: oklch(from var(--muted) l c h / 0.5);
     }
   }
 
-  :where([data-control-family="dropzone"][data-slot="trigger"]:disabled) {
-    opacity: 0.5;
+  :where([data-control-family="dropzone"][data-slot="trigger"]:is(:disabled, [aria-disabled="true"])) {
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="dropzone"][data-slot="file-list"]),
@@ -90,16 +89,16 @@
   :where([data-control-family="dropzone"][data-slot="status"]) {
     margin-block-start: calc(var(--spacing) * 3);
     color: var(--muted-foreground);
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
   }
 
   :where([data-control-family="dropzone"][data-slot="feedback-message"]) {
-    font-size: var(--text-sm);
+    font-size: var(--text-body);
     font-weight: var(--font-weight-medium);
   }
 
   :where([data-control-family="dropzone"][data-slot="feedback-spinner"]) {
-    animation: var(--animate-spin);
+    animation: cui-spin var(--duration-loop) linear infinite;
   }
 
   @starting-style {

package/dist/styles/recipes/dynamic-notification-input.css

@@ -7,7 +7,6 @@
     color: var(--_dynamic-notification-active-foreground);
     box-shadow: inset 0 0 0 1px oklch(from var(--_dynamic-notification-active-foreground) l c h / 0.1);
     font-size: var(--text-body);
-    outline: none;
     transition: box-shadow var(--duration-fast) var(--ease-standard);
   }
 
@@ -16,20 +15,24 @@
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="reply-input"]:disabled) {
-    opacity: 0.5;
+    opacity: var(--disabled-opacity);
   }
 
   :where([data-control-family="button"][data-dynamic-notification-close="true"]) {
     color: oklch(from var(--_dynamic-notification-active-foreground) l c h / 0.55);
   }
 
-  :where([data-control-family="button"][data-dynamic-notification-close="true"]:hover) {
-    color: inherit;
+  @media (hover: hover) {
+    :where(
+        [data-control-family="button"][data-dynamic-notification-close="true"]:not(:disabled, [data-disabled], [aria-disabled="true"]):hover
+      ) {
+      color: inherit;
+    }
   }
 
   @media (pointer: coarse) {
     :where([data-control-family="dynamic-notification"][data-slot="reply-input"]) {
-      font-size: max(16px, var(--text-body));
+      font-size: max(var(--text-input-min), var(--text-body));
     }
   }
 }

package/dist/styles/recipes/dynamic-notification-motion.css

@@ -25,16 +25,16 @@
 
   :where([data-control-family="dynamic-notification"][data-slot="island"]) {
     interpolate-size: allow-keywords;
-    width: 8.5rem;
-    height: 2.5rem;
+    inline-size: 8.5rem;
+    block-size: 2.5rem;
     border-radius: calc(2.5rem / 2);
     opacity: 1;
     scale: 1;
     translate: 0 0;
     filter: blur(0);
     transition:
-      width calc(var(--duration-slow) * 2) var(--cui-dynamic-notification-morph-easing),
-      height calc(var(--duration-slow) * 2) var(--cui-dynamic-notification-morph-easing),
+      inline-size calc(var(--duration-slow) * 2) var(--cui-dynamic-notification-morph-easing),
+      block-size calc(var(--duration-slow) * 2) var(--cui-dynamic-notification-morph-easing),
       border-radius calc(var(--duration-slow) * 2) var(--cui-dynamic-notification-morph-easing),
       box-shadow calc(var(--duration-slow) * 2) var(--ease-standard),
       opacity var(--duration-slow) var(--ease-emphasized),
@@ -60,14 +60,14 @@
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="island"][data-state="thinking"]) {
-    width: min(10rem, 100%);
-    height: 5.75rem;
+    inline-size: min(10rem, 100%);
+    block-size: 5.75rem;
     border-radius: 2.75rem;
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="island"][data-state="expanded"]) {
-    width: min(22.5rem, 100%);
-    height: auto;
+    inline-size: min(22.5rem, 100%);
+    block-size: auto;
     border-radius: var(--cui-dynamic-notification-expanded-radius);
   }
 
@@ -90,11 +90,11 @@
     scale: 0.8;
     pointer-events: none;
     transition-duration: var(--duration-fast);
-    transition-delay: calc(var(--duration-fast) * 0);
+    transition-delay: initial;
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="content"]) {
-    width: min(22.5rem, 100%);
+    inline-size: min(22.5rem, 100%);
     opacity: 1;
     filter: blur(0);
     translate: 0 0;
@@ -124,6 +124,7 @@
 
   :where([data-control-family="dynamic-notification"][data-slot="message"] [data-control-family="dynamic-notification"][data-slot="word"]) {
     display: inline-block;
+    max-inline-size: 100%;
   }
 
   :where(
@@ -150,19 +151,9 @@
         var(--cui-dynamic-notification-indicator-end),
         var(--cui-dynamic-notification-indicator-start)
       );
-    box-shadow: 0 0 8px oklch(0.7 0.17 250 / 0.55);
+    box-shadow: 0 0 8px oklch(from var(--cui-dynamic-notification-indicator-end) l c h / 0.55);
     animation: dn-indicator-breathe calc(var(--duration-slow) * 5) var(--ease-standard) infinite;
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where([data-control-family="dynamic-notification"][data-slot="island"]) {
-      --_dynamic-notification-word-stagger: 0ms;
-    }
-  }
-
-  :where([data-motion="reduced"] :where([data-control-family="dynamic-notification"][data-slot="island"])) {
-    --_dynamic-notification-word-stagger: 0ms;
-  }
 }
 
 @keyframes dn-word-in {

package/dist/styles/recipes/dynamic-notification.css

@@ -26,12 +26,13 @@
       1
     );
     --cui-dynamic-notification-expanded-radius: 1.65rem;
-    --cui-dynamic-notification-glass-foreground: white;
+    --cui-dynamic-notification-glass-foreground: oklch(1 0 0);
     --cui-dynamic-notification-glass-ring-color: oklch(1 0 0 / 0.12);
     --cui-dynamic-notification-indicator-end: oklch(0.7 0.17 250);
     --cui-dynamic-notification-indicator-middle: oklch(0.75 0.15 70);
     --cui-dynamic-notification-indicator-start: oklch(0.62 0.19 25);
-    --cui-dynamic-notification-liquid-foreground: white;
+    --cui-dynamic-notification-liquid-foreground: oklch(1 0 0);
+    --cui-dynamic-notification-liquid-text-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
     --cui-dynamic-notification-morph-easing: linear(
       0,
       0.0568 3.85%,
@@ -65,18 +66,21 @@
     --cui-dynamic-notification-surface-foreground: var(--popover-foreground);
     --cui-dynamic-notification-surface-ring-color: var(--border);
     --cui-dynamic-notification-surface-shadow: var(--shadow-pop);
+    --cui-dynamic-notification-title-foreground: var(--muted-foreground);
     --_dynamic-notification-active-foreground: var(--cui-dynamic-notification-surface-foreground);
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="root"][data-variant="glass"]) {
     --_dynamic-notification-active-foreground: var(--cui-dynamic-notification-glass-foreground);
+    --cui-dynamic-notification-title-foreground: oklch(from var(--cui-dynamic-notification-glass-foreground) l c h / 0.6);
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="root"][data-variant="liquid"]) {
     --_dynamic-notification-active-foreground: var(--cui-dynamic-notification-liquid-foreground);
+    --cui-dynamic-notification-title-foreground: oklch(from var(--cui-dynamic-notification-liquid-foreground) l c h / 0.6);
   }
 
-  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="glass"]) {
+  :where([data-control-family="dynamic-notification"][data-slot="island"]:is([data-variant="glass"], [data-variant="liquid"])) {
     background: linear-gradient(
       to bottom,
       oklch(0 0 0 / 0.97) 0%,
@@ -86,6 +90,9 @@
       var(--_dynamic-notification-ink-tail) var(--_dynamic-notification-ink-tail-stop),
       var(--_dynamic-notification-ink-tail) 100%
     );
+  }
+
+  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="glass"]) {
     backdrop-filter: blur(4px) saturate(1.4);
     color: var(--cui-dynamic-notification-glass-foreground);
     box-shadow:
@@ -94,32 +101,24 @@
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="liquid"]) {
-    background: linear-gradient(
-      to bottom,
-      oklch(0 0 0 / 0.97) 0%,
-      oklch(0 0 0 / 0.97) var(--_dynamic-notification-ink-plateau),
-      var(--_dynamic-notification-ink-mid) var(--_dynamic-notification-ink-mid-stop),
-      var(--_dynamic-notification-ink-low) var(--_dynamic-notification-ink-low-stop),
-      var(--_dynamic-notification-ink-tail) var(--_dynamic-notification-ink-tail-stop),
-      var(--_dynamic-notification-ink-tail) 100%
-    );
     color: var(--cui-dynamic-notification-liquid-foreground);
-    text-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
+    text-shadow: var(--cui-dynamic-notification-liquid-text-shadow);
   }
 
-  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="glass"]:has([data-glass-ready="true"])),
-  :where([data-control-family="dynamic-notification"][data-slot="island"][data-variant="liquid"]:has([data-glass-ready="true"])) {
+  :where(
+    [data-control-family="dynamic-notification"][data-slot="island"]:is([data-variant="glass"], [data-variant="liquid"]):has(
+      [data-glass-ready="true"]
+    )
+  ) {
     background: transparent;
   }
 
-  :where([data-control-family="dynamic-notification"][data-slot="glass"]),
-  :where([data-control-family="dynamic-notification"][data-slot="liquid"]) {
+  :where([data-control-family="dynamic-notification"]:is([data-slot="glass"], [data-slot="liquid"])) {
     opacity: 0;
     transition: opacity var(--duration-base) var(--ease-standard);
   }
 
-  :where([data-control-family="dynamic-notification"][data-slot="glass"][data-glass-ready="true"]),
-  :where([data-control-family="dynamic-notification"][data-slot="liquid"][data-glass-ready="true"]) {
+  :where([data-control-family="dynamic-notification"]:is([data-slot="glass"], [data-slot="liquid"])[data-glass-ready="true"]) {
     opacity: 1;
   }
 
@@ -133,15 +132,15 @@
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="pill"]) {
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 4);
     font-size: var(--text-caption);
-    outline-style: none;
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="title"]) {
     font-size: var(--text-caption);
-    opacity: 0.55;
+    color: var(--cui-dynamic-notification-title-foreground);
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tracking-wide);
     text-wrap: balance;
@@ -149,7 +148,9 @@
 
   :where([data-control-family="dynamic-notification"][data-slot="message"]) {
     font-size: var(--text-body-lg);
-    line-height: 1.375;
+    line-height: var(--leading-snug);
+    overflow-wrap: anywhere;
+    text-wrap: pretty;
   }
 
   :where([data-control-family="dynamic-notification"][data-slot="indicator"]) {
@@ -168,6 +169,11 @@
     gap: calc(var(--spacing) * 2);
   }
 
+  :where([data-control-family="dynamic-notification"][data-slot="reply-error"]) {
+    font-size: var(--text-caption);
+    text-wrap: pretty;
+  }
+
   :where([data-control-family="dynamic-notification"][data-slot="reply-input"]) {
     block-size: calc(var(--spacing) * 9);
     padding-inline: calc(var(--spacing) * 3.5);
@@ -176,10 +182,6 @@
   :where([data-control-family="button"][data-dynamic-notification-close="true"]) {
     margin-inline-end: calc(var(--spacing) * -1.5);
   }
-
-  :where([data-control-family="dynamic-notification"][data-slot="island"]) {
-    outline-style: none;
-  }
 }
 
 @property --cui-dynamic-notification-glass-foreground {
@@ -200,12 +202,24 @@
   initial-value: transparent;
 }
 
+@property --cui-dynamic-notification-liquid-text-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
 @property --cui-dynamic-notification-surface-background {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
 
+@property --cui-dynamic-notification-title-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-dynamic-notification-surface-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/emoji-picker.css

@@ -0,0 +1,132 @@
+@layer components {
+  :where([data-control-family="emoji-picker"][data-slot="root"]) {
+    --cui-emoji-picker-cell-size: calc(var(--spacing) * 8);
+    --cui-emoji-picker-cell-radius: var(--radius-control);
+    --cui-emoji-picker-active-background: var(--accent);
+    --cui-emoji-picker-header-background: var(--popover);
+    --cui-emoji-picker-header-foreground: var(--muted-foreground);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="search"]) {
+    position: relative;
+    margin: calc(var(--spacing) * 2);
+    margin-block-end: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="search-icon"]) {
+    position: absolute;
+    inset-inline-start: calc(var(--spacing) * 2.5);
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    color: var(--muted-foreground);
+    pointer-events: none;
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="search-input"]) {
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--spacing) * 8) calc(var(--spacing) * 2.5);
+    border: var(--control-rim-width) solid var(--control-rim);
+    border-radius: var(--radius-control);
+    background: var(--control-fill);
+    box-shadow: var(--shadow-inset);
+    color: var(--foreground);
+    font-size: var(--text-label);
+    --focus-ring-offset: calc(var(--focus-ring-width) * -1);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="search-input"])::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="content"]) {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="loading"]),
+  :where([data-control-family="emoji-picker"][data-slot="empty"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="list"]) {
+    padding-block-end: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="category-header"]) {
+    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5) calc(var(--spacing) * 1);
+    background: var(--cui-emoji-picker-header-background);
+    color: var(--cui-emoji-picker-header-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="row"]) {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="emoji"]) {
+    inline-size: var(--cui-emoji-picker-cell-size);
+    block-size: var(--cui-emoji-picker-cell-size);
+    border-radius: var(--cui-emoji-picker-cell-radius);
+    background: transparent;
+    font-size: 1.25rem;
+    line-height: 1;
+    cursor: default;
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="emoji"][data-active]) {
+    background: var(--cui-emoji-picker-active-background);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    min-block-size: calc(var(--spacing) * 11);
+    padding-inline: calc(var(--spacing) * 2.5);
+    border-block-start: 1px solid var(--border);
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="footer-emoji"]) {
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+
+  :where([data-control-family="emoji-picker"][data-slot="footer-label"]) {
+    color: var(--foreground);
+  }
+}
+
+@property --cui-emoji-picker-cell-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-emoji-picker-cell-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-emoji-picker-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-emoji-picker-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-emoji-picker-header-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/empty.css

@@ -3,7 +3,7 @@
     --cui-empty-radius: var(--radius-lg);
     --cui-empty-background: transparent;
     --cui-empty-border-color: transparent;
-    --cui-empty-border-width: 1px;
+    --cui-empty-border-width: var(--control-rim-width);
     --cui-empty-border-style: solid;
     --cui-empty-media-radius: var(--radius-lg);
     --cui-empty-media-background: var(--muted);
@@ -18,7 +18,7 @@
     --cui-empty-content-size: 24rem;
     --cui-empty-media-size: calc(var(--spacing) * 10);
     --cui-empty-media-icon-size: calc(var(--spacing) * 5);
-    --cui-empty-font-size: var(--text-sm);
+    --cui-empty-font-size: var(--text-body);
     --cui-empty-title-font-weight: var(--font-weight-medium);
     border: var(--cui-empty-border-width) var(--cui-empty-border-style) var(--cui-empty-border-color);
     border-radius: var(--cui-empty-radius);
@@ -53,7 +53,7 @@
   :where([data-control-family="empty"][data-slot="content"]) {
     gap: var(--cui-empty-content-gap);
     font-size: var(--cui-empty-font-size);
-    line-height: var(--text-sm--line-height);
+    line-height: var(--leading-normal);
     text-wrap: balance;
   }
 
@@ -61,11 +61,12 @@
     font-size: var(--cui-empty-font-size);
     line-height: var(--leading-relaxed);
     color: var(--cui-empty-description-foreground);
+    text-wrap: pretty;
   }
 
   :where([data-control-family="empty"][data-slot="title"]) {
     font-size: var(--cui-empty-font-size);
-    line-height: var(--text-sm--line-height);
+    line-height: var(--leading-normal);
     font-weight: var(--cui-empty-title-font-weight);
     color: var(--cui-empty-foreground);
   }

package/dist/styles/recipes/environment-variables.css

@@ -3,7 +3,7 @@
     --cui-environment-variables-error-foreground: var(--destructive-text);
     --cui-environment-variables-message-background: oklch(from var(--destructive) l c h / 0.05);
     --cui-environment-variables-message-border-color: oklch(from var(--destructive) l c h / 0.4);
-    --cui-environment-variables-message-border-width: 1px;
+    --cui-environment-variables-message-border-width: var(--control-rim-width);
     --cui-environment-variables-message-foreground: var(--destructive-text);
     --cui-environment-variables-meta-foreground: var(--muted-foreground);
     --cui-environment-variables-title-foreground: var(--foreground);
@@ -75,12 +75,9 @@
     color: var(--foreground);
   }
 
-  :where([data-control-family="environment-variables"]:is([data-slot="key-input"], [data-slot="value-input"])) {
-    font-size: var(--text-caption);
-  }
-
-  :where([data-control-family="environment-variables"][data-slot="value-group"][data-invalid="true"]) {
-    box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.7);
+  :where([data-control-family="environment-variables"][data-slot="row"] [data-control-family="field"][data-control="true"]) {
+    --cui-field-font-size: var(--text-caption);
+    font-family: var(--font-mono);
   }
 
   :where([data-control-family="environment-variables"][data-slot="field-error"]) {
@@ -114,18 +111,10 @@
     text-align: center;
   }
 
-  :where([data-control-family="environment-variables"][data-slot="value-input"]) {
-    font-family: var(--font-mono);
-  }
-
   :where([data-control-family="environment-variables"][data-slot="field-label"]) {
     font-weight: var(--font-weight-medium);
   }
 
-  :where([data-control-family="environment-variables"][data-slot="key-input"]) {
-    font-family: var(--font-mono);
-  }
-
   :where([data-control-family="environment-variables"][data-slot="column-labels"]) {
     gap: calc(var(--spacing) * 2);
     padding-inline: calc(var(--spacing) * 1);