@codapet/design-system 0.2.2 → 0.2.4

package/dist/index.d.mts

@@ -487,7 +487,10 @@ declare function TabsList({ className, ...props }: React$1.ComponentProps<typeof
 declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
-declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+interface TextareaProps extends Omit<React$1.ComponentProps<'textarea'>, 'size'> {
+    error?: boolean;
+}
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;

package/dist/index.mjs

@@ -137,19 +137,19 @@ import "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
 // src/components/ui/button.tsx
-import "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
+import "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonVariants = cva2(
-  "cursor-pointer active:opacity-70 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-semibold transition-colors transition-opacity disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none relative select-none will-change-auto focus-visible:before:absolute focus-visible:before:-inset-[3px] focus-visible:before:rounded-lg focus-visible:before:ring-2 focus-visible:before:ring-blue-500/80 focus-visible:before:pointer-events-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-semibold transition-colors transition-opacity disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none relative select-none will-change-auto  focus-visible:before:absolute focus-visible:before:-inset-[3px] focus-visible:before:rounded-lg focus-visible:before:ring-2 focus-visible:before:ring-blue-500/80 focus-visible:before:pointer-events-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        primary: "bg-primary text-primary-foreground hover:bg-brand-dark",
-        secondary: "bg-brand-subtle text-brand-vibrant hover:bg-brand-light border border-brand-light",
-        tertiary: "bg-zinc-100 text-zinc-700 hover:bg-zinc-300 hover:border-zinc-300 border border-zinc-200",
-        outline: "text-zinc-800 border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        primary: "bg-primary text-primary-foreground hover:bg-brand-dark active:bg-slate-800 ",
+        secondary: "bg-brand-subtle text-brand-vibrant hover:bg-brand-light border border-brand-light active:bg-icon-disabled",
+        tertiary: "bg-zinc-100 text-zinc-700 hover:bg-zinc-300 hover:border-zinc-300 border border-zinc-200 active:bg-zinc-400",
+        outline: "text-zinc-800 border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 active:bg-surface-default",
         ghost: "text-zinc-800 hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
         destructive: "bg-red-400 text-white hover:bg-red-900 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
@@ -2331,7 +2331,7 @@ var Input = React21.forwardRef(
     error,
     ...props
   }, ref) => {
-    const errorStyles = error ? [
+    const errorStyles2 = error ? [
       "border-destructive bg-red-subtle",
       "focus:border-destructive focus:ring-destructive/20",
       "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
@@ -2345,7 +2345,7 @@ var Input = React21.forwardRef(
             "data-slot": "input",
             className: cn(
               inputVariants({ size }),
-              errorStyles,
+              errorStyles2,
               "peer",
               leftIcon && "pl-10",
               rightIcon && "pr-10",
@@ -2396,7 +2396,7 @@ var Input = React21.forwardRef(
       {
         type,
         "data-slot": "input",
-        className: cn(inputVariants({ size }), errorStyles, className),
+        className: cn(inputVariants({ size }), errorStyles2, className),
         ref,
         "aria-invalid": error,
         ...props
@@ -4466,21 +4466,46 @@ function TabsContent({
 }
 
 // src/components/ui/textarea.tsx
-import "react";
+import * as React41 from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
-function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(
-    "textarea",
-    {
-      "data-slot": "textarea",
-      className: cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      ),
-      ...props
-    }
-  );
-}
+var textareaBaseStyles = [
+  // Base styles aligned with Input
+  "placeholder:text-gray-subtle selection:bg-primary selection:text-primary-foreground",
+  "flex w-full min-w-0 rounded-md border bg-transparent text-base shadow-xs transition-all duration-200",
+  "outline-none font-sans",
+  // Disabled
+  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  // Responsive text size
+  "md:text-sm",
+  // Default state
+  "border-zinc-300 bg-background",
+  // Hover/Focus/Active states
+  "hover:border-brand-normal",
+  "focus:border-blue-500",
+  "active:border-brand-normal",
+  // Textarea specific
+  "field-sizing-content min-h-16 resize-y px-3 py-2"
+].join(" ");
+var errorStyles = [
+  "border-destructive bg-red-subtle",
+  "focus:border-destructive focus:ring-destructive/20",
+  "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+].join(" ");
+var Textarea = React41.forwardRef(
+  ({ className, error, ...props }, ref) => {
+    return /* @__PURE__ */ jsx44(
+      "textarea",
+      {
+        "data-slot": "textarea",
+        className: cn(textareaBaseStyles, error && errorStyles, className),
+        "aria-invalid": error,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 
 // src/components/ui/toggle.tsx
 import "react";