@ropav/styles 0.6.0 → 0.7.0

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

@@ -1,91 +1,39 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const inputGroupVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    prefix: string;
-    suffix: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    prefix: string;
-    suffix: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    input: string;
-    prefix: string;
-    suffix: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const inputGroupVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    fullWidth?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "primary" | "secondary" | undefined;
+}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    input: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    prefix: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    suffix: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type InputGroupVariants = VariantProps<typeof inputGroupVariants>;
 //# sourceMappingURL=input-group.styles.d.ts.map

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

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

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

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

package/dist/components/input-group.css

@@ -1,5 +1,5 @@
 /* Input group styles */
-.input-group {
+.rp-input-group {
   @apply inline-flex min-h-9 items-center rounded-field border text-sm text-field-foreground shadow-field outline-none;
 
   /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
@@ -78,16 +78,16 @@
   }
 }
 
-.input-group__input {
+.rp-input-group__input {
   @apply flex-1 rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none placeholder:text-field-placeholder;
 
   /* Remove border radius on left side when prefix is present */
-  .input-group:has([data-slot="input-group-prefix"]) & {
+  .rp-input-group:has([data-slot="input-group-prefix"]) & {
     @apply rounded-s-none ps-0;
   }
 
   /* Remove border radius on right side when suffix is present */
-  .input-group:has([data-slot="input-group-suffix"]) & {
+  .rp-input-group:has([data-slot="input-group-suffix"]) & {
     @apply rounded-e-none pe-0;
   }
 
@@ -100,7 +100,7 @@
   /**
    * Neutralize the browser's per-input autofill paint so the inner <input>
    * doesn't draw a sharp-cornered yellow rectangle. The unified highlight
-   * is applied to `.input-group` above. Preserve the autofilled text and
+   * is applied to `.rp-input-group` above. Preserve the autofilled text and
    * caret colors, and pin the background-color transition so the inset
    * box-shadow trick doesn't flicker on state changes.
    */
@@ -118,12 +118,12 @@
 }
 
 /* TextArea within InputGroup - uses same base class as input but with textarea-specific styles */
-.input-group__input[data-slot="input-group-textarea"] {
+.rp-input-group__input[data-slot="input-group-textarea"] {
   min-height: 38px;
   resize: vertical;
 }
 
-.input-group__prefix {
+.rp-input-group__prefix {
   @apply flex h-full items-center justify-center rounded-s-field rounded-e-none bg-transparent px-3 text-field-placeholder;
   border-width: var(--border-width-field);
   border-color: var(--field-border);
@@ -134,7 +134,7 @@
   border-bottom: none;
 
   /* Align to top when textarea is present */
-  .input-group:has([data-slot="input-group-textarea"]) & {
+  .rp-input-group:has([data-slot="input-group-textarea"]) & {
     @apply items-start;
     padding-top: 0.5rem;
   }
@@ -145,7 +145,7 @@
   @apply motion-reduce:transition-none;
 }
 
-.input-group__suffix {
+.rp-input-group__suffix {
   @apply flex h-full items-center justify-center rounded-s-none rounded-e-field bg-transparent px-3 text-field-placeholder;
   border-width: var(--border-width-field);
   border-color: var(--field-border);
@@ -156,7 +156,7 @@
   border-bottom: none;
 
   /* Align to top when textarea is present */
-  .input-group:has([data-slot="input-group-textarea"]) & {
+  .rp-input-group:has([data-slot="input-group-textarea"]) & {
     @apply items-start;
     padding-top: 0.5rem;
   }
@@ -168,11 +168,11 @@
 }
 
 /* Variant property definitions */
-.input-group--primary {
+.rp-input-group--primary {
   /* Default styles */
 }
 
-.input-group--secondary {
+.rp-input-group--secondary {
   @apply shadow-none;
 
   --input-group-bg: var(--default);
@@ -186,7 +186,7 @@
 }
 
 /* Full width modifier */
-.input-group--full-width {
+.rp-input-group--full-width {
   @apply w-full;
 }
 
@@ -196,18 +196,18 @@
 
 /* The shell states the floor and the control inside carries the metrics, which is the same split
  * the base makes - the group may grow around a textarea, so it cannot state a height. */
-.input-group--sm {
+.rp-input-group--sm {
   @apply min-h-8;
 
-  .input-group__input {
+  .rp-input-group__input {
     @apply field-line-sm;
   }
 }
 
-.input-group--lg {
+.rp-input-group--lg {
   @apply min-h-10;
 
-  .input-group__input {
+  .rp-input-group__input {
     @apply field-line-lg;
   }
 }

package/dist/components/input-otp/input-otp.styles.d.ts

@@ -1,55 +1,44 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const inputOTPVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    caret: string;
-    group: string;
-    input: string;
-    separator: string;
-    slot: string;
-    slotValue: string;
-}, undefined, {
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    caret: string;
-    group: string;
-    input: string;
-    separator: string;
-    slot: string;
-    slotValue: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    caret: string;
-    group: string;
-    input: string;
-    separator: string;
-    slot: string;
-    slotValue: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const inputOTPVariants: (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?: "primary" | "secondary" | undefined;
+}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    caret: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    group: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    input: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    separator: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    slot: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    slotValue: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 export type InputOTPVariants = VariantProps<typeof inputOTPVariants>;
 //# sourceMappingURL=input-otp.styles.d.ts.map

package/dist/components/input-otp/input-otp.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input-otp/input-otp.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;QAevB,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"input-otp.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input-otp/input-otp.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/input-otp/input-otp.styles.js

@@ -1,19 +1,19 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/input-otp/input-otp.styles.ts
 const inputOTPVariants = tv({
 	defaultVariants: { variant: "primary" },
 	slots: {
-		base: "input-otp",
-		caret: "input-otp__caret",
-		group: "input-otp__group",
-		input: "input-otp__input",
-		separator: "input-otp__separator",
-		slot: "input-otp__slot",
-		slotValue: "input-otp__slot-value"
+		base: "rp-input-otp",
+		caret: "rp-input-otp__caret",
+		group: "rp-input-otp__group",
+		input: "rp-input-otp__input",
+		separator: "rp-input-otp__separator",
+		slot: "rp-input-otp__slot",
+		slotValue: "rp-input-otp__slot-value"
 	},
 	variants: { variant: {
-		primary: { base: "input-otp--primary" },
-		secondary: { base: "input-otp--secondary" }
+		primary: { base: "rp-input-otp--primary" },
+		secondary: { base: "rp-input-otp--secondary" }
 	} }
 });
 //#endregion

package/dist/components/input-otp.css

@@ -1,5 +1,5 @@
 /* Base container */
-.input-otp {
+.rp-input-otp {
   @apply relative flex w-full items-center gap-2;
 
   &[data-disabled="true"] {
@@ -8,12 +8,12 @@
 }
 
 /* Group - slots separated with gap */
-.input-otp__group {
+.rp-input-otp__group {
   @apply flex min-w-0 items-center gap-2;
 }
 
 /* Individual slot box - fully rounded, standalone */
-.input-otp__slot {
+.rp-input-otp__slot {
   @apply relative flex h-10 w-9.5 min-w-0 flex-1 items-center justify-center;
   @apply border text-field-foreground shadow-field;
 
@@ -68,30 +68,30 @@
 }
 
 /* Slot value */
-.input-otp__slot-value {
+.rp-input-otp__slot-value {
   @apply text-lg leading-6 tracking-[-0.27px];
 
-  animation: slot-value-in 250ms var(--ease-smooth) both;
+  animation: rp-slot-value-in 250ms var(--ease-smooth) both;
   transform-origin: bottom center;
   @apply motion-reduce:animate-none;
 }
 
 /* Caret */
-.input-otp__caret {
+.rp-input-otp__caret {
   @apply absolute h-4 w-[2px] animate-caret-blink rounded-sm bg-field-placeholder;
 }
 
 /* Separator */
-.input-otp__separator {
+.rp-input-otp__separator {
   @apply h-[2px] w-[6px] shrink-0 rounded-sm bg-separator;
 }
 
 /* Variant property definitions */
-.input-otp--primary {
+.rp-input-otp--primary {
   /* Default styles */
 }
 
-.input-otp--secondary .input-otp__slot {
+.rp-input-otp--secondary .rp-input-otp__slot {
   @apply shadow-none;
 
   --input-otp-slot-bg: var(--default);
@@ -100,7 +100,7 @@
 }
 
 /* Animations */
-@keyframes slot-value-in {
+@keyframes rp-slot-value-in {
   0% {
     opacity: 0;
     transform: translateY(8px) scale(0.8);

package/dist/components/input.css

@@ -1,4 +1,4 @@
-.input {
+.rp-input {
   @apply rounded-field border px-3 field-line-md text-field-foreground shadow-field outline-none placeholder:text-field-placeholder;
 
   /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
@@ -63,11 +63,11 @@
 }
 
 /* Variant property definitions */
-.input--primary {
+.rp-input--primary {
   /* Default styles */
 }
 
-.input--secondary {
+.rp-input--secondary {
   @apply shadow-none;
 
   --input-bg: var(--default);
@@ -76,7 +76,7 @@
 }
 
 /* Full width modifier */
-.input--full-width {
+.rp-input--full-width {
   @apply w-full;
 }
 
@@ -84,10 +84,10 @@
    Size variants
    ========================================================================== */
 
-.input--sm {
+.rp-input--sm {
   @apply field-line-sm;
 }
 
-.input--lg {
+.rp-input--lg {
   @apply field-line-lg;
 }

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

@@ -1,31 +1,24 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "kbd--default";
-        light: "kbd--light";
-    };
-}, {
-    abbr: string;
-    base: string;
-    content: string;
-}, undefined, {
-    variant: {
-        default: "kbd--default";
-        light: "kbd--light";
-    };
-}, {
-    abbr: string;
-    base: string;
-    content: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "kbd--default";
-        light: "kbd--light";
-    };
-}, {
-    abbr: string;
-    base: string;
-    content: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const kbdVariants: (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" | "light" | undefined;
+}) | undefined) => {
+    abbr: (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" | "light" | undefined;
+    }) | undefined) => string;
+    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" | "light" | 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;
+    } & {
+        variant?: "default" | "light" | undefined;
+    }) | undefined) => string;
+};
 export type KbdVariants = VariantProps<typeof kbdVariants>;
 //# sourceMappingURL=kbd.styles.d.ts.map

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

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

package/dist/components/kbd/kbd.styles.js

@@ -1,15 +1,15 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/kbd/kbd.styles.ts
 const kbdVariants = tv({
 	defaultVariants: {},
 	slots: {
-		abbr: "kbd__abbr",
-		base: "kbd",
-		content: "kbd__content"
+		abbr: "rp-kbd__abbr",
+		base: "rp-kbd",
+		content: "rp-kbd__content"
 	},
 	variants: { variant: {
-		default: "kbd--default",
-		light: "kbd--light"
+		default: "rp-kbd--default",
+		light: "rp-kbd--light"
 	} }
 });
 //#endregion

package/dist/components/kbd.css

@@ -1,5 +1,5 @@
 /* Base styles */
-.kbd {
+.rp-kbd {
   @apply inline-flex h-6 items-center space-x-0.5 bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
 
   border-radius: min(32px, var(--component-radius));
@@ -7,7 +7,7 @@
 }
 
 /* Key abbreviation styles */
-.kbd__abbr {
+.rp-kbd__abbr {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -17,13 +17,13 @@
 }
 
 /* Content wrapper */
-.kbd__content {
+.rp-kbd__content {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 /* Variant styles */
-.kbd--light {
+.rp-kbd--light {
   @apply bg-transparent;
 }