@optimizely-opal/opal-tools-sdk 0.1.8-dev → 0.1.10-dev

package/dist/proteus.d.ts

@@ -3,7 +3,7 @@
  * DO NOT MODIFY - This file is auto-generated from proteus-document-spec.json
  * Run 'npm run generate:proteus' to regenerate
  */
-export type OpalProteusDocumentSpecification = ProteusAction | ProteusAtomicCondition | ProteusCancelAction | ProteusCondition | ProteusDocument | ProteusElement | ProteusEventHandler | ProteusField | ProteusGroup | ProteusHeading | ProteusImage | ProteusInput | ProteusLink | ProteusMap | ProteusNode | ProteusRange | ProteusSelect | ProteusSelectContent | ProteusSelectTrigger | ProteusSeparator | ProteusShow | ProteusText | ProteusTextarea | ProteusValue;
+export type OpalProteusDocumentSpecification = ProteusAction | ProteusAtomicCondition | ProteusBadge | ProteusCancelAction | ProteusChart | ProteusCondition | ProteusDataTable | ProteusDocument | ProteusElement | ProteusEventHandler | ProteusField | ProteusGroup | ProteusHeading | ProteusImage | ProteusInput | ProteusLink | ProteusMap | ProteusNode | ProteusRange | ProteusSelect | ProteusSelectContent | ProteusSelectTrigger | ProteusSeparator | ProteusShow | ProteusText | ProteusTextarea | ProteusTime | ProteusValue;
 export interface ProteusAction {
     $type: "Action";
     alignItems?: SprinklePropAlignItems;
@@ -12,7 +12,7 @@ export interface ProteusAction {
     /**
      * Control the appearance by selecting between the different button types.
      */
-    appearance?: "danger" | "danger-outline" | "default" | "default-opal" | "inverse" | "primary" | "primary-opal" | "subtle";
+    appearance?: "danger" | "danger-outline" | "default" | "default-opal" | "inverse" | "primary" | "primary-opal" | "subtle" | ProteusValue;
     backgroundImage?: SprinklePropBackgroundImage;
     bg?: SprinklePropBg;
     border?: SprinklePropBorder;
@@ -60,6 +60,15 @@ export interface ProteusAction {
          * Name of registered tool to call
          */
         tool: string;
+    } | {
+        /**
+         * The action type
+         */
+        action: "download";
+        /**
+         * URL to download
+         */
+        url: string;
     };
     overflow?: SprinklePropOverflow;
     overflowX?: SprinklePropOverflowX;
@@ -157,6 +166,71 @@ export type ProteusAtomicCondition = {
      */
     "!!": boolean | null | number | ProteusValue | string;
 };
+export interface ProteusBadge {
+    $type: "Badge";
+    alignItems?: SprinklePropAlignItems;
+    alignSelf?: SprinklePropAlignSelf;
+    animation?: SprinklePropAnimation;
+    backgroundImage?: SprinklePropBackgroundImage;
+    bg?: SprinklePropBg;
+    border?: SprinklePropBorder;
+    borderB?: SprinklePropBorderB;
+    borderColor?: SprinklePropBorderColor;
+    borderL?: SprinklePropBorderL;
+    borderR?: SprinklePropBorderR;
+    borderT?: SprinklePropBorderT;
+    children?: ProteusNode;
+    color?: SprinklePropColor;
+    cursor?: SprinklePropCursor;
+    display?: SprinklePropDisplay;
+    flex?: SprinklePropFlex;
+    flexDirection?: SprinklePropFlexDirection;
+    flexWrap?: SprinklePropFlexWrap;
+    fontFamily?: SprinklePropFontFamily;
+    fontSize?: SprinklePropFontSize;
+    fontWeight?: SprinklePropFontWeight;
+    gap?: SprinklePropGap;
+    gridColumn?: SprinklePropGridColumn;
+    gridTemplateColumns?: SprinklePropGridTemplateColumns;
+    h?: SprinklePropH;
+    /**
+     * Control the appearance by selecting between the different badge types.
+     */
+    intent?: "danger" | "information" | "neutral" | "primary" | "success" | "warning" | ProteusValue;
+    justifyContent?: SprinklePropJustifyContent;
+    justifyItems?: SprinklePropJustifyItems;
+    m?: SprinklePropM;
+    maxH?: SprinklePropMaxH;
+    maxW?: SprinklePropMaxW;
+    mb?: SprinklePropMb;
+    ml?: SprinklePropMl;
+    mr?: SprinklePropMr;
+    mt?: SprinklePropMt;
+    mx?: SprinklePropMx;
+    my?: SprinklePropMy;
+    objectFit?: SprinklePropObjectFit;
+    overflow?: SprinklePropOverflow;
+    overflowX?: SprinklePropOverflowX;
+    overflowY?: SprinklePropOverflowY;
+    p?: SprinklePropP;
+    pb?: SprinklePropPb;
+    pl?: SprinklePropPl;
+    placeItems?: SprinklePropPlaceItems;
+    pointerEvents?: SprinklePropPointerEvents;
+    pr?: SprinklePropPr;
+    pt?: SprinklePropPt;
+    px?: SprinklePropPx;
+    py?: SprinklePropPy;
+    rounded?: SprinklePropRounded;
+    shadow?: SprinklePropShadow;
+    size?: SprinklePropSize;
+    textAlign?: SprinklePropTextAlign;
+    textTransform?: SprinklePropTextTransform;
+    transition?: SprinklePropTransition;
+    w?: SprinklePropW;
+    whiteSpace?: SprinklePropWhiteSpace;
+    z?: SprinklePropZ;
+}
 export interface ProteusCancelAction {
     $type: "CancelAction";
     alignItems?: SprinklePropAlignItems;
@@ -221,6 +295,44 @@ export interface ProteusCancelAction {
     whiteSpace?: SprinklePropWhiteSpace;
     z?: SprinklePropZ;
 }
+export interface ProteusChart {
+    $type: "Chart";
+    /**
+     * Chart data records, either inline or a ProteusValue reference
+     */
+    data?: ProteusValue | {
+        [k: string]: undefined | unknown;
+    }[];
+    /**
+     * Data series configuration
+     */
+    series?: {
+        /**
+         * Series color
+         */
+        color?: string;
+        /**
+         * Key in data records for this series
+         */
+        dataKey: string;
+        /**
+         * Key in data records for pre-formatted labels displayed above bars
+         */
+        labelKey?: string;
+        /**
+         * Display name for legend
+         */
+        name?: string;
+    }[];
+    /**
+     * Chart type
+     */
+    type?: "bar";
+    /**
+     * Key in data records for x-axis labels
+     */
+    xAxisKey?: string;
+}
 /**
  * Condition for Show component. Can be a comparison operator, logical AND, or logical OR. Supports nesting.
  */
@@ -249,40 +361,62 @@ export type ProteusCondition = ProteusAtomicCondition | {
         })[]
     ];
 };
+export interface ProteusDataTable {
+    $type: "DataTable";
+    /**
+     * Column definitions
+     */
+    columns?: {
+        /**
+         * Key in data objects
+         */
+        accessorKey: string;
+        /**
+         * Column header text
+         */
+        header: string;
+    }[];
+    data?: ProteusValue | {
+        [k: string]: undefined | unknown;
+    }[];
+}
 export interface ProteusDocument {
     $type: "Document";
     /**
      * Actions available for this document
      */
-    actions?: ProteusNode;
+    actions?: (boolean | null | number | ProteusElement | string)[] | boolean | null | number | ProteusElement | string;
     /**
-     * A visual representation of the application
+     * URL or data URI for the application icon (e.g., 'https://example.com/icon.png' or 'data:image/svg+xml,...'). Rendered as an <img> element.
      */
     appIcon?: string;
     /**
      * The official name of the application
      */
-    appName: string;
+    appName?: string;
     /**
      * If true, hides chat prompt and forces user interaction with document. User can press ESC or close to abandon.
      */
     blocking?: boolean;
-    body: ProteusNode;
     /**
-     * A brief description or tagline that provides additional context about the Proteus document's purpose.
+     * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
+     */
+    body: (boolean | null | number | ProteusElement | string)[] | boolean | null | number | ProteusElement | string;
+    /**
+     * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
      */
-    subtitle?: string;
+    subtitle?: (boolean | null | number | ProteusElement | string)[] | boolean | null | number | ProteusElement | string;
     /**
-     * A concise heading that encapsulates the essence of the Proteus document's content or intended action.
+     * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
      */
-    title: string;
+    title: (boolean | null | number | ProteusElement | string)[] | boolean | null | number | ProteusElement | string;
 }
 /**
  * A single Proteus UI component element identified by its $type discriminator
  */
-export type ProteusElement = ProteusAction | ProteusCancelAction | ProteusField | ProteusGroup | ProteusHeading | ProteusImage | ProteusInput | ProteusLink | ProteusMap | ProteusRange | ProteusSelect | ProteusSelectContent | ProteusSelectTrigger | ProteusSeparator | ProteusShow | ProteusText | ProteusTextarea | ProteusValue;
+export type ProteusElement = ProteusAction | ProteusBadge | ProteusCancelAction | ProteusChart | ProteusDataTable | ProteusField | ProteusGroup | ProteusHeading | ProteusImage | ProteusInput | ProteusLink | ProteusMap | ProteusRange | ProteusSelect | ProteusSelectContent | ProteusSelectTrigger | ProteusSeparator | ProteusShow | ProteusText | ProteusTextarea | ProteusTime | ProteusValue;
 /**
- * Handler for user interactions - either a server-side tool call or client-side message
+ * Handler for user interactions - a server-side tool call, client-side message, or client-side component action
  */
 export type ProteusEventHandler = {
     /**
@@ -294,6 +428,15 @@ export type ProteusEventHandler = {
      * Name of registered tool to call
      */
     tool: string;
+} | {
+    /**
+     * The action type
+     */
+    action: "download";
+    /**
+     * URL to download
+     */
+    url: string;
 };
 export interface ProteusField {
     $type: "Field";
@@ -361,7 +504,7 @@ export interface ProteusField {
     /**
      * Display an asterisk for required inputs.
      */
-    required?: boolean;
+    required?: boolean | ProteusValue;
     rounded?: SprinklePropRounded;
     shadow?: SprinklePropShadow;
     size?: SprinklePropSize;
@@ -378,7 +521,7 @@ export interface ProteusGroup {
      * Set the element's `align-items` CSS property. Defaults to `center` when
      * `flexDirection='row'`, and `stretch` when `flexDirection='column'`.
      */
-    alignItems?: "center" | "end" | "normal" | "start" | "stretch";
+    alignItems?: "center" | "end" | "normal" | "start" | "stretch" | ProteusValue;
     alignSelf?: SprinklePropAlignSelf;
     animation?: SprinklePropAnimation;
     backgroundImage?: SprinklePropBackgroundImage;
@@ -399,7 +542,7 @@ export interface ProteusGroup {
      *
      * Default: 'row' (CSS standard)
      */
-    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | ProteusValue;
     flexWrap?: SprinklePropFlexWrap;
     fontFamily?: SprinklePropFontFamily;
     fontSize?: SprinklePropFontSize;
@@ -480,7 +623,7 @@ export interface ProteusHeading {
      *
      * Use `asChild` to decouple the semantic level from visual appearance.
      */
-    level?: "1" | "2" | "3" | "4";
+    level?: "1" | "2" | "3" | "4" | ProteusValue;
     m?: SprinklePropM;
     maxH?: SprinklePropMaxH;
     maxW?: SprinklePropMaxW;
@@ -520,7 +663,7 @@ export interface ProteusImage {
     /**
      * Alternative text for the image
      */
-    alt?: string;
+    alt?: ProteusValue | string;
     animation?: SprinklePropAnimation;
     backgroundImage?: SprinklePropBackgroundImage;
     bg?: SprinklePropBg;
@@ -573,7 +716,7 @@ export interface ProteusImage {
     /**
      * The image source URL
      */
-    src?: string;
+    src?: ProteusValue | string;
     textAlign?: SprinklePropTextAlign;
     textTransform?: SprinklePropTextTransform;
     transition?: SprinklePropTransition;
@@ -597,7 +740,7 @@ export interface ProteusInput {
     /**
      * Control the appearance of the input.
      */
-    appearance?: "default" | "number";
+    appearance?: "default" | "number" | ProteusValue;
     backgroundImage?: SprinklePropBackgroundImage;
     bg?: SprinklePropBg;
     border?: SprinklePropBorder;
@@ -633,7 +776,7 @@ export interface ProteusInput {
     /**
      * The name of the form control element.
      */
-    name?: string;
+    name?: ProteusValue | string;
     objectFit?: SprinklePropObjectFit;
     overflow?: SprinklePropOverflow;
     overflowX?: SprinklePropOverflowX;
@@ -644,7 +787,7 @@ export interface ProteusInput {
     /**
      * The placeholder text to use when control has no value.
      */
-    placeholder?: string;
+    placeholder?: ProteusValue | string;
     placeItems?: SprinklePropPlaceItems;
     pointerEvents?: SprinklePropPointerEvents;
     pr?: SprinklePropPr;
@@ -659,7 +802,7 @@ export interface ProteusInput {
     /**
      * The input type.
      */
-    type?: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | string;
+    type?: "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | ProteusValue | string;
     w?: SprinklePropW;
     whiteSpace?: SprinklePropWhiteSpace;
     z?: SprinklePropZ;
@@ -694,7 +837,7 @@ export interface ProteusLink {
     /**
      * The link href.
      */
-    href?: string;
+    href?: ProteusValue | string;
     justifyContent?: SprinklePropJustifyContent;
     justifyItems?: SprinklePropJustifyItems;
     m?: SprinklePropM;
@@ -732,13 +875,11 @@ export interface ProteusLink {
 export interface ProteusMap {
     $type: "Map";
     /**
-     * Template object to render for each item in the array. Value paths are relative to current item.
+     * A Proteus node can be a string, number, boolean, null, a single element, or an array of these types (similar to ReactNode)
      */
-    children?: {
-        [k: string]: undefined | unknown;
-    };
+    children?: (boolean | null | number | ProteusElement | string)[] | boolean | null | number | ProteusElement | string;
     /**
-     * JSON pointer path to array (e.g., '/questions')
+     * JSON pointer path to the source array in the data (e.g., '/results')
      */
     path: string;
 }
@@ -791,14 +932,14 @@ export interface ProteusRange {
     /**
      * The maximum value for the range.
      */
-    max?: number;
+    max?: number | ProteusValue;
     maxH?: SprinklePropMaxH;
     maxW?: SprinklePropMaxW;
     mb?: SprinklePropMb;
     /**
      * The minimum value for the range.
      */
-    min?: number;
+    min?: number | ProteusValue;
     ml?: SprinklePropMl;
     mr?: SprinklePropMr;
     mt?: SprinklePropMt;
@@ -822,7 +963,7 @@ export interface ProteusRange {
     /**
      * The stepping interval for the range.
      */
-    step?: number;
+    step?: number | ProteusValue;
     textAlign?: SprinklePropTextAlign;
     textTransform?: SprinklePropTextTransform;
     transition?: SprinklePropTransition;
@@ -836,7 +977,7 @@ export interface ProteusSelect {
     /**
      * The name of the inner select element.
      */
-    name?: string;
+    name?: ProteusValue | string;
     /**
      * The select items/options we want to render.
      */
@@ -1070,6 +1211,10 @@ export interface ProteusText {
     h?: SprinklePropH;
     justifyContent?: SprinklePropJustifyContent;
     justifyItems?: SprinklePropJustifyItems;
+    /**
+     * Truncate the text at specific number of lines.
+     */
+    lineClamp?: "1" | "2" | "3" | "4" | ProteusValue;
     m?: SprinklePropM;
     maxH?: SprinklePropMaxH;
     maxW?: SprinklePropMaxW;
@@ -1098,6 +1243,10 @@ export interface ProteusText {
     textAlign?: SprinklePropTextAlign;
     textTransform?: SprinklePropTextTransform;
     transition?: SprinklePropTransition;
+    /**
+     * Whether to truncate the text and add an ellipsis at the end.
+     */
+    truncate?: boolean | ProteusValue;
     w?: SprinklePropW;
     whiteSpace?: SprinklePropWhiteSpace;
     z?: SprinklePropZ;
@@ -1135,7 +1284,7 @@ export interface ProteusTextarea {
     /**
      * Limits the height of the textarea when `resize=auto` is used.
      */
-    maxRows?: 1 | 2 | 3 | 4 | 5;
+    maxRows?: 1 | 2 | 3 | 4 | 5 | ProteusValue;
     maxW?: SprinklePropMaxW;
     mb?: SprinklePropMb;
     ml?: SprinklePropMl;
@@ -1146,7 +1295,7 @@ export interface ProteusTextarea {
     /**
      * The name of the form control element.
      */
-    name?: string;
+    name?: ProteusValue | string;
     objectFit?: SprinklePropObjectFit;
     overflow?: SprinklePropOverflow;
     overflowX?: SprinklePropOverflowX;
@@ -1157,7 +1306,7 @@ export interface ProteusTextarea {
     /**
      * The placeholder text to use when control has no value.
      */
-    placeholder?: string;
+    placeholder?: ProteusValue | string;
     placeItems?: SprinklePropPlaceItems;
     pointerEvents?: SprinklePropPointerEvents;
     pr?: SprinklePropPr;
@@ -1167,13 +1316,85 @@ export interface ProteusTextarea {
     /**
      * Control whether resizing mode is manual, automatic, or disabled.
      */
-    resize?: "auto" | "none" | "vertical";
+    resize?: "auto" | "none" | "vertical" | ProteusValue;
     rounded?: SprinklePropRounded;
     /**
      * The number of rows to display.
      */
-    rows?: number;
+    rows?: number | ProteusValue;
+    shadow?: SprinklePropShadow;
+    textAlign?: SprinklePropTextAlign;
+    textTransform?: SprinklePropTextTransform;
+    transition?: SprinklePropTransition;
+    w?: SprinklePropW;
+    whiteSpace?: SprinklePropWhiteSpace;
+    z?: SprinklePropZ;
+}
+export interface ProteusTime {
+    $type: "Time";
+    alignItems?: SprinklePropAlignItems;
+    alignSelf?: SprinklePropAlignSelf;
+    animation?: SprinklePropAnimation;
+    backgroundImage?: SprinklePropBackgroundImage;
+    bg?: SprinklePropBg;
+    border?: SprinklePropBorder;
+    borderB?: SprinklePropBorderB;
+    borderColor?: SprinklePropBorderColor;
+    borderL?: SprinklePropBorderL;
+    borderR?: SprinklePropBorderR;
+    borderT?: SprinklePropBorderT;
+    color?: SprinklePropColor;
+    cursor?: SprinklePropCursor;
+    /**
+     * The date to display. Can be a `Date` object or an ISO 8601 string.
+     */
+    date: ProteusValue | string;
+    display?: SprinklePropDisplay;
+    flex?: SprinklePropFlex;
+    flexDirection?: SprinklePropFlexDirection;
+    flexWrap?: SprinklePropFlexWrap;
+    fontFamily?: SprinklePropFontFamily;
+    fontSize?: SprinklePropFontSize;
+    fontWeight?: SprinklePropFontWeight;
+    gap?: SprinklePropGap;
+    gridColumn?: SprinklePropGridColumn;
+    gridTemplateColumns?: SprinklePropGridTemplateColumns;
+    h?: SprinklePropH;
+    justifyContent?: SprinklePropJustifyContent;
+    justifyItems?: SprinklePropJustifyItems;
+    m?: SprinklePropM;
+    maxH?: SprinklePropMaxH;
+    maxW?: SprinklePropMaxW;
+    mb?: SprinklePropMb;
+    ml?: SprinklePropMl;
+    mr?: SprinklePropMr;
+    mt?: SprinklePropMt;
+    mx?: SprinklePropMx;
+    my?: SprinklePropMy;
+    objectFit?: SprinklePropObjectFit;
+    overflow?: SprinklePropOverflow;
+    overflowX?: SprinklePropOverflowX;
+    overflowY?: SprinklePropOverflowY;
+    p?: SprinklePropP;
+    pb?: SprinklePropPb;
+    pl?: SprinklePropPl;
+    placeItems?: SprinklePropPlaceItems;
+    pointerEvents?: SprinklePropPointerEvents;
+    pr?: SprinklePropPr;
+    pt?: SprinklePropPt;
+    px?: SprinklePropPx;
+    py?: SprinklePropPy;
+    rounded?: SprinklePropRounded;
     shadow?: SprinklePropShadow;
+    /**
+     * Whether to show the date part of the value. Defaults to `true`.
+     */
+    showDate?: boolean | ProteusValue;
+    /**
+     * Whether to show the time part of the value. Defaults to `false`.
+     */
+    showTime?: boolean | ProteusValue;
+    size?: SprinklePropSize;
     textAlign?: SprinklePropTextAlign;
     textTransform?: SprinklePropTextTransform;
     transition?: SprinklePropTransition;
@@ -1184,241 +1405,241 @@ export interface ProteusTextarea {
 export interface ProteusValue {
     $type: "Value";
     /**
-     * JSON pointer path to value (e.g., '/question', '/options/0/label')
+     * Path to a value in the data. Absolute paths start with '/' and resolve from the root (e.g., '/title', '/options/0/label'). Inside a Map template, paths without a leading '/' are relative to the current item (e.g., 'title' resolves to each item's 'title' field).
      */
     path: string;
 }
 /**
  * Set the element's `align-items` CSS property
  */
-export type SprinklePropAlignItems = "center" | "end" | "normal" | "start" | "stretch";
+export type SprinklePropAlignItems = "center" | "end" | "normal" | "start" | "stretch" | ProteusValue;
 /**
  * Set the element's `align-self` CSS property
  */
-export type SprinklePropAlignSelf = "center" | "end" | "normal" | "start" | "stretch";
+export type SprinklePropAlignSelf = "center" | "end" | "normal" | "start" | "stretch" | ProteusValue;
 /**
  * Animate element with CSS animations
  */
-export type SprinklePropAnimation = "ping" | "pulse" | "spin";
+export type SprinklePropAnimation = "ping" | "pulse" | "spin" | ProteusValue;
 /**
  * Set the element's `background-image` CSS property
  */
-export type SprinklePropBackgroundImage = "gradient.opal";
+export type SprinklePropBackgroundImage = "gradient.opal" | ProteusValue;
 /**
  * Set the element's background color. Only accepts predefined color tokens starting with `bg.` (e.g., `bg.default`, `bg.accent`, `bg.error`), or the special values `current` and `transparent`.
  */
-export type SprinklePropBg = "bg.accent" | "bg.accent.hovered" | "bg.accent.light" | "bg.accent.pressed" | "bg.accent.subtle" | "bg.avatar.neutral" | "bg.avatar.purple" | "bg.default" | "bg.default.hovered" | "bg.default.inverse" | "bg.default.inverse.hovered" | "bg.default.inverse.pressed" | "bg.default.pressed" | "bg.error" | "bg.error.hovered" | "bg.error.light" | "bg.error.pressed" | "bg.error.subtle" | "bg.error.subtlest" | "bg.information" | "bg.information.light" | "bg.information.subtle" | "bg.overlay" | "bg.page" | "bg.secondary" | "bg.secondary.hovered" | "bg.spinner.default" | "bg.spinner.inverse" | "bg.success" | "bg.success.hovered" | "bg.success.light" | "bg.success.subtle" | "bg.tertiary" | "bg.tertiary.hovered" | "bg.warning" | "bg.warning.hovered" | "bg.warning.light" | "bg.warning.subtle" | "current" | "transparent";
+export type SprinklePropBg = "bg.accent" | "bg.accent.hovered" | "bg.accent.light" | "bg.accent.pressed" | "bg.accent.subtle" | "bg.avatar.neutral" | "bg.avatar.purple" | "bg.default" | "bg.default.hovered" | "bg.default.inverse" | "bg.default.inverse.hovered" | "bg.default.inverse.pressed" | "bg.default.pressed" | "bg.error" | "bg.error.hovered" | "bg.error.light" | "bg.error.pressed" | "bg.error.subtle" | "bg.error.subtlest" | "bg.information" | "bg.information.light" | "bg.information.subtle" | "bg.overlay" | "bg.page" | "bg.secondary" | "bg.secondary.hovered" | "bg.spinner.default" | "bg.spinner.inverse" | "bg.success" | "bg.success.hovered" | "bg.success.light" | "bg.success.subtle" | "bg.tertiary" | "bg.tertiary.hovered" | "bg.warning" | "bg.warning.hovered" | "bg.warning.light" | "bg.warning.subtle" | "current" | "transparent" | ProteusValue;
 /**
  * Set the element's `border-width` CSS property
  */
-export type SprinklePropBorder = "0" | "1" | "2";
+export type SprinklePropBorder = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's `border-bottom-width` CSS property
  */
-export type SprinklePropBorderB = "0" | "1" | "2";
+export type SprinklePropBorderB = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's border color. Only accepts predefined color tokens starting with `border.` (e.g., `border.default`, `border.accent`, `border.error`), or the special values `current` and `transparent`.
  */
-export type SprinklePropBorderColor = "border.accent" | "border.control" | "border.control.hovered" | "border.default" | "border.disabled" | "border.error" | "border.focus" | "border.focus.error" | "border.secondary" | "border.success" | "border.tertiary" | "border.warning" | "current" | "transparent";
+export type SprinklePropBorderColor = "border.accent" | "border.control" | "border.control.hovered" | "border.default" | "border.disabled" | "border.error" | "border.focus" | "border.focus.error" | "border.secondary" | "border.success" | "border.tertiary" | "border.warning" | "current" | "transparent" | ProteusValue;
 /**
  * Set the element's `border-left-width` CSS property
  */
-export type SprinklePropBorderL = "0" | "1" | "2";
+export type SprinklePropBorderL = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's `border-right-width` CSS property
  */
-export type SprinklePropBorderR = "0" | "1" | "2";
+export type SprinklePropBorderR = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's `border-top-width` CSS property
  */
-export type SprinklePropBorderT = "0" | "1" | "2";
+export type SprinklePropBorderT = "0" | "1" | "2" | ProteusValue;
 /**
  * Set the element's text color. Only accepts predefined color tokens starting with `fg.` (e.g., `fg.default`, `fg.accent`, `fg.error`), or the special values `current` and `transparent`.
  */
-export type SprinklePropColor = "current" | "fg.accent" | "fg.accent.hovered" | "fg.accent.strong" | "fg.avatar.neutral" | "fg.avatar.purple" | "fg.default" | "fg.default.inverse" | "fg.disabled" | "fg.error" | "fg.error.hovered" | "fg.error.light" | "fg.error.strong" | "fg.information" | "fg.information.light" | "fg.information.strong" | "fg.link.default" | "fg.link.default.hovered" | "fg.link.inverse" | "fg.link.subtle" | "fg.link.visited" | "fg.secondary" | "fg.spinner.default" | "fg.spinner.inverse" | "fg.success" | "fg.success.hovered" | "fg.success.light" | "fg.success.strong" | "fg.tertiary" | "fg.warning" | "fg.warning.hovered" | "fg.warning.inverse" | "fg.warning.light" | "fg.warning.strong" | "fg.white" | "transparent";
+export type SprinklePropColor = "current" | "fg.accent" | "fg.accent.hovered" | "fg.accent.strong" | "fg.avatar.neutral" | "fg.avatar.purple" | "fg.default" | "fg.default.inverse" | "fg.disabled" | "fg.error" | "fg.error.hovered" | "fg.error.light" | "fg.error.strong" | "fg.information" | "fg.information.light" | "fg.information.strong" | "fg.link.default" | "fg.link.default.hovered" | "fg.link.inverse" | "fg.link.subtle" | "fg.link.visited" | "fg.secondary" | "fg.spinner.default" | "fg.spinner.inverse" | "fg.success" | "fg.success.hovered" | "fg.success.light" | "fg.success.strong" | "fg.tertiary" | "fg.warning" | "fg.warning.hovered" | "fg.warning.inverse" | "fg.warning.light" | "fg.warning.strong" | "fg.white" | "transparent" | ProteusValue;
 /**
  * Set the element's `cursor` CSS property
  */
-export type SprinklePropCursor = "default" | "pointer" | "text";
+export type SprinklePropCursor = "default" | "pointer" | "text" | ProteusValue;
 /**
  * Set the element's `display` CSS property
  */
-export type SprinklePropDisplay = "block" | "flex" | "grid" | "inline" | "inline-block" | "inline-flex" | "none" | "table" | "table-cell" | "table-row";
+export type SprinklePropDisplay = "block" | "flex" | "grid" | "inline" | "inline-block" | "inline-flex" | "none" | "table" | "table-cell" | "table-row" | ProteusValue;
 /**
  * Set the element's `flex` CSS property
  */
-export type SprinklePropFlex = "1" | "auto" | "initial" | "none";
+export type SprinklePropFlex = "1" | "auto" | "initial" | "none" | ProteusValue;
 /**
  * Set the element's `flex-direction` CSS property
  */
-export type SprinklePropFlexDirection = "column" | "column-reverse" | "row" | "row-reverse";
+export type SprinklePropFlexDirection = "column" | "column-reverse" | "row" | "row-reverse" | ProteusValue;
 /**
  * Set the element's `flex-wrap` CSS property
  */
-export type SprinklePropFlexWrap = "nowrap" | "wrap";
+export type SprinklePropFlexWrap = "nowrap" | "wrap" | ProteusValue;
 /**
  * Set the element's font family. Only accepts predefined fontFamily tokens.
  */
-export type SprinklePropFontFamily = "mono" | "sans";
+export type SprinklePropFontFamily = "mono" | "sans" | ProteusValue;
 /**
  * Set the element's font size and line height (both properties are set together). Only accepts predefined fontSize tokens.
  */
-export type SprinklePropFontSize = "2xl" | "3xl" | "4xl" | "inherit" | "lg" | "md" | "sm" | "xl" | "xs";
+export type SprinklePropFontSize = "2xl" | "3xl" | "4xl" | "inherit" | "lg" | "md" | "sm" | "xl" | "xs" | ProteusValue;
 /**
  * Set the element's `font-weight` CSS property
  */
-export type SprinklePropFontWeight = "400" | "500" | "600" | "700" | "inherit";
+export type SprinklePropFontWeight = "400" | "500" | "600" | "700" | "inherit" | ProteusValue;
 /**
  * Set the element's `gap` CSS property
  */
-export type SprinklePropGap = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropGap = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's size across grid columns
  */
-export type SprinklePropGridColumn = "1" | "2" | "3" | "4";
+export type SprinklePropGridColumn = "1" | "2" | "3" | "4" | ProteusValue;
 /**
  * Control number of columns in a grid layout
  */
-export type SprinklePropGridTemplateColumns = "1" | "2" | "3" | "4";
+export type SprinklePropGridTemplateColumns = "1" | "2" | "3" | "4" | ProteusValue;
 /**
  * Set the element's height. Only accepts predefined size tokens.
  */
-export type SprinklePropH = "0" | "1/2" | "1/3" | "1/4" | "2/3" | "2xs" | "3/4" | "3xl" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "80" | "224" | "384" | "auto" | "fit" | "full" | "lg" | "max" | "md" | "min" | "sm" | "xl" | "xs";
+export type SprinklePropH = "0" | "1/2" | "1/3" | "1/4" | "2/3" | "2xs" | "3/4" | "3xl" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "80" | "224" | "384" | "auto" | "fit" | "full" | "lg" | "max" | "md" | "min" | "sm" | "xl" | "xs" | ProteusValue;
 /**
  * Set the element's `justify-content` CSS property
  */
-export type SprinklePropJustifyContent = "center" | "end" | "flex-end" | "flex-start" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch";
+export type SprinklePropJustifyContent = "center" | "end" | "flex-end" | "flex-start" | "normal" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | ProteusValue;
 /**
  * Set the element's `justify-items` CSS property
  */
-export type SprinklePropJustifyItems = "center" | "end" | "normal" | "start" | "stretch";
+export type SprinklePropJustifyItems = "center" | "end" | "normal" | "start" | "stretch" | ProteusValue;
 /**
  * Set the element's margin on all sides. Only accepts predefined spacing tokens.
  */
-export type SprinklePropM = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropM = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's maximum height. Only accepts predefined maxSize tokens.
  */
-export type SprinklePropMaxH = "full" | "lg" | "md" | "sm" | "xs";
+export type SprinklePropMaxH = "full" | "lg" | "md" | "sm" | "xs" | ProteusValue;
 /**
  * Set the element's maximum width. Only accepts predefined maxSize tokens.
  */
-export type SprinklePropMaxW = "full" | "lg" | "md" | "sm" | "xs";
+export type SprinklePropMaxW = "full" | "lg" | "md" | "sm" | "xs" | ProteusValue;
 /**
  * Set the element's bottom margin. Only accepts predefined spacing tokens.
  */
-export type SprinklePropMb = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropMb = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's left margin. Only accepts predefined spacing tokens.
  */
-export type SprinklePropMl = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropMl = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's right margin. Only accepts predefined spacing tokens.
  */
-export type SprinklePropMr = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropMr = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's top margin. Only accepts predefined spacing tokens.
  */
-export type SprinklePropMt = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropMt = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's left and right margin. Only accepts predefined spacing tokens.
  */
-export type SprinklePropMx = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropMx = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's top and bottom margin. Only accepts predefined spacing tokens.
  */
-export type SprinklePropMy = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto";
+export type SprinklePropMy = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | "auto" | ProteusValue;
 /**
  * Set the element's `object-fit` CSS property
  */
-export type SprinklePropObjectFit = "contain" | "cover" | "fill" | "none";
+export type SprinklePropObjectFit = "contain" | "cover" | "fill" | "none" | ProteusValue;
 /**
  * Set the element's `overflow` CSS property
  */
-export type SprinklePropOverflow = "auto" | "hidden" | "visible";
+export type SprinklePropOverflow = "auto" | "hidden" | "visible" | ProteusValue;
 /**
  * Set the element's `overflow-x` CSS property
  */
-export type SprinklePropOverflowX = "auto" | "hidden" | "visible";
+export type SprinklePropOverflowX = "auto" | "hidden" | "visible" | ProteusValue;
 /**
  * Set the element's `overflow-y` CSS property
  */
-export type SprinklePropOverflowY = "auto" | "hidden" | "visible";
+export type SprinklePropOverflowY = "auto" | "hidden" | "visible" | ProteusValue;
 /**
  * Set the element's padding on all sides. Only accepts predefined spacing tokens.
  */
-export type SprinklePropP = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropP = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's bottom padding. Only accepts predefined spacing tokens.
  */
-export type SprinklePropPb = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropPb = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's left padding. Only accepts predefined spacing tokens.
  */
-export type SprinklePropPl = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropPl = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's `place-items` CSS property
  */
-export type SprinklePropPlaceItems = "center";
+export type SprinklePropPlaceItems = "center" | ProteusValue;
 /**
  * Set the element's `pointer-events` CSS property
  */
-export type SprinklePropPointerEvents = "auto" | "none";
+export type SprinklePropPointerEvents = "auto" | "none" | ProteusValue;
 /**
  * Set the element's right padding. Only accepts predefined spacing tokens.
  */
-export type SprinklePropPr = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropPr = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's top padding. Only accepts predefined spacing tokens.
  */
-export type SprinklePropPt = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropPt = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's left and right padding. Only accepts predefined spacing tokens.
  */
-export type SprinklePropPx = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropPx = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's top and bottom padding. Only accepts predefined spacing tokens.
  */
-export type SprinklePropPy = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80";
+export type SprinklePropPy = "0" | "2" | "4" | "6" | "8" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "64" | "80" | ProteusValue;
 /**
  * Set the element's border radius. Only accepts predefined borderRadius tokens.
  */
-export type SprinklePropRounded = "full" | "inherit" | "lg" | "md" | "none" | "sm" | "xl" | "xs";
+export type SprinklePropRounded = "full" | "inherit" | "lg" | "md" | "none" | "sm" | "xl" | "xs" | ProteusValue;
 /**
  * Set the element's box shadow. Only accepts predefined boxShadow tokens.
  */
-export type SprinklePropShadow = "lg" | "md" | "none" | "sm" | "xl";
+export type SprinklePropShadow = "lg" | "md" | "none" | "sm" | "xl" | ProteusValue;
 /**
  * Set the element's width and height. Only accepts predefined size tokens.
  *
  * When width and height are the same, use `size` instead of setting both
  * `w` and `h` separately (e.g., prefer `size="24"` over `w="24" h="24"`).
  */
-export type SprinklePropSize = "0" | "1/2" | "1/3" | "1/4" | "2/3" | "2xs" | "3/4" | "3xl" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "80" | "224" | "384" | "auto" | "fit" | "full" | "lg" | "max" | "md" | "min" | "sm" | "xl" | "xs";
+export type SprinklePropSize = "0" | "1/2" | "1/3" | "1/4" | "2/3" | "2xs" | "3/4" | "3xl" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "80" | "224" | "384" | "auto" | "fit" | "full" | "lg" | "max" | "md" | "min" | "sm" | "xl" | "xs" | ProteusValue;
 /**
  * Set the element's `text-align` CSS property
  */
-export type SprinklePropTextAlign = "center" | "end" | "justify" | "start";
+export type SprinklePropTextAlign = "center" | "end" | "justify" | "start" | ProteusValue;
 /**
  * Set the element's `text-transform` CSS property
  */
-export type SprinklePropTextTransform = "capitalize" | "none" | "uppercase";
+export type SprinklePropTextTransform = "capitalize" | "none" | "uppercase" | ProteusValue;
 /**
  * Control which CSS properties should transition
  */
-export type SprinklePropTransition = "all" | "colors" | "none" | "opacity" | "transform";
+export type SprinklePropTransition = "all" | "colors" | "none" | "opacity" | "transform" | ProteusValue;
 /**
  * Set the element's width. Only accepts predefined size tokens.
  */
-export type SprinklePropW = "0" | "1/2" | "1/3" | "1/4" | "2/3" | "2xs" | "3/4" | "3xl" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "80" | "224" | "384" | "auto" | "fit" | "full" | "lg" | "max" | "md" | "min" | "sm" | "xl" | "xs";
+export type SprinklePropW = "0" | "1/2" | "1/3" | "1/4" | "2/3" | "2xs" | "3/4" | "3xl" | "10" | "12" | "16" | "20" | "24" | "32" | "40" | "48" | "56" | "64" | "80" | "224" | "384" | "auto" | "fit" | "full" | "lg" | "max" | "md" | "min" | "sm" | "xl" | "xs" | ProteusValue;
 /**
  * Set the element's `white-space` CSS property
  */
-export type SprinklePropWhiteSpace = "nowrap";
+export type SprinklePropWhiteSpace = "nowrap" | ProteusValue;
 /**
  * Set the element's stacking order. Only accepts predefined zIndex tokens (e.g., popover, toast, tooltip) or numeric values (0, 10, 20, 30, auto).
  */
-export type SprinklePropZ = "0" | "10" | "20" | "30" | "auto" | "popover" | "toast" | "tooltip";
+export type SprinklePropZ = "0" | "10" | "20" | "30" | "auto" | "popover" | "toast" | "tooltip" | ProteusValue;
 /**
  * Builder namespace for Adaptive UI Document components.
  *
@@ -1429,7 +1650,10 @@ export type SprinklePropZ = "0" | "10" | "20" | "30" | "auto" | "popover" | "toa
  */
 export declare const UI: {
     Action: (props: Omit<ProteusAction, "$type">) => ProteusAction;
+    Badge: (props: Omit<ProteusBadge, "$type">) => ProteusBadge;
     CancelAction: (props: Omit<ProteusCancelAction, "$type">) => ProteusCancelAction;
+    Chart: (props: Omit<ProteusChart, "$type">) => ProteusChart;
+    DataTable: (props: Omit<ProteusDataTable, "$type">) => ProteusDataTable;
     Document: (props: Omit<ProteusDocument, "$type">) => ProteusDocument;
     Field: (props: Omit<ProteusField, "$type">) => ProteusField;
     Group: (props: Omit<ProteusGroup, "$type">) => ProteusGroup;
@@ -1447,5 +1671,6 @@ export declare const UI: {
     Show: (props: Omit<ProteusShow, "$type">) => ProteusShow;
     Text: (props: Omit<ProteusText, "$type">) => ProteusText;
     Textarea: (props: Omit<ProteusTextarea, "$type">) => ProteusTextarea;
+    Time: (props: Omit<ProteusTime, "$type">) => ProteusTime;
     Value: (props: Omit<ProteusValue, "$type">) => ProteusValue;
 };