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

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

@@ -3,6 +3,7 @@
 import React from "react";
 import { Text } from "react-native";
 import { merge } from "@kivid/tailwind-preset";
+import { typographyVariants } from "./assets/class-variants.js";
 
 /**
  * Universal Typography component for React Native.
@@ -15,15 +16,15 @@ 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>
  */
@@ -31,11 +32,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const Typography = ({
   variant,
   className,
-  style,
+  weight,
   children,
   ...props
 }) => {
-  const textClassName = merge(`font-nunito`, variant, className);
+  const textClassName = merge(typographyVariants({
+    variant,
+    weight
+  }), className);
   return /*#__PURE__*/_jsx(Text, {
     className: textClassName,
     ...props,

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

@@ -1 +1 @@
-{"version":3,"names":["React","Text","merge","jsx","_jsx","Typography","variant","className","style","children","props","textClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Typography/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,KAAK,QAAQ,wBAAwB;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,SAAAC,GAAA,IAAAC,IAAA;AAuBA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,OAAO;EACPC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGT,KAAK,CAAC,aAAa,EAAEI,OAAO,EAAEC,SAAS,CAAC;EAE9D,oBACEH,IAAA,CAACH,IAAI;IAACM,SAAS,EAAEI,aAAc;IAAA,GAAKD,KAAK;IAAAD,QAAA,EACtCA;EAAQ,CACL,CAAC;AAEX,CAAC;AAEDJ,UAAU,CAACO,WAAW,GAAG,YAAY;AACrC,eAAeP,UAAU","ignoreList":[]}
+{"version":3,"names":["React","Text","merge","typographyVariants","jsx","_jsx","Typography","variant","className","weight","children","props","textClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Typography/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,kBAAkB,QAAQ,4BAAyB;;AAE5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtBA,SAAAC,GAAA,IAAAC,IAAA;AAuBA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,OAAO;EACPC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGV,KAAK,CACzBC,kBAAkB,CAAC;IAAEI,OAAO;IAAEE;EAAO,CAAC,CAAC,EACvCD,SACF,CAAC;EAED,oBACEH,IAAA,CAACJ,IAAI;IAACO,SAAS,EAAEI,aAAc;IAAA,GAAKD,KAAK;IAAAD,QAAA,EACtCA;EAAQ,CACL,CAAC;AAEX,CAAC;AAEDJ,UAAU,CAACO,WAAW,GAAG,YAAY;AACrC,eAAeP,UAAU","ignoreList":[]}

package/dist/module/components/index.js

@@ -2,13 +2,21 @@
 
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
+export * from "./Chip/types.js";
+export * from "./Chip/enums/index.js";
 export * from "./InformationStatus/index.js";
+export * from "./InformationStatus/enums.js";
 export * from "./InputCheckbox/index.js";
+export * from "./InputCheckbox/enums/index.js";
 export * from "./InputOTP/index.js";
+export * from "./InputOTP/enums/index.js";
 export * from "./HighlightedText/index.js";
 export * from "./LoadingDots/index.js";
+export * from "./LoadingDots/types.js";
 export * from "./Seal/index.js";
+export * from "./Seal/enums/index.js";
 export * from "./Title/index.js";
 export * from "./Toggle/index.js";
+export * from "./Toggle/enums/index.js";
 export * from "./Typography/index.js";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AACxB,cAAc,iBAAQ;AACtB,cAAc,8BAAqB;AACnC,cAAc,0BAAiB;AAC/B,cAAc,qBAAY;AAC1B,cAAc,4BAAmB;AACjC,cAAc,wBAAe;AAC7B,cAAc,iBAAQ;AACtB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,uBAAc","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,mBAAU;AAGxB,cAAc,iBAAQ;AACtB,cAAc,iBAAc;AAC5B,cAAc,uBAAc;AAE5B,cAAc,8BAAqB;AAEnC,cAAc,8BAA2B;AAEzC,cAAc,0BAAiB;AAE/B,cAAc,gCAAuB;AAErC,cAAc,qBAAY;AAE1B,cAAc,2BAAkB;AAEhC,cAAc,4BAAmB;AAGjC,cAAc,wBAAe;AAC7B,cAAc,wBAAqB;AAEnC,cAAc,iBAAQ;AAEtB,cAAc,uBAAc;AAE5B,cAAc,kBAAS;AAGvB,cAAc,mBAAU;AAExB,cAAc,yBAAgB;AAE9B,cAAc,uBAAc","ignoreList":[]}

package/dist/module/hooks/use-fonts.js

@@ -10,9 +10,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/module/hooks/use-fonts.js.map

@@ -1 +1 @@
-{"version":3,"names":["useFonts","useExpoFonts","useBrandFonts","fontsLoaded","fontError","require"],"sourceRoot":"../../../src","sources":["hooks/use-fonts.ts"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,YAAY,QAAQ,WAAW;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,WAAW,EAAEC,SAAS,CAAC,GAAGH,YAAY,CAAC;IAC5C,aAAa,EAAEI,OAAO,CAAC,oCAAoC,CAAC;IAC5D,mBAAmB,EAAEA,OAAO,CAAC,0CAA0C,CAAC;IACxE,eAAe,EAAEA,OAAO,CAAC,sCAAsC,CAAC;IAChE,eAAe,EAAEA,OAAO,CAAC,sCAAsC,CAAC;IAChE,qBAAqB,EAAEA,OAAO,CAAC,4CAA4C,CAAC;IAC5E,gBAAgB,EAAEA,OAAO,CAAC,uCAAuC,CAAC;IAClE,iBAAiB,EAAEA,OAAO,CAAC,wCAAwC,CAAC;IACpE,uBAAuB,EAAEA,OAAO,CAAC,8CAA8C;EACjF,CAAC,CAAC;EAEF,OAAO;IAAEF,WAAW;IAAEC;EAAU,CAAC;AACnC,CAAC","ignoreList":[]}
+{"version":3,"names":["useFonts","useExpoFonts","useBrandFonts","fontsLoaded","fontError","require"],"sourceRoot":"../../../src","sources":["hooks/use-fonts.ts"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,YAAY,QAAQ,WAAW;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,MAAM,CAACC,WAAW,EAAEC,SAAS,CAAC,GAAGH,YAAY,CAAC;IAC5C,cAAc,EAAEI,OAAO,CAAC,qCAAqC,CAAC;IAC9D,oBAAoB,EAAEA,OAAO,CAAC,2CAA2C,CAAC;IAC1E,aAAa,EAAEA,OAAO,CAAC,oCAAoC,CAAC;IAC5D,mBAAmB,EAAEA,OAAO,CAAC,0CAA0C,CAAC;IACxE,kBAAkB,EAAEA,OAAO,CAAC,yCAAyC,CAAC;IACtE,wBAAwB,EAAEA,OAAO,CAAC,+CAA+C,CAAC;IAClF,mBAAmB,EAAEA,OAAO,CAAC,0CAA0C,CAAC;IACxE,yBAAyB,EAAEA,OAAO,CAAC,gDAAgD,CAAC;IACpF,eAAe,EAAEA,OAAO,CAAC,sCAAsC,CAAC;IAChE,cAAc,EAAEA,OAAO,CAAC,qCAAqC,CAAC;IAC9D,oBAAoB,EAAEA,OAAO,CAAC,2CAA2C,CAAC;IAC1E,eAAe,EAAEA,OAAO,CAAC,sCAAsC,CAAC;IAChE,qBAAqB,EAAEA,OAAO,CAAC,4CAA4C,CAAC;IAC5E,gBAAgB,EAAEA,OAAO,CAAC,uCAAuC,CAAC;IAClE,iBAAiB,EAAEA,OAAO,CAAC,wCAAwC,CAAC;IACpE,uBAAuB,EAAEA,OAAO,CAAC,8CAA8C;EACjF,CAAC,CAAC;EAEF,OAAO;IAAEF,WAAW;IAAEC;EAAU,CAAC;AACnC,CAAC","ignoreList":[]}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.4",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -18,7 +18,6 @@
   "sideEffects": false,
   "peerDependencies": {
     "@kivid/icons": "workspace:*",
-    "@kivid/tailwind-preset": "workspace:*",
     "@lottiefiles/dotlottie-react": "^0.15.1",
     "class-variance-authority": "^0.7.1",
     "lottie-react-native": "^7.2.4",

package/dist/typescript/components/Button/assets/class-variants.d.ts

@@ -7,7 +7,6 @@ declare const buttonVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const textVariants: (props?: ({
     variant?: "grape" | "java" | "pear" | "tangerine" | "blackberry" | "chia" | "outline" | "glass" | "ghost" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
     selected?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const selectedVariants: (props?: ({

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

@@ -1,6 +1,6 @@
-import { ButtonProps } from "./types";
+import type { ButtonCorners, ButtonProps, ButtonSize, ButtonVariant } from "./types";
 export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var displayName: string;
 }
-export default Button;
+export { ButtonProps, ButtonVariant, ButtonSize, ButtonCorners };

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

@@ -1,2 +1,3 @@
-import type { ChipProps } from "./types";
+import type { ChipProps, ChipSize, ChipVariant } from "./types";
 export declare function Chip(props: ChipProps): import("react/jsx-runtime").JSX.Element;
+export { ChipProps, ChipSize, ChipVariant };

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

@@ -4,3 +4,4 @@ export declare namespace HighlightedText {
     var displayName: string;
 }
 export default HighlightedText;
+export { HighlightedTextProps };

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

@@ -1,9 +1,15 @@
-import { Text, TextProps } from "react-native";
+import { TextProps } from "react-native";
+import type { TypographyProps } from "../Typography/types";
 export interface HighlightedTextProps extends TextProps {
     text: string;
     highlightText?: string;
-    highlightTextClassName?: string;
     className?: string;
-    ref?: React.RefObject<Text | null>;
     reverse?: boolean;
+    variant?: TypographyProps["variant"];
+    weight?: TypographyProps["weight"];
+    highlightedTextProps?: {
+        className?: string;
+        variant?: TypographyProps["variant"];
+        weight?: TypographyProps["weight"];
+    };
 }

package/dist/typescript/components/InputOTP/enums/index.d.ts

@@ -1 +1,7 @@
-export * from "./information-status";
+export declare enum InformationStatusEnum {
+    DEFAULT = "default",
+    ERROR = "error",
+    SUCCESS = "success",
+    LOADING = "loading",
+    COOLDOWN = "cooldown"
+}

package/dist/typescript/components/Toggle/enums/variant.d.ts

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

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

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

package/dist/typescript/components/Typography/assets/class-variants.d.ts

@@ -0,0 +1,4 @@
+export declare const typographyVariants: (props?: ({
+    variant?: "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" | null | undefined;
+    weight?: "400" | "200" | "300" | "500" | "600" | "700" | "800" | "900" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -11,15 +11,15 @@ import type { TypographyProps } from "./types";
  *
  * @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>
  */

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

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

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

@@ -1,11 +1,28 @@
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kivid/native-components",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "A React Native component library for the Butterfly Design System.",
   "repository": {
     "type": "git",
@@ -15,8 +15,7 @@
   "main": "index.js",
   "files": [
     "dist",
-    "src",
-    "assets"
+    "src"
   ],
   "exports": {
     ".": {
@@ -50,21 +49,22 @@
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.4.1",
     "@react-native-community/slider": "4.5.6",
-    "expo": "~53.0.9",
     "expo-constants": "~17.1.6",
     "expo-font": "~13.3.2",
     "expo-splash-screen": "^0.30.10",
     "expo-status-bar": "~2.2.3",
+    "expo": "~53.0.9",
     "nativewind": "^4.1.23",
-    "react": "19.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.5",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.5",
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "^15.11.2",
     "react-native-web": "^0.20.0",
-    "@kivid/icons": "1.0.0-alpha.2"
+    "react-native": "0.79.5",
+    "react": "19.0.0",
+    "@kivid/tailwind-preset": "1.0.0-alpha.4",
+    "@kivid/icons": "1.0.0-alpha.4"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -95,8 +95,7 @@
     "storybook": "^9",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
-    "@kivid/tailwind-preset": "1.0.0-alpha.2"
+    "vite": "^6.3.5"
   },
   "peerDependencies": {
     "@lottiefiles/dotlottie-react": "^0.15.1",
@@ -104,8 +103,7 @@
     "lottie-react-native": "^7.2.4",
     "react": "19.0.0",
     "react-native": "0.79.5",
-    "@kivid/tailwind-preset": "1.0.0-alpha.2",
-    "@kivid/icons": "1.0.0-alpha.2"
+    "@kivid/icons": "1.0.0-alpha.4"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -121,8 +119,8 @@
     "storybook:web": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "storybook-generate": "sb-rn-get-stories",
-    "storybook": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start",
-    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --ios",
-    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo start --android"
+    "storybook": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo run",
+    "storybook:ios": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo run:ios",
+    "storybook:android": "cross-env EXPO_PUBLIC_STORYBOOK_ENABLED='true' expo  run:android"
   }
 }

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

@@ -69,11 +69,6 @@ const textVariants = cva("", {
       glass: "text-chia-900",
       ghost: "text-chia-900",
     },
-    size: {
-      small: "text-label_small_700",
-      medium: "text-label_medium_700",
-      large: "text-label_large_700",
-    },
     selected: {
       true: "",
     },

package/src/components/Button/index.tsx

@@ -1,9 +1,15 @@
 import React from "react";
-import { Text, Pressable, Animated, GestureResponderEvent } from "react-native";
+import { Pressable, Animated, GestureResponderEvent } from "react-native";
 import { merge } from "@kivid/tailwind-preset";
 import { LoadingDots } from "../LoadingDots";
 import { LoadingDotsVariant } from "../LoadingDots/types";
-import { ButtonProps, ButtonVariant } from "./types";
+import type {
+  ButtonCorners,
+  ButtonProps,
+  ButtonSize,
+  ButtonVariant,
+} from "./types";
+import { Typography } from "../Typography";
 import {
   textVariants,
   buttonVariants,
@@ -43,11 +49,18 @@ export function Button(props: ButtonProps) {
     ghost: "grape",
   };
 
+  const typographyVariantMap = {
+    small: "label_small" as const,
+    medium: "label_medium" as const,
+    large: "label_large" as const,
+  };
+
+  const typographyVariant = typographyVariantMap[size ?? "medium"];
+
   function renderContent() {
     const textStyle = merge(
       textVariants({
         variant,
-        size,
         selected: selected && (variant === "outline" || variant === "ghost"),
       })
     );
@@ -63,9 +76,14 @@ export function Button(props: ButtonProps) {
     }
 
     return (
-      <Text className={textStyle} numberOfLines={1}>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={textStyle}
+        numberOfLines={1}
+      >
         {children}
-      </Text>
+      </Typography>
     );
   }
 
@@ -134,4 +152,4 @@ export function Button(props: ButtonProps) {
 
 Button.displayName = "Button";
 
-export default Button;
+export { ButtonProps, ButtonVariant, ButtonSize, ButtonCorners };

package/src/components/Chip/index.tsx

@@ -1,9 +1,10 @@
 import { merge } from "@kivid/tailwind-preset";
-import type { ChipProps } from "./types";
+import type { ChipProps, ChipSize, ChipVariant } from "./types";
 import { chipVariants } from "./assets/class-variants";
 import { Seal } from "../Seal";
-import { Text, View } from "react-native";
+import { View } from "react-native";
 import { SealVariantEnum } from "../Seal/enums";
+import { Typography } from "../Typography";
 
 export function Chip(props: ChipProps) {
   const {
@@ -14,11 +15,10 @@ export function Chip(props: ChipProps) {
     variant = "outline",
   } = props;
 
-  const labelStyles = merge(
-    "mx-auto",
-    size === "medium" ? "text-label_small_700" : "text-label_medium_700",
-    variant === "filled" ? "text-chia-200" : "text-chia-900"
-  );
+  const typographyVariant = size === "medium" ? "label_small" : "label_medium";
+
+  const textColorClass =
+    variant === "filled" ? "text-chia-200" : "text-chia-900";
 
   return (
     <View
@@ -29,7 +29,15 @@ export function Chip(props: ChipProps) {
         inverted={variant === "filled"}
         size="small"
       />
-      <Text className={labelStyles}>{label}</Text>
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className={merge("mx-auto", textColorClass)}
+      >
+        {label}
+      </Typography>
     </View>
   );
 }
+
+export { ChipProps, ChipSize, ChipVariant };