@kivid/native-components 1.0.0-alpha.1

package/src/components/Toggle/enums/variant.ts

@@ -0,0 +1,7 @@
+export enum VariantEnum {
+  GRAPE = "grape",
+  JAVA = "java",
+  PEAR = "pear",
+  TANGERINE = "tangerine",
+  CHIA = "chia",
+}

package/src/components/Toggle/index.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import { Toggle } from './index';
+import type { ToggleProps } from './types';
+import { useState } from 'react';
+import { VariantEnum } from './enums';
+
+const meta: Meta<ToggleProps> = {
+  title: 'Components/Toggle',
+  component: Toggle,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Whether the toggle is checked',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the toggle is disabled',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when the toggle state changes',
+    },
+    variant: {
+      control: 'select',
+      options: Object.values(VariantEnum),
+      description: 'The variant of the toggle',
+      table: {
+        type: { summary: Object.values(VariantEnum).join(" | ") },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: false,
+    disabled: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    checked: false,
+    disabled: false,
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked);
+
+    return (
+      <Toggle
+        {...args}
+        checked={checked}
+        onChange={(newChecked) => {
+          setChecked(newChecked);
+          args.onChange?.(newChecked);
+        }}
+      />
+    );
+  },
+};

package/src/components/Toggle/index.tsx

@@ -0,0 +1,42 @@
+import type { ToggleProps } from "./types";
+import { Pressable, View } from "react-native";
+import { VariantEnum } from "./enums";
+import { merge } from "@butterfly/tailwind-preset";
+import { toggleVariants } from "./assets/class-variants";
+
+export function Toggle(props: ToggleProps) {
+  const {
+    checked,
+    disabled = false,
+    variant = VariantEnum.JAVA,
+    onChange,
+  } = props;
+
+  const handleToggle = () => {
+    if (disabled) return;
+
+    if (onChange) {
+      onChange(!checked);
+    }
+  };
+
+  const mergeToggleClass = merge(
+    toggleVariants({ variant, checked, disabled }),
+    disabled && !checked ? "bg-chia-400" : ""
+  );
+
+  return (
+    <Pressable
+      onPress={handleToggle}
+      className="w-[40px] h-[24px] bg-chia-400 rounded-500"
+    >
+      <View className={mergeToggleClass}>
+        <View
+          className={`absolute left-300 bottom-300 w-600 h-600 bg-chia-200 rounded-400 transition-all duration-300 ${
+            checked ? "translate-x-[16px]" : "translate-x-100"
+          }`}
+        ></View>
+      </View>
+    </Pressable>
+  );
+}

package/src/components/Toggle/types.ts

@@ -0,0 +1,8 @@
+import type { VariantEnum } from "./enums";
+
+export interface ToggleProps {
+  checked: boolean;
+  disabled?: boolean;
+  variant?: VariantEnum;
+  onChange: (checked: boolean) => void;
+}

package/src/components/Typography/index.stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Typography } from "./index";
+import type { TypographyVariant } from "@butterfly/tailwind-preset";
+import { ScrollView, View } from "react-native";
+
+const allOptions: TypographyVariant[] = [
+  "text-display_large_700",
+  "text-display_large_500",
+  "text-display_large_300",
+  "text-display_medium_700",
+  "text-display_medium_500",
+  "text-display_medium_300",
+  "text-display_small_700",
+  "text-display_small_500",
+  "text-display_small_300",
+  "text-headline_large_700",
+  "text-headline_large_500",
+  "text-headline_large_300",
+  "text-headline_medium_700",
+  "text-headline_medium_500",
+  "text-headline_medium_300",
+  "text-headline_small_700",
+  "text-headline_small_500",
+  "text-headline_small_300",
+  "text-title_large_700",
+  "text-title_large_500",
+  "text-title_large_300",
+  "text-title_medium_700",
+  "text-title_medium_500",
+  "text-title_medium_300",
+  "text-title_small_700",
+  "text-title_small_500",
+  "text-title_small_300",
+  "text-body_large_700",
+  "text-body_large_500",
+  "text-body_large_300",
+  "text-body_medium_700",
+  "text-body_medium_500",
+  "text-body_medium_300",
+  "text-body_small_700",
+  "text-body_small_500",
+  "text-body_small_300",
+  "text-label_large_700",
+  "text-label_large_500",
+  "text-label_large_300",
+  "text-label_medium_700",
+  "text-label_medium_500",
+  "text-label_medium_300",
+  "text-label_small_700",
+  "text-label_small_500",
+  "text-label_small_300",
+];
+
+const meta: Meta<typeof Typography> = {
+  title: "Components/Typography",
+  component: Typography,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Universal typography component for React Native that provides access to all design system text styles with automatic font-family mapping.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: allOptions,
+      description: "Typography variant from the design system",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Content to display",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional NativeWind classes",
+    },
+  },
+  args: {
+    variant: "text-body_medium_300",
+    children: "Sample text content",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Typography>;
+
+export const Default: Story = {
+  args: {
+    variant: "text-body_medium_300",
+    children: "This is the default body text style",
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    variant: "text-body_medium_300",
+    children: "Change the variant using the controls to see different styles",
+  },
+};
+
+// Comprehensive showcase of all 45 typography variants
+export const AllVariants: Story = {
+  render: () => {
+    const roles: Record<string, TypographyVariant[]> = {
+      display: [
+        "text-display_large_700",
+        "text-display_large_500",
+        "text-display_large_300",
+        "text-display_medium_700",
+        "text-display_medium_500",
+        "text-display_medium_300",
+        "text-display_small_700",
+        "text-display_small_500",
+        "text-display_small_300",
+      ],
+      headline: [
+        "text-headline_large_700",
+        "text-headline_large_500",
+        "text-headline_large_300",
+        "text-headline_medium_700",
+        "text-headline_medium_500",
+        "text-headline_medium_300",
+        "text-headline_small_700",
+        "text-headline_small_500",
+        "text-headline_small_300",
+      ],
+      title: [
+        "text-title_large_700",
+        "text-title_large_500",
+        "text-title_large_300",
+        "text-title_medium_700",
+        "text-title_medium_500",
+        "text-title_medium_300",
+        "text-title_small_700",
+        "text-title_small_500",
+        "text-title_small_300",
+      ],
+      body: [
+        "text-body_large_700",
+        "text-body_large_500",
+        "text-body_large_300",
+        "text-body_medium_700",
+        "text-body_medium_500",
+        "text-body_medium_300",
+        "text-body_small_700",
+        "text-body_small_500",
+        "text-body_small_300",
+      ],
+      label: [
+        "text-label_large_700",
+        "text-label_large_500",
+        "text-label_large_300",
+        "text-label_medium_700",
+        "text-label_medium_500",
+        "text-label_medium_300",
+        "text-label_small_700",
+        "text-label_small_500",
+        "text-label_small_300",
+      ],
+    };
+
+    return (
+      <ScrollView>
+        <View style={{ padding: 4, gap: 24 }}>
+          {Object.entries(roles).map(([role, variants]) => (
+            <View key={role} style={{ gap: 12 }}>
+              <Typography
+                variant="text-title_medium_700"
+                style={{
+                  textTransform: "capitalize",
+                  borderBottomWidth: 1,
+                  borderBottomColor: "#e5e5e5",
+                  paddingBottom: 8,
+                }}
+              >
+                {role}
+              </Typography>
+              <View style={{ gap: 8 }}>
+                {variants.map((variant, index) => {
+                  const [, size, weight] = variant.split("_");
+                  return (
+                    <View key={index}>
+                      <View
+                        key={variant}
+                        style={{
+                          flexDirection: "column",
+                          alignItems: "flex-start",
+                          gap: 12,
+                          padding: 12,
+                          backgroundColor: "#f9f9f9",
+                          borderRadius: 8,
+                        }}
+                      >
+                        <Typography
+                          variant="text-label_small_300"
+                          style={{
+                            fontFamily: "monospace",
+                            backgroundColor: "#e5e5e5",
+                            paddingHorizontal: 8,
+                            paddingVertical: 4,
+                            borderRadius: 4,
+                            minWidth: 140,
+                          }}
+                        >
+                          {variant}
+                        </Typography>
+                        <Typography variant={variant as TypographyVariant}>
+                          {size.charAt(0).toUpperCase() + size.slice(1)}{" "}
+                          {weight === "300"
+                            ? "Regular"
+                            : weight === "500"
+                              ? "Medium"
+                              : "Bold"}
+                        </Typography>
+                      </View>
+                      <View
+                        style={{
+                          height: 2,
+                          backgroundColor: "#e5e5e5",
+                          width: "100%",
+                        }}
+                      />
+                    </View>
+                  );
+                })}
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete showcase of all 45 typography variants organized by role (display, headline, title, body, label), size (small, medium, large), and weight (300, 500, 700).",
+      },
+    },
+  },
+};
+
+// Custom styling example
+export const WithCustomStyling: Story = {
+  args: {
+    variant: "text-headline_medium_500",
+    className: "text-blue-600",
+    children: "Custom styled headline with color override",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows how className prop can override or extend the base typography styles using NativeWind.",
+      },
+    },
+  },
+};

package/src/components/Typography/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Text } from "react-native";
+import type { TypographyProps } from "./types";
+import { merge } from "@butterfly/tailwind-preset";
+
+/**
+ * Universal Typography component for React Native.
+ *
+ * This component provides:
+ * - Type-safe access to all typography variants from your design tokens
+ * - Automatic font-family mapping based on font weight
+ * - NativeWind className support for additional styling
+ * - Consistent typography across your React Native app
+ *
+ * @example
+ * // Display text with automatic font mapping
+ * <Typography variant="text-display_large_700">Hero Title</Typography>
+ *
+ * @example
+ * // Body text with medium weight
+ * <Typography variant="text-body_medium_500">Content text</Typography>
+ *
+ * @example
+ * // With additional styling
+ * <Typography variant="text-label_small_300" className="text-gray-600">
+ *   Form label
+ * </Typography>
+ */
+export const Typography: React.FC<TypographyProps> = ({
+  variant,
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  const textClassName = merge(`font-nunito`, variant, className);
+
+  return (
+    <Text className={textClassName} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+Typography.displayName = "Typography";
+export default Typography;

package/src/components/Typography/types.ts

@@ -0,0 +1,8 @@
+import type { TextProps as RNTextProps } from "react-native";
+import type { TypographyVariant } from "@butterfly/tailwind-preset";
+
+export interface TypographyProps extends Omit<RNTextProps, "children"> {
+  variant: TypographyVariant;
+  className?: string;
+  children: React.ReactNode;
+}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from "./Button";
+export * from "./Chip";
+export * from "./InformationStatus";
+export * from "./InputCheckbox";
+export * from "./InputOTP";
+export * from "./HighlightedText";
+export * from "./LoadingDots";
+export * from "./Seal";
+export * from "./Title";
+export * from "./Toggle";
+export * from "./Typography";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-fonts";

package/src/hooks/use-fonts.ts

@@ -0,0 +1,22 @@
+import { useFonts as useExpoFonts } from "expo-font";
+
+/**
+ * A hook to load the custom fonts for the design system.
+ * This should be used in the root component of the application (e.g., App.tsx).
+ *
+ * @returns A boolean indicating if the fonts have been loaded, and an error object if one occurred.
+ */
+export const useBrandFonts = () => {
+  const [fontsLoaded, fontError] = useExpoFonts({
+    "Nunito-Bold": require("../../assets/fonts/Nunito-Bold.ttf"),
+    "Nunito-BoldItalic": require("../../assets/fonts/Nunito-BoldItalic.ttf"),
+    "Nunito-Italic": require("../../assets/fonts/Nunito-Italic.ttf"),
+    "Nunito-Medium": require("../../assets/fonts/Nunito-Medium.ttf"),
+    "Nunito-MediumItalic": require("../../assets/fonts/Nunito-MediumItalic.ttf"),
+    "Nunito-Regular": require("../../assets/fonts/Nunito-Regular.ttf"),
+    "Nunito-SemiBold": require("../../assets/fonts/Nunito-SemiBold.ttf"),
+    "Nunito-SemiBoldItalic": require("../../assets/fonts/Nunito-SemiBoldItalic.ttf"),
+  });
+
+  return { fontsLoaded, fontError };
+};

package/src/iconography/Icons/index.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Icons } from ".";
+
+const meta = {
+  title: "Iconography/Icons",
+  component: Icons,
+  argTypes: {
+    size: {
+      control: { type: "number" },
+    },
+  },
+  args: {
+    size: 24,
+  },
+} satisfies Meta<typeof Icons>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllIcons: Story = {
+  name: "Todos os Ícones",
+  args: {},
+};

package/src/iconography/Icons/index.tsx

@@ -0,0 +1,89 @@
+import * as IconsNative from '@butterfly/icons/native';
+import React, { useMemo, useState } from 'react';
+import type { IconsProps, IconProps } from './types';
+import { Alert, FlatList, Pressable, SafeAreaView, Text, TextInput, View } from 'react-native';
+
+export function Icons(props: IconsProps) {
+  const { size = 24, color = 'currentColor' } = props;
+
+  const icons = Object.entries(IconsNative).map(([name, IconComponent]) => ({
+    name,
+    component: IconComponent as React.FC<IconProps>,
+  }));
+
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const iconsFiltered = useMemo(() => {
+    const sorted = [...icons].sort((a, b) => a.name.localeCompare(b.name));
+    return sorted.filter(icon =>
+      icon.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [icons, searchTerm]);
+
+  function handleIconPress(name: string) {
+    const isCurrentColor = color === 'currentColor';
+    const component = `<${name} size={${size}} ${isCurrentColor ? '' : `color="${color}"`} />`;
+
+    Alert.alert(`Ícone selecionado: ${component}`);
+  }
+
+  return (
+    <SafeAreaView
+      className='m-16'
+    >
+      <TextInput
+        placeholder="Pesquisar ícones..."
+        placeholderTextColor="#98A3A3"
+        style={{
+          width: '100%',
+          height: 40,
+          marginBottom: 16,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: '#98A3A3',
+          paddingHorizontal: 12,
+          fontSize: 16,
+        }}
+        onChangeText={setSearchTerm}
+        value={searchTerm}
+      />
+
+      <FlatList
+        data={iconsFiltered}
+        keyExtractor={({ name }) => name}
+        numColumns={4}
+        columnWrapperStyle={{
+          justifyContent: "flex-start",
+        }}
+        contentContainerStyle={{
+          paddingBottom: 32,
+        }}
+        renderItem={({ item: { name, component: IconComponent } }) => (
+          <View style={{ flex: 1, alignItems: "center", marginVertical: 8 }}>
+            <Pressable
+              style={{
+                flexDirection: "column",
+                alignItems: "center",
+                padding: 8,
+              }}
+              onPress={() => handleIconPress(name)}
+            >
+              <IconComponent size={size} color={color} />
+              <Text
+                style={{
+                  marginTop: 8,
+                  fontSize: 12,
+                  textAlign: "center",
+                  maxWidth: 100,
+                }}
+                numberOfLines={1}
+              >
+                {name}
+              </Text>
+            </Pressable>
+          </View>
+        )}
+      />
+    </SafeAreaView>
+  );
+};

package/src/iconography/Icons/types.ts

@@ -0,0 +1,12 @@
+import { SvgProps } from "react-native-svg";
+
+export interface IconProps extends SvgProps {
+  size?: number;
+  color?: string;
+  name?: string;
+}
+export interface IconsProps {
+  size?: number;
+  color?: string;
+  icons?: IconProps[];
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/src/welcome.mdx

@@ -0,0 +1,3 @@
+# Butterfly Mobile Design System
+
+Welcome to Butterfly Mobile Design System!