@ropav/styles 0.5.0 → 0.7.0

package/src/components/separator/separator.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";
 
 const separatorVariants = tv({
-  base: "separator",
+  base: "rp-separator",
   defaultVariants: {
     orientation: "horizontal",
     variant: "default",
   },
   variants: {
     orientation: {
-      horizontal: "separator--horizontal",
-      vertical: "separator--vertical",
+      horizontal: "rp-separator--horizontal",
+      vertical: "rp-separator--vertical",
     },
     variant: {
-      default: "separator--default",
-      secondary: "separator--secondary",
-      tertiary: "separator--tertiary",
+      default: "rp-separator--default",
+      secondary: "rp-separator--secondary",
+      tertiary: "rp-separator--tertiary",
     },
   },
 });

package/src/components/sidebar/sidebar.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";
 
 /*
  * Side and collapse mode are carried as modifier classes rather than left to `[data-side]` /
@@ -16,78 +16,101 @@ export const sidebarVariants = tv({
   defaultVariants: {
     collapsible: "icon",
     side: "left",
+    variant: "sidebar",
   },
   slots: {
-    base: "sidebar",
-    content: "sidebar__content",
-    footer: "sidebar__footer",
-    group: "sidebar__group",
-    groupLabel: "sidebar__group-label",
-    header: "sidebar__header",
-    inset: "sidebar__inset",
-    item: "sidebar__item",
-    itemIcon: "sidebar__item-icon",
-    itemIndicator: "sidebar__item-indicator",
-    itemLabel: "sidebar__item-label",
-    itemTooltip: "sidebar__item-tooltip",
-    itemTrailing: "sidebar__item-trailing",
-    panel: "sidebar__panel",
-    rail: "sidebar__rail",
-    railTarget: "sidebar__rail-target",
-    separator: "sidebar__separator",
-    subMenu: "sidebar__sub-menu",
-    trigger: "sidebar__trigger",
+    base: "rp-sidebar",
+    content: "rp-sidebar__content",
+    footer: "rp-sidebar__footer",
+    group: "rp-sidebar__group",
+    groupLabel: "rp-sidebar__group-label",
+    header: "rp-sidebar__header",
+    inset: "rp-sidebar__inset",
+    item: "rp-sidebar__item",
+    itemIcon: "rp-sidebar__item-icon",
+    itemIndicator: "rp-sidebar__item-indicator",
+    itemLabel: "rp-sidebar__item-label",
+    itemTooltip: "rp-sidebar__item-tooltip",
+    itemTrailing: "rp-sidebar__item-trailing",
+    panel: "rp-sidebar__panel",
+    rail: "rp-sidebar__rail",
+    railTarget: "rp-sidebar__rail-target",
+    separator: "rp-sidebar__separator",
+    subMenu: "rp-sidebar__sub-menu",
+    trigger: "rp-sidebar__trigger",
   },
   variants: {
     collapsible: {
       icon: {
-        panel: "sidebar__panel--icon",
+        panel: "rp-sidebar__panel--icon",
       },
       none: {
-        panel: "sidebar__panel--none",
+        panel: "rp-sidebar__panel--none",
       },
       offcanvas: {
-        panel: "sidebar__panel--offcanvas",
+        panel: "rp-sidebar__panel--offcanvas",
       },
     },
     // Whether the panel is rendering inside a drawer. Resolved by the panel at call time rather
     // than by the root, because it is the one part that changes shape when the viewport narrows.
     inDrawer: {
       true: {
-        panel: "sidebar__panel--drawer",
+        panel: "rp-sidebar__panel--drawer",
       },
     },
     // Whether this submenu folds. Resolved by the submenu at call time rather than by the root,
     // because one sidebar holds items that fold and items that do not.
     isCollapsible: {
       true: {
-        subMenu: "sidebar__sub-menu--collapsible",
+        subMenu: "rp-sidebar__sub-menu--collapsible",
       },
     },
     // Whether the rail resizes rather than only toggling. Not folded into `collapsible`, because
     // the two are independent: a sidebar that cannot collapse at all can still be dragged wider.
     isResizable: {
       true: {
-        rail: "sidebar__rail--resizable",
+        rail: "rp-sidebar__rail--resizable",
       },
     },
     // Whether the row is a child under another item. Resolved by the item at call time, from the
     // submenu it finds itself inside rather than from a prop a caller has to remember on every row.
     isSub: {
       true: {
-        item: "sidebar__item--sub",
+        item: "rp-sidebar__item--sub",
       },
     },
     side: {
       left: {
-        base: "sidebar--left",
-        panel: "sidebar__panel--left",
+        base: "rp-sidebar--left",
+        panel: "rp-sidebar__panel--left",
       },
       right: {
-        base: "sidebar--right",
-        panel: "sidebar__panel--right",
+        base: "rp-sidebar--right",
+        panel: "rp-sidebar__panel--right",
       },
     },
+    /*
+     * How much chrome the shell paints. Each slot's modifier is named for what that slot does
+     * rather than for the value, the way `inDrawer` becomes `--drawer` and `isSub` becomes
+     * `--sub`: `inset` is already a slot, so echoing the value would read `sidebar__inset--inset`,
+     * and `sidebar__panel--inset` would be false besides — under it the panel is the bare one and
+     * the inset is the card.
+     *
+     * `sidebar` emits nothing, because the base rules already are that look. A modifier saying so
+     * would be an empty rule restating the block above it.
+     */
+    variant: {
+      floating: {
+        panel: "rp-sidebar__panel--floating",
+        rail: "rp-sidebar__rail--quiet",
+      },
+      inset: {
+        inset: "rp-sidebar__inset--card",
+        panel: "rp-sidebar__panel--bare",
+        rail: "rp-sidebar__rail--quiet",
+      },
+      sidebar: {},
+    },
   },
 });
 

package/src/components/skeleton/skeleton.styles.ts

@@ -1,19 +1,19 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const skeletonVariants = tv({
   defaultVariants: {
     animationType: "shimmer",
   },
   slots: {
-    base: "skeleton",
+    base: "rp-skeleton",
   },
   variants: {
     animationType: {
-      none: "skeleton--none",
-      pulse: "skeleton--pulse",
-      shimmer: "skeleton--shimmer",
+      none: "rp-skeleton--none",
+      pulse: "rp-skeleton--pulse",
+      shimmer: "rp-skeleton--shimmer",
     },
   },
 });

package/src/components/slider/slider.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 sliderVariants = tv({
   slots: {
-    base: "slider",
-    fill: "slider__fill",
-    marks: "slider__marks",
-    output: "slider__output",
-    thumb: "slider__thumb",
-    track: "slider__track",
+    base: "rp-slider",
+    fill: "rp-slider__fill",
+    marks: "rp-slider__marks",
+    output: "rp-slider__output",
+    thumb: "rp-slider__thumb",
+    track: "rp-slider__track",
   },
 });
 

package/src/components/spinner/spinner.styles.ts

@@ -1,26 +1,26 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const spinnerVariants = tv({
-  base: "spinner",
+  base: "rp-spinner",
   defaultVariants: {
     color: "accent",
     size: "md",
   },
   variants: {
     color: {
-      accent: "spinner--accent",
-      current: "spinner--current",
-      danger: "spinner--danger",
-      success: "spinner--success",
-      warning: "spinner--warning",
+      accent: "rp-spinner--accent",
+      current: "rp-spinner--current",
+      danger: "rp-spinner--danger",
+      success: "rp-spinner--success",
+      warning: "rp-spinner--warning",
     },
     size: {
-      lg: "spinner--lg",
-      md: "spinner--md",
-      sm: "spinner--sm",
-      xl: "spinner--xl",
+      lg: "rp-spinner--lg",
+      md: "rp-spinner--md",
+      sm: "rp-spinner--sm",
+      xl: "rp-spinner--xl",
     },
   },
 });

package/src/components/splitter/splitter.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";
 
 /*
  * Orientation is carried as a modifier class rather than left to a `[data-orientation]` selector
@@ -19,23 +19,23 @@ export const splitterVariants = tv({
     orientation: "horizontal",
   },
   slots: {
-    base: "splitter",
-    handle: "splitter__handle",
-    handleGrip: "splitter__handle-grip",
-    handleTarget: "splitter__handle-target",
-    panel: "splitter__panel",
+    base: "rp-splitter",
+    handle: "rp-splitter__handle",
+    handleGrip: "rp-splitter__handle-grip",
+    handleTarget: "rp-splitter__handle-target",
+    panel: "rp-splitter__panel",
   },
   variants: {
     orientation: {
       horizontal: {
-        base: "splitter--horizontal",
-        handle: "splitter__handle--horizontal",
-        handleGrip: "splitter__handle-grip--horizontal",
+        base: "rp-splitter--horizontal",
+        handle: "rp-splitter__handle--horizontal",
+        handleGrip: "rp-splitter__handle-grip--horizontal",
       },
       vertical: {
-        base: "splitter--vertical",
-        handle: "splitter__handle--vertical",
-        handleGrip: "splitter__handle-grip--vertical",
+        base: "rp-splitter--vertical",
+        handle: "rp-splitter__handle--vertical",
+        handleGrip: "rp-splitter__handle-grip--vertical",
       },
     },
   },

package/src/components/surface/surface.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 surfaceVariants = tv({
-  base: "surface",
+  base: "rp-surface",
   defaultVariants: {
     variant: "default",
   },
   variants: {
     variant: {
-      default: "surface--default",
-      secondary: "surface--secondary",
-      tertiary: "surface--tertiary",
-      transparent: "surface--transparent",
+      default: "rp-surface--default",
+      secondary: "rp-surface--secondary",
+      tertiary: "rp-surface--tertiary",
+      transparent: "rp-surface--transparent",
     },
   },
 });

package/src/components/switch/switch.styles.ts

@@ -1,28 +1,28 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const switchVariants = tv({
   defaultVariants: {
     size: "md",
   },
   slots: {
-    base: "switch",
-    content: "switch__content",
-    control: "switch__control",
-    icon: "switch__icon",
-    thumb: "switch__thumb",
+    base: "rp-switch",
+    content: "rp-switch__content",
+    control: "rp-switch__control",
+    icon: "rp-switch__icon",
+    thumb: "rp-switch__thumb",
   },
   variants: {
     size: {
       lg: {
-        base: "switch--lg",
+        base: "rp-switch--lg",
       },
       md: {
-        base: "switch--md",
+        base: "rp-switch--md",
       },
       sm: {
-        base: "switch--sm",
+        base: "rp-switch--sm",
       },
     },
   },

package/src/components/switch-group/switch-group.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 switchGroupVariants = tv({
   defaultVariants: {
     orientation: "vertical",
   },
   slots: {
-    base: "switch-group",
-    items: "switch-group__items",
+    base: "rp-switch-group",
+    items: "rp-switch-group__items",
   },
   variants: {
     orientation: {
       horizontal: {
-        base: "switch-group--horizontal",
+        base: "rp-switch-group--horizontal",
       },
       vertical: {
-        base: "switch-group--vertical",
+        base: "rp-switch-group--vertical",
       },
     },
   },

package/src/components/table/table.styles.ts

@@ -1,35 +1,37 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const tableVariants = tv({
   defaultVariants: {
     variant: "primary",
   },
   slots: {
-    base: "table-root",
-    body: "table__body",
-    cell: "table__cell",
-    column: "table__column",
-    columnResizer: "table__column-resizer",
-    content: "table__content",
-    footer: "table__footer",
-    header: "table__header",
-    loadMore: "table__load-more",
-    loadMoreContent: "table__load-more-content",
-    resizableContainer: "table__resizable-container",
-    row: "table__row",
-    scrollContainer: "table__scroll-container",
-    sortableColumnHeader: "table__sortable-column-header",
-    sortableColumnIndicator: "table__sortable-column-indicator",
+    base: "rp-table-root",
+    body: "rp-table__body",
+    cell: "rp-table__cell",
+    column: "rp-table__column",
+    columnResizer: "rp-table__column-resizer",
+    content: "rp-table__content",
+    /** Named but unstyled: the hook a caller's own rule attaches to. */
+    dropIndicator: "rp-table__drop-indicator",
+    footer: "rp-table__footer",
+    header: "rp-table__header",
+    loadMore: "rp-table__load-more",
+    loadMoreContent: "rp-table__load-more-content",
+    resizableContainer: "rp-table__resizable-container",
+    row: "rp-table__row",
+    scrollContainer: "rp-table__scroll-container",
+    sortableColumnHeader: "rp-table__sortable-column-header",
+    sortableColumnIndicator: "rp-table__sortable-column-indicator",
   },
   variants: {
     variant: {
       primary: {
-        base: "table-root--primary",
+        base: "rp-table-root--primary",
       },
       secondary: {
-        base: "table-root--secondary",
+        base: "rp-table-root--secondary",
       },
     },
   },

package/src/components/tabs/tabs.styles.ts

@@ -1,28 +1,28 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const tabsVariants = tv({
   defaultVariants: {
     variant: "primary",
   },
   slots: {
-    base: "tabs",
-    scrollNext: "tabs__list-container__scroll-next",
-    scrollPrev: "tabs__list-container__scroll-prev",
-    scroller: "tabs__list-container__scroller",
-    separator: "tabs__separator",
-    tab: "tabs__tab",
-    tabIndicator: "tabs__indicator",
-    tabList: "tabs__list",
-    tabListContainer: "tabs__list-container",
-    tabPanel: "tabs__panel",
+    base: "rp-tabs",
+    scrollNext: "rp-tabs__list-container__scroll-next",
+    scrollPrev: "rp-tabs__list-container__scroll-prev",
+    scroller: "rp-tabs__list-container__scroller",
+    separator: "rp-tabs__separator",
+    tab: "rp-tabs__tab",
+    tabIndicator: "rp-tabs__indicator",
+    tabList: "rp-tabs__list",
+    tabListContainer: "rp-tabs__list-container",
+    tabPanel: "rp-tabs__panel",
   },
   variants: {
     variant: {
       primary: {},
       secondary: {
-        base: "tabs--secondary",
+        base: "rp-tabs--secondary",
       },
     },
   },

package/src/components/tag/tag.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 tagVariants = tv({
   defaultVariants: {
@@ -8,27 +8,27 @@ export const tagVariants = tv({
     variant: "default",
   },
   slots: {
-    base: "tag",
-    removeButton: "tag__remove-button",
+    base: "rp-tag",
+    removeButton: "rp-tag__remove-button",
   },
   variants: {
     size: {
       lg: {
-        base: "tag--lg",
+        base: "rp-tag--lg",
       },
       md: {
-        base: "tag--md",
+        base: "rp-tag--md",
       },
       sm: {
-        base: "tag--sm",
+        base: "rp-tag--sm",
       },
     },
     variant: {
       default: {
-        base: "tag--default",
+        base: "rp-tag--default",
       },
       surface: {
-        base: "tag--surface",
+        base: "rp-tag--surface",
       },
     },
   },

package/src/components/tag-group/tag-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 tagGroupVariants = tv({
   slots: {
-    base: "tag-group",
-    list: "tag-group__list",
+    base: "rp-tag-group",
+    list: "rp-tag-group__list",
   },
 });
 

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

package/src/components/textfield/textfield.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 textFieldVariants = tv({
-  base: "textfield",
+  base: "rp-textfield",
   defaultVariants: {
     fullWidth: false,
   },
   variants: {
     fullWidth: {
       false: "",
-      true: "textfield--full-width",
+      true: "rp-textfield--full-width",
     },
   },
 });

package/src/components/time-field/time-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 timeFieldVariants = tv({
-  base: "time-field",
+  base: "rp-time-field",
   defaultVariants: {
     fullWidth: false,
   },
   variants: {
     fullWidth: {
       false: "",
-      true: "time-field--full-width",
+      true: "rp-time-field--full-width",
     },
   },
 });