@ropav/styles 0.6.0 → 0.7.0

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

@@ -1,97 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const numberFieldVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            group: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    decrementButton: string;
-    group: string;
-    incrementButton: string;
-    input: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            group: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    decrementButton: string;
-    group: string;
-    incrementButton: string;
-    input: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            group: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    decrementButton: string;
-    group: string;
-    incrementButton: string;
-    input: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const numberFieldVariants: (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;
+    decrementButton: (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;
+    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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    incrementButton: (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;
+};
 export type NumberFieldVariants = VariantProps<typeof numberFieldVariants>;
 //# sourceMappingURL=number-field.styles.d.ts.map

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

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

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/number-field/number-field.styles.ts
 const numberFieldVariants = tv({
 	defaultVariants: {
@@ -7,28 +7,28 @@ const numberFieldVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "number-field",
-		decrementButton: "number-field__decrement-button",
-		group: "number-field__group",
-		incrementButton: "number-field__increment-button",
-		input: "number-field__input"
+		base: "rp-number-field",
+		decrementButton: "rp-number-field__decrement-button",
+		group: "rp-number-field__group",
+		incrementButton: "rp-number-field__increment-button",
+		input: "rp-number-field__input"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "number-field--full-width",
-				group: "number-field__group--full-width"
+				base: "rp-number-field--full-width",
+				group: "rp-number-field__group--full-width"
 			}
 		},
 		size: {
-			lg: { base: "number-field--lg" },
+			lg: { base: "rp-number-field--lg" },
 			md: {},
-			sm: { base: "number-field--sm" }
+			sm: { base: "rp-number-field--sm" }
 		},
 		variant: {
-			primary: { base: "number-field--primary" },
-			secondary: { base: "number-field--secondary" }
+			primary: { base: "rp-number-field--primary" },
+			secondary: { base: "rp-number-field--secondary" }
 		}
 	}
 });

package/dist/components/number-field.css

@@ -1,5 +1,5 @@
 /* Number field styles */
-.number-field {
+.rp-number-field {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -14,7 +14,7 @@
   }
 }
 
-.number-field__group {
+.rp-number-field__group {
   @apply grid h-9 items-center overflow-hidden 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. */
@@ -99,16 +99,16 @@
   }
 }
 
-.number-field__input {
+.rp-number-field__input {
   @apply min-w-0 rounded-none border-0 bg-transparent px-3 field-line-md tabular-nums shadow-none outline-none;
 
   /* Remove border radius on left side when decrement button is present */
-  .number-field__group:has([slot="decrement"]) & {
+  .rp-number-field__group:has([slot="decrement"]) & {
     @apply rounded-s-none;
   }
 
   /* Remove border radius on right side when increment button is present */
-  .number-field__group:has([slot="increment"]) & {
+  .rp-number-field__group:has([slot="increment"]) & {
     @apply rounded-e-none;
   }
 
@@ -121,7 +121,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 `.number-field__group` above. Preserve the autofilled
+   * is applied to `.rp-number-field__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.
    */
@@ -138,8 +138,8 @@
   }
 }
 
-.number-field__increment-button,
-.number-field__decrement-button {
+.rp-number-field__increment-button,
+.rp-number-field__decrement-button {
   @apply flex h-full w-10 items-center justify-center rounded-none text-field-foreground outline-none;
 
   --number-field-button-bg: transparent;
@@ -193,20 +193,20 @@
   }
 }
 
-.number-field__increment-button {
+.rp-number-field__increment-button {
   @apply rounded-s-none rounded-e-field border-s border-field-placeholder/15;
 }
 
-.number-field__decrement-button {
+.rp-number-field__decrement-button {
   @apply rounded-s-field rounded-e-none border-e border-field-placeholder/15;
 }
 
 /* Variant property definitions */
-.number-field--primary {
+.rp-number-field--primary {
   /* Default styles */
 }
 
-.number-field--secondary .number-field__group {
+.rp-number-field--secondary .rp-number-field__group {
   @apply shadow-none;
 
   --number-field-group-bg: var(--default);
@@ -219,11 +219,11 @@
 }
 
 /* Full width modifier */
-.number-field--full-width {
+.rp-number-field--full-width {
   @apply w-full;
 }
 
-.number-field__group--full-width {
+.rp-number-field__group--full-width {
   @apply w-full;
 }
 
@@ -232,8 +232,8 @@
    ========================================================================== */
 
 /* The stepper column stays 4px wider than the field is tall, as it is at `md`. */
-.number-field--sm {
-  .number-field__group {
+.rp-number-field--sm {
+  .rp-number-field__group {
     @apply h-8;
 
     &:has([slot="decrement"]) {
@@ -249,18 +249,18 @@
     }
   }
 
-  .number-field__input {
+  .rp-number-field__input {
     @apply field-line-sm;
   }
 
-  .number-field__increment-button,
-  .number-field__decrement-button {
+  .rp-number-field__increment-button,
+  .rp-number-field__decrement-button {
     @apply w-9;
   }
 }
 
-.number-field--lg {
-  .number-field__group {
+.rp-number-field--lg {
+  .rp-number-field__group {
     @apply h-10;
 
     &:has([slot="decrement"]) {
@@ -276,12 +276,12 @@
     }
   }
 
-  .number-field__input {
+  .rp-number-field__input {
     @apply field-line-lg;
   }
 
-  .number-field__increment-button,
-  .number-field__decrement-button {
+  .rp-number-field__increment-button,
+  .rp-number-field__decrement-button {
     @apply w-11;
   }
 }

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

@@ -1,61 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    ellipsis: string;
-    item: string;
-    link: string;
-    summary: string;
-}, undefined, {
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    ellipsis: string;
-    item: string;
-    link: string;
-    summary: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    ellipsis: string;
-    item: string;
-    link: string;
-    summary: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const paginationVariants: (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;
+} & {
+    isNav?: boolean | undefined;
+    size?: "lg" | "md" | "sm" | 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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | 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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    ellipsis: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | 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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    link: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    summary: (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;
+    } & {
+        isNav?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type PaginationVariants = VariantProps<typeof paginationVariants>;
 //# sourceMappingURL=pagination.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;QAczB,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/pagination/pagination.styles.js

@@ -1,20 +1,27 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/pagination/pagination.styles.ts
 const paginationVariants = tv({
 	defaultVariants: { size: "md" },
 	slots: {
-		base: "pagination",
-		content: "pagination__content",
-		ellipsis: "pagination__ellipsis",
-		item: "pagination__item",
-		link: "pagination__link",
-		summary: "pagination__summary"
+		base: "rp-pagination",
+		content: "rp-pagination__content",
+		ellipsis: "rp-pagination__ellipsis",
+		item: "rp-pagination__item",
+		link: "rp-pagination__link",
+		summary: "rp-pagination__summary"
 	},
-	variants: { size: {
-		lg: { base: "pagination--lg" },
-		md: { base: "pagination--md" },
-		sm: { base: "pagination--sm" }
-	} }
+	variants: {
+		/** A previous/next control rather than a page number, which sizes and spaces differently. */
+		isNav: {
+			false: {},
+			true: { link: "rp-pagination__link--nav" }
+		},
+		size: {
+			lg: { base: "rp-pagination--lg" },
+			md: { base: "rp-pagination--md" },
+			sm: { base: "rp-pagination--sm" }
+		}
+	}
 });
 //#endregion
 export { paginationVariants };

package/dist/components/pagination.css

@@ -3,27 +3,27 @@
    ========================================================================== */
 
 /* Base styles */
-.pagination {
+.rp-pagination {
   @apply flex w-full flex-col items-center justify-between gap-4 sm:flex-row;
 }
 
 /* Summary - left side info container */
-.pagination__summary {
+.rp-pagination__summary {
   @apply flex items-center gap-2 self-start text-sm text-muted sm:self-center;
 }
 
 /* Content - container for pagination items */
-.pagination__content {
+.rp-pagination__content {
   @apply flex items-center gap-1 self-start sm:self-center;
 }
 
 /* Item - list item wrapper */
-.pagination__item {
+.rp-pagination__item {
   @apply inline-flex;
 }
 
 /* Link - page number button (ghost button style) */
-.pagination__link {
+.rp-pagination__link {
   @apply relative isolate inline-flex size-8 origin-center items-center justify-center rounded-component text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
   cursor: var(--cursor-interactive);
@@ -83,12 +83,12 @@
 }
 
 /* Ellipsis */
-.pagination__ellipsis {
+.rp-pagination__ellipsis {
   @apply inline-flex size-8 items-center justify-center text-sm text-muted select-none;
 }
 
 /* Navigation buttons (Previous / Next) */
-.pagination__link--nav {
+.rp-pagination__link--nav {
   @apply w-auto gap-1.5 px-2.5;
 
   & [data-slot="pagination-previous-icon"],
@@ -101,8 +101,8 @@
    Size variants
    ========================================================================== */
 
-.pagination--sm {
-  .pagination__link {
+.rp-pagination--sm {
+  .rp-pagination__link {
     @apply size-7 text-xs;
 
     &:active,
@@ -111,25 +111,25 @@
     }
   }
 
-  .pagination__link--nav {
+  .rp-pagination__link--nav {
     @apply w-auto px-2;
   }
 
-  .pagination__ellipsis {
+  .rp-pagination__ellipsis {
     @apply size-7 text-xs;
   }
 
-  .pagination__summary {
+  .rp-pagination__summary {
     @apply text-xs;
   }
 }
 
-.pagination--md {
+.rp-pagination--md {
   /* No styles as this is the default size */
 }
 
-.pagination--lg {
-  .pagination__link {
+.rp-pagination--lg {
+  .rp-pagination__link {
     @apply size-9 text-base;
 
     &:active,
@@ -138,15 +138,15 @@
     }
   }
 
-  .pagination__link--nav {
+  .rp-pagination__link--nav {
     @apply w-auto px-3;
   }
 
-  .pagination__ellipsis {
+  .rp-pagination__ellipsis {
     @apply size-9 text-base;
   }
 
-  .pagination__summary {
+  .rp-pagination__summary {
     @apply text-base;
   }
 }