@inorain_development/hotel-smarters-chat-ui 1.0.0

package/lib/typescript/module/features/chat/components/service/service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/chat/components/service/service.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAiB,CAAC;AAEnD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,KAAkB,EAClB,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,CAAC,WAAW,CAAC,+BAiEjC"}

package/lib/typescript/module/features/chat/components/service/service.model.d.ts

@@ -0,0 +1,10 @@
+import type { LocalizedText } from '../../model/chat.model.js';
+export interface ServiceItem {
+    id: number;
+    image: string;
+    name: LocalizedText;
+    description: LocalizedText;
+    price: string;
+    departmentUnitId: number;
+}
+//# sourceMappingURL=service.model.d.ts.map

package/lib/typescript/module/features/chat/components/service/service.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.model.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/chat/components/service/service.model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAAwB,CAAC;AAE5D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,aAAa,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;CAC1B"}

package/lib/typescript/module/features/chat/components/service/service.native.d.ts

@@ -0,0 +1,4 @@
+import type { ChatComponentProps } from '../../model/chat.model.js';
+import type { ServiceItem } from './service.model.js';
+export declare function Service({ data, theme, language, actionLabel, onAction, onSelect, }: ChatComponentProps<ServiceItem>): import("react").JSX.Element;
+//# sourceMappingURL=service.native.d.ts.map

package/lib/typescript/module/features/chat/components/service/service.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.native.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/chat/components/service/service.native.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAiB,CAAC;AAEnD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,KAAkB,EAClB,QAAQ,EACR,WAAuB,EACvB,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,CAAC,WAAW,CAAC,+BA8EjC"}

package/lib/typescript/module/features/chat/index.d.ts

@@ -0,0 +1,8 @@
+export { Product } from './components/product/index.js';
+export { Service } from './components/service/index.js';
+export { ChatComponentRenderer } from './renderer/index.js';
+export { ComponentType, ItemAction, Theme } from './model/chat.model.js';
+export type { ProductItem } from './components/product/product.model.js';
+export type { ServiceItem } from './components/service/service.model.js';
+export type { ActionHandler, ChatComponentProps, ItemCount, Language, LocalizedText, } from './model/chat.model.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/features/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAAsB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAY,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,uBAAoB,CAAC;AACtE,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAoC,CAAC;AACtE,YAAY,EAAE,WAAW,EAAE,MAAM,uCAAoC,CAAC;AACtE,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,aAAa,GACd,MAAM,uBAAoB,CAAC"}

package/lib/typescript/module/features/chat/model/chat.model.d.ts

@@ -0,0 +1,31 @@
+export declare enum Theme {
+    Dark = "dark",
+    Light = "light"
+}
+export type Language = string;
+export type LocalizedText = Record<string, string>;
+export declare enum ComponentType {
+    Product = "product",
+    ProductList = "productList",
+    Service = "service",
+    ServiceList = "serviceList"
+}
+export declare enum ItemAction {
+    Add = "add"
+}
+export type ActionHandler<TItem = unknown> = (item: TItem, action?: ItemAction) => void;
+export interface ItemCount {
+    id: number;
+    count: number;
+}
+export interface ChatComponentProps<TItem = unknown> {
+    type: ComponentType;
+    data: TItem | TItem[];
+    language?: Language;
+    onAction?: ActionHandler<TItem>;
+    onSelect?: ActionHandler<TItem>;
+    actionLabel?: string;
+    counts?: ItemCount[];
+    theme?: Theme;
+}
+//# sourceMappingURL=chat.model.d.ts.map

package/lib/typescript/module/features/chat/model/chat.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat.model.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chat/model/chat.model.ts"],"names":[],"mappings":"AAAA,oBAAY,KAAK;IACf,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC;AAC9B,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEnD,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,UAAU;IACpB,GAAG,QAAQ;CACZ;AAED,MAAM,MAAM,aAAa,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;AAExF,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB,CAAC,KAAK,GAAG,OAAO;IACjD,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}

package/lib/typescript/module/features/chat/renderer/index.d.ts

@@ -0,0 +1,2 @@
+export { ChatComponentRenderer } from './renderer';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/features/chat/renderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chat/renderer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC"}

package/lib/typescript/module/features/chat/renderer/renderer.d.ts

@@ -0,0 +1,5 @@
+import type { ProductItem } from '../components/product/product.model.js';
+import type { ServiceItem } from '../components/service/service.model.js';
+import type { ChatComponentProps } from '../model/chat.model.js';
+export declare function ChatComponentRenderer({ type, ...rest }: ChatComponentProps<ProductItem | ServiceItem>): import("react").JSX.Element | null;
+//# sourceMappingURL=renderer.d.ts.map

package/lib/typescript/module/features/chat/renderer/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chat/renderer/renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAqC,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAqC,CAAC;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAqB,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,WAAW,GAAG,WAAW,CAAC,sCAW/C"}

package/lib/typescript/module/features/chat/renderer/renderer.native.d.ts

@@ -0,0 +1,5 @@
+import type { ProductItem } from '../components/product/product.model.js';
+import type { ServiceItem } from '../components/service/service.model.js';
+import type { ChatComponentProps } from '../model/chat.model.js';
+export declare function ChatComponentRenderer({ type, ...rest }: ChatComponentProps<ProductItem | ServiceItem>): import("react").JSX.Element | null;
+//# sourceMappingURL=renderer.native.d.ts.map

package/lib/typescript/module/features/chat/renderer/renderer.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.native.d.ts","sourceRoot":"","sources":["../../../../../../src/features/chat/renderer/renderer.native.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAqC,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAqC,CAAC;AAEvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAqB,CAAC;AAE9D,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,WAAW,GAAG,WAAW,CAAC,sCAW/C"}

package/lib/typescript/module/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Root entry (aggregator). Defaults to the web/DOM build.
+ *
+ * Prefer importing the explicit platform entry in apps:
+ *   - `@inorain_development/hotel-smarters-chat-ui/native` -> React Native (mobile + web client via react-native-web)
+ *   - `@inorain_development/hotel-smarters-chat-ui/web`    -> React DOM (admin)
+ *
+ * Public exports are added here once domain components exist.
+ */
+export * from './web.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,cAAc,UAAO,CAAC"}

package/lib/typescript/module/native.d.ts

@@ -0,0 +1,8 @@
+export { Product } from './features/chat/components/product/product.native.js';
+export { Service } from './features/chat/components/service/service.native.js';
+export { ChatComponentRenderer } from './features/chat/renderer/renderer.native.js';
+export { ComponentType, ItemAction, Theme } from './features/chat/model/chat.model.js';
+export type { ProductItem } from './features/chat/components/product/product.model.js';
+export type { ServiceItem } from './features/chat/components/service/service.model.js';
+export type { ActionHandler, ChatComponentProps, ItemCount, Language, LocalizedText, } from './features/chat/model/chat.model.js';
+//# sourceMappingURL=native.d.ts.map

package/lib/typescript/module/native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../../../src/native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sDAAmD,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,sDAAmD,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA0C,CAAC;AACjF,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,qCAAkC,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,MAAM,qDAAkD,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,MAAM,qDAAkD,CAAC;AACpF,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,aAAa,GACd,MAAM,qCAAkC,CAAC"}

package/lib/typescript/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/module/utils/i18n.utils.d.ts

@@ -0,0 +1,3 @@
+import type { Language, LocalizedText } from '../features/chat/model/chat.model.js';
+export declare function resolveText(text: LocalizedText, language?: Language): string;
+//# sourceMappingURL=i18n.utils.d.ts.map

package/lib/typescript/module/utils/i18n.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,sCAAmC,CAAC;AAEjF,wBAAgB,WAAW,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAI5E"}

package/lib/typescript/module/utils/theme.utils.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../features/chat/model/chat.model.js';
+export interface ThemeClasses {
+    surface: string;
+    border: string;
+    title: string;
+    subtitle: string;
+    price: string;
+    actionBorder: string;
+    actionText: string;
+    divider: string;
+    iconBg: string;
+    iconText: string;
+    iconColor: string;
+}
+export declare function getThemeClasses(theme?: Theme): ThemeClasses;
+//# sourceMappingURL=theme.utils.d.ts.map

package/lib/typescript/module/utils/theme.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/theme.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAmC,CAAC;AAE1D,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AA8BD,wBAAgB,eAAe,CAAC,KAAK,GAAE,KAAkB,GAAG,YAAY,CAEvE"}

package/lib/typescript/module/utils/use-expandable-list.d.ts

@@ -0,0 +1,8 @@
+export declare function useExpandableList<T>(items: T[], limit?: number): {
+    head: T[];
+    rest: T[];
+    expanded: boolean;
+    hasMore: boolean;
+    toggle: () => void;
+};
+//# sourceMappingURL=use-expandable-list.d.ts.map

package/lib/typescript/module/utils/use-expandable-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-expandable-list.d.ts","sourceRoot":"","sources":["../../../../src/utils/use-expandable-list.ts"],"names":[],"mappings":"AAIA,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,KAAK,SAAkB;;;;;;EAOvE"}

package/lib/typescript/module/web.d.ts

@@ -0,0 +1,8 @@
+export { Product } from './features/chat/components/product/product';
+export { Service } from './features/chat/components/service/service';
+export { ChatComponentRenderer } from './features/chat/renderer/renderer';
+export { ComponentType, ItemAction, Theme } from './features/chat/model/chat.model.js';
+export type { ProductItem } from './features/chat/components/product/product.model.js';
+export type { ServiceItem } from './features/chat/components/service/service.model.js';
+export type { ActionHandler, ChatComponentProps, ItemCount, Language, LocalizedText, } from './features/chat/model/chat.model.js';
+//# sourceMappingURL=web.d.ts.map

package/lib/typescript/module/web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.d.ts","sourceRoot":"","sources":["../../../src/web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,4CAA4C,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,4CAA4C,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,qCAAkC,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,MAAM,qDAAkD,CAAC;AACpF,YAAY,EAAE,WAAW,EAAE,MAAM,qDAAkD,CAAC;AACpF,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,aAAa,GACd,MAAM,qCAAkC,CAAC"}

package/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@inorain_development/hotel-smarters-chat-ui",
+  "version": "1.0.0",
+  "description": "Cross-platform (React DOM + React Native) chat UI components that render dynamically from an AI-provided { type, data } payload.",
+  "private": false,
+  "license": "UNLICENSED",
+  "source": "./src/index.ts",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    },
+    "./native": {
+      "source": "./src/native.ts",
+      "react-native": "./src/native.ts",
+      "import": {
+        "types": "./lib/typescript/module/native.d.ts",
+        "default": "./lib/module/native.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/native.d.ts",
+        "default": "./lib/commonjs/native.js"
+      }
+    },
+    "./web": {
+      "import": {
+        "types": "./lib/typescript/module/web.d.ts",
+        "default": "./lib/module/web.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/web.d.ts",
+        "default": "./lib/commonjs/web.js"
+      }
+    },
+    "./styles/global.css": "./src/styles/global.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "tailwind.config.js",
+    "nativewind-env.d.ts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": "^20.19.0 || ^22.12.0 || >=23.4.0"
+  },
+  "scripts": {
+    "dev": "vite --config playground/vite.config.ts",
+    "playground:build": "vite build --config playground/vite.config.ts",
+    "playground:preview": "vite preview --config playground/vite.config.ts",
+    "build": "bob build",
+    "clean": "rimraf lib",
+    "typecheck": "tsc --noEmit",
+    "prepare": "bob build",
+    "prepack": "bob build"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "chat",
+    "ui",
+    "components",
+    "tailwind",
+    "nativewind",
+    "cross-platform"
+  ],
+  "peerDependencies": {
+    "nativewind": ">=4.0.0",
+    "react": "*",
+    "react-dom": "*",
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "nativewind": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-native/babel-preset": "^0.86.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "autoprefixer": "^10.5.2",
+    "nativewind": "^4.2.6",
+    "postcss": "^8.5.15",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-native": "^0.86.0",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-web": "^0.21.2",
+    "rimraf": "^6.1.3",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/features/chat/components/common/cart-icon.native.tsx

@@ -0,0 +1,20 @@
+export interface CartIconProps {
+  size?: number;
+  color?: string;
+}
+
+export function CartIcon({ size = 16, color = 'currentColor' }: CartIconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M3 4h2l2.4 11.2a1.5 1.5 0 0 0 1.47 1.18h7.86a1.5 1.5 0 0 0 1.47-1.18L21 8H6"
+        stroke={color}
+        strokeWidth={1.8}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="9.5" cy="20" r="1.4" fill={color} />
+      <circle cx="17" cy="20" r="1.4" fill={color} />
+    </svg>
+  );
+}

package/src/features/chat/components/common/collapsible.native.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { Animated, View } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+
+export function Collapsible({ expanded, children }: { expanded: boolean; children: ReactNode }) {
+  const [height, setHeight] = useState(0);
+  const anim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: expanded ? height : 0,
+      duration: 250,
+      useNativeDriver: false,
+    }).start();
+  }, [expanded, height, anim]);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const next = e.nativeEvent.layout.height;
+    if (next > 0 && next !== height) setHeight(next);
+  };
+
+  return (
+    <Animated.View style={{ height: anim, overflow: 'hidden' }}>
+      <View onLayout={onLayout}>{children}</View>
+    </Animated.View>
+  );
+}

package/src/features/chat/components/common/collapsible.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export function Collapsible({ expanded, children }: { expanded: boolean; children: ReactNode }) {
+  return (
+    <div
+      className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
+        expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+      }`}
+    >
+      <div className="min-h-0 overflow-hidden">{children}</div>
+    </div>
+  );
+}

package/src/features/chat/components/product/index.ts

@@ -0,0 +1,2 @@
+export { Product } from './product';
+export type { ProductItem } from './product.model';

package/src/features/chat/components/product/product.model.ts

@@ -0,0 +1,10 @@
+import type { LocalizedText } from '../../model/chat.model';
+
+export interface ProductItem {
+  id: number;
+  image: string;
+  name: LocalizedText;
+  description: LocalizedText;
+  price: string;
+  categoryId: number;
+}

package/src/features/chat/components/product/product.native.tsx

@@ -0,0 +1,117 @@
+import { Fragment, useMemo } from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible.native';
+import { CartIcon } from '../common/cart-icon.native';
+import { ItemAction, Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ProductItem } from './product.model';
+
+export function Product({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel = 'Add to cart',
+  counts,
+  onAction,
+  onSelect,
+}: ChatComponentProps<ProductItem>) {
+  const c = getThemeClasses(theme);
+  const items = Array.isArray(data) ? data : [data];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  // Build an id -> count lookup once so each row stays O(1).
+  const countById = useMemo(() => {
+    const map = new Map<number, number>();
+    for (const entry of counts ?? []) map.set(entry.id, entry.count);
+    return map;
+  }, [counts]);
+
+  const renderRow = (item: ProductItem) => {
+    const name = resolveText(item.name, language);
+    const description = resolveText(item.description, language);
+    const count = countById.get(item.id) ?? 0;
+
+    return (
+      <Pressable
+        className="flex-row items-center gap-3"
+        onPress={() => onSelect?.(item)}
+      >
+        <Image
+          accessibilityLabel={name}
+          source={{ uri: item.image }}
+          className={`h-14 w-14 rounded-lg down-sm:h-12 down-sm:w-12 ${c.iconBg}`}
+        />
+
+        <View className="flex-1 gap-1">
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-base font-bold down-sm:text-sm ${c.title}`} numberOfLines={1}>
+              {name}
+            </Text>
+
+            {count > 0 ? (
+              <View className={`flex-row items-center gap-1 rounded-full px-2 py-0.5 ${c.iconBg}`}>
+                <CartIcon size={14} color={c.iconColor} />
+                <Text className={`text-xs font-semibold ${c.iconText}`}>{count}</Text>
+              </View>
+            ) : null}
+
+            <Text className={`text-base font-bold down-sm:text-sm ${c.price}`}>{item.price}</Text>
+          </View>
+
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-sm down-sm:text-xs ${c.subtitle}`} numberOfLines={2}>
+              {description}
+            </Text>
+            <Pressable
+              accessibilityRole="button"
+              onPress={() => onAction?.(item, ItemAction.Add)}
+              className={`rounded-xl border px-3 py-1.5 ${c.actionBorder}`}
+            >
+              <Text className={`text-sm font-medium ${c.actionText}`}>{actionLabel}</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className="gap-2">
+      <View className={`rounded-2xl border px-3 py-2 ${c.surface} ${c.border}`}>
+        {head.map((item, index) => (
+          <Fragment key={item.id}>
+            {index > 0 ? <View className={`my-2.5 h-px ${c.divider}`} /> : null}
+            {renderRow(item)}
+          </Fragment>
+        ))}
+
+        {hasMore ? (
+          <>
+            <Collapsible expanded={expanded}>
+              {rest.map((item) => (
+                <Fragment key={item.id}>
+                  <View className={`my-2.5 h-px ${c.divider}`} />
+                  {renderRow(item)}
+                </Fragment>
+              ))}
+            </Collapsible>
+
+            <View className="mt-2 items-center">
+              <Pressable
+                onPress={toggle}
+                className={`rounded-xl border px-4 py-1.5 ${c.actionBorder}`}
+              >
+                <Text className={`text-sm font-medium ${c.actionText}`}>
+                  {expanded ? 'Show less' : 'Show more'}
+                </Text>
+              </Pressable>
+            </View>
+          </>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/features/chat/components/product/product.tsx

@@ -0,0 +1,80 @@
+import { Fragment } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ProductItem } from './product.model';
+
+export function Product({
+  data,
+  theme = Theme.Dark,
+  language,
+  onSelect,
+}: ChatComponentProps<ProductItem>) {
+  const c = getThemeClasses(theme);
+  const items = Array.isArray(data) ? data : [data];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  const renderRow = (item: ProductItem) => {
+    const name = resolveText(item.name, language);
+    const description = resolveText(item.description, language);
+
+    return (
+      <div
+        className="flex cursor-pointer items-center gap-3"
+        onClick={() => onSelect?.(item)}
+      >
+        <img
+          src={item.image}
+          alt={name}
+          className={`h-14 w-14 rounded-lg object-cover down-sm:h-12 down-sm:w-12 ${c.iconBg}`}
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className={`flex-1 truncate text-base font-bold down-sm:text-sm ${c.title}`}>{name}</span>
+            <span className={`shrink-0 text-base font-bold down-sm:text-sm ${c.price}`}>{item.price}</span>
+          </div>
+
+          <span className={`line-clamp-2 text-sm down-sm:text-xs ${c.subtitle}`}>{description}</span>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border px-3 py-2 ${c.surface} ${c.border}`}>
+      {head.map((item, index) => (
+        <Fragment key={item.id}>
+          {index > 0 ? <div className={`my-2.5 h-px ${c.divider}`} /> : null}
+          {renderRow(item)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <>
+          <Collapsible expanded={expanded}>
+            {rest.map((item) => (
+              <Fragment key={item.id}>
+                <div className={`my-2.5 h-px ${c.divider}`} />
+                {renderRow(item)}
+              </Fragment>
+            ))}
+          </Collapsible>
+
+          <div className="mt-2 flex justify-center">
+            <button
+              type="button"
+              onClick={toggle}
+              className={`rounded-xl border px-4 py-1.5 text-sm font-medium ${c.actionBorder} ${c.actionText}`}
+            >
+              {expanded ? 'Show less' : 'Show more'}
+            </button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/components/service/index.ts

@@ -0,0 +1,2 @@
+export { Service } from './service';
+export type { ServiceItem } from './service.model';

package/src/features/chat/components/service/service.model.ts

@@ -0,0 +1,10 @@
+import type { LocalizedText } from '../../model/chat.model';
+
+export interface ServiceItem {
+  id: number;
+  image: string;
+  name: LocalizedText;
+  description: LocalizedText;
+  price: string;
+  departmentUnitId: number;
+}