@ctrl-ui/react 0.9.14 → 0.9.15

package/dist/control-variants.d.ts

@@ -1,6 +1,6 @@
 //#region src/control-variants.d.ts
 export type ControlSize = "xs" | "sm" | "md" | "lg";
-export declare const buttonVariants: readonly ["solid", "surface", "ghost", "quiet", "dashed", "link"];
+export declare const buttonVariants: readonly ["solid", "surface", "ghost", "quiet", "dashed", "link", "scrim"];
 export type ButtonVariant = (typeof buttonVariants)[number];
 export declare const controlTones: readonly ["neutral", "primary", "danger"];
 export type ControlTone = (typeof controlTones)[number];

package/dist/control-variants.js

@@ -5,7 +5,8 @@ const buttonVariants = [
 	"ghost",
 	"quiet",
 	"dashed",
-	"link"
+	"link",
+	"scrim"
 ];
 const controlTones = [
 	"neutral",

package/dist/knob-contracts/button-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/button-knobs.d.ts
-export declare const buttonKnobs: readonly ["--cui-button-press-background", "--cui-button-press-scale", "--cui-button-hover-border-color", "--cui-button-open-border-color", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow", "--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-padding-block", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-hover-background-image", "--cui-button-foreground", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-shadow", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-border-width", "--cui-button-border-style", "--cui-button-border-color"];
+export declare const buttonKnobs: readonly ["--cui-button-press-background", "--cui-button-press-scale", "--cui-button-hover-border-color", "--cui-button-open-border-color", "--cui-button-open-background", "--cui-button-open-foreground", "--cui-button-open-shadow", "--cui-button-hover-background-image", "--cui-button-hover-background", "--cui-button-hover-foreground", "--cui-button-active-background", "--cui-button-active-foreground", "--cui-button-active-hover-background", "--cui-button-hover-shadow", "--cui-button-press-shadow", "--cui-button-active-shadow", "--cui-button-radius", "--cui-button-gap", "--cui-button-icon", "--cui-button-height", "--cui-button-padding-inline", "--cui-button-padding-block", "--cui-button-icon-padding-inline", "--cui-button-font-size", "--cui-button-font-weight", "--cui-button-background", "--cui-button-background-image", "--cui-button-foreground", "--cui-button-shadow", "--cui-button-border-width", "--cui-button-border-style", "--cui-button-border-color", "--cui-button-backdrop-filter"];
 export type ButtonKnobStyle = Partial<Record<(typeof buttonKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/button-knobs.js

@@ -7,6 +7,15 @@ const buttonKnobs = [
 	"--cui-button-open-background",
 	"--cui-button-open-foreground",
 	"--cui-button-open-shadow",
+	"--cui-button-hover-background-image",
+	"--cui-button-hover-background",
+	"--cui-button-hover-foreground",
+	"--cui-button-active-background",
+	"--cui-button-active-foreground",
+	"--cui-button-active-hover-background",
+	"--cui-button-hover-shadow",
+	"--cui-button-press-shadow",
+	"--cui-button-active-shadow",
 	"--cui-button-radius",
 	"--cui-button-gap",
 	"--cui-button-icon",
@@ -18,20 +27,12 @@ const buttonKnobs = [
 	"--cui-button-font-weight",
 	"--cui-button-background",
 	"--cui-button-background-image",
-	"--cui-button-hover-background-image",
 	"--cui-button-foreground",
-	"--cui-button-hover-background",
-	"--cui-button-hover-foreground",
-	"--cui-button-active-background",
-	"--cui-button-active-foreground",
-	"--cui-button-active-hover-background",
 	"--cui-button-shadow",
-	"--cui-button-hover-shadow",
-	"--cui-button-press-shadow",
-	"--cui-button-active-shadow",
 	"--cui-button-border-width",
 	"--cui-button-border-style",
-	"--cui-button-border-color"
+	"--cui-button-border-color",
+	"--cui-button-backdrop-filter"
 ];
 //#endregion
 export { buttonKnobs };

package/dist/knob-contracts/reveal-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/reveal-knobs.d.ts
+export declare const revealKnobs: readonly ["--cui-reveal-hidden-opacity"];
+export type RevealKnobStyle = Partial<Record<(typeof revealKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/reveal-knobs.js

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/reveal-knobs.ts
+const revealKnobs = ["--cui-reveal-hidden-opacity"];
+//#endregion
+export { revealKnobs };

package/dist/styles/index.css

@@ -84,6 +84,7 @@
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
 @import "./recipes/resize-handle.css";
+@import "./recipes/reveal.css";
 @import "./recipes/rich-tooltip.css";
 @import "./recipes/skeleton.css";
 @import "./recipes/stepper.css";

package/dist/styles/recipes/button-states.css

@@ -125,3 +125,53 @@
   syntax: "*";
   inherits: true;
 }
+
+@property --cui-button-hover-background-image {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-button-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-hover-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-active-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-active-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-active-hover-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-button-hover-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-button-press-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-button-active-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/button.css

@@ -56,10 +56,12 @@
     --cui-button-border-color: var(--control-rim);
     --cui-button-hover-border-color: var(--cui-button-border-color);
     --cui-button-open-border-color: var(--cui-button-hover-border-color);
+    --cui-button-backdrop-filter: none;
     border: var(--cui-button-border-width) var(--cui-button-border-style) var(--cui-button-border-color);
     border-radius: var(--cui-button-radius);
     background-color: var(--cui-button-background);
     background-image: var(--cui-button-background-image);
+    backdrop-filter: var(--cui-button-backdrop-filter);
     box-shadow: var(--cui-button-shadow);
     color: var(--cui-button-foreground);
     cursor: pointer;
@@ -193,6 +195,16 @@
     --cui-button-hover-background: transparent;
   }
 
+  :where([data-control-family="button"][data-variant="scrim"]) {
+    --cui-button-background: oklch(0 0 0 / 0.6);
+    --cui-button-foreground: oklch(1 0 0);
+    --cui-button-hover-background: oklch(0 0 0 / 0.8);
+    --cui-button-hover-foreground: var(--cui-button-foreground);
+    --cui-button-active-background: var(--cui-button-foreground);
+    --cui-button-active-foreground: oklch(0 0 0);
+    --cui-button-backdrop-filter: blur(8px);
+  }
+
   :where([data-control-family="button"]:is([data-variant="surface"], [data-variant="ghost"], [data-variant="quiet"])) {
     --cui-button-open-background: oklch(from var(--foreground) l c h / 0.07);
   }
@@ -210,7 +222,7 @@
     }
   }
 
-  :where([data-control-family="button"][data-tone="primary"]:not([data-variant="solid"])) {
+  :where([data-control-family="button"][data-tone="primary"]:not([data-variant="solid"], [data-variant="scrim"])) {
     --cui-button-foreground: var(--primary-text);
     --cui-button-hover-foreground: var(--primary-text);
     --cui-button-active-foreground: var(--primary-text);
@@ -226,7 +238,7 @@
     --cui-button-active-hover-background: var(--cui-button-hover-background);
   }
 
-  :where([data-control-family="button"][data-tone="danger"]:not([data-variant="solid"])) {
+  :where([data-control-family="button"][data-tone="danger"]:not([data-variant="solid"], [data-variant="scrim"])) {
     --cui-button-foreground: var(--destructive-text);
     --cui-button-hover-foreground: var(--destructive-text);
     --cui-button-active-foreground: var(--destructive-text);
@@ -316,67 +328,17 @@
   inherits: true;
 }
 
-@property --cui-button-hover-background-image {
-  syntax: "*";
-  inherits: true;
-}
-
 @property --cui-button-foreground {
   syntax: "<color>";
   inherits: true;
   initial-value: transparent;
 }
 
-@property --cui-button-hover-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-hover-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-active-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-active-foreground {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
-@property --cui-button-active-hover-background {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: transparent;
-}
-
 @property --cui-button-shadow {
   syntax: "*";
   inherits: true;
 }
 
-@property --cui-button-hover-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
-@property --cui-button-press-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
-@property --cui-button-active-shadow {
-  syntax: "*";
-  inherits: true;
-}
-
 @property --cui-button-border-width {
   syntax: "<length>";
   inherits: true;
@@ -393,3 +355,8 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-button-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/infinite-canvas.css

@@ -26,6 +26,14 @@
     --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
+  :where([data-control-family="infinite-canvas"][data-slot="root"][data-pan-ready]:not([data-panning])) {
+    cursor: grab;
+  }
+
+  :where([data-control-family="infinite-canvas"][data-slot="root"][data-panning]) {
+    cursor: grabbing;
+  }
+
   :where([data-control-family="infinite-canvas"][data-slot="root"][data-easing]) {
     transition-property: background-position, background-size;
     transition-duration: var(--duration-base);

package/dist/styles/recipes/reveal.css

@@ -0,0 +1,26 @@
+@layer components {
+  :where([data-control-family="reveal"][data-slot="scope"]) {
+    --cui-reveal-hidden-opacity: 0;
+  }
+
+  :where([data-control-family="reveal"][data-slot="content"]) {
+    transition-property: opacity;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where(
+        [data-control-family="reveal"][data-slot="scope"]:not(:hover, :focus-within, :has([data-popup-open]))
+          [data-control-family="reveal"][data-slot="content"]
+      ) {
+      opacity: var(--cui-reveal-hidden-opacity);
+    }
+  }
+}
+
+@property --cui-reveal-hidden-opacity {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}

package/dist/ui/reveal.d.ts

@@ -0,0 +1,15 @@
+import { RenderProp } from "../control-props.js";
+import { RevealKnobStyle } from "../knob-contracts/reveal-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/reveal.d.ts
+export type RevealScopeProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
+  style?: CSSProperties & RevealKnobStyle;
+};
+export type RevealProps = Omit<ComponentProps<"span">, "style"> & {
+  render?: RenderProp<ComponentProps<"span">>;
+  style?: CSSProperties & RevealKnobStyle;
+};
+export declare function RevealScope({ render, ...props }: RevealScopeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function Reveal({ render, ...props }: RevealProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/ui/reveal.js

@@ -0,0 +1,29 @@
+"use client";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/ui/reveal.tsx
+function RevealScope({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "reveal",
+			"data-control-family": "reveal",
+			"data-slot": "scope"
+		}
+	});
+}
+function Reveal({ render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "reveal",
+			"data-control-family": "reveal",
+			"data-slot": "content"
+		}
+	});
+}
+//#endregion
+export { Reveal, RevealScope };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "description": "100+ React components for Tailwind CSS and shadcn/ui: pickers, trees, editors, canvases, app templates, and AI chat surfaces, with neutral defaults and consumer-owned themes.",
   "keywords": [
     "react",