@ropav/styles 0.5.0 → 0.7.0

package/dist/components/toggle-button.css

@@ -3,13 +3,9 @@
    ========================================================================== */
 
 /* Base styles */
-.toggle-button {
+.rp-toggle-button {
   @apply relative isolate inline-flex h-9 w-fit origin-center items-center justify-center gap-2 rounded-component px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     transform 250ms var(--ease-smooth),
     background-color 100ms var(--ease-out),
@@ -99,7 +95,7 @@
    Size variants
    ========================================================================== */
 
-.toggle-button--sm {
+.rp-toggle-button--sm {
   @apply h-8 px-3;
 
   &:active,
@@ -108,11 +104,11 @@
   }
 }
 
-.toggle-button--md {
+.rp-toggle-button--md {
   /* No styles as this is the default size */
 }
 
-.toggle-button--lg {
+.rp-toggle-button--lg {
   @apply h-10 text-base;
 
   &:active,
@@ -125,16 +121,16 @@
    Variant styles
    ========================================================================== */
 
-.toggle-button--default {
+.rp-toggle-button--default {
   --toggle-button-bg: var(--default);
   --toggle-button-bg-hover: var(--default-hover);
   --toggle-button-bg-pressed: var(--default-hover);
 }
 
-.toggle-button--ghost {
+.rp-toggle-button--ghost {
   --toggle-button-bg: transparent;
-  --toggle-button-bg-hover: var(--default);
-  --toggle-button-bg-pressed: var(--default);
+  --toggle-button-bg-hover: var(--state-layer);
+  --toggle-button-bg-pressed: var(--state-layer);
   --toggle-button-fg: var(--default-foreground);
 }
 
@@ -142,14 +138,14 @@
    Icon-only modifier
    ========================================================================== */
 
-.toggle-button--icon-only {
+.rp-toggle-button--icon-only {
   @apply w-9 p-0;
 }
 
-.toggle-button--icon-only.toggle-button--sm {
+.rp-toggle-button--icon-only.rp-toggle-button--sm {
   @apply w-8;
 }
 
-.toggle-button--icon-only.toggle-button--lg {
+.rp-toggle-button--icon-only.rp-toggle-button--lg {
   @apply w-10;
 }

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

@@ -1,29 +1,10 @@
-import type { VariantProps } from "tailwind-variants";
-declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
-    isAttached: {
-        true: "toolbar--attached";
-    };
-    orientation: {
-        horizontal: "toolbar--horizontal";
-        vertical: "toolbar--vertical";
-    };
-}, undefined, "toolbar", {
-    isAttached: {
-        true: "toolbar--attached";
-    };
-    orientation: {
-        horizontal: "toolbar--horizontal";
-        vertical: "toolbar--vertical";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    isAttached: {
-        true: "toolbar--attached";
-    };
-    orientation: {
-        horizontal: "toolbar--horizontal";
-        vertical: "toolbar--vertical";
-    };
-}, undefined>>;
+import type { VariantProps } from "../../tv";
+declare const toolbarVariants: (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;
+} & {
+    isAttached?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+}) | undefined) => string;
 export { toolbarVariants };
 export type ToolbarVariants = VariantProps<typeof toolbarVariants>;
 //# sourceMappingURL=toolbar.styles.d.ts.map

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

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

package/dist/components/toolbar/toolbar.styles.js

@@ -1,16 +1,16 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/toolbar/toolbar.styles.ts
 const toolbarVariants = tv({
-	base: "toolbar",
+	base: "rp-toolbar",
 	defaultVariants: {
 		isAttached: false,
 		orientation: "horizontal"
 	},
 	variants: {
-		isAttached: { true: "toolbar--attached" },
+		isAttached: { true: "rp-toolbar--attached" },
 		orientation: {
-			horizontal: "toolbar--horizontal",
-			vertical: "toolbar--vertical"
+			horizontal: "rp-toolbar--horizontal",
+			vertical: "rp-toolbar--vertical"
 		}
 	}
 });

package/dist/components/toolbar.css

@@ -3,31 +3,31 @@
    ========================================================================== */
 
 /* Base styles */
-.toolbar {
+.rp-toolbar {
   @apply grid w-fit grid-flow-col items-center gap-2;
 
-  .separator--vertical {
+  .rp-separator--vertical {
     @apply h-1/2 self-center;
   }
 
-  .separator--horizontal {
+  .rp-separator--horizontal {
     @apply w-1/2 justify-center justify-self-center;
   }
 }
 
 /* Orientation variants */
-.toolbar--horizontal {
+.rp-toolbar--horizontal {
 }
 
-.toolbar--vertical {
+.rp-toolbar--vertical {
   @apply grid-flow-row items-start justify-start;
-  .button-group {
+  .rp-button-group {
     @apply justify-start;
   }
 }
 
 /* Attached variant */
-.toolbar--attached {
+.rp-toolbar--attached {
   @apply rounded-component bg-surface p-1 shadow-overlay;
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container

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

@@ -1,34 +1,13 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const tooltipVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    trigger: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const tooltipVariants: (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;
+} & object) | 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;
+    } & object) | 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;
+    } & object) | undefined) => string;
+};
 export type TooltipVariants = VariantProps<typeof tooltipVariants>;
 //# sourceMappingURL=tooltip.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,eAAe;;;;;;;;;CAK1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/tooltip/tooltip.styles.js

@@ -1,8 +1,8 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/tooltip/tooltip.styles.ts
 const tooltipVariants = tv({ slots: {
-	base: "tooltip",
-	trigger: "tooltip__trigger"
+	base: "rp-tooltip",
+	trigger: "rp-tooltip__trigger"
 } });
 //#endregion
 export { tooltipVariants };

package/dist/components/tooltip.css

@@ -1,7 +1,7 @@
 /* Tooltip component styles */
 
 /* Base tooltip styles */
-.tooltip {
+.rp-tooltip {
   @apply max-w-xs origin-(--trigger-anchor-point) bg-overlay p-2 text-xs break-all;
   border-radius: min(32px, var(--component-radius));
   box-shadow: var(--shadow-overlay);
@@ -72,13 +72,9 @@
 }
 
 /* Tooltip trigger */
-.tooltip__trigger {
+.rp-tooltip__trigger {
   @apply inline-block;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),

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

@@ -1,109 +1,31 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const typographyVariants: import("tailwind-variants").TVReturnType<{
-    align: {
-        center: "typography--align-center";
-        end: "typography--align-end";
-        justify: "typography--align-justify";
-        start: "typography--align-start";
-    };
-    color: {
-        default: "typography--color-default";
-        muted: "typography--color-muted";
-    };
-    truncate: {
-        true: "typography--truncate";
-    };
-    type: {
-        body: "typography--body";
-        "body-sm": "typography--body-sm";
-        "body-xs": "typography--body-xs";
-        code: "typography--code";
-        h1: "typography--h1";
-        h2: "typography--h2";
-        h3: "typography--h3";
-        h4: "typography--h4";
-        h5: "typography--h5";
-        h6: "typography--h6";
-    };
-    weight: {
-        bold: "typography--weight-bold";
-        medium: "typography--weight-medium";
-        normal: "typography--weight-normal";
-        semibold: "typography--weight-semibold";
-    };
-}, {
-    base: string;
-    prose: string;
-}, undefined, {
-    align: {
-        center: "typography--align-center";
-        end: "typography--align-end";
-        justify: "typography--align-justify";
-        start: "typography--align-start";
-    };
-    color: {
-        default: "typography--color-default";
-        muted: "typography--color-muted";
-    };
-    truncate: {
-        true: "typography--truncate";
-    };
-    type: {
-        body: "typography--body";
-        "body-sm": "typography--body-sm";
-        "body-xs": "typography--body-xs";
-        code: "typography--code";
-        h1: "typography--h1";
-        h2: "typography--h2";
-        h3: "typography--h3";
-        h4: "typography--h4";
-        h5: "typography--h5";
-        h6: "typography--h6";
-    };
-    weight: {
-        bold: "typography--weight-bold";
-        medium: "typography--weight-medium";
-        normal: "typography--weight-normal";
-        semibold: "typography--weight-semibold";
-    };
-}, {
-    base: string;
-    prose: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    align: {
-        center: "typography--align-center";
-        end: "typography--align-end";
-        justify: "typography--align-justify";
-        start: "typography--align-start";
-    };
-    color: {
-        default: "typography--color-default";
-        muted: "typography--color-muted";
-    };
-    truncate: {
-        true: "typography--truncate";
-    };
-    type: {
-        body: "typography--body";
-        "body-sm": "typography--body-sm";
-        "body-xs": "typography--body-xs";
-        code: "typography--code";
-        h1: "typography--h1";
-        h2: "typography--h2";
-        h3: "typography--h3";
-        h4: "typography--h4";
-        h5: "typography--h5";
-        h6: "typography--h6";
-    };
-    weight: {
-        bold: "typography--weight-bold";
-        medium: "typography--weight-medium";
-        normal: "typography--weight-normal";
-        semibold: "typography--weight-semibold";
-    };
-}, {
-    base: string;
-    prose: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const typographyVariants: (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;
+} & {
+    align?: "center" | "end" | "justify" | "start" | undefined;
+    color?: "default" | "muted" | undefined;
+    truncate?: boolean | undefined;
+    type?: "body" | "body-sm" | "body-xs" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    weight?: "bold" | "medium" | "normal" | "semibold" | 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;
+    } & {
+        align?: "center" | "end" | "justify" | "start" | undefined;
+        color?: "default" | "muted" | undefined;
+        truncate?: boolean | undefined;
+        type?: "body" | "body-sm" | "body-xs" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        weight?: "bold" | "medium" | "normal" | "semibold" | undefined;
+    }) | undefined) => string;
+    prose: (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;
+    } & {
+        align?: "center" | "end" | "justify" | "start" | undefined;
+        color?: "default" | "muted" | undefined;
+        truncate?: boolean | undefined;
+        type?: "body" | "body-sm" | "body-xs" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+        weight?: "bold" | "medium" | "normal" | "semibold" | undefined;
+    }) | undefined) => string;
+};
 export type TypographyVariants = VariantProps<typeof typographyVariants>;
 //# sourceMappingURL=typography.styles.d.ts.map

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

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

package/dist/components/typography/typography.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/typography/typography.styles.ts
 const typographyVariants = tv({
 	defaultVariants: {
@@ -7,38 +7,38 @@ const typographyVariants = tv({
 		type: "body"
 	},
 	slots: {
-		base: "typography",
-		prose: "typography-prose"
+		base: "rp-typography",
+		prose: "rp-typography-prose"
 	},
 	variants: {
 		align: {
-			center: "typography--align-center",
-			end: "typography--align-end",
-			justify: "typography--align-justify",
-			start: "typography--align-start"
+			center: "rp-typography--align-center",
+			end: "rp-typography--align-end",
+			justify: "rp-typography--align-justify",
+			start: "rp-typography--align-start"
 		},
 		color: {
-			default: "typography--color-default",
-			muted: "typography--color-muted"
+			default: "rp-typography--color-default",
+			muted: "rp-typography--color-muted"
 		},
-		truncate: { true: "typography--truncate" },
+		truncate: { true: "rp-typography--truncate" },
 		type: {
-			body: "typography--body",
-			"body-sm": "typography--body-sm",
-			"body-xs": "typography--body-xs",
-			code: "typography--code",
-			h1: "typography--h1",
-			h2: "typography--h2",
-			h3: "typography--h3",
-			h4: "typography--h4",
-			h5: "typography--h5",
-			h6: "typography--h6"
+			body: "rp-typography--body",
+			"body-sm": "rp-typography--body-sm",
+			"body-xs": "rp-typography--body-xs",
+			code: "rp-typography--code",
+			h1: "rp-typography--h1",
+			h2: "rp-typography--h2",
+			h3: "rp-typography--h3",
+			h4: "rp-typography--h4",
+			h5: "rp-typography--h5",
+			h6: "rp-typography--h6"
 		},
 		weight: {
-			bold: "typography--weight-bold",
-			medium: "typography--weight-medium",
-			normal: "typography--weight-normal",
-			semibold: "typography--weight-semibold"
+			bold: "rp-typography--weight-bold",
+			medium: "rp-typography--weight-medium",
+			normal: "rp-typography--weight-normal",
+			semibold: "rp-typography--weight-semibold"
 		}
 	}
 });