@ctrl-ui/react 0.8.0

package/dist/styles/recipes/switch.css

@@ -0,0 +1,149 @@
+@layer components {
+  :where([data-control-family="switch"][data-slot="root"]) {
+    block-size: calc(var(--spacing) * 5);
+    inline-size: calc(var(--spacing) * 9);
+    padding: calc(var(--spacing) * 0.5);
+    --cui-switch-background: oklch(from var(--foreground) l c h / 0.14);
+    --cui-switch-hover-background: oklch(from var(--foreground) l c h / 0.2);
+    --cui-switch-checked-background: var(--primary);
+    --cui-switch-checked-hover-background: oklch(from var(--primary) l c h / 0.9);
+    --cui-switch-thumb-radius: 9999px;
+    --cui-switch-thumb-background: var(--background);
+    --cui-switch-thumb-shadow: var(--shadow-sm);
+    border-radius: calc(infinity * 1px);
+    background: var(--cui-switch-background);
+    outline: none;
+    transition: background-color var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"]:hover) {
+    background: var(--cui-switch-hover-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"]:active) {
+    background: oklch(from var(--foreground) l c h / 0.25);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-checked]) {
+    background: var(--cui-switch-checked-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-checked]:hover) {
+    background: var(--cui-switch-checked-hover-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-checked]:active) {
+    background: oklch(from var(--primary) l c h / 0.8);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-disabled]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-disabled]:hover) {
+    background: var(--cui-switch-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-disabled][data-checked]:hover) {
+    background: var(--cui-switch-checked-background);
+  }
+
+  :where([data-control-family="switch"][data-slot="thumb"]) {
+    border-radius: var(--cui-switch-thumb-radius);
+    background: var(--cui-switch-thumb-background);
+    box-shadow: var(--cui-switch-thumb-shadow);
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    transition-property: translate, width;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-disabled] [data-slot="thumb"]) {
+    opacity: 0.8;
+  }
+
+  :where([data-control-family="switch"][data-slot="thumb-icon"]) {
+    color: oklch(from var(--foreground) l c h / 0.7);
+    transition-property: color, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-checked] [data-slot="thumb-icon"]:not([data-switch-icon="unchecked"])) {
+    color: var(--primary-text);
+  }
+
+  :where([data-control-family="switch"][data-slot="thumb-icon"][data-switch-icon="unchecked"]) {
+    color: oklch(from var(--foreground) l c h / 0.6);
+    opacity: 1;
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-checked] [data-switch-icon="unchecked"]) {
+    opacity: 0;
+  }
+
+  :where([data-control-family="switch"][data-slot="thumb-icon"][data-switch-icon="checked"]) {
+    color: var(--primary-text);
+    opacity: 0;
+  }
+
+  :where([data-control-family="switch"][data-slot="root"][data-checked] [data-switch-icon="checked"]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="switch"][data-slot="thumb"][data-checked]) {
+    --_switch-thumb-translate: calc(var(--spacing) * 4) 0;
+    translate: var(--_switch-thumb-translate);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"]:active [data-control-family="switch"][data-slot="thumb"]) {
+    width: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="switch"][data-slot="root"]:active [data-control-family="switch"][data-slot="thumb"][data-checked]) {
+    --_switch-thumb-translate: calc(var(--spacing) * 3) 0;
+    translate: var(--_switch-thumb-translate);
+  }
+}
+
+@property --cui-switch-thumb-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-switch-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-switch-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-switch-checked-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-switch-checked-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-switch-thumb-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-switch-thumb-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/table-of-contents.css

@@ -0,0 +1,107 @@
+@layer components {
+  :where([data-control-family="table-of-contents"][data-slot="root"]) {
+    --cui-track-highlight-transition-duration: var(--duration-base);
+    --cui-table-of-contents-rail-background: oklch(from var(--border) l c h / 0.6);
+    --cui-table-of-contents-highlight-radius: var(--radius-md);
+    --cui-table-of-contents-highlight-background: oklch(from var(--foreground) l c h / 0.04);
+    border: 1px solid oklch(from var(--border) l c h / 0.7);
+    border-radius: var(--radius-panel);
+    background-color: oklch(from var(--card) l c h / 0.8);
+    box-shadow: var(--shadow-sm);
+    backdrop-filter: blur(var(--blur-sm));
+    padding: calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="label"]) {
+    margin-block-end: calc(var(--spacing) * 3);
+    color: var(--muted-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="rail"]) {
+    background-color: var(--cui-table-of-contents-rail-background);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"]) {
+    padding-block: calc(var(--spacing) * 1.5);
+    padding-inline-start: calc(var(--spacing) * 14);
+    color: var(--muted-foreground);
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-normal);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="1"]) {
+    padding-inline-start: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="2"]) {
+    padding-inline-start: calc(var(--spacing) * 7);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="3"]) {
+    padding-inline-start: calc(var(--spacing) * 9);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="4"]) {
+    padding-inline-start: calc(var(--spacing) * 11);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"][data-depth="0"]) {
+    padding-inline-start: calc(var(--spacing) * 3);
+    font-weight: var(--font-weight-medium);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="table-of-contents"][data-slot="item"]:hover) {
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"]:focus-visible) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="item"][data-active]) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="root"] [data-control-family="track-highlight"][data-slot="root"]) {
+    --cui-track-highlight-radius: var(--cui-table-of-contents-highlight-radius);
+    --cui-track-highlight-background: var(--cui-table-of-contents-highlight-background);
+    --cui-track-highlight-ring-color: transparent;
+    --cui-track-highlight-shadow: none;
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="root"][data-variant="trail"]) {
+    --cui-table-of-contents-highlight-radius: 0px;
+    --cui-table-of-contents-highlight-background: transparent;
+  }
+
+  :where([data-control-family="table-of-contents"][data-slot="trail"]) {
+    border-radius: 9999px;
+    background-color: var(--foreground);
+  }
+}
+
+@property --cui-table-of-contents-rail-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-of-contents-highlight-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-table-of-contents-highlight-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/table.css

@@ -0,0 +1,124 @@
+@layer components {
+  :where([data-control-family="table"][data-slot="root"]) {
+    --cui-table-background: transparent;
+    --cui-table-foreground: var(--foreground);
+    --cui-table-border-color: var(--border);
+    --cui-table-footer-background: oklch(from var(--foreground) l c h / 0.03);
+    --cui-table-header-foreground: var(--muted-foreground);
+    --cui-table-row-hover-background: oklch(from var(--foreground) l c h / 0.03);
+    --cui-table-row-selected-background: oklch(from var(--foreground) l c h / 0.05);
+    background: var(--cui-table-background);
+    color: var(--cui-table-foreground);
+    border-collapse: collapse;
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="table"][data-slot="header"] [data-slot="row"]) {
+    border-bottom-color: var(--cui-table-border-color);
+  }
+
+  :where([data-control-family="table"][data-slot="footer"]) {
+    border-top-color: var(--cui-table-border-color);
+    background: var(--cui-table-footer-background);
+    border-top-style: solid;
+    border-top-width: 1px;
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="table"][data-slot="row"]) {
+    border-bottom-color: var(--cui-table-border-color);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
+
+  :where(
+    [data-control-family="table"][data-slot="row"]:is(
+      [data-interactive],
+      [tabindex],
+      [role="button"],
+      :has(a, button, [role="checkbox"])
+    ):hover
+  ) {
+    background: var(--cui-table-row-hover-background);
+  }
+
+  :where([data-control-family="table"][data-slot="row"][data-state="selected"]) {
+    background: var(--cui-table-row-selected-background);
+  }
+
+  :where([data-control-family="table"][data-slot="head"]) {
+    block-size: calc(var(--spacing) * 10);
+    padding-inline: calc(var(--spacing) * 2);
+    color: var(--cui-table-header-foreground);
+    text-align: left;
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="table"][data-slot="caption"]) {
+    margin-block-start: calc(var(--spacing) * 4);
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="table"][data-slot="footer"] > tr:last-child) {
+    border-bottom-style: solid;
+    border-bottom-width: 0px;
+  }
+
+  :where([data-control-family="table"][data-slot="body"] tr:last-child) {
+    border-style: solid;
+    border-width: 0px;
+  }
+
+  :where([data-control-family="table"][data-slot="header"] tr) {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
+
+  :where([data-control-family="table"][data-slot="cell"]) {
+    padding: calc(var(--spacing) * 2);
+  }
+}
+
+@property --cui-table-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-row-hover-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-row-selected-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-header-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-table-footer-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/tabs.css

@@ -0,0 +1,235 @@
+@layer components {
+  :where([data-control-family="tabs"][data-slot="root"]) {
+    --cui-tabs-trigger-radius: var(--radius-control);
+    --cui-tabs-list-padding: calc(var(--spacing) * 1);
+    --cui-tabs-list-radius: calc(
+      var(--cui-tabs-trigger-radius) +
+      clamp(0px, calc(var(--cui-tabs-trigger-radius) * 1000), var(--cui-tabs-list-padding))
+    );
+    --cui-tabs-list-background: var(--hover-fill);
+    --cui-tabs-list-shadow: inset 0 0 0 var(--control-rim-width) var(--control-rim), var(--shadow-inset);
+    --cui-tabs-list-backdrop-filter: none;
+    --cui-tabs-indicator-background: var(--background);
+    --cui-tabs-foreground: var(--muted-foreground);
+    --cui-tabs-active-foreground: var(--foreground);
+    --cui-tabs-indicator-shadow: var(--shadow-sm);
+    --cui-tabs-border-color: var(--border);
+  }
+  :where([data-control-family="tabs"][data-slot="list"]) {
+    --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--_tabs-trigger-h) / 2));
+    position: relative;
+    display: flex;
+    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding) + var(--cui-tabs-list-padding));
+    width: fit-content;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+    border-radius: min(var(--cui-tabs-list-radius), calc(var(--_tabs-trigger-h) / 2 + var(--cui-tabs-list-padding)));
+    background: var(--cui-tabs-list-background);
+    box-shadow: var(--cui-tabs-list-shadow);
+    padding: var(--cui-tabs-list-padding);
+    -webkit-backdrop-filter: var(--cui-tabs-list-backdrop-filter);
+    backdrop-filter: var(--cui-tabs-list-backdrop-filter);
+  }
+
+  :where([data-control-family="tabs"][data-slot="indicator"]) {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    z-index: 0;
+    height: var(--_tabs-trigger-h);
+    width: var(--active-tab-width);
+    transform: translateX(var(--active-tab-left)) translateY(-50%);
+    border-radius: var(--_tabs-trigger-radius-fit);
+    background: var(--cui-tabs-indicator-background);
+    box-shadow: var(--cui-tabs-indicator-shadow);
+    /* left, not transform, in the browser variant: transform slides on the compositor while width resizes on the main thread — the ends tear apart. */
+    transition:
+      width var(--duration-base) var(--ease-standard),
+      left var(--duration-base) var(--ease-standard),
+      transform var(--duration-base) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="tabs"][data-slot="tab"]) {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    height: var(--_tabs-trigger-h);
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    white-space: nowrap;
+    border-radius: var(--_tabs-trigger-radius-fit);
+    padding-inline: calc(var(--spacing) * 3.5);
+    color: var(--cui-tabs-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    outline: none;
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="tabs"][data-slot="tab"]:hover) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="tabs"][data-slot="tab"]:is([aria-selected="true"], [data-active])) {
+    color: var(--cui-tabs-active-foreground);
+  }
+
+  :where([data-control-family="tabs"][data-slot="tab"][data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
+    --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
+    /* One trigger radius for the flare, plus the surface corner arc it must clear. */
+    --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--radius-panel));
+    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding));
+    align-items: flex-end;
+    isolation: isolate;
+    /* The slide machinery promotes the surface wrapper mid-switch — the strip stays above it. */
+    z-index: 1;
+    /* Bare-surface chrome: re-pin the pill knobs so a skin's pill styling can't leak in. */
+    --cui-tabs-list-background: transparent;
+    --cui-tabs-list-shadow: inset 0 -1px 0 var(--cui-tabs-border-color);
+    --cui-tabs-indicator-background: var(--background);
+    border-radius: var(--cui-tabs-list-radius) var(--cui-tabs-list-radius) 0 0;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-slot="indicator"]) {
+    --_tabs-browser-indicator-width: calc(var(--active-tab-width) + var(--_tabs-browser-corner-double));
+    --_tabs-browser-indicator-x: calc(var(--active-tab-left) - var(--_tabs-trigger-radius-fit));
+    background: none;
+    box-shadow: none;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-slot="indicator"])::before {
+    content: "";
+    position: absolute;
+    inset: 0 var(--_tabs-trigger-radius-fit);
+    border: 1px solid var(--cui-tabs-border-color);
+    border-bottom: none;
+    border-radius: var(--_tabs-trigger-radius-fit) var(--_tabs-trigger-radius-fit) 0 0;
+    background: var(--cui-tabs-indicator-background);
+  }
+
+  /* Flares: the side walls scoop outward into the surface line — an arc no border can draw. */
+  :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-slot="indicator"])::after {
+    content: "";
+    position: absolute;
+    inset: auto 0 0;
+    height: var(--_tabs-trigger-radius-fit);
+    background:
+      radial-gradient(
+        circle at 0 -1px,
+        transparent calc(var(--_tabs-trigger-radius-fit) - 0.5px),
+        var(--cui-tabs-border-color) var(--_tabs-trigger-radius-fit) calc(var(--_tabs-trigger-radius-fit) + 0.5px),
+        var(--cui-tabs-indicator-background) calc(var(--_tabs-trigger-radius-fit) + 1px)
+      )
+      left / calc(var(--_tabs-trigger-radius-fit) + 1px) 100% no-repeat,
+      radial-gradient(
+        circle at 100% -1px,
+        transparent calc(var(--_tabs-trigger-radius-fit) - 0.5px),
+        var(--cui-tabs-border-color) var(--_tabs-trigger-radius-fit) calc(var(--_tabs-trigger-radius-fit) + 0.5px),
+        var(--cui-tabs-indicator-background) calc(var(--_tabs-trigger-radius-fit) + 1px)
+      )
+      right / calc(var(--_tabs-trigger-radius-fit) + 1px) 100% no-repeat,
+      linear-gradient(var(--cui-tabs-indicator-background) 0 0) center / calc(100% - var(--_tabs-browser-corner-double)) 100% no-repeat;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-single="true"]) {
+    min-height: auto;
+    gap: 0;
+    border-radius: 0;
+    background: transparent;
+    padding: 0;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-single="true"] [data-slot="tab"]) {
+    height: auto;
+    cursor: default;
+    border-radius: 0;
+    padding-inline: 0;
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="tabs"][data-slot="panel"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"] [data-control-family="tabs"][data-slot="tab"]) {
+    border-top-left-radius: var(--_tabs-trigger-radius-fit);
+    border-top-right-radius: var(--_tabs-trigger-radius-fit);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+@property --cui-tabs-trigger-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-list-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-list-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-list-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tabs-list-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-tabs-indicator-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tabs-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tabs-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tabs-indicator-shadow {
+  syntax: "*";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-tabs-list-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-tabs-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}