@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/typescript/components/Title/index.d.ts

@@ -1,5 +1,5 @@
 import type { TitleProps } from "./types";
-declare function Title(props: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Title(props: TitleProps): import("react").JSX.Element;
 declare namespace Title {
     var Icon: typeof import("./components").Icon;
     var Marker: typeof import("./components").Marker;

package/dist/typescript/components/Title/types.d.ts

@@ -1,7 +1,9 @@
 import type React from "react";
+import { SizeEnum } from "../../enums";
+export type TitleSize = SizeEnum.XXLARGE | SizeEnum.XLARGE | SizeEnum.LARGE | SizeEnum.MEDIUM | SizeEnum.SMALL | SizeEnum.XSMALL;
 export interface TitleProps {
     children: React.ReactNode;
     className?: string;
-    variant?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+    variant?: TitleSize;
     head: React.ReactNode;
 }

package/dist/typescript/components/Toast/assets/class-variants.d.ts

@@ -0,0 +1,8 @@
+import { ToastPositionEnum, ToastVariantEnum } from "../enums";
+declare const toastVariants: (props?: ({
+    variant?: ToastVariantEnum | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const containerVariants: (props?: ({
+    position?: ToastPositionEnum | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { toastVariants, containerVariants };

package/dist/typescript/components/Toast/enums/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./variant";
+export * from "./position";

package/dist/typescript/components/Toast/enums/position.d.ts

@@ -0,0 +1,4 @@
+export declare enum ToastPositionEnum {
+    TOP = "top",
+    BOTTOM = "bottom"
+}

package/dist/typescript/components/Toast/enums/variant.d.ts

@@ -0,0 +1,5 @@
+export declare enum ToastVariantEnum {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning"
+}

package/dist/typescript/components/Toast/index.d.ts

@@ -0,0 +1,2 @@
+import { ToastProps } from "./types";
+export declare function Toast(props: ToastProps): import("react").JSX.Element | null;

package/dist/typescript/components/Toast/types.d.ts

@@ -0,0 +1,11 @@
+import type { ToastPositionEnum, ToastVariantEnum } from "./enums";
+export interface ToastProps {
+    className?: string;
+    descriptionClassName?: string;
+    description: string;
+    variant?: ToastVariantEnum;
+    position?: ToastPositionEnum;
+    durationInMilliSeconds?: number;
+    isToastOpen: boolean;
+    onCloseToast: (value: boolean) => void;
+}

package/dist/typescript/components/Toggle/enums/variant.d.ts

@@ -1,4 +1,4 @@
-export declare enum VariantEnum {
+export declare enum ToggleVariantEnum {
     GRAPE = "grape",
     JAVA = "java",
     PEAR = "pear",

package/dist/typescript/components/Toggle/index.d.ts

@@ -1,2 +1,2 @@
 import type { ToggleProps } from "./types";
-export declare function Toggle(props: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toggle(props: ToggleProps): import("react").JSX.Element;

package/dist/typescript/components/Toggle/types.d.ts

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

package/dist/typescript/components/Tooltip/assets/class-variant.d.ts

@@ -0,0 +1,7 @@
+import { TooltipVariantEnum } from "../enum";
+export declare const contentVariants: (props?: ({
+    variant?: TooltipVariantEnum | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const pointerVariants: (props?: ({
+    variant?: TooltipVariantEnum | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/typescript/components/Tooltip/components/Content/index.d.ts

@@ -0,0 +1,2 @@
+import { ContentProps } from "./types";
+export declare function Content(props: ContentProps): import("react").JSX.Element | null;

package/dist/typescript/components/Tooltip/components/Content/types.d.ts

@@ -0,0 +1,14 @@
+import { LayoutChangeEvent } from "react-native";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+export interface ContentProps {
+    message: string | React.ReactNode;
+    variant?: TooltipVariantEnum;
+    className?: string;
+    pointerClassName?: string;
+    containerClassName?: string;
+    isVisible: boolean;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    translateX?: number;
+    pointerOffset?: TooltipPointerOffsetEnum;
+    onChangeVisibility?: (isVisible: boolean) => void;
+}

package/dist/typescript/components/Tooltip/components/index.d.ts

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

package/dist/typescript/components/Tooltip/enum/index.d.ts

@@ -0,0 +1,9 @@
+export declare enum TooltipVariantEnum {
+    ERROR = "error",
+    TRIGGER = "trigger"
+}
+export declare enum TooltipPointerOffsetEnum {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right"
+}

package/dist/typescript/components/Tooltip/hooks/index.d.ts

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

package/dist/typescript/components/Tooltip/hooks/tooltip-position.d.ts

@@ -0,0 +1,17 @@
+import { LayoutChangeEvent, LayoutRectangle } from "react-native";
+import { TooltipPointerOffsetEnum } from "../enum";
+interface TooltipPositionData {
+    triggerLayout: LayoutRectangle | null;
+    tooltipLayout: LayoutRectangle | null;
+    screenWidth: number;
+    adjustedPosition: {
+        translateX?: number;
+    };
+    pointerOffset?: TooltipPointerOffsetEnum;
+}
+export declare function useTooltipPosition(): {
+    positionData: TooltipPositionData;
+    onTriggerLayout: (event: LayoutChangeEvent) => void;
+    onTooltipLayout: (event: LayoutChangeEvent) => void;
+};
+export {};

package/dist/typescript/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from "./types";
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;

package/dist/typescript/components/Tooltip/types.d.ts

@@ -0,0 +1,13 @@
+import { ViewStyle } from "react-native";
+import { TooltipVariantEnum } from "./enum";
+export interface TooltipProps {
+    children?: React.ReactNode;
+    message: React.ReactNode;
+    variant?: TooltipVariantEnum;
+    className?: string;
+    pointerClassName?: string;
+    containerClassName?: string;
+    style?: ViewStyle;
+    onChangeVisibility?: (isVisible: boolean) => void;
+    isOpenedByVariantError?: boolean;
+}

package/dist/typescript/components/Typography/assets/class-variants.d.ts

@@ -0,0 +1,4 @@
+export declare const typographyVariants: (props?: ({
+    variant?: "label_small" | "label_medium" | "label_large" | "body_small" | "body_medium" | "body_large" | "title_small" | "title_medium" | "title_large" | "headline_small" | "headline_medium" | "headline_large" | "display_small" | "display_medium" | "display_large" | null | undefined;
+    weight?: "200" | "400" | "500" | "600" | "700" | "800" | "900" | "300" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/typescript/components/Typography/index.d.ts

@@ -11,15 +11,15 @@ import type { TypographyProps } from "./types";
  *
  * @example
  * // Display text with automatic font mapping
- * <Typography variant="text-display_large_700">Hero Title</Typography>
+ * <Typography variant="display_large" weight="700">Hero Title</Typography>
  *
  * @example
  * // Body text with medium weight
- * <Typography variant="text-body_medium_500">Content text</Typography>
+ * <Typography variant="body_medium" weight="500">Content text</Typography>
  *
  * @example
  * // With additional styling
- * <Typography variant="text-label_small_300" className="text-gray-600">
+ * <Typography variant="label_small" weight="300" className="text-gray-600">
  *   Form label
  * </Typography>
  */

package/dist/typescript/components/Typography/types.d.ts

@@ -1,7 +1,7 @@
 import type { TextProps as RNTextProps } from "react-native";
-import type { TypographyVariant } from "@kivid/tailwind-preset";
-export interface TypographyProps extends Omit<RNTextProps, "children"> {
-    variant: TypographyVariant;
+import type { VariantProps } from "class-variance-authority";
+import { typographyVariants } from "./assets/class-variants";
+export interface TypographyProps extends Omit<RNTextProps, "children">, VariantProps<typeof typographyVariants> {
     className?: string;
     children: React.ReactNode;
 }

package/dist/typescript/components/index.d.ts

@@ -1,11 +1,62 @@
+export * from "./Avatar";
 export * from "./Button";
+export type * from "./Button/types";
+export * from "./ChatBubble";
+export type * from "./ChatBubble/contexts/ChatBubbleContext/types";
+export type * from "./ChatBubble/types";
 export * from "./Chip";
+export * from "./Chip/enums";
+export * from "./Chip/types";
 export * from "./InformationStatus";
-export * from "./InputCheckbox";
-export * from "./InputOTP";
+export * from "./InformationStatus/enums";
+export type * from "./InformationStatus/types";
+export * from "./CheckboxInput";
+export * from "./CheckboxInput/enums";
+export type * from "./CheckboxInput/types";
+export * from "./OtpInput";
+export * from "./OtpInput/enums";
+export type * from "./OtpInput/types";
+export * from "./MessageInput";
+export type * from "./MessageInput/types";
 export * from "./HighlightedText";
+export type * from "./HighlightedText/types";
 export * from "./LoadingDots";
+export * from "./LoadingDots/types";
 export * from "./Seal";
+export * from "./Seal/enums";
+export type * from "./Seal/types";
 export * from "./Title";
+export type * from "./Title/types";
 export * from "./Toggle";
+export * from "./Toggle/enums";
+export type * from "./Toggle/types";
 export * from "./Typography";
+export type * from "./Typography/types";
+export * from "./Toast";
+export * from "./Toast/enums";
+export type * from "./Toast/types";
+export * from "./Tooltip";
+export type * from "./Tooltip/types";
+export * from "./ListButton";
+export * from "./ListButton/enums";
+export type * from "./ListButton/types";
+export * from "./TextInput";
+export * from "./TextInput/enums";
+export type * from "./TextInput/types";
+export * from "./SelectButton";
+export * from "./SelectButton/enums";
+export type * from "./SelectButton/types";
+export * from "./RadioInput";
+export * from "./RadioInput/enums";
+export type * from "./RadioInput/types";
+export * from "./IconButton";
+export * from "./IconButton/enums";
+export type * from "./IconButton/types";
+export * from "./PasswordInput";
+export type * from "./PasswordInput/types";
+export * from "./PageIndicators";
+export type * from "./PageIndicators/types";
+export * from "./ActionButton";
+export type * from "./ActionButton/types";
+export * from "./MessageInput";
+export type * from "./MessageInput/types";

package/dist/typescript/enums/corners.d.ts

@@ -0,0 +1,6 @@
+export declare enum CornersEnum {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XLARGE = "xlarge"
+}

package/dist/typescript/enums/font-weight.d.ts

@@ -0,0 +1,10 @@
+export declare enum FontWeightEnum {
+    LIGHT = "100",
+    THIN = "200",
+    REGULAR = "400",
+    MEDIUM = "500",
+    SEMIBOLD = "600",
+    BOLD = "700",
+    EXTRA_BOLD = "800",
+    BLACK = "900"
+}

package/dist/typescript/enums/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./corners";
+export * from "./font-weight";
+export * from "./size";
+export * from "./state-variant";

package/dist/typescript/enums/size.d.ts

@@ -0,0 +1,10 @@
+export declare enum SizeEnum {
+    XXSMALL = "xxsmall",
+    XSMALL = "xsmall",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    XLARGE = "xlarge",
+    XXLARGE = "xxlarge",
+    XXXLARGE = "xxxlarge"
+}

package/dist/typescript/enums/state-variant.d.ts

@@ -0,0 +1,7 @@
+export declare enum StateVariantEnum {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning",
+    ADD = "add",
+    CUSTOM = "custom"
+}

package/dist/typescript/iconography/Icons/index.d.ts

@@ -1,2 +1,3 @@
+import React from "react";
 import type { IconsProps } from "./types";
-export declare function Icons(props: IconsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icons(props: IconsProps): React.JSX.Element;

package/dist/typescript/index.d.ts

@@ -1 +1,3 @@
 export * from "./components";
+export * from "./enums";
+export * from "./styles";

package/dist/typescript/storybook-utils/components/CodeBlock/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CodeBlockProps } from "./types";
+export declare function CodeBlock({ children, title, showLineNumbers, maxHeight, }: CodeBlockProps): React.JSX.Element;
+export default CodeBlock;

package/dist/typescript/storybook-utils/components/CodeBlock/types.d.ts

@@ -0,0 +1,6 @@
+export interface CodeBlockProps {
+    children: string;
+    title?: string;
+    showLineNumbers?: boolean;
+    maxHeight?: number;
+}

package/dist/typescript/storybook-utils/components/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Storybook Utilities - Documentation Components
+ *
+ * These components are NOT part of the design system.
+ * They are utility components specifically for Storybook documentation.
+ *
+ * DO NOT export these from the main components index.
+ * DO NOT create stories for these components.
+ */
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock/types";

package/dist/typescript/storybook-utils/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Storybook Utilities
+ *
+ * These are utility components and helpers specifically for Storybook documentation.
+ * They are NOT part of the design system and should not be exported from the main package.
+ */
+export * from "./components";

package/dist/typescript/styles/index.d.ts

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

package/dist/typescript/styles/mixins/index.d.ts

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

package/dist/typescript/styles/mixins/shadows/elevation-down-100.d.ts

@@ -0,0 +1 @@
+export declare const elevationDown100 = "1px 1px 2px 0 rgba(119, 128, 128, 0.02), 1px 1px 4px 0 rgba(119, 128, 128, 0.02), 2px 2px 6px 0 rgba(119, 128, 128, 0.02), 2px 2px 16px 0 rgba(119, 128, 128, 0.06)";

package/dist/typescript/styles/mixins/shadows/elevation-down-200.d.ts

@@ -0,0 +1 @@
+export declare const elevationDown200 = "2px 2px 4px 0 rgba(119, 128, 128, 0.08), 4px 4px 6px 0 rgba(119, 128, 128, 0.06), 6px 6px 8px 0 rgba(119, 128, 128, 0.04), 8px 8px 24px 0 rgba(119, 128, 128, 0.08)";

package/dist/typescript/styles/mixins/shadows/elevation-down-300.d.ts

@@ -0,0 +1 @@
+export declare const elevation300 = "4px 4px 4px 0 rgba(119, 128, 128, 0.08), 12px 12px 6px 0 rgba(119, 128, 128, 0.06), 18px 18px 16px 0 rgba(119, 128, 128, 0.04), 12px 12px 40px 0 rgba(119, 128, 128, 0.24)";

package/dist/typescript/styles/mixins/shadows/elevation-up-100.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp100 = "0 -2px 2px 0 rgba(119, 128, 128, 0.02), 0 -4px 4px 0 rgba(119, 128, 128, 0.02), 0 -8px 16px 0 rgba(119, 128, 128, 0.02), 0 -8px 32px 0 rgba(119, 128, 128, 0.08)";

package/dist/typescript/styles/mixins/shadows/elevation-up-200.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp200 = "0 -2px 2px 0 rgba(119, 128, 128, 0.04), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.06), 0 -12px 32px 0 rgba(119, 128, 128, 0.12)";

package/dist/typescript/styles/mixins/shadows/elevation-up-300.d.ts

@@ -0,0 +1 @@
+export declare const elevationUp300 = "0 -2px 2px 0 rgba(119, 128, 128, 0.06), 0 -4px 4px 0 rgba(119, 128, 128, 0.06), 0 -8px 16px 0 rgba(119, 128, 128, 0.12), 0 -16px 48px 0 rgba(119, 128, 128, 0.24)";

package/dist/typescript/styles/mixins/shadows/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./elevation-down-100";
+export * from "./elevation-down-200";
+export * from "./elevation-down-300";
+export * from "./elevation-up-100";
+export * from "./elevation-up-200";
+export * from "./elevation-up-300";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.21",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -12,21 +12,29 @@
   },
   "homepage": "https://github.com/kivid-saude/butterfly/tree/main/packages/native-components#readme",
   "license": "MIT",
-  "main": "index.js",
-  "files": [
-    "dist",
-    "src",
-    "assets"
-  ],
+  "main": "./dist/module/index.js",
+  "types": "./dist/typescript/index.d.ts",
   "exports": {
     ".": {
       "react-native": "./src/index.ts",
-      "import": "./dist/module/index.js",
+      "source": "./src/index.ts",
+      "types": "./dist/typescript/index.d.ts",
+      "default": "./dist/module/index.js",
       "require": "./dist/commonjs/index.js",
-      "types": "./dist/typescript/index.d.ts"
+      "import": "./dist/module/index.js"
     },
-    "./styles": "./dist/styles.css"
+    "./package.json": "./package.json"
   },
+  "files": [
+    "dist",
+    "src",
+    "!**/*.test.js",
+    "!**/*.test.tsx",
+    "!**/*.spec.tsx",
+    "!**/*.spec.js",
+    "!**/*.stories.tsx",
+    "!**/*.stories.js"
+  ],
   "react-native-builder-bob": {
     "source": "src",
     "output": "dist",
@@ -45,67 +53,54 @@
       ]
     ]
   },
-  "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",
-    "@kivid/icons": "1.0.0-alpha.2"
-  },
   "devDependencies": {
     "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.28.5",
     "@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",
+    "@react-native/babel-preset": "^0.77.0",
+    "@react-native/eslint-config": "^0.77.0",
+    "@react-native/eslint-plugin": "^0.83.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.12",
     "@types/node": "^24.1.0",
     "@types/react": "19.0.14",
-    "autoprefixer": "^10.4.19",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "babel-jest": "^29.7.0",
     "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",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lottie-react-native": "^7.2.2",
-    "postcss": "^8.4.40",
     "prettier-plugin-tailwindcss": "^0.5.14",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
     "react-native-builder-bob": "^0.40.13",
-    "storybook": "^9",
-    "tailwindcss": "^3.4.17",
+    "react-native-svg": "^15.12.0",
+    "react-test-renderer": "19.0.0",
+    "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "@kivid/tailwind-preset": "1.0.0-alpha.2"
+    "@kivid/tailwind-preset": "1.0.0-alpha.21",
+    "@kivid/icons": "1.0.0-alpha.21"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "class-variance-authority": "^0.7.1",
     "lottie-react-native": "^7.2.4",
+    "nativewind": "4.1.23",
     "react": "19.0.0",
     "react-native": "0.79.5",
-    "@kivid/tailwind-preset": "1.0.0-alpha.2",
-    "@kivid/icons": "1.0.0-alpha.2"
+    "react-native-svg": "^15.12.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.21",
+    "@kivid/icons": "1.0.0-alpha.21"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -113,16 +108,11 @@
   ],
   "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"
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
 }

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

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import { CornersEnum } from "../../../enums";
+
+export const menuCardVariants = cva(
+  [
+    "flex-col justify-between items-start",
+    "relative",
+    "min-h-[120px]",
+    "p-[12px]",
+    "overflow-hidden",
+  ],
+  {
+    variants: {
+      variant: {
+        grape: ["bg-grape-500", "disabled:bg-grape-200"],
+        java: ["bg-java-500", "disabled:bg-java-200"],
+        pear: ["bg-pear-500", "disabled:bg-pear-200"],
+        tangerine: ["bg-tangerine-500", "disabled:bg-tangerine-200"],
+        blackberry: ["bg-blackberry-500", "disabled:bg-blackberry-200"],
+        chia: ["bg-chia-700", "disabled:bg-chia-400"],
+        outline: ["border-100 border-chia-400", "disabled:border-chia-300"],
+      },
+      corners: {
+        [CornersEnum.SMALL]: "rounded-700",
+        [CornersEnum.MEDIUM]: "rounded-[16px]",
+        [CornersEnum.LARGE]: "rounded-700",
+      },
+    },
+    defaultVariants: {
+      variant: "grape",
+      corners: CornersEnum.MEDIUM,
+    },
+  }
+);
+
+export 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",
+    },
+  },
+  defaultVariants: {
+    variant: "grape",
+  },
+});