@ctrl-ui/react 0.8.0

package/dist/styles/recipes/resizable.css

@@ -0,0 +1,170 @@
+@layer components {
+  :where([data-control-family="resizable"][data-slot="panel-group"]) {
+    --cui-resizable-group-background: var(--card);
+    --cui-resizable-group-radius: var(--radius-panel);
+    --cui-resizable-group-border-color: var(--border);
+    --cui-resizable-handle-color: var(--foreground);
+    --cui-resizable-handle-hover-background: oklch(from var(--foreground) l c h / 0.25);
+    --cui-resizable-handle-active-background: oklch(from var(--foreground) l c h / 0.4);
+    --cui-resizable-grip-radius: var(--radius-control);
+    --cui-resizable-grip-background: var(--card);
+    --cui-resizable-grip-foreground: var(--muted-foreground);
+    background-color: var(--cui-resizable-group-background);
+    color: var(--card-foreground);
+  }
+
+  :where([data-control-family="resizable"][data-slot="panel-group"][data-variant="framed"]) {
+    border: 1px solid var(--cui-resizable-group-border-color);
+    border-radius: var(--cui-resizable-group-radius);
+    box-shadow: var(--shadow-sm);
+  }
+
+  :where([data-control-family="resizable"][data-slot="panel-group"][data-variant="nested"]) {
+    --cui-resizable-group-background: transparent;
+    --cui-resizable-group-radius: 0px;
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"]) {
+    --_resizable-gradient-color: var(--cui-resizable-handle-color);
+    transition-property: background-color, box-shadow, opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+    outline-style: none;
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"]) {
+    background-color: var(--border);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"][data-separator="hover"]),
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"][data-separator="focus"]) {
+    background-color: var(--cui-resizable-handle-hover-background);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="solid"][data-separator="active"]) {
+    background-color: var(--cui-resizable-handle-active-background);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-separator="focus"]) {
+    box-shadow: 0 0 0 2px oklch(from var(--foreground) l c h / 0.2);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-separator="disabled"]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="hover"])::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="hover"][data-axis="vertical"])::before {
+    background-image: linear-gradient(to bottom, var(--_resizable-gradient-color), oklch(from var(--_resizable-gradient-color) l c h / 0));
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle"][data-variant="hover"][data-axis="horizontal"])::before {
+    background-image: linear-gradient(to right, var(--_resizable-gradient-color), oklch(from var(--_resizable-gradient-color) l c h / 0));
+  }
+
+  :where(
+    [data-control-family="resizable"][data-slot="handle"][data-variant="hover"]:is(
+      [data-separator="hover"],
+      [data-separator="focus"],
+      [data-separator="active"]
+    )
+  )::before {
+    opacity: 1;
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle-grip"]) {
+    border: 1px solid var(--border);
+    border-radius: var(--cui-resizable-grip-radius);
+    background-color: var(--cui-resizable-grip-background);
+    color: var(--cui-resizable-grip-foreground);
+    box-shadow: var(--shadow-sm);
+    opacity: 1;
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle-grip"][data-axis="vertical"]) {
+    block-size: calc(var(--spacing) * 5);
+    inline-size: calc(var(--spacing) * 3.5);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle-grip"][data-axis="horizontal"]) {
+    block-size: calc(var(--spacing) * 3.5);
+    inline-size: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="resizable"][data-slot="handle-grip"][data-variant="hover"]) {
+    opacity: 0;
+  }
+
+  :where(
+    [data-control-family="resizable"][data-slot="handle"]:is([data-separator="hover"], [data-separator="focus"], [data-separator="active"])
+      > [data-slot="handle-grip"][data-variant="hover"]
+  ) {
+    opacity: 1;
+  }
+}
+
+@property --cui-resizable-group-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resizable-group-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resizable-group-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resizable-handle-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resizable-handle-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resizable-handle-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resizable-grip-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-resizable-grip-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-resizable-grip-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/rich-tooltip.css

@@ -0,0 +1,272 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="footer"]) {
+    margin-block-start: calc(var(--spacing) * 2);
+    gap: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="progress"]) {
+    gap: calc(var(--spacing) * 1.5);
+    --_rich-tooltip-dot-radius: var(--_rich-tooltip-content-dot-radius);
+    --_rich-tooltip-dot-opacity: var(--_rich-tooltip-content-dot-opacity);
+    --_rich-tooltip-dot-transition-property: opacity;
+    --_rich-tooltip-dot-transition-easing: var(--_rich-tooltip-content-dot-transition-easing);
+    --_rich-tooltip-dot-transition-duration: var(--_rich-tooltip-content-dot-transition-duration);
+    --_rich-tooltip-progress-font-size: var(--_rich-tooltip-content-progress-font-size);
+    --_rich-tooltip-progress-foreground: var(--_rich-tooltip-content-progress-foreground);
+    font-size: var(--_rich-tooltip-progress-font-size);
+    color: var(--_rich-tooltip-progress-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="dot"]) {
+    inline-size: calc(var(--spacing) * 1.5);
+    block-size: calc(var(--spacing) * 1.5);
+    border-radius: var(--_rich-tooltip-dot-radius);
+    background-color: var(--cui-rich-tooltip-dot-background);
+    opacity: var(--_rich-tooltip-dot-opacity);
+    transition-property: var(--_rich-tooltip-dot-transition-property);
+    transition-timing-function: var(--_rich-tooltip-dot-transition-easing);
+    transition-duration: var(--_rich-tooltip-dot-transition-duration);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="dot"][data-active]) {
+    --_rich-tooltip-dot-opacity: 100%;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="description"]) {
+    --_rich-tooltip-description-font-size: var(--_rich-tooltip-content-description-font-size);
+    font-size: var(--_rich-tooltip-description-font-size);
+    --_rich-tooltip-description-line-height: var(--_rich-tooltip-content-description-line-height);
+    line-height: var(--_rich-tooltip-description-line-height);
+    --_rich-tooltip-description-foreground: var(--_rich-tooltip-content-description-foreground);
+    color: var(--_rich-tooltip-description-foreground);
+    text-wrap: pretty;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="title"]) {
+    --_rich-tooltip-title-font-size: var(--_rich-tooltip-content-title-font-size);
+    font-size: var(--_rich-tooltip-title-font-size);
+    --_rich-tooltip-title-font-weight: var(--_rich-tooltip-content-title-font-weight);
+    font-weight: var(--_rich-tooltip-title-font-weight);
+    --_rich-tooltip-title-line-height: var(--_rich-tooltip-content-title-line-height);
+    line-height: var(--_rich-tooltip-title-line-height);
+    --_rich-tooltip-title-letter-spacing: var(--_rich-tooltip-content-title-letter-spacing);
+    letter-spacing: var(--_rich-tooltip-title-letter-spacing);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 4);
+    --cui-rich-tooltip-action-background: transparent;
+    --cui-rich-tooltip-action-foreground: currentColor;
+    --cui-rich-tooltip-action-radius: var(--radius-control);
+    --cui-rich-tooltip-content-background: var(--primary);
+    --cui-rich-tooltip-content-foreground: var(--primary-foreground);
+    --cui-rich-tooltip-content-radius: var(--radius-popover);
+    --cui-rich-tooltip-content-shadow:
+      inset 0 1px 0
+      oklch(from var(--shadow-highlight) l c h / calc(alpha * var(--shadow-opacity) * min(var(--shadow-size), 1))), 0 calc(
+        0.5px *
+        var(--shadow-size) *
+        var(--shadow-popover-multiplier) *
+        var(--shadow-y)
+      )
+      calc(0.75px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      calc(-0.25px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      oklch(from var(--shadow-color) l c h / calc(0.04 * var(--shadow-opacity))), 0 calc(
+        1.5px *
+        var(--shadow-size) *
+        var(--shadow-popover-multiplier) *
+        var(--shadow-y)
+      )
+      calc(3px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      calc(-0.75px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      oklch(from var(--shadow-color) l c h / calc(0.05 * var(--shadow-opacity))), 0 calc(
+        3px *
+        var(--shadow-size) *
+        var(--shadow-popover-multiplier) *
+        var(--shadow-y)
+      )
+      calc(6px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      calc(-1.5px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      oklch(from var(--shadow-color) l c h / calc(0.06 * var(--shadow-opacity))), 0 calc(
+        6px *
+        var(--shadow-size) *
+        var(--shadow-popover-multiplier) *
+        var(--shadow-y)
+      )
+      calc(14px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      calc(-3px * var(--shadow-size) * var(--shadow-popover-multiplier))
+      oklch(from var(--shadow-color) l c h / calc(0.07 * var(--shadow-opacity)));
+    --cui-rich-tooltip-dot-background: currentcolor;
+    --_rich-tooltip-description-font-size: var(--text-body);
+    --_rich-tooltip-content-description-font-size: var(--_rich-tooltip-description-font-size);
+    --_rich-tooltip-description-foreground: var(--muted-foreground);
+    --_rich-tooltip-content-description-foreground: var(--_rich-tooltip-description-foreground);
+    --_rich-tooltip-description-line-height: calc(var(--spacing) * 5);
+    --_rich-tooltip-content-description-line-height: var(--_rich-tooltip-description-line-height);
+    --_rich-tooltip-dot-radius: calc(infinity * 1px);
+    --_rich-tooltip-content-dot-radius: var(--_rich-tooltip-dot-radius);
+    --_rich-tooltip-dot-opacity: 35%;
+    --_rich-tooltip-content-dot-opacity: var(--_rich-tooltip-dot-opacity);
+    --_rich-tooltip-dot-transition-easing: var(--ease-standard);
+    --_rich-tooltip-content-dot-transition-easing: var(--_rich-tooltip-dot-transition-easing);
+    --_rich-tooltip-dot-transition-duration: var(--duration-fast);
+    --_rich-tooltip-content-dot-transition-duration: var(--_rich-tooltip-dot-transition-duration);
+    --_rich-tooltip-progress-font-size: var(--text-caption);
+    --_rich-tooltip-content-progress-font-size: var(--_rich-tooltip-progress-font-size);
+    --_rich-tooltip-progress-foreground: var(--muted-foreground);
+    --_rich-tooltip-content-progress-foreground: var(--_rich-tooltip-progress-foreground);
+    --_rich-tooltip-title-font-size: var(--text-label);
+    --_rich-tooltip-content-title-font-size: var(--_rich-tooltip-title-font-size);
+    --_rich-tooltip-title-font-weight: var(--font-weight-semibold);
+    --_rich-tooltip-content-title-font-weight: var(--_rich-tooltip-title-font-weight);
+    --_rich-tooltip-title-line-height: calc(var(--spacing) * 6);
+    --_rich-tooltip-content-title-line-height: var(--_rich-tooltip-title-line-height);
+    --_rich-tooltip-title-letter-spacing: var(--tracking-tight);
+    --_rich-tooltip-content-title-letter-spacing: var(--_rich-tooltip-title-letter-spacing);
+    --_rich-tooltip-arrow-rotate: 0deg;
+    --_rich-tooltip-action-outline: none;
+    --_rich-tooltip-action-transition-property: background-color, color, box-shadow;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="accent"]) {
+    --_rich-tooltip-arrow-path-fill: var(--primary);
+    --_rich-tooltip-description-foreground: var(--primary-foreground);
+    --_rich-tooltip-progress-foreground: var(--primary-foreground);
+    border-radius: var(--cui-rich-tooltip-content-radius);
+    background-color: var(--cui-rich-tooltip-content-background);
+    color: var(--cui-rich-tooltip-content-foreground);
+    outline-style: none;
+    transition-property: opacity, scale;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+    box-shadow: var(--cui-rich-tooltip-content-shadow);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="surface"]) {
+    --_rich-tooltip-arrow-path-fill: oklch(from var(--popover) l c h / var(--popover-opacity));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="arrow"]) {
+    rotate: var(--_rich-tooltip-arrow-rotate);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="arrow"] path) {
+    fill: var(--_rich-tooltip-arrow-path-fill);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="media"]) {
+    margin-inline: calc(var(--spacing) * -4);
+    margin-block-start: calc(var(--spacing) * -4);
+    margin-block-end: calc(var(--spacing) * 1);
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-side="top"]) {
+    --_rich-tooltip-arrow-rotate: 180deg;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-side="left"]) {
+    --_rich-tooltip-arrow-rotate: 90deg;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-side="right"]) {
+    --_rich-tooltip-arrow-rotate: calc(90deg * -1);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="accent"][data-starting-style]) {
+    --_rich-tooltip-content-scale: 95% 95%;
+    scale: var(--_rich-tooltip-content-scale);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-tone="accent"][data-ending-style]) {
+    --_rich-tooltip-content-scale: 95% 95%;
+    scale: var(--_rich-tooltip-content-scale);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"]),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]) {
+    block-size: calc(var(--spacing) * 7);
+    inline-size: calc(var(--spacing) * 7);
+    margin-inline-end: calc(var(--spacing) * -1);
+    gap: calc(var(--spacing) * 1);
+    padding-inline: 0;
+    border-radius: var(--cui-rich-tooltip-action-radius);
+    background: var(--cui-rich-tooltip-action-background);
+    color: var(--cui-rich-tooltip-action-foreground);
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-medium);
+    transition-property: var(--_rich-tooltip-action-transition-property);
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+    outline-style: var(--_rich-tooltip-action-outline);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"]:hover),
+    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]:hover),
+    :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]:hover) {
+      background: oklch(from currentColor l c h / 0.15);
+    }
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="previous"]:disabled),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="next"]:disabled),
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="close"]:disabled) {
+    opacity: 0.4;
+  }
+}
+
+@property --cui-rich-tooltip-content-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-rich-tooltip-content-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-rich-tooltip-content-radius {
+  syntax: "<length-percentage>+";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-rich-tooltip-content-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-rich-tooltip-dot-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-rich-tooltip-action-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-rich-tooltip-action-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-rich-tooltip-action-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/scroll-area.css

@@ -0,0 +1,59 @@
+@layer components {
+  :where([data-control-family="scroll-area"][data-slot="root"]) {
+    --cui-scroll-area-thumb-radius: 9999px;
+    --cui-scroll-area-thumb-background: oklch(from var(--foreground) l c h / 0.4);
+    --cui-scroll-area-corner-background: transparent;
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-orientation="vertical"]) {
+    inline-size: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-orientation="horizontal"]) {
+    block-size: calc(var(--spacing) * 1.5);
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"]) {
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="always"]),
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="hover"]:is([data-hovering], [data-scrolling])),
+  :where([data-control-family="scroll-area"][data-slot="scrollbar"][data-visibility="scroll"][data-scrolling]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="thumb"]) {
+    border-radius: var(--cui-scroll-area-thumb-radius);
+    background: var(--cui-scroll-area-thumb-background);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="viewport"]) {
+    border-radius: inherit;
+    outline: none;
+  }
+
+  :where([data-control-family="scroll-area"][data-slot="corner"]) {
+    background: var(--cui-scroll-area-corner-background);
+  }
+}
+
+@property --cui-scroll-area-thumb-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-scroll-area-thumb-background {
+  syntax: "*";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-scroll-area-corner-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/separator.css

@@ -0,0 +1,12 @@
+@layer components {
+  :where([data-control-family="separator"][data-slot="root"]) {
+    --cui-separator-root-background: var(--border);
+    background-color: var(--cui-separator-root-background);
+  }
+}
+
+@property --cui-separator-root-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}