@ropav/styles 0.5.0 → 0.7.0

package/src/components/drawer/drawer.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 drawerVariants = tv({
   defaultVariants: {
@@ -8,45 +8,45 @@ export const drawerVariants = tv({
     variant: "opaque",
   },
   slots: {
-    backdrop: "drawer__backdrop",
-    body: "drawer__body",
-    closeTrigger: "drawer__close-trigger",
-    content: "drawer__content",
-    dialog: "drawer__dialog",
-    footer: "drawer__footer",
-    handle: "drawer__handle",
-    header: "drawer__header",
-    heading: "drawer__heading",
-    trigger: "drawer__trigger",
+    backdrop: "rp-drawer__backdrop",
+    body: "rp-drawer__body",
+    closeTrigger: "rp-drawer__close-trigger",
+    content: "rp-drawer__content",
+    dialog: "rp-drawer__dialog",
+    footer: "rp-drawer__footer",
+    handle: "rp-drawer__handle",
+    header: "rp-drawer__header",
+    heading: "rp-drawer__heading",
+    trigger: "rp-drawer__trigger",
   },
   variants: {
     placement: {
       bottom: {
-        content: "drawer__content--bottom",
-        dialog: "drawer__dialog--bottom",
+        content: "rp-drawer__content--bottom",
+        dialog: "rp-drawer__dialog--bottom",
       },
       left: {
-        content: "drawer__content--left",
-        dialog: "drawer__dialog--left",
+        content: "rp-drawer__content--left",
+        dialog: "rp-drawer__dialog--left",
       },
       right: {
-        content: "drawer__content--right",
-        dialog: "drawer__dialog--right",
+        content: "rp-drawer__content--right",
+        dialog: "rp-drawer__dialog--right",
       },
       top: {
-        content: "drawer__content--top",
-        dialog: "drawer__dialog--top",
+        content: "rp-drawer__content--top",
+        dialog: "rp-drawer__dialog--top",
       },
     },
     variant: {
       blur: {
-        backdrop: "drawer__backdrop--blur",
+        backdrop: "rp-drawer__backdrop--blur",
       },
       opaque: {
-        backdrop: "drawer__backdrop--opaque",
+        backdrop: "rp-drawer__backdrop--opaque",
       },
       transparent: {
-        backdrop: "drawer__backdrop--transparent",
+        backdrop: "rp-drawer__backdrop--transparent",
       },
     },
   },

package/src/components/drop-zone/drop-zone.styles.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from "../../tv";
+
+import { tv } from "../../tv";
+
+export const dropZoneVariants = tv({
+  slots: {
+    base: "rp-drop-zone",
+    trigger: "rp-drop-zone__trigger",
+  },
+});
+
+export type DropZoneVariants = VariantProps<typeof dropZoneVariants>;

package/src/components/drop-zone/index.ts

@@ -0,0 +1 @@
+export * from "./drop-zone.styles";

package/src/components/dropdown/dropdown.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 dropdownVariants = tv({
   slots: {
     // The block is shared with the standalone menu; `dropdown__menu` is only the hook that
     // `dropdown.css` and callers target.
-    menu: "menu dropdown__menu",
-    popover: "dropdown__popover",
-    root: "dropdown",
-    trigger: "dropdown__trigger",
+    menu: "rp-menu rp-dropdown__menu",
+    popover: "rp-dropdown__popover",
+    root: "rp-dropdown",
+    trigger: "rp-dropdown__trigger",
   },
 });
 

package/src/components/empty-state/empty-state.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 emptyStateVariants = tv({
-  base: "empty-state",
+  base: "rp-empty-state",
 });
 
 export type EmptyStateVariants = VariantProps<typeof emptyStateVariants>;

package/src/components/error-message/error-message.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 errorMessageVariants = tv({
-  base: "error-message",
+  base: "rp-error-message",
 });
 
 export type ErrorMessageVariants = VariantProps<typeof errorMessageVariants>;

package/src/components/field-error/field-error.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 fieldErrorVariants = tv({
-  base: "field-error",
+  base: "rp-field-error",
 });
 
 export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;

package/src/components/fieldset/fieldset.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 fieldsetVariants = tv({
   slots: {
-    actions: "fieldset__actions",
-    base: "fieldset",
-    description: "fieldset__description",
-    fieldGroup: "fieldset__field_group",
-    legend: "fieldset__legend",
+    actions: "rp-fieldset__actions",
+    base: "rp-fieldset",
+    description: "rp-fieldset__description",
+    fieldGroup: "rp-fieldset__field_group",
+    legend: "rp-fieldset__legend",
   },
 });
 

package/src/components/header/header.styles.ts

@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const headerVariants = tv({
-  base: "header",
+  base: "rp-header",
 });

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from "./description";
 export * from "./drawer";
 export * from "./disclosure";
 export * from "./disclosure-group";
+export * from "./drop-zone";
 export * from "./dropdown";
 export * from "./empty-state";
 export * from "./error-message";

package/src/components/input/input.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 inputVariants = tv({
-  base: "input",
+  base: "rp-input",
   defaultVariants: {
     fullWidth: false,
     size: "md",
@@ -12,16 +12,16 @@ export const inputVariants = tv({
   variants: {
     fullWidth: {
       false: "",
-      true: "input--full-width",
+      true: "rp-input--full-width",
     },
     size: {
-      lg: "input--lg",
+      lg: "rp-input--lg",
       md: "",
-      sm: "input--sm",
+      sm: "rp-input--sm",
     },
     variant: {
-      primary: "input--primary",
-      secondary: "input--secondary",
+      primary: "rp-input--primary",
+      secondary: "rp-input--secondary",
     },
   },
 });

package/src/components/input-group/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 inputGroupVariants = tv({
   defaultVariants: {
@@ -9,33 +9,33 @@ export const inputGroupVariants = tv({
     variant: "primary",
   },
   slots: {
-    base: "input-group",
-    input: "input-group__input",
-    prefix: "input-group__prefix",
-    suffix: "input-group__suffix",
+    base: "rp-input-group",
+    input: "rp-input-group__input",
+    prefix: "rp-input-group__prefix",
+    suffix: "rp-input-group__suffix",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "input-group--full-width",
+        base: "rp-input-group--full-width",
       },
     },
     size: {
       lg: {
-        base: "input-group--lg",
+        base: "rp-input-group--lg",
       },
       md: {},
       sm: {
-        base: "input-group--sm",
+        base: "rp-input-group--sm",
       },
     },
     variant: {
       primary: {
-        base: "input-group--primary",
+        base: "rp-input-group--primary",
       },
       secondary: {
-        base: "input-group--secondary",
+        base: "rp-input-group--secondary",
       },
     },
   },

package/src/components/input-otp/input-otp.styles.ts

@@ -1,27 +1,27 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const inputOTPVariants = tv({
   defaultVariants: {
     variant: "primary",
   },
   slots: {
-    base: "input-otp",
-    caret: "input-otp__caret",
-    group: "input-otp__group",
-    input: "input-otp__input",
-    separator: "input-otp__separator",
-    slot: "input-otp__slot",
-    slotValue: "input-otp__slot-value",
+    base: "rp-input-otp",
+    caret: "rp-input-otp__caret",
+    group: "rp-input-otp__group",
+    input: "rp-input-otp__input",
+    separator: "rp-input-otp__separator",
+    slot: "rp-input-otp__slot",
+    slotValue: "rp-input-otp__slot-value",
   },
   variants: {
     variant: {
       primary: {
-        base: "input-otp--primary",
+        base: "rp-input-otp--primary",
       },
       secondary: {
-        base: "input-otp--secondary",
+        base: "rp-input-otp--secondary",
       },
     },
   },

package/src/components/kbd/kbd.styles.ts

@@ -1,18 +1,18 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const kbdVariants = tv({
   defaultVariants: {},
   slots: {
-    abbr: "kbd__abbr",
-    base: "kbd",
-    content: "kbd__content",
+    abbr: "rp-kbd__abbr",
+    base: "rp-kbd",
+    content: "rp-kbd__content",
   },
   variants: {
     variant: {
-      default: "kbd--default",
-      light: "kbd--light",
+      default: "rp-kbd--default",
+      light: "rp-kbd--light",
     },
   },
 });

package/src/components/label/label.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 labelVariants = tv({
-  base: "label",
+  base: "rp-label",
   defaultVariants: {
     isDisabled: false,
     isInvalid: false,
@@ -11,13 +11,13 @@ export const labelVariants = tv({
   },
   variants: {
     isDisabled: {
-      true: "label--disabled",
+      true: "rp-label--disabled",
     },
     isInvalid: {
-      true: "label--invalid",
+      true: "rp-label--invalid",
     },
     isRequired: {
-      true: "label--required",
+      true: "rp-label--required",
     },
   },
 });

package/src/components/link/link.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 linkVariants = tv({
   slots: {
-    base: "link",
-    icon: "link__icon",
+    base: "rp-link",
+    icon: "rp-link__icon",
   },
 });
 

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

@@ -1,22 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const listboxVariants = tv({
-  base: "list-box",
+  base: "rp-list-box",
   defaultVariants: {
     size: "md",
     variant: "default",
   },
   variants: {
     size: {
-      lg: "list-box--lg",
+      lg: "rp-list-box--lg",
       md: "",
-      sm: "list-box--sm",
+      sm: "rp-list-box--sm",
     },
     variant: {
-      danger: "list-box--danger",
-      default: "list-box--default",
+      danger: "rp-list-box--danger",
+      default: "rp-list-box--default",
     },
   },
 });

package/src/components/list-box-item/list-box-item.styles.ts

@@ -1,22 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const listboxItemVariants = tv({
   defaultVariants: {
     variant: "default",
   },
   slots: {
-    indicator: "list-box-item__indicator",
-    item: "list-box-item",
+    indicator: "rp-list-box-item__indicator",
+    item: "rp-list-box-item",
   },
   variants: {
     variant: {
       danger: {
-        item: "list-box-item--danger",
+        item: "rp-list-box-item--danger",
       },
       default: {
-        item: "list-box-item--default",
+        item: "rp-list-box-item--default",
       },
     },
   },

package/src/components/list-box-section/list-box-section.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 listboxSectionVariants = tv({
-  base: "list-box-section",
+  base: "rp-list-box-section",
 });
 
 export type ListBoxSectionVariants = VariantProps<typeof listboxSectionVariants>;

package/src/components/menu/menu.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 menuVariants = tv({
-  base: "menu",
+  base: "rp-menu",
   defaultVariants: {
     size: "md",
   },
   variants: {
     size: {
-      lg: "menu--lg",
+      lg: "rp-menu--lg",
       md: "",
-      sm: "menu--sm",
+      sm: "rp-menu--sm",
     },
   },
 });

package/src/components/menu-item/menu-item.styles.ts

@@ -1,23 +1,23 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const menuItemVariants = tv({
   defaultVariants: {
     variant: "default",
   },
   slots: {
-    indicator: "menu-item__indicator",
-    item: "menu-item",
-    submenuIndicator: "menu-item__indicator menu-item__indicator--submenu",
+    indicator: "rp-menu-item__indicator",
+    item: "rp-menu-item",
+    submenuIndicator: "rp-menu-item__indicator rp-menu-item__indicator--submenu",
   },
   variants: {
     variant: {
       danger: {
-        item: "menu-item--danger",
+        item: "rp-menu-item--danger",
       },
       default: {
-        item: "menu-item--default",
+        item: "rp-menu-item--default",
       },
     },
   },

package/src/components/menu-section/menu-section.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 menuSectionVariants = tv({
-  base: "menu-section",
+  base: "rp-menu-section",
 });
 
 export type MenuSectionVariants = VariantProps<typeof menuSectionVariants>;

package/src/components/meter/meter.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 meterVariants = tv({
   defaultVariants: {
@@ -8,38 +8,38 @@ export const meterVariants = tv({
     size: "md",
   },
   slots: {
-    base: "meter",
-    fill: "meter__fill",
-    output: "meter__output",
-    track: "meter__track",
+    base: "rp-meter",
+    fill: "rp-meter__fill",
+    output: "rp-meter__output",
+    track: "rp-meter__track",
   },
   variants: {
     color: {
       accent: {
-        base: "meter--accent",
+        base: "rp-meter--accent",
       },
       danger: {
-        base: "meter--danger",
+        base: "rp-meter--danger",
       },
       default: {
-        base: "meter--default",
+        base: "rp-meter--default",
       },
       success: {
-        base: "meter--success",
+        base: "rp-meter--success",
       },
       warning: {
-        base: "meter--warning",
+        base: "rp-meter--warning",
       },
     },
     size: {
       lg: {
-        base: "meter--lg",
+        base: "rp-meter--lg",
       },
       md: {
-        base: "meter--md",
+        base: "rp-meter--md",
       },
       sm: {
-        base: "meter--sm",
+        base: "rp-meter--sm",
       },
     },
   },