@ropav/styles 0.5.0 → 0.7.0

package/dist/components/breadcrumbs.css

@@ -1,10 +1,15 @@
 /* Base breadcrumbs container */
-.breadcrumbs {
+.rp-breadcrumbs {
   @apply flex items-center;
 
   /* Breadcrumb link */
-  .breadcrumbs__link {
-    @apply relative px-0.5 text-sm leading-5 font-medium text-muted no-underline opacity-100;
+  .rp-breadcrumbs__link {
+    @apply relative px-0.5 text-sm leading-5 font-medium no-underline opacity-100;
+
+    --breadcrumbs-link-fg: var(--muted);
+    --breadcrumbs-link-fg-current: var(--link);
+
+    color: var(--breadcrumbs-link-fg);
 
     &:hover,
     &[data-hovered="true"] {
@@ -12,17 +17,19 @@
     }
 
     &[data-current="true"] {
-      @apply text-link opacity-100;
+      @apply opacity-100;
+
+      color: var(--breadcrumbs-link-fg-current);
     }
   }
 
   /* Breadcrumb item wrapper */
-  .breadcrumbs__item {
+  .rp-breadcrumbs__item {
     @apply flex shrink-0 items-center justify-center gap-0.5 px-0.5;
   }
 
   /* Separator icon */
-  .breadcrumbs__separator {
+  .rp-breadcrumbs__separator {
     @apply size-3 text-muted rtl:rotate-180;
   }
 }

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

@@ -1,70 +1,11 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: "";
-        true: "button--full-width";
-    };
-    isIconOnly: {
-        true: "button--icon-only";
-    };
-    size: {
-        lg: "button--lg";
-        md: "button--md";
-        sm: "button--sm";
-    };
-    variant: {
-        danger: "button--danger";
-        "danger-soft": "button--danger-soft";
-        ghost: "button--ghost";
-        outline: "button--outline";
-        primary: "button--primary";
-        secondary: "button--secondary";
-        tertiary: "button--tertiary";
-    };
-}, undefined, "button", {
-    fullWidth: {
-        false: "";
-        true: "button--full-width";
-    };
-    isIconOnly: {
-        true: "button--icon-only";
-    };
-    size: {
-        lg: "button--lg";
-        md: "button--md";
-        sm: "button--sm";
-    };
-    variant: {
-        danger: "button--danger";
-        "danger-soft": "button--danger-soft";
-        ghost: "button--ghost";
-        outline: "button--outline";
-        primary: "button--primary";
-        secondary: "button--secondary";
-        tertiary: "button--tertiary";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: "";
-        true: "button--full-width";
-    };
-    isIconOnly: {
-        true: "button--icon-only";
-    };
-    size: {
-        lg: "button--lg";
-        md: "button--md";
-        sm: "button--sm";
-    };
-    variant: {
-        danger: "button--danger";
-        "danger-soft": "button--danger-soft";
-        ghost: "button--ghost";
-        outline: "button--outline";
-        primary: "button--primary";
-        secondary: "button--secondary";
-        tertiary: "button--tertiary";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+export declare const buttonVariants: (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;
+    isIconOnly?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "danger" | "danger-soft" | "ghost" | "outline" | "primary" | "secondary" | "tertiary" | undefined;
+}) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=button.styles.d.ts.map

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

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

package/dist/components/button/button.styles.js

@@ -1,7 +1,7 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/button/button.styles.ts
 const buttonVariants = tv({
-	base: "button",
+	base: "rp-button",
 	defaultVariants: {
 		fullWidth: false,
 		isIconOnly: false,
@@ -11,22 +11,22 @@ const buttonVariants = tv({
 	variants: {
 		fullWidth: {
 			false: "",
-			true: "button--full-width"
+			true: "rp-button--full-width"
 		},
-		isIconOnly: { true: "button--icon-only" },
+		isIconOnly: { true: "rp-button--icon-only" },
 		size: {
-			lg: "button--lg",
-			md: "button--md",
-			sm: "button--sm"
+			lg: "rp-button--lg",
+			md: "rp-button--md",
+			sm: "rp-button--sm"
 		},
 		variant: {
-			danger: "button--danger",
-			"danger-soft": "button--danger-soft",
-			ghost: "button--ghost",
-			outline: "button--outline",
-			primary: "button--primary",
-			secondary: "button--secondary",
-			tertiary: "button--tertiary"
+			danger: "rp-button--danger",
+			"danger-soft": "rp-button--danger-soft",
+			ghost: "rp-button--ghost",
+			outline: "rp-button--outline",
+			primary: "rp-button--primary",
+			secondary: "rp-button--secondary",
+			tertiary: "rp-button--tertiary"
 		}
 	}
 });

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

@@ -1,58 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    separator: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    separator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    separator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const buttonGroupVariants: (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;
+    orientation?: "horizontal" | "vertical" | 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;
+        orientation?: "horizontal" | "vertical" | 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;
+    } & {
+        fullWidth?: boolean | undefined;
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+};
 export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
 //# sourceMappingURL=button-group.styles.d.ts.map

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

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

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/button-group/button-group.styles.ts
 const buttonGroupVariants = tv({
 	defaultVariants: {
@@ -6,17 +6,17 @@ const buttonGroupVariants = tv({
 		orientation: "horizontal"
 	},
 	slots: {
-		base: "button-group",
-		separator: "button-group__separator"
+		base: "rp-button-group",
+		separator: "rp-button-group__separator"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
-			true: { base: "button-group--full-width" }
+			true: { base: "rp-button-group--full-width" }
 		},
 		orientation: {
-			horizontal: { base: "button-group--horizontal" },
-			vertical: { base: "button-group--vertical" }
+			horizontal: { base: "rp-button-group--horizontal" },
+			vertical: { base: "rp-button-group--vertical" }
 		}
 	}
 });

package/dist/components/button-group.css

@@ -3,7 +3,7 @@
    ========================================================================== */
 
 /* Base button group styles */
-.button-group {
+.rp-button-group {
   @apply inline-flex h-auto items-center justify-center gap-0;
 }
 
@@ -11,58 +11,58 @@
    Orientation variants
    ========================================================================== */
 
-.button-group--horizontal {
+.rp-button-group--horizontal {
   @apply flex-row;
 }
 
-.button-group--vertical {
+.rp-button-group--vertical {
   @apply flex-col;
 }
 
 /* Remove border radius from all buttons in group */
-.button-group .button {
+.rp-button-group .rp-button {
   @apply rounded-none;
 }
 
 /* Apply border radius to first button (start edge) */
-.button-group--horizontal .button:first-child {
+.rp-button-group--horizontal .rp-button:first-child {
   @apply rounded-s-component;
 }
 
 /* Apply border radius to last button (end edge) */
-.button-group--horizontal .button:last-child {
+.rp-button-group--horizontal .rp-button:last-child {
   @apply rounded-e-component;
 }
 
 /* If only one button, apply both rounded edges */
-.button-group--horizontal .button:first-child:last-child {
+.rp-button-group--horizontal .rp-button:first-child:last-child {
   @apply rounded-component;
 }
 
 /* Apply border radius to first button (top edge) in vertical */
-.button-group--vertical .button:first-child {
+.rp-button-group--vertical .rp-button:first-child {
   @apply rounded-t-component;
 }
 
 /* Apply border radius to last button (bottom edge) in vertical */
-.button-group--vertical .button:last-child {
+.rp-button-group--vertical .rp-button:last-child {
   @apply rounded-b-component;
 }
 
 /* If only one button in vertical, apply all rounded edges */
-.button-group--vertical .button:first-child:last-child {
+.rp-button-group--vertical .rp-button:first-child:last-child {
   @apply rounded-component;
 }
 
 /* Remove scale transform on active/pressed state for buttons in group */
-.button-group .button:active,
-.button-group .button[data-pressed="true"] {
+.rp-button-group .rp-button:active,
+.rp-button-group .rp-button[data-pressed="true"] {
   transform: none;
 }
 
 /* Raise focused button so its outward focus ring + gap shows above adjacent buttons */
-.button-group .button:focus-visible:not(:focus),
-.button-group .button[data-focus-visible="true"] {
+.rp-button-group .rp-button:focus-visible:not(:focus),
+.rp-button-group .rp-button[data-focus-visible="true"] {
   @apply z-10;
 }
 
@@ -70,20 +70,16 @@
    Separator (compound component)
    ========================================================================== */
 
-.button-group__separator {
+.rp-button-group__separator {
   @apply rounded-sm bg-current opacity-15;
   position: absolute;
   pointer-events: none;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
   /* Horizontal orientation - vertical divider */
-  .button-group--horizontal & {
+  .rp-button-group--horizontal & {
     inset-inline-start: -1px;
     top: 25%;
     width: 1px;
@@ -91,7 +87,7 @@
   }
 
   /* Vertical orientation - horizontal divider */
-  .button-group--vertical & {
+  .rp-button-group--vertical & {
     inset-inline-start: 25%;
     top: -1px;
     width: 50%;
@@ -105,33 +101,33 @@
 
 /* Remove adjacent borders from outline buttons in horizontal group */
 /* First button: remove end border (right in LTR, left in RTL) */
-.button-group--horizontal .button--outline:first-child {
+.rp-button-group--horizontal .rp-button--outline:first-child {
   @apply border-e-0;
 }
 
 /* Last button: remove start border (left in LTR, right in RTL) */
-.button-group--horizontal .button--outline:last-child {
+.rp-button-group--horizontal .rp-button--outline:last-child {
   @apply border-s-0;
 }
 
 /* Middle buttons: remove both inline borders */
-.button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
+.rp-button-group--horizontal .rp-button--outline:not(:first-child):not(:last-child) {
   @apply border-x-0;
 }
 
 /* Remove adjacent borders from outline buttons in vertical group */
 /* First button: remove bottom border */
-.button-group--vertical .button--outline:first-child {
+.rp-button-group--vertical .rp-button--outline:first-child {
   @apply border-b-0;
 }
 
 /* Last button: remove top border */
-.button-group--vertical .button--outline:last-child {
+.rp-button-group--vertical .rp-button--outline:last-child {
   @apply border-t-0;
 }
 
 /* Middle buttons: remove both block borders */
-.button-group--vertical .button--outline:not(:first-child):not(:last-child) {
+.rp-button-group--vertical .rp-button--outline:not(:first-child):not(:last-child) {
   @apply border-y-0;
 }
 
@@ -139,6 +135,6 @@
    Full width modifier
    ========================================================================== */
 
-.button-group--full-width {
+.rp-button-group--full-width {
   @apply w-full;
 }

package/dist/components/button.css

@@ -1,13 +1,9 @@
 /* Button component styles */
 
 /* Base button styles */
-.button {
+.rp-button {
   @apply relative isolate inline-flex h-9 w-fit origin-center items-center justify-center gap-2 rounded-component px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),
@@ -74,7 +70,7 @@
 }
 
 /* Size variants */
-.button--sm {
+.rp-button--sm {
   @apply h-8 px-3;
 
   &:active,
@@ -83,11 +79,11 @@
   }
 }
 
-.button--md {
+.rp-button--md {
   /* No styles as this is the default size */
 }
 
-.button--lg {
+.rp-button--lg {
   @apply h-10 text-base;
 
   &:active,
@@ -97,7 +93,7 @@
 }
 
 /* Color variants - only set custom property values */
-.button--primary {
+.rp-button--primary {
   --button-bg: var(--accent);
   --button-bg-hover: var(--accent-hover);
   --button-bg-pressed: var(--accent-hover);
@@ -114,33 +110,33 @@
   }
 }
 
-.button--secondary {
+.rp-button--secondary {
   --button-bg: var(--default);
   --button-bg-hover: var(--default-hover);
   --button-bg-pressed: var(--default-hover);
   --button-fg: var(--accent-soft-foreground);
 }
 
-.button--tertiary {
+.rp-button--tertiary {
   --button-bg: var(--default);
   --button-bg-hover: var(--default-hover);
   --button-bg-pressed: var(--default-hover);
 }
 
-.button--ghost,
-.button--outline {
+.rp-button--ghost,
+.rp-button--outline {
   --button-bg: transparent;
-  --button-bg-hover: var(--default);
-  --button-bg-pressed: var(--default);
+  --button-bg-hover: var(--state-layer);
+  --button-bg-pressed: var(--state-layer);
   --button-fg: var(--default-foreground);
 }
 
-.button--outline {
+.rp-button--outline {
   @apply border border-border;
-  --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent);
+  --button-bg-hover: color-mix(in oklab, var(--state-layer) 60%, transparent);
 }
 
-.button--danger {
+.rp-button--danger {
   --button-bg: var(--danger);
   --button-bg-hover: var(--danger-hover);
   --button-bg-pressed: var(--danger-hover);
@@ -155,7 +151,7 @@
   }
 }
 
-.button--danger-soft {
+.rp-button--danger-soft {
   --button-bg: var(--danger-soft);
   --button-bg-hover: var(--danger-soft-hover);
   --button-bg-pressed: var(--danger-soft-hover);
@@ -163,19 +159,19 @@
 }
 
 /* Icon-only modifier */
-.button--icon-only {
+.rp-button--icon-only {
   @apply w-9 p-0;
 }
 
-.button--icon-only.button--sm {
+.rp-button--icon-only.rp-button--sm {
   @apply w-8;
 }
 
-.button--icon-only.button--lg {
+.rp-button--icon-only.rp-button--lg {
   @apply w-10;
 }
 
 /* Full width modifier */
-.button--full-width {
+.rp-button--full-width {
   @apply w-full;
 }