@landtrustinc/design-system 1.2.3 → 1.2.5-beta.0

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

@@ -24,6 +24,7 @@ declare const media: {
     lg: string;
     xl: string;
 };
+declare const breakpoints: string[];
 declare const colors: {
     gray: {
         100: string;
@@ -269,6 +270,7 @@ declare const ThemeTokens: {
         lg: string;
         xl: string;
     };
+    breakpoints: string[];
     colors: {
         gray: {
             100: string;
@@ -506,6 +508,7 @@ declare const ThemeTokens: {
 declare const styles_ThemeTokens: typeof ThemeTokens;
 declare const styles_borderRadius: typeof borderRadius;
 declare const styles_boxShadow: typeof boxShadow;
+declare const styles_breakpoints: typeof breakpoints;
 declare const styles_colors: typeof colors;
 declare const styles_fontSizes: typeof fontSizes;
 declare const styles_fontWeights: typeof fontWeights;
@@ -521,7 +524,7 @@ declare const styles_textShadow: typeof textShadow;
 declare const styles_transition: typeof transition;
 declare const styles_zIndex: typeof zIndex;
 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 };
+  export { styles_ThemeTokens as ThemeTokens, styles_borderRadius as borderRadius, styles_boxShadow as boxShadow, styles_breakpoints as breakpoints, 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 = {
@@ -1274,6 +1277,11 @@ type ChatWidgetProps = {
      * Whether to show thinking indicator
      */
     isThinking?: boolean;
+    /**
+     * Text to display in thinking state
+     * @default "Thinking..."
+     */
+    thinkingText?: string;
     /**
      * Messages to show when chat is empty
      */
@@ -1295,8 +1303,12 @@ type ChatWidgetProps = {
      * @default "Other Helpful Topics"
      */
     suggestedPromptsTitle?: string;
+    /**
+     * Number to display in notification badge on trigger button
+     */
+    notificationCount?: number;
 };
-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;
+declare const ChatWidget: ({ title, messages, onSubmit, placeholder, disabled, className, ariaLabel, panelWidth, expanded, defaultExpanded, onExpandedChange, isThinking, thinkingText, emptyState, containerProps, suggestedPrompts, onPromptClick, suggestedPromptsTitle, notificationCount, }: ChatWidgetProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type DividerProps = React__default.HTMLAttributes<HTMLHRElement> & SpaceProps & {
     /**
@@ -1327,6 +1339,10 @@ type FeatureListItemProps = {
      * Optional subtitle/description text
      */
     subtitle?: React__default.ReactNode;
+    /**
+     * Loading state - shows skeleton when true
+     */
+    isLoading?: boolean;
     /**
      * Additional CSS class names
      */