@ropav/styles 0.5.0 → 0.7.0

package/dist/components/drawer.css

@@ -6,13 +6,9 @@
 /**
  * Element: trigger - the element that opens the drawer
  */
-.drawer__trigger {
+.rp-drawer__trigger {
   @apply inline-block cursor-(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -41,7 +37,7 @@
 /**
  * Element: backdrop - the overlay behind the drawer
  */
-.drawer__backdrop {
+.rp-drawer__backdrop {
   @apply fixed inset-0 z-50;
   @apply h-(--visual-viewport-height) w-full;
   opacity: 1;
@@ -70,28 +66,28 @@
 /**
  * Modifier: backdrop--transparent
  */
-.drawer__backdrop--transparent {
+.rp-drawer__backdrop--transparent {
   @apply bg-transparent;
 }
 
 /**
  * Modifier: backdrop--opaque
  */
-.drawer__backdrop--opaque {
+.rp-drawer__backdrop--opaque {
   @apply bg-backdrop;
 }
 
 /**
  * Modifier: backdrop--blur
  */
-.drawer__backdrop--blur {
+.rp-drawer__backdrop--blur {
   @apply bg-backdrop backdrop-blur-md;
 }
 
 /**
  * Element: content - the positioning wrapper for the drawer panel
  */
-.drawer__content {
+.rp-drawer__content {
   @apply pointer-events-none;
   @apply fixed inset-0 z-50 flex;
   @apply h-(--visual-viewport-height) w-full min-w-0;
@@ -101,7 +97,7 @@
  * Modifier: content--bottom (default)
  * Slides up from the bottom edge
  */
-.drawer__content--bottom {
+.rp-drawer__content--bottom {
   @apply items-end;
 }
 
@@ -109,7 +105,7 @@
  * Modifier: content--top
  * Slides down from the top edge
  */
-.drawer__content--top {
+.rp-drawer__content--top {
   @apply items-start;
 }
 
@@ -117,7 +113,7 @@
  * Modifier: content--left
  * Slides in from the left edge
  */
-.drawer__content--left {
+.rp-drawer__content--left {
   @apply justify-start;
 }
 
@@ -125,14 +121,14 @@
  * Modifier: content--right
  * Slides in from the right edge
  */
-.drawer__content--right {
+.rp-drawer__content--right {
   @apply justify-end;
 }
 
 /**
  * Element: dialog - the drawer panel itself
  */
-.drawer__dialog {
+.rp-drawer__dialog {
   @apply relative;
   @apply flex flex-col;
   @apply bg-overlay shadow-overlay outline-none;
@@ -155,15 +151,15 @@
   &[data-placement="bottom"] {
     @apply w-full;
     @apply max-h-[85vh];
-    border-start-start-radius: min(32px, var(--radius-2xl));
-    border-start-end-radius: min(32px, var(--radius-2xl));
+    border-start-start-radius: min(32px, var(--component-radius));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
 
   &[data-placement="top"] {
     @apply w-full;
     @apply max-h-[85vh];
-    border-end-start-radius: min(32px, var(--radius-2xl));
-    border-end-end-radius: min(32px, var(--radius-2xl));
+    border-end-start-radius: min(32px, var(--component-radius));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 
   /* Left/right placement: auto width, full height */
@@ -178,41 +174,41 @@
   }
 }
 
-[data-exiting="true"] .drawer__dialog {
+[data-exiting="true"] .rp-drawer__dialog {
   transition-duration: var(--drawer-exit-duration);
   transition-timing-function: var(--drawer-exit-ease);
 }
 
-.drawer__content--left .drawer__dialog,
-.drawer__content--right .drawer__dialog,
-.drawer__content--top .drawer__dialog,
-.drawer__content--bottom .drawer__dialog {
+.rp-drawer__content--left .rp-drawer__dialog,
+.rp-drawer__content--right .rp-drawer__dialog,
+.rp-drawer__content--top .rp-drawer__dialog,
+.rp-drawer__content--bottom .rp-drawer__dialog {
   translate: 0 0;
 }
 
-.drawer__content--left[data-entering="true"] .drawer__dialog,
-.drawer__content--left[data-exiting="true"] .drawer__dialog {
+.rp-drawer__content--left[data-entering="true"] .rp-drawer__dialog,
+.rp-drawer__content--left[data-exiting="true"] .rp-drawer__dialog {
   translate: -100% 0;
 }
 
-.drawer__content--right[data-entering="true"] .drawer__dialog,
-.drawer__content--right[data-exiting="true"] .drawer__dialog {
+.rp-drawer__content--right[data-entering="true"] .rp-drawer__dialog,
+.rp-drawer__content--right[data-exiting="true"] .rp-drawer__dialog {
   translate: 100% 0;
 }
 
-.drawer__content--top[data-entering="true"] .drawer__dialog,
-.drawer__content--top[data-exiting="true"] .drawer__dialog {
+.rp-drawer__content--top[data-entering="true"] .rp-drawer__dialog,
+.rp-drawer__content--top[data-exiting="true"] .rp-drawer__dialog {
   translate: 0 -100%;
 }
 
-.drawer__content--bottom[data-entering="true"] .drawer__dialog,
-.drawer__content--bottom[data-exiting="true"] .drawer__dialog {
+.rp-drawer__content--bottom[data-entering="true"] .rp-drawer__dialog,
+.rp-drawer__content--bottom[data-exiting="true"] .rp-drawer__dialog {
   translate: 0 100%;
 }
 
-.drawer__dialog--top {
+.rp-drawer__dialog--top {
   @apply pb-2;
-  .drawer__handle {
+  .rp-drawer__handle {
     @apply pb-0;
   }
 }
@@ -220,7 +216,7 @@
 /**
  * Element: header - the top section with the title
  */
-.drawer__header {
+.rp-drawer__header {
   @apply flex flex-col gap-3;
   @apply mb-0;
 }
@@ -228,7 +224,7 @@
 /**
  * Element: heading - the main title text
  */
-.drawer__heading {
+.rp-drawer__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
 }
@@ -237,7 +233,7 @@
  * Element: body - the main content area
  * touch-action: pan-y allows vertical scrolling while the dialog captures drag gestures
  */
-.drawer__body {
+.rp-drawer__body {
   @apply min-h-0 flex-1 scrollbar;
   @apply text-sm leading-[1.43] text-muted;
   @apply -m-[3px] my-0 p-[3px];
@@ -248,7 +244,7 @@
 /**
  * Element: footer - the bottom action section
  */
-.drawer__footer {
+.rp-drawer__footer {
   @apply flex flex-row items-center justify-end gap-2;
   @apply mt-0;
 }
@@ -256,7 +252,7 @@
 /**
  * Element: handle - visual drag handle indicator
  */
-.drawer__handle {
+.rp-drawer__handle {
   @apply flex items-center justify-center;
   @apply pb-2;
 
@@ -270,29 +266,29 @@
 /**
  * Element: close-trigger - the close button
  */
-.drawer__close-trigger {
+.rp-drawer__close-trigger {
   @apply absolute end-4 top-4;
 }
 
 /**
  * Elements Spacing
  */
-.drawer__header + .drawer__body {
+.rp-drawer__header + .rp-drawer__body {
   @apply mt-2;
 }
 
-.drawer__header + .drawer__footer {
+.rp-drawer__header + .rp-drawer__footer {
   @apply mt-5;
 }
 
-.drawer__body + .drawer__footer {
+.rp-drawer__body + .rp-drawer__footer {
   @apply mt-5;
 }
 
-.drawer__handle + .drawer__header {
+.rp-drawer__handle + .rp-drawer__header {
   @apply mt-0;
 }
 
-.drawer__handle + .drawer__body {
+.rp-drawer__handle + .rp-drawer__body {
   @apply mt-0;
 }

package/dist/components/drop-zone/drop-zone.styles.d.ts

@@ -0,0 +1,13 @@
+import type { VariantProps } from "../../tv";
+export declare const dropZoneVariants: (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;
+    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;
+};
+export type DropZoneVariants = VariantProps<typeof dropZoneVariants>;
+//# sourceMappingURL=drop-zone.styles.d.ts.map

package/dist/components/drop-zone/drop-zone.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.styles.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/drop-zone.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,gBAAgB;;;;;;;;;CAK3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/drop-zone/drop-zone.styles.js

@@ -0,0 +1,8 @@
+import { tv } from "../../tv.js";
+//#region src/components/drop-zone/drop-zone.styles.ts
+const dropZoneVariants = tv({ slots: {
+	base: "rp-drop-zone",
+	trigger: "rp-drop-zone__trigger"
+} });
+//#endregion
+export { dropZoneVariants };

package/dist/components/drop-zone/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./drop-zone.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drop-zone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/drop-zone/index.js

@@ -0,0 +1,2 @@
+import { dropZoneVariants } from "./drop-zone.styles.js";
+export { dropZoneVariants };

package/dist/components/drop-zone.css

@@ -0,0 +1,78 @@
+/* Drop zone component styles */
+
+.rp-drop-zone {
+  @apply relative flex w-full flex-col items-center justify-center gap-2 rounded-component p-6 text-center text-sm outline-none;
+
+  /* The dashed edge is this component's whole affordance, so it is painted from `--border`
+   * rather than `--field-border`: the default theme sets that to `transparent` with a width of
+   * `0`, which is right for an input sitting on a filled background and wrong for a region
+   * whose only boundary is the line itself. */
+  --drop-zone-border: var(--border);
+  --drop-zone-bg: transparent;
+  --drop-zone-fg: var(--muted);
+
+  border: var(--border-width) dashed var(--drop-zone-border);
+  background-color: var(--drop-zone-bg);
+  color: var(--drop-zone-fg);
+
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      --drop-zone-border: var(--field-border-hover);
+    }
+  }
+
+  /* The ring is painted for the hidden file input inside, which is what a keyboard focuses. */
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* A drag the zone would take. Both the line and the fill move, because the fill alone is a
+   * ~15% tint that a light theme barely separates from the page. */
+  &[data-drop-target="true"] {
+    --drop-zone-border: var(--accent);
+    --drop-zone-bg: var(--accent-soft);
+    --drop-zone-fg: var(--foreground);
+  }
+
+  /* A drag carrying a type `accept` rules out.
+   *
+   * Accept takes `--accent` to match the one drop state the library already had
+   * (`--table-cell-bg-drop-target`), which leaves the two verdicts a hue apart in most themes
+   * but nearly together in one whose accent is itself red — measured at hue 28 for both under
+   * `netflix`, separated only by lightness. That is a collision only the theme can settle, and
+   * the properties above are how: repoint `--drop-zone-border` and `--drop-zone-bg`. */
+  &[data-status="reject"] {
+    --drop-zone-border: var(--danger);
+    --drop-zone-bg: var(--danger-soft);
+    --drop-zone-fg: var(--foreground);
+  }
+
+  /* Forced Colors Mode forces every colour to a system keyword, so the accent and danger fills
+   * above flatten onto the page and the three states become one dashed box. The border is the
+   * only channel left that the platform still lets a rule choose, hence the keywords. */
+  @media (forced-colors: active) {
+    &[data-drop-target="true"] {
+      border-color: Highlight;
+    }
+
+    &[data-status="reject"] {
+      border-color: LinkText;
+    }
+  }
+
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.rp-drop-zone__trigger {
+  @apply rounded-field underline underline-offset-2 outline-none;
+
+  cursor: var(--cursor-interactive);
+}

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

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

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

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

package/dist/components/dropdown/dropdown.styles.js

@@ -1,10 +1,10 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/dropdown/dropdown.styles.ts
 const dropdownVariants = tv({ slots: {
-	menu: "menu dropdown__menu",
-	popover: "dropdown__popover",
-	root: "dropdown",
-	trigger: "dropdown__trigger"
+	menu: "rp-menu rp-dropdown__menu",
+	popover: "rp-dropdown__popover",
+	root: "rp-dropdown",
+	trigger: "rp-dropdown__trigger"
 } });
 //#endregion
 export { dropdownVariants };

package/dist/components/dropdown.css

@@ -2,30 +2,28 @@
    Base dropdown styles
    ========================================================================== */
 
-.dropdown {
+.rp-dropdown {
   @apply flex flex-col gap-1;
 }
 
-.dropdown__trigger {
+.rp-dropdown__trigger {
   @apply inline-block;
   /* Only visible when using a custom trigger  - not passing "Button" as a child - hence we use some button styles (custom trigger) */
   @apply outline-none;
 
-  /* A custom trigger borrows the button's look by wearing its classes, and the `outline-none`
-   * above lands later in the cascade than the button's own forced-colors edge, stripping it back
-   * off. Handed back here rather than on the bare trigger: when a `Button` is passed as a child
-   * instead, this element is only a wrapper around it and an outline would draw a second ring
-   * around the real one. */
-  &.button {
+  /* A custom trigger borrows the button's look by wearing its classes, and the declarations
+   * above land later in the cascade than the button's own, stripping its centring and its
+   * forced-colors edge back off. Handed back here rather than on the bare trigger: when a
+   * `Button` is passed as a child instead, this element is only a wrapper around it - an inline
+   * box is what that wants, and an outline would draw a second ring around the real one. */
+  &.rp-button {
+    @apply inline-flex;
+
     @media (forced-colors: active) {
       outline: 1px solid ButtonBorder;
       outline-offset: -1px;
     }
   }
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-out-quart),
     background-color 150ms var(--ease-smooth),
@@ -60,7 +58,7 @@
 }
 
 /* Similar to select popover styles */
-.dropdown__popover {
+.rp-dropdown__popover {
   @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm will-change-transform md:min-w-55;
   border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
@@ -121,8 +119,8 @@
     rotate: 90deg;
   }
 
-  /* Menu styles. The block itself is `.menu`; these are the dropdown's departures from it, and
-   * they sit here rather than on `.dropdown__menu` because `menu.css` is imported after this file
+  /* Menu styles. The block itself is `.rp-menu`; these are the dropdown's departures from it, and
+   * they sit here rather than on `.rp-dropdown__menu` because `menu.css` is imported after this file
    * and would otherwise win at equal specificity. */
   [data-slot="dropdown-menu"] {
     @apply gap-0.5 p-1.5 outline-none;

package/dist/components/empty-state/empty-state.styles.d.ts

@@ -1,4 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const emptyStateVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "empty-state", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const emptyStateVariants: (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) => string;
 export type EmptyStateVariants = VariantProps<typeof emptyStateVariants>;
 //# sourceMappingURL=empty-state.styles.d.ts.map

package/dist/components/empty-state/empty-state.styles.d.ts.map

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

package/dist/components/empty-state/empty-state.styles.js

@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/empty-state/empty-state.styles.ts
-const emptyStateVariants = tv({ base: "empty-state" });
+const emptyStateVariants = tv({ base: "rp-empty-state" });
 //#endregion
 export { emptyStateVariants };

package/dist/components/empty-state.css

@@ -1,4 +1,4 @@
 /* Base empty-state styles */
-.empty-state {
+.rp-empty-state {
   @apply p-2 text-sm text-muted;
 }

package/dist/components/error-message/error-message.styles.d.ts

@@ -1,4 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const errorMessageVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "error-message", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const errorMessageVariants: (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) => string;
 export type ErrorMessageVariants = VariantProps<typeof errorMessageVariants>;
 //# sourceMappingURL=error-message.styles.d.ts.map

package/dist/components/error-message/error-message.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/error-message.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,oBAAoB,0KAE/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"error-message.styles.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/error-message.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,oBAAoB;;kCAE/B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/error-message/error-message.styles.js

@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/error-message/error-message.styles.ts
-const errorMessageVariants = tv({ base: "error-message" });
+const errorMessageVariants = tv({ base: "rp-error-message" });
 //#endregion
 export { errorMessageVariants };

package/dist/components/error-message.css

@@ -1,11 +1,7 @@
 /* Base error message styles */
-.error-message {
+.rp-error-message {
   @apply h-auto text-xs wrap-break-word text-danger;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     height 350ms var(--ease-smooth);

package/dist/components/field-error/field-error.styles.d.ts

@@ -1,4 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const fieldErrorVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "field-error", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const fieldErrorVariants: (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) => string;
 export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;
 //# sourceMappingURL=field-error.styles.d.ts.map

package/dist/components/field-error/field-error.styles.d.ts.map

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

package/dist/components/field-error/field-error.styles.js

@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/field-error/field-error.styles.ts
-const fieldErrorVariants = tv({ base: "field-error" });
+const fieldErrorVariants = tv({ base: "rp-field-error" });
 //#endregion
 export { fieldErrorVariants };

package/dist/components/field-error.css

@@ -1,11 +1,7 @@
 /* Field error styles */
-.field-error {
+.rp-field-error {
   @apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-visible:h-auto data-visible:opacity-100;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     height 350ms var(--ease-smooth);
@@ -16,12 +12,12 @@
  * Toggle fields (checkbox/switch): stack below the label like description.
  * Disable collapsible height/opacity — those styles break flex-col content layout.
  */
-.checkbox > .field-error,
-.checkbox > [data-slot="field-error"],
-.switch > .field-error,
-.switch > [data-slot="field-error"],
-.radio > .field-error,
-.radio > [data-slot="field-error"] {
+.rp-checkbox > .rp-field-error,
+.rp-checkbox > [data-slot="field-error"],
+.rp-switch > .rp-field-error,
+.rp-switch > [data-slot="field-error"],
+.rp-radio > .rp-field-error,
+.rp-radio > [data-slot="field-error"] {
   @apply m-0 h-auto min-h-0 p-0 text-muted opacity-100;
   transition: none;
 }