@kivid/native-components 1.0.0-alpha.1

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

@@ -0,0 +1,619 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Title } from "./index";
+import { GradientDocLab200BasicPink } from "@butterfly/icons/native";
+
+import { View } from "react-native";
+import { HighlightedText } from "../HighlightedText";
+import { IconVariants } from "./components/icon/types";
+
+const meta = {
+  title: "Components/Title",
+  component: Title,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Title component with multiple variants, sizes, and states matching the Figma design system.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    children: "Default Title",
+    head: <Title.Marker />,
+  },
+} satisfies Meta<typeof Title>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithMarker: Story = {
+  render: () => (
+    <View className="flex items-center">
+      <Title head={<Title.Marker />}>
+        <HighlightedText text="Title" highlightText="with marker" />
+      </Title>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Title with Marker with default value.",
+      },
+    },
+  },
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <View className="flex items-center">
+      <Title head={<Title.Icon variants={IconVariants.WARNING} />}>
+        <HighlightedText text="Warning" highlightText="icon" />
+      </Title>
+    </View>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Title with Icon with default value.",
+      },
+    },
+  },
+};
+
+export const WithCustomIcon: Story = {
+  render: () => {
+    return (
+      <View className="flex items-center">
+        <Title
+          head={
+            <Title.Icon
+              size="medium"
+              variants={IconVariants.CUSTOM}
+              customIcon={<GradientDocLab200BasicPink size={48} />}
+            />
+          }
+        >
+          <HighlightedText
+            text="Custom"
+            highlightText="icon"
+            className="text-headline_large_300 "
+            highlightTextClassName="text-headline_large_700"
+          />
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title with Icon receives a config to render a custom icon.",
+      },
+    },
+  },
+};
+
+export const Large2X: Story = {
+  render: () => {
+    function renderContent() {
+      return (
+        <>
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-headline_large_300 "
+            highlightTextClassName="text-headline_large_500"
+          />
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-headline_large_300 "
+            highlightTextClassName="text-headline_large_500"
+          />
+          <HighlightedText
+            text="Curabitur blandit tempus porttitor."
+            className="mt-400"
+          />
+          <HighlightedText
+            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
+            className="mt-400"
+          />
+        </>
+      );
+    }
+
+    return (
+      <View className="flex items-center gap-700">
+        <Title
+          variant="2xlarge"
+          head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
+        >
+          {renderContent()}
+        </Title>
+
+        <Title
+          variant="2xlarge"
+          head={<Title.Marker size="medium" color="chia" />}
+        >
+          {renderContent()}
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title 2x large with Headline, subtitle and multiples texts",
+      },
+    },
+  },
+};
+
+export const LargeX: Story = {
+  render: () => {
+    function renderContent() {
+      return (
+        <>
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-headline_medium_300"
+            highlightTextClassName="text-headline_medium_500"
+          />
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-headline_medium_300"
+            highlightTextClassName="text-headline_medium_500"
+          />
+          <HighlightedText
+            text="Curabitur blandit tempus porttitor."
+            className="mt-400 text-body_medium_500"
+          />
+          <HighlightedText
+            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
+            className="mt-400 text-body_medium_500"
+          />
+        </>
+      );
+    }
+
+    return (
+      <View className="flex items-center gap-700">
+        <Title
+          variant="xlarge"
+          head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
+        >
+          {renderContent()}
+        </Title>
+
+        <Title
+          variant="xlarge"
+          head={<Title.Marker size="medium" color="chia" />}
+        >
+          {renderContent()}
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title x large with Headline, subtitle and multiples texts",
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  render: () => {
+    function renderContent() {
+      return (
+        <>
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-headline_small_300"
+            highlightTextClassName="text-headline_small_500"
+          />
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-headline_small_300"
+            highlightTextClassName="text-headline_small_500"
+          />
+          <HighlightedText
+            text="Curabitur blandit tempus porttitor."
+            className="mt-400 text-body_medium_500"
+          />
+          <HighlightedText
+            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
+            className="mt-400 text-body_medium_500"
+          />
+        </>
+      );
+    }
+
+    return (
+      <View className="flex items-center gap-700">
+        <Title
+          variant="large"
+          head={<Title.Icon variants={IconVariants.SUCCESS} />}
+        >
+          {renderContent()}
+        </Title>
+
+        <Title variant="large" head={<Title.Marker color="chia" />}>
+          {renderContent()}
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title large with Headline, subtitle and multiples texts",
+      },
+    },
+  },
+};
+
+export const Medium: Story = {
+  render: () => {
+    function renderContent() {
+      return (
+        <>
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-title_large_300"
+            highlightTextClassName="text-title_large_500"
+          />
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-title_large_300"
+            highlightTextClassName="text-title_large_500"
+          />
+          <HighlightedText
+            text="Curabitur blandit tempus porttitor."
+            className="mt-400 text-body_medium_500"
+          />
+          <HighlightedText
+            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
+            className="mt-400 text-body_medium_500"
+          />
+        </>
+      );
+    }
+
+    return (
+      <View className="flex items-center gap-700">
+        <Title
+          variant="medium"
+          head={<Title.Icon variants={IconVariants.SUCCESS} />}
+        >
+          {renderContent()}
+        </Title>
+
+        <Title variant="medium" head={<Title.Marker color="chia" />}>
+          {renderContent()}
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title medium with Headline, subtitle and multiples texts",
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  render: () => {
+    function renderContent() {
+      return (
+        <>
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-title_medium_300"
+            highlightTextClassName="text-title_medium_700"
+          />
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-title_medium_300"
+            highlightTextClassName="text-title_medium_700"
+          />
+          <HighlightedText
+            text="Curabitur blandit tempus porttitor."
+            className="mt-400 text-body_small_500"
+          />
+          <HighlightedText
+            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
+            className="mt-400 text-body_small_500"
+          />
+        </>
+      );
+    }
+
+    return (
+      <View className="flex items-center gap-700">
+        <Title
+          variant="small"
+          head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
+        >
+          {renderContent()}
+        </Title>
+
+        <Title variant="small" head={<Title.Marker color="chia" />}>
+          {renderContent()}
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title small with Headline, subtitle and multiples texts",
+      },
+    },
+  },
+};
+
+export const XSmall: Story = {
+  render: () => {
+    function renderContent() {
+      return (
+        <>
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-title_small_300"
+            highlightTextClassName="text-title_small_700"
+          />
+          <HighlightedText
+            text="Sub"
+            highlightText="highlight"
+            className="text-title_small_300"
+            highlightTextClassName="text-title_small_700"
+          />
+          <HighlightedText
+            text="Curabitur blandit tempus porttitor."
+            className="mt-400 text-body_small_500"
+          />
+          <HighlightedText
+            text="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis."
+            className="mt-400 text-body_small_500"
+          />
+        </>
+      );
+    }
+
+    return (
+      <View className="flex items-center gap-700">
+        <Title
+          variant="xsmall"
+          head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
+        >
+          {renderContent()}
+        </Title>
+
+        <Title variant="xsmall" head={<Title.Marker color="chia" />}>
+          {renderContent()}
+        </Title>
+      </View>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Title x small with Headline, subtitle and multiples texts",
+      },
+    },
+  },
+};
+
+export const MarkerSizesAndVariants: Story = {
+  render: () => (
+    <>
+      <View className="flex flex-column gap-400 mb-700">
+        <HighlightedText
+          text="Small"
+          className="text-label_small_700 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"
+            />
+          </Title>
+          <Title head={<Title.Marker color="chia" size="small" />}>
+            <HighlightedText text="Chia" className="text-label_small_700" />
+          </Title>
+          <Title head={<Title.Marker color="java" size="small" />}>
+            <HighlightedText text="Java" className="text-label_small_700" />
+          </Title>
+          <Title head={<Title.Marker color="grape" size="small" />}>
+            <HighlightedText text="Grape" className="text-label_small_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" />
+          </Title>
+          <Title head={<Title.Marker color="tangerine" size="small" />}>
+            <HighlightedText
+              text="Tangerine"
+              className="text-label_small_700"
+            />
+          </Title>
+          <Title head={<Title.Marker color="pear" size="small" />}>
+            <HighlightedText text="Pear" className="text-label_small_700" />
+          </Title>
+          <Title head={<Title.Marker color="ghost" size="small" />}>
+            <HighlightedText text="Ghost" className="text-label_small_700" />
+          </Title>
+        </View>
+      </View>
+
+      <View className="flex flex-column gap-400">
+        <HighlightedText
+          text="Medium"
+          className="text-label_medium_700 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"
+            />
+          </Title>
+          <Title head={<Title.Marker color="chia" />}>
+            <HighlightedText text="Chia" className="text-label_medium_700" />
+          </Title>
+          <Title head={<Title.Marker color="java" />}>
+            <HighlightedText text="Java" className="text-label_medium_700" />
+          </Title>
+          <Title head={<Title.Marker color="grape" />}>
+            <HighlightedText text="Grape" className="text-label_medium_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" />
+          </Title>
+          <Title head={<Title.Marker color="tangerine" />}>
+            <HighlightedText
+              text="Tangerine"
+              className="text-label_medium_700"
+            />
+          </Title>
+          <Title head={<Title.Marker color="pear" />}>
+            <HighlightedText text="Pear" className="text-label_medium_700" />
+          </Title>
+          <Title head={<Title.Marker color="ghost" />}>
+            <HighlightedText text="Ghost" className="text-label_medium_700" />
+          </Title>
+        </View>
+      </View>
+    </>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete showcase of the Title.Marker design system matching the Figma specifications with all variants, sizes, and states.",
+      },
+    },
+  },
+};
+
+export const IconSizesAndVariants: Story = {
+  render: () => (
+    <>
+      <View className="flex flex-column gap-300 mb-500">
+        <HighlightedText
+          text="Small"
+          className="text-label_small_700 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" />
+          </Title>
+          <Title
+            head={<Title.Icon size="small" variants={IconVariants.WARNING} />}
+          >
+            <HighlightedText text="warning" className="text-label_small_700" />
+          </Title>
+          <Title
+            head={<Title.Icon size="small" variants={IconVariants.ERROR} />}
+          >
+            <HighlightedText text="error" className="text-label_small_700" />
+          </Title>
+          <Title
+            head={<Title.Icon size="small" variants={IconVariants.SUCCESS} />}
+          >
+            <HighlightedText text="success" className="text-label_small_700" />
+          </Title>
+        </View>
+      </View>
+
+      <View className="flex flex-column gap-300 mb-500">
+        <HighlightedText
+          text="Medium"
+          className="text-label_medium_700 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" />
+          </Title>
+          <Title
+            head={<Title.Icon size="medium" variants={IconVariants.WARNING} />}
+          >
+            <HighlightedText text="warning" className="text-label_medium_700" />
+          </Title>
+          <Title
+            head={<Title.Icon size="medium" variants={IconVariants.ERROR} />}
+          >
+            <HighlightedText text="error" className="text-label_medium_700" />
+          </Title>
+          <Title
+            head={<Title.Icon size="medium" variants={IconVariants.SUCCESS} />}
+          >
+            <HighlightedText text="success" className="text-label_medium_700" />
+          </Title>
+        </View>
+      </View>
+
+      <View className="flex flex-column gap-300 mb-500">
+        <HighlightedText
+          text="Large"
+          className="text-label_large_700 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" />
+          </Title>
+          <Title
+            head={<Title.Icon size="large" variants={IconVariants.WARNING} />}
+          >
+            <HighlightedText text="warning" className="text-label_large_700" />
+          </Title>
+          <Title
+            head={<Title.Icon size="large" variants={IconVariants.ERROR} />}
+          >
+            <HighlightedText text="error" className="text-label_large_700" />
+          </Title>
+          <Title
+            head={<Title.Icon size="large" variants={IconVariants.SUCCESS} />}
+          >
+            <HighlightedText text="success" className="text-label_large_700" />
+          </Title>
+        </View>
+      </View>
+    </>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Complete showcase of the Title.Marker design system matching the Figma specifications with all variants, sizes, and states.",
+      },
+    },
+  },
+};

package/src/components/Title/index.tsx

@@ -0,0 +1,36 @@
+import { View } from "react-native";
+import { Icon, Marker } from "./components";
+import type { TitleProps } from "./types";
+import { merge } from "@butterfly/tailwind-preset";
+import { cva } from "class-variance-authority";
+
+function Title(props: TitleProps) {
+  const { children, className, variant = "medium", head } = props;
+
+  const variantClass = cva("", {
+    variants: {
+      variant: {
+        "2xlarge": "pb-600",
+        xlarge: "pb-500",
+        large: "pb-600",
+        medium: "pb-600",
+        small: "pb-400",
+        xsmall: "pb-400",
+      },
+    },
+  })({ variant });
+
+  const mergedClassName = merge("flex flex-col max-w-[344px]", className);
+
+  return (
+    <View className={mergedClassName}>
+      <View className={`${variantClass}`}>{head}</View>
+      {children}
+    </View>
+  );
+}
+
+Title.Icon = Icon;
+Title.Marker = Marker;
+
+export { Title };

package/src/components/Title/types.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export interface TitleProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  head: React.ReactNode;
+}

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

@@ -0,0 +1,40 @@
+import { cva } from "class-variance-authority";
+
+const toggleVariants = cva(
+  [
+    "absolute top-100 left-100 right-100 bottom-100 transition-all duration-300 rounded-500",
+  ],
+  {
+    variants: {
+      variant: {
+        grape: ["bg-grape-500"],
+        java: ["bg-java-500"],
+        pear: ["bg-pear-500"],
+        tangerine: ["bg-tangerine-500"],
+        chia: ["bg-chia-800"],
+      },
+      checked: {
+        true: "",
+        false: "bg-chia-400",
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: "cursor-pointer",
+      },
+    },
+    compoundVariants: [
+      {
+        checked: false,
+        variant: "chia",
+        class: "bg-chia-400",
+      },
+    ],
+    defaultVariants: {
+      variant: "java",
+      checked: false,
+      disabled: false,
+    },
+  }
+);
+
+export { toggleVariants };

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

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