@tylertech/forge-ai-react 0.1.0

package/dist/ForgeAiDropdownMenuSeparator.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import { ForgeAiDropdownMenuSeparator as ForgeAiDropdownMenuSeparatorElement } from "@tylertech/forge-ai/ai-dropdown-menu";
+
+export type { ForgeAiDropdownMenuSeparatorElement };
+
+export interface ForgeAiDropdownMenuSeparatorProps
+  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;
+}
+
+/**
+ * A separator component for dividing sections within ai-dropdown-menu.
+ * ---
+ *
+ */
+export const ForgeAiDropdownMenuSeparator: React.ForwardRefExoticComponent<ForgeAiDropdownMenuSeparatorProps>;

package/dist/ForgeAiDropdownMenuSeparator.js

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

package/dist/ForgeAiEmbeddedChat.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { ForgeAiEmbeddedChat as ForgeAiEmbeddedChatElement } from "@tylertech/forge-ai/ai-embedded-chat";
+
+export type { ForgeAiEmbeddedChatElement };
+
+export interface ForgeAiEmbeddedChatProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Controls whether the modal view is open when expanded. */
+  expanded?: boolean;
+
+  /** Controls the gradient variant applied to the container. */
+  gradientVariant?: ForgeAiEmbeddedChatElement["gradientVariant"];
+
+  /** 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 chat is expanded to modal view */
+  onForgeAiEmbeddedChatExpand?: (event: CustomEvent<CustomEvent<void>>) => void;
+
+  /** Fired when the chat is collapsed from modal view */
+  onForgeAiEmbeddedChatCollapse?: (
+    event: CustomEvent<CustomEvent<void>>,
+  ) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-embedded-chat-expand** - Fired when the chat is expanded to modal view
+ * - **forge-ai-embedded-chat-collapse** - Fired when the chat is collapsed from modal view
+ *
+ * ### **Methods:**
+ *  - **expand(): _void_** - Expands the chat to modal view.
+ * - **collapse(): _void_** - Collapses the chat from modal view back to embedded view.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for messages (ai-user-message, ai-response-message components)
+ * - **suggestions** - Slot for AI suggestions component
+ * - **prompt** - Slot for custom AI prompt component. If not provided, a default forge-ai-prompt will be used.
+ */
+export const ForgeAiEmbeddedChat: React.ForwardRefExoticComponent<ForgeAiEmbeddedChatProps>;

package/dist/ForgeAiEmbeddedChat.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-embedded-chat";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiEmbeddedChat = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { expanded, gradientVariant, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-embedded-chat-expand",
+    props.onForgeAiEmbeddedChatExpand,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-embedded-chat-collapse",
+    props.onForgeAiEmbeddedChatCollapse,
+  );
+
+  return React.createElement(
+    "forge-ai-embedded-chat",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "gradient-variant": props.gradientVariant || props["gradient-variant"],
+      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/ForgeAiEmptyState.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { ForgeAiEmptyState as ForgeAiEmptyStateElement } from "@tylertech/forge-ai/ai-empty-state";
+
+export type { ForgeAiEmptyStateElement };
+
+export interface ForgeAiEmptyStateProps
+  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;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The custom welcome message content.
+ * - **actions** - The actions or suggestions to display below the message.
+ */
+export const ForgeAiEmptyState: React.ForwardRefExoticComponent<ForgeAiEmptyStateProps>;

package/dist/ForgeAiEmptyState.js

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

package/dist/ForgeAiFab.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { ForgeAiFab as ForgeAiFabElement } from "@tylertech/forge-ai/ai-fab";
+
+export type { ForgeAiFabElement };
+
+export interface ForgeAiFabProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the button is disabled */
+  disabled?: boolean;
+
+  /** Whether the button is extended */
+  extended?: 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;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for button content
+ */
+export const ForgeAiFab: React.ForwardRefExoticComponent<ForgeAiFabProps>;

package/dist/ForgeAiFab.js

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

package/dist/ForgeAiFilePicker.d.ts

@@ -0,0 +1,77 @@
+import React from "react";
+import { ForgeAiFilePicker as ForgeAiFilePickerElement } from "@tylertech/forge-ai/ai-file-picker";
+
+export type { ForgeAiFilePickerElement };
+
+export interface ForgeAiFilePickerProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the file picker is disabled. */
+  disabled?: boolean;
+
+  /** Whether to allow multiple file selection. */
+  multiple?: boolean;
+
+  /** The variant of the file picker button. */
+  variant?: ForgeAiFilePickerElement["variant"];
+
+  /** Accepted file types (comma-separated MIME types or extensions). */
+  accept?: ForgeAiFilePickerElement["accept"];
+
+  /** 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 a file is selected via click or drag & drop. The event detail contains the selected file and timestamp. */
+  onForgeAiFilePickerChange?: (
+    event: CustomEvent<CustomEvent<AiFilePickerChangeEventData>>,
+  ) => void;
+}
+
+/**
+ * An AI file picker component with button and icon-button variants.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-file-picker-change** - Fired when a file is selected via click or drag & drop. The event detail contains the selected file and timestamp.
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for button content when no file is selected.
+ * - **icon** - The icon slot for icon-button variant.
+ *
+ * ### **CSS Properties:**
+ *  - **--ai-file-picker-width** - The width of the file picker button. _(default: undefined)_
+ * - **--ai-file-picker-height** - The height of the file picker button. _(default: undefined)_
+ */
+export const ForgeAiFilePicker: React.ForwardRefExoticComponent<ForgeAiFilePickerProps>;

package/dist/ForgeAiFilePicker.js

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

package/dist/ForgeAiFloatingChat.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { ForgeAiFloatingChat as ForgeAiFloatingChatElement } from "@tylertech/forge-ai/ai-floating-chat";
+
+export type { ForgeAiFloatingChatElement };
+
+export interface ForgeAiFloatingChatProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Indicates whether the chat is open. */
+  open?: boolean;
+
+  /** Controls the chat's positioning and size behavior.
+When true, the chat will have an expanded width and be centered on the screen.
+When false, the chat will be positioned at the bottom-right corner with a fixed width. */
+  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;
+
+  /** Fired when the chat is opened */
+  onForgeAiFloatingChatOpen?: (event: CustomEvent) => void;
+
+  /** Fired when the chat is closed */
+  onForgeAiFloatingChatClose?: (event: CustomEvent) => void;
+
+  /** Fired when the chat is expanded */
+  onForgeAiFloatingChatExpand?: (event: CustomEvent) => void;
+
+  /** Fired when the chat is collapsed */
+  onForgeAiFloatingChatCollapse?: (event: CustomEvent) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-floating-chat-open** - Fired when the chat is opened
+ * - **forge-ai-floating-chat-close** - Fired when the chat is closed
+ * - **forge-ai-floating-chat-expand** - Fired when the chat is expanded
+ * - **forge-ai-floating-chat-collapse** - Fired when the chat is collapsed
+ *
+ * ### **Methods:**
+ *  - **show(): _void_** - Opens the chat.
+ * - **close(): _void_** - Closes the chat.
+ * - **toggle(): _void_** - Toggles the chat open state.
+ * - **expand(): _void_** - Expands the chat to full width.
+ * - **collapse(): _void_** - Collapses the chat to normal width.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for messages (ai-user-message, ai-response-message components)
+ * - **suggestions** - Slot for AI suggestions component
+ * - **prompt** - Slot for custom AI prompt component. If not provided, a default forge-ai-prompt will be used.
+ */
+export const ForgeAiFloatingChat: React.ForwardRefExoticComponent<ForgeAiFloatingChatProps>;

package/dist/ForgeAiFloatingChat.js

@@ -0,0 +1,54 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-floating-chat";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiFloatingChat = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, expanded, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-floating-chat-open",
+    props.onForgeAiFloatingChatOpen,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-floating-chat-close",
+    props.onForgeAiFloatingChatClose,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-floating-chat-expand",
+    props.onForgeAiFloatingChatExpand,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-floating-chat-collapse",
+    props.onForgeAiFloatingChatCollapse,
+  );
+
+  return React.createElement(
+    "forge-ai-floating-chat",
+    {
+      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,
+      expanded: props.expanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiGradientContainer.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { ForgeAiGradientContainer as ForgeAiGradientContainerElement } from "@tylertech/forge-ai/ai-gradient-container";
+
+export type { ForgeAiGradientContainerElement };
+
+export interface ForgeAiGradientContainerProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Gradient intensity variant */
+  variant?: ForgeAiGradientContainerElement["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;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for container content
+ */
+export const ForgeAiGradientContainer: React.ForwardRefExoticComponent<ForgeAiGradientContainerProps>;