@ctrl-ui/react 0.9.5 → 0.9.8

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/recipes/tree.css

@@ -10,6 +10,8 @@
     --cui-tree-item-trigger-font-size: var(--text-body);
     --cui-tree-item-trigger-selected-font-weight: var(--font-weight-normal);
     --cui-tree-indent-inset: 1.25rem;
+    --cui-tree-guide-background: transparent;
+    --cui-tree-guide-inline-size: 1px;
   }
 
   :where([data-control-family="tree"][data-slot="list"]) {
@@ -119,10 +121,29 @@
   }
 
   :where([data-control-family="tree"][data-slot="item-group"]) {
+    position: relative;
     translate: 0 0;
     transition: translate var(--duration-base) var(--ease-emphasized);
   }
 
+  :where([data-control-family="tree"][data-slot="item-group"])::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(
+      var(--_tree-level, 1) *
+      var(--cui-tree-indent-inset) +
+      var(--spacing) *
+      2 -
+      var(--cui-tree-guide-inline-size) /
+      2
+    );
+    inline-size: var(--cui-tree-guide-inline-size);
+    border-radius: var(--cui-tree-guide-inline-size);
+    background-color: var(--cui-tree-guide-background);
+    pointer-events: none;
+  }
+
   :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style]) > [data-slot="item-group"]) {
     translate: 0 calc(var(--spacing) * -1);
   }
@@ -187,3 +208,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-tree-guide-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-guide-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/theme.css

@@ -242,10 +242,15 @@
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
   --text-micro: 0.625rem;
+  --text-micro--line-height: 1.5;
   --text-caption: 0.6875rem;
+  --text-caption--line-height: 1.5;
   --text-label: 0.75rem;
+  --text-label--line-height: 1.5;
   --text-body: 0.875rem;
+  --text-body--line-height: 1.5;
   --text-body-lg: 1rem;
+  --text-body-lg--line-height: 1.5;
   --text-heading-4: 0.9375rem;
   --text-heading-4--line-height: 1.4;
   --text-heading-4--font-weight: 600;
@@ -421,7 +426,7 @@
 /* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
 
 @theme static {
-  --breakpoint-lg: 64rem;
+  --breakpoint-sidebar: 64rem;
 }
 
 @theme inline {
@@ -485,10 +490,15 @@
   --spacing-control-lg: var(--control-h-lg);
 
   --text-micro: var(--text-micro);
+  --text-micro--line-height: var(--text-micro--line-height);
   --text-caption: var(--text-caption);
+  --text-caption--line-height: var(--text-caption--line-height);
   --text-label: var(--text-label);
+  --text-label--line-height: var(--text-label--line-height);
   --text-body: var(--text-body);
+  --text-body--line-height: var(--text-body--line-height);
   --text-body-lg: var(--text-body-lg);
+  --text-body-lg--line-height: var(--text-body-lg--line-height);
   --text-heading-4: var(--text-heading-4);
   --text-heading-4--line-height: var(--text-heading-4--line-height);
   --text-heading-4--font-weight: var(--text-heading-4--font-weight);
@@ -685,8 +695,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 +704,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 +715,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/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