@etus/ui 0.1.0

package/src/components/forms/DatePicker/DatePicker.variants.ts

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * DatePicker trigger variant styles using CVA
+ */
+export const datePickerTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex w-full items-center justify-between gap-2 rounded-md border bg-transparent font-normal transition-[color,box-shadow] outline-none",
+    "text-left",
+    "placeholder:text-muted-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "data-[state=open]:border-ring data-[state=open]:ring-ring/50 data-[state=open]:ring-[3px]",
+    "min-w-[var(--date-picker-trigger-min-width)]",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--date-picker-trigger-height-sm)] px-[var(--date-picker-trigger-padding-x-sm)] py-[var(--date-picker-trigger-padding-y-sm)] text-[length:var(--date-picker-trigger-text-sm)]",
+        md: "h-[var(--date-picker-trigger-height-md)] px-[var(--date-picker-trigger-padding-x-md)] py-[var(--date-picker-trigger-padding-y-md)] text-[length:var(--date-picker-trigger-text-md)]",
+        lg: "h-[var(--date-picker-trigger-height-lg)] px-[var(--date-picker-trigger-padding-x-lg)] py-[var(--date-picker-trigger-padding-y-lg)] text-[length:var(--date-picker-trigger-text-lg)]",
+      },
+      variant: {
+        default: "border-input shadow-xs dark:bg-input/30",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+export type DatePickerTriggerVariantProps = VariantProps<typeof datePickerTriggerVariants>