@nlxai/touchpoint-ui 1.2.3-alpha.2 → 1.2.4-alpha.1

package/lib/index.d.ts

@@ -7,7 +7,6 @@ import { Carousel } from './components/ui/Carousel';
 import { DateInput } from './components/ui/DateInput';
 import { TouchpointConfiguration, TouchpointInstance } from './interface';
 import * as Icons from "./components/ui/Icons";
-export { analyzePageForms, type InteractiveElementInfo, type PageForms, type AccessibilityInformation, } from './bidirectional/analyzePageForms';
 /**
  * If you wish to build custom modalities using JSX, you will want to
  *
@@ -17,23 +16,48 @@ export { analyzePageForms, type InteractiveElementInfo, type PageForms, type Acc
  *
  * instead of importing from "react" directly. This ensures that the custom modalities will
  * be running in the same React context as the Touchpoint UI using the correct version of React.
+ * @category Modality components
  */
 export { default as React } from 'react';
 /**
  * Package version
+ * @category Utilities
  */
 export declare const version: string;
+/**
+ * A tagged literal for creating reactive elements for custom modalities.
+ * It already knows about all Touchpoint UI components, so you can use them directly without the need to import them.
+ * Also very useful when using Touchpoint directly from CDN or in projects without a build step.
+ * @example
+ * ```ts
+ * import { html, Icons } from '@nlx/touchpoint-ui';
+ *
+ * const MyCustomModality = ({data, conversationHandler}) =>
+ *   html`<div style="display: flex; gap: 8px;">
+ *    <IconButton label="Cancel" Icon=${Icons.Close} type="ghost" onClick=${cancel()} />
+ *    <TextButton
+ *     label="Submit"
+ *     Icon=${Icons.ArrowForward}
+ *     type="main"
+ *     onClick=${() => conversationHandler.sendText('Button clicked!')}
+ *   />
+ *  </div>`;
+ * ```
+ * @category Modality components
+ */
 export declare const html: (strings: TemplateStringsArray, ...values: any[]) => unknown;
-export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, Ripple, };
 export { type CustomCardProps, type CustomCardRowProps, } from './components/ui/CustomCard';
 export { type DateInputProps } from './components/ui/DateInput';
 export { type IconButtonProps, type IconButtonType, } from './components/ui/IconButton';
 export { type TextButtonProps } from './components/ui/TextButton';
 export type { WindowSize, ColorMode, ChoiceMessage, CustomModalityComponent, Theme, InitializeConversation, CustomLaunchButton, Input, InputField, PageState, BidirectionalContext, BidirectionalConfig, TouchpointConfiguration, BidirectionalCustomCommand, TouchpointInstance, } from './interface';
+export { analyzePageForms, type InteractiveElementInfo, type PageForms, type AccessibilityInformation, } from './bidirectional/analyzePageForms';
 /**
  * Creates a new Touchpoint UI instance and appends it to the document body
  * @param props - Configuration props for Touchpoint
  * @returns A promise that resolves to a TouchpointInstance
+ * @category Basics
  */
 export declare const create: (props: TouchpointConfiguration) => Promise<TouchpointInstance>;
 export { Container as PreviewContainer } from './preview';
+export { TextButton, IconButton, BaseText, SmallText, DateInput, Carousel, CustomCard, CustomCardRow, CustomCardImageRow, Icons, Ripple, };