@ctrl-ui/react 0.9.5 → 0.9.6

package/dist/styles/recipes/swap.css

@@ -0,0 +1,143 @@
+@layer components {
+  :where([data-control-family="swap"][data-slot="root"]) {
+    --cui-swap-animation-duration: var(--duration-slow);
+    --cui-swap-easing: var(--ease-emphasized);
+    --cui-swap-label-inset: 60%;
+    --cui-swap-icon-scale: 0.5;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+    inline-size: var(--_swap-inline-size, auto);
+    transition: inline-size var(--cui-swap-animation-duration) var(--cui-swap-easing);
+  }
+
+  :where([data-control-family="swap"][data-slot="item"]) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: inherit;
+    white-space: nowrap;
+  }
+
+  :where([data-control-family="swap"][data-slot="item"]:not([data-state="active"])) {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :where([data-control-family="swap"][data-slot="item"][data-state="inactive"]) {
+    visibility: hidden;
+  }
+
+  :where([data-control-family="swap"][data-slot="label"]) {
+    display: inline-block;
+  }
+
+  :where([data-control-family="swap"][data-swapped] > [data-slot="item"][data-state="active"]) {
+    animation: cui-swap-item-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where([data-control-family="swap"][data-swapped] > [data-slot="item"][data-state="exiting"]) {
+    animation: cui-swap-item-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="active"]
+      > :not(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-label-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="exiting"]
+      > :not(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-label-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="active"]
+      > :is(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-icon-enter var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+
+  :where(
+    [data-control-family="swap"][data-swapped]
+      > [data-slot="item"][data-state="exiting"]
+      > :is(svg, [data-slot="icon"], [data-control-family="spinner"])
+  ) {
+    animation: cui-swap-icon-exit var(--cui-swap-animation-duration) var(--cui-swap-easing) both;
+  }
+}
+
+@keyframes cui-swap-item-enter {
+  from {
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+  }
+}
+
+@keyframes cui-swap-item-exit {
+  from {
+    opacity: 1;
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    filter: blur(var(--blur-xs));
+  }
+}
+
+@keyframes cui-swap-label-enter {
+  from {
+    translate: 0 var(--cui-swap-label-inset);
+  }
+}
+
+@keyframes cui-swap-label-exit {
+  to {
+    translate: 0 calc(var(--cui-swap-label-inset) * -1);
+  }
+}
+
+@keyframes cui-swap-icon-enter {
+  from {
+    scale: var(--cui-swap-icon-scale);
+  }
+}
+
+@keyframes cui-swap-icon-exit {
+  to {
+    scale: var(--cui-swap-icon-scale);
+  }
+}
+
+@property --cui-swap-animation-duration {
+  syntax: "<time>";
+  inherits: true;
+  initial-value: 0s;
+}
+
+@property --cui-swap-easing {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-swap-label-inset {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-swap-icon-scale {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}

package/dist/styles/recipes/timeline.css

@@ -3,6 +3,7 @@
     --cui-timeline-indicator-background: var(--background);
     --cui-timeline-indicator-foreground: var(--muted-foreground);
     --cui-timeline-running-foreground: var(--primary-text);
+    --cui-timeline-waiting-foreground: var(--warning-text);
     --cui-timeline-success-foreground: var(--foreground);
     --cui-timeline-error-foreground: var(--destructive-text);
     --cui-timeline-separator-background: var(--border);
@@ -38,6 +39,10 @@
     color: var(--cui-timeline-running-foreground);
   }
 
+  :where([data-control-family="timeline"][data-slot="item"][data-state="waiting"] [data-control-family="timeline"][data-slot="indicator"]) {
+    color: var(--cui-timeline-waiting-foreground);
+  }
+
   :where([data-control-family="timeline"][data-slot="item"][data-state="success"] [data-control-family="timeline"][data-slot="indicator"]) {
     color: var(--cui-timeline-success-foreground);
   }
@@ -84,6 +89,12 @@
   initial-value: transparent;
 }
 
+@property --cui-timeline-waiting-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 @property --cui-timeline-success-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/tool-approval.css

@@ -0,0 +1,267 @@
+@layer components {
+  :where([data-control-family="tool-approval"][data-slot="root"]) {
+    --cui-tool-approval-background: var(--card);
+    --cui-tool-approval-foreground: var(--card-foreground);
+    --cui-tool-approval-border-color: var(--border);
+    --cui-tool-approval-border-width: var(--control-rim-width);
+    --cui-tool-approval-radius: var(--radius-lg);
+    --cui-tool-approval-shadow: var(--shadow-sm);
+    --cui-tool-approval-padding: 0px;
+    --cui-tool-approval-body-background: transparent;
+    --cui-tool-approval-body-border-color: transparent;
+    --cui-tool-approval-body-border-width: 0px;
+    --cui-tool-approval-body-radius: var(--radius-lg);
+    --cui-tool-approval-body-shadow: 0 0 transparent;
+    --cui-tool-approval-body-padding: calc(var(--spacing) * 3);
+    --cui-tool-approval-body-gap: calc(var(--spacing) * 3);
+    --cui-tool-approval-footer-border-color: var(--border);
+    --cui-tool-approval-footer-border-width: var(--control-rim-width);
+    --cui-tool-approval-footer-padding: calc(var(--spacing) * 2.5);
+    --cui-tool-approval-footer-gap: calc(var(--spacing) * 2);
+    --cui-tool-approval-preview-background: transparent;
+    --cui-tool-approval-preview-border-color: transparent;
+    --cui-tool-approval-preview-border-width: 0px;
+    --cui-tool-approval-preview-radius: var(--radius-md);
+    --cui-tool-approval-preview-padding: 0px;
+    --cui-tool-approval-preview-gap: calc(var(--spacing) * 1.5);
+    --cui-tool-approval-label-foreground: var(--muted-foreground);
+    --cui-tool-approval-description-foreground: var(--muted-foreground);
+    --cui-tool-approval-status-foreground: var(--muted-foreground);
+    display: grid;
+    padding: var(--cui-tool-approval-padding);
+    border-radius: var(--cui-tool-approval-radius);
+    background: var(--cui-tool-approval-background);
+    color: var(--cui-tool-approval-foreground);
+    box-shadow:
+      inset 0 0 0 var(--cui-tool-approval-border-width) var(--cui-tool-approval-border-color),
+      var(--cui-tool-approval-shadow);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="body"]) {
+    display: grid;
+    gap: var(--cui-tool-approval-body-gap);
+    padding: var(--cui-tool-approval-body-padding);
+    border-radius: var(--cui-tool-approval-body-radius);
+    background: var(--cui-tool-approval-body-background);
+    box-shadow:
+      inset 0 0 0 var(--cui-tool-approval-body-border-width) var(--cui-tool-approval-body-border-color),
+      var(--cui-tool-approval-body-shadow);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="footer"]) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--cui-tool-approval-footer-gap);
+    padding: var(--cui-tool-approval-footer-padding);
+    border-block-start: var(--cui-tool-approval-footer-border-width) solid var(--cui-tool-approval-footer-border-color);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="preview"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: calc(var(--spacing) * 4);
+    row-gap: var(--cui-tool-approval-preview-gap);
+    padding: var(--cui-tool-approval-preview-padding);
+    border-radius: var(--cui-tool-approval-preview-radius);
+    background: var(--cui-tool-approval-preview-background);
+    box-shadow: inset 0 0 0 var(--cui-tool-approval-preview-border-width) var(--cui-tool-approval-preview-border-color);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="field"]) {
+    display: contents;
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="field-label"]) {
+    color: var(--cui-tool-approval-label-foreground);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="description"]) {
+    color: var(--cui-tool-approval-description-foreground);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="status"]) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing);
+    color: var(--cui-tool-approval-status-foreground);
+    transition-property: opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-emphasized);
+  }
+
+  @starting-style {
+    :where([data-control-family="tool-approval"][data-slot="status"]) {
+      opacity: 0;
+    }
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="root"][data-state="approved"] [data-slot="status-icon"]) {
+    color: var(--success-text);
+  }
+
+  :where([data-control-family="tool-approval"][data-slot="root"][data-state="denied"] [data-slot="status-icon"]) {
+    color: var(--destructive-text);
+  }
+}
+
+@property --cui-tool-approval-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-tool-approval-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-body-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-body-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-body-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-body-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-body-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-tool-approval-body-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-body-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-footer-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-footer-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-footer-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-footer-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-preview-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-preview-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-preview-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-preview-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-preview-padding {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-preview-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tool-approval-label-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-description-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tool-approval-status-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/track-highlight.css

@@ -62,8 +62,7 @@
         [data-control-family="checkbox-group"]
       )
       > [data-control-family="track-highlight"]
-  ),
-  :where([data-track]:has(> [data-control-family="button"][data-track-item]) > [data-control-family="track-highlight"]) {
+  ) {
     --cui-track-highlight-radius: var(--radius-control);
   }
 
@@ -73,13 +72,17 @@
   }
 
   @media (hover: hover) {
-    :where([data-control-family="button-group"][data-track="hover"]:has(> :first-child:hover)) {
+    :where(
+        [data-control-family="button-group"][data-track="hover"]:has(
+          > :nth-child(1 of :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])):hover
+        )
+      ) {
       --_button-group-leading-cap: 1;
     }
 
     :where(
         [data-control-family="button-group"][data-track="hover"]:has(
-          > :nth-last-child(1 of :not([data-control-family="track-highlight"])):hover
+          > :nth-last-child(1 of :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])):hover
         )
       ) {
       --_button-group-trailing-cap: 1;
@@ -91,13 +94,23 @@
     --_button-group-trailing-cap: 0;
   }
 
-  :where([data-control-family="button-group"][data-track="hover"]:has(> :first-child:is(:focus-visible, :has(:focus-visible)))) {
+  :where(
+    [data-control-family="button-group"][data-track="hover"]:has(
+      > :nth-child(1 of :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])):is(
+          :focus-visible,
+          :has(:focus-visible)
+        )
+    )
+  ) {
     --_button-group-leading-cap: 1;
   }
 
   :where(
     [data-control-family="button-group"][data-track="hover"]:has(
-      > :nth-last-child(1 of :not([data-control-family="track-highlight"])):is(:focus-visible, :has(:focus-visible))
+      > :nth-last-child(1 of :not([data-control-family="track-highlight"], [data-base-ui-focus-guard], span[aria-owns])):is(
+          :focus-visible,
+          :has(:focus-visible)
+        )
     )
   ) {
     --_button-group-trailing-cap: 1;

package/dist/styles/theme.css

@@ -685,8 +685,8 @@
 }
 
 @layer components {
-  :where([data-control-family]):focus-visible,
-  :where([data-control-family][data-control="true"]):has(:focus-visible),
+  :where([data-control-family]:not([data-focus-ring="none"])):focus-visible,
+  :where([data-control-family][data-control="true"]:not([data-focus-ring="none"])):has(:focus-visible),
   :where([data-control-family][data-focus-ring="within"]):has(:focus-visible) {
     outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
     outline-offset: var(--focus-ring-offset);
@@ -694,7 +694,8 @@
 
   :where(
     [data-control-family][data-control="true"] [data-control-family],
-    [data-control-family][data-focus-ring="within"] [data-control-family]
+    [data-control-family][data-focus-ring="within"] [data-control-family],
+    [data-control-family][data-focus-ring="none"] [data-control-family]
   ):focus-visible {
     outline-width: 0;
   }
@@ -704,8 +705,8 @@
   }
 
   @media (forced-colors: active) {
-    :where([data-control-family]):focus-visible,
-    :where([data-control-family][data-control="true"]):has(:focus-visible),
+    :where([data-control-family]:not([data-focus-ring="none"])):focus-visible,
+    :where([data-control-family][data-control="true"]:not([data-focus-ring="none"])):has(:focus-visible),
     :where([data-control-family][data-focus-ring="within"]):has(:focus-visible) {
       outline-color: Highlight;
     }

package/dist/styles/type-scale.css

@@ -66,7 +66,7 @@
 /*
  * History: fixed 3 competing type systems (Tailwind defaults + named rungs + raw text-[Npx]) into one rung/role; 14px = body.
  * Usage: React text goes through <Text>/<Heading> (ui/typography): size, tone and weight are props, className stays layout-only.
- * A bare rung is for markup React doesn't render as components (MDX, markdown, email HTML), e.g. text-heading-1 on <h1>.
+ * A bare rung is for HTML React doesn't render as components (email HTML, injected markdown); MDX maps its tags to <Heading>/<Text>.
  * Heading LEVEL is the document outline; the RUNG is the look. They are decoupled on purpose: an <h3> may wear text-heading-2.
  * Control chrome text is sized by its recipe (`--cui-button-font-size`, `--cui-field-font-size`), not by these utilities.
  */

package/dist/tool-approval.d.ts

@@ -0,0 +1,49 @@
+import { RenderProp } from "./control-props.js";
+import { Button } from "./ui/button.js";
+import { ToolApprovalKnobStyle } from "./knob-contracts/tool-approval-knobs.js";
+import { Badge } from "./ui/badge.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/tool-approval.d.ts
+export type ToolApprovalState = "pending" | "approved" | "denied";
+export type ToolApprovalRiskLevel = "low" | "medium" | "high";
+type ToolApprovalStyleProps<Props> = Omit<Props, "style"> & {
+  style?: CSSProperties & ToolApprovalKnobStyle;
+};
+export type ToolApprovalProps = ToolApprovalStyleProps<ComponentProps<"section">> & {
+  state?: ToolApprovalState;
+  risk?: ToolApprovalRiskLevel;
+  onApprove?: () => void;
+  onDeny?: () => void;
+  autoFocus?: boolean;
+};
+export declare function ToolApproval({ state, risk, onApprove, onDeny, autoFocus, className, children, onKeyDown, ...props }: ToolApprovalProps): import("react").JSX.Element;
+export type ToolApprovalBodyProps = ToolApprovalStyleProps<ComponentProps<"div">>;
+export declare function ToolApprovalBody({ className, ...props }: ToolApprovalBodyProps): import("react").JSX.Element;
+export type ToolApprovalHeaderProps = ToolApprovalStyleProps<ComponentProps<"div">>;
+export declare function ToolApprovalHeader({ className, ...props }: ToolApprovalHeaderProps): import("react").JSX.Element;
+export type ToolApprovalIconProps = ToolApprovalStyleProps<ComponentProps<"span">>;
+export declare function ToolApprovalIcon({ className, children, ...props }: ToolApprovalIconProps): import("react").JSX.Element;
+export type ToolApprovalTitleProps = ToolApprovalStyleProps<ComponentProps<"div">> & {
+  render?: RenderProp<ComponentProps<"div">>;
+};
+export declare function ToolApprovalTitle({ render, className, ...props }: ToolApprovalTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ToolApprovalRiskProps = Omit<ComponentProps<typeof Badge>, "color">;
+export declare function ToolApprovalRisk({ children, ...props }: ToolApprovalRiskProps): import("react").JSX.Element | null;
+export type ToolApprovalStatusProps = ToolApprovalStyleProps<ComponentProps<"div">>;
+export declare function ToolApprovalStatus({ className, children, ...props }: ToolApprovalStatusProps): import("react").JSX.Element | null;
+export type ToolApprovalDescriptionProps = ToolApprovalStyleProps<ComponentProps<"p">>;
+export declare function ToolApprovalDescription({ className, ...props }: ToolApprovalDescriptionProps): import("react").JSX.Element | null;
+export type ToolApprovalPreviewProps = ToolApprovalStyleProps<ComponentProps<"dl">>;
+export declare function ToolApprovalPreview({ className, ...props }: ToolApprovalPreviewProps): import("react").JSX.Element | null;
+export type ToolApprovalFieldProps = Omit<ToolApprovalStyleProps<ComponentProps<"div">>, "children"> & {
+  label: ReactNode;
+  children: ReactNode;
+};
+export declare function ToolApprovalField({ label, children, className, ...props }: ToolApprovalFieldProps): import("react").JSX.Element;
+export type ToolApprovalFooterProps = ToolApprovalStyleProps<ComponentProps<"div">>;
+export declare function ToolApprovalFooter({ className, ...props }: ToolApprovalFooterProps): import("react").JSX.Element | null;
+export type ToolApprovalDenyProps = ComponentProps<typeof Button>;
+export declare function ToolApprovalDeny({ children, onClick, ...props }: ToolApprovalDenyProps): import("react").JSX.Element;
+export type ToolApprovalApproveProps = ComponentProps<typeof Button>;
+export declare function ToolApprovalApprove({ children, onClick, ...props }: ToolApprovalApproveProps): import("react").JSX.Element;
+//#endregion