@ropav/styles 0.5.0 → 0.7.0

package/src/components/card/card.styles.ts

@@ -1,32 +1,32 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 const cardVariants = tv({
   defaultVariants: {
     variant: "default",
   },
   slots: {
-    base: "card",
-    content: "card__content",
-    description: "card__description",
-    footer: "card__footer",
-    header: "card__header",
-    title: "card__title",
+    base: "rp-card",
+    content: "rp-card__content",
+    description: "rp-card__description",
+    footer: "rp-card__footer",
+    header: "rp-card__header",
+    title: "rp-card__title",
   },
   variants: {
     variant: {
       default: {
-        base: "card--default",
+        base: "rp-card--default",
       },
       secondary: {
-        base: "card--secondary",
+        base: "rp-card--secondary",
       },
       tertiary: {
-        base: "card--tertiary",
+        base: "rp-card--tertiary",
       },
       transparent: {
-        base: "card--transparent",
+        base: "rp-card--transparent",
       },
     },
   },

package/src/components/checkbox/checkbox.styles.ts

@@ -1,24 +1,24 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const checkboxVariants = tv({
   defaultVariants: {
     variant: "primary",
   },
   slots: {
-    base: "checkbox",
-    content: "checkbox__content",
-    control: "checkbox__control",
-    indicator: "checkbox__indicator",
+    base: "rp-checkbox",
+    content: "rp-checkbox__content",
+    control: "rp-checkbox__control",
+    indicator: "rp-checkbox__indicator",
   },
   variants: {
     variant: {
       primary: {
-        base: "checkbox--primary",
+        base: "rp-checkbox--primary",
       },
       secondary: {
-        base: "checkbox--secondary",
+        base: "rp-checkbox--secondary",
       },
     },
   },

package/src/components/checkbox-group/checkbox-group.styles.ts

@@ -1,16 +1,16 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const checkboxGroupVariants = tv({
-  base: "checkbox-group",
+  base: "rp-checkbox-group",
   defaultVariants: {
     variant: "primary",
   },
   variants: {
     variant: {
-      primary: "checkbox-group--primary",
-      secondary: "checkbox-group--secondary",
+      primary: "rp-checkbox-group--primary",
+      secondary: "rp-checkbox-group--secondary",
     },
   },
 });

package/src/components/chip/chip.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const chipVariants = tv({
   defaultVariants: {
@@ -8,50 +8,50 @@ export const chipVariants = tv({
     variant: "secondary",
   },
   slots: {
-    base: "chip",
-    label: "chip__label",
+    base: "rp-chip",
+    label: "rp-chip__label",
   },
   variants: {
     color: {
       accent: {
-        base: "chip--accent",
+        base: "rp-chip--accent",
       },
       danger: {
-        base: "chip--danger",
+        base: "rp-chip--danger",
       },
       default: {
-        base: "chip--default",
+        base: "rp-chip--default",
       },
       success: {
-        base: "chip--success",
+        base: "rp-chip--success",
       },
       warning: {
-        base: "chip--warning",
+        base: "rp-chip--warning",
       },
     },
     size: {
       lg: {
-        base: "chip--lg",
+        base: "rp-chip--lg",
       },
       md: {
-        base: "chip--md",
+        base: "rp-chip--md",
       },
       sm: {
-        base: "chip--sm",
+        base: "rp-chip--sm",
       },
     },
     variant: {
       primary: {
-        base: "chip--primary",
+        base: "rp-chip--primary",
       },
       secondary: {
-        base: "chip--secondary",
+        base: "rp-chip--secondary",
       },
       soft: {
-        base: "chip--soft",
+        base: "rp-chip--soft",
       },
       tertiary: {
-        base: "chip--tertiary",
+        base: "rp-chip--tertiary",
       },
     },
   },

package/src/components/close-button/close-button.styles.ts

@@ -1,15 +1,15 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const closeButtonVariants = tv({
-  base: "close-button",
+  base: "rp-close-button",
   defaultVariants: {
     variant: "default",
   },
   variants: {
     variant: {
-      default: "close-button--default",
+      default: "rp-close-button--default",
     },
   },
 });

package/src/components/color-area/color-area.styles.ts

@@ -1,20 +1,20 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorAreaVariants = tv({
   defaultVariants: {
     showDots: false,
   },
   slots: {
-    base: "color-area",
-    thumb: "color-area__thumb",
+    base: "rp-color-area",
+    thumb: "rp-color-area__thumb",
   },
   variants: {
     showDots: {
       false: {},
       true: {
-        base: "color-area--show-dots",
+        base: "rp-color-area--show-dots",
       },
     },
   },

package/src/components/color-field/color-field.styles.ts

@@ -1,16 +1,16 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorFieldVariants = tv({
-  base: "color-field",
+  base: "rp-color-field",
   defaultVariants: {
     fullWidth: false,
   },
   variants: {
     fullWidth: {
       false: "",
-      true: "color-field--full-width",
+      true: "rp-color-field--full-width",
     },
   },
 });

package/src/components/color-input-group/color-input-group.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorInputGroupVariants = tv({
   defaultVariants: {
@@ -9,33 +9,33 @@ export const colorInputGroupVariants = tv({
     variant: "primary",
   },
   slots: {
-    base: "color-input-group",
-    input: "color-input-group__input",
-    prefix: "color-input-group__prefix",
-    suffix: "color-input-group__suffix",
+    base: "rp-color-input-group",
+    input: "rp-color-input-group__input",
+    prefix: "rp-color-input-group__prefix",
+    suffix: "rp-color-input-group__suffix",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "color-input-group--full-width",
+        base: "rp-color-input-group--full-width",
       },
     },
     size: {
       lg: {
-        base: "color-input-group--lg",
+        base: "rp-color-input-group--lg",
       },
       md: {},
       sm: {
-        base: "color-input-group--sm",
+        base: "rp-color-input-group--sm",
       },
     },
     variant: {
       primary: {
-        base: "color-input-group--primary",
+        base: "rp-color-input-group--primary",
       },
       secondary: {
-        base: "color-input-group--secondary",
+        base: "rp-color-input-group--secondary",
       },
     },
   },

package/src/components/color-picker/color-picker.styles.ts

@@ -1,12 +1,12 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorPickerVariants = tv({
   slots: {
-    base: "color-picker",
-    popover: "color-picker__popover",
-    trigger: "color-picker__trigger",
+    base: "rp-color-picker",
+    popover: "rp-color-picker__popover",
+    trigger: "rp-color-picker__trigger",
   },
 });
 

package/src/components/color-slider/color-slider.styles.ts

@@ -1,13 +1,13 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorSliderVariants = tv({
   slots: {
-    base: "color-slider",
-    output: "color-slider__output",
-    thumb: "color-slider__thumb",
-    track: "color-slider__track",
+    base: "rp-color-slider",
+    output: "rp-color-slider__output",
+    thumb: "rp-color-slider__thumb",
+    track: "rp-color-slider__track",
   },
 });
 

package/src/components/color-swatch/color-swatch.styles.ts

@@ -1,24 +1,24 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorSwatchVariants = tv({
-  base: "color-swatch",
+  base: "rp-color-swatch",
   defaultVariants: {
     shape: "circle",
     size: "md",
   },
   variants: {
     shape: {
-      circle: "color-swatch--circle",
-      square: "color-swatch--square",
+      circle: "rp-color-swatch--circle",
+      square: "rp-color-swatch--square",
     },
     size: {
-      lg: "color-swatch--lg",
-      md: "color-swatch--md",
-      sm: "color-swatch--sm",
-      xl: "color-swatch--xl",
-      xs: "color-swatch--xs",
+      lg: "rp-color-swatch--lg",
+      md: "rp-color-swatch--md",
+      sm: "rp-color-swatch--sm",
+      xl: "rp-color-swatch--xl",
+      xs: "rp-color-swatch--xs",
     },
   },
 });

package/src/components/color-swatch-picker/color-swatch-picker.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const colorSwatchPickerVariants = tv({
   defaultVariants: {
@@ -9,43 +9,43 @@ export const colorSwatchPickerVariants = tv({
     variant: "circle",
   },
   slots: {
-    base: "color-swatch-picker",
-    indicator: "color-swatch-picker__indicator",
-    item: "color-swatch-picker__item",
-    swatch: "color-swatch-picker__swatch",
+    base: "rp-color-swatch-picker",
+    indicator: "rp-color-swatch-picker__indicator",
+    item: "rp-color-swatch-picker__item",
+    swatch: "rp-color-swatch-picker__swatch",
   },
   variants: {
     layout: {
       grid: {
-        base: "color-swatch-picker--grid",
+        base: "rp-color-swatch-picker--grid",
       },
       stack: {
-        base: "color-swatch-picker--stack",
+        base: "rp-color-swatch-picker--stack",
       },
     },
     size: {
       lg: {
-        base: "color-swatch-picker--lg",
+        base: "rp-color-swatch-picker--lg",
       },
       md: {
-        base: "color-swatch-picker--md",
+        base: "rp-color-swatch-picker--md",
       },
       sm: {
-        base: "color-swatch-picker--sm",
+        base: "rp-color-swatch-picker--sm",
       },
       xl: {
-        base: "color-swatch-picker--xl",
+        base: "rp-color-swatch-picker--xl",
       },
       xs: {
-        base: "color-swatch-picker--xs",
+        base: "rp-color-swatch-picker--xs",
       },
     },
     variant: {
       circle: {
-        base: "color-swatch-picker--circle",
+        base: "rp-color-swatch-picker--circle",
       },
       square: {
-        base: "color-swatch-picker--square",
+        base: "rp-color-swatch-picker--square",
       },
     },
   },

package/src/components/combo-box/combo-box.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const comboBoxVariants = tv({
   defaultVariants: {
@@ -8,29 +8,29 @@ export const comboBoxVariants = tv({
     size: "md",
   },
   slots: {
-    base: "combo-box",
-    inputGroup: "combo-box__input-group",
-    popover: "combo-box__popover",
-    trigger: "combo-box__trigger",
-    value: "combo-box__value",
+    base: "rp-combo-box",
+    inputGroup: "rp-combo-box__input-group",
+    popover: "rp-combo-box__popover",
+    trigger: "rp-combo-box__trigger",
+    value: "rp-combo-box__value",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "combo-box--full-width",
-        inputGroup: "combo-box__input-group--full-width",
+        base: "rp-combo-box--full-width",
+        inputGroup: "rp-combo-box__input-group--full-width",
       },
     },
     /* The field itself is the `Input` inside, which takes its own size class from the context the
      * root provides. Only the popover is left, and it is teleported out of this tree. */
     size: {
       lg: {
-        popover: "combo-box__popover--lg",
+        popover: "rp-combo-box__popover--lg",
       },
       md: {},
       sm: {
-        popover: "combo-box__popover--sm",
+        popover: "rp-combo-box__popover--sm",
       },
     },
   },

package/src/components/date-field/date-field.styles.ts

@@ -1,16 +1,16 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const dateFieldVariants = tv({
-  base: "date-field",
+  base: "rp-date-field",
   defaultVariants: {
     fullWidth: false,
   },
   variants: {
     fullWidth: {
       false: "",
-      true: "date-field--full-width",
+      true: "rp-date-field--full-width",
     },
   },
 });

package/src/components/date-input-group/date-input-group.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const dateInputGroupVariants = tv({
   defaultVariants: {
@@ -9,35 +9,35 @@ export const dateInputGroupVariants = tv({
     variant: "primary",
   },
   slots: {
-    base: "date-input-group",
-    input: "date-input-group__input",
-    inputContainer: "date-input-group__input-container",
-    prefix: "date-input-group__prefix",
-    segment: "date-input-group__segment",
-    suffix: "date-input-group__suffix",
+    base: "rp-date-input-group",
+    input: "rp-date-input-group__input",
+    inputContainer: "rp-date-input-group__input-container",
+    prefix: "rp-date-input-group__prefix",
+    segment: "rp-date-input-group__segment",
+    suffix: "rp-date-input-group__suffix",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "date-input-group--full-width",
+        base: "rp-date-input-group--full-width",
       },
     },
     size: {
       lg: {
-        base: "date-input-group--lg",
+        base: "rp-date-input-group--lg",
       },
       md: {},
       sm: {
-        base: "date-input-group--sm",
+        base: "rp-date-input-group--sm",
       },
     },
     variant: {
       primary: {
-        base: "date-input-group--primary",
+        base: "rp-date-input-group--primary",
       },
       secondary: {
-        base: "date-input-group--secondary",
+        base: "rp-date-input-group--secondary",
       },
     },
   },

package/src/components/date-picker/date-picker.styles.ts

@@ -1,13 +1,13 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const datePickerVariants = tv({
   slots: {
-    base: "date-picker",
-    popover: "date-picker__popover",
-    trigger: "date-picker__trigger",
-    triggerIndicator: "date-picker__trigger-indicator",
+    base: "rp-date-picker",
+    popover: "rp-date-picker__popover",
+    trigger: "rp-date-picker__trigger",
+    triggerIndicator: "rp-date-picker__trigger-indicator",
   },
 });
 

package/src/components/date-range-picker/date-range-picker.styles.ts

@@ -1,14 +1,14 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const dateRangePickerVariants = tv({
   slots: {
-    base: "date-range-picker",
-    popover: "date-range-picker__popover",
-    rangeSeparator: "date-range-picker__range-separator",
-    trigger: "date-range-picker__trigger",
-    triggerIndicator: "date-range-picker__trigger-indicator",
+    base: "rp-date-range-picker",
+    popover: "rp-date-range-picker__popover",
+    rangeSeparator: "rp-date-range-picker__range-separator",
+    trigger: "rp-date-range-picker__trigger",
+    triggerIndicator: "rp-date-range-picker__trigger-indicator",
   },
 });
 

package/src/components/description/description.styles.ts

@@ -1,9 +1,9 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const descriptionVariants = tv({
-  base: "description",
+  base: "rp-description",
 });
 
 export type DescriptionVariants = VariantProps<typeof descriptionVariants>;

package/src/components/disclosure/disclosure.styles.ts

@@ -1,17 +1,17 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const disclosureVariants = tv({
   defaultVariants: {},
   slots: {
-    base: "disclosure",
-    body: "disclosure__body",
-    bodyInner: "disclosure__body-inner",
-    content: "disclosure__content",
-    heading: "disclosure__heading",
-    indicator: "disclosure__indicator",
-    trigger: "disclosure__trigger",
+    base: "rp-disclosure",
+    body: "rp-disclosure__body",
+    bodyInner: "rp-disclosure__body-inner",
+    content: "rp-disclosure__content",
+    heading: "rp-disclosure__heading",
+    indicator: "rp-disclosure__indicator",
+    trigger: "rp-disclosure__trigger",
   },
   variants: {},
 });

package/src/components/disclosure-group/disclosure-group.styles.ts

@@ -1,11 +1,11 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const disclosureGroupVariants = tv({
   defaultVariants: {},
   slots: {
-    base: "disclosure-group",
+    base: "rp-disclosure-group",
   },
   variants: {},
 });