@kivid/native-components 1.0.0-alpha.15 → 1.0.0-alpha.17

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

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg from "react-native-svg";
 import { GradientAddProps } from "./types";
-export declare function GradientAdd(props: GradientAddProps, ref?: React.Ref<Svg>): import("react").JSX.Element;
+export declare const GradientAdd: React.ForwardRefExoticComponent<GradientAddProps & React.RefAttributes<Svg>>;

package/dist/typescript/components/InformationStatus/components/GradientAdd/types.d.ts

@@ -1,5 +1,6 @@
 import { SvgProps } from "react-native-svg";
-export interface GradientAddProps extends SvgProps {
-    size?: number;
+import { SizeEnum } from "../../../../enums";
+export interface GradientAddProps extends Omit<SvgProps, "width" | "height"> {
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
     color?: string;
 }

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

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg from "react-native-svg";
 import { GradientAlertProps } from "./types";
-export declare function GradientAlert(props: GradientAlertProps, ref?: React.Ref<Svg>): import("react").JSX.Element;
+export declare function GradientAlert(props: GradientAlertProps, ref?: React.Ref<Svg>): React.JSX.Element;

package/dist/typescript/components/InformationStatus/components/GradientAlert/types.d.ts

@@ -1,5 +1,6 @@
 import { SvgProps } from "react-native-svg";
-export interface GradientAlertProps extends SvgProps {
-    size?: number;
+import { SizeEnum } from "../../../../enums";
+export interface GradientAlertProps extends Omit<SvgProps, "width" | "height"> {
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
     color?: string;
 }

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

@@ -1,3 +1,4 @@
-import Svg from "react-native-svg";
-import { GradientCheckProps } from "./types";
-export declare function GradientCheck(props: GradientCheckProps, ref?: React.Ref<Svg>): import("react").JSX.Element;
+import React from 'react';
+import Svg from 'react-native-svg';
+import { GradientCheckProps } from './types';
+export declare function GradientCheck(props: GradientCheckProps, ref?: React.Ref<Svg>): React.JSX.Element;

package/dist/typescript/components/InformationStatus/components/GradientCheck/types.d.ts

@@ -1,5 +1,6 @@
 import { SvgProps } from "react-native-svg";
-export interface GradientCheckProps extends SvgProps {
-    size?: number;
+import { SizeEnum } from "../../../../enums";
+export interface GradientCheckProps extends Omit<SvgProps, "width" | "height"> {
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
     color?: string;
 }

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

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg from "react-native-svg";
 import { GradientCloseProps } from "./types";
-export declare function GradientClose(props: GradientCloseProps, ref?: React.Ref<Svg>): import("react").JSX.Element;
+export declare function GradientClose(props: GradientCloseProps, ref?: React.Ref<Svg>): React.JSX.Element;

package/dist/typescript/components/InformationStatus/components/GradientClose/types.d.ts

@@ -1,5 +1,6 @@
 import { SvgProps } from "react-native-svg";
-export interface GradientCloseProps extends SvgProps {
-    size?: number;
+import { SizeEnum } from "../../../../enums";
+export interface GradientCloseProps extends Omit<SvgProps, "width" | "height"> {
+    size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
     color?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.17",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -79,8 +79,8 @@
     "react": "19.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "~5.8.3",
-    "@kivid/tailwind-preset": "1.0.0-alpha.15",
-    "@kivid/icons": "1.0.0-alpha.15"
+    "@kivid/icons": "1.0.0-alpha.17",
+    "@kivid/tailwind-preset": "1.0.0-alpha.17"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -90,8 +90,8 @@
     "react-native-svg": "^15.12.0",
     "react-native": "0.79.5",
     "react": "19.0.0",
-    "@kivid/tailwind-preset": "1.0.0-alpha.15",
-    "@kivid/icons": "1.0.0-alpha.15"
+    "@kivid/icons": "1.0.0-alpha.17",
+    "@kivid/tailwind-preset": "1.0.0-alpha.17"
   },
   "eslintIgnore": [
     "node_modules/",

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

@@ -15,19 +15,10 @@ export const menuCardVariants = cva(
         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",
-        ],
+        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",
-        ],
+        outline: ["border-100 border-chia-400", "disabled:border-chia-300"],
       },
       corners: {
         [CornersEnum.SMALL]: "rounded-700",

package/src/components/ActionButton/index.tsx

@@ -3,26 +3,21 @@ import React from "react";
 import { Pressable, View } from "react-native";
 import { CornersEnum, FontWeightEnum } from "../../enums";
 import { Typography } from "../Typography";
-import {
-  menuCardVariants,
-  textVariants,
-} from "./assets/class-variants";
+import { menuCardVariants, textVariants } from "./assets/class-variants";
 import type { ActionButtonProps } from "./types";
 
 export function ActionButton(props: ActionButtonProps) {
   const {
     icon,
-    label,
-    subtitle,
+    primaryText,
+    secondaryText,
+    primaryTextProps = {},
+    secondaryTextProps = {},
     variant = "grape",
     corners = CornersEnum.MEDIUM,
     disabled = false,
     className,
-    iconClassName,
-    labelClassName,
-    subtitleClassName,
-    labelWeight = FontWeightEnum.MEDIUM,
-    subtitleWeight = FontWeightEnum.MEDIUM,
+    iconContainerClassName,
     onPress,
     accessibilityLabel,
     ref,
@@ -53,23 +48,24 @@ export function ActionButton(props: ActionButtonProps) {
     className
   );
 
-  const textStyle = merge(textVariants({ variant }));
-
   // Define icon colors based on variant
   const iconColorMap = {
-    grape: "#FAFCFC", // chia-100
-    java: "#FAFCFC",
-    pear: "#FAFCFC",
-    tangerine: "#FAFCFC",
-    blackberry: "#FAFCFC",
-    chia: "#FAFCFC",
-    outline: "#393E3E", // chia-900
+    grape: "text-chia-100", // 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", // chia-900
   };
 
   // Clone icon element to pass color prop
   const iconWithColor = React.isValidElement(icon)
     ? React.cloneElement(icon as React.ReactElement<any>, {
-        color: iconColorMap[variant],
+        className: merge(
+          iconColorMap[variant],
+          (icon as React.ReactElement<any>).props?.className || ""
+        ),
       })
     : icon;
 
@@ -83,6 +79,30 @@ export function ActionButton(props: ActionButtonProps) {
     onPressOut?.(event);
   };
 
+  const textStyle = merge(textVariants({ variant }));
+
+  const mergedPrimaryTextProps = {
+    variant: "label_large" as const,
+    weight: FontWeightEnum.MEDIUM as const,
+    ...primaryTextProps,
+    className: merge(
+      textStyle,
+      disabled && "opacity-60",
+      primaryTextProps.className
+    ),
+  };
+
+  const mergedSecondaryTextProps = {
+    variant: "label_large" as const,
+    weight: FontWeightEnum.BOLD as const,
+    ...secondaryTextProps,
+    className: merge(
+      textStyle,
+      disabled && "opacity-60",
+      secondaryTextProps.className
+    ),
+  };
+
   return (
     <Pressable
       ref={ref}
@@ -92,7 +112,10 @@ export function ActionButton(props: ActionButtonProps) {
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel || `${label}${subtitle ? ` ${subtitle}` : ""}`}
+      accessibilityLabel={
+        accessibilityLabel ||
+        `${primaryText}${secondaryText ? ` ${secondaryText}` : ""}`
+      }
       accessibilityState={{
         disabled: disabled,
       }}
@@ -100,27 +123,21 @@ export function ActionButton(props: ActionButtonProps) {
       {...rest}
     >
       {/* Icon Container */}
-      <View className={merge("flex items-start shrink-0", disabled && "opacity-60", iconClassName)}>
+      <View
+        className={merge(
+          "flex items-start shrink-0",
+          disabled && "opacity-60",
+          iconContainerClassName
+        )}
+      >
         {iconWithColor}
       </View>
 
       {/* Label Container */}
       <View className="shrink-0">
-        <Typography
-          variant="label_large"
-          weight={labelWeight as any}
-          className={merge(textStyle, disabled && "opacity-60", labelClassName)}
-        >
-          {label}
-        </Typography>
-        {subtitle && (
-          <Typography
-            variant="label_large"
-            weight={subtitleWeight as any}
-            className={merge(textStyle, disabled && "opacity-60", subtitleClassName)}
-          >
-            {subtitle}
-          </Typography>
+        <Typography {...mergedPrimaryTextProps}>{primaryText}</Typography>
+        {secondaryText && (
+          <Typography {...mergedSecondaryTextProps}>{secondaryText}</Typography>
         )}
       </View>
     </Pressable>
@@ -128,6 +145,3 @@ export function ActionButton(props: ActionButtonProps) {
 }
 
 ActionButton.displayName = "ActionButton";
-
-export { ActionButtonCorners, ActionButtonProps, ActionButtonVariant } from "./types";
-

package/src/components/ActionButton/types.ts

@@ -1,6 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import { PressableProps, View } from "react-native";
-import { CornersEnum, FontWeightEnum } from "../../enums";
+import { CornersEnum } from "../../enums";
+import { TypographyProps } from "../Typography/types";
 import { menuCardVariants } from "./assets/class-variants";
 
 export type ActionButtonVariant =
@@ -25,13 +26,21 @@ export interface ActionButtonProps
    */
   icon: React.ReactNode;
   /**
-   * The main label text
+   * The primary text (main label)
    */
-  label: string;
+  primaryText: string;
   /**
-   * The subtitle text below the label
+   * The secondary text below the primary text
    */
-  subtitle?: string;
+  secondaryText?: string;
+  /**
+   * Props to pass to the primary text Typography component
+   */
+  primaryTextProps?: Omit<TypographyProps, "children">;
+  /**
+   * Props to pass to the secondary text Typography component
+   */
+  secondaryTextProps?: Omit<TypographyProps, "children">;
   /**
    * Visual style variant of the card
    */
@@ -51,25 +60,7 @@ export interface ActionButtonProps
   /**
    * Additional class names for the icon container
    */
-  iconClassName?: string;
-  /**
-   * Additional class names for the label text
-   */
-  labelClassName?: string;
-  /**
-   * Additional class names for the subtitle text
-   */
-  subtitleClassName?: string;
-  /**
-   * Font weight for the label text
-   * @default FontWeightEnum.MEDIUM
-   */
-  labelWeight?: FontWeightEnum;
-  /**
-   * Font weight for the subtitle text
-   * @default FontWeightEnum.MEDIUM
-   */
-  subtitleWeight?: FontWeightEnum;
+  iconContainerClassName?: string;
   /**
    * Callback when card is pressed
    */

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

@@ -38,7 +38,7 @@ const buttonVariants = cva(
         [SizeEnum.LARGE]: ["px-600 h-1000"],
       },
       corners: {
-        [CornersEnum.SMALL]: "rounded-500",
+        [CornersEnum.SMALL]: "rounded-600",
         [CornersEnum.MEDIUM]: "rounded-700",
       },
       fullWidth: {

package/src/components/InformationStatus/components/GradientAdd/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Svg, {
   Path,
   Defs,
@@ -11,64 +12,114 @@ import Svg, {
   G,
 } from "react-native-svg";
 import { GradientAddProps } from "./types";
+import { SizeEnum } from "../../../../enums";
+import { View } from "react-native";
 
-export function GradientAdd(props: GradientAddProps, ref?: React.Ref<Svg>) {
-  const { size = 24, color = "currentColor" } = props;
+export const GradientAdd = React.forwardRef((props: GradientAddProps, ref?: React.Ref<Svg>) => {
+  const { size = SizeEnum.MEDIUM, color = "currentColor", style, ...rest } = props;
+
+  const ICON_CONFIG = {
+    [SizeEnum.SMALL]: {
+      path: "M7.99999 2.66663C8.72036 2.66663 9.30434 3.26358 9.30434 3.99996V6.66663H12.029C12.7493 6.66663 13.3333 7.26358 13.3333 7.99996C13.3333 8.73634 12.7493 9.33329 12.029 9.33329H9.30434V12C9.30434 12.7363 8.72036 13.3333 7.99999 13.3333C7.27962 13.3333 6.69564 12.7363 6.69564 12V9.33329H3.971C3.25063 9.33329 2.66666 8.73634 2.66666 7.99996C2.66666 7.26358 3.25063 6.66663 3.971 6.66663H6.69564V3.99996C6.69564 3.26358 7.27962 2.66663 7.99999 2.66663Z",
+      viewBox: "0 0 16 16",
+      filter: {
+        id: "filter0_i_8151_1877",
+        x: "2.66666",
+        y: "2.66663",
+        width: "11.6667",
+        height: "11.6666",
+      },
+    },
+    [SizeEnum.MEDIUM]: {
+      path: "M12 4C13.0806 4 13.9565 4.89543 13.9565 6V10H18.0435C19.124 10 20 10.8954 20 12C20 13.1046 19.124 14 18.0435 14H13.9565V18C13.9565 19.1046 13.0806 20 12 20C10.9194 20 10.0435 19.1046 10.0435 18V14H5.95652C4.87596 14 4 13.1046 4 12C4 10.8954 4.87596 10 5.95652 10H10.0435V6C10.0435 4.89543 10.9194 4 12 4Z",
+      viewBox: "0 0 24 24",
+      filter: {
+        id: "filter0_i_8151_1873",
+        x: "4",
+        y: "4",
+        width: "17",
+        height: "17",
+      },
+    },
+    [SizeEnum.LARGE]: {
+      path: "M16 5.33337C17.4408 5.33337 18.6087 6.52728 18.6087 8.00004V13.3334H24.058C25.4987 13.3334 26.6667 14.5273 26.6667 16C26.6667 17.4728 25.4987 18.6667 24.058 18.6667H18.6087V24C18.6087 25.4728 17.4408 26.6667 16 26.6667C14.5593 26.6667 13.3913 25.4728 13.3913 24V18.6667H7.94204C6.5013 18.6667 5.33334 17.4728 5.33334 16C5.33334 14.5273 6.5013 13.3334 7.94204 13.3334H13.3913V8.00004C13.3913 6.52728 14.5593 5.33337 16 5.33337Z",
+      viewBox: "0 0 32 32",
+      filter: {
+        id: "filter0_i_8151_1881",
+        x: "5.33334",
+        y: "5.33337",
+        width: "22.3333",
+        height: "22.3334",
+      },
+    },
+  };
+
+  const SIZE_MAP = {
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
+    [SizeEnum.LARGE]: 32,
+  };
+
+  const config = ICON_CONFIG[size] || ICON_CONFIG[SizeEnum.MEDIUM];
+  const filterId = config.filter.id;
+  const iconSize = SIZE_MAP[size] || 24;
 
   return (
-    <Svg
-      viewBox="0 0 16 16"
-      fill="none"
-      width={size}
-      height={size}
-      color={color}
-      ref={ref}
-      {...props}
-    >
-      <G filter="url(#filter0_i_3359_12285)">
-        <Path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M7.99999 2.6665C8.72036 2.6665 9.30434 3.26346 9.30434 3.99984V6.6665H12.029C12.7493 6.6665 13.3333 7.26346 13.3333 7.99984C13.3333 8.73622 12.7493 9.33317 12.029 9.33317H9.30434V11.9998C9.30434 12.7362 8.72036 13.3332 7.99999 13.3332C7.27962 13.3332 6.69564 12.7362 6.69564 11.9998V9.33317H3.971C3.25063 9.33317 2.66666 8.73622 2.66666 7.99984C2.66666 7.26346 3.25063 6.6665 3.971 6.6665H6.69564V3.99984C6.69564 3.26346 7.27962 2.6665 7.99999 2.6665Z"
-          fill="currentColor"
-        />
-      </G>
-      <Defs>
-        <Filter
-          id="filter0_i_3359_12285"
-          x="2.66666"
-          y="2.6665"
-          width="11.6667"
-          height="11.6665"
-          filterUnits="userSpaceOnUse"
-        >
-          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
-          <FeBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <FeColorMatrix
-            in="SourceAlpha"
-            type="matrix"
-            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-            result="hardAlpha"
-          />
-          <FeOffset dx="1" dy="1" />
-          <FeGaussianBlur stdDeviation="1" />
-          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-          <FeColorMatrix
-            type="matrix"
-            values="0 0 0 0 0.447059 0 0 0 0 0.403922 0 0 0 0 0.894118 0 0 0 0.4 0"
-          />
-          <FeBlend
-            mode="normal"
-            in2="shape"
-            result="effect1_innerShadow_3359_12285"
+    <View style={[{ width: iconSize, height: iconSize }, style]}>
+      <Svg
+        width="100%"
+        height="100%"
+        viewBox={config.viewBox}
+        fill="none"
+        color={color}
+        ref={ref}
+        {...rest}
+      >
+        <G filter={`url(#${filterId})`}>
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={config.path}
+            fill="currentColor"
           />
-        </Filter>
-      </Defs>
-    </Svg>
+        </G>
+        <Defs>
+          <Filter
+            id={filterId}
+            x={config.filter.x}
+            y={config.filter.y}
+            width={config.filter.width}
+            height={config.filter.height}
+            filterUnits="userSpaceOnUse"
+          >
+            <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+            <FeBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <FeColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <FeOffset dx="1" dy="1" />
+            <FeGaussianBlur stdDeviation="1" />
+            <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <FeColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.447059 0 0 0 0 0.403922 0 0 0 0 0.894118 0 0 0 0.4 0"
+            />
+            <FeBlend
+              mode="normal"
+              in2="shape"
+              result={`effect1_innerShadow_${filterId}`}
+            />
+          </Filter>
+        </Defs>
+      </Svg>
+    </View>
   );
-}
+});

package/src/components/InformationStatus/components/GradientAdd/types.ts

@@ -1,6 +1,7 @@
 import { SvgProps } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export interface GradientAddProps extends SvgProps {
-  size?: number;
+export interface GradientAddProps extends Omit<SvgProps, "width" | "height"> {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
   color?: string;
 }