@ropav/styles 0.6.0 → 0.7.0

package/dist/components/select.css

@@ -1,5 +1,5 @@
 /* Select styles */
-.select {
+.rp-select {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -14,7 +14,7 @@
   }
 }
 
-.select__trigger {
+.rp-select__trigger {
   @apply relative isolate inline-flex min-h-9 rounded-field border px-3 field-line-md text-field-foreground shadow-field outline-none select-none no-highlight;
 
   /* The fill, per state. The `--secondary` variant re-points these and declares nothing else. */
@@ -46,7 +46,7 @@
   border-color: var(--field-border);
 
   /* Add inline-end padding when indicator is present */
-  &:has(.select__indicator) {
+  &:has(.rp-select__indicator) {
     @apply pe-7;
   }
 
@@ -73,8 +73,8 @@
   }
 
   /* Invalid state */
-  .select[data-invalid="true"] &,
-  .select[aria-invalid="true"] & {
+  .rp-select[data-invalid="true"] &,
+  .rp-select[aria-invalid="true"] & {
     @apply status-invalid-field;
     background-color: var(--select-trigger-bg-focus);
   }
@@ -88,11 +88,11 @@
 }
 
 /* Variant property definitions */
-.select--primary {
+.rp-select--primary {
   /* Default styles */
 }
 
-.select--secondary .select__trigger {
+.rp-select--secondary .rp-select__trigger {
   @apply shadow-none;
 
   --select-trigger-bg: var(--default);
@@ -100,7 +100,7 @@
   --select-trigger-bg-focus: var(--default);
 }
 
-.select__value {
+.rp-select__value {
   @apply flex-1 text-start wrap-break-word;
 
   --select-value-fg: currentcolor;
@@ -118,7 +118,7 @@
   }
 }
 
-.select__indicator {
+.rp-select__indicator {
   @apply absolute inset-y-0 end-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
 
   &[data-open="true"] {
@@ -131,7 +131,7 @@
 }
 
 /* Similar to popover content styles */
-.select__popover {
+.rp-select__popover {
   @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm;
   border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
@@ -216,21 +216,21 @@
 
 /* The trigger's own metrics, and the option rows in a popover that is portalled out of this tree -
  * which is why the popover carries its own size class rather than being reached from the base. */
-.select--sm .select__trigger {
+.rp-select--sm .rp-select__trigger {
   @apply min-h-8 field-line-sm;
 }
 
-.select--lg .select__trigger {
+.rp-select--lg .rp-select__trigger {
   @apply min-h-10 field-line-lg;
 }
 
-.select__popover--sm {
+.rp-select__popover--sm {
   [data-slot="list-box-item"] {
     @apply min-h-8 py-1;
   }
 }
 
-.select__popover--lg {
+.rp-select__popover--lg {
   @apply text-base;
 
   [data-slot="list-box-item"] {
@@ -239,10 +239,10 @@
 }
 
 /* Full width modifier */
-.select--full-width {
+.rp-select--full-width {
   @apply w-full;
 }
 
-.select__trigger--full-width {
+.rp-select__trigger--full-width {
   @apply w-full;
 }

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

@@ -1,35 +1,10 @@
-import type { VariantProps } from "tailwind-variants";
-declare const separatorVariants: import("tailwind-variants").TVReturnType<{
-    orientation: {
-        horizontal: "separator--horizontal";
-        vertical: "separator--vertical";
-    };
-    variant: {
-        default: "separator--default";
-        secondary: "separator--secondary";
-        tertiary: "separator--tertiary";
-    };
-}, undefined, "separator", {
-    orientation: {
-        horizontal: "separator--horizontal";
-        vertical: "separator--vertical";
-    };
-    variant: {
-        default: "separator--default";
-        secondary: "separator--secondary";
-        tertiary: "separator--tertiary";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    orientation: {
-        horizontal: "separator--horizontal";
-        vertical: "separator--vertical";
-    };
-    variant: {
-        default: "separator--default";
-        secondary: "separator--secondary";
-        tertiary: "separator--tertiary";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+declare const separatorVariants: (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;
+} & {
+    orientation?: "horizontal" | "vertical" | undefined;
+    variant?: "default" | "secondary" | "tertiary" | undefined;
+}) | undefined) => string;
 export { separatorVariants };
 export type SeparatorVariants = VariantProps<typeof separatorVariants>;
 //# sourceMappingURL=separator.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"separator.styles.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiBrB,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"separator.styles.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,QAAA,MAAM,iBAAiB;;;;;yBAiBrB,CAAC;AAEH,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/separator/separator.styles.js

@@ -1,20 +1,20 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/separator/separator.styles.ts
 const separatorVariants = tv({
-	base: "separator",
+	base: "rp-separator",
 	defaultVariants: {
 		orientation: "horizontal",
 		variant: "default"
 	},
 	variants: {
 		orientation: {
-			horizontal: "separator--horizontal",
-			vertical: "separator--vertical"
+			horizontal: "rp-separator--horizontal",
+			vertical: "rp-separator--vertical"
 		},
 		variant: {
-			default: "separator--default",
-			secondary: "separator--secondary",
-			tertiary: "separator--tertiary"
+			default: "rp-separator--default",
+			secondary: "rp-separator--secondary",
+			tertiary: "rp-separator--tertiary"
 		}
 	}
 });

package/dist/components/separator.css

@@ -1,7 +1,7 @@
 /* Separator Component Styles */
 
 /* Base separator with default horizontal orientation */
-.separator {
+.rp-separator {
   @apply shrink-0 rounded-sm border-t-0 border-b-0 bg-separator;
 
   /* Default size - horizontal orientation */
@@ -9,11 +9,11 @@
 }
 
 /* Orientation variants */
-.separator--horizontal {
+.rp-separator--horizontal {
   @apply h-px w-full;
 }
 
-.separator--vertical {
+.rp-separator--vertical {
   @apply h-auto min-h-2 w-px self-stretch;
 }
 
@@ -23,7 +23,7 @@
  * removes the rule entirely rather than weakening it. Each variant restates the fallback because
  * each one sets `background-color` after the base rule and would otherwise win. All three land on
  * the same ink - the mode has no second tier to give them. */
-.separator--default {
+.rp-separator--default {
   @apply bg-separator;
 
   @media (forced-colors: active) {
@@ -31,7 +31,7 @@
   }
 }
 
-.separator--secondary {
+.rp-separator--secondary {
   @apply bg-separator-secondary;
 
   @media (forced-colors: active) {
@@ -39,7 +39,7 @@
   }
 }
 
-.separator--tertiary {
+.rp-separator--tertiary {
   @apply bg-separator-tertiary;
 
   @media (forced-colors: active) {
@@ -47,30 +47,30 @@
   }
 }
 
-.separator__container {
+.rp-separator__container {
   @apply flex items-center gap-3;
 }
 
-.separator__container--horizontal {
+.rp-separator__container--horizontal {
   @apply w-full flex-row;
 }
 
-.separator__container--vertical {
+.rp-separator__container--vertical {
   @apply h-full flex-col justify-center;
 }
 
-.separator__line {
+.rp-separator__line {
   @apply shrink-0 grow;
 }
 
-.separator__content {
+.rp-separator__content {
   @apply inline-flex items-center justify-center text-center whitespace-nowrap text-muted;
 }
 
-.separator__content--horizontal {
+.rp-separator__content--horizontal {
   @apply text-center;
 }
 
-.separator__content--vertical {
+.rp-separator__content--vertical {
   @apply text-center;
 }