@ropav/styles 0.5.0 → 0.7.0

package/dist/components/range-calendar/range-calendar.styles.js

@@ -1,32 +1,34 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/range-calendar/range-calendar.styles.ts
 const rangeCalendarVariants = tv({
 	defaultVariants: {},
 	slots: {
 		/** Root range calendar container */
-		base: "range-calendar",
+		base: "rp-range-calendar",
 		/** Calendar cell (td) */
-		cell: "range-calendar__cell",
+		cell: "rp-range-calendar__cell",
+		/** The pressable box inside the cell, which the range fill paints around */
+		cellButton: "rp-range-calendar__cell-button",
 		/** Cell indicator (small dot at bottom of cell) */
-		cellIndicator: "range-calendar__cell-indicator",
+		cellIndicator: "rp-range-calendar__cell-indicator",
 		/** Calendar grid (table) */
-		grid: "range-calendar__grid",
+		grid: "rp-range-calendar__grid",
 		/** Grid body (tbody) */
-		gridBody: "range-calendar__grid-body",
+		gridBody: "rp-range-calendar__grid-body",
 		/** Grid header (thead) */
-		gridHeader: "range-calendar__grid-header",
+		gridHeader: "rp-range-calendar__grid-header",
 		/** Grid row (tr) */
-		gridRow: "range-calendar__grid-row",
+		gridRow: "rp-range-calendar__grid-row",
 		/** Calendar header containing heading and navigation */
-		header: "range-calendar__header",
+		header: "rp-range-calendar__header",
 		/** Header cell (th - day names) */
-		headerCell: "range-calendar__header-cell",
+		headerCell: "rp-range-calendar__header-cell",
 		/** Month/year heading text */
-		heading: "range-calendar__heading",
+		heading: "rp-range-calendar__heading",
 		/** Previous/Next navigation button */
-		navButton: "range-calendar__nav-button",
+		navButton: "rp-range-calendar__nav-button",
 		/** Navigation button icon */
-		navButtonIcon: "range-calendar__nav-button-icon"
+		navButtonIcon: "rp-range-calendar__nav-button-icon"
 	},
 	variants: {}
 });

package/dist/components/range-calendar.css

@@ -8,23 +8,23 @@
 /* -----------------------------------------------------------------------------
  * Base RangeCalendar Styles
  * -------------------------------------------------------------------------- */
-.range-calendar {
+.rp-range-calendar {
   @apply w-63 max-w-63;
 
   container-type: inline-size;
 }
 
 /* Week view – visibleDuration={{ weeks: n }} */
-.range-calendar--week-view {
-  .range-calendar__cell {
+.rp-range-calendar--week-view {
+  .rp-range-calendar__cell {
     /* Keep cells circular on the 7-column grid; only filled cells take space. */
     @apply aspect-square size-auto w-full place-self-center;
   }
 }
 
 /* Day view – visibleDuration={{ days: n }} */
-.range-calendar--day-view {
-  .range-calendar__cell {
+.rp-range-calendar--day-view {
+  .rp-range-calendar__cell {
     @apply aspect-square size-auto w-full place-self-center;
   }
 
@@ -32,12 +32,12 @@
    * Isolate header and body into separate 7-column grids. With display:contents
    * on the root grid, fewer than 7 weekday headers flow into the same row as dates.
    */
-  .range-calendar__grid {
+  .rp-range-calendar__grid {
     display: flex;
     flex-direction: column;
   }
 
-  .range-calendar__grid-header {
+  .rp-range-calendar__grid-header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     @apply w-full;
@@ -47,7 +47,7 @@
     }
   }
 
-  .range-calendar__grid-body {
+  .rp-range-calendar__grid-body {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     @apply mt-1 w-full;
@@ -65,29 +65,27 @@
 /* -----------------------------------------------------------------------------
  * RangeCalendar Header
  * -------------------------------------------------------------------------- */
-.range-calendar__header {
+.rp-range-calendar__header {
   @apply flex items-center justify-between px-0.5 pb-4;
 
-  &:has(.calendar-year-picker__trigger[data-open="true"]) {
-    .range-calendar__nav-button {
+  &:has(.rp-calendar-year-picker__trigger[data-open="true"]) {
+    .rp-range-calendar__nav-button {
       @apply pointer-events-none opacity-0;
     }
   }
 }
 
-.range-calendar__heading {
+.rp-range-calendar__heading {
   @apply flex-1 text-sm font-medium;
 }
 
-.range-calendar__nav-button {
-  @apply flex size-6 items-center justify-center rounded-xl text-accent-soft-foreground;
+.rp-range-calendar__nav-button {
+  @apply flex size-6 items-center justify-center text-accent-soft-foreground;
+
+  border-radius: min(32px, var(--component-radius));
 
   will-change: scale;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out),
     background-color 100ms var(--ease-out),
@@ -101,7 +99,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default text-accent-soft-foreground;
+      @apply bg-state-layer;
     }
   }
 
@@ -124,27 +122,27 @@
   }
 }
 
-.range-calendar__nav-button-icon {
+.rp-range-calendar__nav-button-icon {
   @apply size-4 rtl:rotate-180;
 }
 
 /* -----------------------------------------------------------------------------
  * RangeCalendar Grid
  * -------------------------------------------------------------------------- */
-.range-calendar__grid {
+.rp-range-calendar__grid {
   /* Override table display with CSS Grid for easier customization */
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   @apply w-full;
 
   &[aria-readonly="true"] {
-    .range-calendar__cell {
+    .rp-range-calendar__cell {
       @apply pointer-events-none;
     }
   }
 }
 
-.range-calendar__grid-header {
+.rp-range-calendar__grid-header {
   /* Grid header (thead) styles */
   display: contents;
 
@@ -153,7 +151,7 @@
   }
 }
 
-.range-calendar__grid-body {
+.rp-range-calendar__grid-body {
   /* Grid body (tbody) styles */
   display: contents;
 
@@ -167,13 +165,13 @@
   }
 }
 
-.range-calendar__grid-row {
+.rp-range-calendar__grid-row {
   /* Use 'contents' so cells participate directly in grid */
   /* Note: This class can be used for custom row styling if needed */
   display: contents;
 }
 
-.range-calendar__header-cell {
+.rp-range-calendar__header-cell {
   /* Header cell (th - weekday names) styles */
   @apply flex items-center justify-center pb-2 text-xs font-medium text-muted;
 }
@@ -181,23 +179,46 @@
 /* -----------------------------------------------------------------------------
  * RangeCalendar Cells
  * -------------------------------------------------------------------------- */
-.range-calendar__cell {
-  @apply relative z-1 mx-0 my-[2px] rounded-3xl p-0 outline-none;
+.rp-range-calendar__cell {
+  @apply relative z-1 mx-0 my-[2px] p-0 outline-none;
+
+  --range-calendar-day-radius: min(32px, var(--component-radius));
+  --range-calendar-wrap-radius: calc(var(--range-calendar-day-radius) / 3);
+
+  border-radius: var(--range-calendar-day-radius);
   cursor: var(--cursor-interactive);
 
+  /* The range track paints on the cell and the day paints on the button inside it, so both sets
+   * are declared here and the button reads them by inheritance. A cap is a day at either end of
+   * the range; several states land in pairs, and one declaration cannot tell them apart. */
+  --range-calendar-cell-bg: transparent;
+  --range-calendar-cell-bg-selected: var(--accent-soft);
+  --range-calendar-cell-bg-selected-outside-month: color-mix(
+    in oklab,
+    var(--state-layer) 20%,
+    transparent
+  );
+  --range-calendar-day-bg-hover: var(--state-layer);
+  --range-calendar-day-bg-today: var(--accent-soft);
+  --range-calendar-day-bg-today-hover: var(--accent-soft-hover);
+  --range-calendar-day-bg-cap: var(--accent);
+  --range-calendar-day-bg-cap-pressed: var(--accent-hover);
+  --range-calendar-day-fg-today: var(--accent-soft-foreground);
+  --range-calendar-day-fg-cap: var(--accent-foreground);
+
+  background-color: var(--range-calendar-cell-bg);
+
   will-change: background-color, border-color;
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     box-shadow 100ms var(--ease-out),
     border-color 100ms var(--ease-out);
   @apply transform-gpu motion-reduce:transition-none;
 
   /* Inner interactive circle/capsule (equivalent to React Aria "button-base") */
-  .range-calendar__cell-button {
-    @apply flex aspect-square w-full items-center justify-center rounded-3xl text-sm font-medium text-foreground no-highlight;
+  .rp-range-calendar__cell-button {
+    @apply flex aspect-square w-full items-center justify-center text-sm font-medium text-foreground no-highlight;
+
+    border-radius: var(--range-calendar-day-radius);
 
     will-change: scale;
     transition: scale 200ms var(--ease-out);
@@ -209,15 +230,16 @@
   &[data-focus-visible="true"] {
     @apply z-2;
 
-    .range-calendar__cell-button {
+    .rp-range-calendar__cell-button {
       @apply status-focused;
     }
   }
 
   /* Today indicator */
   &[data-today="true"] {
-    .range-calendar__cell-button {
-      @apply bg-accent-soft text-accent-soft-foreground;
+    .rp-range-calendar__cell-button {
+      background-color: var(--range-calendar-day-bg-today);
+      color: var(--range-calendar-day-fg-today);
 
       /* An edge rather than a fill, so today still reads as itself once it is also in range */
       @media (forced-colors: active) {
@@ -229,8 +251,8 @@
     @media (hover: hover) {
       &:hover:not([data-selected="true"]),
       &[data-hovered="true"]:not([data-selected="true"]) {
-        .range-calendar__cell-button {
-          @apply bg-accent-soft-hover;
+        .rp-range-calendar__cell-button {
+          background-color: var(--range-calendar-day-bg-today-hover);
         }
       }
     }
@@ -238,7 +260,9 @@
 
   /* Range selected track (middle segment) */
   &[data-selected="true"]:not([data-outside-month="true"]) {
-    @apply rounded-none bg-accent-soft;
+    @apply rounded-none;
+
+    background-color: var(--range-calendar-cell-bg-selected);
 
     /* The track is a background and nothing else, so Forced Colors Mode flattens it into the
      * page and the range stops being visible. The day button declares its own `color`, so
@@ -246,7 +270,7 @@
     @media (forced-colors: active) {
       background-color: Highlight;
 
-      .range-calendar__cell-button {
+      .rp-range-calendar__cell-button {
         /* Suppresses the `Canvas` backplate behind the day number, which would otherwise cover
          * the track and leave the digits invisible against it. */
         forced-color-adjust: none;
@@ -257,16 +281,22 @@
 
   /* Round row boundaries so the range track looks continuous across weeks */
   &[data-selected="true"]:is(td:first-child > *, [aria-disabled] + td > *) {
-    @apply rounded-ss-lg rounded-es-lg;
+    border-start-start-radius: var(--range-calendar-wrap-radius);
+    border-end-start-radius: var(--range-calendar-wrap-radius);
+
     &[data-selection-start="true"] {
-      @apply rounded-ss-3xl rounded-es-3xl;
+      border-start-start-radius: var(--range-calendar-day-radius);
+      border-end-start-radius: var(--range-calendar-day-radius);
     }
   }
 
   &[data-selected="true"]:is(td:last-child > *, td:has(+ [aria-disabled]) > *) {
-    @apply rounded-se-lg rounded-ee-lg;
+    border-start-end-radius: var(--range-calendar-wrap-radius);
+    border-end-end-radius: var(--range-calendar-wrap-radius);
+
     &[data-selection-end="true"] {
-      @apply rounded-se-3xl rounded-ee-3xl;
+      border-start-end-radius: var(--range-calendar-day-radius);
+      border-end-end-radius: var(--range-calendar-day-radius);
     }
   }
 
@@ -275,8 +305,9 @@
   &[data-selection-end="true"]:not([data-outside-month="true"]) {
     @apply z-2;
 
-    .range-calendar__cell-button {
-      @apply bg-accent text-accent-foreground;
+    .rp-range-calendar__cell-button {
+      background-color: var(--range-calendar-day-bg-cap);
+      color: var(--range-calendar-day-fg-cap);
 
       /* Caps read the same as the track here. Forced colors offers one selection colour, and
        * spending it on the shape that matters - the range - beats splitting it. */
@@ -293,24 +324,26 @@
   } */
 
   &[data-selection-start="true"]:not([data-outside-month="true"]) {
-    @apply rounded-ss-3xl rounded-es-3xl;
+    border-start-start-radius: var(--range-calendar-day-radius);
+    border-end-start-radius: var(--range-calendar-day-radius);
   }
 
   &[data-selection-end="true"]:not([data-outside-month="true"]) {
-    @apply rounded-se-3xl rounded-ee-3xl;
+    border-start-end-radius: var(--range-calendar-day-radius);
+    border-end-end-radius: var(--range-calendar-day-radius);
   }
 
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    .range-calendar__cell-button {
+    .rp-range-calendar__cell-button {
       scale: 0.9;
     }
 
     &[data-selection-start="true"],
     &[data-selection-end="true"] {
-      .range-calendar__cell-button {
-        @apply bg-accent-hover;
+      .rp-range-calendar__cell-button {
+        background-color: var(--range-calendar-day-bg-cap-pressed);
       }
     }
   }
@@ -319,8 +352,8 @@
   @media (hover: hover) {
     &:hover:not([data-selected="true"]),
     &[data-hovered="true"]:not([data-selected="true"]) {
-      .range-calendar__cell-button {
-        @apply bg-default;
+      .rp-range-calendar__cell-button {
+        background-color: var(--range-calendar-day-bg-hover);
       }
     }
   }
@@ -334,7 +367,7 @@
       [data-selection-start="true"],
       [data-selection-end="true"]
     ) {
-    @apply bg-default/20;
+    background-color: var(--range-calendar-cell-bg-selected-outside-month);
   }
 
   /* Unavailable dates */
@@ -352,38 +385,47 @@
 }
 
 /* Outside-month cell followed by selected cell across adjacent table cells */
-.range-calendar__grid-body
-  td:has(> .range-calendar__cell[data-outside-month="true"])
+.rp-range-calendar__grid-body
+  td:has(> .rp-range-calendar__cell[data-outside-month="true"])
   + td
-  > .range-calendar__cell[data-selected="true"] {
-  @apply rounded-ss-lg rounded-es-lg;
+  > .rp-range-calendar__cell[data-selected="true"] {
+  border-start-start-radius: var(--range-calendar-wrap-radius);
+  border-end-start-radius: var(--range-calendar-wrap-radius);
 
   &[data-outside-month="true"],
   &[data-selection-start="true"] {
-    @apply rounded-ss-3xl rounded-es-3xl;
+    border-start-start-radius: var(--range-calendar-day-radius);
+    border-end-start-radius: var(--range-calendar-day-radius);
   }
 }
 
 /* Selected cell followed by outside-month cell across adjacent table cells */
-.range-calendar__grid-body
-  td:has(> .range-calendar__cell[data-selected="true"]):has(
-    + td > .range-calendar__cell[data-outside-month="true"]
+.rp-range-calendar__grid-body
+  td:has(> .rp-range-calendar__cell[data-selected="true"]):has(
+    + td > .rp-range-calendar__cell[data-outside-month="true"]
   )
-  > .range-calendar__cell[data-selected="true"] {
-  @apply rounded-se-lg rounded-ee-lg;
+  > .rp-range-calendar__cell[data-selected="true"] {
+  border-start-end-radius: var(--range-calendar-wrap-radius);
+  border-end-end-radius: var(--range-calendar-wrap-radius);
 
   &[data-outside-month="true"],
   &[data-selection-end="true"] {
-    @apply rounded-se-3xl rounded-ee-3xl;
+    border-start-end-radius: var(--range-calendar-day-radius);
+    border-end-end-radius: var(--range-calendar-day-radius);
   }
 }
 
 /* Cell indicator - small dot at bottom center of cell */
-.range-calendar__cell-indicator {
-  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs bg-muted;
+.rp-range-calendar__cell-indicator {
+  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-xs;
+
+  --range-calendar-cell-indicator-bg: var(--muted);
+  --range-calendar-cell-indicator-bg-selected: var(--accent-foreground);
+
+  background-color: var(--range-calendar-cell-indicator-bg);
 
   /* Indicator color changes when cell is selected */
   [data-selected="true"] > & {
-    @apply bg-accent-foreground;
+    background-color: var(--range-calendar-cell-indicator-bg-selected);
   }
 }

package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts

@@ -1,70 +1,18 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const scrollShadowVariants: import("tailwind-variants").TVReturnType<{
-    hideScrollBar: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-    variant: {
-        fade: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-}, undefined, {
-    hideScrollBar: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-    variant: {
-        fade: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    hideScrollBar: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-    variant: {
-        fade: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const scrollShadowVariants: (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;
+} & {
+    hideScrollBar?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    variant?: "fade" | 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;
+    } & {
+        hideScrollBar?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+        variant?: "fade" | undefined;
+    }) | undefined) => string;
+};
 export type ScrollShadowVariants = VariantProps<typeof scrollShadowVariants>;
 //# sourceMappingURL=scroll-shadow.styles.d.ts.map

package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-shadow.styles.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-shadow/scroll-shadow.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB;;QAW3B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,UAAU;YACR,IAAI;;QAEN,QAAQ;YACN,IAAI;;;;QAIN,IAAI;YACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"scroll-shadow.styles.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-shadow/scroll-shadow.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;CA8B/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/scroll-shadow/scroll-shadow.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/scroll-shadow/scroll-shadow.styles.ts
 const scrollShadowVariants = tv({
 	defaultVariants: {
@@ -6,17 +6,17 @@ const scrollShadowVariants = tv({
 		orientation: "vertical",
 		variant: "fade"
 	},
-	slots: { base: "scroll-shadow" },
+	slots: { base: "rp-scroll-shadow" },
 	variants: {
 		hideScrollBar: {
 			false: {},
-			true: { base: "scroll-shadow--hide-scrollbar" }
+			true: { base: "rp-scroll-shadow--hide-scrollbar" }
 		},
 		orientation: {
-			horizontal: { base: "scroll-shadow--horizontal" },
-			vertical: { base: "scroll-shadow--vertical" }
+			horizontal: { base: "rp-scroll-shadow--horizontal" },
+			vertical: { base: "rp-scroll-shadow--vertical" }
 		},
-		variant: { fade: { base: "scroll-shadow--fade" } }
+		variant: { fade: { base: "rp-scroll-shadow--fade" } }
 	}
 });
 //#endregion

package/dist/components/scroll-shadow.css

@@ -1,22 +1,22 @@
 /* Base scroll-shadow component */
-.scroll-shadow {
+.rp-scroll-shadow {
   @apply relative;
   --scroll-shadow-size: 40px;
   --scroll-shadow-scrollbar-size: 10px;
 }
 
 /* Orientation: Vertical */
-.scroll-shadow--vertical {
+.rp-scroll-shadow--vertical {
   @apply scrollbar overflow-y-auto;
 }
 
 /* Orientation: Horizontal */
-.scroll-shadow--horizontal {
+.rp-scroll-shadow--horizontal {
   @apply scrollbar overflow-x-auto;
 }
 
 /* Variant: Fade - Vertical */
-.scroll-shadow--fade.scroll-shadow--vertical {
+.rp-scroll-shadow--fade.rp-scroll-shadow--vertical {
   &:where([data-top-scroll="true"], [data-bottom-scroll="true"], [data-top-bottom-scroll="true"]) {
     mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
     mask-position:
@@ -52,7 +52,7 @@
 }
 
 /* Variant: Fade - Horizontal */
-.scroll-shadow--fade.scroll-shadow--horizontal {
+.rp-scroll-shadow--fade.rp-scroll-shadow--horizontal {
   &:where([data-left-scroll="true"], [data-right-scroll="true"], [data-left-right-scroll="true"]) {
     mask-image: linear-gradient(var(--scroll-linear-gradient)), linear-gradient(#000, #000);
     mask-position:
@@ -97,7 +97,7 @@
   }
 }
 
-.scroll-shadow--hide-scrollbar {
+.rp-scroll-shadow--hide-scrollbar {
   @apply scrollbar-none;
   --scroll-shadow-scrollbar-size: 0px;
 }