@ctrl-ui/react 0.8.0

package/dist/styles/recipes/task-list.css

@@ -0,0 +1,146 @@
+@layer components {
+  :where([data-control-family="task-list"][data-slot="root"]) {
+    --cui-task-list-background: oklch(from var(--card) l c h / 0.9);
+    --cui-task-list-border-color: var(--border);
+    --cui-task-list-foreground: var(--foreground);
+    --cui-task-list-radius: var(--radius-field);
+    --cui-task-list-shadow: var(--shadow-md);
+    --cui-task-list-indicator-active-foreground: var(--primary-text);
+    --cui-task-list-indicator-foreground: oklch(from var(--muted-foreground) l c h / 0.7);
+    --cui-task-list-item-foreground: var(--foreground);
+    --cui-task-list-item-pending-foreground: var(--muted-foreground);
+    border: 1px solid var(--cui-task-list-border-color);
+    border-radius: var(--cui-task-list-radius);
+    background: var(--cui-task-list-background);
+    color: var(--cui-task-list-foreground);
+    box-shadow:
+      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.04),
+      var(--cui-task-list-shadow);
+    backdrop-filter: blur(var(--backdrop-blur-popover));
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="task-list"][data-slot="trigger"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+    text-align: left;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="task-list"][data-slot="trigger"]:hover) {
+      background: oklch(from var(--muted) l c h / 0.4);
+    }
+  }
+
+  :where([data-control-family="task-list"]:is([data-slot="progress"], [data-slot="chevron"])) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="task-list"][data-slot="label"]) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="task-list"][data-slot="chevron"]) {
+    inline-size: calc(var(--spacing) * 3.5);
+    block-size: calc(var(--spacing) * 3.5);
+  }
+
+  :where([data-control-family="task-list"][data-slot="items"]) {
+    gap: calc(var(--spacing) * 0.5);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block-end: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="task-list"][data-slot="item"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 1);
+    border-radius: var(--radius-popup-item);
+    color: var(--cui-task-list-item-foreground);
+    font-size: var(--text-sm);
+  }
+
+  :where([data-control-family="task-list"][data-slot="item"][data-status="pending"]) {
+    color: var(--cui-task-list-item-pending-foreground);
+    opacity: 0.7;
+  }
+
+  :where([data-control-family="task-list"][data-slot="item-indicator"]) {
+    color: var(--cui-task-list-indicator-foreground);
+  }
+
+  :where([data-control-family="task-list"][data-slot="item-indicator"]:is([data-status="active"], [data-status="completed"])) {
+    color: var(--cui-task-list-indicator-active-foreground);
+  }
+
+  :where([data-control-family="task-list"][data-slot="item-indicator"][data-status="active"] > svg) {
+    animation: task-list-spin calc(var(--duration-slow) * 2) linear infinite;
+  }
+
+  :where([data-control-family="task-list"][data-slot="progress"]) {
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@keyframes task-list-spin {
+  to {
+    rotate: 360deg;
+  }
+}
+
+@property --cui-task-list-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-task-list-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-task-list-item-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-item-pending-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-indicator-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-task-list-indicator-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/thread-rail.css

@@ -0,0 +1,247 @@
+@layer components {
+  :where([data-control-family="thread-rail"][data-slot="root"]) {
+    --cui-thread-rail-item-radius: 9999px;
+    --cui-thread-rail-item-background: transparent;
+    --cui-thread-rail-line-radius: 9999px;
+    --cui-thread-rail-popover-radius: var(--radius-popover);
+    --cui-thread-rail-popover-background: var(--popover);
+    --cui-thread-rail-popover-border-color: var(--border);
+    --cui-thread-rail-popover-border-width: 1px;
+    --cui-thread-rail-popover-shadow: var(--shadow-pop);
+    --cui-thread-rail-popover-backdrop-blur: var(--backdrop-blur-popover);
+    --aui-rail-pitch: 9px;
+    --aui-rail-inset: 12.5px;
+    position: relative;
+    inline-size: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="item"]) {
+    padding-block: calc(var(--spacing) * 1);
+    border-radius: var(--cui-thread-rail-item-radius);
+    background: var(--cui-thread-rail-item-background);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="line"]) {
+    block-size: 1px;
+    inline-size: calc(var(--spacing) * 2);
+    border-radius: var(--cui-thread-rail-line-radius);
+    background: oklch(from var(--foreground) l c h / 0.2);
+    outline: none;
+    transition:
+      width var(--duration-base) var(--ease-standard),
+      background-color var(--duration-base) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="item"][data-in-view] [data-control-family="thread-rail"][data-slot="line"]) {
+    background: oklch(from var(--foreground) l c h / 0.6);
+  }
+
+  :where(
+    [data-control-family="thread-rail"][data-slot="item"]:has(+ [data-control-family="thread-rail"][data-slot="item"]:hover)
+      [data-control-family="thread-rail"][data-slot="line"]
+  ),
+  :where(
+    [data-control-family="thread-rail"][data-slot="item"]:hover
+      + [data-control-family="thread-rail"][data-slot="item"]
+      [data-control-family="thread-rail"][data-slot="line"]
+  ),
+  :where(
+    [data-control-family="thread-rail"][data-slot="item"]:has(+ [data-control-family="thread-rail"][data-slot="item"]:focus-within)
+      [data-control-family="thread-rail"][data-slot="line"]
+  ),
+  :where(
+    [data-control-family="thread-rail"][data-slot="item"]:focus-within
+      + [data-control-family="thread-rail"][data-slot="item"]
+      [data-control-family="thread-rail"][data-slot="line"]
+  ) {
+    inline-size: calc(var(--spacing) * 3);
+    background: oklch(from var(--foreground) l c h / 0.45);
+  }
+
+  :where(
+    [data-control-family="thread-rail"][data-slot="item"]:where(:hover, :focus-within) [data-control-family="thread-rail"][data-slot="line"]
+  ) {
+    inline-size: calc(var(--spacing) * 4);
+    background: var(--foreground);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="item"][data-rail-current] [data-control-family="thread-rail"][data-slot="line"]) {
+    anchor-name: --aui-rail-active;
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="popover"]) {
+    position: absolute;
+    inset-inline-start: 100%;
+    margin-inline-start: calc(var(--spacing) * 3);
+    top: 0;
+    translate: 0 calc(var(--aui-rail-inset) + var(--aui-rail-active-index, 0) * var(--aui-rail-pitch) - 50%);
+    scale: 0.98;
+    opacity: 0;
+    border-radius: var(--cui-thread-rail-popover-radius);
+    background: var(--cui-thread-rail-popover-background);
+    padding: 0px;
+    box-shadow:
+      inset 0 0 0 var(--cui-thread-rail-popover-border-width) var(--cui-thread-rail-popover-border-color),
+      var(--cui-thread-rail-popover-shadow);
+    color: var(--popover-foreground);
+    -webkit-backdrop-filter: blur(var(--cui-thread-rail-popover-backdrop-blur));
+    backdrop-filter: blur(var(--cui-thread-rail-popover-backdrop-blur));
+    transition:
+      top var(--duration-slow) var(--ease-standard),
+      translate var(--duration-slow) var(--ease-standard),
+      height var(--duration-slow) var(--ease-standard),
+      opacity var(--duration-base) var(--ease-standard),
+      scale var(--duration-base) var(--ease-standard);
+    will-change: top, translate, height, opacity, scale;
+    text-align: left;
+  }
+
+  :where(
+    [data-control-family="thread-rail"][data-slot="root"]:has([data-control-family="thread-rail"][data-slot="item"]:hover)
+      [data-control-family="thread-rail"][data-slot="popover"]
+  ),
+  :where([data-control-family="thread-rail"][data-slot="root"]:focus-within [data-control-family="thread-rail"][data-slot="popover"]) {
+    scale: 1;
+    opacity: 1;
+  }
+
+  @starting-style {
+    :where(
+        [data-control-family="thread-rail"][data-slot="root"]:has([data-control-family="thread-rail"][data-slot="item"]:hover)
+          [data-control-family="thread-rail"][data-slot="popover"]
+      ),
+    :where([data-control-family="thread-rail"][data-slot="root"]:focus-within [data-control-family="thread-rail"][data-slot="popover"]) {
+      scale: 0.98;
+      opacity: 0;
+    }
+  }
+
+  @supports (top: anchor(--aui-rail-active center)) {
+    :where([data-control-family="thread-rail"][data-slot="popover"]) {
+      top: anchor(--aui-rail-active center);
+      translate: 0 -50%;
+    }
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="popover-layer"]) {
+    padding: calc(var(--spacing) * 3.5);
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    transform-origin: left center;
+    scale: 0.96;
+    opacity: 0;
+    filter: blur(4px);
+    transition:
+      opacity var(--duration-base) var(--ease-standard),
+      scale var(--duration-base) var(--ease-standard),
+      filter var(--duration-base) var(--ease-standard);
+  }
+
+  :where(
+    [data-control-family="thread-rail"][data-slot="root"]:is(
+        :has([data-control-family="thread-rail"][data-slot="item"]:hover),
+        :focus-within
+      )
+      [data-control-family="thread-rail"][data-slot="popover-layer"][data-active]
+  ) {
+    scale: 1;
+    opacity: 1;
+    filter: blur(0);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="title"]) {
+    color: var(--foreground);
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="summary"]),
+  :where([data-control-family="thread-rail"][data-slot="file"]),
+  :where([data-control-family="thread-rail"][data-slot="file-icon"]),
+  :where([data-control-family="thread-rail"][data-slot="more"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="file"]) {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="file-icon"]) {
+    inline-size: calc(var(--spacing) * 3.5);
+    block-size: calc(var(--spacing) * 3.5);
+    opacity: 0.7;
+    line-height: 1;
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="more"]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="footer"]) {
+    margin-block-start: calc(var(--spacing) * 3);
+    gap: calc(var(--spacing) * 2);
+    padding-block-start: calc(var(--spacing) * 2.5);
+    border-block-start: 1px solid oklch(from var(--border) l c h / 0.6);
+  }
+
+  :where([data-control-family="thread-rail"][data-slot="summary"]) {
+    margin-block-start: calc(var(--spacing) * 1.5);
+    line-height: calc(var(--spacing) * 5);
+  }
+}
+
+@property --cui-thread-rail-item-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-thread-rail-item-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-thread-rail-line-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-thread-rail-popover-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-thread-rail-popover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-thread-rail-popover-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-thread-rail-popover-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-thread-rail-popover-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-thread-rail-popover-backdrop-blur {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/timeline.css

@@ -0,0 +1,107 @@
+@layer components {
+  :where([data-control-family="timeline"][data-slot="root"]) {
+    --cui-timeline-indicator-background: var(--background);
+    --cui-timeline-indicator-foreground: var(--muted-foreground);
+    --cui-timeline-running-foreground: var(--primary-text);
+    --cui-timeline-success-foreground: var(--foreground);
+    --cui-timeline-error-foreground: var(--destructive-text);
+    --cui-timeline-separator-background: var(--border);
+    --cui-timeline-title-foreground: var(--foreground);
+  }
+  :where([data-control-family="timeline"][data-slot="item"]) {
+    column-gap: calc(var(--spacing) * 3);
+    padding-block-end: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="timeline"][data-slot="item"]:last-child) {
+    padding-block-end: 0;
+  }
+
+  :where([data-control-family="timeline"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="timeline"][data-slot="meta"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="timeline"][data-slot="indicator"]) {
+    inline-size: calc(var(--spacing) * 4);
+    block-size: calc(var(--spacing) * 4);
+    border-radius: 9999px;
+    background: var(--cui-timeline-indicator-background);
+    color: var(--cui-timeline-indicator-foreground);
+  }
+
+  :where([data-control-family="timeline"][data-slot="item"][data-state="running"] [data-control-family="timeline"][data-slot="indicator"]) {
+    color: var(--cui-timeline-running-foreground);
+  }
+
+  :where([data-control-family="timeline"][data-slot="item"][data-state="success"] [data-control-family="timeline"][data-slot="indicator"]) {
+    color: var(--cui-timeline-success-foreground);
+  }
+
+  :where([data-control-family="timeline"][data-slot="item"][data-state="error"] [data-control-family="timeline"][data-slot="indicator"]) {
+    color: var(--cui-timeline-error-foreground);
+  }
+
+  :where([data-control-family="timeline"][data-slot="separator"]) {
+    background: var(--cui-timeline-separator-background);
+  }
+
+  :where([data-control-family="timeline"][data-slot="title"]) {
+    color: var(--cui-timeline-title-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    line-height: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="timeline"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-label);
+    line-height: calc(var(--spacing) * 5);
+  }
+}
+
+@property --cui-timeline-indicator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-timeline-indicator-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-timeline-running-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-timeline-success-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-timeline-error-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-timeline-separator-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-timeline-title-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}