@ropav/styles 0.5.0 → 0.7.0

package/README.md

@@ -2,13 +2,19 @@
 
 The style layer behind [`ropav`](https://www.npmjs.com/package/ropav): plain CSS for every component,
 themes, utilities, and custom variants, plus `tv()` variants that do nothing but map props to class names.
-Framework-agnostic — not a line of Vue or React in it. `dependencies` are `tailwind-variants` and
-`tw-animate-css`; the only peer is `tailwindcss`.
+Framework-agnostic — not a line of Vue or React in it. The only `dependency` is `tw-animate-css`;
+the only peer is `tailwindcss`.
+
+**[Theming guide](https://ropav.netlify.app/theming/)** ·
+[Tokens](https://ropav.netlify.app/theming/tokens) ·
+[Class names](https://ropav.netlify.app/theming/class-names) ·
+[State colors](https://ropav.netlify.app/theming/state-colors)
 
 ## Provenance
 
 A derivative work of [`@heroui/styles@3.2.4`](https://github.com/heroui-inc/heroui/tree/v3.2.4/packages/styles),
-vendored into this workspace so the style layer can be fixed in place. See the root [README](../../README.md).
+vendored into this workspace so the style layer can be fixed in place. See
+[`ropav`](https://www.npmjs.com/package/ropav) for the rest.
 
 ## Installation
 
@@ -34,7 +40,7 @@ That single line pulls in, in layer order (`theme, base, components, utilities`)
 
 - Tailwind CSS v4 and `tw-animate-css`
 - base styles and the scrollbar system
-- the component layer — 85 files, one per component
+- the component layer — 88 files, one per component
 - the default theme: tokens for light and dark
 - utilities and custom variants
 
@@ -59,7 +65,7 @@ That single line pulls in, in layer order (`theme, base, components, utilities`)
 ```ts
 import {buttonVariants, type ButtonVariants} from "@ropav/styles";
 
-buttonVariants({variant: "primary", size: "sm"}); // "button button--primary button--sm"
+buttonVariants({variant: "primary", size: "sm"}); // "rp-button rp-button--primary rp-button--sm"
 ```
 
 Every component also has its own subpath so bundlers can drop the rest:
@@ -73,7 +79,7 @@ packages/styles/
 ├── base/
 │   ├── base.css           # Layout tokens, typography, resets
 │   └── scrollbar.css      # Scrollbar system
-├── components/            # 85 CSS files, one per component
+├── components/            # 88 CSS files, one per component
 ├── themes/
 │   ├── default.css        # Default theme — hand-written, light and dark token sets
 │   ├── sky.css … rabbit.css  # Ten more themes — generated, do not edit
@@ -88,22 +94,31 @@ packages/styles/
 
 ## Class naming
 
-BEM, so a class can be read without looking it up:
+Prefixed BEM, so a class can be read without looking it up and belongs to nobody else:
 
-- **Block** — the component itself: `.button`, `.card`, `.alert`
-- **Modifier** — a variation, double dash: `.button--primary`, `.button--lg`, `.button--icon-only`
-- **Element** — a part of the component, double underscore: `.card__header`, `.alert__icon`
+- **Prefix** — `rp-`, on every class the component layer defines
+- **Block** — the component itself: `.rp-button`, `.rp-card`, `.rp-alert`
+- **Modifier** — a variation, double dash: `.rp-button--primary`, `.rp-button--lg`, `.rp-button--icon-only`
+- **Element** — a part of the component, double underscore: `.rp-card__header`, `.rp-alert__icon`
 
 ```html
-<button class="button">Click me</button>
-<button class="button button--primary">Save</button>
-<button class="button button--primary button--sm">Small primary</button>
+<button class="rp-button">Click me</button>
+<button class="rp-button rp-button--primary">Save</button>
+<button class="rp-button rp-button--primary rp-button--sm">Small primary</button>
 ```
 
+**The prefix is not decoration.** Component rules live in the `components` layer and a host app's
+CSS is usually unlayered, so the host wins every property it declares — and what leaks onto it is
+every property it never mentioned. A host element wearing a bare `menu` or `card` would inherit
+half a component and no error anywhere. `rp-` is what stops the library from claiming names it does
+not own; keyframes and `view-transition-class` names carry it for the same reason, being
+document-global too. `tests/styles/class-prefix.test.ts` in `ropav` fails on any that does not.
+
 Two conventions the whole layer relies on:
 
-**Default size lives in the base class.** `.button` already renders at the `--md` size, so `.button--md` is an
-empty rule with a comment saying why. A component with no size modifier never looks broken.
+**Default size lives in the base class.** `.rp-button` already renders at the `--md` size, so
+`.rp-button--md` is an empty rule with a comment saying why. A component with no size modifier
+never looks broken.
 
 **State keys on `data-*`, with a pseudo-class fallback.** Interactive rules are written as
 `&:hover, &[data-hovered="true"]`, `&:active, &[data-pressed="true"]`, `&:focus-visible,
@@ -112,6 +127,13 @@ component that publishes it as an attribute.
 
 `components/button.css` is the densest example of both — read it before writing a new component file.
 
+**Every `ropav` component takes a `class` prop**, appended to the classes its `tv()` recipe
+carries. A utility passed that way wins on cascade order alone — component rules live in the
+`components` layer, utilities in the later `utilities` one — so nothing has to be stripped for it
+to take effect. That is the first thing to reach for. It cannot reach a part drawn in
+`::before`/`::after`, and it flattens every state of whatever property it sets — see
+[State colors](#state-colors) for the way round both.
+
 ## Theming
 
 Two independent axes. `data-theme` picks the palette, a `light`/`dark` class picks the appearance:
@@ -203,6 +225,80 @@ scrollbar set, and shadows.
 stale the moment a token moves. `themes/shared/theme.css` holds what is derived from those tokens: the
 `--radius-xs` … `--radius-4xl` scale and the easing curves.
 
+### State colors
+
+A component's own properties are the third tier, declared on its block and private to its file —
+`--button-bg`, `--switch-control-bg-checked-hover`, `--sidebar-rail-line`. The convention:
+
+> **A color a state rule paints goes through a custom property — where more than one state paints
+> that property.**
+
+That is what makes one state retunable on its own. A color written straight into the rule is not:
+the resting and the lit value are the same property on the same element, so the one declaration a
+caller writes to change either beats every state rule at once — and a utility beats them all
+whatever their specificity, `utilities` being a later layer than `components`. The only way left is
+to restate the whole state set behind `:not()`, which drifts silently the day a state is added.
+
+So a caller sets the property instead, and the states that read the others are left standing:
+
+```html
+<!-- No line at rest; it still flares on hover and while dragging. -->
+<Sidebar class="[--sidebar-rail-line:transparent]">
+```
+
+The qualifier is what keeps this from becoming surface for its own sake. Where exactly one state
+paints a property, a caller can name that state from the call site — `hover:bg-*`, `focus-visible:outline-*` —
+and there is no other state for it to flatten, so no property is minted. It is the second state
+painting the same thing that makes the call site unable to tell them apart.
+
+Defaults chain, so retuning one carries the states below it unless they are set too —
+`--sidebar-rail-line-dragging` follows `--sidebar-rail-line-hover`, the way `--button-bg-pressed`
+follows `--button-bg-hover`. Read `components/button.css` for the shape and
+`components/sidebar.css` for a part painted on a pseudo-element, which a class cannot reach at all.
+
+Two limits. The properties are per component and resolve to the tokens above, so a palette change
+belongs in a theme rather than here. And Forced Colors Mode is not covered: those blocks paint the
+system keywords, which are the only colors exempt from the override and not a component's to
+retune — `[--sidebar-rail-line:transparent]` leaves the line drawn under High Contrast, on purpose.
+
+`state-colors.test.ts` in the `ropav` package reads every component file and fails on a state color
+that does not go through a property. Its ledger of exceptions is currently empty, so an entry
+appearing there is debt to pay down rather than a licence to add more.
+
+### Translucent surfaces
+
+A `surface--transparent` paints nothing of its own, and so does a surface a caller has thinned to
+let something through — a blurred header, a panel over an image, a window whose material the OS
+draws. What sits on one of those has no way to know what is behind it, and that splits the palette
+in two.
+
+**Safe on anything: the tokens that are an alpha.** `--state-layer` is what a state paints, and
+`--separator` and `--border` are the lines — each an alpha of `--surface-foreground` rather than a
+neutral of its own. An alpha darkens or lightens whatever it lands on, so it holds its contrast
+against a fill it was never tuned for: another surface, the far half of the theme, or a photograph.
+The `-soft` family and `--scrollbar-thumb` are alphas too, which is why a selection is
+`--accent-soft` wherever the library marks one.
+
+**Not safe: the fills.** `--default`, `--accent`, the status colors, `--surface` and its secondary
+and tertiary steps are opaque, and they are meant to be — a badge you can read the page through is a
+broken badge. They assume a background because they *are* one. Use them to fill a box, never to mark
+a state on a box that is already transparent.
+
+`--surface-hover` sits on the fill side of that line despite the name: it is a surface that has been
+tinted and stays opaque, for a component opaque at rest whose hover must stay that way.
+`--state-layer` is the one for a component transparent at rest. Reaching for the wrong one fails
+quietly — a translucent hover on an opaque tag shows the page through it, and a flat neutral on a
+transparent row vanishes the moment the fill behind it matches.
+
+The line between the two is what a color is for, not what it looks like. `--default` is a fine grey
+until it is asked to be a state layer: then it is a fixed lightness laid on an unknown one, and the
+day those two match it is gone with nothing to fail but the eye.
+
+**Contrast on a translucent surface is the app's to guarantee.** `contrast.browser.test.ts` holds
+the floor for text on the fills, where both sides are known. Once the background is whatever happens
+to be behind the window, ropav cannot see it and does not claim to — an app that thins a surface
+owns the legibility of what it puts there.
+
 ### Reduced motion
 
 `data-reduce-motion="true"` on any ancestor forces animations off, `"false"` forces them on regardless

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

@@ -1,53 +1,50 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const accordionVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: {};
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    bodyInner: string;
-    heading: string;
-    indicator: string;
-    item: string;
-    panel: string;
-    trigger: string;
-}, undefined, {
-    variant: {
-        default: {};
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    bodyInner: string;
-    heading: string;
-    indicator: string;
-    item: string;
-    panel: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: {};
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    bodyInner: string;
-    heading: string;
-    indicator: string;
-    item: string;
-    panel: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const accordionVariants: (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?: "default" | "surface" | 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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    body: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    bodyInner: (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;
+    } & {
+        variant?: "default" | "surface" | 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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | 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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    item: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    panel: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | 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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+};
 type DisclosureRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
 export type AccordionVariants = Omit<VariantProps<typeof accordionVariants>, DisclosureRenderPropsKeys>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;QAaxB,OAAO;QACP,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAGH,KAAK,yBAAyB,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EACtC,yBAAyB,CAC1B,CAAC"}
+{"version":3,"file":"accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB5B,CAAC;AAGH,KAAK,yBAAyB,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EACtC,yBAAyB,CAC1B,CAAC"}

package/dist/components/accordion/accordion.styles.js

@@ -1,19 +1,19 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/accordion/accordion.styles.ts
 const accordionVariants = tv({
 	slots: {
-		base: "accordion",
-		body: "accordion__body",
-		bodyInner: "accordion__body-inner",
-		heading: "accordion__heading",
-		indicator: "accordion__indicator",
-		item: "accordion__item",
-		panel: "accordion__panel",
-		trigger: "accordion__trigger"
+		base: "rp-accordion",
+		body: "rp-accordion__body",
+		bodyInner: "rp-accordion__body-inner",
+		heading: "rp-accordion__heading",
+		indicator: "rp-accordion__indicator",
+		item: "rp-accordion__item",
+		panel: "rp-accordion__panel",
+		trigger: "rp-accordion__trigger"
 	},
 	variants: { variant: {
 		default: {},
-		surface: { base: "accordion--surface" }
+		surface: { base: "rp-accordion--surface" }
 	} }
 });
 //#endregion

package/dist/components/accordion.css

@@ -1,5 +1,5 @@
 /* Base accordion styles */
-.accordion {
+.rp-accordion {
   @apply w-full;
 
   /* Performance optimization - contain layout changes */
@@ -7,19 +7,19 @@
 }
 
 /* Accordion elements */
-.accordion__body {
+.rp-accordion__body {
   @apply text-sm;
 }
 
-.accordion__body-inner {
+.rp-accordion__body-inner {
   @apply px-4 pt-0 pb-4 text-muted;
 }
 
-.accordion__heading {
+.rp-accordion__heading {
   @apply flex;
 }
 
-.accordion__indicator {
+.rp-accordion__indicator {
   @apply ms-auto size-4 shrink-0 text-muted;
 
   /**
@@ -34,35 +34,31 @@
 }
 
 /* Accordion Item - Separator styles */
-.accordion__item {
+.rp-accordion__item {
   @apply relative border-none;
 }
 
-.accordion__item::after {
+.rp-accordion__item::after {
   content: "";
   @apply absolute start-0 bottom-0 h-px w-full rounded-xs bg-separator;
 }
 
-.accordion__item:last-child::after {
+.rp-accordion__item:last-child::after {
   content: none;
 }
 
 /* Hide separator when hideSeparator prop is set */
-.accordion__item[data-hide-separator="true"]::after {
+.rp-accordion__item[data-hide-separator="true"]::after {
   display: none;
 }
 /* ------------------------------------ */
 
-.accordion__trigger {
+.rp-accordion__trigger {
   cursor: var(--cursor-interactive);
 
   /* Base Styles */
   @apply flex flex-1 items-center justify-between px-4 py-4 text-start text-sm font-medium no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     opacity 150ms var(--ease-out),
     box-shadow 150ms var(--ease-out);
@@ -93,15 +89,11 @@
   }
 }
 
-.accordion__panel {
+.rp-accordion__panel {
   opacity: 0;
   height: var(--disclosure-panel-height);
   overflow: clip;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     height 200ms var(--ease-out-quad),
     opacity 200ms var(--ease-out);
@@ -114,7 +106,7 @@
 }
 
 /* Surface variant */
-.accordion--surface {
+.rp-accordion--surface {
   @apply bg-surface;
   border-radius: min(32px, var(--component-radius));
 
@@ -125,21 +117,21 @@
     outline-offset: -1px;
   }
 
-  .accordion__trigger {
+  .rp-accordion__trigger {
     @media (hover: hover) {
       &:hover:not([aria-expanded="true"]),
       &[data-hovered="true"]:not([aria-expanded="true"]) {
-        @apply bg-default;
+        @apply bg-state-layer;
       }
     }
   }
 
-  .accordion__item::after {
+  .rp-accordion__item::after {
     @apply bg-surface-foreground/6;
   }
 }
 
-.accordion--surface .accordion__item {
+.rp-accordion--surface .rp-accordion__item {
   /* Surface variant separator styling */
   &::after {
     @apply start-[3%] w-[94%];

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

@@ -1,76 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const alertVariants: import("tailwind-variants").TVReturnType<{
-    status: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    indicator: string;
-    title: string;
-}, undefined, {
-    status: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    indicator: string;
-    title: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    status: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    indicator: string;
-    title: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const alertVariants: (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;
+} & {
+    status?: "accent" | "danger" | "default" | "success" | "warning" | 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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | 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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+    description: (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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | 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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+    title: (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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+};
 export type AlertVariants = VariantProps<typeof alertVariants>;
 //# sourceMappingURL=alert.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert.styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAapB,MAAM;YACJ,IAAI;;QAEN,MAAM;YACJ,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"alert.styles.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/alert/alert.styles.js

@@ -1,20 +1,20 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/alert/alert.styles.ts
 const alertVariants = tv({
 	defaultVariants: { status: "default" },
 	slots: {
-		base: "alert",
-		content: "alert__content",
-		description: "alert__description",
-		indicator: "alert__indicator",
-		title: "alert__title"
+		base: "rp-alert",
+		content: "rp-alert__content",
+		description: "rp-alert__description",
+		indicator: "rp-alert__indicator",
+		title: "rp-alert__title"
 	},
 	variants: { status: {
-		accent: { base: "alert--accent" },
-		danger: { base: "alert--danger" },
-		default: { base: "alert--default" },
-		success: { base: "alert--success" },
-		warning: { base: "alert--warning" }
+		accent: { base: "rp-alert--accent" },
+		danger: { base: "rp-alert--danger" },
+		default: { base: "rp-alert--default" },
+		success: { base: "rp-alert--success" },
+		warning: { base: "rp-alert--warning" }
 	} }
 });
 //#endregion