@imksh/create 1.0.26 → 1.0.28

package/templates/react-native/src/app/(tabs)/index.tsx

@@ -1,464 +0,0 @@
-import { View, ScrollView } from "react-native";
-import React, { useState } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { MaterialIcons } from "@expo/vector-icons";
-import { Txt } from "@/components/common/Typography";
-import { toast } from "@/utils/toast";
-
-// Import our prebuilt UI components
-import ScrollContainer from "@/components/ui/layout/ScrollContainer";
-import Container from "@/components/ui/layout/Container";
-import Section from "@/components/ui/layout/Section";
-import Divider from "@/components/ui/layout/Divider";
-import { HStack, VStack } from "@/components/ui/layout/Stack";
-
-import Button from "@/components/ui/buttons/Button";
-import IconButton from "@/components/ui/buttons/IconButton";
-import FloatingActionButton from "@/components/ui/buttons/FloatingActionButton";
-
-import Card from "@/components/ui/data-display/Card";
-import Avatar from "@/components/ui/data-display/Avatar";
-import Badge from "@/components/ui/data-display/Badge";
-import Accordion from "@/components/ui/data-display/Accordion";
-import {
-  SwipeableRow,
-  SwipeAction,
-} from "@/components/ui/data-display/SwipeableRow";
-
-import Input from "@/components/ui/inputs/Input";
-import Switch from "@/components/ui/inputs/Switch";
-import Checkbox from "@/components/ui/inputs/Checkbox";
-import Radio from "@/components/ui/inputs/Radio";
-import Slider from "@/components/ui/inputs/Slider";
-import SearchBar from "@/components/ui/inputs/SearchBar";
-
-import Spinner from "@/components/ui/feedback/Spinner";
-import ProgressBar from "@/components/ui/feedback/ProgressBar";
-import CircularProgress from "@/components/ui/feedback/CircularProgress";
-import Skeleton from "@/components/ui/feedback/Skeleton";
-import { GestureWrapper } from "@/components/ui/feedback/GestureWrapper";
-
-import BottomModal from "@/components/ui/BottomModal";
-import Tabs from "@/components/ui/navigation/Tabs";
-import { useColorScheme } from "nativewind";
-import { Colors } from "@/constants/Colors";
-
-const Index = () => {
-  const [isEnabled, setIsEnabled] = useState(false);
-  const [isChecked, setIsChecked] = useState(true);
-  const [radioVal, setRadioVal] = useState("option1");
-  const [sliderVal, setSliderVal] = useState(50);
-  const [searchQ, setSearchQ] = useState("");
-  const [activeTab, setActiveTab] = useState("tab1");
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const insets = useSafeAreaInsets();
-
-  const { colorScheme } = useColorScheme();
-  const isDark = colorScheme === "dark";
-  const colors = Colors[isDark ? "dark" : "light"];
-
-  const swipeActions: SwipeAction[] = [
-    {
-      icon: <MaterialIcons name="archive" size={24} color="white" />,
-      backgroundColor: colors.info,
-      onPress: () => toast.success("Archived!", "Message saved securely"),
-    },
-    {
-      icon: <MaterialIcons name="delete" size={24} color="white" />,
-      backgroundColor: colors.error,
-      onPress: () => toast.error("Deleted", "Message removed"),
-    },
-  ];
-
-  return (
-    <View style={{ flex: 1, backgroundColor: colors.base100 }}>
-      {/* Premium Glass Header */}
-      <View className="absolute top-0 w-full z-50 bg-base-200">
-        <View
-          style={{ paddingTop: insets.top > 0 ? insets.top + 10 : 20 }}
-          className="pb-4 px-6 border-b border-base-300/30"
-        >
-          <HStack justify="space-between" align="center">
-            <VStack>
-              <Txt variant="3xl" className="font-extrabold tracking-tight">
-                imksh-create
-              </Txt>
-              <Txt
-                variant="caption"
-                className="text-primary font-medium tracking-widest uppercase mt-1"
-              >
-                React Native Expo
-              </Txt>
-            </VStack>
-            <Avatar
-              url="https://res.cloudinary.com/ddwijawuc/image/upload/v1784397422/Screenshot_2026-07-18_at_11.26.53_PM_mubmqa.png"
-              size={44}
-            />
-          </HStack>
-        </View>
-      </View>
-
-      <ScrollContainer
-        contentContainerStyle={{
-          paddingTop: insets.top + 90,
-          paddingBottom: 100,
-        }}
-      >
-        {/* Top Hero Banner */}
-        <Container className="mb-8">
-          <Card
-            elevation={0}
-            className="bg-primary/10 overflow-hidden border border-primary/20 p-6 rounded-3xl"
-          >
-            <VStack spacing={12}>
-              <HStack spacing={12} align="center">
-                <Badge label="NEW V2" variant="primary" />
-                <Badge label="SOFT" variant="primary" soft={true} />
-              </HStack>
-              <Txt
-                variant="4xl"
-                className="text-primary font-black leading-tight"
-              >
-                Stop configuring. Start building.
-              </Txt>
-              <Txt variant="base" className="text-primary/70 font-medium">
-                Skip the setup. Build your product. A complete boilerplate with auth, state management, navigation, and beautiful prebuilt components.
-              </Txt>
-            </VStack>
-          </Card>
-        </Container>
-
-        {/* Buttons Showcase (Horizontal Scroll) */}
-        <View className="mb-10">
-          <Section title="Interactive Elements" titleClass="pl-4">
-            <ScrollView
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              contentContainerStyle={{
-                paddingHorizontal: 24,
-                paddingVertical: 8,
-                gap: 12,
-              }}
-            >
-              <Button
-                label="Primary"
-                variant="primary"
-                className="min-w-[120px]"
-                onPress={() => toast.success("Action triggered")}
-              />
-              <Button
-                label="Secondary"
-                variant="secondary"
-                className="min-w-[120px]"
-              />
-              <Button
-                label="Accent"
-                variant="accent"
-                className="min-w-[120px]"
-              />
-              <Button
-                label="Soft"
-                variant="primary"
-                soft={true}
-                className="min-w-[120px]"
-              />
-              <Button
-                label="Outline"
-                variant="outline"
-                className="min-w-[120px]"
-              />
-              <Button label="Ghost" variant="ghost" className="min-w-[120px]" />
-              <IconButton
-                icon="heart"
-                variant="error"
-                onPress={() => toast.success("Favorited")}
-              />
-            </ScrollView>
-          </Section>
-        </View>
-
-        <Container>
-          <VStack spacing={40}>
-            {/* New Gesture Showcase */}
-            <Section title="Gestures & Swipes">
-              <VStack spacing={16}>
-                {/* Swipeable Row */}
-                <Card
-                  elevation={2}
-                  className="p-0 overflow-hidden rounded-2xl bg-base-100"
-                >
-                  <SwipeableRow rightActions={swipeActions}>
-                    <HStack
-                      align="center"
-                      spacing={16}
-                      className="p-4 bg-base-100"
-                    >
-                      <Avatar
-                        url="https://res.cloudinary.com/ddwijawuc/image/upload/v1784397369/IMG_20250119_021400_abke1x.jpg"
-                        size={50}
-                      />
-                      <VStack style={{ flex: 1 }}>
-                        <Txt variant="md" className="font-bold">
-                          Swipe me left!
-                        </Txt>
-                        <Txt
-                          variant="caption"
-                          className="text-base-content/60 mt-1"
-                        >
-                          Reveal hidden actions natively
-                        </Txt>
-                      </VStack>
-                      <MaterialIcons
-                        name="chevron-left"
-                        size={24}
-                        color={colors.baseContent}
-                        style={{ opacity: 0.3 }}
-                      />
-                    </HStack>
-                  </SwipeableRow>
-                </Card>
-
-                {/* Gesture Wrapper Interactive Card */}
-                <GestureWrapper
-                  onDoubleTap={() =>
-                    toast.success("Loved!", "You double tapped the card")
-                  }
-                  onSwipeUp={() => setIsModalOpen(true)}
-                >
-                  <Card
-                    elevation={0}
-                    className="bg-accent/10 border border-accent/20 rounded-2xl items-center p-8"
-                  >
-                    <MaterialIcons
-                      name="touch-app"
-                      size={40}
-                      color={colors.accent}
-                      style={{ marginBottom: 12 }}
-                    />
-                    <Txt variant="2xl" className="text-accent text-center">
-                      Double Tap or Swipe Up
-                    </Txt>
-                    <Txt
-                      variant="caption"
-                      className="text-accent/70 mt-2 text-center"
-                    >
-                      Powered by Reanimated & Gesture Handler
-                    </Txt>
-                  </Card>
-                </GestureWrapper>
-              </VStack>
-            </Section>
-
-            {/* Inputs & Controls (Sleek List) */}
-            <Section title="Settings & Controls">
-              <Card elevation={1} className="rounded-3xl p-6">
-                <VStack spacing={24}>
-                  <SearchBar
-                    value={searchQ}
-                    onChangeText={setSearchQ}
-                    placeholder="Search components..."
-                  />
-
-                  <Divider />
-
-                  <HStack justify="space-between" align="center">
-                    <VStack>
-                      <Txt variant="md" className="font-bold">
-                        Biometric Login
-                      </Txt>
-                      <Txt
-                        variant="caption"
-                        className="text-base-content/50 mt-1"
-                      >
-                        FaceID or TouchID
-                      </Txt>
-                    </VStack>
-                    <Switch checked={isEnabled} onChange={setIsEnabled} />
-                  </HStack>
-
-                  <Divider />
-
-                  <VStack spacing={12}>
-                    <HStack justify="space-between" align="center">
-                      <Txt variant="md" className="font-bold">
-                        Intensity
-                      </Txt>
-                      <Badge label={`${sliderVal}%`} variant="secondary" />
-                    </HStack>
-                    <Slider
-                      value={sliderVal}
-                      onValueChange={setSliderVal}
-                      minimumValue={0}
-                      maximumValue={100}
-                    />
-                  </VStack>
-
-                  <Divider style={{ marginTop: 8 }} />
-
-                  {/* Text Input */}
-                  <Input
-                    label="Account Email"
-                    placeholder="hello@example.com"
-                    leftIcon="mail-outline"
-                  />
-
-                  <Divider />
-
-                  {/* Selection Controls */}
-                  <VStack spacing={16}>
-                    <Checkbox
-                      checked={isChecked}
-                      onChange={setIsChecked}
-                      label="Remember my preferences"
-                    />
-                    <HStack spacing={24}>
-                      <Radio
-                        checked={radioVal === "option1"}
-                        onChange={() => setRadioVal("option1")}
-                        label="Personal Plan"
-                      />
-                      <Radio
-                        checked={radioVal === "option2"}
-                        onChange={() => setRadioVal("option2")}
-                        label="Pro Plan"
-                      />
-                    </HStack>
-                  </VStack>
-                </VStack>
-              </Card>
-            </Section>
-
-            {/* Navigation & Layout */}
-            <Section title="Navigation">
-              <Card elevation={1} className="rounded-3xl p-6 pt-4">
-                <Tabs
-                  variant="underline"
-                  activeTab={activeTab}
-                  onChange={setActiveTab}
-                  tabs={[
-                    { id: "tab1", label: "Overview" },
-                    { id: "tab2", label: "Analytics" },
-                    { id: "tab3", label: "Settings" },
-                  ]}
-                />
-                <View className="py-6 items-center justify-center">
-                  <Txt variant="base" className="text-base-content/60 italic">
-                    Currently viewing {activeTab} content.
-                  </Txt>
-                </View>
-              </Card>
-            </Section>
-
-            {/* Feedback & Loading */}
-            <Section title="Loading States">
-              <HStack spacing={16} justify="space-between">
-                <Card
-                  elevation={1}
-                  style={{ flex: 1 }}
-                  className="rounded-3xl items-center py-8"
-                >
-                  <CircularProgress progress={65} size={70} strokeWidth={6} />
-                  <Txt
-                    variant="caption"
-                    className="mt-4 font-bold text-base-content/70"
-                  >
-                    SYNCING
-                  </Txt>
-                </Card>
-
-                <Card
-                  elevation={1}
-                  style={{ flex: 1 }}
-                  className="rounded-3xl p-6 justify-center"
-                >
-                  <VStack spacing={12}>
-                    <Skeleton width="100%" height={12} borderRadius={6} />
-                    <Skeleton width="70%" height={12} borderRadius={6} />
-                    <Skeleton width="85%" height={12} borderRadius={6} />
-                  </VStack>
-                </Card>
-              </HStack>
-
-              <Card elevation={1} className="rounded-3xl p-6 mt-4">
-                <HStack justify="space-between" align="center" className="mb-4">
-                  <Txt variant="md" className="font-bold">
-                    Background Sync
-                  </Txt>
-                  <Spinner size={24} />
-                </HStack>
-                <ProgressBar progress={0.75} height={8} />
-                <Txt
-                  variant="caption"
-                  className="text-base-content/60 mt-2 text-right"
-                >
-                  75% Complete
-                </Txt>
-              </Card>
-            </Section>
-
-            {/* Information (Accordion) */}
-            <Section title="Information & FAQs" className="pb-20">
-              <VStack spacing={12}>
-                <Accordion title="How to use this library?">
-                  <Txt variant="base">
-                    Simply import the components from the `@/components/ui`
-                    directory. They are fully typed, gesture-driven, and styled
-                    with NativeWind.
-                  </Txt>
-                </Accordion>
-                <Accordion title="Does it support dark mode?">
-                  <Txt variant="base">
-                    Yes! All components automatically respond to the device&apos;s
-                    color scheme, utilizing the custom CSS variables defined in
-                    global.css.
-                  </Txt>
-                </Accordion>
-              </VStack>
-            </Section>
-          </VStack>
-        </Container>
-      </ScrollContainer>
-
-      {/* Floating Action Button */}
-      <View className="absolute bottom-24 right-2">
-        <FloatingActionButton icon="add" onPress={() => setIsModalOpen(true)} />
-      </View>
-
-      {/* Interactive Bottom Modal */}
-      <BottomModal
-        isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        heightPercent={0.45}
-      >
-        <VStack spacing={20} className="px-4 py-2">
-          <View className="h-16 w-16 bg-primary/10 rounded-full items-center justify-center self-center mb-2">
-            <MaterialIcons
-              name="auto-awesome"
-              size={32}
-              color={colors.primary}
-            />
-          </View>
-          <Txt variant="3xl" className="text-center font-black">
-            Premium Modal
-          </Txt>
-          <Txt
-            variant="base"
-            className="text-center text-base-content/70 leading-relaxed px-4"
-          >
-            This highly responsive bottom sheet is gesture-driven. You can
-            seamlessly drag it down to dismiss it.
-          </Txt>
-          <Button
-            label="Acknowledge"
-            variant="primary"
-            isFullWidth
-            className="mt-4"
-            onPress={() => setIsModalOpen(false)}
-          />
-        </VStack>
-      </BottomModal>
-    </View>
-  );
-};
-
-export default Index;

package/templates/react-native/src/app/(tabs)/search.tsx

@@ -1,12 +0,0 @@
-import { View } from "react-native";
-import TabHeader from "@/components/common/TabHeader";
-
-const search = () => {
-  return (
-    <View>
-      <TabHeader title="Search" showMenuButton={false} />
-    </View>
-  );
-};
-
-export default search;

package/templates/react-native/src/app/global.css

@@ -1,82 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* Surface */
-    --color-base-100: 255 255 255;      /* #FFFFFF */
-    --color-base-200: 248 250 252;      /* #F8FAFC */
-    --color-base-300: 226 232 240;      /* #E2E8F0 */
-    --color-base-content: 15 23 42;     /* #0F172A */
-
-    /* Brand */
-    --color-primary: 59 130 246;        /* #3B82F6 */
-    --color-primary-content: 255 255 255;
-
-    --color-secondary: 100 116 139;     /* #64748B */
-    --color-secondary-content: 255 255 255;
-
-    --color-accent: 20 184 166;         /* #14B8A6 */
-    --color-accent-content: 255 255 255;
-
-    /* Neutral */
-    --color-neutral: 30 41 59;          /* #1E293B */
-    --color-neutral-content: 255 255 255;
-
-    /* Semantic */
-    --color-info: 14 165 233;           /* #0EA5E9 */
-    --color-info-content: 255 255 255;
-
-    --color-success: 34 197 94;         /* #22C55E */
-    --color-success-content: 255 255 255;
-
-    --color-warning: 245 158 11;        /* #F59E0B */
-    --color-warning-content: 255 255 255;
-
-    --color-error: 239 68 68;           /* #EF4444 */
-    --color-error-content: 255 255 255;
-
-    /* Radius */
-    --rounded-box: 12px;
-    --rounded-btn: 10px;
-    --rounded-badge: 8px;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root {
-      /* Surface */
-      --color-base-100: 17 24 39;       /* #111827 */
-      --color-base-200: 27 36 51;       /* #1B2433 */
-      --color-base-300: 42 52 69;       /* #2A3445 */
-      --color-base-content: 248 250 252;/* #F8FAFC */
-
-      /* Brand */
-      --color-primary: 96 165 250;      /* #60A5FA */
-      --color-primary-content: 255 255 255;
-
-      --color-secondary: 148 163 184;   /* #94A3B8 */
-      --color-secondary-content: 17 24 39;
-
-      --color-accent: 45 212 191;       /* #2DD4BF */
-      --color-accent-content: 17 24 39;
-
-      /* Neutral */
-      --color-neutral: 248 250 252;     /* #F8FAFC */
-      --color-neutral-content: 17 24 39;
-
-      /* Semantic */
-      --color-info: 56 189 248;         /* #38BDF8 */
-      --color-info-content: 17 24 39;
-
-      --color-success: 74 222 128;      /* #4ADE80 */
-      --color-success-content: 17 24 39;
-
-      --color-warning: 251 191 36;      /* #FBBF24 */
-      --color-warning-content: 17 24 39;
-
-      --color-error: 248 113 113;       /* #F87171 */
-      --color-error-content: 255 255 255;
-    }
-  }
-}