@ctrl-ui/react 0.8.0

package/dist/styles/recipes/toolbar.css

@@ -0,0 +1,260 @@
+@layer components {
+  :where([data-control-family="toolbar"][data-slot="root"]) {
+    --cui-toolbar-radius: calc(
+      min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) +
+      clamp(0px, calc(min(var(--cui-toolbar-item-radius), calc(var(--control-h-sm) / 2)) * 1000), var(--cui-toolbar-padding))
+    );
+    --cui-toolbar-padding: calc(var(--spacing) * 1);
+    --cui-toolbar-background: oklch(from var(--card) l c h / 0.72);
+    --cui-toolbar-foreground: var(--foreground);
+    --cui-toolbar-border-color: var(--border);
+    --cui-toolbar-shadow: var(--shadow-sm);
+    --cui-toolbar-item-radius: min(var(--radius-sm), calc(var(--control-h-sm) / 2));
+    --cui-toolbar-item-background: transparent;
+    --cui-toolbar-item-foreground: var(--muted-foreground);
+    --cui-toolbar-item-shadow: none;
+    --cui-toolbar-item-hover-background: var(--hover-fill);
+    --cui-toolbar-item-hover-foreground: var(--foreground);
+    --cui-toolbar-item-active-background: var(--active-fill);
+    --cui-toolbar-item-active-foreground: var(--foreground);
+    --cui-toolbar-separator-background: var(--border);
+    border: 1px solid var(--cui-toolbar-border-color);
+    padding: var(--cui-toolbar-padding);
+    border-radius: var(--cui-toolbar-radius);
+    background-color: var(--cui-toolbar-background);
+    color: var(--cui-toolbar-foreground);
+    box-shadow: var(--cui-toolbar-shadow);
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"]) {
+    --cui-toolbar-background: var(--foreground);
+    --cui-toolbar-foreground: var(--background);
+    --cui-toolbar-border-color: transparent;
+    --cui-toolbar-shadow: var(--shadow-pop);
+    --cui-toolbar-item-foreground: oklch(from var(--background) l c h / 0.7);
+    --cui-toolbar-item-hover-background: oklch(from var(--background) l c h / 0.1);
+    --cui-toolbar-item-hover-foreground: var(--background);
+    --cui-toolbar-item-active-background: var(--background);
+    --cui-toolbar-item-active-foreground: var(--foreground);
+    --cui-toolbar-separator-background: oklch(from var(--background) l c h / 0.2);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="button"]),
+  :where([data-control-family="toolbar"][data-slot="link"]),
+  :where([data-control-family="toolbar"][data-slot="input"]) {
+    gap: calc(var(--spacing) * 1.5);
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--padding-x) * 0.75);
+    font-size: var(--text-label);
+    border-radius: var(--cui-toolbar-item-radius);
+    background-color: var(--cui-toolbar-item-background);
+    box-shadow: var(--cui-toolbar-item-shadow);
+    color: var(--cui-toolbar-item-foreground);
+    font-weight: var(--font-weight-medium);
+    transition-property: background-color, color, box-shadow;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="group"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="button"][data-icon-only]) {
+    aspect-ratio: 1 / 1;
+    padding-inline: 0;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="separator"][data-orientation="vertical"]) {
+    inline-size: 1px;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="separator"][data-orientation="horizontal"]) {
+    block-size: 1px;
+    inline-size: 100%;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="toolbar"][data-slot="button"]:hover),
+    :where([data-control-family="toolbar"][data-slot="link"]:hover) {
+      background-color: var(--cui-toolbar-item-hover-background);
+      color: var(--cui-toolbar-item-hover-foreground);
+    }
+  }
+
+  :where([data-control-family="toolbar"][data-slot="button"]:is([data-pressed], [data-active])),
+  :where([data-control-family="toolbar"][data-slot="link"]:is([data-pressed], [data-active])) {
+    background-color: var(--cui-toolbar-item-active-background);
+    color: var(--cui-toolbar-item-active-foreground);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="button"][data-disabled]),
+  :where([data-control-family="toolbar"][data-slot="input"][data-disabled]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="input"]) {
+    --_toolbar-input-foreground: var(--foreground);
+    --_toolbar-input-placeholder-foreground: var(--muted-foreground);
+    background-color: transparent;
+    color: var(--_toolbar-input-foreground);
+    outline-style: none;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="input"])::placeholder {
+    color: var(--_toolbar-input-placeholder-foreground);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="link"][data-variant="track"]:is([data-pressed], [data-active])) {
+    background-color: transparent;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="link"][data-variant="track"]) {
+    --_toolbar-track-font-size: var(--text-caption);
+    --_toolbar-track-active-hover-foreground: var(--muted-foreground);
+    font-size: var(--_toolbar-track-font-size);
+    gap: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 1);
+  }
+
+  @media (width >= 40rem) {
+    :where([data-control-family="toolbar"][data-slot="link"][data-variant="track"]) {
+      --_toolbar-track-font-size: var(--text-label);
+      padding-inline: calc(var(--spacing) * 1.5);
+    }
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="toolbar"][data-slot="link"][data-variant="track"]:hover) {
+      background-color: transparent;
+    }
+  }
+
+  :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"] [data-control-family="button"][data-slot="root"]) {
+    --cui-button-background: transparent;
+    --cui-button-foreground: oklch(from var(--background) l c h / 0.7);
+    --cui-button-hover-background: oklch(from var(--background) l c h / 0.1);
+    --cui-button-hover-foreground: var(--background);
+    --cui-button-press-background: oklch(from var(--background) l c h / 0.12);
+    --cui-button-active-background: var(--background);
+    --cui-button-active-foreground: var(--foreground);
+    --cui-button-active-hover-background: var(--background);
+    --cui-button-shadow: 0 0 transparent;
+    --cui-button-active-shadow: 0 0 transparent;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"] [data-slot="link"][data-variant="track"]) {
+    --_toolbar-track-active-hover-foreground: oklch(from var(--background) l c h / 0.7);
+  }
+
+  :where([data-track-hover] [data-control-family="toolbar"][data-slot="link"][data-variant="track"][data-active]) {
+    color: var(--_toolbar-track-active-hover-foreground);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="root"][data-variant="inverse"] [data-slot="input"]) {
+    --_toolbar-input-foreground: var(--background);
+    --_toolbar-input-placeholder-foreground: oklch(from var(--background) l c h / 0.7);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="separator"]) {
+    background-color: var(--cui-toolbar-separator-background);
+  }
+
+  :where([data-control-family="toolbar"][data-slot="link"]) {
+    text-decoration-line: none;
+    outline-style: none;
+  }
+
+  :where([data-control-family="toolbar"][data-slot="button"]) {
+    outline-style: none;
+  }
+}
+
+@property --cui-toolbar-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-toolbar-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-toolbar-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-toolbar-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-toolbar-item-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-item-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-toolbar-item-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-item-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-item-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-item-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-item-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-toolbar-separator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/track-highlight.css

@@ -0,0 +1,73 @@
+@layer components {
+  :where([data-control-family="track-highlight"][data-slot="root"]),
+  :where([data-control-family="track-highlight"][data-slot="hover"]) {
+    --_track-highlight-opacity: 0;
+    border-radius: var(--cui-track-highlight-radius);
+    opacity: var(--_track-highlight-opacity);
+    transition-property: top, left, right, bottom, opacity, background-color, box-shadow;
+    transition-duration: var(--cui-track-highlight-transition-duration);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="track-highlight"][data-slot="root"]) {
+    --cui-track-highlight-background: var(--card);
+    --cui-track-highlight-hover-background: color-mix(in oklab, var(--card) 92%, var(--foreground) 8%);
+    --cui-track-highlight-radius: var(--radius-popup-item);
+    --cui-track-highlight-ring-color: oklch(from var(--foreground) l c h / 0.05);
+    --cui-track-highlight-shadow: var(--shadow-sm);
+    --cui-track-highlight-transition-duration: var(--duration-fast);
+    background: var(--cui-track-highlight-background);
+    box-shadow:
+      0 0 0 1px var(--cui-track-highlight-ring-color),
+      var(--cui-track-highlight-shadow);
+  }
+
+  :where([data-control-family="track-highlight"][data-slot="root"][data-hover]) {
+    --cui-track-highlight-background: var(--cui-track-highlight-hover-background);
+    --cui-track-highlight-ring-color: transparent;
+    --cui-track-highlight-shadow: none;
+  }
+
+  :where([data-control-family="track-highlight"][data-slot="hover"]) {
+    background: var(--cui-track-highlight-hover-background);
+  }
+
+  :where([data-control-family="track-highlight"][data-slot="root"][data-visible]),
+  :where([data-control-family="track-highlight"][data-slot="hover"][data-visible]) {
+    --_track-highlight-opacity: 1;
+  }
+}
+
+@property --cui-track-highlight-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-track-highlight-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+@property --cui-track-highlight-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-track-highlight-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-track-highlight-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-track-highlight-transition-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}

package/dist/styles/recipes/transcript-divider.css

@@ -0,0 +1,64 @@
+@layer components {
+  :where([data-control-family="transcript-divider"][data-slot="root"]) {
+    --cui-transcript-divider-foreground: var(--muted-foreground);
+    --cui-transcript-divider-line-color: var(--border);
+    --cui-transcript-divider-danger-foreground: var(--destructive-text);
+    --cui-transcript-divider-success-foreground: var(--badge-green-foreground);
+    --cui-transcript-divider-warning-foreground: var(--badge-yellow-foreground);
+    margin-block: calc(var(--spacing) * 2);
+    color: var(--cui-transcript-divider-foreground);
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="transcript-divider"][data-slot="root"])::before,
+  :where([data-control-family="transcript-divider"][data-slot="root"])::after {
+    block-size: 1px;
+    background: var(--cui-transcript-divider-line-color);
+  }
+
+  :where([data-control-family="transcript-divider"][data-slot="label"]) {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="transcript-divider"][data-slot="root"][data-tone="success"]) {
+    color: var(--cui-transcript-divider-success-foreground);
+  }
+
+  :where([data-control-family="transcript-divider"][data-slot="root"][data-tone="warning"]) {
+    color: var(--cui-transcript-divider-warning-foreground);
+  }
+
+  :where([data-control-family="transcript-divider"][data-slot="root"][data-tone="danger"]) {
+    color: var(--cui-transcript-divider-danger-foreground);
+  }
+}
+
+@property --cui-transcript-divider-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-transcript-divider-line-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-transcript-divider-danger-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-transcript-divider-success-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-transcript-divider-warning-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/tree.css

@@ -0,0 +1,137 @@
+@layer components {
+  :where([data-control-family="tree"][data-slot="root"]) {
+    --cui-tree-item-trigger-radius: var(--radius-popup-item);
+    --cui-tree-item-trigger-foreground: var(--foreground);
+    --cui-tree-item-trigger-hover-background: var(--hover-fill);
+    --cui-tree-item-trigger-hover-foreground: var(--foreground);
+    --cui-tree-item-trigger-selected-background: var(--active-fill);
+    --cui-tree-item-trigger-selected-foreground: var(--foreground);
+    --cui-tree-item-trigger-font-size: var(--text-body);
+    --cui-tree-item-trigger-selected-font-weight: var(--font-weight-normal);
+  }
+
+  :where([data-control-family="tree"][data-slot="root"]),
+  :where([data-control-family="tree"][data-slot="item"]) {
+    outline: none;
+  }
+
+  :where([data-control-family="tree"][data-slot="item-trigger"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 1);
+    padding-inline-end: calc(var(--spacing) * 2);
+    border-radius: var(--cui-tree-item-trigger-radius);
+    background-color: transparent;
+    color: var(--cui-tree-item-trigger-foreground);
+    font-size: var(--cui-tree-item-trigger-font-size);
+    font-weight: var(--font-weight-normal);
+    outline: none;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="tree"][data-slot="item-trigger"]:hover) {
+      background-color: var(--cui-tree-item-trigger-hover-background);
+      color: var(--cui-tree-item-trigger-hover-foreground);
+    }
+  }
+
+  :where([data-control-family="tree"][data-slot="item-trigger"][data-selected]) {
+    background-color: var(--cui-tree-item-trigger-selected-background);
+    color: var(--cui-tree-item-trigger-selected-foreground);
+    font-weight: var(--cui-tree-item-trigger-selected-font-weight);
+  }
+
+  :where([data-control-family="tree"][data-slot="item-trigger"][aria-disabled="true"]) {
+    opacity: 0.5;
+  }
+
+  :where(
+    [data-control-family="tree"][data-indicator="slide"] [data-control-family="tree"][data-slot="item-trigger"]:is(:hover, [data-selected])
+  ) {
+    background-color: transparent;
+  }
+
+  :where([data-control-family="tree"][data-slot="item-indicator"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="tree"][data-slot="item-indicator"][data-state]) {
+    transition: rotate var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="tree"][data-slot="item-indicator"][data-state="open"]) {
+    rotate: 90deg;
+  }
+
+  :where([data-control-family="tree"][data-slot="item-content"]) {
+    height: var(--collapsible-panel-height);
+    overflow: hidden;
+    opacity: 1;
+    transition-property: height, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style])) {
+    height: 0;
+    opacity: 0;
+  }
+
+  :where([data-control-family="tree"][data-slot="item-group"]) {
+    translate: 0 0;
+    transition: translate var(--duration-base) var(--ease-emphasized);
+  }
+
+  :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style]) > [data-slot="item-group"]) {
+    translate: 0 calc(var(--spacing) * -1);
+  }
+}
+
+@property --cui-tree-item-trigger-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tree-item-trigger-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-item-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-item-trigger-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-item-trigger-selected-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-item-trigger-selected-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-item-trigger-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 1rem;
+}
+
+@property --cui-tree-item-trigger-selected-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}

package/dist/styles/recipes/user-ask-details.css

@@ -0,0 +1,45 @@
+@layer components {
+  :where([data-control-family="button"][data-user-ask-dismiss="true"]) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="kbd"][data-user-ask-submit-kbd="true"]) {
+    background: oklch(from var(--primary-foreground) l c h / 0.15);
+    color: var(--primary-foreground);
+    box-shadow: inset 0 0 0 1px oklch(from var(--primary-foreground) l c h / 0.25);
+  }
+
+  :where([data-control-family="user-ask"][data-slot="option-input"]) {
+    font-weight: var(--font-weight-medium);
+    outline-style: none;
+  }
+
+  :where([data-control-family="user-ask"][data-slot="option-indicator"]) {
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="user-ask"][data-slot="option-description"]) {
+    font-weight: var(--font-weight-normal);
+  }
+
+  :where([data-control-family="user-ask"][data-slot="recommended"]) {
+    font-weight: var(--font-weight-normal);
+  }
+
+  :where([data-control-family="user-ask"][data-slot="option-label"]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="user-ask"][data-slot="title"]) {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where([data-control-family="user-ask"][data-slot="root"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="user-ask"][data-slot="pagination-count"]) {
+    font-variant-numeric: tabular-nums;
+  }
+}