@kivid/native-components 1.0.0-alpha.1

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@kivid/native-components",
+  "version": "1.0.0-alpha.1",
+  "description": "A React Native component library for the Butterfly Design System.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kivid-saude/butterfly",
+    "directory": "packages/native-components"
+  },
+  "bugs": {
+    "url": "https://github.com/kivid-saude/butterfly/issues"
+  },
+  "homepage": "https://github.com/kivid-saude/butterfly/tree/main/packages/native-components#readme",
+  "license": "MIT",
+  "main": "index.js",
+  "files": [
+    "dist",
+    "src",
+    "assets"
+  ],
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "import": "./dist/module/index.js",
+      "require": "./dist/commonjs/index.js",
+      "types": "./dist/typescript/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^5.1.2",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/slider": "4.5.6",
+    "expo": "~53.0.9",
+    "expo-constants": "~17.1.6",
+    "expo-font": "~13.3.2",
+    "expo-splash-screen": "^0.30.10",
+    "expo-status-bar": "~2.2.3",
+    "nativewind": "^4.1.23",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.5",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-svg": "^15.11.2",
+    "react-native-web": "^0.20.0",
+    "@butterfly/icons": "npm:@kivid/icons@1.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.25.4",
+    "@chromatic-com/storybook": "^4.0.0",
+    "@expo/metro-runtime": "~5.0.4",
+    "@lottiefiles/dotlottie-react": "^0.15.1",
+    "@react-native-community/cli": "^15.1.3",
+    "@storybook/addon-docs": "^9",
+    "@storybook/addon-ondevice-actions": "^9",
+    "@storybook/addon-ondevice-backgrounds": "^9",
+    "@storybook/addon-ondevice-controls": "^9",
+    "@storybook/addon-ondevice-notes": "^9",
+    "@storybook/react": "^9",
+    "@storybook/react-native": "^9",
+    "@storybook/react-native-web-vite": "^9",
+    "@types/node": "^24.1.0",
+    "@types/react": "19.0.14",
+    "autoprefixer": "^10.4.19",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-react-docgen-typescript": "^1.5.1",
+    "class-variance-authority": "^0.7.1",
+    "cross-env": "^7.0.3",
+    "lottie-react-native": "^7.2.2",
+    "postcss": "^8.4.40",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "react-native-builder-bob": "^0.40.13",
+    "storybook": "^9",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5",
+    "@butterfly/tailwind-preset": "npm:@kivid/tailwind-preset@1.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "@lottiefiles/dotlottie-react": "^0.15.1",
+    "class-variance-authority": "^0.7.1",
+    "lottie-react-native": "^7.2.4",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "@butterfly/icons": "npm:@kivid/icons@1.0.0-alpha.1",
+    "@butterfly/tailwind-preset": "npm:@kivid/tailwind-preset@1.0.0-alpha.1"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && bob build && node postbuild.js",
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "development-build": "cross-env EXPO_USE_COMMUNITY_AUTOLINKING=0 expo prebuild --clean",
+    "storybook:web": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "storybook-generate": "sb-rn-get-stories",
+    "storybook": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start",
+    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --ios",
+    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --android"
+  }
+}

package/src/components/Button/assets/class-variants.ts

@@ -0,0 +1,111 @@
+import { cva } from "class-variance-authority";
+
+const buttonVariants = cva(
+  [
+    "flex-row items-center justify-center",
+    "font-bold",
+    "relative overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        grape: ["bg-grape-500", "disabled:bg-grape-500 disabled:opacity-30"],
+        java: ["bg-java-500", "disabled:bg-java-500 disabled:opacity-30"],
+        pear: ["bg-pear-500", "disabled:bg-pear-500 disabled:opacity-30"],
+        tangerine: [
+          "bg-tangerine-500",
+          "disabled:bg-tangerine-500 disabled:opacity-30",
+        ],
+        blackberry: [
+          "bg-blackberry-500",
+          "disabled:bg-blackberry-500 disabled:opacity-30",
+        ],
+        chia: ["bg-chia-700", "disabled:bg-chia-700 disabled:opacity-30"],
+        outline: [
+          "bg-chia-100 border-100 border-chia-400",
+          "disabled:bg-chia-200 disabled:opacity-50",
+        ],
+        glass: [
+          "bg-chia-300/20 border border-chia-300/20",
+          "disabled:bg-chia-300/20 disabled:opacity-30",
+        ],
+        ghost: ["bg-transparent", "disabled:opacity-30"],
+      },
+      size: {
+        small: ["px-400 h-800"],
+        medium: ["px-600 h-900"],
+        large: ["px-600 h-1000"],
+      },
+      corners: {
+        small: "rounded-500",
+        medium: "rounded-700",
+      },
+      fullWidth: {
+        true: "w-full",
+      },
+      selected: {
+        true: "",
+      },
+    },
+    defaultVariants: {
+      variant: "grape",
+      size: "medium",
+      corners: "medium",
+      fullWidth: false,
+    },
+  }
+);
+
+const textVariants = cva("", {
+  variants: {
+    variant: {
+      grape: "text-chia-100",
+      java: "text-chia-100",
+      pear: "text-chia-100",
+      tangerine: "text-chia-100",
+      blackberry: "text-chia-100",
+      chia: "text-chia-100",
+      outline: "text-chia-900",
+      glass: "text-chia-900",
+      ghost: "text-chia-900",
+    },
+    size: {
+      small: "text-label_small_700",
+      medium: "text-label_medium_700",
+      large: "text-label_large_700",
+    },
+    selected: {
+      true: "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "outline",
+      selected: true,
+      class: "text-grape-500",
+    },
+    {
+      variant: "ghost",
+      selected: true,
+      class: "text-chia-900",
+    },
+  ],
+});
+
+const selectedVariants = cva("", {
+  variants: {
+    variant: {
+      grape: "bg-grape-500",
+      java: "bg-java-500",
+      pear: "bg-pear-500",
+      tangerine: "bg-tangerine-500",
+      blackberry: "bg-blackberry-500",
+      chia: "bg-chia-700",
+      outline: "bg-grape-100 border-100 border-grape-300",
+      glass: "bg-chia-300/20",
+      ghost: "bg-chia-100",
+    },
+  },
+});
+
+export { buttonVariants, textVariants, selectedVariants };