@ropav/styles 0.5.0 → 0.7.0

package/dist/components/sidebar.css

@@ -13,17 +13,31 @@
  * so it belongs where a state key belongs and not in the class list.
  */
 
-.sidebar {
+.rp-sidebar {
   /* The two widths the panel resolves between. Held on the shell rather than the panel so a caller
    * retunes both from one place, and so a drag can write the expanded one to the same property the
    * stylesheet reads. */
   --sidebar-width: calc(var(--spacing) * 64);
   --sidebar-width-icon: calc(var(--spacing) * 14);
+  /* The gap a card stands off by and the corner it wears, for the variants where something is
+   * a card: the panel under `--floating`, the inset under `--card`. One pair rather than two,
+   * because a variant makes exactly one of them a card and a second set would be the same two
+   * numbers under a name that is wrong half the time.
+   *
+   * The corner is the one every container in the library wears, so a sidebar's card and a Card
+   * dropped beside it round the same. */
+  --sidebar-card-gap: calc(var(--spacing) * 2);
+  --sidebar-card-radius: min(32px, var(--component-radius));
   /* The rail's line and the grab area around it, matching `splitter.css` — same hairline, same
    * reasoning about a target no one can hit, same wait before it flares. */
   --sidebar-rail-gutter: 1px;
   --sidebar-rail-target: 15px;
   --sidebar-highlight-delay: 500ms;
+  /* What the line is painted with, at rest and lit. Separate properties so a caller can retune one
+   * state without flattening the rest onto a single colour. */
+  --sidebar-rail-line: var(--separator);
+  --sidebar-rail-line-hover: var(--accent);
+  --sidebar-rail-line-dragging: var(--sidebar-rail-line-hover);
 
   @apply isolate flex h-full w-full;
 }
@@ -31,11 +45,11 @@
 /* Reversing the row rather than reordering the parts: the shell's children are written panel,
  * rail, inset in that order whichever side the sidebar is on, so the rail stays between the two
  * either way and a caller's markup does not change with the prop. */
-.sidebar--left {
+.rp-sidebar--left {
   @apply flex-row;
 }
 
-.sidebar--right {
+.rp-sidebar--right {
   @apply flex-row-reverse;
 }
 
@@ -43,18 +57,14 @@
    Panel — the nav landmark
    ========================================================================== */
 
-/* `min-h-0` for the same reason `.splitter__panel` has it: a flex item's automatic minimum is its
+/* `min-h-0` for the same reason `.rp-splitter__panel` has it: a flex item's automatic minimum is its
  * content, so a long nav list would push the panel past the viewport instead of scrolling inside
- * `.sidebar__content`. */
-.sidebar__panel {
+ * `.rp-sidebar__content`. */
+.rp-sidebar__panel {
   @apply relative flex min-h-0 shrink-0 grow-0 flex-col overflow-hidden bg-surface text-surface-foreground;
 
   inline-size: var(--sidebar-width);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: inline-size 200ms var(--ease-out);
   @apply motion-reduce:transition-none;
 }
@@ -62,23 +72,50 @@
 /* Under the pointer the panel follows it exactly. Easing towards each frame's width instead makes
  * the edge lag the cursor by the whole duration, which reads as the panel chasing the drag rather
  * than being dragged. */
-.sidebar__panel[data-resizing="true"] {
+.rp-sidebar__panel[data-resizing="true"] {
+  transition: none;
+}
+
+/* And while a stored layout is being put back: that width is where the sidebar starts, not
+ * somewhere it moved to. */
+.rp-sidebar__panel[data-restoring="true"] {
   transition: none;
 }
 
 /* The separating line is a border rather than a background, so it is one of the few things Forced
  * Colors Mode recolours instead of flattening — no restatement needed here. */
-.sidebar__panel--left {
+.rp-sidebar__panel--left {
   @apply border-e border-separator/50;
 }
 
-.sidebar__panel--right {
+.rp-sidebar__panel--right {
   @apply border-s border-separator/50;
 }
 
+/* Neither fill nor line: the panel has stopped being a surface, and the inset beside it is the one
+ * that paints. After the side modifiers, whose border this has to beat at equal specificity, and
+ * before `--drawer`, which stays last for the reason given there. */
+.rp-sidebar__panel--bare {
+  @apply border-0 bg-transparent;
+}
+
+/* The panel as a card of its own, standing off the page on every side. A whole border rather than
+ * the side modifiers' single edge, which at equal specificity is enough to overwrite it — no
+ * `border-0` first.
+ *
+ * The margin is what the rail then sits in, and that gap is already dividing the two, which is why
+ * this variant quiets the line: a hairline inside it would be a second answer to the same question.
+ */
+.rp-sidebar__panel--floating {
+  @apply border border-separator/50 shadow-surface;
+
+  margin: var(--sidebar-card-gap);
+  border-radius: var(--sidebar-card-radius);
+}
+
 /* Collapsing to icons is the default, so the width it collapses to lives on the mode that has one
  * and `--none` is the empty rule. */
-.sidebar__panel--icon[data-collapsed="true"] {
+.rp-sidebar__panel--icon[data-collapsed="true"] {
   inline-size: var(--sidebar-width-icon);
 }
 
@@ -89,22 +126,30 @@
  * border paints no background either way. Saying so is what keeps the Storybook forced-colors
  * sweep honest — it reads this panel as one that painted a surface and then lost it to the mode,
  * where in truth there was never anything on screen to lose. */
-.sidebar__panel--offcanvas[data-collapsed="true"] {
+.rp-sidebar__panel--offcanvas[data-collapsed="true"] {
   @apply border-0 bg-transparent;
 
   inline-size: 0;
+  /* And the standing-off a card variant asks for, which on a box no longer there is a gap held
+   * open around nothing — the same fault as the hairline, a little wider. */
+  margin: 0;
 }
 
-.sidebar__panel--none {
+.rp-sidebar__panel--none {
 }
 
 /* Inside a drawer the panel is no longer the surface — the dialog is, and it paints, sizes and
- * slides itself. The panel gives all three up and becomes the column that fills what it was handed.
- * Last of the panel's modifiers, so it beats the widths above at equal specificity. */
-.sidebar__panel--drawer {
+ * slides itself. The panel gives all of that up and becomes the column that fills what it was
+ * handed, the standing-off and the corner of a card variant included: the dialog is already the
+ * shape, and a card inset within it would be a second one drawn inside the first.
+ * Last of the panel's modifiers, so it beats the widths and the card geometry above at equal
+ * specificity. */
+.rp-sidebar__panel--drawer {
   @apply size-full border-0 bg-transparent;
 
   inline-size: auto;
+  margin: 0;
+  border-radius: 0;
   transition: none;
 }
 
@@ -112,7 +157,7 @@
    Header, content, footer
    ========================================================================== */
 
-.sidebar__header {
+.rp-sidebar__header {
   @apply flex shrink-0 flex-col gap-2 p-2;
 }
 
@@ -123,16 +168,16 @@
  * the nearest edge, which is exactly where the fade is, so a keyboard user tabbing down the nav
  * would land on item after item with its focus ring faded out. The padding moves that landing
  * point clear of the fade. Sized from the same property the fade is, so retuning one moves both. */
-.sidebar__content {
+.rp-sidebar__content {
   @apply flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto p-2;
 
   scroll-padding-block: var(--scroll-shadow-size, 0px);
 }
 
 /* Two classes to beat one: `scroll-shadow.css` is imported under Layout, long after this file under
- * Navigation, so `.scroll-shadow--vertical`'s `scrollbar` wins at equal specificity and the nav
+ * Navigation, so `.rp-scroll-shadow--vertical`'s `scrollbar` wins at equal specificity and the nav
  * would grow a full-width scrollbar the moment it became a shadow container. */
-.sidebar__content.scroll-shadow {
+.rp-sidebar__content.rp-scroll-shadow {
   @apply scrollbar-thin;
 
   /* The fade is a `mask-image` over the rows, which in Forced Colors Mode means system-coloured
@@ -145,7 +190,7 @@
   }
 }
 
-.sidebar__footer {
+.rp-sidebar__footer {
   @apply flex shrink-0 flex-col gap-2 p-2;
 }
 
@@ -153,19 +198,19 @@
    Groups
    ========================================================================== */
 
-.sidebar__group {
+.rp-sidebar__group {
   @apply flex w-full min-w-0 flex-col gap-0.5;
 }
 
-/* Matches `.header`, which is the same muted label above the same kind of list. */
-.sidebar__group-label {
+/* Matches `.rp-header`, which is the same muted label above the same kind of list. */
+.rp-sidebar__group-label {
   @apply w-full truncate px-2 pt-1.5 pb-1 text-start text-xs font-medium text-muted;
 }
 
 /* `sr-only` rather than `hidden`: the label is what tells a screen reader which group an item
  * belongs to, and a collapsed sidebar is still being read. Taking it out of flow also takes it out
  * of the group's `gap`, so the icons close up rather than leaving a hole where the label was. */
-.sidebar__group-label[data-collapsed="true"] {
+.rp-sidebar__group-label[data-collapsed="true"] {
   @apply sr-only;
 }
 
@@ -174,7 +219,7 @@
  * tailwind-merge cannot help either, because the width lives inside a BEM rule rather than in the
  * class string. It needs no taking back: the rule runs the width of the content's padding box,
  * which is exactly the box every item beside it already fills. */
-.sidebar__separator {
+.rp-sidebar__separator {
   @apply my-1;
 }
 
@@ -182,16 +227,24 @@
    Nav item
    ========================================================================== */
 
-.sidebar__item {
-  @apply relative flex min-h-9 w-full min-w-0 items-center justify-start gap-2 rounded-component px-2 text-sm font-medium text-foreground no-underline outline-none no-highlight;
+.rp-sidebar__item {
+  @apply relative flex min-h-9 w-full min-w-0 items-center justify-start gap-2 rounded-component px-2 text-sm font-medium no-underline outline-none no-highlight;
+
+  /* The row's fill and label, per state. A caller retuning the resting pair used to flatten the
+   * current page's along with it, since one declaration cannot tell the states apart. */
+  --sidebar-item-bg: transparent;
+  --sidebar-item-bg-hover: var(--state-layer);
+  --sidebar-item-bg-pressed: var(--sidebar-item-bg-hover);
+  --sidebar-item-bg-current: var(--accent-soft);
+  --sidebar-item-fg: var(--foreground);
+  --sidebar-item-fg-current: var(--accent-soft-foreground);
+
+  background-color: var(--sidebar-item-bg);
+  color: var(--sidebar-item-fg);
 
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-out),
     color 150ms var(--ease-out);
@@ -201,7 +254,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default;
+      background-color: var(--sidebar-item-bg-hover);
     }
   }
 
@@ -214,14 +267,15 @@
   /* Pressed state */
   &:active,
   &[data-pressed="true"] {
-    @apply bg-default;
+    background-color: var(--sidebar-item-bg-pressed);
   }
 
   /* The current page. Its whole job is to be the one item that stands out, so the mode flattening
    * the fill onto the page would take exactly the distinction away — hence `forced-selected`,
    * which is what the rest of the library reaches for to say "this one". */
   &[data-current="true"] {
-    @apply bg-accent-soft text-accent-soft-foreground;
+    background-color: var(--sidebar-item-bg-current);
+    color: var(--sidebar-item-fg-current);
 
     @apply forced-selected;
   }
@@ -238,7 +292,7 @@
   }
 }
 
-.sidebar__item-icon {
+.rp-sidebar__item-icon {
   @apply flex size-4 shrink-0 items-center justify-center;
 
   svg {
@@ -246,28 +300,28 @@
   }
 }
 
-.sidebar__item-label {
+.rp-sidebar__item-label {
   @apply min-w-0 flex-1 truncate text-start;
 }
 
 /* Hidden the same way the group label is, and for the same reason — this *is* the item's
  * accessible name. */
-.sidebar__item-label[data-collapsed="true"] {
+.rp-sidebar__item-label[data-collapsed="true"] {
   @apply sr-only;
 }
 
-.sidebar__item-trailing {
+.rp-sidebar__item-trailing {
   @apply flex shrink-0 items-center;
 }
 
-.sidebar__item-trailing[data-collapsed="true"] {
+.rp-sidebar__item-trailing[data-collapsed="true"] {
   @apply hidden;
 }
 
 /* The tooltip's own trigger is `inline-block`, and inside the nav's column that would shrink the
  * item it wraps down to its contents. An item is a full-width row and has to stay one whether or
  * not it has a tooltip hanging off it. */
-.sidebar__item-tooltip {
+.rp-sidebar__item-tooltip {
   @apply block w-full;
 }
 
@@ -282,7 +336,7 @@
  * open or shut; this one sits at the end of a nav row and has a direction to mean, so the shut
  * state points the way the rows will come from. `rtl` turns it the other way for the same reason
  * it is `ms-auto` and not `ml-auto`. */
-.sidebar__item-indicator {
+.rp-sidebar__item-indicator {
   @apply ms-auto size-3.5 shrink-0 -rotate-90 text-muted rtl:rotate-90;
 
   /**
@@ -297,14 +351,14 @@
 
 /* Nothing left to point at once the sidebar is a rail: the children are not rendered there at all,
  * and a chevron promising something that never opens is worse than no chevron. */
-.sidebar__item-indicator[data-collapsed="true"] {
+.rp-sidebar__item-indicator[data-collapsed="true"] {
   @apply hidden;
 }
 
 /* The rows under a nav item, indented and gathered by a line down the gutter they share. One border
  * on the container rather than one per row, so the line runs unbroken from the first child to the
  * last however many there are. */
-.sidebar__sub-menu {
+.rp-sidebar__sub-menu {
   /* The row's own inline padding plus half its icon, which lands the line on the icon's centre.
    * Written from those two rather than as the number they come to, so retuning either moves the
    * line with it instead of leaving it a few pixels off. */
@@ -332,15 +386,11 @@
  * and `height: var(--disclosure-panel-height)` with nothing behind it would leave the rows sitting
  * under an `opacity: 0` that never lifts.
  */
-.sidebar__sub-menu--collapsible {
+.rp-sidebar__sub-menu--collapsible {
   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);
@@ -354,7 +404,7 @@
 
 /* A child row carries no icon, so it gives up the gap that was holding one and drops to the weight
  * of what it is — a destination under a heading rather than another heading. */
-.sidebar__item--sub {
+.rp-sidebar__item--sub {
   @apply gap-0 font-normal;
 }
 
@@ -362,20 +412,41 @@
    Inset — the content beside the sidebar
    ========================================================================== */
 
-/* `min-w-0` for the reason `.splitter__panel` documents: without it a wide table inside the inset
+/* `min-w-0` for the reason `.rp-splitter__panel` documents: without it a wide table inside the inset
  * sets a floor under the whole shell and the sidebar can never be given its width back. */
-.sidebar__inset {
+.rp-sidebar__inset {
   @apply relative flex min-w-0 flex-1 flex-col overflow-hidden bg-background;
 }
 
+/* The page beside a bare panel, and now the thing that paints. `--surface` rather than the base
+ * rule's `--background`: this stopped being the page's background the moment it became a plate
+ * lying on one, which is what `--surface` names.
+ *
+ * The first of this component's modifiers to *add* paint rather than drop it, which is what puts it
+ * in front of the forced-colors sweep as a box with something to lose. Under the mode the fill
+ * flattens onto the page behind it and the shadow goes, leaving the contents sitting loose — so it
+ * takes the same inset outline every container that paints takes, offset inwards so nothing moves
+ * and the radius above still holds it. */
+.rp-sidebar__inset--card {
+  @apply bg-surface text-surface-foreground shadow-surface;
+
+  margin: var(--sidebar-card-gap);
+  border-radius: var(--sidebar-card-radius);
+
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
 /* ==========================================================================
    Rail — the edge strip
    ========================================================================== */
 
-/* Built like `.splitter__handle`, down to the `::after`: the flex item is the gutter and paints
+/* Built like `.rp-splitter__handle`, down to the `::after`: the flex item is the gutter and paints
  * nothing, so the line can thicken on hover without the gutter changing width and shifting the
  * whole page by a pixel. */
-.sidebar__rail {
+.rp-sidebar__rail {
   @apply relative z-10 flex shrink-0 grow-0 items-center justify-center self-stretch;
   @apply bg-transparent outline-none select-none no-highlight;
 
@@ -385,9 +456,14 @@
   inline-size: var(--sidebar-rail-gutter);
   cursor: var(--cursor-interactive);
 
+  /* On the host, not in `::after` where the transition lives: the variant reaches a pseudo-element
+   * from its originating element, and appending its condition after `::after` matches nothing. */
+  @apply motion-reduce:transition-none;
+
   &::after {
-    @apply pointer-events-none absolute inset-y-0 rounded-sm bg-separator content-[''];
+    @apply pointer-events-none absolute inset-y-0 rounded-sm content-[''];
 
+    background-color: var(--sidebar-rail-line);
     inline-size: var(--sidebar-rail-gutter);
 
     /* Flattened to `Canvas` the line stops existing rather than weakening — the whole part *is*
@@ -396,28 +472,15 @@
       background-color: CanvasText;
     }
 
-    /**
-     * Transitions
-     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-     */
     transition:
       background-color 150ms var(--ease-out),
       inline-size 150ms var(--ease-out);
-    @apply motion-reduce:transition-none;
   }
 
   &:hover::after,
   &[data-hovered="true"]::after,
   &[data-dragging="true"]::after {
-    @apply bg-accent;
-
     inline-size: calc(var(--sidebar-rail-gutter) * 2);
-
-    /* `bg-separator` and `bg-accent` both flatten to `Canvas`, so without this the resting and
-     * active states are byte-identical under the mode. */
-    @media (forced-colors: active) {
-      background-color: Highlight;
-    }
   }
 
   /* Delayed on the way in and immediate on the way out. A grab area many times the width of the
@@ -425,15 +488,27 @@
    * reads as a twitch rather than an invitation. */
   &:hover::after,
   &[data-hovered="true"]::after {
+    background-color: var(--sidebar-rail-line-hover);
     transition-delay: var(--sidebar-highlight-delay);
   }
 
   /* A drag under way is not in question, so it skips the wait. Last, because a drag usually starts
    * from a hover and has to win. */
   &[data-dragging="true"]::after {
+    background-color: var(--sidebar-rail-line-dragging);
     transition-delay: 0ms;
   }
 
+  /* Every lit colour flattens to the same `Canvas` as the resting one, so without this the two are
+   * byte-identical under the mode. One block for all of them, after the colours it overrides. */
+  @media (forced-colors: active) {
+    &:hover::after,
+    &[data-hovered="true"]::after,
+    &[data-dragging="true"]::after {
+      background-color: Highlight;
+    }
+  }
+
   &:focus-visible,
   &[data-focus-visible="true"] {
     @apply status-focused;
@@ -453,14 +528,34 @@
 
 /* Only a rail that resizes says so with the cursor. One that merely toggles is a button, and
  * `--cursor-interactive` on the base rule already covers it. */
-.sidebar__rail--resizable {
+.rp-sidebar__rail--resizable {
   @apply cursor-col-resize;
 }
 
+/* Nothing left for the line to divide once something else is drawing that division — a card's own
+ * edge, or the gap it stands in — so it goes quiet in every state.
+ *
+ * Re-pointing the properties rather than restating the state rules, the shape `.rp-input--secondary`
+ * takes: a `background-color` here would lose to `.rp-sidebar__rail:hover::after` on specificity, and
+ * restating that set drifts the day a state is added to it.
+ *
+ * All three, and the third is not redundant. `--sidebar-rail-line-dragging` is declared on the
+ * shell as a `var()` of the hover one, so it is substituted there, against the shell's value; only
+ * the resolved colour reaches this far. Re-pointing hover here arrives too late for it, and a drag
+ * would still flare.
+ *
+ * The line comes back under Forced Colors Mode, on purpose: those blocks paint system keywords,
+ * which are not a component's to quiet. */
+.rp-sidebar__rail--quiet {
+  --sidebar-rail-line: transparent;
+  --sidebar-rail-line-hover: transparent;
+  --sidebar-rail-line-dragging: transparent;
+}
+
 /* The invisible hit area, overhanging the hairline on both sides. A negative `inset` rather than a
  * transparent border, because Forced Colors Mode turns a transparent border-color opaque and every
  * rail would render as a solid block. */
-.sidebar__rail-target {
+.rp-sidebar__rail-target {
   @apply absolute inset-0 bg-transparent;
 
   inset-inline: calc((var(--sidebar-rail-target) - var(--sidebar-rail-gutter)) / -2);
@@ -470,16 +565,20 @@
    Trigger
    ========================================================================== */
 
-.sidebar__trigger {
-  @apply inline-flex size-8 shrink-0 items-center justify-center rounded-component bg-transparent text-muted outline-none select-none no-highlight;
+.rp-sidebar__trigger {
+  @apply inline-flex size-8 shrink-0 items-center justify-center rounded-component outline-none select-none no-highlight;
+
+  --sidebar-trigger-bg: transparent;
+  --sidebar-trigger-bg-hover: var(--state-layer);
+  --sidebar-trigger-fg: var(--muted);
+  --sidebar-trigger-fg-hover: var(--foreground);
+
+  background-color: var(--sidebar-trigger-bg);
+  color: var(--sidebar-trigger-fg);
 
   /* Cursor */
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-out),
     color 150ms var(--ease-out);
@@ -493,7 +592,8 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-default text-foreground;
+      background-color: var(--sidebar-trigger-bg-hover);
+      color: var(--sidebar-trigger-fg-hover);
     }
   }
 

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

@@ -1,28 +1,14 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
-    animationType: {
-        none: "skeleton--none";
-        pulse: "skeleton--pulse";
-        shimmer: "skeleton--shimmer";
-    };
-}, {
-    base: string;
-}, undefined, {
-    animationType: {
-        none: "skeleton--none";
-        pulse: "skeleton--pulse";
-        shimmer: "skeleton--shimmer";
-    };
-}, {
-    base: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    animationType: {
-        none: "skeleton--none";
-        pulse: "skeleton--pulse";
-        shimmer: "skeleton--shimmer";
-    };
-}, {
-    base: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const skeletonVariants: (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;
+} & {
+    animationType?: "none" | "pulse" | "shimmer" | 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;
+    } & {
+        animationType?: "none" | "pulse" | "shimmer" | undefined;
+    }) | undefined) => string;
+};
 export type SkeletonVariants = VariantProps<typeof skeletonVariants>;
 //# sourceMappingURL=skeleton.styles.d.ts.map

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -1,12 +1,12 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/skeleton/skeleton.styles.ts
 const skeletonVariants = tv({
 	defaultVariants: { animationType: "shimmer" },
-	slots: { base: "skeleton" },
+	slots: { base: "rp-skeleton" },
 	variants: { animationType: {
-		none: "skeleton--none",
-		pulse: "skeleton--pulse",
-		shimmer: "skeleton--shimmer"
+		none: "rp-skeleton--none",
+		pulse: "rp-skeleton--pulse",
+		shimmer: "rp-skeleton--shimmer"
 	} }
 });
 //#endregion

package/dist/components/skeleton.css

@@ -1,4 +1,4 @@
-.skeleton {
+.rp-skeleton {
   @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
 
   /* Forced Colors Mode flattens the fill to `Canvas` - the same colour as the page behind it -
@@ -14,13 +14,13 @@
 /* TODO: Skeleton with parent are not visible */
 
 /* Animation types */
-.skeleton--shimmer {
+.rp-skeleton--shimmer {
   &::after {
     @apply absolute inset-0 -translate-x-full animate-skeleton bg-linear-to-r from-transparent via-surface-tertiary to-transparent content-[''];
   }
 
   /* When applied to a parent container with multiple skeletons */
-  &:has(.skeleton) {
+  &:has(.rp-skeleton) {
     &::after {
       content: none;
     }
@@ -41,7 +41,7 @@
     }
 
     /* Ensure children don't have their own shimmer */
-    & .skeleton {
+    & .rp-skeleton {
       &::after {
         content: none;
       }
@@ -49,9 +49,9 @@
   }
 }
 
-.skeleton--pulse {
+.rp-skeleton--pulse {
   @apply animate-pulse;
 }
 
-.skeleton--none {
+.rp-skeleton--none {
 }