@landtrustinc/design-system 1.2.2 → 1.2.4

package/README.md

@@ -4,6 +4,41 @@ Design system components for LandTrust applications.
 
 [Storybook](https://662e7f123091ccbb08e021fe-lpduyfvtud.chromatic.com)
 
+## 📦 Installation
+
+```bash
+npm install @landtrustinc/design-system react-loading-skeleton
+```
+
+## 🚀 Setup
+
+### Required CSS Imports
+
+⚠️ **Important:** You must import the following CSS files in your app's entry point (e.g., `_app.js` or `_app.tsx` for Next.js):
+
+```tsx
+// pages/_app.tsx (Next.js) or main entry file
+import '@landtrustinc/design-system/dist/variables.css';
+import 'react-loading-skeleton/dist/skeleton.css';
+```
+
+**Why?**
+
+- The design system uses `react-loading-skeleton` for loading states in some components
+- Next.js and other frameworks require global CSS to be imported in the app entry point, not from npm packages
+- This prevents build errors and ensures proper styling
+
+### Next.js Configuration
+
+If you're using Next.js, make sure these imports are at the top of your `pages/_app.tsx` or `pages/_app.js`:
+
+```tsx
+import 'react-loading-skeleton/dist/skeleton.css';
+import '@landtrustinc/design-system/dist/variables.css';
+
+// ... rest of your imports
+```
+
 ## 📖 Usage
 
 ```tsx
@@ -19,7 +54,7 @@ function App() {
 }
 ```
 
-## Styling
+## 🎨 Styling
 
 Following Figma styles try to use tokens from variables.css. Avoid using colors from the theme (these are legacy).
 

package/dist/index.d.ts

@@ -524,6 +524,64 @@ declare namespace styles {
   export { styles_ThemeTokens as ThemeTokens, styles_borderRadius as borderRadius, styles_boxShadow as boxShadow, styles_colors as colors, styles_fontSizes as fontSizes, styles_fontWeights as fontWeights, styles_fonts as fonts, styles_headingSizes as headingSizes, styles_lineHeights as lineHeights, styles_media as media, styles_opacity as opacity, styles_screens as screens, styles_sizes as sizes, styles_space as space, styles_textShadow as textShadow, styles_transition as transition, styles_zIndex as zIndex };
 }
 
+type TopMatchingFieldNoteProps = {
+    /**
+     * Name of the field note author(s)
+     */
+    author: string;
+    /**
+     * Date the field note was posted (e.g., "1d ago")
+     */
+    datePosted: string;
+    /**
+     * Field note content text
+     */
+    content: string;
+    /**
+     * Array of image URLs to display
+     */
+    images: string[];
+    /**
+     * Title for the top matching field note section
+     * @default "Top matching field note"
+     */
+    title?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+};
+
+type TopMatchingReviewProps = {
+    /**
+     * Name of the review author
+     */
+    author: string;
+    /**
+     * Date the review was posted (e.g., "Aug 25, 2025")
+     */
+    datePosted: string;
+    /**
+     * Rating from 1-5
+     */
+    rating: number;
+    /**
+     * Review content text
+     */
+    content: string;
+    /**
+     * Title for the top matching review section
+     * @default "Top matching review"
+     */
+    title?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+};
+
+type TopMatchingReview = Omit<TopMatchingReviewProps, 'title'>;
+type TopMatchingFieldNote = Omit<TopMatchingFieldNoteProps, 'title'>;
 type AIResponseProps = {
     /**
      * Optional title for the AI response
@@ -565,8 +623,47 @@ type AIResponseProps = {
      * Debounce time for helpful feedback in milliseconds
      */
     helpfulDebounceMs?: number;
+    /**
+     * Enable markdown rendering for children content.
+     * When true, children should be a string containing markdown.
+     * @default false
+     */
+    markdown?: boolean;
+    /**
+     * Whether to enable code copy functionality in markdown code blocks
+     * @default true
+     */
+    enableCodeCopy?: boolean;
+    /**
+     * Optional top matching review to display above the response
+     */
+    topMatchingReview?: TopMatchingReview;
+    /**
+     * Title for the top matching review section
+     * @default "Top matching review"
+     */
+    topMatchingReviewTitle?: string;
+    /**
+     * Optional top matching field note to display above the response
+     */
+    topMatchingFieldNote?: TopMatchingFieldNote;
+    /**
+     * Title for the top matching field note section
+     * @default "Top matching field note"
+     */
+    topMatchingFieldNoteTitle?: string;
+    /**
+     * URL for the Contact Landowner button link
+     * When provided, shows a "Contact Landowner" button inside the response
+     */
+    contactLandownerUrl?: string;
+    /**
+     * Custom text for the Contact Landowner button
+     * @default "Contact Landowner"
+     */
+    contactLandownerButtonText?: string;
 };
-declare const AIResponse: ({ title, showDisclaimer, showHelpfulQuestion, className, children, onHelpfulYes, onHelpfulNo, variant, onErrorRetry, helpfulDebounceMs, }: AIResponseProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const AIResponse: ({ title, showDisclaimer, showHelpfulQuestion, className, children, onHelpfulYes, onHelpfulNo, variant, onErrorRetry, helpfulDebounceMs, markdown, enableCodeCopy, topMatchingReview, topMatchingReviewTitle, topMatchingFieldNote, topMatchingFieldNoteTitle, contactLandownerUrl, contactLandownerButtonText, }: AIResponseProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type AvailabilityBadgeVariant = 'primary' | 'error' | 'action' | 'warning' | 'neutral';
 
@@ -1121,6 +1218,13 @@ type MessageBubbleProps = {
 declare const MessageBubble: ({ variant, timestamp, className, children, }: MessageBubbleProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ChatWidgetMessage = React__default.ReactElement<React__default.ComponentProps<typeof AIResponse>, typeof AIResponse> | React__default.ReactElement<React__default.ComponentProps<typeof MessageBubble>, typeof MessageBubble>;
+type SuggestedPrompt = {
+    label: string;
+    /**
+     * Optional value to pass when clicked (defaults to label)
+     */
+    value?: string;
+};
 type ChatWidgetProps = {
     /**
      * Title displayed in the chat widget header
@@ -1178,8 +1282,21 @@ type ChatWidgetProps = {
      * Additional props for the container
      */
     containerProps?: BoxProps;
+    /**
+     * Suggested prompts to show above the input field
+     */
+    suggestedPrompts?: SuggestedPrompt[];
+    /**
+     * Callback when a suggested prompt is clicked
+     */
+    onPromptClick?: (prompt: string) => void;
+    /**
+     * Title for the suggested prompts section
+     * @default "Other Helpful Topics"
+     */
+    suggestedPromptsTitle?: string;
 };
-declare const ChatWidget: ({ title, messages, onSubmit, placeholder, disabled, className, ariaLabel, panelWidth, expanded, defaultExpanded, onExpandedChange, isThinking, emptyState, containerProps, }: ChatWidgetProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ChatWidget: ({ title, messages, onSubmit, placeholder, disabled, className, ariaLabel, panelWidth, expanded, defaultExpanded, onExpandedChange, isThinking, emptyState, containerProps, suggestedPrompts, onPromptClick, suggestedPromptsTitle, }: ChatWidgetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DividerProps = React__default.HTMLAttributes<HTMLHRElement> & SpaceProps & {
     /**
@@ -1210,6 +1327,10 @@ type FeatureListItemProps = {
      * Optional subtitle/description text
      */
     subtitle?: React__default.ReactNode;
+    /**
+     * Loading state - shows skeleton when true
+     */
+    isLoading?: boolean;
     /**
      * Additional CSS class names
      */
@@ -1656,6 +1777,23 @@ type LogoProps = {
 };
 declare const Logo: ({ variant, theme, size, className, ...rest }: LogoProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type MarkdownContentProps = {
+    /**
+     * The markdown content to render
+     */
+    content: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Whether to enable code copy functionality
+     * @default true
+     */
+    enableCodeCopy?: boolean;
+};
+declare const MarkdownContent: React__default.FC<MarkdownContentProps>;
+
 type NavLink = {
     /**
      * Text label for the navigation link
@@ -2041,4 +2179,4 @@ declare const Widget: React__default.FC<WidgetProps> & {
     }>;
 };
 
-export { AIResponse, type AIResponseProps, AvailabilityBadge, type AvailabilityBadgeProps, type AvailabilityBadgeVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarType, type BaseInputProps, Box, type BoxProps, Button, type ButtonProps, type ButtonVariants, ChatWidget, type ChatWidgetMessage, type ChatWidgetProps, Column, type ColumnProps, Container, Divider, type DividerProps, type FeatureItem, FeatureList, type FeatureListProps, type FeatureListSection, FieldNoteCard, type FieldNoteCardProps, FormField, type FormFieldProps, GlobalStyle, Grid, type GridBreakpoint, GridContainer, type GridContainerProps, type GridProps, Heading, type HeadingProps, HuntCard, type HuntCardProps, Icon, IconLabel, type IconLabelProps, type IconProps, type IconSize, IconSizeMap, type IconVariantTypes$1 as IconVariantTypes, InfoBox, type InfoBoxProps, Input, type InputProps, type InputSize, type InputVariant, LayoutTokens, ListingChat, type ListingChatProps, Logo, type LogoProps, type LogoTheme, type LogoVariant, MessageBubble, type MessageBubbleProps, type NavLink, Navigation, type NavigationProps, PackageCard, type PackageCardProps, PackageHeader, type PackageHeaderProps, type ResponsiveValue, ReviewCard, type ReviewCardProps, Reviews, type ReviewsProps, ReviewsShowcase, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, StarRating, type StarRatingProps, type TFontWeight, type THeadingSize, type TTextAlign, type TTextSize, type TTextWrap, TagChip, type TagChipProps, type TagChipVariant, Text, TextArea, type TextProps, type TextareaProps, ThemeTokens, UserCard, type UserCardProps, Widget, WidgetPanel, type WidgetPanelProps, type WidgetProps, WidgetTrigger, type WidgetTriggerProps, globalStyles, styles };
+export { AIResponse, type AIResponseProps, AvailabilityBadge, type AvailabilityBadgeProps, type AvailabilityBadgeVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarType, type BaseInputProps, Box, type BoxProps, Button, type ButtonProps, type ButtonVariants, ChatWidget, type ChatWidgetMessage, type ChatWidgetProps, Column, type ColumnProps, Container, Divider, type DividerProps, type FeatureItem, FeatureList, type FeatureListProps, type FeatureListSection, FieldNoteCard, type FieldNoteCardProps, FormField, type FormFieldProps, GlobalStyle, Grid, type GridBreakpoint, GridContainer, type GridContainerProps, type GridProps, Heading, type HeadingProps, HuntCard, type HuntCardProps, Icon, IconLabel, type IconLabelProps, type IconProps, type IconSize, IconSizeMap, type IconVariantTypes$1 as IconVariantTypes, InfoBox, type InfoBoxProps, Input, type InputProps, type InputSize, type InputVariant, LayoutTokens, ListingChat, type ListingChatProps, Logo, type LogoProps, type LogoTheme, type LogoVariant, MarkdownContent, type MarkdownContentProps, MessageBubble, type MessageBubbleProps, type NavLink, Navigation, type NavigationProps, PackageCard, type PackageCardProps, PackageHeader, type PackageHeaderProps, type ResponsiveValue, ReviewCard, type ReviewCardProps, Reviews, type ReviewsProps, ReviewsShowcase, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, StarRating, type StarRatingProps, type SuggestedPrompt, type TFontWeight, type THeadingSize, type TTextAlign, type TTextSize, type TTextWrap, TagChip, type TagChipProps, type TagChipVariant, Text, TextArea, type TextProps, type TextareaProps, ThemeTokens, type TopMatchingFieldNote, type TopMatchingReview, UserCard, type UserCardProps, Widget, WidgetPanel, type WidgetPanelProps, type WidgetProps, WidgetTrigger, type WidgetTriggerProps, globalStyles, styles };