crew-recommendation-ui 0.0.1

package/dist/typography-zz5GzgjI.js

@@ -0,0 +1,245 @@
+const colors = {
+  // Primary brand colors
+  primary: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e"
+  },
+  // Neutral/Gray scale
+  neutral: {
+    0: "#ffffff",
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  // Success colors
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d"
+  },
+  // Warning colors
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309"
+  },
+  // Error colors
+  error: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c"
+  },
+  // Special colors for recommendation cards
+  card: {
+    background: {
+      light: "#ffffff",
+      dark: "#1a1a1a"
+    },
+    border: {
+      light: "#e4e4e7",
+      dark: "#3f3f46"
+    },
+    selected: {
+      light: "#e0f2fe",
+      dark: "#0c4a6e"
+    }
+  },
+  // Category-specific hue colors (for gradient backgrounds)
+  categoryHue: {
+    hotel: 220,
+    flight: 200,
+    cab: 35,
+    restaurant: 15,
+    gifting: 280,
+    default: 220
+  }
+};
+const spacing = {
+  // Base spacing values (in pixels)
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128
+};
+const semanticSpacing = {
+  // Component internal spacing
+  cardPadding: spacing[4],
+  // 16px
+  cardGap: spacing[3],
+  // 12px
+  sectionGap: spacing[6],
+  // 24px
+  // List spacing
+  listItemGap: spacing[3],
+  // 12px
+  listPadding: spacing[4],
+  // 16px
+  // Button spacing
+  buttonPaddingX: spacing[4],
+  // 16px
+  buttonPaddingY: spacing[2],
+  // 8px
+  buttonGap: spacing[2],
+  // 8px
+  // Input spacing
+  inputPaddingX: spacing[3],
+  // 12px
+  inputPaddingY: spacing[2],
+  // 8px
+  // Screen margins
+  screenMarginX: spacing[4],
+  // 16px
+  screenMarginY: spacing[4]
+  // 16px
+};
+const fontFamily = {
+  sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace'
+};
+const fontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 30,
+  "4xl": 36,
+  "5xl": 48
+};
+const fontWeight = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+const lineHeight = {
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2
+};
+const letterSpacing = {
+  tighter: -0.5,
+  tight: -0.25,
+  normal: 0,
+  wide: 0.25,
+  wider: 0.5
+};
+const textStyles = {
+  // Headings
+  h1: {
+    fontSize: fontSize["3xl"],
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight
+  },
+  h2: {
+    fontSize: fontSize["2xl"],
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight
+  },
+  h3: {
+    fontSize: fontSize.xl,
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.snug
+  },
+  h4: {
+    fontSize: fontSize.lg,
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.snug
+  },
+  // Body text
+  body: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal
+  },
+  bodySmall: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal
+  },
+  // Card specific
+  cardTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.snug
+  },
+  cardSubtitle: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal
+  },
+  cardPrice: {
+    fontSize: fontSize.xl,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight
+  },
+  // Labels and captions
+  label: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.normal
+  },
+  caption: {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal
+  }
+};
+export {
+  semanticSpacing as a,
+  fontSize as b,
+  colors as c,
+  fontWeight as d,
+  letterSpacing as e,
+  fontFamily as f,
+  lineHeight as l,
+  spacing as s,
+  textStyles as t
+};
+//# sourceMappingURL=typography-zz5GzgjI.js.map

package/dist/typography-zz5GzgjI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-zz5GzgjI.js","sources":["../src/dls/tokens/colors.ts","../src/dls/tokens/spacing.ts","../src/dls/tokens/typography.ts"],"sourcesContent":["/**\n * Color tokens for the Crew Design Language System\n * These colors are used across all recommendation cards and UI components\n */\n\nexport const colors = {\n  // Primary brand colors\n  primary: {\n    50: '#f0f9ff',\n    100: '#e0f2fe',\n    200: '#bae6fd',\n    300: '#7dd3fc',\n    400: '#38bdf8',\n    500: '#0ea5e9',\n    600: '#0284c7',\n    700: '#0369a1',\n    800: '#075985',\n    900: '#0c4a6e',\n  },\n\n  // Neutral/Gray scale\n  neutral: {\n    0: '#ffffff',\n    50: '#fafafa',\n    100: '#f4f4f5',\n    200: '#e4e4e7',\n    300: '#d4d4d8',\n    400: '#a1a1aa',\n    500: '#71717a',\n    600: '#52525b',\n    700: '#3f3f46',\n    800: '#27272a',\n    900: '#18181b',\n    950: '#09090b',\n  },\n\n  // Success colors\n  success: {\n    50: '#f0fdf4',\n    100: '#dcfce7',\n    500: '#22c55e',\n    600: '#16a34a',\n    700: '#15803d',\n  },\n\n  // Warning colors\n  warning: {\n    50: '#fffbeb',\n    100: '#fef3c7',\n    500: '#f59e0b',\n    600: '#d97706',\n    700: '#b45309',\n  },\n\n  // Error colors\n  error: {\n    50: '#fef2f2',\n    100: '#fee2e2',\n    500: '#ef4444',\n    600: '#dc2626',\n    700: '#b91c1c',\n  },\n\n  // Special colors for recommendation cards\n  card: {\n    background: {\n      light: '#ffffff',\n      dark: '#1a1a1a',\n    },\n    border: {\n      light: '#e4e4e7',\n      dark: '#3f3f46',\n    },\n    selected: {\n      light: '#e0f2fe',\n      dark: '#0c4a6e',\n    },\n  },\n\n  // Category-specific hue colors (for gradient backgrounds)\n  categoryHue: {\n    hotel: 220,\n    flight: 200,\n    cab: 35,\n    restaurant: 15,\n    gifting: 280,\n    default: 220,\n  },\n} as const;\n\nexport type Colors = typeof colors;\n\n","/**\n * Spacing tokens for consistent layout across components\n * Based on a 4px grid system\n */\n\nexport const spacing = {\n  // Base spacing values (in pixels)\n  0: 0,\n  0.5: 2,\n  1: 4,\n  1.5: 6,\n  2: 8,\n  2.5: 10,\n  3: 12,\n  3.5: 14,\n  4: 16,\n  5: 20,\n  6: 24,\n  7: 28,\n  8: 32,\n  9: 36,\n  10: 40,\n  11: 44,\n  12: 48,\n  14: 56,\n  16: 64,\n  20: 80,\n  24: 96,\n  28: 112,\n  32: 128,\n} as const;\n\n// Semantic spacing aliases\nexport const semanticSpacing = {\n  // Component internal spacing\n  cardPadding: spacing[4],       // 16px\n  cardGap: spacing[3],           // 12px\n  sectionGap: spacing[6],        // 24px\n  \n  // List spacing\n  listItemGap: spacing[3],       // 12px\n  listPadding: spacing[4],       // 16px\n  \n  // Button spacing\n  buttonPaddingX: spacing[4],    // 16px\n  buttonPaddingY: spacing[2],    // 8px\n  buttonGap: spacing[2],         // 8px\n  \n  // Input spacing\n  inputPaddingX: spacing[3],     // 12px\n  inputPaddingY: spacing[2],     // 8px\n  \n  // Screen margins\n  screenMarginX: spacing[4],     // 16px\n  screenMarginY: spacing[4],     // 16px\n} as const;\n\nexport type Spacing = typeof spacing;\nexport type SemanticSpacing = typeof semanticSpacing;\n\n","/**\n * Typography tokens for consistent text styling\n */\n\nexport const fontFamily = {\n  sans: 'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif',\n  mono: 'ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, monospace',\n} as const;\n\nexport const fontSize = {\n  xs: 12,\n  sm: 14,\n  base: 16,\n  lg: 18,\n  xl: 20,\n  '2xl': 24,\n  '3xl': 30,\n  '4xl': 36,\n  '5xl': 48,\n} as const;\n\nexport const fontWeight = {\n  normal: '400',\n  medium: '500',\n  semibold: '600',\n  bold: '700',\n} as const;\n\nexport const lineHeight = {\n  tight: 1.25,\n  snug: 1.375,\n  normal: 1.5,\n  relaxed: 1.625,\n  loose: 2,\n} as const;\n\nexport const letterSpacing = {\n  tighter: -0.5,\n  tight: -0.25,\n  normal: 0,\n  wide: 0.25,\n  wider: 0.5,\n} as const;\n\n// Pre-defined text styles\nexport const textStyles = {\n  // Headings\n  h1: {\n    fontSize: fontSize['3xl'],\n    fontWeight: fontWeight.bold,\n    lineHeight: lineHeight.tight,\n    letterSpacing: letterSpacing.tight,\n  },\n  h2: {\n    fontSize: fontSize['2xl'],\n    fontWeight: fontWeight.semibold,\n    lineHeight: lineHeight.tight,\n    letterSpacing: letterSpacing.tight,\n  },\n  h3: {\n    fontSize: fontSize.xl,\n    fontWeight: fontWeight.semibold,\n    lineHeight: lineHeight.snug,\n  },\n  h4: {\n    fontSize: fontSize.lg,\n    fontWeight: fontWeight.medium,\n    lineHeight: lineHeight.snug,\n  },\n\n  // Body text\n  body: {\n    fontSize: fontSize.base,\n    fontWeight: fontWeight.normal,\n    lineHeight: lineHeight.normal,\n  },\n  bodySmall: {\n    fontSize: fontSize.sm,\n    fontWeight: fontWeight.normal,\n    lineHeight: lineHeight.normal,\n  },\n  \n  // Card specific\n  cardTitle: {\n    fontSize: fontSize.lg,\n    fontWeight: fontWeight.semibold,\n    lineHeight: lineHeight.snug,\n  },\n  cardSubtitle: {\n    fontSize: fontSize.sm,\n    fontWeight: fontWeight.normal,\n    lineHeight: lineHeight.normal,\n  },\n  cardPrice: {\n    fontSize: fontSize.xl,\n    fontWeight: fontWeight.bold,\n    lineHeight: lineHeight.tight,\n  },\n  \n  // Labels and captions\n  label: {\n    fontSize: fontSize.sm,\n    fontWeight: fontWeight.medium,\n    lineHeight: lineHeight.normal,\n  },\n  caption: {\n    fontSize: fontSize.xs,\n    fontWeight: fontWeight.normal,\n    lineHeight: lineHeight.normal,\n  },\n} as const;\n\nexport type FontFamily = typeof fontFamily;\nexport type FontSize = typeof fontSize;\nexport type FontWeight = typeof fontWeight;\nexport type TextStyles = typeof textStyles;\n\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "crew-recommendation-ui",
+  "version": "0.0.1",
+  "description": "Shared UI library for recommendation listing components - DLS tokens and React components",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dls": {
+      "development": "./src/dls/index.ts",
+      "types": "./dist/dls/index.d.ts",
+      "import": "./dist/dls/index.js",
+      "default": "./dist/dls/index.js"
+    },
+    "./recommendation": {
+      "development": "./src/recommendation/index.ts",
+      "types": "./dist/recommendation/index.d.ts",
+      "import": "./dist/recommendation/index.js",
+      "default": "./dist/recommendation/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "nx vite:build --watch",
+    "build": "tsc && nx vite:build",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.7.2",
+    "vite": "^6.3.1",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  }
+}

package/src/dls/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Design Language System (DLS)
+ * 
+ * This module exports all design tokens and primitives
+ * for building consistent UI across platforms.
+ */
+
+// Export all tokens
+export * from './tokens';
+
+// Export components (will add primitives later)
+// export * from './components';
+
+
+

package/src/dls/tokens/colors.ts

@@ -0,0 +1,94 @@
+/**
+ * Color tokens for the Crew Design Language System
+ * These colors are used across all recommendation cards and UI components
+ */
+
+export const colors = {
+  // Primary brand colors
+  primary: {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+  },
+
+  // Neutral/Gray scale
+  neutral: {
+    0: '#ffffff',
+    50: '#fafafa',
+    100: '#f4f4f5',
+    200: '#e4e4e7',
+    300: '#d4d4d8',
+    400: '#a1a1aa',
+    500: '#71717a',
+    600: '#52525b',
+    700: '#3f3f46',
+    800: '#27272a',
+    900: '#18181b',
+    950: '#09090b',
+  },
+
+  // Success colors
+  success: {
+    50: '#f0fdf4',
+    100: '#dcfce7',
+    500: '#22c55e',
+    600: '#16a34a',
+    700: '#15803d',
+  },
+
+  // Warning colors
+  warning: {
+    50: '#fffbeb',
+    100: '#fef3c7',
+    500: '#f59e0b',
+    600: '#d97706',
+    700: '#b45309',
+  },
+
+  // Error colors
+  error: {
+    50: '#fef2f2',
+    100: '#fee2e2',
+    500: '#ef4444',
+    600: '#dc2626',
+    700: '#b91c1c',
+  },
+
+  // Special colors for recommendation cards
+  card: {
+    background: {
+      light: '#ffffff',
+      dark: '#1a1a1a',
+    },
+    border: {
+      light: '#e4e4e7',
+      dark: '#3f3f46',
+    },
+    selected: {
+      light: '#e0f2fe',
+      dark: '#0c4a6e',
+    },
+  },
+
+  // Category-specific hue colors (for gradient backgrounds)
+  categoryHue: {
+    hotel: 220,
+    flight: 200,
+    cab: 35,
+    restaurant: 15,
+    gifting: 280,
+    default: 220,
+  },
+} as const;
+
+export type Colors = typeof colors;
+
+
+

package/src/dls/tokens/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Design Language System - Tokens
+ * Export all design tokens from a single entry point
+ */
+
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+
+// Combined tokens object for convenience
+import { colors } from './colors';
+import { spacing, semanticSpacing } from './spacing';
+import { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textStyles } from './typography';
+
+export const tokens = {
+  colors,
+  spacing,
+  semanticSpacing,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+  textStyles,
+} as const;
+
+export type Tokens = typeof tokens;
+
+
+

package/src/dls/tokens/spacing.ts

@@ -0,0 +1,62 @@
+/**
+ * Spacing tokens for consistent layout across components
+ * Based on a 4px grid system
+ */
+
+export const spacing = {
+  // Base spacing values (in pixels)
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+} as const;
+
+// Semantic spacing aliases
+export const semanticSpacing = {
+  // Component internal spacing
+  cardPadding: spacing[4],       // 16px
+  cardGap: spacing[3],           // 12px
+  sectionGap: spacing[6],        // 24px
+  
+  // List spacing
+  listItemGap: spacing[3],       // 12px
+  listPadding: spacing[4],       // 16px
+  
+  // Button spacing
+  buttonPaddingX: spacing[4],    // 16px
+  buttonPaddingY: spacing[2],    // 8px
+  buttonGap: spacing[2],         // 8px
+  
+  // Input spacing
+  inputPaddingX: spacing[3],     // 12px
+  inputPaddingY: spacing[2],     // 8px
+  
+  // Screen margins
+  screenMarginX: spacing[4],     // 16px
+  screenMarginY: spacing[4],     // 16px
+} as const;
+
+export type Spacing = typeof spacing;
+export type SemanticSpacing = typeof semanticSpacing;
+
+
+

package/src/dls/tokens/typography.ts

@@ -0,0 +1,119 @@
+/**
+ * Typography tokens for consistent text styling
+ */
+
+export const fontFamily = {
+  sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace',
+} as const;
+
+export const fontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+} as const;
+
+export const fontWeight = {
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+} as const;
+
+export const lineHeight = {
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+} as const;
+
+export const letterSpacing = {
+  tighter: -0.5,
+  tight: -0.25,
+  normal: 0,
+  wide: 0.25,
+  wider: 0.5,
+} as const;
+
+// Pre-defined text styles
+export const textStyles = {
+  // Headings
+  h1: {
+    fontSize: fontSize['3xl'],
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight,
+  },
+  h2: {
+    fontSize: fontSize['2xl'],
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.tight,
+    letterSpacing: letterSpacing.tight,
+  },
+  h3: {
+    fontSize: fontSize.xl,
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.snug,
+  },
+  h4: {
+    fontSize: fontSize.lg,
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.snug,
+  },
+
+  // Body text
+  body: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+  },
+  bodySmall: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+  },
+  
+  // Card specific
+  cardTitle: {
+    fontSize: fontSize.lg,
+    fontWeight: fontWeight.semibold,
+    lineHeight: lineHeight.snug,
+  },
+  cardSubtitle: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+  },
+  cardPrice: {
+    fontSize: fontSize.xl,
+    fontWeight: fontWeight.bold,
+    lineHeight: lineHeight.tight,
+  },
+  
+  // Labels and captions
+  label: {
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.medium,
+    lineHeight: lineHeight.normal,
+  },
+  caption: {
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.normal,
+    lineHeight: lineHeight.normal,
+  },
+} as const;
+
+export type FontFamily = typeof fontFamily;
+export type FontSize = typeof fontSize;
+export type FontWeight = typeof fontWeight;
+export type TextStyles = typeof textStyles;
+
+
+

package/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * @crew-copilot/recommendation-ui
+ * 
+ * A shared UI library for recommendation listing components
+ * that can be used across:
+ * - Web (crew-website)
+ * - Mobile App (crew-app via WebView or React Native)
+ * - Dashboard
+ * 
+ * This library provides:
+ * 1. DLS (Design Language System) - tokens and primitives
+ * 2. Recommendation cards - Hotel, Flight, Cab, etc.
+ */
+
+// Export DLS (Design Language System)
+export * from './dls';
+
+// Export Recommendation components
+export * from './recommendation';
+
+// Version info
+export const VERSION = '0.0.1';
+
+
+