getlotui 0.1.0

package/dist/templates/expo/AlertDialog.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Modal,
+  StyleSheet,
+  Pressable,
+  Dimensions,
+} from "react-native";
+
+export interface AlertDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  title: string;
+  description: string;
+  cancelText?: string;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+export const AlertDialog = ({
+  open: controlledOpen,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  cancelText = "Cancel",
+  actionText = "Continue",
+  onAction,
+}: AlertDialogProps) => {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setOpen = (val: boolean) => {
+    if (onOpenChange) onOpenChange(val);
+    setInternalOpen(val);
+  };
+
+  return (
+    <>
+      {trigger && (
+        <Pressable onPress={() => setOpen(true)}>{trigger}</Pressable>
+      )}
+
+      <Modal
+        transparent
+        visible={isOpen}
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={styles.overlay} onPress={() => setOpen(false)}>
+          <Pressable
+            style={styles.content}
+            onPress={(e) => e.stopPropagation()}
+          >
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
+
+            <View style={styles.footer}>
+              <Pressable
+                style={[styles.button, styles.cancelButton]}
+                onPress={() => setOpen(false)}
+              >
+                <Text style={styles.cancelButtonText}>{cancelText}</Text>
+              </Pressable>
+
+              <Pressable
+                style={[styles.button, styles.actionButton]}
+                onPress={() => {
+                  onAction?.();
+                  setOpen(false);
+                }}
+              >
+                <Text style={styles.actionButtonText}>{actionText}</Text>
+              </Pressable>
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  content: {
+    backgroundColor: "white",
+    borderRadius: 12,
+    padding: 24,
+    width: "100%",
+    maxWidth: 400,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#18181b",
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 14,
+    color: "#71717a",
+    lineHeight: 20,
+    marginBottom: 24,
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 12,
+  },
+  button: {
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 6,
+    minWidth: 80,
+    alignItems: "center",
+  },
+  cancelButton: {
+    backgroundColor: "white",
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+  },
+  actionButton: {
+    backgroundColor: "#18181b",
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#18181b",
+  },
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: "500",
+    color: "white",
+  },
+});

package/dist/templates/expo/Avatar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface AvatarProps {
+    src?: string;
+    fallback?: string;
+    size?: "sm" | "md" | "lg";
+    shape?: "circle" | "square";
+}
+export declare const Avatar: ({ src, fallback, size, shape, }: AvatarProps) => React.JSX.Element;

package/dist/templates/expo/Avatar.js

@@ -0,0 +1,81 @@
+"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.Avatar = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Avatar = ({ src, fallback, size = "md", shape = "circle", }) => {
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const sizes = {
+        sm: 32,
+        md: 40,
+        lg: 56,
+    };
+    const currentSize = sizes[size];
+    return (react_1.default.createElement(react_native_1.View, { style: [
+            styles.container,
+            {
+                width: currentSize,
+                height: currentSize,
+                borderRadius: shape === "circle" ? currentSize / 2 : 8,
+            },
+        ] }, src && !hasError ? (react_1.default.createElement(react_native_1.Image, { source: { uri: src }, style: styles.image, onError: () => setHasError(true) })) : (react_1.default.createElement(react_native_1.View, { style: styles.fallback },
+        react_1.default.createElement(react_native_1.Text, { style: [styles.fallbackText, { fontSize: currentSize * 0.4 }] }, fallback?.substring(0, 2).toUpperCase() || "??")))));
+};
+exports.Avatar = Avatar;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        overflow: "hidden",
+        backgroundColor: "#f3f4f6",
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: 1,
+        borderColor: "rgba(0,0,0,0.05)",
+    },
+    image: {
+        width: "100%",
+        height: "100%",
+    },
+    fallback: {
+        width: "100%",
+        height: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    fallbackText: {
+        fontWeight: "600",
+        color: "#4b5563",
+    },
+});

package/dist/templates/expo/Avatar.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { View, Image, Text, StyleSheet, Pressable } from "react-native";
+
+export interface AvatarProps {
+  src?: string;
+  fallback?: string;
+  size?: "sm" | "md" | "lg";
+  shape?: "circle" | "square";
+}
+
+export const Avatar = ({
+  src,
+  fallback,
+  size = "md",
+  shape = "circle",
+}: AvatarProps) => {
+  const [hasError, setHasError] = useState(false);
+
+  const sizes = {
+    sm: 32,
+    md: 40,
+    lg: 56,
+  };
+
+  const currentSize = sizes[size];
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: currentSize,
+          height: currentSize,
+          borderRadius: shape === "circle" ? currentSize / 2 : 8,
+        },
+      ]}
+    >
+      {src && !hasError ? (
+        <Image
+          source={{ uri: src }}
+          style={styles.image}
+          onError={() => setHasError(true)}
+        />
+      ) : (
+        <View style={styles.fallback}>
+          <Text style={[styles.fallbackText, { fontSize: currentSize * 0.4 }]}>
+            {fallback?.substring(0, 2).toUpperCase() || "??"}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    backgroundColor: "#f3f4f6",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.05)",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  fallback: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  fallbackText: {
+    fontWeight: "600",
+    color: "#4b5563",
+  },
+});

package/dist/templates/expo/Badge.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: "default" | "secondary" | "outline" | "destructive" | "success";
+}
+export declare const Badge: ({ children, variant }: BadgeProps) => React.JSX.Element;

package/dist/templates/expo/Badge.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Badge = ({ children, variant = "default" }) => {
+    const variantStyles = {
+        default: {
+            bg: "#18181b",
+            text: "#ffffff",
+            border: "transparent",
+        },
+        secondary: {
+            bg: "#f4f4f5",
+            text: "#18181b",
+            border: "transparent",
+        },
+        outline: {
+            bg: "transparent",
+            text: "#18181b",
+            border: "#e4e4e7",
+        },
+        destructive: {
+            bg: "#ef4444",
+            text: "#ffffff",
+            border: "transparent",
+        },
+        success: {
+            bg: "#22c55e",
+            text: "#ffffff",
+            border: "transparent",
+        },
+    };
+    const style = variantStyles[variant];
+    return (react_1.default.createElement(react_native_1.View, { style: [
+            styles.badge,
+            {
+                backgroundColor: style.bg,
+                borderColor: style.border,
+                borderWidth: style.border === "transparent" ? 0 : 1,
+            },
+        ] },
+        react_1.default.createElement(react_native_1.Text, { style: [styles.text, { color: style.text }] }, children)));
+};
+exports.Badge = Badge;
+const styles = react_native_1.StyleSheet.create({
+    badge: {
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 9999,
+        alignSelf: "flex-start",
+    },
+    text: {
+        fontSize: 12,
+        fontWeight: "600",
+    },
+});

package/dist/templates/expo/Badge.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: "default" | "secondary" | "outline" | "destructive" | "success";
+}
+
+export const Badge = ({ children, variant = "default" }: BadgeProps) => {
+  const variantStyles = {
+    default: {
+      bg: "#18181b",
+      text: "#ffffff",
+      border: "transparent",
+    },
+    secondary: {
+      bg: "#f4f4f5",
+      text: "#18181b",
+      border: "transparent",
+    },
+    outline: {
+      bg: "transparent",
+      text: "#18181b",
+      border: "#e4e4e7",
+    },
+    destructive: {
+      bg: "#ef4444",
+      text: "#ffffff",
+      border: "transparent",
+    },
+    success: {
+      bg: "#22c55e",
+      text: "#ffffff",
+      border: "transparent",
+    },
+  };
+
+  const style = variantStyles[variant];
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          backgroundColor: style.bg,
+          borderColor: style.border,
+          borderWidth: style.border === "transparent" ? 0 : 1,
+        },
+      ]}
+    >
+      <Text style={[styles.text, { color: style.text }]}>{children}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 9999,
+    alignSelf: "flex-start",
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+});

package/dist/templates/expo/Button.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ButtonProps {
+    title: string;
+    onPress: () => void;
+    variant?: "default" | "primary" | "secondary";
+    disabled?: boolean;
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/templates/expo/Button.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const config_1 = require("../../theme/config");
+const Button = ({ title, onPress, variant = "default", disabled = false, }) => {
+    const backgroundColor = variant === "primary"
+        ? config_1.theme.colors.primary
+        : variant === "secondary"
+            ? config_1.theme.colors.secondary || "#94a3b8"
+            : config_1.theme.colors.background === "#ffffff"
+                ? "#e5e7eb"
+                : config_1.theme.colors.background;
+    return (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.button, { backgroundColor }, disabled && styles.disabled], onPress: onPress, disabled: disabled },
+        react_1.default.createElement(react_native_1.Text, { style: styles.text }, title)));
+};
+exports.Button = Button;
+const styles = react_native_1.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/expo/Button.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet } from "react-native";
+import { theme } from "../../theme/config";
+
+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"
+      ? theme.colors.primary
+      : variant === "secondary"
+      ? theme.colors.secondary || "#94a3b8"
+      : theme.colors.background === "#ffffff"
+      ? "#e5e7eb"
+      : theme.colors.background;
+
+  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/expo/Dropdown.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface DropdownItem {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+export interface DropdownProps {
+    trigger: React.ReactNode;
+    items: DropdownItem[];
+    onSelect: (value: string) => void;
+}
+export declare const Dropdown: ({ trigger, items, onSelect }: DropdownProps) => React.JSX.Element;

package/dist/templates/expo/Dropdown.js

@@ -0,0 +1,91 @@
+"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.Dropdown = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Dropdown = ({ trigger, items, onSelect }) => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [layout, setLayout] = (0, react_1.useState)({ x: 0, y: 0, width: 0, height: 0 });
+    const onTriggerLayout = (event) => {
+        // In a real implementation, we'd use measure() to get page position
+        // For the template, we'll simplify
+    };
+    return (react_1.default.createElement(react_native_1.View, null,
+        react_1.default.createElement(react_native_1.Pressable, { onPress: () => setOpen(true), onLayout: onTriggerLayout }, trigger),
+        react_1.default.createElement(react_native_1.Modal, { visible: open, transparent: true, animationType: "none", onRequestClose: () => setOpen(false) },
+            react_1.default.createElement(react_native_1.Pressable, { style: styles.overlay, onPress: () => setOpen(false) },
+                react_1.default.createElement(react_native_1.View, { style: styles.menu }, items.map((item) => (react_1.default.createElement(react_native_1.Pressable, { key: item.value, style: styles.item, onPress: () => {
+                        onSelect(item.value);
+                        setOpen(false);
+                    } },
+                    item.icon && react_1.default.createElement(react_native_1.View, { style: styles.icon }, item.icon),
+                    react_1.default.createElement(react_native_1.Text, { style: styles.label }, item.label)))))))));
+};
+exports.Dropdown = Dropdown;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "transparent",
+        justifyContent: "center", // Should be positioned near trigger
+        alignItems: "center",
+    },
+    menu: {
+        backgroundColor: "white",
+        borderRadius: 8,
+        padding: 4,
+        minWidth: 160,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 8,
+        borderWidth: 1,
+        borderColor: "#e4e4e7",
+    },
+    item: {
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 8,
+        borderRadius: 4,
+    },
+    icon: {
+        marginRight: 8,
+    },
+    label: {
+        fontSize: 14,
+        color: "#18181b",
+    },
+});