@envive-ai/react-toolkit 0.1.8 → 0.1.10

package/dist/{searchFilterSidebarVariants-BWQyiKwS.js → searchFilterSidebarVariants-BnIcOVWR.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-BQlaCfxi.js";
+import { ColorNames, colorVar } from "./colorsConfig-CYZ8f_gj.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-D08jyA7U.cjs → searchFilterSidebarVariants-DVZ7wRlb.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-DCvy_dV4.cjs');
+const require_colorsConfig = require('./colorsConfig-CJTKbJsm.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -17,15 +17,18 @@
   "files": [
     "dist",
     "src",
-    "!**/*.tsbuildinfo"
+    "!**/*.tsbuildinfo",
+    "tailwind-preset.js"
   ],
   "scripts": {
     "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "prepublish": "npm run build"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.3",
+    "@envive-ai/react-hooks": "^0.1.5",
     "@envive-ai/react-icons": "0.1.1",
+    "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
     "react-icons": "^5.0.1",
@@ -36,7 +39,10 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
     "typescript": "~5.8.3"
   },
@@ -113,6 +119,10 @@
       "import": "./dist/Spinner/index.js",
       "require": "./dist/Spinner/index.cjs"
     },
+    "./Styles": {
+      "import": "./dist/Styles/index.js",
+      "require": "./dist/Styles/index.cjs"
+    },
     "./SuggestionButton": {
       "import": "./dist/SuggestionButton/index.js",
       "require": "./dist/SuggestionButton/index.cjs"

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -10,7 +10,7 @@ import {
   SearchResultsGrid,
   SearchResultsLoadingGrid,
 } from '../SearchResultsStates';
-import { SearchResultsState } from './utils';
+import { SearchResultsState } from '@envive-ai/react-hooks/hooks';
 
 interface SearchResultsContentProps {
   searchResultsState: SearchResultsState;

package/src/components/SearchResultsContent/index.ts

@@ -1,2 +1 @@
 export * from './SearchResultsContent';
-export * from './utils';

package/src/components/Styles/EnviveTailwindPreset.ts

@@ -0,0 +1,285 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import typography from '@tailwindcss/typography';
+
+/**
+ * Helper function to create content paths for the Envive React Toolkit
+ * This should be used in the consuming application's tailwind.config.js
+ *
+ * @param additionalPaths - Additional content paths to include
+ * @returns Array of content paths including the toolkit components
+ */
+export const createEnviveContentPaths = (additionalPaths: string[] = []): string[] => {
+  // Dynamically resolve the path to the toolkit's dist directory
+  let toolkitPath: string;
+
+  try {
+    // This will work in Node.js environments (build time)
+    if (typeof require !== 'undefined' && typeof require.resolve === 'function') {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const path = require('path');
+      toolkitPath = path.join(
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        path.dirname(require.resolve('@envive-ai/react-toolkit/package.json')),
+        'dist/**/*.{js,cjs}',
+      );
+    } else {
+      // Fallback for environments where require is not available
+      toolkitPath = './node_modules/@envive-ai/react-toolkit/dist/**/*.{js,cjs}';
+    }
+  } catch {
+    // Fallback if resolution fails
+    toolkitPath = './node_modules/@envive-ai/react-toolkit/dist/**/*.{js,cjs}';
+  }
+
+  return [
+    // Include the toolkit's built components
+    toolkitPath,
+    // Include any additional paths provided by the consuming application
+    ...additionalPaths,
+  ];
+};
+
+/** @type {import('tailwindcss').Config} */
+export const EnviveTailwindPreset = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  prefix: 'spiffy-tw-',
+  theme: {
+    screens: {
+      sm: '480px',
+      md: '768px',
+      lg: '976px',
+      xl: '1440px',
+    },
+    fontFamily: {
+      sans: ['Inter Variable', 'Poppins', 'sans-serif'],
+    },
+    fontSize: {
+      xs: '12px',
+      sm: '14px',
+      md: '16px',
+      lg: '18px',
+      xl: '20px',
+    },
+    fontWeight: {
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+    },
+    spacing: {
+      px: '1px',
+      0.5: '2px',
+      1: '4px',
+      1.5: '6px',
+      2: '8px',
+      2.5: '10px',
+      3: '12px',
+      3.5: '14px',
+      4: '16px',
+      5: '20px',
+      6: '24px',
+      7: '28px',
+      8: '32px',
+      9: '36px',
+      10: '40px',
+      12: '48px',
+      14: '56px',
+      16: '64px',
+      20: '80px',
+      24: '96px',
+      28: '112px',
+      32: '128px',
+      36: '144px',
+      40: '160px',
+      44: '176px',
+      48: '192px',
+      52: '208px',
+      56: '224px',
+      60: '240px',
+      64: '256px',
+      72: '288px',
+      80: '320px',
+      96: '384px',
+    },
+    borderRadius: {
+      none: '0',
+      sm: '2px',
+      base: '4px',
+      md: '6px',
+      lg: '8px',
+      xl: '12px',
+      '2xl': '16px',
+      '3xl': '24px',
+      full: '9999px',
+    },
+    extend: {
+      keyframes: {
+        pulse: {
+          '0%': { borderColor: '#EDF2F7', background: '#EDF2F7' },
+          '50%': {},
+          '100%': { borderColor: '#A0AEC0', background: '#A0AEC0' },
+        },
+        ellipse_162_1_flow_1: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_162_1_flow_2: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        ellipse_162_1_flow_5: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_162_1_flow_6: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '8.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        // Ellipse 163_2 animations
+        ellipse_163_2_flow_2: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_163_2_flow_3: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        ellipse_163_2_flow_6: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_163_2_flow_7: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '16.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        // Ellipse 164_3 animations
+        ellipse_164_3_flow_3: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_164_3_flow_4: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+        ellipse_164_3_flow_7: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+        },
+        ellipse_164_3_flow_8: {
+          from: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 7.5px',
+            cy: '7.5px',
+          },
+          to: {
+            transform: 'translate(0px, 0px) rotate(0deg)',
+            transformOrigin: '24.5px 9.5px',
+            cy: '9.5px',
+          },
+        },
+      },
+      animation: {
+        pulse: 'pulse 0.8s linear infinite alternate',
+        'ellipse-1-complete':
+          'ellipse_162_1_flow_1 0.3s ease-out 0s forwards, ellipse_162_1_flow_2 0.2s ease-out 0.3s forwards, ellipse_162_1_flow_5 0.2s ease-out 0.91s forwards, ellipse_162_1_flow_6 0.2s ease-out 1.11s forwards',
+        'ellipse-2-complete':
+          'ellipse_163_2_flow_2 0.2s ease-out 0.3s forwards, ellipse_163_2_flow_3 0.2s ease-out 0.5s forwards, ellipse_163_2_flow_6 0.2s ease-out 1.11s forwards, ellipse_163_2_flow_7 0.2s ease-out 1.31s forwards',
+        'ellipse-3-complete':
+          'ellipse_164_3_flow_3 0.2s ease-out 0.5s forwards, ellipse_164_3_flow_4 0.2s ease-out 0.7s forwards, ellipse_164_3_flow_7 0.2s ease-out 1.31s forwards, ellipse_164_3_flow_8 0.2s ease-out 1.51s forwards',
+      },
+    },
+  },
+  // Content should be defined by the consuming application
+  content: [createEnviveContentPaths(['./index.html', './src/**/*.{js,ts,jsx,tsx}'])],
+  plugins: [typography],
+};

package/src/components/Styles/index.ts

@@ -0,0 +1,2 @@
+export * from './EnviveTailwindPreset';
+export { EnviveTailwindPreset as default } from './EnviveTailwindPreset';

package/tailwind-preset.js

@@ -0,0 +1,3 @@
+const { EnviveTailwindPreset } = require('./dist/Styles/index.cjs');
+
+module.exports = EnviveTailwindPreset;

package/src/components/SearchResultsContent/utils.ts

@@ -1,28 +0,0 @@
-import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-
-export interface SearchResult {
-  products: SearchResponseProduct[]; // Flattened from all responses
-  filters: string[]; // Combined from all responses
-  generatedQuery?: string;
-  totalProductCount: number;
-  searchResponseId: string;
-}
-
-export const enum SearchResultsState {
-  Loading,
-  Results,
-  NoResults,
-}
-
-export const getSearchResultsState = (
-  isLoadingSearch: boolean,
-  searchData: SearchResult | null,
-): SearchResultsState => {
-  if (isLoadingSearch) {
-    return SearchResultsState.Loading;
-  }
-  if (searchData) {
-    return SearchResultsState.Results;
-  }
-  return SearchResultsState.NoResults;
-};