@tylertech/forge-ai-react 0.1.0

package/dist/ForgeAiGradientContainer.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-gradient-container";
+
+export const ForgeAiGradientContainer = forwardRef((props, forwardedRef) => {
+  const { variant, ...filteredProps } = props;
+
+  return React.createElement(
+    "forge-ai-gradient-container",
+    {
+      ...filteredProps,
+      variant: props.variant,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiIcon.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { ForgeAiIcon as ForgeAiIconElement } from "@tylertech/forge-ai/ai-icon";
+
+export type { ForgeAiIconElement };
+
+export interface ForgeAiIconProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether to display the icon with an outline */
+  outline?: boolean;
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const ForgeAiIcon: React.ForwardRefExoticComponent<ForgeAiIconProps>;

package/dist/ForgeAiIcon.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-icon";
+
+export const ForgeAiIcon = forwardRef((props, forwardedRef) => {
+  const { outline, ...filteredProps } = props;
+
+  return React.createElement(
+    "forge-ai-icon",
+    {
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      outline: props.outline ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiModal.d.ts

@@ -0,0 +1,79 @@
+import React from "react";
+import { ForgeAiModal as ForgeAiModalElement } from "@tylertech/forge-ai/ai-modal";
+
+export type { ForgeAiModalElement };
+
+export interface ForgeAiModalProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Controls whether the modal is open or closed. */
+  open?: boolean;
+
+  /** Controls whether the modal is displayed in fullscreen mode.
+When not explicitly set, this will be automatically determined based on viewport size. */
+  fullscreen?: boolean | undefined;
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Fired when the modal is opened */
+  onForgeAiModalOpen?: (event: CustomEvent<CustomEvent<void>>) => void;
+
+  /** Fired when the modal is closed */
+  onForgeAiModalClose?: (event: CustomEvent<CustomEvent<void>>) => void;
+
+  /** Fired when the fullscreen state changes */
+  onForgeAiModalFullscreenChange?: (
+    event: CustomEvent<CustomEvent<{ isFullscreen: boolean }>>,
+  ) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-modal-open** - Fired when the modal is opened
+ * - **forge-ai-modal-close** - Fired when the modal is closed
+ * - **forge-ai-modal-fullscreen-change** - Fired when the fullscreen state changes
+ *
+ * ### **Methods:**
+ *  - **show(): _void_** - Shows the modal dialog.
+ * - **close(): _void_** - Closes the modal dialog.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for modal content
+ */
+export const ForgeAiModal: React.ForwardRefExoticComponent<ForgeAiModalProps>;

package/dist/ForgeAiModal.js

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-modal";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiModal = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, fullscreen, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "forge-ai-modal-open", props.onForgeAiModalOpen);
+  useEventListener(ref, "forge-ai-modal-close", props.onForgeAiModalClose);
+  useEventListener(
+    ref,
+    "forge-ai-modal-fullscreen-change",
+    props.onForgeAiModalFullscreenChange,
+  );
+
+  return React.createElement(
+    "forge-ai-modal",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      open: props.open ? true : undefined,
+      fullscreen: props.fullscreen ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiOverlay.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import { ForgeAiOverlay as ForgeAiOverlayElement } from "@tylertech/forge-ai/core/overlay";
+
+export type { ForgeAiOverlayElement };
+
+export interface ForgeAiOverlayProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the overlay should flip to the opposite side when there's no space. */
+  flip?: boolean;
+
+  /** Whether the overlay should shift to stay in view. */
+  shift?: boolean;
+
+  /** Whether the overlay is open. */
+  open?: boolean;
+
+  /** The anchor element to position the overlay relative to. */
+  anchor?: ForgeAiOverlayElement["anchor"];
+
+  /** The placement of the overlay relative to the anchor. */
+  placement?: ForgeAiOverlayElement["placement"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * A low-level overlay component for internal use within AI components.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for overlay content.
+ *
+ * ### **CSS Properties:**
+ *  - **--ai-overlay-max-width** - The maximum width of the overlay. _(default: undefined)_
+ * - **--ai-overlay-max-height** - The maximum height of the overlay. _(default: undefined)_
+ * - **--ai-overlay-min-width** - The minimum width of the overlay. _(default: undefined)_
+ * - **--ai-overlay-min-height** - The minimum height of the overlay. _(default: undefined)_
+ */
+export const ForgeAiOverlay: React.ForwardRefExoticComponent<ForgeAiOverlayProps>;

package/dist/ForgeAiOverlay.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/core/overlay";
+
+export const ForgeAiOverlay = forwardRef((props, forwardedRef) => {
+  const { flip, shift, open, anchor, placement, ...filteredProps } = props;
+
+  return React.createElement(
+    "forge-ai-overlay",
+    {
+      ...filteredProps,
+      anchor: props.anchor,
+      placement: props.placement,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      flip: props.flip ? true : undefined,
+      shift: props.shift ? true : undefined,
+      open: props.open ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiPopover.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import { ForgeAiPopover as ForgeAiPopoverElement } from "@tylertech/forge-ai/core/popover";
+
+export type { ForgeAiPopoverElement };
+
+export interface ForgeAiPopoverProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the popover should flip to the opposite side when there's no space. */
+  flip?: boolean;
+
+  /** Whether the popover should shift to stay in view. */
+  shift?: boolean;
+
+  /** Whether the popover is open. */
+  open?: boolean;
+
+  /** The anchor element to position the popover relative to. */
+  anchor?: ForgeAiPopoverElement["anchor"];
+
+  /** The placement of the popover relative to the anchor. */
+  placement?: ForgeAiPopoverElement["placement"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * A popover component that provides styled overlay functionality.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for popover content.
+ *
+ * ### **CSS Properties:**
+ *  - **--ai-popover-max-width** - The maximum width of the popover. _(default: undefined)_
+ * - **--ai-popover-max-height** - The maximum height of the popover. _(default: undefined)_
+ * - **--ai-popover-min-width** - The minimum width of the popover. _(default: undefined)_
+ * - **--ai-popover-min-height** - The minimum height of the popover. _(default: undefined)_
+ */
+export const ForgeAiPopover: React.ForwardRefExoticComponent<ForgeAiPopoverProps>;

package/dist/ForgeAiPopover.js

@@ -0,0 +1,25 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/core/popover";
+
+export const ForgeAiPopover = forwardRef((props, forwardedRef) => {
+  const { flip, shift, open, anchor, placement, ...filteredProps } = props;
+
+  return React.createElement(
+    "forge-ai-popover",
+    {
+      ...filteredProps,
+      anchor: props.anchor,
+      placement: props.placement,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      flip: props.flip ? true : undefined,
+      shift: props.shift ? true : undefined,
+      open: props.open ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiPrompt.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { ForgeAiPrompt as ForgeAiPromptElement } from "@tylertech/forge-ai/ai-prompt";
+
+export type { ForgeAiPromptElement };
+
+export interface ForgeAiPromptProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Placeholder text for the input field */
+  placeholder?: ForgeAiPromptElement["placeholder"];
+
+  /** Current value of the input field */
+  value?: ForgeAiPromptElement["value"];
+
+  /** Layout variant for the prompt component */
+  variant?: ForgeAiPromptElement["variant"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Fired when the send button is clicked or Enter is pressed. */
+  onForgeAiPromptSend?: (
+    event: CustomEvent<CustomEvent<AiPromptSendEventData>>,
+  ) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-prompt-send** - Fired when the send button is clicked or Enter is pressed.
+ *
+ * ### **Slots:**
+ *  - **actions** - Slot for action components like dropdown menus, voice input, buttons, etc.
+ */
+export const ForgeAiPrompt: React.ForwardRefExoticComponent<ForgeAiPromptProps>;

package/dist/ForgeAiPrompt.js

@@ -0,0 +1,36 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-prompt";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiPrompt = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { placeholder, value, variant, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "forge-ai-prompt-send", props.onForgeAiPromptSend);
+
+  return React.createElement(
+    "forge-ai-prompt",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      placeholder: props.placeholder,
+      value: props.value,
+      variant: props.variant,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiReasoning.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { ForgeAiReasoning as ForgeAiReasoningElement } from "@tylertech/forge-ai/ai-reasoning";
+
+export type { ForgeAiReasoningElement };
+
+export interface ForgeAiReasoningProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the reasoning is expanded */
+  expanded?: boolean;
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const ForgeAiReasoning: React.ForwardRefExoticComponent<ForgeAiReasoningProps>;

package/dist/ForgeAiReasoning.js

@@ -0,0 +1,21 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-reasoning";
+
+export const ForgeAiReasoning = forwardRef((props, forwardedRef) => {
+  const { expanded, ...filteredProps } = props;
+
+  return React.createElement(
+    "forge-ai-reasoning",
+    {
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      expanded: props.expanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiReasoningContent.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { ForgeAiReasoningContent as ForgeAiReasoningContentElement } from "@tylertech/forge-ai/ai-reasoning/reasoning-content";
+
+export type { ForgeAiReasoningContentElement };
+
+export interface ForgeAiReasoningContentProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ */
+export const ForgeAiReasoningContent: React.ForwardRefExoticComponent<ForgeAiReasoningContentProps>;

package/dist/ForgeAiReasoningContent.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-reasoning/reasoning-content";
+
+export const ForgeAiReasoningContent = forwardRef((props, forwardedRef) => {
+  return React.createElement(
+    "forge-ai-reasoning-content",
+    {
+      ...props,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});