@kivid/native-components 1.0.0-alpha.1 → 1.0.0-alpha.4

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native";
 import { Title } from "./index";
-import { GradientDocLab200BasicPink } from "@butterfly/icons/native";
+import { GradientDocLab200BasicPink } from "@kivid/icons/native";
 
 import { View } from "react-native";
 import { HighlightedText } from "../HighlightedText";
@@ -78,8 +78,12 @@ export const WithCustomIcon: Story = {
           <HighlightedText
             text="Custom"
             highlightText="icon"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_700"
+            variant="headline_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_large",
+              weight: "700",
+            }}
           />
         </Title>
       </View>
@@ -102,14 +106,22 @@ export const Large2X: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_500"
+            variant="headline_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_large_300 "
-            highlightTextClassName="text-headline_large_500"
+            variant="headline_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
@@ -144,7 +156,7 @@ export const Large2X: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title 2x large with Headline, subtitle and multiples texts",
+        story: "Title 2x large with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -158,22 +170,34 @@ export const LargeX: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_medium_300"
-            highlightTextClassName="text-headline_medium_500"
+            variant="headline_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_medium_300"
-            highlightTextClassName="text-headline_medium_500"
+            variant="headline_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -200,7 +224,7 @@ export const LargeX: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title x large with Headline, subtitle and multiples texts",
+        story: "Title x large with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -214,22 +238,34 @@ export const Large: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_small_300"
-            highlightTextClassName="text-headline_small_500"
+            variant="headline_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-headline_small_300"
-            highlightTextClassName="text-headline_small_500"
+            variant="headline_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "headline_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -253,7 +289,7 @@ export const Large: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title large with Headline, subtitle and multiples texts",
+        story: "Title large with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -267,22 +303,34 @@ export const Medium: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_large_300"
-            highlightTextClassName="text-title_large_500"
+            variant="title_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_large_300"
-            highlightTextClassName="text-title_large_500"
+            variant="title_large"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_large",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_medium_500"
+            variant="body_medium"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -306,7 +354,7 @@ export const Medium: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title medium with Headline, subtitle and multiples texts",
+        story: "Title medium with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -320,22 +368,34 @@ export const Small: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_medium_300"
-            highlightTextClassName="text-title_medium_700"
+            variant="title_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_medium_300"
-            highlightTextClassName="text-title_medium_700"
+            variant="title_medium"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_medium",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -359,7 +419,7 @@ export const Small: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title small with Headline, subtitle and multiples texts",
+        story: "Title small with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -373,22 +433,34 @@ export const XSmall: Story = {
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_small_300"
-            highlightTextClassName="text-title_small_700"
+            variant="title_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Sub"
             highlightText="highlight"
-            className="text-title_small_300"
-            highlightTextClassName="text-title_small_700"
+            variant="title_small"
+            weight="400"
+            highlightedTextProps={{
+              variant: "title_small",
+              weight: "700",
+            }}
           />
           <HighlightedText
             text="Curabitur blandit tempus porttitor."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
           <HighlightedText
             text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
-            className="mt-400 text-body_small_500"
+            variant="body_small"
+            weight="500"
+            className="mt-400"
           />
         </>
       );
@@ -412,7 +484,7 @@ export const XSmall: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Title x small with Headline, subtitle and multiples texts",
+        story: "Title x small with Heading, subtitle and multiples texts",
       },
     },
   },
@@ -424,42 +496,46 @@ export const MarkerSizesAndVariants: Story = {
       <View className="flex flex-column gap-400 mb-700">
         <HighlightedText
           text="Small"
-          className="text-label_small_700 text-center"
+          variant="label_small"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="blackberry" size="small" />}>
             <HighlightedText
               text="Blackberry"
-              className="text-label_small_700"
+              variant="label_small"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="chia" size="small" />}>
-            <HighlightedText text="Chia" className="text-label_small_700" />
+            <HighlightedText text="Chia" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="java" size="small" />}>
-            <HighlightedText text="Java" className="text-label_small_700" />
+            <HighlightedText text="Java" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="grape" size="small" />}>
-            <HighlightedText text="Grape" className="text-label_small_700" />
+            <HighlightedText text="Grape" variant="label_small" weight="700" />
           </Title>
         </View>
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="mango" size="small" />}>
-            <HighlightedText text="Mango" className="text-label_small_700" />
+            <HighlightedText text="Mango" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="tangerine" size="small" />}>
             <HighlightedText
               text="Tangerine"
-              className="text-label_small_700"
+              variant="label_small"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="pear" size="small" />}>
-            <HighlightedText text="Pear" className="text-label_small_700" />
+            <HighlightedText text="Pear" variant="label_small" weight="700" />
           </Title>
           <Title head={<Title.Marker color="ghost" size="small" />}>
-            <HighlightedText text="Ghost" className="text-label_small_700" />
+            <HighlightedText text="Ghost" variant="label_small" weight="700" />
           </Title>
         </View>
       </View>
@@ -467,42 +543,46 @@ export const MarkerSizesAndVariants: Story = {
       <View className="flex flex-column gap-400">
         <HighlightedText
           text="Medium"
-          className="text-label_medium_700 text-center"
+          variant="label_medium"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="blackberry" />}>
             <HighlightedText
               text="Blackberry"
-              className="text-label_medium_700"
+              variant="label_medium"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="chia" />}>
-            <HighlightedText text="Chia" className="text-label_medium_700" />
+            <HighlightedText text="Chia" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="java" />}>
-            <HighlightedText text="Java" className="text-label_medium_700" />
+            <HighlightedText text="Java" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="grape" />}>
-            <HighlightedText text="Grape" className="text-label_medium_700" />
+            <HighlightedText text="Grape" variant="label_medium" weight="700" />
           </Title>
         </View>
 
         <View className="flex flex-row gap-300 justify-center">
           <Title head={<Title.Marker color="mango" />}>
-            <HighlightedText text="Mango" className="text-label_medium_700" />
+            <HighlightedText text="Mango" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="tangerine" />}>
             <HighlightedText
               text="Tangerine"
-              className="text-label_medium_700"
+              variant="label_medium"
+              weight="700"
             />
           </Title>
           <Title head={<Title.Marker color="pear" />}>
-            <HighlightedText text="Pear" className="text-label_medium_700" />
+            <HighlightedText text="Pear" variant="label_medium" weight="700" />
           </Title>
           <Title head={<Title.Marker color="ghost" />}>
-            <HighlightedText text="Ghost" className="text-label_medium_700" />
+            <HighlightedText text="Ghost" variant="label_medium" weight="700" />
           </Title>
         </View>
       </View>
@@ -524,27 +604,37 @@ export const IconSizesAndVariants: Story = {
       <View className="flex flex-column gap-300 mb-500">
         <HighlightedText
           text="Small"
-          className="text-label_small_700 text-center"
+          variant="label_small"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300">
           <Title head={<Title.Icon size="small" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" className="text-label_small_700" />
+            <HighlightedText text="add" variant="label_small" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="small" variants={IconVariants.WARNING} />}
           >
-            <HighlightedText text="warning" className="text-label_small_700" />
+            <HighlightedText
+              text="warning"
+              variant="label_small"
+              weight="700"
+            />
           </Title>
           <Title
             head={<Title.Icon size="small" variants={IconVariants.ERROR} />}
           >
-            <HighlightedText text="error" className="text-label_small_700" />
+            <HighlightedText text="error" variant="label_small" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
           >
-            <HighlightedText text="success" className="text-label_small_700" />
+            <HighlightedText
+              text="success"
+              variant="label_small"
+              weight="700"
+            />
           </Title>
         </View>
       </View>
@@ -552,29 +642,39 @@ export const IconSizesAndVariants: Story = {
       <View className="flex flex-column gap-300 mb-500">
         <HighlightedText
           text="Medium"
-          className="text-label_medium_700 text-center"
+          variant="label_medium"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300">
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.ADD} />}
           >
-            <HighlightedText text="add" className="text-label_medium_700" />
+            <HighlightedText text="add" variant="label_medium" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.WARNING} />}
           >
-            <HighlightedText text="warning" className="text-label_medium_700" />
+            <HighlightedText
+              text="warning"
+              variant="label_medium"
+              weight="700"
+            />
           </Title>
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.ERROR} />}
           >
-            <HighlightedText text="error" className="text-label_medium_700" />
+            <HighlightedText text="error" variant="label_medium" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="medium" variants={IconVariants.SUCCESS} />}
           >
-            <HighlightedText text="success" className="text-label_medium_700" />
+            <HighlightedText
+              text="success"
+              variant="label_medium"
+              weight="700"
+            />
           </Title>
         </View>
       </View>
@@ -582,27 +682,37 @@ export const IconSizesAndVariants: Story = {
       <View className="flex flex-column gap-300 mb-500">
         <HighlightedText
           text="Large"
-          className="text-label_large_700 text-center"
+          variant="label_large"
+          weight="700"
+          className="text-center"
         />
 
         <View className="flex flex-row gap-300">
           <Title head={<Title.Icon size="large" variants={IconVariants.ADD} />}>
-            <HighlightedText text="add" className="text-label_large_700" />
+            <HighlightedText text="add" variant="label_large" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="large" variants={IconVariants.WARNING} />}
           >
-            <HighlightedText text="warning" className="text-label_large_700" />
+            <HighlightedText
+              text="warning"
+              variant="label_large"
+              weight="700"
+            />
           </Title>
           <Title
             head={<Title.Icon size="large" variants={IconVariants.ERROR} />}
           >
-            <HighlightedText text="error" className="text-label_large_700" />
+            <HighlightedText text="error" variant="label_large" weight="700" />
           </Title>
           <Title
             head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
           >
-            <HighlightedText text="success" className="text-label_large_700" />
+            <HighlightedText
+              text="success"
+              variant="label_large"
+              weight="700"
+            />
           </Title>
         </View>
       </View>

package/src/components/Title/index.tsx

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 import { Icon, Marker } from "./components";
 import type { TitleProps } from "./types";
-import { merge } from "@butterfly/tailwind-preset";
+import { merge } from "@kivid/tailwind-preset";
 import { cva } from "class-variance-authority";
 
 function Title(props: TitleProps) {

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

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

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

@@ -1,35 +1,35 @@
-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';
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Toggle } from "./index";
+import type { ToggleProps } from "./types";
+import { useState } from "react";
+import { ToggleVariantEnum } from "./enums";
 
 const meta: Meta<ToggleProps> = {
-  title: 'Components/Toggle',
+  title: "Components/Toggle",
   component: Toggle,
   parameters: {
-    layout: 'centered',
+    layout: "centered",
   },
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   argTypes: {
     checked: {
-      control: 'boolean',
-      description: 'Whether the toggle is checked',
+      control: "boolean",
+      description: "Whether the toggle is checked",
     },
     disabled: {
-      control: 'boolean',
-      description: 'Whether the toggle is disabled',
+      control: "boolean",
+      description: "Whether the toggle is disabled",
     },
     onChange: {
-      action: 'changed',
-      description: 'Callback fired when the toggle state changes',
+      action: "changed",
+      description: "Callback fired when the toggle state changes",
     },
     variant: {
-      control: 'select',
-      options: Object.values(VariantEnum),
-      description: 'The variant of the toggle',
+      control: "select",
+      options: Object.values(ToggleVariantEnum),
+      description: "The variant of the toggle",
       table: {
-        type: { summary: Object.values(VariantEnum).join(" | ") },
+        type: { summary: Object.values(ToggleVariantEnum).join(" | ") },
       },
     },
   },
@@ -85,4 +85,4 @@ export const Interactive: Story = {
       />
     );
   },
-};
+};

package/src/components/Toggle/index.tsx

@@ -1,14 +1,14 @@
 import type { ToggleProps } from "./types";
 import { Pressable, View } from "react-native";
-import { VariantEnum } from "./enums";
-import { merge } from "@butterfly/tailwind-preset";
+import { ToggleVariantEnum } from "./enums";
+import { merge } from "@kivid/tailwind-preset";
 import { toggleVariants } from "./assets/class-variants";
 
 export function Toggle(props: ToggleProps) {
   const {
     checked,
     disabled = false,
-    variant = VariantEnum.JAVA,
+    variant = ToggleVariantEnum.JAVA,
     onChange,
   } = props;
 

package/src/components/Toggle/types.ts

@@ -1,8 +1,8 @@
-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;
 }