@ctrl-ui/react 0.8.0

package/dist/styles/recipes/activity.css

@@ -0,0 +1,129 @@
+@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);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="activity"][data-slot="row"]),
+  :where([data-control-family="activity"][data-slot="trigger"]) {
+    min-block-size: calc(var(--spacing) * 8);
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 1);
+    color: var(--cui-activity-row-foreground);
+  }
+
+  :where([data-control-family="activity"][data-slot="trigger"]) {
+    border-radius: var(--cui-activity-trigger-radius);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="activity"][data-slot="trigger"]:hover) {
+      background: var(--cui-activity-trigger-hover-background);
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="activity"][data-slot="trigger"]:focus-visible) {
+    background: var(--cui-activity-trigger-hover-background);
+  }
+
+  :where([data-control-family="activity"][data-slot="chevron"]) {
+    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);
+  }
+
+  :where([data-control-family="activity"][data-slot="icon"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="activity"][data-slot="content-grid"]) {
+    gap: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 7.5) calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="activity"][data-slot="detail"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="activity"][data-slot="root"][data-activity-state="running"] [data-slot="icon"]) {
+    color: var(--foreground);
+  }
+
+  :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;
+  }
+
+  :where([data-control-family="activity"][data-slot="root"][data-activity-state="error"] [data-slot="icon"]) {
+    color: var(--destructive-text);
+  }
+
+  :where([data-control-family="activity"][data-slot="title"]) {
+    color: currentColor;
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-normal);
+  }
+
+  :where([data-control-family="activity"][data-slot="status"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="activity"][data-slot="status"][data-status="error"]) {
+    color: var(--destructive-text);
+  }
+
+  :where([data-control-family="activity"][data-slot="detail-label"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-micro);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: 0.08em;
+  }
+
+  :where([data-control-family="activity"][data-slot="detail-content"]) {
+    color: var(--foreground);
+    font-size: var(--text-label);
+    line-height: calc(var(--spacing) * 5);
+    font-family: var(--font-mono);
+  }
+
+  :where([data-control-family="activity"][data-slot="detail-content"][data-format="code"]) {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
+    background: var(--cui-activity-code-background);
+    border-radius: var(--radius-control);
+    font-size: var(--text-caption);
+  }
+}
+
+@property --cui-activity-row-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-activity-trigger-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-activity-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-activity-code-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/alert.css

@@ -0,0 +1,75 @@
+@layer components {
+  :where([data-control-family="alert"][data-slot="root"]) {
+    --cui-alert-radius: var(--radius-lg);
+    --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);
+    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);
+    line-height: var(--text-sm--line-height);
+  }
+
+  :where([data-control-family="alert"][data-slot="root"][data-variant="destructive"]) {
+    --_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);
+  }
+
+  :where([data-control-family="alert"][data-slot="root"]:has(> svg)) {
+    column-gap: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="alert"][data-slot="description"]) {
+    gap: calc(var(--spacing) * 1);
+    color: var(--_alert-description-color);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+  }
+
+  :where([data-control-family="alert"][data-slot="description"] p) {
+    line-height: var(--leading-relaxed);
+  }
+
+  :where([data-control-family="alert"][data-slot="title"]) {
+    min-block-size: calc(var(--spacing) * 4);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  :where([data-control-family="alert"][data-slot="root"] > svg) {
+    color: currentcolor;
+    translate: 0 calc(var(--spacing) * 0.5);
+  }
+}
+
+@property --cui-alert-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-alert-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-alert-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-alert-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}

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

@@ -0,0 +1,102 @@
+@layer components {
+  :where([data-control-ui="audio-recorder"][data-slot="root"]) {
+    --cui-audio-recorder-active-foreground: var(--foreground);
+    --cui-audio-recorder-foreground: var(--muted-foreground);
+    --cui-audio-recorder-recording-ring-color: oklch(from var(--destructive) l c h / 0.25);
+    --cui-audio-recorder-error-foreground: var(--destructive-text);
+    min-block-size: calc(var(--spacing) * 8);
+    gap: calc(var(--spacing) * 2);
+    padding-inline-end: calc(var(--spacing) * 1);
+    color: var(--cui-audio-recorder-foreground);
+    transition: color var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-ui="audio-recorder"][data-slot="actions"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-ui="audio-recorder"][data-slot="root"]:is([data-state="recording"], [data-state="recorded"])) {
+    color: var(--cui-audio-recorder-active-foreground);
+  }
+
+  :where([data-control-ui="audio-recorder"][data-slot="trigger"][data-recorder-state="recording"]) {
+    --cui-button-shadow: 0 0 0 2px var(--cui-audio-recorder-recording-ring-color);
+  }
+
+  :where(
+    [data-control-ui="audio-recorder"]:is(
+      [data-slot="visualizer"],
+      [data-slot="status"],
+      [data-slot="duration"],
+      [data-slot="cancel"],
+      [data-slot="submit"]
+    )
+  ) {
+    --_audio-recorder-content-hidden-scale: 100%;
+    --_audio-recorder-content-visible-scale: 100%;
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+    translate: calc(var(--spacing) * 1) 0;
+    scale: var(--_audio-recorder-content-hidden-scale);
+    visibility: hidden;
+    transition-property: opacity, filter, translate, scale, visibility;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+    transition-behavior: allow-discrete;
+  }
+
+  :where([data-control-ui="audio-recorder"]:is([data-slot="cancel"], [data-slot="submit"])) {
+    --_audio-recorder-content-hidden-scale: 95%;
+  }
+
+  :where([data-control-ui="audio-recorder"][data-visible="true"]) {
+    opacity: 1;
+    filter: blur(0px);
+    translate: 0px 0;
+    scale: var(--_audio-recorder-content-visible-scale);
+    visibility: visible;
+  }
+
+  :where([data-control-ui="audio-recorder"]:is([data-slot="cancel"], [data-slot="submit"]):disabled) {
+    opacity: 0;
+  }
+
+  :where([data-control-ui="audio-recorder"]:is([data-slot="status"], [data-slot="duration"])) {
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-ui="audio-recorder"][data-slot="status"][data-tone="error"]) {
+    color: var(--cui-audio-recorder-error-foreground);
+  }
+
+  :where([data-control-ui="audio-recorder"][data-slot="duration"]) {
+    inline-size: calc(var(--spacing) * 10);
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@property --cui-audio-recorder-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-audio-recorder-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-audio-recorder-recording-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-audio-recorder-error-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -0,0 +1,90 @@
+@layer components {
+  :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-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);
+  }
+  :where([data-control-family="audio-visualizer"][data-slot="root"][data-variant]) {
+    block-size: calc(var(--spacing) * 7);
+    inline-size: calc(var(--spacing) * 44);
+    padding-inline: calc(var(--spacing) * 1.5);
+    --_audio-visualizer-bar-track-filter: none;
+    border-radius: var(--cui-audio-visualizer-radius);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="root"][data-variant="bars"]) {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="track"]) {
+    gap: 1px;
+    opacity: 0.55;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="track"][data-active="true"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="bar-track"]) {
+    inline-size: calc(var(--spacing) * 1);
+    transition:
+      opacity var(--duration-base) var(--ease-emphasized),
+      filter var(--duration-base) var(--ease-emphasized),
+      translate var(--duration-base) var(--ease-emphasized);
+    filter: var(--_audio-visualizer-bar-track-filter);
+  }
+
+  @starting-style {
+    :where([data-control-family="audio-visualizer"][data-slot="bar-track"]) {
+      opacity: 0;
+      --_audio-visualizer-bar-track-filter: blur(var(--blur-xs));
+      filter: var(--_audio-visualizer-bar-track-filter);
+      translate: var(--spacing) 0;
+    }
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="bar"]) {
+    background: var(--cui-audio-visualizer-bar-background);
+    border-radius: var(--radius-control);
+    opacity: var(--_audio-visualizer-level-opacity);
+    transition:
+      clip-path var(--duration-base) var(--ease-standard),
+      opacity var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="baseline"]) {
+    stroke: oklch(from var(--border) l c h / 0.55);
+  }
+
+  :where([data-control-family="audio-visualizer"][data-slot="waveform"]) {
+    fill: var(--cui-audio-visualizer-line-fill);
+    stroke: var(--cui-audio-visualizer-line-stroke);
+    transition: d var(--duration-base) var(--ease-standard);
+  }
+}
+
+@property --cui-audio-visualizer-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-audio-visualizer-bar-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-audio-visualizer-line-fill {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-audio-visualizer-line-stroke {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/avatar.css

@@ -0,0 +1,52 @@
+@layer components {
+  :where([data-control-family="avatar"][data-slot="root"]) {
+    inline-size: calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 9);
+  }
+
+  :where([data-control-family="avatar"][data-slot="root"]),
+  :where([data-control-family="avatar"][data-slot="favicon"]),
+  :where([data-control-family="avatar"][data-slot="source-favicon"]) {
+    --cui-avatar-radius: 9999px;
+    --cui-avatar-group-ring-color: var(--background);
+    --cui-avatar-fallback-background: var(--muted);
+    --cui-avatar-fallback-foreground: var(--muted-foreground);
+    border-radius: var(--cui-avatar-radius);
+  }
+
+  :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;
+    background: var(--cui-avatar-fallback-background);
+    color: var(--cui-avatar-fallback-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+@property --cui-avatar-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-avatar-group-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-avatar-fallback-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-avatar-fallback-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/badge.css

@@ -0,0 +1,110 @@
+@layer components {
+  :where([data-control-family="badge"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 2);
+    --cui-badge-radius: var(--radius-control);
+    --cui-badge-background: var(--_badge-color-background);
+    --cui-badge-foreground: var(--_badge-color-foreground);
+    --cui-badge-border-color: transparent;
+    --_badge-color-background: var(--badge-neutral);
+    --_badge-color-foreground: var(--badge-neutral-foreground);
+    --_badge-color-border: var(--badge-neutral-border);
+    --_badge-color-background-hover: var(--badge-neutral-hover);
+    --_badge-hover-background: var(--_badge-color-background-hover);
+    border-color: var(--cui-badge-border-color);
+    border-radius: var(--cui-badge-radius);
+    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"]) {
+    block-size: calc(var(--spacing) * 4);
+    padding: 0 calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-variant="outline"]) {
+    --cui-badge-background: transparent;
+    --cui-badge-border-color: var(--_badge-color-border);
+    --_badge-hover-background: var(--_badge-color-background);
+  }
+
+  :where(a[data-control-family="badge"][data-slot="root"]:hover),
+  :where(button[data-control-family="badge"][data-slot="root"]:hover) {
+    background: var(--_badge-hover-background);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="red"]) {
+    --_badge-color-background: var(--badge-red);
+    --_badge-color-foreground: var(--badge-red-foreground);
+    --_badge-color-border: var(--badge-red-border);
+    --_badge-color-background-hover: var(--badge-red-hover);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="orange"]) {
+    --_badge-color-background: var(--badge-orange);
+    --_badge-color-foreground: var(--badge-orange-foreground);
+    --_badge-color-border: var(--badge-orange-border);
+    --_badge-color-background-hover: var(--badge-orange-hover);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="yellow"]) {
+    --_badge-color-background: var(--badge-yellow);
+    --_badge-color-foreground: var(--badge-yellow-foreground);
+    --_badge-color-border: var(--badge-yellow-border);
+    --_badge-color-background-hover: var(--badge-yellow-hover);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="green"]) {
+    --_badge-color-background: var(--badge-green);
+    --_badge-color-foreground: var(--badge-green-foreground);
+    --_badge-color-border: var(--badge-green-border);
+    --_badge-color-background-hover: var(--badge-green-hover);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="blue"]) {
+    --_badge-color-background: var(--badge-blue);
+    --_badge-color-foreground: var(--badge-blue-foreground);
+    --_badge-color-border: var(--badge-blue-border);
+    --_badge-color-background-hover: var(--badge-blue-hover);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="purple"]) {
+    --_badge-color-background: var(--badge-purple);
+    --_badge-color-foreground: var(--badge-purple-foreground);
+    --_badge-color-border: var(--badge-purple-border);
+    --_badge-color-background-hover: var(--badge-purple-hover);
+  }
+
+  :where([data-control-family="badge"][data-slot="root"][data-color="pink"]) {
+    --_badge-color-background: var(--badge-pink);
+    --_badge-color-foreground: var(--badge-pink-foreground);
+    --_badge-color-border: var(--badge-pink-border);
+    --_badge-color-background-hover: var(--badge-pink-hover);
+  }
+}
+
+@property --cui-badge-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-badge-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-badge-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-badge-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -0,0 +1,64 @@
+@layer components {
+  :where([data-control-family="button-group"][data-slot="root"]) {
+    --cui-button-group-text-radius: var(--radius-control);
+    --cui-button-group-text-background: oklch(from var(--card) l c h / 0.72);
+    --cui-button-group-text-foreground: var(--muted-foreground);
+    --cui-button-group-separator-background: var(--border);
+  }
+  :where([data-control-family="button-group"][data-slot="text"]) {
+    block-size: var(--control-h-md);
+    border: 1px solid var(--border);
+    border-radius: var(--cui-button-group-text-radius);
+    background: var(--cui-button-group-text-background);
+    box-shadow: var(--shadow-sm);
+    padding-inline: var(--padding-x);
+    color: var(--cui-button-group-text-foreground);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="button-group"][data-slot="text"][data-size="xs"]) {
+    block-size: var(--control-h-xs);
+    padding-inline: calc(var(--padding-x) * 0.6);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="button-group"][data-slot="text"][data-size="sm"]) {
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--padding-x) * 0.75);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="button-group"][data-slot="text"][data-size="lg"]) {
+    block-size: var(--control-h-lg);
+    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  :where([data-control-family="button-group"][data-slot="separator"]) {
+    background: var(--cui-button-group-separator-background);
+  }
+}
+
+@property --cui-button-group-text-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-button-group-text-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-group-text-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-group-separator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}