@ropav/styles 0.6.0 → 0.7.0

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

@@ -1,58 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const switchVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    icon: string;
-    thumb: string;
-}, undefined, {
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    icon: string;
-    thumb: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    control: string;
-    icon: string;
-    thumb: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const switchVariants: (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;
+} & {
+    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;
+    } & {
+        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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    control: (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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    icon: (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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+    thumb: (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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+    }) | undefined) => string;
+};
 export type SwitchVariants = VariantProps<typeof switchVariants>;
 //# sourceMappingURL=switch.styles.d.ts.map

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

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

package/dist/components/switch/switch.styles.js

@@ -1,18 +1,18 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/switch/switch.styles.ts
 const switchVariants = tv({
 	defaultVariants: { size: "md" },
 	slots: {
-		base: "switch",
-		content: "switch__content",
-		control: "switch__control",
-		icon: "switch__icon",
-		thumb: "switch__thumb"
+		base: "rp-switch",
+		content: "rp-switch__content",
+		control: "rp-switch__control",
+		icon: "rp-switch__icon",
+		thumb: "rp-switch__thumb"
 	},
 	variants: { size: {
-		lg: { base: "switch--lg" },
-		md: { base: "switch--md" },
-		sm: { base: "switch--sm" }
+		lg: { base: "rp-switch--lg" },
+		md: { base: "rp-switch--md" },
+		sm: { base: "rp-switch--sm" }
 	} }
 });
 //#endregion

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

@@ -1,40 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const switchGroupVariants: import("tailwind-variants").TVReturnType<{
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    items: string;
-}, undefined, {
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    items: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    orientation: {
-        horizontal: {
-            base: string;
-        };
-        vertical: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    items: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const switchGroupVariants: (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;
+}) | 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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+    items: (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;
+    } & {
+        orientation?: "horizontal" | "vertical" | undefined;
+    }) | undefined) => string;
+};
 export type SwitchGroupVariants = VariantProps<typeof switchGroupVariants>;
 //# sourceMappingURL=switch-group.styles.d.ts.map

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

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

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

@@ -1,14 +1,14 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/switch-group/switch-group.styles.ts
 const switchGroupVariants = tv({
 	defaultVariants: { orientation: "vertical" },
 	slots: {
-		base: "switch-group",
-		items: "switch-group__items"
+		base: "rp-switch-group",
+		items: "rp-switch-group__items"
 	},
 	variants: { orientation: {
-		horizontal: { base: "switch-group--horizontal" },
-		vertical: { base: "switch-group--vertical" }
+		horizontal: { base: "rp-switch-group--horizontal" },
+		vertical: { base: "rp-switch-group--vertical" }
 	} }
 });
 //#endregion

package/dist/components/switch-group.css

@@ -1,17 +1,17 @@
 /* Switch Group styles */
-.switch-group {
+.rp-switch-group {
   @apply flex flex-col gap-6;
 }
 
-.switch-group__items {
+.rp-switch-group__items {
   @apply flex gap-4;
 }
 
 /* Orientation modifiers */
-.switch-group--horizontal .switch-group__items {
+.rp-switch-group--horizontal .rp-switch-group__items {
   @apply flex-row;
 }
 
-.switch-group--vertical .switch-group__items {
+.rp-switch-group--vertical .rp-switch-group__items {
   @apply flex-col;
 }

package/dist/components/switch.css

@@ -1,5 +1,5 @@
 /* Switch base styles */
-.switch {
+.rp-switch {
   @apply flex flex-col items-start gap-1 no-highlight;
 
   /* Cursor */
@@ -21,7 +21,7 @@
       @apply status-disabled;
     }
 
-    .switch__thumb {
+    .rp-switch__thumb {
       background-color: var(--switch-thumb-bg-disabled);
 
       @media (forced-colors: active) {
@@ -39,19 +39,19 @@
     @apply w-full min-w-0 ps-[calc(2.5rem+0.75rem)] text-xs text-muted;
   }
 
-  &.switch--sm > [data-slot="description"] {
+  &.rp-switch--sm > [data-slot="description"] {
     @apply ps-[calc(2rem+0.75rem)];
   }
 
-  &.switch--sm > [data-slot="field-error"] {
+  &.rp-switch--sm > [data-slot="field-error"] {
     @apply ps-[calc(2rem+0.75rem)];
   }
 
-  &.switch--lg > [data-slot="description"] {
+  &.rp-switch--lg > [data-slot="description"] {
     @apply ps-[calc(3rem+0.75rem)];
   }
 
-  &.switch--lg > [data-slot="field-error"] {
+  &.rp-switch--lg > [data-slot="field-error"] {
     @apply ps-[calc(3rem+0.75rem)];
   }
 
@@ -62,27 +62,27 @@
   &[data-disabled="true"][data-selected="true"],
   &[aria-disabled="true"][aria-checked="true"],
   &[aria-disabled="true"][data-selected="true"] {
-    .switch__thumb {
+    .rp-switch__thumb {
       opacity: 0.4;
     }
   }
 }
 
 /* Size variants - default is medium */
-.switch--sm {
+.rp-switch--sm {
   /* Small size modifier */
 }
 
-.switch--md {
+.rp-switch--md {
   /* Medium size - no styles as this is the default */
 }
 
-.switch--lg {
+.rp-switch--lg {
   /* Large size modifier */
 }
 
 /* Switch control (track) */
-.switch__control {
+.rp-switch__control {
   /* Default size (medium) */
   @apply relative flex shrink-0 items-center overflow-hidden;
 
@@ -107,30 +107,30 @@
   }
 
   /* Focus states */
-  .switch:focus-visible &,
-  .switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
-  .switch [data-slot="switch-content"][data-focus-visible="true"] & {
+  .rp-switch:focus-visible &,
+  .rp-switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
+  .rp-switch [data-slot="switch-content"][data-focus-visible="true"] & {
     @apply status-focused;
   }
 
   /* Hover states */
-  .switch:hover &,
-  .switch:has([data-slot="switch-content"][data-hovered="true"]) &,
-  .switch [data-slot="switch-content"][data-hovered="true"] & {
+  .rp-switch:hover &,
+  .rp-switch:has([data-slot="switch-content"][data-hovered="true"]) &,
+  .rp-switch [data-slot="switch-content"][data-hovered="true"] & {
     background-color: var(--switch-control-bg-hover);
   }
 
   /* Pressed states */
-  .switch:active &,
-  .switch:has([data-slot="switch-content"][data-pressed="true"]) &,
-  .switch [data-slot="switch-content"][data-pressed="true"] & {
+  .rp-switch:active &,
+  .rp-switch:has([data-slot="switch-content"][data-pressed="true"]) &,
+  .rp-switch [data-slot="switch-content"][data-pressed="true"] & {
     background-color: var(--switch-control-bg-pressed);
     @apply motion-reduce:transform-none;
   }
 
   /* Checked states */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked);
 
     @media (forced-colors: active) {
@@ -140,46 +140,46 @@
   }
 
   /* Checked + Hover states */
-  .switch[aria-checked="true"]:hover &,
-  .switch[data-selected="true"]:hover &,
-  .switch[aria-checked="true"][data-hovered="true"] &,
-  .switch[data-selected="true"][data-hovered="true"] &,
-  .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] & {
+  .rp-switch[aria-checked="true"]:hover &,
+  .rp-switch[data-selected="true"]:hover &,
+  .rp-switch[aria-checked="true"][data-hovered="true"] &,
+  .rp-switch[data-selected="true"][data-hovered="true"] &,
+  .rp-switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked-hover);
   }
 
   /* Checked + Pressed states */
-  .switch[aria-checked="true"]:active &,
-  .switch[data-selected="true"]:active &,
-  .switch[aria-checked="true"][data-pressed="true"] &,
-  .switch[data-selected="true"][data-pressed="true"] &,
-  .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] & {
+  .rp-switch[aria-checked="true"]:active &,
+  .rp-switch[data-selected="true"]:active &,
+  .rp-switch[aria-checked="true"][data-pressed="true"] &,
+  .rp-switch[data-selected="true"][data-pressed="true"] &,
+  .rp-switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked-hover);
   }
 }
 
 /* Switch content — the clickable label (control + label text) */
-.switch__content {
+.rp-switch__content {
   @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
 }
 
 /* Size-specific control dimensions */
-.switch--sm .switch__control {
+.rp-switch--sm .rp-switch__control {
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 2rem; /* ~32px on desktop, ~36px on mobile */
 }
 
-.switch--md .switch__control {
+.rp-switch--md .rp-switch__control {
   /* No styles as this is the default size */
 }
 
-.switch--lg .switch__control {
+.rp-switch--lg .rp-switch__control {
   height: 1.5rem; /* ~21px on desktop, ~24px on mobile */
   width: 3rem; /* ~48px on desktop, ~56px on mobile */
 }
 
 /* Switch thumb */
-.switch__thumb {
+.rp-switch__thumb {
   /* Default size (medium) with margin-based positioning */
   @apply ms-0.5 flex origin-center text-black shadow-field;
 
@@ -206,8 +206,8 @@
   @apply motion-reduce:transition-none;
 
   /* Selected/checked state - use margin instead of translate */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     @apply ms-[calc(100%-1.5rem)] text-accent;
 
     background-color: var(--switch-thumb-bg-selected);
@@ -222,52 +222,52 @@
     }
   }
 
-  .switch:active &,
-  .switch[data-pressed="true"] & {
+  .rp-switch:active &,
+  .rp-switch[data-pressed="true"] & {
   }
 }
 
 /* Size-specific thumb dimensions */
-.switch--sm .switch__thumb {
+.rp-switch--sm .rp-switch__thumb {
   height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */
   width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */
 
   /* Small selected state positioning */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     @apply ms-[calc(100%-1.15625rem)];
   }
 }
 
-.switch--lg .switch__thumb {
+.rp-switch--lg .rp-switch__thumb {
   height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */
   width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */
 
   /* Large selected state positioning */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     @apply ms-[calc(100%-1.84375rem)];
   }
 }
 
 /* Switch thumb content container */
-.switch__thumb > * {
+.rp-switch__thumb > * {
   @apply flex size-full items-center justify-center;
 }
 
 /* Switch label */
-.switch__label {
+.rp-switch__label {
   @apply text-base font-medium text-foreground;
 }
 
-.switch [data-slot="label"] {
+.rp-switch [data-slot="label"] {
   @apply select-none;
 }
 
-.switch__content [data-slot="label"] {
+.rp-switch__content [data-slot="label"] {
   cursor: var(--cursor-interactive);
 }
 
-.switch [data-slot="description"] {
+.rp-switch [data-slot="description"] {
   @apply cursor-default select-none;
 }