@ropav/styles 0.6.0 → 0.7.0

package/src/components/calendar/calendar.styles.ts

@@ -1,34 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const calendarVariants = tv({
   defaultVariants: {},
   slots: {
     /** Root calendar container */
-    base: "calendar",
+    base: "rp-calendar",
     /** Calendar cell (td) */
-    cell: "calendar__cell",
+    cell: "rp-calendar__cell",
     /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: "calendar__cell-indicator",
+    cellIndicator: "rp-calendar__cell-indicator",
     /** Calendar grid (table) */
-    grid: "calendar__grid",
+    grid: "rp-calendar__grid",
     /** Grid body (tbody) */
-    gridBody: "calendar__grid-body",
+    gridBody: "rp-calendar__grid-body",
     /** Grid header (thead) */
-    gridHeader: "calendar__grid-header",
+    gridHeader: "rp-calendar__grid-header",
     /** Grid row (tr) */
-    gridRow: "calendar__grid-row",
+    gridRow: "rp-calendar__grid-row",
     /** Calendar header containing heading and navigation */
-    header: "calendar__header",
+    header: "rp-calendar__header",
     /** Header cell (th - day names) */
-    headerCell: "calendar__header-cell",
+    headerCell: "rp-calendar__header-cell",
     /** Month/year heading text */
-    heading: "calendar__heading",
+    heading: "rp-calendar__heading",
     /** Previous/Next navigation button */
-    navButton: "calendar__nav-button",
+    navButton: "rp-calendar__nav-button",
     /** Navigation button icon */
-    navButtonIcon: "calendar__nav-button-icon",
+    navButtonIcon: "rp-calendar__nav-button-icon",
   },
   variants: {},
 });

package/src/components/calendar-year-picker/calendar-year-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 calendarYearPickerVariants = tv({
   slots: {
-    trigger: "calendar-year-picker__trigger",
-    triggerHeading: "calendar-year-picker__trigger-heading",
-    triggerIndicator: "calendar-year-picker__trigger-indicator",
-    yearCell: "calendar-year-picker__year-cell",
-    yearGrid: "calendar-year-picker__year-grid",
+    trigger: "rp-calendar-year-picker__trigger",
+    triggerHeading: "rp-calendar-year-picker__trigger-heading",
+    triggerIndicator: "rp-calendar-year-picker__trigger-indicator",
+    yearCell: "rp-calendar-year-picker__year-cell",
+    yearGrid: "rp-calendar-year-picker__year-grid",
   },
 });
 

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",
   },
 });