@ropav/styles 0.5.0 → 0.7.0

package/dist/components/segmented-control.css

@@ -2,12 +2,12 @@
    SegmentedControl - one choice out of a few, drawn as a pill that slides
 
    Structure (explicit composition):
-     .segmented-control                → role="radiogroup", the track the pill slides in
-       .segmented-control__item        → button[role="radio"]
-         .segmented-control__indicator
+     .rp-segmented-control                → role="radiogroup", the track the pill slides in
+       .rp-segmented-control__item        → button[role="radio"]
+         .rp-segmented-control__indicator
    ========================================================================== */
 
-.segmented-control {
+.rp-segmented-control {
   @apply relative inline-flex w-max items-center bg-default p-1;
 
   /* The same corner a button of this size wears, not a larger one stepped out by the padding.
@@ -37,16 +37,18 @@
    Segment
    ========================================================================== */
 
-.segmented-control__item {
-  @apply relative inline-flex h-7 min-w-0 shrink-0 appearance-none items-center justify-center gap-2 rounded-component border-0 bg-transparent px-3 text-center text-sm font-medium whitespace-nowrap text-muted outline-none select-none no-highlight;
+.rp-segmented-control__item {
+  @apply relative inline-flex h-7 min-w-0 shrink-0 appearance-none items-center justify-center gap-2 rounded-component border-0 bg-transparent px-3 text-center text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
+
+  --segmented-control-item-fg: var(--muted);
+  --segmented-control-item-fg-hover: var(--foreground);
+  --segmented-control-item-fg-selected: var(--segment-foreground);
+
+  color: var(--segmented-control-item-fg);
 
   z-index: 1;
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     opacity 150ms var(--ease-smooth);
@@ -54,7 +56,7 @@
 
   /* Selected state */
   &[data-selected="true"] {
-    @apply text-segment-foreground;
+    color: var(--segmented-control-item-fg-selected);
 
     /* Sits on top of the indicator, which forced colors paints `Highlight`. `forced-color-adjust`
      * suppresses the `Canvas` backplate Chromium would otherwise paint behind this label - it
@@ -69,7 +71,7 @@
   @media (hover: hover) {
     &:not([data-selected="true"]):not([data-disabled="true"]):hover,
     &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
-      @apply text-foreground;
+      color: var(--segmented-control-item-fg-hover);
     }
   }
 
@@ -104,28 +106,24 @@
    one before it rather than being a node between the two.
    ========================================================================== */
 
-.segmented-control__separator {
+.rp-segmented-control__separator {
   @apply pointer-events-none absolute start-0 top-1/4 h-1/2 w-px rounded-sm bg-muted/25;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
   /* Nothing to divide in front of the first segment. */
-  .segmented-control__item:first-child & {
+  .rp-segmented-control__item:first-child & {
     @apply opacity-0;
   }
 }
 
 /* The pill covers its own leading divider, and the divider on the segment that follows would
    otherwise sit hard against the pill's trailing edge. Both step aside as it arrives. */
-.segmented-control__item[data-selected="true"] .segmented-control__separator,
-.segmented-control__item[data-selected="true"]
-  + .segmented-control__item
-  .segmented-control__separator {
+.rp-segmented-control__item[data-selected="true"] .rp-segmented-control__separator,
+.rp-segmented-control__item[data-selected="true"]
+  + .rp-segmented-control__item
+  .rp-segmented-control__separator {
   @apply opacity-0;
 }
 
@@ -135,7 +133,7 @@
    sliding along is one element handing its place to the next.
    ========================================================================== */
 
-.segmented-control__indicator {
+.rp-segmented-control__indicator {
   @apply absolute start-0 top-0 size-full rounded-component bg-segment shadow-surface;
 
   z-index: -1;
@@ -148,9 +146,6 @@
   }
 
   /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   *
    * `useSharedElement` reads this very declaration to decide what to carry across the handoff,
    * so the stylesheet stays the only place that decides what animates. `height` is listed even
    * though the pill only travels along one axis today, so a vertical orientation needs no
@@ -168,15 +163,15 @@
    track's own `p-1` is the 8px difference.
    ========================================================================== */
 
-.segmented-control--sm .segmented-control__item {
+.rp-segmented-control--sm .rp-segmented-control__item {
   @apply h-6 px-2.5 text-xs;
 }
 
-.segmented-control--md {
+.rp-segmented-control--md {
   /* No styles as this is the default size */
 }
 
-.segmented-control--lg .segmented-control__item {
+.rp-segmented-control--lg .rp-segmented-control__item {
   @apply h-8 px-4;
 }
 
@@ -184,10 +179,10 @@
    Full width modifier
    ========================================================================== */
 
-.segmented-control--full-width {
+.rp-segmented-control--full-width {
   @apply flex w-full;
 
-  .segmented-control__item {
+  .rp-segmented-control__item {
     @apply flex-1;
   }
 }

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

@@ -1,103 +1,46 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const selectVariants: import("tailwind-variants").TVReturnType<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, undefined, {
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    fullWidth: {
-        false: {};
-        true: {
-            base: string;
-            trigger: string;
-        };
-    };
-    size: {
-        lg: {
-            base: string;
-            popover: string;
-        };
-        md: {};
-        sm: {
-            base: string;
-            popover: string;
-        };
-    };
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    indicator: string;
-    popover: string;
-    trigger: string;
-    value: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const selectVariants: (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;
+    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;
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    popover: (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;
+    trigger: (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;
+    value: (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 SelectVariants = VariantProps<typeof selectVariants>;
 //# sourceMappingURL=select.styles.d.ts.map

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

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

package/dist/components/select/select.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/select/select.styles.ts
 const selectVariants = tv({
 	defaultVariants: {
@@ -7,34 +7,34 @@ const selectVariants = tv({
 		variant: "primary"
 	},
 	slots: {
-		base: "select",
-		indicator: "select__indicator",
-		popover: "select__popover",
-		trigger: "select__trigger",
-		value: "select__value"
+		base: "rp-select",
+		indicator: "rp-select__indicator",
+		popover: "rp-select__popover",
+		trigger: "rp-select__trigger",
+		value: "rp-select__value"
 	},
 	variants: {
 		fullWidth: {
 			false: {},
 			true: {
-				base: "select--full-width",
-				trigger: "select__trigger--full-width"
+				base: "rp-select--full-width",
+				trigger: "rp-select__trigger--full-width"
 			}
 		},
 		size: {
 			lg: {
-				base: "select--lg",
-				popover: "select__popover--lg"
+				base: "rp-select--lg",
+				popover: "rp-select__popover--lg"
 			},
 			md: {},
 			sm: {
-				base: "select--sm",
-				popover: "select__popover--sm"
+				base: "rp-select--sm",
+				popover: "rp-select__popover--sm"
 			}
 		},
 		variant: {
-			primary: { base: "select--primary" },
-			secondary: { base: "select--secondary" }
+			primary: { base: "rp-select--primary" },
+			secondary: { base: "rp-select--secondary" }
 		}
 	}
 });

package/dist/components/select.css

@@ -1,5 +1,5 @@
 /* Select styles */
-.select {
+.rp-select {
   @apply flex flex-col gap-1;
 
   &[data-invalid="true"],
@@ -14,8 +14,15 @@
   }
 }
 
-.select__trigger {
-  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 field-line-md text-field-foreground shadow-field outline-none select-none no-highlight;
+.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. */
+  --select-trigger-bg: var(--field-background, var(--default));
+  --select-trigger-bg-hover: var(--field-hover);
+  --select-trigger-bg-focus: var(--field-focus);
+
+  background-color: var(--select-trigger-bg);
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, leaving a field that
    * reads as bare text - `--border-width-field` is 0, so the declared border brings nothing back on
@@ -26,10 +33,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),
@@ -43,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;
   }
 
@@ -51,7 +54,7 @@
   @media (hover: hover) {
     &:hover,
     &[data-hovered="true"] {
-      @apply bg-field-hover;
+      background-color: var(--select-trigger-bg-hover);
       border-color: var(--field-border-hover);
     }
   }
@@ -61,7 +64,7 @@
   &[data-focus-visible="true"] {
     @apply status-focused;
     border-color: var(--field-border-focus);
-    background-color: var(--field-focus);
+    background-color: var(--select-trigger-bg-focus);
   }
 
   /* Focus state */
@@ -70,10 +73,10 @@
   }
 
   /* 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(--field-focus);
+    background-color: var(--select-trigger-bg-focus);
   }
 
   /* Disabled state */
@@ -85,45 +88,28 @@
 }
 
 /* Variant property definitions */
-.select--primary {
+.rp-select--primary {
   /* Default styles */
 }
 
-.select--secondary .select__trigger {
+.rp-select--secondary .rp-select__trigger {
   @apply shadow-none;
-  background-color: var(--select-trigger-bg);
 
   --select-trigger-bg: var(--default);
   --select-trigger-bg-hover: var(--default-hover);
   --select-trigger-bg-focus: var(--default);
+}
 
-  @media (hover: hover) {
-    &:hover,
-    &[data-hovered="true"] {
-      background-color: var(--select-trigger-bg-hover);
-    }
-  }
-
-  &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
-    background-color: var(--select-trigger-bg-focus);
-  }
+.rp-select__value {
+  @apply flex-1 text-start wrap-break-word;
 
-  &:focus,
-  &[data-focus="true"] {
-  }
-
-  .select[data-invalid="true"] &,
-  .select[aria-invalid="true"] & {
-    background-color: var(--select-trigger-bg-focus);
-  }
-}
+  --select-value-fg: currentcolor;
+  --select-value-fg-placeholder: var(--field-placeholder, var(--muted));
 
-.select__value {
-  @apply flex-1 text-start wrap-break-word text-current;
+  color: var(--select-value-fg);
 
   &[data-placeholder="true"] {
-    @apply text-field-placeholder;
+    color: var(--select-value-fg-placeholder);
   }
 
   /* Removes the list-box-item indicator element from the select value*/
@@ -132,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"] {
@@ -145,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);
@@ -230,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"] {
@@ -253,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"
 		}
 	}
 });