@landtrustinc/design-system 1.2.3 → 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

@@ -1327,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
      */

package/dist/index.js

@@ -5371,6 +5371,7 @@ var ChatWidget = ({
 var ChatWidget_default = ChatWidget;
 
 // src/FeatureList/components/FeatureListItem.tsx
+var import_react_loading_skeleton = __toESM(require("react-loading-skeleton"));
 var import_jsx_runtime214 = require("@emotion/react/jsx-runtime");
 var FeatureListItem = ({
   iconVariant,
@@ -5378,9 +5379,41 @@ var FeatureListItem = ({
   subtitle,
   iconSize = "large",
   iconColor,
+  isLoading = false,
   className,
   ...rest
 }) => {
+  const iconDimensions = IconSizeMap[iconSize];
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(Box_default, { display: "flex", flexDirection: "column", color: "var(--text-primary)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
+        Box_default,
+        {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--spacing-2)",
+          className,
+          ...rest,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+              import_react_loading_skeleton.default,
+              {
+                circle: true,
+                width: iconDimensions.width,
+                height: iconDimensions.height,
+                borderRadius: 4
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(import_react_loading_skeleton.default, { width: 120, height: 16, borderRadius: 4 })
+          ]
+        }
+      ),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-3)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(Box_default, { width: "var(--spacing-6)", children: "\xA0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(import_react_loading_skeleton.default, { width: 150, height: 14, borderRadius: 4 })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(Box_default, { display: "flex", flexDirection: "column", color: "var(--text-primary)", children: [
     /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(
       Box_default,