@ropav/styles 0.5.0 → 0.7.0

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

@@ -1,97 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const searchFieldVariants: 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;
-    clearButton: string;
-    group: string;
-    input: string;
-    searchIcon: 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;
-    clearButton: string;
-    group: string;
-    input: string;
-    searchIcon: 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;
-    clearButton: string;
-    group: string;
-    input: string;
-    searchIcon: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const searchFieldVariants: (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;
+    clearButton: (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;
+    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;
+    searchIcon: (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 SearchFieldVariants = VariantProps<typeof searchFieldVariants>;
 //# sourceMappingURL=search-field.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/search-field/search-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":"search-field.styles.d.ts","sourceRoot":"","sources":["../../../src/components/search-field/search-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/search-field/search-field.styles.js

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

package/dist/components/search-field.css

@@ -1,5 +1,5 @@
 /* Search field styles */
-.search-field {
+.rp-search-field {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -20,8 +20,15 @@
   }
 }
 
-.search-field__group {
-  @apply relative inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+.rp-search-field__group {
+  @apply relative inline-flex 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. */
+  --search-field-group-bg: var(--field-background, var(--default));
+  --search-field-group-bg-hover: var(--field-hover);
+  --search-field-group-bg-focus: var(--field-focus);
+
+  background-color: var(--search-field-group-bg);
   border-width: var(--border-width-field);
   border-color: var(--field-border);
 
@@ -33,10 +40,6 @@
     outline-offset: -1px;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 150ms var(--ease-smooth),
     border-color 150ms var(--ease-smooth),
@@ -47,7 +50,7 @@
   @media (hover: hover) {
     &:hover:not(:focus-within),
     &[data-hovered="true"]:not([data-focus-within="true"]) {
-      @apply bg-field-hover;
+      background-color: var(--search-field-group-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -61,7 +64,7 @@
   /* Invalid state */
   &[data-invalid="true"] {
     @apply status-invalid-field;
-    background-color: var(--field-focus);
+    background-color: var(--search-field-group-bg-focus);
     border-color: var(--color-field-border-invalid);
   }
 
@@ -82,12 +85,12 @@
    */
   &:has([data-slot="search-field-input"]:-webkit-autofill),
   &:has([data-slot="search-field-input"]:autofill) {
-    background-color: var(--field-focus);
+    background-color: var(--search-field-group-bg-focus);
     border-color: var(--field-border-focus);
   }
 }
 
-.search-field__input {
+.rp-search-field__input {
   @apply flex-1 rounded-none border-0 bg-transparent px-3 field-line-md shadow-none outline-none;
 
   /* Hide browser default search clear button */
@@ -98,12 +101,12 @@
   }
 
   /* Remove border radius on left side when search icon is present */
-  .search-field__group:has([data-slot="search-field-search-icon"]) & {
+  .rp-search-field__group:has([data-slot="search-field-search-icon"]) & {
     @apply rounded-s-none ps-2;
   }
 
   /* Remove border radius on right side when clear button is present */
-  .search-field__group:has([slot="clear"]) & {
+  .rp-search-field__group:has([slot="clear"]) & {
     @apply rounded-e-none pe-2;
   }
 
@@ -116,7 +119,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 `.search-field__group` above. Preserve the autofilled
+   * is applied to `.rp-search-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.
    */
@@ -133,12 +136,12 @@
   }
 }
 
-.search-field__search-icon {
+.rp-search-field__search-icon {
   @apply pointer-events-none shrink-0 text-field-placeholder;
   @apply ms-3 me-0 size-4;
 }
 
-.search-field__clear-button {
+.rp-search-field__clear-button {
   @apply me-2 size-5 shrink-0;
 
   /* Overrides close button default icon size from 16px to 12px */
@@ -148,48 +151,28 @@
 }
 
 /* Variant property definitions */
-.search-field--primary {
+.rp-search-field--primary {
   /* Default styles */
 }
 
-.search-field--secondary .search-field__group {
+.rp-search-field--secondary .rp-search-field__group {
   @apply shadow-none;
-  background-color: var(--search-field-group-bg);
 
   --search-field-group-bg: var(--default);
   --search-field-group-bg-hover: var(--default-hover);
   --search-field-group-bg-focus: var(--default);
 
-  @media (hover: hover) {
-    &:hover:not(:focus-within),
-    &[data-hovered="true"]:not([data-focus-within="true"]) {
-      background-color: var(--search-field-group-bg-hover);
-    }
-  }
-
-  &:focus-within,
-  &[data-focus-within="true"] {
-    background-color: var(--search-field-group-bg-focus);
-  }
-
-  /* Invalid state */
-  &[data-invalid="true"] {
-    @apply status-invalid-field;
-    border-color: var(--color-field-border-invalid);
-    background-color: var(--search-field-group-bg-focus);
-  }
-
   [data-slot="search-field-input"] {
     @apply bg-transparent;
   }
 }
 
 /* Full width modifier */
-.search-field--full-width {
+.rp-search-field--full-width {
   @apply w-full;
 }
 
-.search-field__group--full-width {
+.rp-search-field__group--full-width {
   @apply w-full;
 }
 
@@ -197,22 +180,22 @@
    Size variants
    ========================================================================== */
 
-.search-field--sm {
-  .search-field__group {
+.rp-search-field--sm {
+  .rp-search-field__group {
     @apply h-8;
   }
 
-  .search-field__input {
+  .rp-search-field__input {
     @apply field-line-sm;
   }
 }
 
-.search-field--lg {
-  .search-field__group {
+.rp-search-field--lg {
+  .rp-search-field__group {
     @apply h-10;
   }
 
-  .search-field__input {
+  .rp-search-field__input {
     @apply field-line-lg;
   }
 }

package/dist/components/segmented-control/segmented-control.styles.d.ts

@@ -1,73 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const segmentedControlVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    item: string;
-    separator: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    item: string;
-    separator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    item: string;
-    separator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const segmentedControlVariants: (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;
+}) | 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;
+    }) | undefined) => string;
+    indicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        fullWidth?: 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;
+    } & {
+        fullWidth?: boolean | undefined;
+        size?: "lg" | "md" | "sm" | 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;
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type SegmentedControlVariants = VariantProps<typeof segmentedControlVariants>;
 //# sourceMappingURL=segmented-control.styles.d.ts.map

package/dist/components/segmented-control/segmented-control.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,wBAAwB;;QAa/B,KAAK;QACL,IAAI;YACF,IAAI;;;;QAIN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"segmented-control.styles.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BnC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/components/segmented-control/segmented-control.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/segmented-control/segmented-control.styles.ts
 const segmentedControlVariants = tv({
 	defaultVariants: {
@@ -6,20 +6,20 @@ const segmentedControlVariants = tv({
 		size: "md"
 	},
 	slots: {
-		base: "segmented-control",
-		indicator: "segmented-control__indicator",
-		item: "segmented-control__item",
-		separator: "segmented-control__separator"
+		base: "rp-segmented-control",
+		indicator: "rp-segmented-control__indicator",
+		item: "rp-segmented-control__item",
+		separator: "rp-segmented-control__separator"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
-			true: { base: "segmented-control--full-width" }
+			true: { base: "rp-segmented-control--full-width" }
 		},
 		size: {
-			lg: { base: "segmented-control--lg" },
-			md: { base: "segmented-control--md" },
-			sm: { base: "segmented-control--sm" }
+			lg: { base: "rp-segmented-control--lg" },
+			md: { base: "rp-segmented-control--md" },
+			sm: { base: "rp-segmented-control--sm" }
 		}
 	}
 });