getlotui 0.1.0

package/dist/templates/flutter/Card.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+class CrossUICard extends StatelessWidget {
+  final Widget? header;
+  final Widget? title;
+  final Widget? description;
+  final Widget child;
+  final Widget? footer;
+  final VoidCallback? onTap;
+
+  const CrossUICard({
+    Key? key,
+    required this.child,
+    this.header,
+    this.title,
+    this.description,
+    this.footer,
+    this.onTap,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(CrossUITokens.radiusLarge),
+      child: Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(CrossUITokens.radiusLarge),
+          border: Border.all(color: CrossUITokens.border),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.05),
+              blurRadius: 10,
+              offset: const Offset(0, 4),
+            ),
+          ],
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (header != null || title != null || description != null)
+              Padding(
+                padding: const EdgeInsets.all(CrossUITokens.spacingL),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (header != null) header!,
+                    if (title != null) ...[
+                      DefaultTextStyle(
+                        style: const TextStyle(
+                          fontSize: CrossUITokens.fontSize2xl,
+                          fontWeight: FontWeight.bold,
+                          color: CrossUITokens.dark,
+                        ),
+                        child: title!,
+                      ),
+                    ],
+                    if (description != null) ...[
+                      const SizedBox(height: 4),
+                      DefaultTextStyle(
+                        style: const TextStyle(
+                          fontSize: CrossUITokens.fontSizeSm,
+                          color: Colors.grey,
+                        ),
+                        child: description!,
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: CrossUITokens.spacingL),
+              child: child,
+            ),
+            if (footer != null) ...[
+              const SizedBox(height: CrossUITokens.spacingL),
+              const Divider(height: 1),
+              Padding(
+                padding: const EdgeInsets.all(CrossUITokens.spacingL),
+                child: footer!,
+              ),
+            ] else 
+              const SizedBox(height: CrossUITokens.spacingL),
+          ],
+        ),
+      ),
+    );
+  }
+}

package/dist/templates/flutter/Input.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+class CrossUIInput extends StatelessWidget {
+  final String? placeholder;
+  final TextEditingController? controller;
+  final bool obscureText;
+  final TextInputType? keyboardType;
+  final void Function(String)? onChanged;
+  final bool disabled;
+  final String? label;
+
+  const CrossUIInput({
+    Key? key,
+    this.placeholder,
+    this.controller,
+    this.obscureText = false,
+    this.keyboardType,
+    this.onChanged,
+    this.disabled = false,
+    this.label,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (label != null) ...[
+          Text(
+            label!,
+            style: const TextStyle(
+              fontSize: CrossUITokens.fontSizeSm,
+              fontWeight: FontWeight.w600,
+              color: CrossUITokens.dark,
+            ),
+          ),
+          const SizedBox(height: CrossUITokens.spacingXs),
+        ],
+        TextField(
+          controller: controller,
+          obscureText: obscureText,
+          keyboardType: keyboardType,
+          onChanged: onChanged,
+          enabled: !disabled,
+          style: const TextStyle(fontSize: CrossUITokens.fontSizeBase),
+          decoration: InputDecoration(
+            hintText: placeholder,
+            hintStyle: const TextStyle(color: Color(0xFF94A3B8)),
+            contentPadding: const EdgeInsets.symmetric(
+              horizontal: CrossUITokens.spacingM,
+              vertical: CrossUITokens.spacingM,
+            ),
+            filled: true,
+            fillColor: disabled ? const Color(0xFFF1F5F9) : Colors.white,
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+              borderSide: const BorderSide(color: CrossUITokens.border),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+              borderSide: const BorderSide(color: CrossUITokens.primary, width: 2),
+            ),
+            disabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+              borderSide: const BorderSide(color: CrossUITokens.border),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

package/dist/templates/flutter/Text.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+enum CrossUITextVariant { h1, h2, h3, h4, h5, h6, body, subtitle, caption, muted, code }
+
+class CrossUIText extends StatelessWidget {
+  final String text;
+  final CrossUITextVariant variant;
+  final Color? color;
+  final TextAlign? textAlign;
+  final FontWeight? fontWeight;
+
+  const CrossUIText(
+    this.text, {
+    Key? key,
+    this.variant = CrossUITextVariant.body,
+    this.color,
+    this.textAlign,
+    this.fontWeight,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    double fontSize;
+    FontWeight defaultFontWeight = FontWeight.normal;
+    Color defaultColor = color ?? CrossUITokens.dark;
+    bool isCode = false;
+
+    switch (variant) {
+      case CrossUITextVariant.h1:
+        fontSize = CrossUITokens.fontSize6xl;
+        defaultFontWeight = FontWeight.w900;
+        break;
+      case CrossUITextVariant.h2:
+        fontSize = CrossUITokens.fontSize4xl;
+        defaultFontWeight = FontWeight.bold;
+        break;
+      case CrossUITextVariant.h3:
+        fontSize = CrossUITokens.fontSize2xl;
+        defaultFontWeight = FontWeight.bold;
+        break;
+      case CrossUITextVariant.h4:
+        fontSize = CrossUITokens.fontSizeXl;
+        defaultFontWeight = FontWeight.w600;
+        break;
+      case CrossUITextVariant.h5:
+        fontSize = CrossUITokens.fontSizeLg;
+        defaultFontWeight = FontWeight.w600;
+        break;
+      case CrossUITextVariant.h6:
+        fontSize = CrossUITokens.fontSizeBase;
+        defaultFontWeight = FontWeight.w600;
+        break;
+      case CrossUITextVariant.subtitle:
+        fontSize = CrossUITokens.fontSizeLg;
+        defaultColor = color ?? Colors.grey[700]!;
+        break;
+      case CrossUITextVariant.caption:
+        fontSize = CrossUITokens.fontSizeXs;
+        defaultColor = color ?? Colors.grey[600]!;
+        break;
+      case CrossUITextVariant.muted:
+        fontSize = CrossUITokens.fontSizeSm;
+        defaultColor = color ?? Colors.grey[500]!;
+        break;
+      case CrossUITextVariant.code:
+        fontSize = CrossUITokens.fontSizeSm;
+        isCode = true;
+        break;
+      case CrossUITextVariant.body:
+      default:
+        fontSize = CrossUITokens.fontSizeBase;
+        break;
+    }
+
+    return Text(
+      text,
+      textAlign: textAlign,
+      style: TextStyle(
+        fontSize: fontSize,
+        fontWeight: fontWeight ?? defaultFontWeight,
+        color: defaultColor,
+        fontFamily: isCode ? 'monospace' : null,
+      ),
+    );
+  }
+}

package/dist/templates/flutter/utils.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+class CrossUIUtils {
+  static TextStyle cnText(List<TextStyle?> styles) {
+    TextStyle result = const TextStyle();
+    for (var style in styles) {
+      if (style != null) {
+        result = result.merge(style);
+      }
+    }
+    return result;
+  }
+}

package/dist/templates/templates/expo/Button.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet } from "react-native";
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: "default" | "primary" | "secondary";
+  disabled?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = "default",
+  disabled = false,
+}) => {
+  const backgroundColor =
+    variant === "primary"
+      ? "#2563eb" // blue-600
+      : variant === "secondary"
+      ? "#6b7280" // gray-500
+      : "#e5e7eb"; // gray-200
+
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor }, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/dist/templates/templates/expo/Input.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { TextInput, StyleSheet, View, Text } from "react-native";
+
+type InputProps = {
+  label?: string;
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  secureTextEntry?: boolean;
+  disabled?: boolean;
+};
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  secureTextEntry = false,
+  disabled = false,
+}) => {
+  const colors = {
+    text: "#111827", // gray-900
+    border: "#d1d5db", // gray-300
+    muted: "#9ca3af", // gray-400
+  };
+  return (
+    <View style={styles.container}>
+      {label && (
+        <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
+      )}
+      <TextInput
+        style={[
+          styles.input,
+          { borderColor: colors.border, color: colors.text },
+          disabled && styles.disabled,
+        ]}
+        placeholder={placeholder}
+        placeholderTextColor={colors.muted}
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={secureTextEntry}
+        editable={!disabled}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+  },
+  label: {
+    marginBottom: 4,
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 16,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+});

package/dist/templates/web/Accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/templates/web/Accordion.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.AccordionContent = AccordionContent;
+const React = __importStar(require("react"));
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("@/lib/utils");
+function Accordion({ ...props }) {
+    return React.createElement(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (React.createElement(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: (0, utils_1.cn)("border-b", className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (React.createElement(AccordionPrimitive.Header, { className: "flex" },
+        React.createElement(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: (0, utils_1.cn)("flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&&[data-state=open]>svg]:rotate-180", className), ...props },
+            children,
+            React.createElement(lucide_react_1.ChevronDown, { className: "size-4 shrink-0 transition-transform duration-200" }))));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (React.createElement(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props },
+        React.createElement("div", { className: (0, utils_1.cn)("pb-4 pt-0", className) }, children)));
+}

package/dist/templates/web/Accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+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", 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(
+          "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="size-4 shrink-0 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="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/templates/web/Alert.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "info" | "warning" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription };

package/dist/templates/web/Alert.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = Alert;
+exports.AlertTitle = AlertTitle;
+exports.AlertDescription = AlertDescription;
+const React = __importStar(require("react"));
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("@/lib/utils");
+const alertVariants = (0, class_variance_authority_1.cva)("relative w-full rounded-lg border px-4 py-3 text-sm grid grid-cols-[auto_1fr] gap-x-3 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "text-destructive border-destructive/50 bg-destructive/5 dark:bg-destructive/10 [&>svg]:text-destructive",
+            info: "text-blue-600 border-blue-500/50 bg-blue-50 dark:bg-blue-950/20 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
+            success: "text-green-600 border-green-500/50 bg-green-50 dark:bg-green-950/20 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+            warning: "text-yellow-600 border-yellow-500/50 bg-yellow-50 dark:bg-yellow-950/20 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (React.createElement("div", { "data-slot": "alert", role: "alert", className: (0, utils_1.cn)(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "alert-title", className: (0, utils_1.cn)("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "alert-description", className: (0, utils_1.cn)("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className), ...props }));
+}

package/dist/templates/web/Alert.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid grid-cols-[auto_1fr] gap-x-3 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive border-destructive/50 bg-destructive/5 dark:bg-destructive/10 [&>svg]:text-destructive",
+        info: "text-blue-600 border-blue-500/50 bg-blue-50 dark:bg-blue-950/20 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
+        success:
+          "text-green-600 border-green-500/50 bg-green-50 dark:bg-green-950/20 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        warning:
+          "text-yellow-600 border-yellow-500/50 bg-yellow-50 dark:bg-yellow-950/20 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/dist/templates/web/AlertDialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };