getlotui 0.1.0

package/dist/templates/expo/Dropdown.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  Modal,
+  Dimensions,
+  FlatList,
+} from "react-native";
+
+export interface DropdownItem {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+}
+
+export interface DropdownProps {
+  trigger: React.ReactNode;
+  items: DropdownItem[];
+  onSelect: (value: string) => void;
+}
+
+export const Dropdown = ({ trigger, items, onSelect }: DropdownProps) => {
+  const [open, setOpen] = useState(false);
+  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });
+
+  const onTriggerLayout = (event: any) => {
+    // In a real implementation, we'd use measure() to get page position
+    // For the template, we'll simplify
+  };
+
+  return (
+    <View>
+      <Pressable onPress={() => setOpen(true)} onLayout={onTriggerLayout}>
+        {trigger}
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="none"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={styles.overlay} onPress={() => setOpen(false)}>
+          <View style={styles.menu}>
+            {items.map((item) => (
+              <Pressable
+                key={item.value}
+                style={styles.item}
+                onPress={() => {
+                  onSelect(item.value);
+                  setOpen(false);
+                }}
+              >
+                {item.icon && <View style={styles.icon}>{item.icon}</View>}
+                <Text style={styles.label}>{item.label}</Text>
+              </Pressable>
+            ))}
+          </View>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = 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",
+  },
+});

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

@@ -0,0 +1,11 @@
+import React from "react";
+type InputProps = {
+    label?: string;
+    placeholder?: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    secureTextEntry?: boolean;
+    disabled?: boolean;
+};
+export declare const Input: React.FC<InputProps>;
+export {};

package/dist/templates/expo/Input.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Input = ({ label, placeholder, value, onChangeText, secureTextEntry = false, disabled = false, }) => {
+    const colors = {
+        text: "#111827", // gray-900
+        border: "#d1d5db", // gray-300
+        muted: "#9ca3af", // gray-400
+    };
+    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
+        label && (react_1.default.createElement(react_native_1.Text, { style: [styles.label, { color: colors.text }] }, label)),
+        react_1.default.createElement(react_native_1.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 })));
+};
+exports.Input = Input;
+const styles = react_native_1.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/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/expo/Toast.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type ToastType = "default" | "success" | "error";
+interface Toast {
+    id: string;
+    title: string;
+    description?: string;
+    type?: ToastType;
+}
+interface ToastContextType {
+    toast: (toast: Omit<Toast, "id">) => void;
+}
+export declare const ToastProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useToast: () => ToastContextType;
+export {};

package/dist/templates/expo/Toast.js

@@ -0,0 +1,142 @@
+"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.useToast = exports.ToastProvider = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ToastContext = (0, react_1.createContext)(undefined);
+const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = (0, react_1.useState)([]);
+    const toast = ({ title, description, type = "default", }) => {
+        const id = Math.random().toString(36).substr(2, 9);
+        setToasts((prev) => [...prev, { id, title, description, type }]);
+    };
+    const removeToast = (id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    };
+    return (react_1.default.createElement(ToastContext.Provider, { value: { toast } },
+        children,
+        react_1.default.createElement(react_native_1.View, { style: styles.container, pointerEvents: "box-none" }, toasts.map((t) => (react_1.default.createElement(ToastItem, { key: t.id, toast: t, onRemove: () => removeToast(t.id) }))))));
+};
+exports.ToastProvider = ToastProvider;
+const useToast = () => {
+    const context = (0, react_1.useContext)(ToastContext);
+    if (!context)
+        throw new Error("useToast must be used within ToastProvider");
+    return context;
+};
+exports.useToast = useToast;
+const ToastItem = ({ toast, onRemove, }) => {
+    const opacity = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
+    const translateY = (0, react_1.useState)(new react_native_1.Animated.Value(20))[0];
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.parallel([
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(translateY, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        const timer = setTimeout(() => {
+            react_native_1.Animated.parallel([
+                react_native_1.Animated.timing(opacity, {
+                    toValue: 0,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(translateY, {
+                    toValue: 20,
+                    duration: 300,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => onRemove());
+        }, 3000);
+        return () => clearTimeout(timer);
+    }, []);
+    const bgColors = {
+        default: "white",
+        success: "#f0fdf4",
+        error: "#fef2f2",
+    };
+    return (react_1.default.createElement(react_native_1.Animated.View, { style: [
+            styles.toast,
+            {
+                opacity,
+                transform: [{ translateY }],
+                backgroundColor: bgColors[toast.type || "default"],
+            },
+        ] },
+        react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(react_native_1.Text, { style: styles.title }, toast.title),
+            toast.description && (react_1.default.createElement(react_native_1.Text, { style: styles.description }, toast.description)))));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: "absolute",
+        bottom: 40,
+        left: 20,
+        right: 20,
+        alignItems: "center",
+    },
+    toast: {
+        width: "100%",
+        maxWidth: 400,
+        padding: 16,
+        borderRadius: 8,
+        marginBottom: 8,
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+        borderWidth: 1,
+        borderColor: "#e4e4e7",
+    },
+    title: {
+        fontSize: 14,
+        fontWeight: "600",
+        color: "#18181b",
+    },
+    description: {
+        fontSize: 12,
+        color: "#71717a",
+        marginTop: 2,
+    },
+});

package/dist/templates/expo/Toast.tsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect, createContext, useContext } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Pressable,
+} from "react-native";
+
+type ToastType = "default" | "success" | "error";
+
+interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  type?: ToastType;
+}
+
+interface ToastContextType {
+  toast: (toast: Omit<Toast, "id">) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = ({
+    title,
+    description,
+    type = "default",
+  }: Omit<Toast, "id">) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    setToasts((prev) => [...prev, { id, title, description, type }]);
+  };
+
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <View style={styles.container} pointerEvents="box-none">
+        {toasts.map((t) => (
+          <ToastItem key={t.id} toast={t} onRemove={() => removeToast(t.id)} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("useToast must be used within ToastProvider");
+  return context;
+};
+
+const ToastItem = ({
+  toast,
+  onRemove,
+}: {
+  toast: Toast;
+  onRemove: () => void;
+}) => {
+  const opacity = useState(new Animated.Value(0))[0];
+  const translateY = useState(new Animated.Value(20))[0];
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    const timer = setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 20,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => onRemove());
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const bgColors = {
+    default: "white",
+    success: "#f0fdf4",
+    error: "#fef2f2",
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.toast,
+        {
+          opacity,
+          transform: [{ translateY }],
+          backgroundColor: bgColors[toast.type || "default"],
+        },
+      ]}
+    >
+      <View>
+        <Text style={styles.title}>{toast.title}</Text>
+        {toast.description && (
+          <Text style={styles.description}>{toast.description}</Text>
+        )}
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 40,
+    left: 20,
+    right: 20,
+    alignItems: "center",
+  },
+  toast: {
+    width: "100%",
+    maxWidth: 400,
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#18181b",
+  },
+  description: {
+    fontSize: 12,
+    color: "#71717a",
+    marginTop: 2,
+  },
+});

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

@@ -0,0 +1,4 @@
+/**
+ * A utility to merge React Native styles.
+ */
+export declare function cn(...inputs: any[]): any;

package/dist/templates/expo/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = cn;
+const react_native_1 = require("react-native");
+/**
+ * A utility to merge React Native styles.
+ */
+function cn(...inputs) {
+    return react_native_1.StyleSheet.flatten(inputs.filter(Boolean));
+}

package/dist/templates/expo/utils.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+
+/**
+ * A utility to merge React Native styles.
+ */
+export function cn(...inputs: any[]) {
+  return StyleSheet.flatten(inputs.filter(Boolean));
+}