@ropav/styles 0.6.0 → 0.7.0

package/dist/components/progress-circle/progress-circle.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/progress-circle/progress-circle.styles.ts
 const progressCircleVariants = tv({
 	defaultVariants: {
@@ -6,23 +6,23 @@ const progressCircleVariants = tv({
 		size: "md"
 	},
 	slots: {
-		base: "progress-circle",
-		fillCircle: "progress-circle__fill-circle",
-		track: "progress-circle__track",
-		trackCircle: "progress-circle__track-circle"
+		base: "rp-progress-circle",
+		fillCircle: "rp-progress-circle__fill-circle",
+		track: "rp-progress-circle__track",
+		trackCircle: "rp-progress-circle__track-circle"
 	},
 	variants: {
 		color: {
-			accent: { base: "progress-circle--accent" },
-			danger: { base: "progress-circle--danger" },
-			default: { base: "progress-circle--default" },
-			success: { base: "progress-circle--success" },
-			warning: { base: "progress-circle--warning" }
+			accent: { base: "rp-progress-circle--accent" },
+			danger: { base: "rp-progress-circle--danger" },
+			default: { base: "rp-progress-circle--default" },
+			success: { base: "rp-progress-circle--success" },
+			warning: { base: "rp-progress-circle--warning" }
 		},
 		size: {
-			lg: { base: "progress-circle--lg" },
-			md: { base: "progress-circle--md" },
-			sm: { base: "progress-circle--sm" }
+			lg: { base: "rp-progress-circle--lg" },
+			md: { base: "rp-progress-circle--md" },
+			sm: { base: "rp-progress-circle--sm" }
 		}
 	}
 });

package/dist/components/progress-circle.css

@@ -3,19 +3,19 @@
    ========================================================================== */
 
 /* Base styles */
-.progress-circle {
+.rp-progress-circle {
   @apply inline-flex items-center justify-center;
 
   /* Default color token (accent) */
   --progress-circle-stroke: var(--accent);
   --progress-circle-track-stroke: var(--default);
 
-  .progress-circle__track {
+  .rp-progress-circle__track {
     /* Default size (matches --md) */
     @apply size-7;
   }
 
-  .progress-circle__track-circle {
+  .rp-progress-circle__track-circle {
     stroke: var(--progress-circle-track-stroke);
 
     /* Forced colors leaves SVG strokes alone, so the ring renders but in the library's own
@@ -27,7 +27,7 @@
     }
   }
 
-  .progress-circle__fill-circle {
+  .rp-progress-circle__fill-circle {
     stroke: var(--progress-circle-stroke);
 
     @media (forced-colors: active) {
@@ -40,8 +40,8 @@
 
   /* Indeterminate state - when no aria-valuenow is set */
   &:not([aria-valuenow]) {
-    .progress-circle__track {
-      animation: progress-circle-spin 1s linear infinite;
+    .rp-progress-circle__track {
+      animation: rp-progress-circle-spin 1s linear infinite;
 
       @apply motion-reduce:animate-none;
     }
@@ -59,7 +59,7 @@
    Indeterminate animation
    ========================================================================== */
 
-@keyframes progress-circle-spin {
+@keyframes rp-progress-circle-spin {
   from {
     transform: rotate(0deg);
   }
@@ -72,18 +72,18 @@
    Size variants
    ========================================================================== */
 
-.progress-circle--sm {
-  .progress-circle__track {
+.rp-progress-circle--sm {
+  .rp-progress-circle__track {
     @apply size-5;
   }
 }
 
-.progress-circle--md {
+.rp-progress-circle--md {
   /* No styles as this is the default size */
 }
 
-.progress-circle--lg {
-  .progress-circle__track {
+.rp-progress-circle--lg {
+  .rp-progress-circle__track {
     @apply size-9;
   }
 }
@@ -92,22 +92,22 @@
    Color variants
    ========================================================================== */
 
-.progress-circle--default {
+.rp-progress-circle--default {
   --progress-circle-stroke: var(--default-foreground);
 }
 
-.progress-circle--accent {
+.rp-progress-circle--accent {
   --progress-circle-stroke: var(--accent);
 }
 
-.progress-circle--success {
+.rp-progress-circle--success {
   --progress-circle-stroke: var(--success);
 }
 
-.progress-circle--warning {
+.rp-progress-circle--warning {
   --progress-circle-stroke: var(--warning);
 }
 
-.progress-circle--danger {
+.rp-progress-circle--danger {
   --progress-circle-stroke: var(--danger);
 }

package/dist/components/radio/radio.styles.d.ts

@@ -1,46 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const radioVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            control?: import("tailwind-variants").ClassValue;
-            indicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            control?: import("tailwind-variants").ClassValue;
-            indicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    content: string;
-    control: string;
-    indicator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            content?: import("tailwind-variants").ClassValue;
-            control?: import("tailwind-variants").ClassValue;
-            indicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    content: string;
-    control: string;
-    indicator: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    content: string;
-    control: string;
-    indicator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const radioVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & object) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    content: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    control: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    indicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+};
 export type RadioVariants = VariantProps<typeof radioVariants>;
 //# sourceMappingURL=radio.styles.d.ts.map

package/dist/components/radio/radio.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAOxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/radio/radio.styles.js

@@ -1,10 +1,10 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/radio/radio.styles.ts
 const radioVariants = tv({ slots: {
-	base: "radio",
-	content: "radio__content",
-	control: "radio__control",
-	indicator: "radio__indicator"
+	base: "rp-radio",
+	content: "rp-radio__content",
+	control: "rp-radio__control",
+	indicator: "rp-radio__indicator"
 } });
 //#endregion
 export { radioVariants };

package/dist/components/radio-group/radio-group.styles.d.ts

@@ -1,19 +1,8 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const radioGroupVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: "radio-group--primary";
-        secondary: "radio-group--secondary";
-    };
-}, undefined, "radio-group", {
-    variant: {
-        primary: "radio-group--primary";
-        secondary: "radio-group--secondary";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: "radio-group--primary";
-        secondary: "radio-group--secondary";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const radioGroupVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    variant?: "primary" | "secondary" | undefined;
+}) | undefined) => string;
 export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
 //# sourceMappingURL=radio-group.styles.d.ts.map

package/dist/components/radio-group/radio-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;cAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,kBAAkB;;;;yBAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/radio-group/radio-group.styles.js

@@ -1,11 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/radio-group/radio-group.styles.ts
 const radioGroupVariants = tv({
-	base: "radio-group",
+	base: "rp-radio-group",
 	defaultVariants: { variant: "primary" },
 	variants: { variant: {
-		primary: "radio-group--primary",
-		secondary: "radio-group--secondary"
+		primary: "rp-radio-group--primary",
+		secondary: "rp-radio-group--secondary"
 	} }
 });
 //#endregion

package/dist/components/radio-group.css

@@ -1,5 +1,5 @@
 /* Radio Group base styles */
-.radio-group {
+.rp-radio-group {
   @apply flex flex-col;
 
   /* Default orientation */
@@ -15,11 +15,11 @@
 }
 
 /* Variant property definitions */
-.radio-group--primary {
+.rp-radio-group--primary {
   /* Default styles */
 }
 
-.radio-group--secondary .radio__control {
+.rp-radio-group--secondary .rp-radio__control {
   @apply shadow-none;
   background-color: var(--radio-control-bg);
 
@@ -27,22 +27,22 @@
   --radio-control-bg-hover: var(--default-hover);
 
   /* Hover state */
-  .radio:has([data-slot="radio-content"][data-hovered="true"]) &,
-  .radio [data-slot="radio-content"][data-hovered="true"] & {
+  .rp-radio:has([data-slot="radio-content"][data-hovered="true"]) &,
+  .rp-radio [data-slot="radio-content"][data-hovered="true"] & {
     @apply border-field-border-hover;
   }
 
   /* Default indicator color (unselected) */
-  .radio:not([data-selected]):not(:has(input:checked)) & .radio__indicator:empty::before {
+  .rp-radio:not([data-selected]):not(:has(input:checked)) & .rp-radio__indicator:empty::before {
     background-color: var(--radio-control-bg);
   }
 
   /* Hover indicator color (unselected) */
-  .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
+  .rp-radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
       :has(input:checked)
     )
     & {
-    .radio__indicator:empty::before {
+    .rp-radio__indicator:empty::before {
       background-color: var(--radio-control-bg-hover);
     }
   }

package/dist/components/radio.css

@@ -2,15 +2,15 @@
    Base radio styles
 
    Structure (explicit composition):
-     .radio                      → RadioField wrapper (column)
-       .radio__content            → RadioButton: the clickable row (control + label)
-         .radio__control
+     .rp-radio                      → RadioField wrapper (column)
+       .rp-radio__content            → RadioButton: the clickable row (control + label)
+         .rp-radio__control
          [data-slot="label"]
        [data-slot="description"] → field-level sibling, below the row
        [data-slot="field-error"]
    ========================================================================== */
 
-.radio {
+.rp-radio {
   @apply flex flex-col items-start gap-1 outline-none no-highlight;
 
   cursor: var(--cursor-interactive);
@@ -19,7 +19,7 @@
     @apply select-none;
   }
 
-  .radio__content [data-slot="label"] {
+  .rp-radio__content [data-slot="label"] {
     cursor: var(--cursor-interactive);
   }
 
@@ -43,7 +43,7 @@
 }
 
 /* Radio content — the clickable label (control + label text) */
-.radio__content {
+.rp-radio__content {
   @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
 }
 
@@ -51,7 +51,7 @@
    Radio control (the circular button)
    ========================================================================== */
 
-.radio__control {
+.rp-radio__control {
   @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
 
   transition:
@@ -64,60 +64,60 @@
 
   /* Interactive states */
   /* Focus */
-  .radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
-  .radio [data-slot="radio-content"][data-focus-visible="true"] & {
+  .rp-radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
+  .rp-radio [data-slot="radio-content"][data-focus-visible="true"] & {
     @apply status-focused;
   }
 
   /* Hover */
-  .radio:has([data-slot="radio-content"][data-hovered="true"]) &,
-  .radio [data-slot="radio-content"][data-hovered="true"] & {
+  .rp-radio:has([data-slot="radio-content"][data-hovered="true"]) &,
+  .rp-radio [data-slot="radio-content"][data-hovered="true"] & {
     @apply border-field-border-hover;
   }
 
   /* Hover - only when not selected */
-  .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
+  .rp-radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
       :has(input:checked)
     )
     & {
-    .radio__indicator:empty::before {
+    .rp-radio__indicator:empty::before {
       @apply bg-field-hover;
     }
   }
 
   /* Pressed */
-  .radio:has([data-slot="radio-content"][data-pressed="true"]) &,
-  .radio [data-slot="radio-content"][data-pressed="true"] & {
+  .rp-radio:has([data-slot="radio-content"][data-pressed="true"]) &,
+  .rp-radio [data-slot="radio-content"][data-pressed="true"] & {
     @apply scale-95;
   }
 
   /* Selection states */
   /* Selected */
-  .radio[data-selected] &,
-  .radio:has([data-slot="radio-content"][aria-checked="true"]) &,
-  .radio:has(input:checked) & {
+  .rp-radio[data-selected] &,
+  .rp-radio:has([data-slot="radio-content"][aria-checked="true"]) &,
+  .rp-radio:has(input:checked) & {
     @apply border-transparent bg-accent;
   }
 
   /* Selected + Pressed */
-  .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
-  .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
-  .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
+  .rp-radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
+  .rp-radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
+  .rp-radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
     @apply bg-accent-hover;
   }
 
   /* Validation states */
   /* Invalid */
-  .radio[data-invalid="true"] &,
-  .radio[aria-invalid="true"] & {
+  .rp-radio[data-invalid="true"] &,
+  .rp-radio[aria-invalid="true"] & {
     @apply status-invalid-field;
   }
 
   /* Invalid + Selected */
-  .radio[data-invalid="true"][data-selected] &,
-  .radio[aria-invalid="true"][data-selected] &,
-  .radio[data-invalid="true"]:has(input:checked) &,
-  .radio[aria-invalid="true"]:has(input:checked) & {
+  .rp-radio[data-invalid="true"][data-selected] &,
+  .rp-radio[aria-invalid="true"][data-selected] &,
+  .rp-radio[data-invalid="true"]:has(input:checked) &,
+  .rp-radio[aria-invalid="true"]:has(input:checked) & {
     @apply status-invalid-field;
   }
 }
@@ -126,7 +126,7 @@
    Radio indicator (the inner dot)
    ========================================================================== */
 
-.radio__indicator {
+.rp-radio__indicator {
   @apply absolute inset-0 flex items-center justify-center;
 
   pointer-events: none;
@@ -141,7 +141,7 @@
 
 /* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
    (e.g., custom icon). When custom content is present, these default dot styles are not applied. */
-.radio__indicator:empty::before {
+.rp-radio__indicator:empty::before {
   content: "";
   @apply rounded-lg bg-field;
 
@@ -155,9 +155,9 @@
 }
 
 /* Selected state */
-.radio[data-selected] .radio__indicator:empty::before,
-.radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty::before,
-.radio:has(input:checked) .radio__indicator:empty::before {
+.rp-radio[data-selected] .rp-radio__indicator:empty::before,
+.rp-radio:has([data-slot="radio-content"][aria-checked="true"]) .rp-radio__indicator:empty::before,
+.rp-radio:has(input:checked) .rp-radio__indicator:empty::before {
   @apply bg-accent-foreground;
   scale: 0.4286; /* 6px */
 
@@ -170,12 +170,12 @@
 }
 
 /* Selected + Pressed state */
-.radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
-  .radio__indicator:empty::before,
-.radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
-  .radio__indicator:empty::before,
-.radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
-  .radio__indicator:empty::before {
+.rp-radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
+  .rp-radio__indicator:empty::before,
+.rp-radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
+  .rp-radio__indicator:empty::before,
+.rp-radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
+  .rp-radio__indicator:empty::before {
   scale: 0.5714; /* 8px */
 }
 
@@ -183,6 +183,6 @@
    Disabled modifier
    ========================================================================== */
 
-.radio--disabled {
+.rp-radio--disabled {
   @apply status-disabled;
 }

package/dist/components/range-calendar/range-calendar.styles.d.ts

@@ -1,79 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const rangeCalendarVariants: import("tailwind-variants").TVReturnType<{}, {
-    /** Root range calendar container */
-    base: string;
-    /** Calendar cell (td) */
-    cell: string;
-    /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: string;
-    /** Calendar grid (table) */
-    grid: string;
-    /** Grid body (tbody) */
-    gridBody: string;
-    /** Grid header (thead) */
-    gridHeader: string;
-    /** Grid row (tr) */
-    gridRow: string;
-    /** Calendar header containing heading and navigation */
-    header: string;
-    /** Header cell (th - day names) */
-    headerCell: string;
-    /** Month/year heading text */
-    heading: string;
-    /** Previous/Next navigation button */
-    navButton: string;
-    /** Navigation button icon */
-    navButtonIcon: string;
-}, undefined, {}, {
-    /** Root range calendar container */
-    base: string;
-    /** Calendar cell (td) */
-    cell: string;
-    /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: string;
-    /** Calendar grid (table) */
-    grid: string;
-    /** Grid body (tbody) */
-    gridBody: string;
-    /** Grid header (thead) */
-    gridHeader: string;
-    /** Grid row (tr) */
-    gridRow: string;
-    /** Calendar header containing heading and navigation */
-    header: string;
-    /** Header cell (th - day names) */
-    headerCell: string;
-    /** Month/year heading text */
-    heading: string;
-    /** Previous/Next navigation button */
-    navButton: string;
-    /** Navigation button icon */
-    navButtonIcon: string;
-}, import("tailwind-variants").TVReturnTypeLike<{}, {
-    /** Root range calendar container */
-    base: string;
-    /** Calendar cell (td) */
-    cell: string;
-    /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: string;
-    /** Calendar grid (table) */
-    grid: string;
-    /** Grid body (tbody) */
-    gridBody: string;
-    /** Grid header (thead) */
-    gridHeader: string;
-    /** Grid row (tr) */
-    gridRow: string;
-    /** Calendar header containing heading and navigation */
-    header: string;
-    /** Header cell (th - day names) */
-    headerCell: string;
-    /** Month/year heading text */
-    heading: string;
-    /** Previous/Next navigation button */
-    navButton: string;
-    /** Navigation button icon */
-    navButtonIcon: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const rangeCalendarVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    cell: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    cellButton: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    cellIndicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    grid: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    gridBody: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    gridHeader: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    gridRow: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    header: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    headerCell: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    heading: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    navButton: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    navButtonIcon: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+};
 export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;
 //# sourceMappingURL=range-calendar.styles.d.ts.map