@ropav/styles 0.5.0 → 0.7.0

package/src/components/modal/modal.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 modalVariants = tv({
   defaultVariants: {
@@ -9,59 +9,59 @@ export const modalVariants = tv({
     variant: "opaque",
   },
   slots: {
-    backdrop: "modal__backdrop",
-    body: "modal__body",
-    closeTrigger: "modal__close-trigger",
-    container: "modal__container",
-    dialog: "modal__dialog",
-    footer: "modal__footer",
-    header: "modal__header",
-    heading: "modal__heading",
-    icon: "modal__icon",
-    trigger: "modal__trigger",
+    backdrop: "rp-modal__backdrop",
+    body: "rp-modal__body",
+    closeTrigger: "rp-modal__close-trigger",
+    container: "rp-modal__container",
+    dialog: "rp-modal__dialog",
+    footer: "rp-modal__footer",
+    header: "rp-modal__header",
+    heading: "rp-modal__heading",
+    icon: "rp-modal__icon",
+    trigger: "rp-modal__trigger",
   },
   variants: {
     scroll: {
       inside: {
-        body: "modal__body--scroll-inside",
-        dialog: "modal__dialog--scroll-inside",
+        body: "rp-modal__body--scroll-inside",
+        dialog: "rp-modal__dialog--scroll-inside",
       },
       outside: {
-        body: "modal__body--scroll-outside",
-        container: "modal__container--scroll-outside",
-        dialog: "modal__dialog--scroll-outside",
+        body: "rp-modal__body--scroll-outside",
+        container: "rp-modal__container--scroll-outside",
+        dialog: "rp-modal__dialog--scroll-outside",
       },
     },
     size: {
       cover: {
-        dialog: "modal__dialog--cover",
+        dialog: "rp-modal__dialog--cover",
       },
       full: {
-        container: "modal__container--full",
-        dialog: "modal__dialog--full",
+        container: "rp-modal__container--full",
+        dialog: "rp-modal__dialog--full",
       },
       lg: {
-        dialog: "modal__dialog--lg",
+        dialog: "rp-modal__dialog--lg",
       },
       md: {
-        dialog: "modal__dialog--md",
+        dialog: "rp-modal__dialog--md",
       },
       sm: {
-        dialog: "modal__dialog--sm",
+        dialog: "rp-modal__dialog--sm",
       },
       xs: {
-        dialog: "modal__dialog--xs",
+        dialog: "rp-modal__dialog--xs",
       },
     },
     variant: {
       blur: {
-        backdrop: "modal__backdrop--blur",
+        backdrop: "rp-modal__backdrop--blur",
       },
       opaque: {
-        backdrop: "modal__backdrop--opaque",
+        backdrop: "rp-modal__backdrop--opaque",
       },
       transparent: {
-        backdrop: "modal__backdrop--transparent",
+        backdrop: "rp-modal__backdrop--transparent",
       },
     },
   },

package/src/components/number-field/number-field.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 numberFieldVariants = tv({
   defaultVariants: {
@@ -9,35 +9,35 @@ export const numberFieldVariants = tv({
     variant: "primary",
   },
   slots: {
-    base: "number-field",
-    decrementButton: "number-field__decrement-button",
-    group: "number-field__group",
-    incrementButton: "number-field__increment-button",
-    input: "number-field__input",
+    base: "rp-number-field",
+    decrementButton: "rp-number-field__decrement-button",
+    group: "rp-number-field__group",
+    incrementButton: "rp-number-field__increment-button",
+    input: "rp-number-field__input",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "number-field--full-width",
-        group: "number-field__group--full-width",
+        base: "rp-number-field--full-width",
+        group: "rp-number-field__group--full-width",
       },
     },
     size: {
       lg: {
-        base: "number-field--lg",
+        base: "rp-number-field--lg",
       },
       md: {},
       sm: {
-        base: "number-field--sm",
+        base: "rp-number-field--sm",
       },
     },
     variant: {
       primary: {
-        base: "number-field--primary",
+        base: "rp-number-field--primary",
       },
       secondary: {
-        base: "number-field--secondary",
+        base: "rp-number-field--secondary",
       },
     },
   },

package/src/components/pagination/pagination.styles.ts

@@ -1,29 +1,36 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const paginationVariants = tv({
   defaultVariants: {
     size: "md",
   },
   slots: {
-    base: "pagination",
-    content: "pagination__content",
-    ellipsis: "pagination__ellipsis",
-    item: "pagination__item",
-    link: "pagination__link",
-    summary: "pagination__summary",
+    base: "rp-pagination",
+    content: "rp-pagination__content",
+    ellipsis: "rp-pagination__ellipsis",
+    item: "rp-pagination__item",
+    link: "rp-pagination__link",
+    summary: "rp-pagination__summary",
   },
   variants: {
+    /** A previous/next control rather than a page number, which sizes and spaces differently. */
+    isNav: {
+      false: {},
+      true: {
+        link: "rp-pagination__link--nav",
+      },
+    },
     size: {
       lg: {
-        base: "pagination--lg",
+        base: "rp-pagination--lg",
       },
       md: {
-        base: "pagination--md",
+        base: "rp-pagination--md",
       },
       sm: {
-        base: "pagination--sm",
+        base: "rp-pagination--sm",
       },
     },
   },

package/src/components/popover/popover.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 popoverVariants = tv({
   slots: {
-    base: "popover",
-    dialog: "popover__dialog",
-    heading: "popover__heading",
-    trigger: "popover__trigger",
+    base: "rp-popover",
+    dialog: "rp-popover__dialog",
+    heading: "rp-popover__heading",
+    trigger: "rp-popover__trigger",
   },
 });
 

package/src/components/progress-bar/progress-bar.styles.ts

@@ -1,45 +1,59 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const progressBarVariants = tv({
   defaultVariants: {
     color: "accent",
+    isAnimated: false,
+    isStriped: false,
     size: "md",
   },
   slots: {
-    base: "progress-bar",
-    fill: "progress-bar__fill",
-    output: "progress-bar__output",
-    track: "progress-bar__track",
+    base: "rp-progress-bar",
+    fill: "rp-progress-bar__fill",
+    output: "rp-progress-bar__output",
+    track: "rp-progress-bar__track",
   },
   variants: {
     color: {
       accent: {
-        base: "progress-bar--accent",
+        base: "rp-progress-bar--accent",
       },
       danger: {
-        base: "progress-bar--danger",
+        base: "rp-progress-bar--danger",
       },
       default: {
-        base: "progress-bar--default",
+        base: "rp-progress-bar--default",
       },
       success: {
-        base: "progress-bar--success",
+        base: "rp-progress-bar--success",
       },
       warning: {
-        base: "progress-bar--warning",
+        base: "rp-progress-bar--warning",
+      },
+    },
+    isAnimated: {
+      false: {},
+      true: {
+        base: "rp-progress-bar--animated",
+      },
+    },
+    isStriped: {
+      false: {},
+      true: {
+        base: "rp-progress-bar--striped",
       },
     },
     size: {
       lg: {
-        base: "progress-bar--lg",
+        base: "rp-progress-bar--lg",
       },
       md: {
-        base: "progress-bar--md",
+        base: "rp-progress-bar--md",
       },
       sm: {
-        base: "progress-bar--sm",
+        base: "rp-progress-bar--sm",
       },
     },
   },

package/src/components/progress-circle/progress-circle.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 progressCircleVariants = tv({
   defaultVariants: {
@@ -8,38 +8,38 @@ export const progressCircleVariants = tv({
     size: "md",
   },
   slots: {
-    base: "progress-circle",
-    fillCircle: "progress-circle__fill-circle",
-    track: "progress-circle__track",
-    trackCircle: "progress-circle__track-circle",
+    base: "rp-progress-circle",
+    fillCircle: "rp-progress-circle__fill-circle",
+    track: "rp-progress-circle__track",
+    trackCircle: "rp-progress-circle__track-circle",
   },
   variants: {
     color: {
       accent: {
-        base: "progress-circle--accent",
+        base: "rp-progress-circle--accent",
       },
       danger: {
-        base: "progress-circle--danger",
+        base: "rp-progress-circle--danger",
       },
       default: {
-        base: "progress-circle--default",
+        base: "rp-progress-circle--default",
       },
       success: {
-        base: "progress-circle--success",
+        base: "rp-progress-circle--success",
       },
       warning: {
-        base: "progress-circle--warning",
+        base: "rp-progress-circle--warning",
       },
     },
     size: {
       lg: {
-        base: "progress-circle--lg",
+        base: "rp-progress-circle--lg",
       },
       md: {
-        base: "progress-circle--md",
+        base: "rp-progress-circle--md",
       },
       sm: {
-        base: "progress-circle--sm",
+        base: "rp-progress-circle--sm",
       },
     },
   },

package/src/components/radio/radio.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 radioVariants = tv({
   slots: {
-    base: "radio",
-    content: "radio__content",
-    control: "radio__control",
-    indicator: "radio__indicator",
+    base: "rp-radio",
+    content: "rp-radio__content",
+    control: "rp-radio__control",
+    indicator: "rp-radio__indicator",
   },
 });
 

package/src/components/radio-group/radio-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 radioGroupVariants = tv({
-  base: "radio-group",
+  base: "rp-radio-group",
   defaultVariants: {
     variant: "primary",
   },
   variants: {
     variant: {
-      primary: "radio-group--primary",
-      secondary: "radio-group--secondary",
+      primary: "rp-radio-group--primary",
+      secondary: "rp-radio-group--secondary",
     },
   },
 });

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

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

package/src/components/scroll-shadow/scroll-shadow.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 scrollShadowVariants = tv({
   defaultVariants: {
@@ -9,26 +9,26 @@ export const scrollShadowVariants = tv({
     variant: "fade",
   },
   slots: {
-    base: "scroll-shadow",
+    base: "rp-scroll-shadow",
   },
   variants: {
     hideScrollBar: {
       false: {},
       true: {
-        base: "scroll-shadow--hide-scrollbar",
+        base: "rp-scroll-shadow--hide-scrollbar",
       },
     },
     orientation: {
       horizontal: {
-        base: "scroll-shadow--horizontal",
+        base: "rp-scroll-shadow--horizontal",
       },
       vertical: {
-        base: "scroll-shadow--vertical",
+        base: "rp-scroll-shadow--vertical",
       },
     },
     variant: {
       fade: {
-        base: "scroll-shadow--fade",
+        base: "rp-scroll-shadow--fade",
       },
     },
   },

package/src/components/search-field/search-field.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 searchFieldVariants = tv({
   defaultVariants: {
@@ -9,35 +9,35 @@ export const searchFieldVariants = tv({
     variant: "primary",
   },
   slots: {
-    base: "search-field",
-    clearButton: "search-field__clear-button",
-    group: "search-field__group",
-    input: "search-field__input",
-    searchIcon: "search-field__search-icon",
+    base: "rp-search-field",
+    clearButton: "rp-search-field__clear-button",
+    group: "rp-search-field__group",
+    input: "rp-search-field__input",
+    searchIcon: "rp-search-field__search-icon",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "search-field--full-width",
-        group: "search-field__group--full-width",
+        base: "rp-search-field--full-width",
+        group: "rp-search-field__group--full-width",
       },
     },
     size: {
       lg: {
-        base: "search-field--lg",
+        base: "rp-search-field--lg",
       },
       md: {},
       sm: {
-        base: "search-field--sm",
+        base: "rp-search-field--sm",
       },
     },
     variant: {
       primary: {
-        base: "search-field--primary",
+        base: "rp-search-field--primary",
       },
       secondary: {
-        base: "search-field--secondary",
+        base: "rp-search-field--secondary",
       },
     },
   },

package/src/components/segmented-control/segmented-control.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 segmentedControlVariants = tv({
   defaultVariants: {
@@ -8,27 +8,27 @@ export const segmentedControlVariants = tv({
     size: "md",
   },
   slots: {
-    base: "segmented-control",
-    indicator: "segmented-control__indicator",
-    item: "segmented-control__item",
-    separator: "segmented-control__separator",
+    base: "rp-segmented-control",
+    indicator: "rp-segmented-control__indicator",
+    item: "rp-segmented-control__item",
+    separator: "rp-segmented-control__separator",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "segmented-control--full-width",
+        base: "rp-segmented-control--full-width",
       },
     },
     size: {
       lg: {
-        base: "segmented-control--lg",
+        base: "rp-segmented-control--lg",
       },
       md: {
-        base: "segmented-control--md",
+        base: "rp-segmented-control--md",
       },
       sm: {
-        base: "segmented-control--sm",
+        base: "rp-segmented-control--sm",
       },
     },
   },

package/src/components/select/select.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 selectVariants = tv({
   defaultVariants: {
@@ -9,37 +9,37 @@ export 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",
+        base: "rp-select--primary",
       },
       secondary: {
-        base: "select--secondary",
+        base: "rp-select--secondary",
       },
     },
   },