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

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

@@ -0,0 +1,56 @@
+import { cva } from "class-variance-authority";
+import { Platform } from "react-native";
+
+const getWeightVariants = () => {
+  if (Platform.OS === "web") {
+    return {
+      "200": "font-[200]",
+      "300": "font-[300]",
+      "400": "font-[400]",
+      "500": "font-[500]",
+      "600": "font-[600]",
+      "700": "font-[700]",
+      "800": "font-[800]",
+      "900": "font-[900]",
+    };
+  }
+
+  return {
+    "200": "font-nunito-extralight",
+    "300": "font-nunito-light",
+    "400": "font-nunito-regular",
+    "500": "font-nunito-medium",
+    "600": "font-nunito-semibold",
+    "700": "font-nunito-bold",
+    "800": "font-nunito-extrabold",
+    "900": "font-nunito-black",
+  };
+};
+
+export const typographyVariants = cva("font-nunito-regular", {
+  variants: {
+    variant: {
+      label_small: "text-[12px] leading-[16px]",
+      label_medium: "text-[14px] leading-[16px]",
+      label_large: "text-[16px] leading-[18px]",
+      body_small: "text-[12px] leading-[16px]",
+      body_medium: "text-[14px] leading-[20px]",
+      body_large: "text-[16px] leading-[24px]",
+      title_small: "text-[16px] leading-[20px]",
+      title_medium: "text-[18px] leading-[22px]",
+      title_large: "text-[22px] leading-[24px]",
+      headline_small: "text-[26px] leading-[32px]",
+      headline_medium: "text-[32px] leading-[36px]",
+      headline_large: "text-[36px] leading-[40px]",
+      display_small: "text-[40px] leading-[48px]",
+      display_medium: "text-[44px] leading-[56px]",
+      display_large: "text-[56px] leading-[64px]",
+    },
+    weight: getWeightVariants(),
+  },
+
+  defaultVariants: {
+    variant: "body_medium",
+    weight: "400",
+  },
+});

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

@@ -1,56 +1,36 @@
 import type { Meta, StoryObj } from "@storybook/react-native";
 import { Typography } from "./index";
-import type { TypographyVariant } from "@kivid/tailwind-preset";
 import { ScrollView, View } from "react-native";
+import type { VariantProps } from "class-variance-authority";
+import { typographyVariants } from "./assets/class-variants";
 
-const allOptions: TypographyVariant[] = [
-  "text-display_large_700",
-  "text-display_large_500",
-  "text-display_large_300",
-  "text-display_medium_700",
-  "text-display_medium_500",
-  "text-display_medium_300",
-  "text-display_small_700",
-  "text-display_small_500",
-  "text-display_small_300",
-  "text-headline_large_700",
-  "text-headline_large_500",
-  "text-headline_large_300",
-  "text-headline_medium_700",
-  "text-headline_medium_500",
-  "text-headline_medium_300",
-  "text-headline_small_700",
-  "text-headline_small_500",
-  "text-headline_small_300",
-  "text-title_large_700",
-  "text-title_large_500",
-  "text-title_large_300",
-  "text-title_medium_700",
-  "text-title_medium_500",
-  "text-title_medium_300",
-  "text-title_small_700",
-  "text-title_small_500",
-  "text-title_small_300",
-  "text-body_large_700",
-  "text-body_large_500",
-  "text-body_large_300",
-  "text-body_medium_700",
-  "text-body_medium_500",
-  "text-body_medium_300",
-  "text-body_small_700",
-  "text-body_small_500",
-  "text-body_small_300",
-  "text-label_large_700",
-  "text-label_large_500",
-  "text-label_large_300",
-  "text-label_medium_700",
-  "text-label_medium_500",
-  "text-label_medium_300",
-  "text-label_small_700",
-  "text-label_small_500",
-  "text-label_small_300",
+type TypographyVariant = NonNullable<
+  VariantProps<typeof typographyVariants>["variant"]
+>;
+type TypographyWeight = NonNullable<
+  VariantProps<typeof typographyVariants>["weight"]
+>;
+
+const variantOptions = [
+  "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",
 ];
 
+const weightOptions = ["400", "500", "600", "700"];
+
 const meta: Meta<typeof Typography> = {
   title: "Components/Typography",
   component: Typography,
@@ -65,9 +45,14 @@ const meta: Meta<typeof Typography> = {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: allOptions,
+      options: variantOptions,
       description: "Typography variant from the design system",
     },
+    weight: {
+      control: { type: "select" },
+      options: weightOptions,
+      description: "Font weight",
+    },
     children: {
       control: { type: "text" },
       description: "Content to display",
@@ -78,7 +63,8 @@ const meta: Meta<typeof Typography> = {
     },
   },
   args: {
-    variant: "text-body_medium_300",
+    variant: "body_medium",
+    weight: "400",
     children: "Sample text content",
   },
 };
@@ -88,86 +74,59 @@ type Story = StoryObj<typeof Typography>;
 
 export const Default: Story = {
   args: {
-    variant: "text-body_medium_300",
+    variant: "body_medium",
+    weight: "400",
     children: "This is the default body text style",
   },
 };
 
 export const Interactive: Story = {
   args: {
-    variant: "text-body_medium_300",
-    children: "Change the variant using the controls to see different styles",
+    variant: "body_medium",
+    weight: "500",
+    children:
+      "Change the variant and weight using the controls to see different styles",
   },
 };
 
-// Comprehensive showcase of all 45 typography variants
 export const AllVariants: Story = {
   render: () => {
-    const roles: Record<string, TypographyVariant[]> = {
-      display: [
-        "text-display_large_700",
-        "text-display_large_500",
-        "text-display_large_300",
-        "text-display_medium_700",
-        "text-display_medium_500",
-        "text-display_medium_300",
-        "text-display_small_700",
-        "text-display_small_500",
-        "text-display_small_300",
-      ],
-      headline: [
-        "text-headline_large_700",
-        "text-headline_large_500",
-        "text-headline_large_300",
-        "text-headline_medium_700",
-        "text-headline_medium_500",
-        "text-headline_medium_300",
-        "text-headline_small_700",
-        "text-headline_small_500",
-        "text-headline_small_300",
-      ],
-      title: [
-        "text-title_large_700",
-        "text-title_large_500",
-        "text-title_large_300",
-        "text-title_medium_700",
-        "text-title_medium_500",
-        "text-title_medium_300",
-        "text-title_small_700",
-        "text-title_small_500",
-        "text-title_small_300",
-      ],
-      body: [
-        "text-body_large_700",
-        "text-body_large_500",
-        "text-body_large_300",
-        "text-body_medium_700",
-        "text-body_medium_500",
-        "text-body_medium_300",
-        "text-body_small_700",
-        "text-body_small_500",
-        "text-body_small_300",
-      ],
-      label: [
-        "text-label_large_700",
-        "text-label_large_500",
-        "text-label_large_300",
-        "text-label_medium_700",
-        "text-label_medium_500",
-        "text-label_medium_300",
-        "text-label_small_700",
-        "text-label_small_500",
-        "text-label_small_300",
-      ],
+    const roles = {
+      display: ["display_large", "display_medium", "display_small"],
+      headline: ["headline_large", "headline_medium", "headline_small"],
+      title: ["title_large", "title_medium", "title_small"],
+      body: ["body_large", "body_medium", "body_small"],
+      label: ["label_large", "label_medium", "label_small"],
     };
 
+    const commonWeights = ["400", "500", "600", "700"];
+
+    function renderVariantDescription(variant: string, weight: string) {
+      const [type, size] = variant.split("_");
+      const sizeDescription = size.charAt(0).toUpperCase() + size.slice(1);
+      const typeDescription = type.charAt(0).toUpperCase() + type.slice(1);
+
+      const weightDescriptions = {
+        "400": "Regular",
+        "500": "Medium",
+        "600": "Semi Bold",
+        "700": "Bold",
+      };
+
+      const weightDescription =
+        weightDescriptions[weight as keyof typeof weightDescriptions];
+
+      return `${typeDescription} ${sizeDescription} - ${weightDescription}`;
+    }
+
     return (
       <ScrollView>
-        <View style={{ padding: 4, gap: 24 }}>
+        <View style={{ padding: 16, gap: 24 }}>
           {Object.entries(roles).map(([role, variants]) => (
-            <View key={role} style={{ gap: 12 }}>
+            <View key={role} style={{ gap: 16 }}>
               <Typography
-                variant="text-title_medium_700"
+                variant="title_medium"
+                weight="700"
                 style={{
                   textTransform: "capitalize",
                   borderBottomWidth: 1,
@@ -177,54 +136,53 @@ export const AllVariants: Story = {
               >
                 {role}
               </Typography>
-              <View style={{ gap: 8 }}>
-                {variants.map((variant, index) => {
-                  const [, size, weight] = variant.split("_");
-                  return (
-                    <View key={index}>
-                      <View
-                        key={variant}
-                        style={{
-                          flexDirection: "column",
-                          alignItems: "flex-start",
-                          gap: 12,
-                          padding: 12,
-                          backgroundColor: "#f9f9f9",
-                          borderRadius: 8,
-                        }}
-                      >
-                        <Typography
-                          variant="text-label_small_300"
+              <View style={{ gap: 12 }}>
+                {variants.map((variant) => (
+                  <View key={variant} style={{ gap: 8 }}>
+                    <Typography
+                      variant="body_small"
+                      weight="600"
+                      style={{ color: "#666" }}
+                    >
+                      {variant.replace("_", " ").toUpperCase()}
+                    </Typography>
+                    <View style={{ gap: 6 }}>
+                      {commonWeights.map((weight) => (
+                        <View
+                          key={`${variant}_${weight}`}
                           style={{
-                            fontFamily: "monospace",
-                            backgroundColor: "#e5e5e5",
-                            paddingHorizontal: 8,
-                            paddingVertical: 4,
-                            borderRadius: 4,
-                            minWidth: 140,
+                            flexDirection: "column",
+                            gap: 6,
+                            padding: 12,
+                            backgroundColor: "#f9f9f9",
+                            borderRadius: 8,
                           }}
                         >
-                          {variant}
-                        </Typography>
-                        <Typography variant={variant as TypographyVariant}>
-                          {size.charAt(0).toUpperCase() + size.slice(1)}{" "}
-                          {weight === "300"
-                            ? "Regular"
-                            : weight === "500"
-                              ? "Medium"
-                              : "Bold"}
-                        </Typography>
-                      </View>
-                      <View
-                        style={{
-                          height: 2,
-                          backgroundColor: "#e5e5e5",
-                          width: "100%",
-                        }}
-                      />
+                          <Typography
+                            variant="body_small"
+                            weight="400"
+                            style={{
+                              fontFamily: "monospace",
+                              backgroundColor: "#e5e5e5",
+                              paddingHorizontal: 6,
+                              paddingVertical: 3,
+                              borderRadius: 4,
+                              fontSize: 10,
+                            }}
+                          >
+                            variant="{variant}" weight="{weight}"
+                          </Typography>
+                          <Typography
+                            variant={variant as TypographyVariant}
+                            weight={weight as TypographyWeight}
+                          >
+                            {renderVariantDescription(variant, weight)}
+                          </Typography>
+                        </View>
+                      ))}
                     </View>
-                  );
-                })}
+                  </View>
+                ))}
               </View>
             </View>
           ))}
@@ -236,16 +194,16 @@ export const AllVariants: Story = {
     docs: {
       description: {
         story:
-          "Complete showcase of all 45 typography variants organized by role (display, headline, title, body, label), size (small, medium, large), and weight (300, 500, 700).",
+          "Complete showcase of all typography variants organized by role (display, headline, title, body, label) and size (small, medium, large), with common font weights.",
       },
     },
   },
 };
 
-// Custom styling example
 export const WithCustomStyling: Story = {
   args: {
-    variant: "text-headline_medium_500",
+    variant: "headline_medium",
+    weight: "500",
     className: "text-blue-600",
     children: "Custom styled headline with color override",
   },

package/src/components/Typography/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Text } from "react-native";
 import type { TypographyProps } from "./types";
 import { merge } from "@kivid/tailwind-preset";
+import { typographyVariants } from "./assets/class-variants";
 
 /**
  * Universal Typography component for React Native.
@@ -14,26 +15,29 @@ import { merge } from "@kivid/tailwind-preset";
  *
  * @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>
  */
 export const Typography: React.FC<TypographyProps> = ({
   variant,
   className,
-  style,
+  weight,
   children,
   ...props
 }) => {
-  const textClassName = merge(`font-nunito`, variant, className);
+  const textClassName = merge(
+    typographyVariants({ variant, weight }),
+    className
+  );
 
   return (
     <Text className={textClassName} {...props}>

package/src/components/Typography/types.ts

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

package/src/components/index.ts

@@ -1,11 +1,38 @@
 export * from "./Button";
+export type * from "./Button/types";
+
 export * from "./Chip";
+export * from "./Chip/types";
+export * from "./Chip/enums";
+
 export * from "./InformationStatus";
+export type * from "./InformationStatus/types";
+export * from "./InformationStatus/enums";
+
 export * from "./InputCheckbox";
+export type * from "./InputCheckbox/types";
+export * from "./InputCheckbox/enums";
+
 export * from "./InputOTP";
+export type * from "./InputOTP/types";
+export * from "./InputOTP/enums";
+
 export * from "./HighlightedText";
+export type * from "./HighlightedText/types";
+
 export * from "./LoadingDots";
+export * from "./LoadingDots/types";
+
 export * from "./Seal";
+export type * from "./Seal/types";
+export * from "./Seal/enums";
+
 export * from "./Title";
+export type * from "./Title/types";
+
 export * from "./Toggle";
+export type * from "./Toggle/types";
+export * from "./Toggle/enums";
+
 export * from "./Typography";
+export type * from "./Typography/types";

package/src/hooks/use-fonts.ts

@@ -8,9 +8,17 @@ import { useFonts as useExpoFonts } from "expo-font";
  */
 export const useBrandFonts = () => {
   const [fontsLoaded, fontError] = useExpoFonts({
+    "Nunito-Black": require("../../assets/fonts/Nunito-Black.ttf"),
+    "Nunito-BlackItalic": require("../../assets/fonts/Nunito-BlackItalic.ttf"),
     "Nunito-Bold": require("../../assets/fonts/Nunito-Bold.ttf"),
     "Nunito-BoldItalic": require("../../assets/fonts/Nunito-BoldItalic.ttf"),
+    "Nunito-ExtraBold": require("../../assets/fonts/Nunito-ExtraBold.ttf"),
+    "Nunito-ExtraBoldItalic": require("../../assets/fonts/Nunito-ExtraBoldItalic.ttf"),
+    "Nunito-ExtraLight": require("../../assets/fonts/Nunito-ExtraLight.ttf"),
+    "Nunito-ExtraLightItalic": require("../../assets/fonts/Nunito-ExtraLightItalic.ttf"),
     "Nunito-Italic": require("../../assets/fonts/Nunito-Italic.ttf"),
+    "Nunito-Light": require("../../assets/fonts/Nunito-Light.ttf"),
+    "Nunito-LightItalic": require("../../assets/fonts/Nunito-LightItalic.ttf"),
     "Nunito-Medium": require("../../assets/fonts/Nunito-Medium.ttf"),
     "Nunito-MediumItalic": require("../../assets/fonts/Nunito-MediumItalic.ttf"),
     "Nunito-Regular": require("../../assets/fonts/Nunito-Regular.ttf"),

package/dist/commonjs/components/InputOTP/enums/information-status.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InformationStatusEnum = void 0;
-let InformationStatusEnum = exports.InformationStatusEnum = /*#__PURE__*/function (InformationStatusEnum) {
-  InformationStatusEnum["DEFAULT"] = "default";
-  InformationStatusEnum["ERROR"] = "error";
-  InformationStatusEnum["SUCCESS"] = "success";
-  InformationStatusEnum["LOADING"] = "loading";
-  InformationStatusEnum["COOLDOWN"] = "cooldown";
-  return InformationStatusEnum;
-}({});
-//# sourceMappingURL=information-status.js.map

package/dist/commonjs/components/InputOTP/enums/information-status.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["InformationStatusEnum","exports"],"sourceRoot":"../../../../../src","sources":["components/InputOTP/enums/information-status.ts"],"mappings":";;;;;;IAAYA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,0BAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA","ignoreList":[]}

package/dist/module/components/InputOTP/enums/information-status.js

@@ -1,11 +0,0 @@
-"use strict";
-
-export let InformationStatusEnum = /*#__PURE__*/function (InformationStatusEnum) {
-  InformationStatusEnum["DEFAULT"] = "default";
-  InformationStatusEnum["ERROR"] = "error";
-  InformationStatusEnum["SUCCESS"] = "success";
-  InformationStatusEnum["LOADING"] = "loading";
-  InformationStatusEnum["COOLDOWN"] = "cooldown";
-  return InformationStatusEnum;
-}({});
-//# sourceMappingURL=information-status.js.map

package/dist/module/components/InputOTP/enums/information-status.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["InformationStatusEnum"],"sourceRoot":"../../../../../src","sources":["components/InputOTP/enums/information-status.ts"],"mappings":";;AAAA,WAAYA,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA","ignoreList":[]}

package/dist/typescript/components/InputOTP/enums/information-status.d.ts

@@ -1,7 +0,0 @@
-export declare enum InformationStatusEnum {
-    DEFAULT = "default",
-    ERROR = "error",
-    SUCCESS = "success",
-    LOADING = "loading",
-    COOLDOWN = "cooldown"
-}

package/src/components/InputOTP/enums/information-status.ts

@@ -1,7 +0,0 @@
-export enum InformationStatusEnum {
-  DEFAULT = "default",
-  ERROR = "error",
-  SUCCESS = "success",
-  LOADING = "loading",
-  COOLDOWN = "cooldown",
-}