sunpeak 0.1.25 → 0.2.2

package/dist/styles/globals.css

@@ -0,0 +1,220 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Tailwind v4 theme configuration */
+@theme {
+  /* ===================================
+   * COLORS - Mapped to shadcn and --sp- variables
+   * ===================================
+   */
+  --color-*: initial;
+
+  /* Shadcn colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-border: var(--border);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Sunpeak semantic colors */
+  --color-success: var(--sp-success);
+  --color-warning: var(--sp-warning);
+  --color-error: var(--sp-error);
+  --color-info: var(--sp-info);
+
+  /* ===================================
+   * TYPOGRAPHY - Mapped to --sp- variables
+   * ===================================
+   */
+
+  /* Font families */
+  --font-sans: var(--sp-font-family);
+
+  /* Font sizes */
+  --text-xs: var(--sp-font-size-xs);
+  --text-sm: var(--sp-font-size-sm);
+  --text-base: var(--sp-font-size-base);
+  --text-lg: var(--sp-font-size-lg);
+  --text-xl: var(--sp-font-size-xl);
+
+  /* Font weights */
+  --font-weight-normal: var(--sp-font-weight-normal);
+  --font-weight-medium: var(--sp-font-weight-medium);
+  --font-weight-semibold: var(--sp-font-weight-semibold);
+  --font-weight-bold: var(--sp-font-weight-bold);
+
+  /* Line heights */
+  --leading-tight: var(--sp-line-height-tight);
+  --leading-normal: var(--sp-line-height-normal);
+  --leading-relaxed: var(--sp-line-height-relaxed);
+
+  /* ===================================
+   * SPACING - Mapped to --sp- variables
+   * ===================================
+   */
+  --spacing-1: var(--sp-spacing-1);
+  --spacing-2: var(--sp-spacing-2);
+  --spacing-3: var(--sp-spacing-3);
+  --spacing-4: var(--sp-spacing-4);
+  --spacing-5: var(--sp-spacing-5);
+  --spacing-6: var(--sp-spacing-6);
+  --spacing-8: var(--sp-spacing-8);
+
+  /* ===================================
+   * BORDER RADIUS - Mapped to --sp- variables
+   * ===================================
+   */
+  --radius-sm: var(--sp-radius-sm);
+  --radius-md: var(--sp-radius-md);
+  --radius-lg: var(--sp-radius-lg);
+  --radius-xl: var(--sp-radius-xl);
+  --radius-2xl: var(--sp-radius-2xl);
+  --radius-full: var(--sp-radius-full);
+
+  /* ===================================
+   * SHADOWS - Mapped to --sp- variables
+   * ===================================
+   */
+  --shadow-sm: var(--sp-shadow-sm);
+  --shadow-md: var(--sp-shadow-md);
+  --shadow-lg: var(--sp-shadow-lg);
+  --shadow-xl: var(--sp-shadow-xl);
+}
+
+/* ===================================
+ * THEME MODE CLASSES
+ * ===================================
+ * Force light/dark mode on specific elements
+ */
+
+.light {
+  --sp-color-bg-primary: var(--sp-light-color-bg-primary);
+  --sp-color-bg-secondary: var(--sp-light-color-bg-secondary);
+  --sp-color-bg-tertiary: var(--sp-light-color-bg-tertiary);
+  --sp-color-text-primary: var(--sp-light-color-text-primary);
+  --sp-color-text-secondary: var(--sp-light-color-text-secondary);
+  --sp-color-text-tertiary: var(--sp-light-color-text-tertiary);
+  --sp-color-text-inverted: var(--sp-light-color-text-inverted);
+  --sp-color-border: var(--sp-light-color-border);
+  --sp-success: var(--sp-light-success);
+  --sp-warning: var(--sp-light-warning);
+  --sp-error: var(--sp-light-error);
+  --sp-info: var(--sp-light-info);
+  --sp-accent: var(--sp-light-accent);
+  --sp-accent-hover: var(--sp-light-accent-hover);
+  --sp-accent-active: var(--sp-light-accent-active);
+  --sp-accent-foreground: var(--sp-light-accent-foreground);
+
+  /* shadcn/ui light mode variables */
+  --background: var(--sp-light-color-bg-primary);
+  --foreground: var(--sp-light-color-text-primary);
+  --card: var(--sp-light-color-bg-primary);
+  --card-foreground: var(--sp-light-color-text-primary);
+  --popover: var(--sp-light-color-bg-primary);
+  --popover-foreground: var(--sp-light-color-text-primary);
+  --primary: var(--sp-light-accent);
+  --primary-foreground: var(--sp-accent-foreground);
+  --secondary: var(--sp-light-color-bg-secondary);
+  --secondary-foreground: var(--sp-light-color-text-primary);
+  --muted: var(--sp-light-color-bg-tertiary);
+  --muted-foreground: var(--sp-light-color-text-tertiary);
+  --accent: var(--sp-light-accent);
+  --accent-foreground: var(--sp-accent-foreground);
+  --destructive: var(--sp-light-error);
+  --destructive-foreground: var(--sp-accent-foreground);
+  --border: var(--sp-light-color-border);
+  --input: var(--sp-light-color-bg-secondary);
+  --ring: var(--sp-light-accent);
+  --sidebar: var(--sp-light-sidebar);
+  --sidebar-foreground: var(--sp-light-color-text-primary);
+  --sidebar-primary: var(--sp-light-accent);
+  --sidebar-primary-foreground: var(--sp-light-color-text-primary);
+  --sidebar-accent: var(--sp-light-accent);
+  --sidebar-accent-foreground: var(--sp-light-color-text-primary);
+  --sidebar-border: var(--sp-light-color-border);
+  --sidebar-ring: var(--sp-light-accent);
+}
+
+.dark {
+  --sp-color-bg-primary: var(--sp-dark-color-bg-primary);
+  --sp-color-bg-secondary: var(--sp-dark-color-bg-secondary);
+  --sp-color-bg-tertiary: var(--sp-dark-color-bg-tertiary);
+  --sp-color-text-primary: var(--sp-dark-color-text-primary);
+  --sp-color-text-secondary: var(--sp-dark-color-text-secondary);
+  --sp-color-text-tertiary: var(--sp-dark-color-text-tertiary);
+  --sp-color-text-inverted: var(--sp-dark-color-text-inverted);
+  --sp-color-border: var(--sp-dark-color-border);
+  --sp-success: var(--sp-dark-success);
+  --sp-warning: var(--sp-dark-warning);
+  --sp-error: var(--sp-dark-error);
+  --sp-info: var(--sp-dark-info);
+  --sp-accent: var(--sp-dark-accent);
+  --sp-accent-hover: var(--sp-dark-accent-hover);
+  --sp-accent-active: var(--sp-dark-accent-active);
+  --sp-accent-foreground: var(--sp-dark-accent-foreground);
+
+  /* shadcn/ui dark mode variables */
+  --background: var(--sp-dark-color-bg-primary);
+  --foreground: var(--sp-dark-color-text-primary);
+  --card: var(--sp-dark-color-bg-primary);
+  --card-foreground: var(--sp-dark-color-text-primary);
+  --popover: var(--sp-dark-color-bg-primary);
+  --popover-foreground: var(--sp-dark-color-text-primary);
+  --primary: var(--sp-dark-accent);
+  --primary-foreground: var(--sp-accent-foreground);
+  --secondary: var(--sp-dark-color-bg-secondary);
+  --secondary-foreground: var(--sp-dark-color-text-primary);
+  --muted: var(--sp-dark-color-bg-tertiary);
+  --muted-foreground: var(--sp-dark-color-text-tertiary);
+  --accent: var(--sp-dark-accent);
+  --accent-foreground: var(--sp-accent-foreground);
+  --destructive: var(--sp-dark-error);
+  --destructive-foreground: var(--sp-accent-foreground);
+  --border: var(--sp-dark-color-border);
+  --input: var(--sp-dark-color-bg-secondary);
+  --ring: var(--sp-dark-accent);
+  --sidebar: var(--sp-dark-sidebar);
+  --sidebar-foreground: var(--sp-dark-color-text-primary);
+  --sidebar-primary: var(--sp-dark-accent);
+  --sidebar-primary-foreground: var(--sp-dark-color-text-primary);
+  --sidebar-accent: var(--sp-dark-accent);
+  --sidebar-accent-foreground: var(--sp-dark-color-text-primary);
+  --sidebar-border: var(--sp-dark-color-border);
+  --sidebar-ring: var(--sp-dark-accent);
+}
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sunpeak",
-  "version": "0.1.25",
-  "description": "React library for cross-platform genAI App UIs.",
+  "version": "0.2.2",
+  "description": "The ChatGPT Apps UI SDK. Build and test your ChatGPT App UI locally with approved shadcn React components.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -17,10 +17,17 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./styles/globals.css": "./dist/styles/globals.css",
+    "./styles/chatgpt": "./dist/styles/chatgpt/index.css",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "sunpeak": "./bin/sunpeak.js"
+  },
   "files": [
     "dist",
+    "bin",
+    "template",
     "README.md"
   ],
   "sideEffects": false,
@@ -32,43 +39,34 @@
     "multi-platform",
     "react",
     "components",
-    "material-ui",
+    "shadcn-ui",
+    "tailwindcss",
     "sunpeak"
   ],
   "author": "Sunpeak AI",
   "license": "MIT",
   "peerDependencies": {
-    "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0",
-    "@mui/icons-material": "^6.0.0 || ^7.0.0",
-    "@mui/material": "^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "@mui/material": {
-      "optional": true
-    },
-    "@mui/icons-material": {
-      "optional": true
-    },
-    "@emotion/react": {
-      "optional": true
-    },
-    "@emotion/styled": {
-      "optional": true
-    }
-  },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.5",
-    "@mui/material": "^7.3.5"
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.554.0",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "@types/jest": "^30.0.0",
+    "@tailwindcss/vite": "^4.1.17",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -79,17 +77,17 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "jsdom": "^25.0.1",
+    "jsdom": "^27.2.0",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "ts-jest": "^29.4.5",
+    "tailwindcss": "^4.1.17",
     "ts-node": "^10.9.2",
     "tsup": "^8.3.5",
+    "tsx": "^4.20.6",
     "typescript": "^5.6.3",
-    "vite": "^5.4.21"
+    "vite": "^5.4.21",
+    "vitest": "^4.0.12"
   },
   "repository": {
     "type": "git",
@@ -101,9 +99,9 @@
   "homepage": "https://sunpeak.ai/",
   "scripts": {
     "build": "tsup",
-    "dev": "vite",
-    "test": "jest",
+    "dev": "pnpm --filter my-sunpeak-app dev",
     "lint": "eslint . --ext .ts,.tsx --fix",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }

package/template/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+coverage
+*.cjs

package/template/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "arrowParens": "always"
+}

package/template/README.md

@@ -0,0 +1,47 @@
+# sunpeak-app
+
+A ChatGPT App UI built with [sunpeak](https://github.com/Sunpeak-AI/sunpeak).
+
+## Quickstart
+
+Requirements: Node (20+), pnpm (10+)
+
+```bash
+pnpm dev
+```
+
+Edit [src/App.tsx](./src/App.tsx) to build your app UI.
+
+## Development
+
+### Initial Project Structure
+
+```
+src/
+├── App.tsx          # Your main app component
+└── components       # Your shadcn/ui React components
+
+dist/                # Build output (generated)
+└── chatgpt/         # ChatGPT builds
+```
+
+## Build & Deploy
+
+Build your app for production:
+
+```bash
+pnpm build
+```
+
+This creates optimized builds in the `dist/` directory:
+
+- `dist/chatgpt/index.js` - ChatGPT iframe component
+  - Host this file somewhere and reference it as a resource in your MCP server.
+
+## Resources
+
+- [sunpeak](https://github.com/Sunpeak-AI/sunpeak)
+- [ChatGPT Apps SDK Design Guidelines](https://developers.openai.com/apps-sdk/concepts/design-guidelines)
+- [ChatGPT Apps SDK UI Documentation](https://developers.openai.com/apps-sdk/build/chatgpt-ui)
+- [ChatGPT Apps SDK Examples](https://github.com/openai/openai-apps-sdk-examples)
+- [shadcn/ui](https://ui.shadcn.com/)

package/template/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib",
+    "ui": "@/components/shadcn",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/template/dev/main.tsx

@@ -0,0 +1,65 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ChatGPTSimulator } from 'sunpeak';
+import { App } from '@/App';
+import './styles.css';
+
+const places = [
+  {
+    id: '1',
+    name: 'Lady Bird Lake',
+    rating: 4.5,
+    category: 'Waterfront',
+    location: 'Austin',
+    image: 'https://images.unsplash.com/photo-1520950237264-dfe336995c34?w=400&h=400&fit=crop',
+    description: 'Scenic lake perfect for kayaking, paddleboarding, and trails.',
+  },
+  {
+    id: '2',
+    name: 'Texas State Capitol',
+    rating: 4.8,
+    category: 'Historic Site',
+    location: 'Austin',
+    image: 'https://images.unsplash.com/photo-1664231978322-4d0b45c7027b?w=400&h=400&fit=crop',
+    description: 'Stunning capitol building with free tours and beautiful grounds.',
+  },
+  {
+    id: '3',
+    name: 'The Paramount Theatre',
+    rating: 4.7,
+    category: 'Architecture',
+    location: 'Austin',
+    image: 'https://images.unsplash.com/photo-1583097090970-4d3b940ea1a0?w=400&h=400&fit=crop',
+    description: 'Century-old performance and movie theatre in the heart of downtown Austin.',
+  },
+  {
+    id: '4',
+    name: 'Zilker Park',
+    rating: 4.7,
+    category: 'Park',
+    location: 'Austin',
+    image: 'https://images.unsplash.com/photo-1563828568124-f800803ba13c?w=400&h=400&fit=crop',
+    description: 'Popular park with trails, sports fields, and Barton Springs Pool.',
+  },
+  {
+    id: '5',
+    name: 'South Congress Avenue',
+    rating: 4.6,
+    category: 'Landmark',
+    location: 'Austin',
+    image: 'https://images.unsplash.com/photo-1588993608283-7f0eda4438be?w=400&h=400&fit=crop',
+    description: 'Vibrant street with unique shops, restaurants, and live music.',
+  },
+];
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ChatGPTSimulator
+      appName="Splorin"
+      appIcon="✈️"
+      userMessage="Show me popular places to visit in Austin Texas"
+    >
+      <App data={places} />
+    </ChatGPTSimulator>
+  </StrictMode>
+);

package/template/dev/styles.css

@@ -0,0 +1,5 @@
+/* Dev styles - imports globals.css */
+@import "@/styles/globals.css";
+
+/* Scan sunpeak source for Tailwind classes (only works in workspace, ignored otherwise) */
+@source "../../src/**/*.{ts,tsx}";

package/template/eslint.config.cjs

@@ -0,0 +1,49 @@
+// eslint.config.cjs
+const ts = require('@typescript-eslint/eslint-plugin');
+const tsParser = require('@typescript-eslint/parser');
+const react = require('eslint-plugin-react');
+const reactHooks = require('eslint-plugin-react-hooks');
+const prettier = require('eslint-config-prettier');
+
+module.exports = [
+  {
+    ignores: ['**/dist', '**/node_modules', '*.cjs', '**/tmp',],
+  },
+  {
+    files: ['**/*.{ts,tsx,js,jsx}'],
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+    },
+
+    plugins: {
+      '@typescript-eslint': ts,
+      react,
+      'react-hooks': reactHooks,
+    },
+
+    settings: {
+      react: { version: 'detect' },
+    },
+
+    rules: {
+      ...ts.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      ...prettier.rules,
+
+      'react/prop-types': 'off',
+
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+      ],
+    },
+  },
+];

package/template/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sunpeak - ChatGPT App SDK</title>
+    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/dev/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "my-sunpeak-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsup",
+    "dev": "vite",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "embla-carousel-wheel-gestures": "^8.1.0",
+    "lucide-react": "^0.554.0",
+    "sunpeak": "workspace:*",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.17",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
+    "@typescript-eslint/parser": "^8.47.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "jsdom": "^27.2.0",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^4.1.17",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.3.5",
+    "tsx": "^4.20.6",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.21",
+    "vitest": "^4.0.12"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,45 @@
+import { SunpeakCarousel, SunpeakCard } from './components';
+import '@/styles/globals.css';
+import '@/styles/chatgpt.css';
+
+export interface Place {
+  id: string;
+  name: string;
+  rating: number;
+  category: string;
+  location: string;
+  image: string;
+  description: string;
+}
+
+export interface AppProps {
+  data: Place[];
+}
+
+export function App({ data }: AppProps) {
+  return (
+    <SunpeakCarousel gap={16} showArrows={true} showEdgeGradients={true} cardWidth={280}>
+      {data.map((place) => (
+        <SunpeakCard
+          key={place.id}
+          image={place.image}
+          imageAlt={place.name}
+          header={place.name}
+          metadata={`⭐ ${place.rating} • ${place.category} • ${place.location}`}
+          button1={{
+            isPrimary: true,
+            onClick: () => console.log(`Visit ${place.name}`),
+            children: 'Visit',
+          }}
+          button2={{
+            isPrimary: false,
+            onClick: () => console.log(`Learn more about ${place.name}`),
+            children: 'Learn More',
+          }}
+        >
+          {place.description}
+        </SunpeakCard>
+      ))}
+    </SunpeakCarousel>
+  );
+}

package/template/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './sunpeak-carousel';
+export * from './sunpeak-card';