@a2v2ai/uikit 0.0.23 → 0.0.25

package/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 type InputSize = "mini" | "small" | "regular" | "large";
 type InputRoundness = "default" | "round";
 type InputVariant = "default" | "error";
@@ -11,6 +12,9 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     size?: InputSize;
     roundness?: InputRoundness;
     variant?: InputVariant;
+    label?: string;
+    labelVariant?: TextVariant;
+    labelColor?: TextColor;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     leftAddon?: React.ReactNode;

package/Input/Input.js

@@ -39,6 +39,7 @@ const React = __importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
 const Typography_1 = require("../Typography/Typography");
+const Label_1 = require("../Label/Label");
 const inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white border font-normal font-sans transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50", {
     variants: {
         size: {
@@ -63,15 +64,15 @@ const inputVariants = (0, class_variance_authority_1.cva)("flex w-full bg-white
     },
 });
 exports.inputVariants = inputVariants;
-const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, leftIcon, rightIcon, leftAddon, rightAddon, rightElement, error, ...props }, ref) => {
+const Input = React.forwardRef(({ className, type = "text", size, roundness, variant, label, labelVariant = "body2", labelColor = "main-800", leftIcon, rightIcon, leftAddon, rightAddon, rightElement, error, id, ...props }, ref) => {
     const hasAddons = leftIcon || rightIcon || leftAddon || rightAddon || rightElement;
     const computedVariant = error ? "error" : variant;
     if (hasAddons) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors w-full", "focus-within:ring-[3px]", computedVariant === "error"
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, variant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("flex items-center gap-2 bg-white border font-sans transition-colors w-full", "focus-within:ring-[3px]", computedVariant === "error"
                         ? "border-error-500 focus-within:border-error-500 focus-within:ring-error-200"
-                        : "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50", size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md", size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md", size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg", size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg", !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg", !rightElement && "pr-3", roundness === "round" && "!rounded-full", props.disabled && "opacity-50 cursor-not-allowed bg-grey-50", className), children: [leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: leftIcon })), leftAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: leftAddon })), (0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)("flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400", "disabled:cursor-not-allowed"), ref: ref, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: rightAddon })), rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: rightIcon })), rightElement && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: rightElement }))] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
+                        : "border-grey-300 focus-within:border-grey-300 focus-within:ring-grey-300/50", size === "mini" && "h-6 pl-3 pr-0.5 text-xs rounded-md", size === "small" && "h-8 pl-3 pr-0.5 text-sm rounded-md", size === "regular" && "h-9 pl-3 pr-0.5 text-sm rounded-lg", size === "large" && "h-10 pl-3 pr-0.5 text-base rounded-lg", !size && "h-9 pl-3 pr-0.5 text-sm rounded-lg", !rightElement && "pr-3", roundness === "round" && "!rounded-full", props.disabled && "opacity-50 cursor-not-allowed bg-grey-50", className), children: [leftIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: leftIcon })), leftAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: leftAddon })), (0, jsx_runtime_1.jsx)("input", { type: type, id: id, className: (0, utils_1.cn)("flex-1 min-w-0 bg-transparent border-0 outline-none placeholder:text-grey-400", "disabled:cursor-not-allowed"), ref: ref, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500", children: rightAddon })), rightIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-grey-500 [&_svg]:size-4", children: rightIcon })), rightElement && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: rightElement }))] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsx)("input", { type: type, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant: computedVariant, className })), ref: ref, ...props }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, variant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsx)("input", { type: type, id: id, className: (0, utils_1.cn)(inputVariants({ size, roundness, variant: computedVariant, className })), ref: ref, ...props }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
 });
 exports.Input = Input;
 Input.displayName = "Input";

package/Label/Label.d.ts

@@ -1,12 +1,13 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-type LabelVariant = "default" | "muted" | "error";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 declare const labelVariants: (props?: ({
-    variant?: "default" | "error" | "muted" | null | undefined;
+    textVariant?: TextVariant | null | undefined;
+    color?: TextColor | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
-    variant?: LabelVariant;
+    variant?: TextVariant;
+    color?: TextColor;
 }
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 export { Label, labelVariants };
-export type { LabelVariant };

package/Label/Label.js

@@ -39,19 +39,18 @@ const React = __importStar(require("react"));
 const LabelPrimitive = __importStar(require("@radix-ui/react-label"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
-const labelVariants = (0, class_variance_authority_1.cva)("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", {
+const typography_types_1 = require("../lib/typography-types");
+const labelVariants = (0, class_variance_authority_1.cva)("font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", {
     variants: {
-        variant: {
-            default: "text-main-950",
-            muted: "text-grey-500",
-            error: "text-error-600",
-        },
+        textVariant: typography_types_1.textVariantClasses,
+        color: typography_types_1.textColorClasses,
     },
     defaultVariants: {
-        variant: "default",
+        textVariant: "body2",
+        color: "main-950",
     },
 });
 exports.labelVariants = labelVariants;
-const Label = React.forwardRef(({ className, variant, ...props }, ref) => ((0, jsx_runtime_1.jsx)(LabelPrimitive.Root, { ref: ref, className: (0, utils_1.cn)(labelVariants({ variant }), className), ...props })));
+const Label = React.forwardRef(({ className, variant, color, ...props }, ref) => ((0, jsx_runtime_1.jsx)(LabelPrimitive.Root, { ref: ref, className: (0, utils_1.cn)(labelVariants({ textVariant: variant, color }), className), ...props })));
 exports.Label = Label;
 Label.displayName = LabelPrimitive.Root.displayName;

package/Select/Select.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 type SelectTriggerSize = "small" | "regular" | "large";
 type SelectTriggerVariant = "default" | "error";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
@@ -12,6 +13,9 @@ declare const selectTriggerVariants: (props?: ({
 export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
     size?: SelectTriggerSize;
     variant?: SelectTriggerVariant;
+    label?: string;
+    labelVariant?: TextVariant;
+    labelColor?: TextColor;
     error?: string;
 }
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/Select/Select.js

@@ -41,6 +41,7 @@ const lucide_react_1 = require("lucide-react");
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
 const Typography_1 = require("../Typography/Typography");
+const Label_1 = require("../Label/Label");
 const Select = SelectPrimitive.Root;
 exports.Select = Select;
 const SelectGroup = SelectPrimitive.Group;
@@ -65,9 +66,9 @@ const selectTriggerVariants = (0, class_variance_authority_1.cva)("flex w-full i
     },
 });
 exports.selectTriggerVariants = selectTriggerVariants;
-const SelectTrigger = React.forwardRef(({ className, size, variant, error, children, ...props }, ref) => {
+const SelectTrigger = React.forwardRef(({ className, size, variant, label, labelVariant = "body2", labelColor = "main-800", error, children, id, ...props }, ref) => {
     const computedVariant = error ? "error" : variant;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col w-full", children: [(0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)(selectTriggerVariants({ size, variant: computedVariant }), className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4 opacity-50" }) })] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, variant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, id: id, className: (0, utils_1.cn)(selectTriggerVariants({ size, variant: computedVariant }), className), ...props, children: [children, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "size-4 opacity-50" }) })] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
 });
 exports.SelectTrigger = SelectTrigger;
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

package/Textarea/Textarea.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 type TextareaVariant = "default" | "error";
 type TextareaResize = "none" | "vertical" | "horizontal" | "both";
 declare const textareaVariants: (props?: ({
@@ -8,6 +9,9 @@ declare const textareaVariants: (props?: ({
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     variant?: TextareaVariant;
     resize?: TextareaResize;
+    label?: string;
+    labelVariant?: TextVariant;
+    labelColor?: TextColor;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea, textareaVariants };

package/Textarea/Textarea.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
+const Label_1 = require("../Label/Label");
 const textareaVariants = (0, class_variance_authority_1.cva)("flex min-h-[80px] w-full rounded-lg border bg-white px-3 py-2 text-sm font-normal font-sans transition-colors placeholder:text-grey-400 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-grey-50", {
     variants: {
         variant: {
@@ -57,8 +58,8 @@ const textareaVariants = (0, class_variance_authority_1.cva)("flex min-h-[80px]
     },
 });
 exports.textareaVariants = textareaVariants;
-const Textarea = React.forwardRef(({ className, variant, resize, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)("textarea", { className: (0, utils_1.cn)(textareaVariants({ variant, resize }), className), ref: ref, ...props }));
+const Textarea = React.forwardRef(({ className, variant, resize, label, labelVariant = "body2", labelColor = "main-800", id, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 w-full", children: [label && ((0, jsx_runtime_1.jsx)(Label_1.Label, { htmlFor: id, variant: labelVariant, color: labelColor, children: label })), (0, jsx_runtime_1.jsx)("textarea", { id: id, className: (0, utils_1.cn)(textareaVariants({ variant, resize }), className), ref: ref, ...props })] }));
 });
 exports.Textarea = Textarea;
 Textarea.displayName = "Textarea";

package/Typography/Typography.d.ts

@@ -1,11 +1,12 @@
 import * as React from "react";
+import { type TextVariant, type TextColor } from "../lib/typography-types";
 declare const typographyVariants: (props?: ({
     align?: "center" | "left" | "right" | "justify" | null | undefined;
-    variant?: "h5" | "h2" | "h3" | "caption" | "h1" | "h4" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "body3" | "subtitle3" | null | undefined;
-    color?: "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950" | null | undefined;
+    variant?: TextVariant | null | undefined;
+    color?: TextColor | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "body1" | "body2" | "body3" | "caption";
-type TypographyColor = "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950";
+type TypographyVariant = TextVariant;
+type TypographyColor = TextColor;
 type TypographyAlign = "left" | "center" | "right" | "justify";
 type TypographyProps<T extends React.ElementType = "p"> = {
     as?: T;

package/Typography/Typography.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_slot_1 = require("@radix-ui/react-slot");
 const class_variance_authority_1 = require("class-variance-authority");
 const utils_1 = require("../lib/utils");
+const typography_types_1 = require("../lib/typography-types");
 const typographyVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
         align: {
@@ -14,96 +15,8 @@ const typographyVariants = (0, class_variance_authority_1.cva)("", {
             right: "text-right",
             justify: "text-justify",
         },
-        variant: {
-            h1: "font-extrabold text-[64px] leading-none tracking-normal font-sans",
-            h2: "font-bold text-[48px] leading-none tracking-normal font-sans",
-            h3: "font-bold text-[32px] leading-none tracking-normal font-sans",
-            h4: "font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans",
-            h5: "font-bold text-[20px] leading-none tracking-normal font-sans",
-            h6: "font-semibold text-[20px] leading-none tracking-normal font-sans",
-            subtitle1: "font-semibold text-[20px] leading-none tracking-normal font-sans",
-            subtitle2: "font-semibold text-[18px] leading-none tracking-normal font-sans",
-            subtitle3: "font-semibold text-[16px] leading-none tracking-normal font-sans",
-            body1: "font-normal text-[16px] leading-none tracking-normal font-sans",
-            body2: "font-normal text-[14px] leading-none tracking-normal font-sans",
-            body3: "font-normal text-[12px] leading-none tracking-normal font-sans",
-            caption: "font-light text-[12px] leading-none tracking-normal font-sans",
-        },
-        color: {
-            default: "text-foreground",
-            // Main colors
-            "main-50": "text-main-50",
-            "main-100": "text-main-100",
-            "main-200": "text-main-200",
-            "main-300": "text-main-300",
-            "main-400": "text-main-400",
-            "main-500": "text-main-500",
-            "main-600": "text-main-600",
-            "main-700": "text-main-700",
-            "main-800": "text-main-800",
-            "main-900": "text-main-900",
-            "main-950": "text-main-950",
-            // Success colors
-            "success-50": "text-success-50",
-            "success-100": "text-success-100",
-            "success-200": "text-success-200",
-            "success-300": "text-success-300",
-            "success-400": "text-success-400",
-            "success-500": "text-success-500",
-            "success-600": "text-success-600",
-            "success-700": "text-success-700",
-            "success-800": "text-success-800",
-            "success-900": "text-success-900",
-            "success-950": "text-success-950",
-            // Accent colors
-            "accent-50": "text-accent-50",
-            "accent-100": "text-accent-100",
-            "accent-200": "text-accent-200",
-            "accent-300": "text-accent-300",
-            "accent-400": "text-accent-400",
-            "accent-500": "text-accent-500",
-            "accent-600": "text-accent-600",
-            "accent-700": "text-accent-700",
-            "accent-800": "text-accent-800",
-            "accent-900": "text-accent-900",
-            "accent-950": "text-accent-950",
-            // Error colors
-            "error-50": "text-error-50",
-            "error-100": "text-error-100",
-            "error-200": "text-error-200",
-            "error-300": "text-error-300",
-            "error-400": "text-error-400",
-            "error-500": "text-error-500",
-            "error-600": "text-error-600",
-            "error-700": "text-error-700",
-            "error-800": "text-error-800",
-            "error-900": "text-error-900",
-            "error-950": "text-error-950",
-            // Warning colors
-            "warning-50": "text-warning-50",
-            "warning-100": "text-warning-100",
-            "warning-200": "text-warning-200",
-            "warning-300": "text-warning-300",
-            "warning-400": "text-warning-400",
-            "warning-500": "text-warning-500",
-            "warning-600": "text-warning-600",
-            "warning-700": "text-warning-700",
-            "warning-800": "text-warning-800",
-            "warning-900": "text-warning-900",
-            "warning-950": "text-warning-950",
-            // Grey colors
-            "grey-50": "text-grey-50",
-            "grey-100": "text-grey-100",
-            "grey-200": "text-grey-200",
-            "grey-300": "text-grey-300",
-            "grey-400": "text-grey-400",
-            "grey-500": "text-grey-500",
-            "grey-600": "text-grey-600",
-            "grey-700": "text-grey-700",
-            "grey-800": "text-grey-800",
-            "grey-900": "text-grey-900",
-            "grey-950": "text-grey-950",
-        },
+        variant: typography_types_1.textVariantClasses,
+        color: typography_types_1.textColorClasses,
     },
     defaultVariants: {
         variant: "body1",

package/index.d.ts

@@ -17,7 +17,7 @@ export { Flex, flexVariants, type FlexProps, type FlexDirection, type FlexAlign,
 export { IconButton, iconButtonVariants, type IconButtonProps, type IconButtonVariant, type IconButtonSize, type IconButtonRoundness } from "./IconButton/IconButton";
 export { Input, inputVariants, type InputProps, type InputSize, type InputRoundness, type InputVariant } from "./Input/Input";
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, inputOTPVariants, inputOTPSlotVariants, type InputOTPProps, type InputOTPSlotProps, type InputOTPSlotSize, } from "./InputOTP/InputOTP";
-export { Label, labelVariants, type LabelProps, type LabelVariant } from "./Label/Label";
+export { Label, labelVariants, type LabelProps } from "./Label/Label";
 export { Loader, loaderVariants, type LoaderProps, type LoaderSize, type LoaderColor } from "./Loader/Loader";
 export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from "./Menubar/Menubar";
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./Popover/Popover";

package/lib/typography-types.d.ts

@@ -0,0 +1,4 @@
+export type TextVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "subtitle3" | "body1" | "body2" | "body3" | "caption";
+export type TextColor = "default" | "main-50" | "main-100" | "main-200" | "main-300" | "main-400" | "main-500" | "main-600" | "main-700" | "main-800" | "main-900" | "main-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "error-50" | "error-100" | "error-200" | "error-300" | "error-400" | "error-500" | "error-600" | "error-700" | "error-800" | "error-900" | "error-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900" | "grey-950";
+export declare const textVariantClasses: Record<TextVariant, string>;
+export declare const textColorClasses: Record<TextColor, string>;

package/lib/typography-types.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textColorClasses = exports.textVariantClasses = void 0;
+exports.textVariantClasses = {
+    h1: "font-extrabold text-[64px] leading-none tracking-normal font-sans",
+    h2: "font-bold text-[48px] leading-none tracking-normal font-sans",
+    h3: "font-bold text-[32px] leading-none tracking-normal font-sans",
+    h4: "font-bold text-[24px] leading-[1.2] tracking-[-0.48px] font-sans",
+    h5: "font-bold text-[20px] leading-none tracking-normal font-sans",
+    h6: "font-semibold text-[20px] leading-none tracking-normal font-sans",
+    subtitle1: "font-semibold text-[20px] leading-none tracking-normal font-sans",
+    subtitle2: "font-semibold text-[18px] leading-none tracking-normal font-sans",
+    subtitle3: "font-semibold text-[16px] leading-none tracking-normal font-sans",
+    body1: "font-normal text-[16px] leading-none tracking-normal font-sans",
+    body2: "font-normal text-[14px] leading-none tracking-normal font-sans",
+    body3: "font-normal text-[12px] leading-none tracking-normal font-sans",
+    caption: "font-light text-[12px] leading-none tracking-normal font-sans",
+};
+exports.textColorClasses = {
+    default: "text-main-800",
+    // Main colors
+    "main-50": "text-main-50",
+    "main-100": "text-main-100",
+    "main-200": "text-main-200",
+    "main-300": "text-main-300",
+    "main-400": "text-main-400",
+    "main-500": "text-main-500",
+    "main-600": "text-main-600",
+    "main-700": "text-main-700",
+    "main-800": "text-main-800",
+    "main-900": "text-main-900",
+    "main-950": "text-main-950",
+    // Success colors
+    "success-50": "text-success-50",
+    "success-100": "text-success-100",
+    "success-200": "text-success-200",
+    "success-300": "text-success-300",
+    "success-400": "text-success-400",
+    "success-500": "text-success-500",
+    "success-600": "text-success-600",
+    "success-700": "text-success-700",
+    "success-800": "text-success-800",
+    "success-900": "text-success-900",
+    "success-950": "text-success-950",
+    // Accent colors
+    "accent-50": "text-accent-50",
+    "accent-100": "text-accent-100",
+    "accent-200": "text-accent-200",
+    "accent-300": "text-accent-300",
+    "accent-400": "text-accent-400",
+    "accent-500": "text-accent-500",
+    "accent-600": "text-accent-600",
+    "accent-700": "text-accent-700",
+    "accent-800": "text-accent-800",
+    "accent-900": "text-accent-900",
+    "accent-950": "text-accent-950",
+    // Error colors
+    "error-50": "text-error-50",
+    "error-100": "text-error-100",
+    "error-200": "text-error-200",
+    "error-300": "text-error-300",
+    "error-400": "text-error-400",
+    "error-500": "text-error-500",
+    "error-600": "text-error-600",
+    "error-700": "text-error-700",
+    "error-800": "text-error-800",
+    "error-900": "text-error-900",
+    "error-950": "text-error-950",
+    // Warning colors
+    "warning-50": "text-warning-50",
+    "warning-100": "text-warning-100",
+    "warning-200": "text-warning-200",
+    "warning-300": "text-warning-300",
+    "warning-400": "text-warning-400",
+    "warning-500": "text-warning-500",
+    "warning-600": "text-warning-600",
+    "warning-700": "text-warning-700",
+    "warning-800": "text-warning-800",
+    "warning-900": "text-warning-900",
+    "warning-950": "text-warning-950",
+    // Grey colors
+    "grey-50": "text-grey-50",
+    "grey-100": "text-grey-100",
+    "grey-200": "text-grey-200",
+    "grey-300": "text-grey-300",
+    "grey-400": "text-grey-400",
+    "grey-500": "text-grey-500",
+    "grey-600": "text-grey-600",
+    "grey-700": "text-grey-700",
+    "grey-800": "text-grey-800",
+    "grey-900": "text-grey-900",
+    "grey-950": "text-grey-950",
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2v2ai/uikit",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "author": "Arulraj V & abofficial1997@gmail.com",
   "description": "A React UI component library built with shadcn/ui and Tailwind CSS",
   "license": "MIT",