@ctrl-ui/react 0.8.0

package/dist/styles/recipes/morphing-panel.css

@@ -0,0 +1,123 @@
+@layer components {
+  :where([data-control-family="morphing-panel"][data-slot="root"]) {
+    --cui-morphing-panel-radius: var(--radius-control);
+    --cui-morphing-panel-background: var(--card);
+    --cui-morphing-panel-foreground: var(--card-foreground);
+    --cui-morphing-panel-border-color: oklch(from var(--border) l c h / 0.8);
+    --cui-morphing-panel-shadow: var(--shadow-md);
+    --cui-morphing-panel-trigger-hover-background: oklch(from var(--foreground) l c h / 0.06);
+    border-radius: var(--cui-morphing-panel-radius);
+    background-color: var(--cui-morphing-panel-background);
+    color: var(--cui-morphing-panel-foreground);
+    box-shadow:
+      var(--cui-morphing-panel-shadow),
+      0 0 0 1px var(--cui-morphing-panel-border-color);
+    transition-property: width, height, border-radius, box-shadow;
+    transition-duration: var(--duration-slow);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="root"][data-state="open"]) {
+    --cui-morphing-panel-radius: var(--radius-panel);
+    --cui-morphing-panel-shadow: var(--shadow-pop);
+  }
+
+  :where([data-control-ui="morphing-panel"][data-slot="trigger"]) {
+    inline-size: 100%;
+    block-size: 100%;
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    border-radius: inherit;
+    outline: none;
+    color: currentColor;
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+    transition-property: top, right, width, height, border-radius, padding, color, background-color, box-shadow;
+    transition-duration: var(--duration-slow);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-ui="morphing-panel"][data-slot="trigger"][data-state="open"]) {
+    inline-size: calc(var(--spacing) * 9);
+    block-size: calc(var(--spacing) * 9);
+    padding: 0;
+    border-radius: var(--radius-control);
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-ui="morphing-panel"][data-slot="trigger"][data-state="open"]) {
+      inline-size: calc(var(--spacing) * 11);
+      block-size: calc(var(--spacing) * 11);
+    }
+  }
+
+  @media (hover: hover) {
+    :where([data-control-ui="morphing-panel"][data-slot="trigger"]:hover) {
+      background-color: var(--cui-morphing-panel-trigger-hover-background);
+    }
+  }
+
+  :where([data-control-ui="morphing-panel"][data-slot="trigger"] > svg) {
+    transition-property: rotate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-ui="morphing-panel"][data-slot="trigger"][data-state="open"] > svg) {
+    rotate: 45deg;
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="content"]) {
+    --_morphing-panel-content-hidden-translate: --spacing(1);
+    border-radius: inherit;
+    outline: none;
+    opacity: 1;
+    filter: blur(0);
+    translate: 0 0;
+    transition-property: opacity, filter, translate;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="morphing-panel"][data-slot="content"][data-starting-style]),
+  :where([data-control-family="morphing-panel"][data-slot="content"][data-ending-style]) {
+    opacity: 0;
+    filter: blur(var(--blur-sm));
+    translate: 0 calc(var(--_morphing-panel-content-hidden-translate) * -1);
+  }
+}
+
+@property --cui-morphing-panel-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-morphing-panel-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-morphing-panel-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-morphing-panel-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-morphing-panel-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-morphing-panel-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/pagination.css

@@ -0,0 +1,86 @@
+@layer components {
+  :where([data-control-family="pagination"][data-slot="root"]) {
+    --cui-pagination-link-radius: var(--radius-control);
+    --cui-pagination-link-background: transparent;
+    --cui-pagination-link-hover-background: oklch(from var(--foreground) l c h / 0.06);
+    --cui-pagination-link-foreground: var(--foreground);
+    --cui-pagination-link-shadow: none;
+  }
+  :where([data-control-family="pagination"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="pagination"][data-slot="link"]) {
+    gap: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 2.5);
+    --_pagination-link-border-color: transparent;
+    border-radius: var(--cui-pagination-link-radius);
+    background: var(--cui-pagination-link-background);
+    box-shadow:
+      inset 0 0 0 1px var(--_pagination-link-border-color),
+      var(--cui-pagination-link-shadow);
+    color: var(--cui-pagination-link-foreground);
+    outline: none;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="pagination"][data-slot="link"][data-active="true"]) {
+    --cui-pagination-link-background: oklch(from var(--card) l c h / 0.72);
+    --_pagination-link-border-color: var(--border);
+    --cui-pagination-link-shadow: var(--shadow-sm);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="pagination"][data-slot="link"]:hover) {
+      background: var(--cui-pagination-link-hover-background);
+    }
+  }
+
+  :where([data-control-family="pagination"][data-slot="link"][aria-disabled="true"]) {
+    opacity: 0.45;
+  }
+
+  :where([data-control-family="pagination"][data-slot="link"]:has(> svg:first-child)) {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="pagination"][data-slot="link"]:has(> svg:last-child)) {
+    padding-inline-end: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="pagination"][data-slot="ellipsis"]) {
+    color: var(--muted-foreground);
+  }
+}
+
+@property --cui-pagination-link-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-pagination-link-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-pagination-link-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-pagination-link-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-pagination-link-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/phone-input.css

@@ -0,0 +1,105 @@
+@layer components {
+  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="root"]) {
+    --cui-phone-input-country-border-color: var(--border);
+    --cui-phone-input-trigger-hover-background: oklch(from var(--foreground) l c h / 0.06);
+    --cui-phone-input-trigger-focus-background: oklch(from var(--foreground) l c h / 0.06);
+    --cui-phone-input-metadata-foreground: var(--muted-foreground);
+    --cui-phone-input-chevron-foreground: var(--muted-foreground);
+  }
+  :where([data-control-family="field"][data-phone-input-country]) {
+    border-inline-end: 1px solid var(--cui-phone-input-country-border-color);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="phone-input"][data-slot="country-trigger"]:hover) {
+      background-color: var(--cui-phone-input-trigger-hover-background);
+    }
+  }
+
+  :where([data-control-family="phone-input"][data-slot="country-trigger"]:focus-visible) {
+    background-color: var(--cui-phone-input-trigger-focus-background);
+  }
+
+  :where([data-control-family="phone-input"][data-slot="country-trigger"]:disabled) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="phone-input"][data-slot="flag"]) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 3.5);
+    border-radius: 2px;
+    color: var(--muted-foreground);
+  }
+
+  :where([data-control-family="phone-input"][data-slot="metadata"]) {
+    color: var(--cui-phone-input-metadata-foreground);
+    font-size: var(--text-caption);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="phone-input"][data-slot="country-code"]) {
+    color: currentColor;
+    font-size: var(--text-caption);
+  }
+
+  :where([data-control-family="phone-input"][data-slot="chevron"]) {
+    --_phone-input-chevron-rotate: 0deg;
+    color: var(--cui-phone-input-chevron-foreground);
+    transition-property: transform, translate, scale, rotate;
+    transition-duration: var(--duration-base);
+    rotate: var(--_phone-input-chevron-rotate);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="phone-input"][data-slot="chevron"][data-open]) {
+    --_phone-input-chevron-rotate: 180deg;
+  }
+
+  :where([data-control-family="phone-input"][data-slot="check"]:not([data-visible])) {
+    opacity: 0;
+  }
+
+  :where([data-control-family="phone-input"][data-slot="country-trigger"]) {
+    min-inline-size: calc(var(--spacing) * 14);
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 3);
+    outline-style: none;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-timing-function: var(--ease-standard);
+    transition-duration: var(--duration-fast);
+  }
+
+  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]) {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+@property --cui-phone-input-country-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-phone-input-trigger-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-phone-input-trigger-focus-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-phone-input-metadata-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-phone-input-chevron-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

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

@@ -0,0 +1,59 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-kind="alert-dialog"][data-slot="content"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="hover-card"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="navigation-menu"][data-slot="link"]) {
+    text-decoration-line: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="menubar"][data-slot="sub-trigger-indicator"]) {
+    line-height: 1;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"]) {
+    text-align: left;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-starting-style]) {
+    --_popup-rich-tooltip-content-opacity: 0%;
+    opacity: var(--_popup-rich-tooltip-content-opacity);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="content"][data-ending-style]) {
+    --_popup-rich-tooltip-content-opacity: 0%;
+    opacity: var(--_popup-rich-tooltip-content-opacity);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="rich-tooltip"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="dialog"][data-slot="content"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="color-picker"][data-slot="positioner"]) {
+    outline-style: none;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="context-menu"][data-slot="sub-trigger-indicator"]) {
+    line-height: 1;
+  }
+
+  :where([data-control-family="button"][data-slot="root"][data-popup-part="close"][data-icon-only="true"]) {
+    --_popup-button-root-close-opacity: 70%;
+    opacity: var(--_popup-button-root-close-opacity);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="button"][data-slot="root"][data-popup-part="close"][data-icon-only="true"]:hover) {
+      --_popup-button-root-close-opacity: 100%;
+      opacity: var(--_popup-button-root-close-opacity);
+    }
+  }
+}

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

@@ -0,0 +1,162 @@
+@layer components {
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-popup-part="surface"]) {
+    /* The sheet sits on the page surface, and its edge is a real border the variants size per side. */
+    --cui-popup-radius: var(--radius-panel);
+    --cui-popup-background: var(--background);
+    --cui-popup-foreground: var(--foreground);
+    --cui-popup-border-width: 0px;
+    --cui-popup-shadow: var(--shadow-modal);
+    --_drawer-content-closed-translate: 0 100%;
+    border: 0 solid var(--cui-popup-border-color);
+    border-radius: 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-popup-part="surface"][data-surface-variant="card"]) {
+    --cui-popup-background: var(--card);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"]) {
+    border-width: 1px;
+    border-radius: var(--cui-popup-radius);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="bottom"]) {
+    border-top-width: 1px;
+    border-radius: var(--cui-popup-radius) var(--cui-popup-radius) 0 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="top"]) {
+    border-bottom-width: 1px;
+    --_drawer-content-closed-translate: 0 -100%;
+    border-radius: 0 0 var(--cui-popup-radius) var(--cui-popup-radius);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="right"]) {
+    border-left-width: 1px;
+    --_drawer-content-closed-translate: 100% 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="edge"][data-side="left"]) {
+    border-right-width: 1px;
+    --_drawer-content-closed-translate: -100% 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"][data-side="bottom"]) {
+    --_drawer-content-closed-translate: 0 calc(100% + var(--_drawer-float-gap));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"][data-side="top"]) {
+    --_drawer-content-closed-translate: 0 calc(-100% - var(--_drawer-float-gap));
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"][data-side="right"]) {
+    --_drawer-content-closed-translate: calc(100% + var(--_drawer-float-gap)) 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-variant="floating"][data-side="left"]) {
+    --_drawer-content-closed-translate: calc(-100% - var(--_drawer-float-gap)) 0;
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="handle"]) {
+    margin-inline: auto;
+    block-size: calc(var(--spacing) * 1.5);
+    inline-size: calc(var(--spacing) * 12);
+    border-radius: 9999px;
+    background-color: oklch(from var(--muted-foreground) l c h / 0.3);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-side="bottom"] [data-slot="handle"]) {
+    margin-block: calc(var(--spacing) * 2.5) calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-side="top"] [data-slot="handle"]) {
+    order: 9999;
+    margin-block: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="scroll"]) {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="viewport"][data-variant="floating"]) {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="title"]) {
+    color: var(--foreground);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="description"]) {
+    color: var(--muted-foreground);
+    font-size: var(--text-sm);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"][data-side="bottom"]) {
+    padding-block-end: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"][data-side="top"]) {
+    padding-block-start: calc(var(--spacing) * 4);
+  }
+
+  :where(
+    [data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-padding="default"]:is(
+      [data-side="left"],
+      [data-side="right"]
+    )
+  ) {
+    padding-block: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="footer"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="header"]) {
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 4);
+    --_drawer-header-text-align: center;
+    text-align: var(--_drawer-header-text-align);
+  }
+
+  @media (width >= 40rem) {
+    :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="header"]) {
+      --_drawer-header-text-align: left;
+      text-align: var(--_drawer-header-text-align);
+    }
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 4);
+    outline-style: none;
+    transform: translate(var(--drawer-swipe-movement-x, 0), var(--drawer-swipe-movement-y, 0));
+    transition-property: transform, translate, scale, rotate;
+    --_drawer-content-transition-duration: var(--duration-base);
+    transition-duration: var(--_drawer-content-transition-duration);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-starting-style]),
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-ending-style]) {
+    translate: var(--_drawer-content-closed-translate);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="content"][data-swiping]) {
+    --_drawer-content-transition-duration: 0ms;
+    transition-duration: var(--_drawer-content-transition-duration);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="backdrop"]) {
+    transition-property: opacity;
+    transition-timing-function: var(--ease-standard);
+    --_drawer-backdrop-transition-duration: var(--duration-base);
+    transition-duration: var(--_drawer-backdrop-transition-duration);
+  }
+
+  :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="backdrop"][data-swiping]) {
+    --_drawer-backdrop-transition-duration: 0ms;
+    transition-duration: var(--_drawer-backdrop-transition-duration);
+  }
+}