create-tririga-react-ts-vite-app 1.0.0

package/README.md

@@ -0,0 +1,28 @@
+# create-pb-tririga-react-app
+
+A CLI tool to scaffold modern TRIRIGA UX applications using React, TypeScript, and Vite.
+
+## Usage
+
+You don't need to install this package locally. You can run it directly using `npx` and replace `my-tririga-app` with your desired app name:
+
+```bash
+npx create-pb-tririga-react-app my-tririga-app
+```
+
+## Features
+
+- **Framework**: React 18 + TypeScript
+- **Build Tool**: Vite (Fast HMR & Bundling)
+- **UI Library**: ShadCN
+- **Routing**: HashRouter (Compatible with TRIRIGA context paths)
+- **Deployment**: Ready-to-use scripts for `tri-deploy`
+
+## Getting Started with your new app
+
+Once created:
+
+1. `cd my-tririga-app`
+2. Install pnpm `npm install -g pnpm`
+3. Install dependencies `pnpm install`
+4. Make your first deployment with `pnpm run build:deploy`

package/index.js

@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+// 1. Get project name from command line
+const projectName = process.argv[2] || 'my-tririga-app';
+const currentDir = process.cwd();
+const projectDir = path.join(currentDir, projectName);
+
+// 2. Create Directory
+if (fs.existsSync(projectDir)) {
+  console.error(`Directory ${projectName} already exists.`);
+  process.exit(1);
+}
+fs.mkdirSync(projectDir);
+
+// 3. Copy Template Files
+const templateDir = path.join(__dirname, 'template');
+
+function copyRecursiveSync(src, dest) {
+  const exists = fs.existsSync(src);
+  const stats = exists && fs.statSync(src);
+  const isDirectory = exists && stats.isDirectory();
+
+  if (isDirectory) {
+    fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach(childItemName => {
+      copyRecursiveSync(path.join(src, childItemName), path.join(dest, childItemName));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+copyRecursiveSync(templateDir, projectDir);
+
+// Rename _gitignore to .gitignore
+const gitignorePath = path.join(projectDir, '_gitignore');
+if (fs.existsSync(gitignorePath)) {
+  fs.renameSync(gitignorePath, path.join(projectDir, '.gitignore'));
+}
+
+// Helper function for user prompts
+function askQuestion(query, hidden = false) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  if (hidden) {
+    let stdinListener = (char) => {
+      char = char + '';
+      switch (char) {
+        case '\n':
+        case '\r':
+        case '\u0004':
+          process.stdin.removeListener('data', stdinListener);
+          break;
+        default:
+          process.stdout.write('\x1B[2K\x1B[200D' + query + Array(rl.line.length + 1).join('*'));
+          break;
+      }
+    };
+    process.stdin.on('data', stdinListener);
+  }
+
+  return new Promise((resolve) => rl.question(query, (ans) => {
+    rl.close();
+    if (hidden) console.log(); // Add newline after hidden input
+    resolve(ans);
+  }));
+}
+
+async function configureApp() {
+  console.log('\n--- Configuration Setup ---\n');
+
+  const triUrl = await askQuestion('TRIRIGA Environment URL (e.g., https://your-tririga-server.com): ');
+  const triUser = await askQuestion('TRIRIGA Username: ');
+  const triPassword = await askQuestion('TRIRIGA Password: ', true);
+  const appTitle = await askQuestion('App Title (e.g., TRIRIGA Service Request): ');
+  const appExposedName = await askQuestion('Application Exposed Name (e.g., myTririgaApp): ');
+  const modelAndView = await askQuestion('Model and View Name (e.g., myTririgaApp): ');
+  const webViewMetadataName = await askQuestion(`Web View Metadata Exposed Name (default: ${projectName}): `);
+
+  const finalWebViewName = webViewMetadataName || projectName;
+
+  // 4. Update package.json name with Web View Metadata Exposed Name
+  const pkgJsonPath = path.join(projectDir, 'package.json');
+  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
+  pkgJson.name = finalWebViewName;
+  fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
+
+  // 5. Update .env file
+  const envExamplePath = path.join(projectDir, '.env.example');
+  const envPath = path.join(projectDir, '.env');
+  if (fs.existsSync(envExamplePath)) {
+    let envContent = fs.readFileSync(envExamplePath, 'utf8');
+    envContent = envContent.replace(/TRI_URL=.*/g, `TRI_URL=${triUrl}`);
+    envContent = envContent.replace(/TRI_USER=.*/g, `TRI_USER=${triUser}`);
+    envContent = envContent.replace(/TRI_PASSWORD=.*/g, `TRI_PASSWORD=${triPassword}`);
+    fs.writeFileSync(envPath, envContent);
+    // Delete .env.example
+    fs.unlinkSync(envExamplePath);
+  }
+
+  // 6. Update tririgaService.ts
+  const tririgaServicePath = path.join(projectDir, 'src', 'services', 'tririgaService.ts');
+  if (fs.existsSync(tririgaServicePath)) {
+    let tsContent = fs.readFileSync(tririgaServicePath, 'utf8');
+    tsContent = tsContent.replace(/modelAndView:\s*"[^"]*"/, `modelAndView: "${modelAndView}"`);
+    tsContent = tsContent.replace(/appExposedName:\s*"[^"]*"/, `appExposedName: "${appExposedName}"`);
+    fs.writeFileSync(tririgaServicePath, tsContent);
+  }
+
+  // 7. Update vite.config.ts base path
+  const viteConfigPath = path.join(projectDir, 'vite.config.ts');
+  if (fs.existsSync(viteConfigPath)) {
+    let viteContent = fs.readFileSync(viteConfigPath, 'utf8');
+    // Regex matches the whole base line and replaces it, handling single or double quotes
+    viteContent = viteContent.replace(/base:\s*['"]\/app\/[^/]+\/['"],/, `base: '/app/${appExposedName}/',`);
+    fs.writeFileSync(viteConfigPath, viteContent);
+  }
+
+  // 8. Update index.html Title
+  const indexHtmlPath = path.join(projectDir, 'index.html');
+  if (fs.existsSync(indexHtmlPath) && appTitle) {
+    let htmlContent = fs.readFileSync(indexHtmlPath, 'utf8');
+    htmlContent = htmlContent.replace(/<title>.*<\/title>/, `<title>${appTitle}</title>`);
+    fs.writeFileSync(indexHtmlPath, htmlContent);
+  }
+
+  console.log(`\nSuccess! Created and configured ${projectName}.`);
+  console.log(`\nTo get started:\n  cd ${projectName}\n  npm install -g pnpm\n  pnpm install\n  pnpm run build:deploy\n`);
+}
+
+configureApp();

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "create-tririga-react-ts-vite-app",
+  "version": "1.0.0",
+  "description": "Scaffold a TRIRIGA React app with Vite and TypeScript",
+  "main": "index.js",
+  "bin": {
+    "create-tririga-react-ts-vite-app": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template",
+    "README.md"
+  ],
+  "keywords": [
+    "tririga",
+    "react",
+    "vite",
+    "scaffold"
+  ],
+  "author": "Noah Richard",
+  "license": "ISC"
+}

package/template/.env.example

@@ -0,0 +1,14 @@
+# Local Development Config
+VITE_TRIRIGA_URL=http://localhost:8001
+VITE_INSTANCE_ID=-1
+VITE_CONTEXT_PATH=/app
+VITE_MODEL_AND_VIEW=devView
+VITE_BASE_PATH=/app/devView
+VITE_EXPOSED_NAME=devView
+VITE_SSO=false
+VITE_AUTO_LOGIN=true
+
+# Deployment Config (used by tri-deploy)
+TRI_URL=https://your-tririga-server.com
+TRI_USER=your-username
+TRI_PASSWORD=your-password

package/template/README.md

@@ -0,0 +1,73 @@
+# TRIRIGA React App Template
+
+This is a template for building IBM TRIRIGA UX applications using React, TypeScript, and Vite.
+
+## Getting Started
+
+1.  **Install pnpm** (If not already installed)
+    ```
+    npm install -g pnpm
+    ```
+
+2.  **Install Dependencies**
+    ```
+    pnpm install
+    ```
+    
+
+## Deployment
+
+To deploy to a TRIRIGA environment:
+
+1.  **Install Depoyment Tool** (If not already installed globally)
+    ```
+    npm install -g @tririga/tri-deploy
+    ```
+    *Note: If you prefer not to install globally, you can add `@tririga/tri-deploy` to your devDependencies.*
+
+2.  **Configure Credentials**
+    Copy `.env.example` to `.env` and update the values for your deployment settings.
+    ```
+    cp .env.example .env
+    ```
+    Ensure your `.env` file has the correct `TRI_URL`, `TRI_USER`, and `TRI_PASSWORD`.
+
+3.  **Configure tririgaService.js file**
+    Update the TriAppConfig values `modelAndView` and `appExposedName` to match your app configuration in TRIRIGA.
+    Example: 
+    `modelAndView: "myTririgaApp",`
+    `appExposedName: "myTririgaApp",`
+
+4.  **Configure vite.config.ts file**
+    Update the base value to match your application's exposed name in TRIRIGA. 
+    Example: 
+    base: '/app/myReactApp/',
+
+5.  **Configure package.json**
+    "name": "my-tririga-app",
+
+    *Note: the name should match your Web View Metadata Exposed Name n TRIRIGA*
+
+6.  **Run Deployment**
+    The view name will be taken from the `name` field in `package.json`.
+    ```
+    pnpm run build:deploy
+    ```
+
+## Browser Support & Polyfills
+
+## Project Structure
+
+-   `src/components`: Reusable UI components.
+-   `src/pages`: Top-level page definitions (routes).
+-   `src/model`: TRIRIGA AppModel (Datasources).
+-   `src/services`: API services (Auth, Config).
+-   `public/tri-app-config.json`: Local development configuration mocking the server response.
+
+## Tech Stack
+
+-   [React](https://react.dev/)
+-   [TypeScript](https://www.typescriptlang.org/)
+-   [Vite](https://vitejs.dev/)
+-   [Carbon Design System](https://carbondesignsystem.com/)
+-   [@tririga/tririga-react-components](https://www.npmjs.com/package/@tririga/tririga-react-components)

package/template/_gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+ux-work-task-form
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/components.json

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

package/template/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tririga React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "my-tririga-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "deploy": "dotenv -- cross-var tri-deploy -t %TRI_URL% -u %TRI_USER% -p %TRI_PASSWORD% -v \"$npm_package_name\" -d dist -w",
+    "build:deploy": "pnpm run build && pnpm run deploy"
+  },
+  "dependencies": {
+    "@tririga/tririga-react-components": "^2.0.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.575.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@tailwindcss/vite": "^4.2.0",
+    "@types/node": "^22.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cross-var": "^1.1.0",
+    "dotenv-cli": "^8.0.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "shadcn": "^3.8.5",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  }
+}

package/template/public/tri-app-config.json

@@ -0,0 +1,9 @@
+{
+  "instanceId": "-1",
+  "tririgaUrl": "http://localhost:8001",
+  "contextPath": "/app",
+  "modelAndView": "devView",
+  "appPath": "/app/devView",
+  "appExposedName": "devView",
+  "sso": false
+}

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/src/App.tsx

@@ -0,0 +1,15 @@
+import { Routes, Route } from 'react-router-dom';
+import { MainLayout } from './components';
+import { HomePage } from './pages';
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<MainLayout />}>
+        <Route index element={<HomePage />} />
+      </Route>
+    </Routes>
+  );
+}
+
+export default App

package/template/src/components/MainLayout.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Outlet, Link } from 'react-router-dom';
+import { User, LogOut } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { AuthService } from '../services/AuthService';
+
+const MainLayout: React.FC = () => {
+  const userName = 'User';
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="sticky top-0 z-50 flex items-center justify-between px-6 h-12 bg-[#001529]">
+        <Link to="/" className="no-underline flex items-center gap-2">
+          <span className="font-semibold text-white/65 text-sm">TRIRIGA</span>
+          <span className="text-white text-sm">React App</span>
+        </Link>
+
+        <TooltipProvider>
+          <div className="flex items-center gap-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon" className="text-white/85 hover:text-white hover:bg-white/10 h-8 w-8">
+                  <Avatar className="h-6 w-6 bg-transparent">
+                    <AvatarFallback className="bg-transparent text-white/85 text-xs">
+                      <User className="h-4 w-4" />
+                    </AvatarFallback>
+                  </Avatar>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{userName}</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-white/85 hover:text-white hover:bg-white/10 h-8 w-8"
+                  onClick={() => AuthService.logout()}
+                >
+                  <LogOut className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Sign out</TooltipContent>
+            </Tooltip>
+          </div>
+        </TooltipProvider>
+      </header>
+
+      <main className="flex-1 p-6 bg-background min-h-[calc(100vh-48px)]">
+        <Outlet />
+      </main>
+    </div>
+  );
+};
+
+export default MainLayout;

package/template/src/components/index.ts

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

package/template/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/template/src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+}