@a2v2ai/uikit 0.0.31 → 0.0.34

package/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
-const checkboxVariants = cva("peer shrink-0 border border-grey-300 bg-white ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-600 data-[state=checked]:border-accent-600 data-[state=checked]:text-white data-[state=indeterminate]:bg-accent-600 data-[state=indeterminate]:border-accent-600 data-[state=indeterminate]:text-white", {
+const checkboxVariants = cva("peer shrink-0 border border-grey-300 bg-white ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-600 focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent-600 data-[state=checked]:border-accent-600 data-[state=checked]:text-white data-[state=indeterminate]:bg-accent-600 data-[state=indeterminate]:border-accent-600 data-[state=indeterminate]:text-white", {
     variants: {
         size: {
             small: "size-4 rounded-[4px]",

package/DropdownMenu/DropdownMenu.js

@@ -9,7 +9,7 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none focus:bg-grey-100 data-[state=open]:bg-grey-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none focus:bg-grey-100 data-[state=open]:bg-grey-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRight, { className: "ml-auto" })] })));
 DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-grey-200 bg-white p-1 text-main-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props })));
@@ -17,7 +17,7 @@ DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-lg border border-grey-200 bg-white p-1 text-main-950 shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-grey-100 focus:text-main-950 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName =

package/RadioGroup/RadioGroup.js

@@ -8,7 +8,7 @@ const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
     return (_jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref: ref }));
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const radioGroupItemVariants = cva("aspect-square rounded-full border border-grey-300 bg-white text-main-950 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-main-950", {
+const radioGroupItemVariants = cva("aspect-square rounded-full border border-grey-300 bg-white text-main-950 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-main-950", {
     variants: {
         size: {
             small: "size-4",

package/Select/Select.js

@@ -10,7 +10,7 @@ import {} from "../lib/typography-types";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const selectTriggerVariants = cva("flex w-full items-center justify-between whitespace-nowrap border bg-white text-main-950 ring-offset-white placeholder:text-grey-400 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", {
+const selectTriggerVariants = cva("flex w-full items-center justify-between whitespace-nowrap border bg-white text-main-950 ring-offset-white placeholder:text-grey-400 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", {
     variants: {
         size: {
             small: "h-8 px-3 text-sm rounded-md",

package/Tabs/Tabs.js

@@ -17,7 +17,7 @@ const tabsListVariants = cva("inline-flex items-center justify-center rounded-lg
 });
 const TabsList = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn(tabsListVariants({ variant }), className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-main-950 data-[state=active]:shadow-sm", className), ...props })));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2 cursor-pointer disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-main-950 data-[state=active]:shadow-sm", className), ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-main-950 focus-visible:ring-offset-2", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;

package/Textarea/Textarea.d.ts

@@ -12,6 +12,7 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     label?: string;
     labelVariant?: TextVariant;
     labelColor?: TextColor;
+    error?: string;
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea, textareaVariants };

package/Textarea/Textarea.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { Label } from "../Label/Label";
+import { Typography } from "../Typography/Typography";
 import {} from "../lib/typography-types";
 const textareaVariants = 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: {
@@ -22,8 +23,9 @@ const textareaVariants = cva("flex min-h-[80px] w-full rounded-lg border bg-whit
         resize: "vertical",
     },
 });
-const Textarea = React.forwardRef(({ className, variant, resize, label, labelVariant = "body2", labelColor = "main-800", id, ...props }, ref) => {
-    return (_jsxs("div", { className: "flex flex-col gap-2 w-full", children: [label && (_jsx(Label, { htmlFor: id, variant: labelVariant, color: labelColor, children: label })), _jsx("textarea", { id: id, className: cn(textareaVariants({ variant, resize }), className), ref: ref, ...props })] }));
+const Textarea = React.forwardRef(({ className, variant, resize, label, labelVariant = "body2", labelColor = "main-800", error, id, ...props }, ref) => {
+    const computedVariant = error ? "error" : variant;
+    return (_jsxs("div", { className: "flex flex-col gap-2 w-full", children: [label && (_jsx(Label, { htmlFor: id, variant: labelVariant, color: labelColor, children: label })), _jsx("textarea", { id: id, className: cn(textareaVariants({ variant: computedVariant, resize }), className), ref: ref, ...props }), error && (_jsx(Typography, { variant: "caption", color: "error-600", className: "mt-1", children: error }))] }));
 });
 Textarea.displayName = "Textarea";
 export { Textarea, textareaVariants };

package/package.json

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