@ctrl-ui/react 0.8.0

package/dist/styles/recipes/popup-lists.css

@@ -0,0 +1,198 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-kind="model-switcher"][data-slot="hint"]) {
+    margin-inline-start: auto;
+    padding-inline-start: calc(var(--spacing) * 4);
+    font-size: var(--text-micro);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="group-label"]) {
+    padding-block: calc(var(--spacing) * 1) calc(var(--spacing) * 0.5);
+    text-transform: uppercase;
+    font-size: var(--text-micro);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: 0.08em;
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="empty"]) {
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-body);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="icon"]) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="list"]),
+  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="group"]) {
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="trigger-menu"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="group"]),
+  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="group"]) {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="combobox"][data-slot="group-label"]) {
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="combobox"][data-slot="item-indicator"]) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="combobox"][data-slot="empty"]) {
+    padding-block: calc(var(--spacing) * 6);
+    text-align: center;
+    font-size: var(--text-body);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="combobox"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="group"] [cmdk-group-heading]) {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
+    text-transform: uppercase;
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: 0.08em;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="empty"]) {
+    padding-block: calc(var(--spacing) * 6);
+    text-align: center;
+    font-size: var(--text-body);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input-wrapper"]) {
+    gap: calc(var(--spacing) * 2);
+    block-size: var(--control-h-lg);
+    padding-inline: calc(var(--padding-x) * 1.25);
+    border-block-end: 1px solid var(--cui-popup-separator-color);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input"]) {
+    background: transparent;
+    color: var(--foreground);
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input"])::placeholder,
+  :where([data-control-family="popup"][data-popup-kind="command"] [cmdk-group-heading]) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input"]:disabled) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="group"]) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="input-icon"]) {
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="dialog-root"]) {
+    transition-property: grid-template-rows;
+    transition-duration: var(--duration-slow);
+    transition-timing-function: var(--ease-emphasized);
+    transition-delay: var(--duration-fast);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="autocomplete"][data-slot="group-label"]) {
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="autocomplete"][data-slot="empty"]) {
+    padding-block: calc(var(--spacing) * 6);
+    text-align: center;
+    font-size: var(--text-body);
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="autocomplete"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"] > span:first-child) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="label"]) {
+    padding-block: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--padding-x) * 0.5);
+    color: var(--muted-foreground);
+    font-size: var(--text-micro);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  :where([data-control-family="popup"][data-popup-part="item"][data-inset]),
+  :where([data-control-family="popup"][data-popup-part="label"][data-inset]),
+  :where([data-control-family="popup"][data-popup-part="item"]:is([data-slot="checkbox-item"], [data-slot="radio-item"])) {
+    padding-inline-start: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="separator"]) {
+    margin-block: calc(var(--spacing) * 1);
+    margin-inline: calc(var(--popover-padding) * -1);
+    block-size: 1px;
+    background-color: var(--cui-popup-separator-color);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="shortcut"]) {
+    margin-inline-start: auto;
+    padding-inline-start: calc(var(--spacing) * 6);
+    --_popup-shortcut-font-size: var(--text-body);
+    color: var(--cui-popup-shortcut-foreground);
+    font-size: var(--_popup-shortcut-font-size);
+    letter-spacing: 0.02em;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="command"][data-slot="shortcut"]) {
+    --_popup-shortcut-font-size: var(--text-label);
+  }
+
+  :where([data-control-family="popup"][data-slot="sub-trigger-indicator"]) {
+    margin-inline-start: auto;
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="bar"]) {
+    gap: calc(var(--spacing) * 0.5);
+    padding: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="list"]) {
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="navigation-link"]) {
+    padding-block: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="popup"][data-popup-part="navigation-link"][data-variant="compact"]) {
+    padding-block: 0;
+  }
+}

package/dist/styles/recipes/popup-motion.css

@@ -0,0 +1,94 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"]) {
+    outline-style: none;
+    transition-property: translate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+    border-radius: 0;
+    border-style: solid;
+    border-width: 0px;
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"][data-side="left"]:is(
+      [data-starting-style],
+      [data-ending-style]
+    )
+  ) {
+    translate: -100% 0;
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="sheet"][data-popup-part="surface"][data-side="right"]:is(
+      [data-starting-style],
+      [data-ending-style]
+    )
+  ) {
+    translate: 100% 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow-shape"]) {
+    fill: currentcolor;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"]) {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    text-wrap: balance;
+    outline-style: none;
+    --_popup-tooltip-content-transition-property: opacity, scale;
+    transition-property: var(--_popup-tooltip-content-transition-property);
+    transition-timing-function: var(--ease-standard);
+    transition-duration: var(--duration-fast);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-instant]) {
+    --_popup-tooltip-content-transition-property: none;
+    transition-property: var(--_popup-tooltip-content-transition-property);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-ending-style]) {
+    --_popup-tooltip-content-opacity: 0%;
+    opacity: var(--_popup-tooltip-content-opacity);
+    --_popup-tooltip-content-scale: 95% 95%;
+    scale: var(--_popup-tooltip-content-scale);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-starting-style]) {
+    --_popup-tooltip-content-opacity: 0%;
+    opacity: var(--_popup-tooltip-content-opacity);
+    --_popup-tooltip-content-scale: 95% 95%;
+    scale: var(--_popup-tooltip-content-scale);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-popup-part="surface"]:not([data-arrow="true"])
+  ) {
+    --_popup-tooltip-content-radius: var(--cui-popup-radius);
+    border-radius: var(--_popup-tooltip-content-radius);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-popup-part="surface"][data-arrow="true"]) {
+    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), 3px);
+    border-radius: var(--_popup-tooltip-content-radius);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"][data-side="top"]) {
+    --_popup-tooltip-arrow-rotate: 180deg;
+    rotate: var(--_popup-tooltip-arrow-rotate);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"][data-side="left"]) {
+    --_popup-tooltip-arrow-rotate: 90deg;
+    rotate: var(--_popup-tooltip-arrow-rotate);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="arrow"][data-side="right"]) {
+    --_popup-tooltip-arrow-rotate: calc(90deg * -1);
+    rotate: var(--_popup-tooltip-arrow-rotate);
+  }
+}

package/dist/styles/recipes/popup-toast.css

@@ -0,0 +1,126 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"]) {
+    --_toast-swipe-x: var(--toast-swipe-movement-x);
+    --_toast-swipe-y: var(--toast-swipe-movement-y);
+    transform-origin: bottom;
+    transform: translateX(var(--_toast-swipe-x))
+      translateY(calc(var(--_toast-swipe-y) - (var(--toast-index) * var(--peek)) - (var(--shrink) * var(--height)))) scale(var(--scale));
+    transition:
+      transform var(--duration-slow) var(--ease-emphasized),
+      opacity var(--duration-slow) var(--ease-standard),
+      height var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"]:where([data-ending-style], [data-limited])) {
+    opacity: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-expanded]) {
+    transform: translateX(var(--_toast-swipe-x)) translateY(var(--offset-y));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-starting-style]),
+  :where(
+    [data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style]:not([data-limited]):not(
+      [data-swipe-direction]
+    )
+  ) {
+    transform: translateY(150%);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style][data-swipe-direction="down"]) {
+    transform: translateY(calc(var(--_toast-swipe-y) + 150%));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style][data-swipe-direction="up"]) {
+    transform: translateY(calc(var(--_toast-swipe-y) - 150%));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style][data-swipe-direction="left"]) {
+    transform: translateX(calc(var(--_toast-swipe-x) - 150%)) translateY(var(--offset-y));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="root"][data-ending-style][data-swipe-direction="right"]) {
+    transform: translateX(calc(var(--_toast-swipe-x) + 150%)) translateY(var(--offset-y));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 3);
+    padding: calc(var(--spacing) * 3);
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="content"] > div) {
+    gap: calc(var(--spacing) * 0.5);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="content"][data-behind]) {
+    opacity: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="content"][data-expanded]) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="indicator"]) {
+    --_toast-indicator-background: var(--foreground);
+    margin-block-start: calc(var(--spacing) * 1.5);
+    inline-size: calc(var(--spacing) * 2);
+    block-size: calc(var(--spacing) * 2);
+    border-radius: 9999px;
+    background: var(--_toast-indicator-background);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-type="error"] [data-slot="indicator"]) {
+    --_toast-indicator-background: var(--destructive);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="title"]) {
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1;
+    letter-spacing: -0.025em;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"]:where([data-slot="action"], [data-slot="close"])) {
+    --_toast-control-foreground: var(--foreground);
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: var(--_toast-control-foreground);
+    outline: none;
+    transition:
+      color var(--duration-fast) var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard),
+      opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"]:where([data-slot="action"], [data-slot="close"]):hover) {
+    background: oklch(from var(--foreground) l c h / 0.06);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="action"]) {
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+    box-shadow: inset 0 0 0 1px var(--border);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="close"]) {
+    margin-block-start: calc(var(--spacing) * -1);
+    margin-inline-end: calc(var(--spacing) * -1);
+    padding: calc(var(--spacing) * 1);
+    --_toast-control-foreground: var(--muted-foreground);
+    opacity: 0.7;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="close"]:hover) {
+    opacity: 1;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="toast"][data-slot="viewport"]) {
+    outline-style: none;
+  }
+}