@ropav/styles 0.5.0 → 0.7.0

package/dist/components/date-input-group/date-input-group.styles.d.ts

@@ -1,97 +1,53 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const dateInputGroupVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    inputContainer: string;
-    prefix: string;
-    segment: string;
-    suffix: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    inputContainer: string;
-    prefix: string;
-    segment: string;
-    suffix: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    inputContainer: string;
-    prefix: string;
-    segment: string;
-    suffix: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const dateInputGroupVariants: (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;
+} & {
+    fullWidth?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "primary" | "secondary" | 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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    input: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    inputContainer: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    prefix: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    segment: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    suffix: (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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type DateInputGroupVariants = VariantProps<typeof dateInputGroupVariants>;
 //# sourceMappingURL=date-input-group.styles.d.ts.map

package/dist/components/date-input-group/date-input-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,sBAAsB;;QAgB7B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;QACF,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"date-input-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/date-input-group/date-input-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCjC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/date-input-group/date-input-group.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/date-input-group/date-input-group.styles.ts
 const dateInputGroupVariants = tv({
 	defaultVariants: {
@@ -7,26 +7,26 @@ const dateInputGroupVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "date-input-group",
-		input: "date-input-group__input",
-		inputContainer: "date-input-group__input-container",
-		prefix: "date-input-group__prefix",
-		segment: "date-input-group__segment",
-		suffix: "date-input-group__suffix"
+		base: "rp-date-input-group",
+		input: "rp-date-input-group__input",
+		inputContainer: "rp-date-input-group__input-container",
+		prefix: "rp-date-input-group__prefix",
+		segment: "rp-date-input-group__segment",
+		suffix: "rp-date-input-group__suffix"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
-			true: { base: "date-input-group--full-width" }
+			true: { base: "rp-date-input-group--full-width" }
 		},
 		size: {
-			lg: { base: "date-input-group--lg" },
+			lg: { base: "rp-date-input-group--lg" },
 			md: {},
-			sm: { base: "date-input-group--sm" }
+			sm: { base: "rp-date-input-group--sm" }
 		},
 		variant: {
-			primary: { base: "date-input-group--primary" },
-			secondary: { base: "date-input-group--secondary" }
+			primary: { base: "rp-date-input-group--primary" },
+			secondary: { base: "rp-date-input-group--secondary" }
 		}
 	}
 });

package/dist/components/date-input-group.css

@@ -1,6 +1,13 @@
 /* Date input group styles */
-.date-input-group {
-  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+.rp-date-input-group {
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border text-sm text-field-foreground shadow-field outline-none;
+
+  /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
+  --date-input-group-bg: var(--field-background, var(--default));
+  --date-input-group-bg-hover: var(--field-hover);
+  --date-input-group-bg-focus: var(--field-focus);
+
+  background-color: var(--date-input-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -13,10 +20,6 @@
     outline-offset: -1px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -27,7 +30,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--date-input-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -55,7 +58,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--date-input-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -66,20 +69,20 @@
   }
 }
 
-.date-input-group__input {
+.rp-date-input-group__input {
   @apply flex flex-1 cursor-text items-center gap-px rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Remove border radius on left side when prefix is present */
-  .date-input-group:has([data-slot="date-input-group-prefix"]) & {
+  .rp-date-input-group:has([data-slot="date-input-group-prefix"]) & {
     @apply rounded-s-none ps-2;
   }
 
   /* Remove border radius on right side when suffix is present */
-  .date-input-group:has([data-slot="date-input-group-suffix"]) & {
+  .rp-date-input-group:has([data-slot="date-input-group-suffix"]) & {
     @apply rounded-e-none pe-2;
   }
 
-  .date-input-group:has(.date-range-picker__range-separator) & {
+  .rp-date-input-group:has(.rp-date-range-picker__range-separator) & {
     &[slot="start"] {
       @apply flex-none pe-0;
     }
@@ -95,30 +98,48 @@
   }
 }
 
-.date-input-group__input-container {
+.rp-date-input-group__input-container {
   @apply flex flex-1 scrollbar-none items-center;
   width: fit-content;
   overflow-x: auto;
   overflow-y: clip;
 }
 
-.date-input-group__segment {
+.rp-date-input-group__segment {
   @apply inline-block rounded-md px-0.5 text-end text-nowrap outline-none;
 
+  /* The fill and the digits, per state. Five states repaint the text here, so a caller retuning
+   * any one of them from a single declaration would take the other four with it. */
+  --date-input-group-segment-bg: transparent;
+  --date-input-group-segment-bg-focused: var(--accent-soft);
+  --date-input-group-segment-bg-invalid-focused: var(--danger-soft);
+  --date-input-group-segment-fg: currentcolor;
+  --date-input-group-segment-fg-literal: var(--muted);
+  --date-input-group-segment-fg-placeholder: var(--field-placeholder, var(--muted));
+  --date-input-group-segment-fg-focused: var(--accent-soft-foreground);
+  --date-input-group-segment-fg-invalid: var(--danger);
+  --date-input-group-segment-fg-invalid-focused: var(--danger-soft-foreground);
+
+  background-color: var(--date-input-group-segment-bg);
+  color: var(--date-input-group-segment-fg);
+
   /* Segment separators styling "/" */
   &[data-type="literal"] {
-    @apply p-0 text-muted;
+    @apply p-0;
+
+    color: var(--date-input-group-segment-fg-literal);
   }
 
   /* Placeholder styling */
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--date-input-group-segment-fg-placeholder);
   }
 
   /* Focused segment */
   &:focus,
   &[data-focused="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--date-input-group-segment-bg-focused);
+    color: var(--date-input-group-segment-fg-focused);
   }
 
   /* Disabled segment */
@@ -128,65 +149,46 @@
 
   /* Invalid segment */
   &[data-invalid="true"] {
-    @apply text-danger;
+    color: var(--date-input-group-segment-fg-invalid);
 
     /* Focused segment */
     &:focus,
     &[data-focused="true"] {
-      @apply bg-danger-soft text-danger-soft-foreground;
+      background-color: var(--date-input-group-segment-bg-invalid-focused);
+      color: var(--date-input-group-segment-fg-invalid-focused);
     }
   }
 }
 
-.date-input-group__prefix {
+.rp-date-input-group__prefix {
   @apply pointer-events-none shrink-0 text-field-placeholder;
   @apply ms-3 me-0 flex items-center;
 }
 
-.date-input-group__suffix {
+.rp-date-input-group__suffix {
   @apply pointer-events-none shrink-0 text-field-placeholder;
   @apply me-3 flex items-center;
 }
 
 /* Variant property definitions */
-.date-input-group--primary {
+.rp-date-input-group--primary {
   /* Default styles */
 }
 
-.date-input-group--secondary {
+.rp-date-input-group--secondary {
   @apply shadow-none;
-  background-color: var(--date-input-group-bg);
 
   --date-input-group-bg: var(--default);
   --date-input-group-bg-hover: var(--default-hover);
   --date-input-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--date-input-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--date-input-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--date-input-group-bg-focus);
-  }
-
   [data-slot="date-input-group-input"] {
     @apply bg-transparent;
   }
 }
 
 /* Full width modifier */
-.date-input-group--full-width {
+.rp-date-input-group--full-width {
   @apply w-full;
 }
 
@@ -194,18 +196,18 @@
    Size variants
    ========================================================================== */
 
-.date-input-group--sm {
+.rp-date-input-group--sm {
   @apply h-8;
 
-  .date-input-group__input {
+  .rp-date-input-group__input {
     @apply field-line-sm;
   }
 }
 
-.date-input-group--lg {
+.rp-date-input-group--lg {
   @apply h-10;
 
-  .date-input-group__input {
+  .rp-date-input-group__input {
     @apply field-line-lg;
   }
 }

package/dist/components/date-picker/date-picker.styles.d.ts

@@ -1,46 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const datePickerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            popover?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            popover?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    popover: string;
-    trigger: string;
-    triggerIndicator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            popover?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    popover: string;
-    trigger: string;
-    triggerIndicator: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    popover: string;
-    trigger: string;
-    triggerIndicator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const datePickerVariants: (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;
+    popover: (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;
+    trigger: (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;
+    triggerIndicator: (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 DatePickerVariants = VariantProps<typeof datePickerVariants>;
 //# sourceMappingURL=date-picker.styles.d.ts.map

package/dist/components/date-picker/date-picker.styles.d.ts.map

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

package/dist/components/date-picker/date-picker.styles.js

@@ -1,10 +1,10 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/date-picker/date-picker.styles.ts
 const datePickerVariants = tv({ slots: {
-	base: "date-picker",
-	popover: "date-picker__popover",
-	trigger: "date-picker__trigger",
-	triggerIndicator: "date-picker__trigger-indicator"
+	base: "rp-date-picker",
+	popover: "rp-date-picker__popover",
+	trigger: "rp-date-picker__trigger",
+	triggerIndicator: "rp-date-picker__trigger-indicator"
 } });
 //#endregion
 export { datePickerVariants };

package/dist/components/date-picker.css

@@ -2,24 +2,20 @@
    DatePicker - Date selection trigger and popover container
    ========================================================================== */
 
-.date-picker {
+.rp-date-picker {
   @apply inline-flex flex-col gap-1;
 
-  .date-input-group__suffix,
-  .date-input-group__prefix {
+  .rp-date-input-group__suffix,
+  .rp-date-input-group__prefix {
     @apply pointer-events-auto;
   }
 }
 
-.date-picker__trigger {
+.rp-date-picker__trigger {
   @apply inline-flex w-full items-center rounded-field p-1 text-sm no-highlight;
 
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: box-shadow 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
@@ -35,16 +31,16 @@
   }
 }
 
-.date-picker__trigger-indicator {
+.rp-date-picker__trigger-indicator {
   @apply inline-flex size-4 items-center justify-center text-field-placeholder;
 }
 
-.date-picker__popover {
+.rp-date-picker__popover {
   @apply w-fit origin-(--trigger-anchor-point) scrollbar-none overflow-y-auto overscroll-contain bg-overlay p-3;
   @apply motion-reduce:transition-none;
 
   box-shadow: var(--shadow-overlay);
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+  border-radius: min(32px, var(--component-radius));
 
   &:focus-visible:not(:focus),
   &[data-focus-visible="true"] {
@@ -81,7 +77,7 @@
   }
 }
 
-.date-picker__popover .calendar__nav-button-icon,
-.date-picker__popover .range-calendar__nav-button-icon {
+.rp-date-picker__popover .rp-calendar__nav-button-icon,
+.rp-date-picker__popover .rp-range-calendar__nav-button-icon {
   @apply rotate-0;
 }

package/dist/components/date-range-picker/date-range-picker.styles.d.ts

@@ -1,52 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const dateRangePickerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            popover?: import("tailwind-variants").ClassValue;
-            rangeSeparator?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            popover?: import("tailwind-variants").ClassValue;
-            rangeSeparator?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    popover: string;
-    rangeSeparator: string;
-    trigger: string;
-    triggerIndicator: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            popover?: import("tailwind-variants").ClassValue;
-            rangeSeparator?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    popover: string;
-    rangeSeparator: string;
-    trigger: string;
-    triggerIndicator: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    popover: string;
-    rangeSeparator: string;
-    trigger: string;
-    triggerIndicator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const dateRangePickerVariants: (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;
+    popover: (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;
+    rangeSeparator: (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;
+    trigger: (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;
+    triggerIndicator: (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 DateRangePickerVariants = VariantProps<typeof dateRangePickerVariants>;
 //# sourceMappingURL=date-range-picker.styles.d.ts.map

package/dist/components/date-range-picker/date-range-picker.styles.d.ts.map

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