@kivid/native-components 1.0.0-alpha.22 → 1.0.0-alpha.23

package/dist/module/components/LoadingDots/index.js

@@ -14,7 +14,8 @@ export const LoadingDots = ({
   const variantsMap = {
     grape: require("./assets/loading-button-grape.json"),
     light: require("./assets/loading-button-light.json"),
-    dark: require("./assets/loading-button-dark.json")
+    dark: require("./assets/loading-button-dark.json"),
+    gray: require("./assets/loading-button-gray.json")
   };
   const purposefulOverwrittenSrc = variantsMap[variant];
   const narrowedStyle = lottieViewStyle || {};

package/dist/module/components/LoadingDots/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["LottieView","View","jsx","_jsx","LoadingDots","variant","className","style","lottieViewStyle","ref","rest","variantsMap","grape","require","light","dark","purposefulOverwrittenSrc","narrowedStyle","children","loop","autoPlay","width","height","source"],"sourceRoot":"../../../../src","sources":["components/LoadingDots/index.tsx"],"mappings":";;AAAA,OAAOA,UAAU,MAAM,qBAAqB;AAE5C,SAASC,IAAI,QAAmB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,OAAO,GAAG,OAAO;EACjBC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,WAA+C,GAAG;IACtDC,KAAK,EAAEC,OAAO,CAAC,oCAAoC,CAAC;IACpDC,KAAK,EAAED,OAAO,CAAC,oCAAoC,CAAC;IACpDE,IAAI,EAAEF,OAAO,CAAC,mCAAmC;EACnD,CAAC;EAED,MAAMG,wBAAwB,GAAGL,WAAW,CAACN,OAAO,CAAC;EAErD,MAAMY,aAAa,GAAIT,eAAe,IAAkB,CAAC,CAAC;EAE1D,oBACEL,IAAA,CAACF,IAAI;IAACK,SAAS,EAAEA,SAAU;IAACC,KAAK,EAAEA,KAAM;IAACE,GAAG,EAAEA,GAAI;IAAAS,QAAA,eACjDf,IAAA,CAACH,UAAU;MACTmB,IAAI,EAAE,IAAK;MACXC,QAAQ,EAAE,IAAK;MAAA,GACXV,IAAI;MACRH,KAAK,EAAE;QAAEc,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAE,GAAGL;MAAc,CAAE;MACnDM,MAAM,EAAEP;IAAyB,CAClC;EAAC,CACE,CAAC;AAEX,CAAC;AAED,eAAeZ,WAAW","ignoreList":[]}
+{"version":3,"names":["LottieView","View","jsx","_jsx","LoadingDots","variant","className","style","lottieViewStyle","ref","rest","variantsMap","grape","require","light","dark","gray","purposefulOverwrittenSrc","narrowedStyle","children","loop","autoPlay","width","height","source"],"sourceRoot":"../../../../src","sources":["components/LoadingDots/index.tsx"],"mappings":";;AAAA,OAAOA,UAAU,MAAM,qBAAqB;AAE5C,SAASC,IAAI,QAAmB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE/C,OAAO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC,OAAO,GAAG,OAAO;EACjBC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC,GAAG;EACH,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,WAA+C,GAAG;IACtDC,KAAK,EAAEC,OAAO,CAAC,oCAAoC,CAAC;IACpDC,KAAK,EAAED,OAAO,CAAC,oCAAoC,CAAC;IACpDE,IAAI,EAAEF,OAAO,CAAC,mCAAmC,CAAC;IAClDG,IAAI,EAAEH,OAAO,CAAC,mCAAmC;EACnD,CAAC;EAED,MAAMI,wBAAwB,GAAGN,WAAW,CAACN,OAAO,CAAC;EAErD,MAAMa,aAAa,GAAIV,eAAe,IAAkB,CAAC,CAAC;EAE1D,oBACEL,IAAA,CAACF,IAAI;IAACK,SAAS,EAAEA,SAAU;IAACC,KAAK,EAAEA,KAAM;IAACE,GAAG,EAAEA,GAAI;IAAAU,QAAA,eACjDhB,IAAA,CAACH,UAAU;MACToB,IAAI,EAAE,IAAK;MACXC,QAAQ,EAAE,IAAK;MAAA,GACXX,IAAI;MACRH,KAAK,EAAE;QAAEe,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE,EAAE;QAAE,GAAGL;MAAc,CAAE;MACnDM,MAAM,EAAEP;IAAyB,CAClC;EAAC,CACE,CAAC;AAEX,CAAC;AAED,eAAeb,WAAW","ignoreList":[]}

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

@@ -38,6 +38,10 @@ export interface ActionButtonProps extends VariantProps<typeof menuCardVariants>
      * Whether the card is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the card is selected (only affects outline variant)
+     */
+    selected?: boolean;
     /**
      * Additional class names for the main container
      */

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

@@ -1,2 +1,4 @@
-import type { DatePickerProps } from './types';
-export declare function DatePicker(props: DatePickerProps): import("react").JSX.Element;
+import React from "react";
+import type { DatePickerProps } from "./types";
+declare const NativeWindDatePicker: React.ComponentType<DatePickerProps>;
+export { NativeWindDatePicker as DatePicker };

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

@@ -1,6 +1,6 @@
 import type { LottieViewProps } from "lottie-react-native";
 import { StyleProp, View, ViewStyle } from "react-native";
-export type LoadingDotsVariant = "grape" | "light" | "dark";
+export type LoadingDotsVariant = "grape" | "light" | "dark" | "gray";
 export interface LoadingDotsProps extends Omit<LottieViewProps, "source"> {
     variant?: LoadingDotsVariant;
     lottieViewStyle?: StyleProp<ViewStyle>;

package/package.json

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

package/src/components/ActionButton/index.tsx

@@ -16,6 +16,7 @@ export function ActionButton(props: ActionButtonProps) {
     variant = "grape",
     corners = CornersEnum.MEDIUM,
     disabled = false,
+    selected = false,
     className,
     iconContainerClassName,
     onPress,
@@ -45,6 +46,7 @@ export function ActionButton(props: ActionButtonProps) {
       corners,
     }),
     isPressed && !disabled && pressedColorMap[variant],
+    selected && variant === "outline" && "border-grape-300 bg-grape-100",
     className
   );
 

package/src/components/ActionButton/types.ts

@@ -53,6 +53,10 @@ export interface ActionButtonProps
    * Whether the card is disabled
    */
   disabled?: boolean;
+  /**
+   * Whether the card is selected (only affects outline variant)
+   */
+  selected?: boolean;
   /**
    * Additional class names for the main container
    */

package/src/components/DatePicker/index.tsx

@@ -1,24 +1,59 @@
-import { useState, useMemo, useCallback } from 'react';
-import { View } from 'react-native';
-import { Calendar, DateData, LocaleConfig } from 'react-native-calendars';
-import { format } from 'date-fns';
-import { ptBR } from 'date-fns/locale';
-import type { DatePickerProps } from './types';
-
-import { defaultTheme } from './assets/theme';
-import Typography from '../Typography';
-import { ArrowLeftStroke, ArrowRightStroke } from '@kivid/icons/native';
-
-LocaleConfig.locales['pt-br'] = {
-  monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
-  monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
-  dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
-  dayNamesShort: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
-  today: 'Hoje'
+import React, { useState, useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { Calendar, DateData, LocaleConfig } from "react-native-calendars";
+import { format } from "date-fns";
+import { ptBR } from "date-fns/locale";
+import type { DatePickerProps } from "./types";
+
+import { defaultTheme } from "./assets/theme";
+import Typography from "../Typography";
+import { ArrowLeftStroke, ArrowRightStroke } from "@kivid/icons/native";
+import { cssInterop } from "nativewind";
+
+LocaleConfig.locales["pt-br"] = {
+  monthNames: [
+    "Janeiro",
+    "Fevereiro",
+    "Março",
+    "Abril",
+    "Maio",
+    "Junho",
+    "Julho",
+    "Agosto",
+    "Setembro",
+    "Outubro",
+    "Novembro",
+    "Dezembro",
+  ],
+  monthNamesShort: [
+    "Jan",
+    "Fev",
+    "Mar",
+    "Abr",
+    "Mai",
+    "Jun",
+    "Jul",
+    "Ago",
+    "Set",
+    "Out",
+    "Nov",
+    "Dez",
+  ],
+  dayNames: [
+    "Domingo",
+    "Segunda",
+    "Terça",
+    "Quarta",
+    "Quinta",
+    "Sexta",
+    "Sábado",
+  ],
+  dayNamesShort: ["D", "S", "T", "Q", "Q", "S", "S"],
+  today: "Hoje",
 };
-LocaleConfig.defaultLocale = 'pt-br';
+LocaleConfig.defaultLocale = "pt-br";
 
-export function DatePicker(props: DatePickerProps) {
+function DatePicker(props: DatePickerProps) {
   const {
     selectedDates,
     onSelectedDatesChange,
@@ -32,9 +67,8 @@ export function DatePicker(props: DatePickerProps) {
     ...rest
   } = props;
 
-
   const [currentMonth, setCurrentMonth] = useState<string>(
-    initialDate || format(new Date(), 'yyyy-MM-dd'),
+    initialDate || format(new Date(), "yyyy-MM-dd")
   );
 
   const onDayPress = useCallback(
@@ -55,7 +89,7 @@ export function DatePicker(props: DatePickerProps) {
         return;
       }
 
-      if (selectionType === 'multi-dot') {
+      if (selectionType === "multi-dot") {
         onSelectedDatesChange((prev) => {
           const isSelected = prev.includes(dateString);
           const newDates = isSelected
@@ -66,17 +100,25 @@ export function DatePicker(props: DatePickerProps) {
         return;
       }
     },
-    [onSelectedDatesChange, selectionType, externalMarkedDates, unavailableDates],
+    [
+      onSelectedDatesChange,
+      selectionType,
+      externalMarkedDates,
+      unavailableDates,
+    ]
   );
 
   const markedDates = useMemo(() => {
     const filteredExternalMarkedDates = externalMarkedDates
-      ? Object.keys(externalMarkedDates).reduce((acc, date) => {
-        if (!unavailableDates?.includes(date)) {
-          acc[date] = externalMarkedDates[date];
-        }
-        return acc;
-      }, {} as typeof externalMarkedDates)
+      ? Object.keys(externalMarkedDates).reduce(
+          (acc, date) => {
+            if (!unavailableDates?.includes(date)) {
+              acc[date] = externalMarkedDates[date];
+            }
+            return acc;
+          },
+          {} as typeof externalMarkedDates
+        )
       : {};
 
     const marked = { ...filteredExternalMarkedDates };
@@ -86,8 +128,8 @@ export function DatePicker(props: DatePickerProps) {
         marked[date] = {
           disabled: true,
           disableTouchEvent: true,
-          textColor: '#D1D5DB',
-          dotColor: '#D1D5DB',
+          textColor: "#D1D5DB",
+          dotColor: "#D1D5DB",
         };
       });
     }
@@ -98,8 +140,8 @@ export function DatePicker(props: DatePickerProps) {
           ...marked[date],
           disableTouchEvent: true,
           selected: true,
-          selectedColor: '#EAE0FF',
-          selectedTextColor: '#1F2937',
+          selectedColor: "#EAE0FF",
+          selectedTextColor: "#1F2937",
         };
       });
     }
@@ -110,21 +152,21 @@ export function DatePicker(props: DatePickerProps) {
         marked[firstDate] = {
           ...marked[firstDate],
           selected: true,
-          selectedColor: '#EAE0FF',
-          selectedTextColor: '#1F2937',
+          selectedColor: "#EAE0FF",
+          selectedTextColor: "#1F2937",
         };
       }
       return marked;
     }
 
-    if (selectionType === 'multi-dot') {
+    if (selectionType === "multi-dot") {
       selectedDates.forEach((date) => {
         if (!unavailableDates?.includes(date)) {
           marked[date] = {
             ...marked[date],
             selected: true,
-            selectedColor: '#EAE0FF',
-            selectedTextColor: '#1F2937',
+            selectedColor: "#EAE0FF",
+            selectedTextColor: "#1F2937",
           };
         }
       });
@@ -139,26 +181,20 @@ export function DatePicker(props: DatePickerProps) {
     ...customTheme,
   };
 
-  const handlePressArrowLeft = useCallback(
-    (subtractMonth: () => void) => {
-      subtractMonth();
-    },
-    [],
-  );
+  const handlePressArrowLeft = useCallback((subtractMonth: () => void) => {
+    subtractMonth();
+  }, []);
 
-  const handlePressArrowRight = useCallback(
-    (addMonth: () => void) => {
-      addMonth();
-    },
-    [],
-  );
+  const handlePressArrowRight = useCallback((addMonth: () => void) => {
+    addMonth();
+  }, []);
 
   const handleMonthChange = useCallback((date: DateData) => {
     setCurrentMonth(date.dateString);
   }, []);
 
   return (
-    <View >
+    <View>
       <Calendar
         current={currentMonth}
         onDayPress={onDayPress}
@@ -174,9 +210,8 @@ export function DatePicker(props: DatePickerProps) {
         markingType={selectionType}
         firstDay={0}
         renderArrow={(direction) => (
-          <View
-            className='items-center border p-400 mb-600 rounded-500 border-chia-400 bg-chia-100'>
-            {direction === 'left' ? (
+          <View className="items-center border p-400 mb-600 rounded-500 border-chia-400 bg-chia-100">
+            {direction === "left" ? (
               <ArrowLeftStroke size={24} className="text-gray-900" />
             ) : (
               <ArrowRightStroke size={24} className="text-gray-900" />
@@ -184,7 +219,7 @@ export function DatePicker(props: DatePickerProps) {
           </View>
         )}
         renderHeader={(date) => {
-          const formattedDate = format(new Date(date), 'MMMM yy', {
+          const formattedDate = format(new Date(date), "MMMM yy", {
             locale: ptBR,
           });
           const capitalizedDate =
@@ -192,7 +227,9 @@ export function DatePicker(props: DatePickerProps) {
 
           return (
             <View className="items-center translate-y-[-8px]">
-              <Typography variant='label_large' weight='700'>{capitalizedDate}</Typography>
+              <Typography variant="label_large" weight="700">
+                {capitalizedDate}
+              </Typography>
             </View>
           );
         }}
@@ -201,3 +238,13 @@ export function DatePicker(props: DatePickerProps) {
     </View>
   );
 }
+
+const NativeWindDatePicker = cssInterop?.(DatePicker, {
+  className: {
+    target: "style",
+  },
+}) as React.ComponentType<DatePickerProps>;
+
+NativeWindDatePicker.displayName = "DatePicker";
+
+export { NativeWindDatePicker as DatePicker };