@ropav/styles 0.5.0 → 0.7.0

package/dist/components/table.css

@@ -6,7 +6,7 @@
    Table Root — Outer container for table + optional footer.
    Primary variant: gray background with the table body as a white card inside.
    -------------------------------------------------------------------------- */
-.table-root {
+.rp-table-root {
   @apply relative grid w-full overflow-clip;
   grid-template-columns: minmax(0, 1fr);
 }
@@ -17,14 +17,15 @@
    minmax(0, 1fr) creates a hard width boundary that table layout
    cannot push beyond.
    -------------------------------------------------------------------------- */
-.table__scroll-container {
+.rp-table__scroll-container {
   @apply scrollbar overflow-x-auto;
   scrollbar-gutter: auto;
 }
 
-.table-root--primary {
+.rp-table-root--primary {
   @apply bg-surface-secondary px-1 pb-1;
-  border-radius: min(32px, calc(var(--radius) * 2.5));
+
+  border-radius: min(32px, var(--component-radius));
 
   /* Forced Colors Mode flattens the fill onto the page and strips the shadow, so the container
    * stops having any shape and its contents sit loose on the page. */
@@ -34,45 +35,45 @@
   }
 }
 
-.table-root--secondary {
+.rp-table-root--secondary {
   /* No background, padding, or rounding on the root */
 }
 
 /* Secondary: header is a standalone rounded card.
    Background is on cells (not <thead>) because Firefox does not support */
-.table-root--secondary .table__header {
+.rp-table-root--secondary .rp-table__header {
   @apply border-b-0 bg-transparent;
 }
 
-.table-root--secondary .table__column {
+.rp-table-root--secondary .rp-table__column {
   @apply bg-surface-secondary;
 }
 
 /* Round only the truly first/last column header.
    Non-virtualized: column is a <th> child of <tr>.
    Virtualized: column is wrapped in a `VirtualizerItem` (role="presentation") so
-   `:first-child` / `:last-child` on `.table__column` would match every column
+   `:first-child` / `:last-child` on `.rp-table__column` would match every column
    (each is the only child of its wrapper). Walk up to the row instead. */
-.table-root--secondary
+.rp-table-root--secondary
   :is(
-    th.table__column:first-child,
-    [role="row"] > [role="presentation"]:first-of-type > .table__column
+    th.rp-table__column:first-child,
+    [role="row"] > [role="presentation"]:first-of-type > .rp-table__column
   ) {
-  border-start-start-radius: min(32px, var(--radius-2xl));
-  border-end-start-radius: min(32px, var(--radius-2xl));
+  border-start-start-radius: min(32px, var(--component-radius));
+  border-end-start-radius: min(32px, var(--component-radius));
 }
 
-.table-root--secondary
+.rp-table-root--secondary
   :is(
-    th.table__column:last-child,
-    [role="row"] > [role="presentation"]:last-of-type > .table__column
+    th.rp-table__column:last-child,
+    [role="row"] > [role="presentation"]:last-of-type > .rp-table__column
   ) {
-  border-start-end-radius: min(32px, var(--radius-2xl));
-  border-end-end-radius: min(32px, var(--radius-2xl));
+  border-start-end-radius: min(32px, var(--component-radius));
+  border-end-end-radius: min(32px, var(--component-radius));
 }
 
 /* Secondary: body has no shadow or rounded corners */
-.table-root--secondary .table__body {
+.rp-table-root--secondary .rp-table__body {
   @apply shadow-none;
 
   /* Non-virtualized */
@@ -83,50 +84,51 @@
     @apply rounded-none;
   }
 
-  /* Virtualized: undo the rounding applied by .table__body:not(tbody) */
+  /* Virtualized: undo the rounding applied by .rp-table__body:not(tbody) */
   &:not(tbody) {
     @apply overflow-visible rounded-none;
   }
 }
 
 /* Secondary: rows are transparent and keep bottom border on every row */
-.table-root--secondary .table__row {
-  .table__cell {
-    @apply border-b border-separator-tertiary/50 bg-transparent;
-  }
+.rp-table-root--secondary .rp-table__row {
+  .rp-table__cell {
+    @apply border-b border-separator-tertiary/50;
 
-  @media (hover: hover) {
-    &:hover .table__cell,
-    &[data-hovered="true"] .table__cell {
-      @apply bg-default/50;
-    }
+    --table-cell-bg: transparent;
+    --table-cell-bg-hover: color-mix(in oklab, var(--state-layer) 50%, transparent);
   }
 }
 
 /* --------------------------------------------------------------------------
    Table Content (<table> element) — the white card inside the root
    -------------------------------------------------------------------------- */
-.table__content {
+.rp-table__content {
   @apply w-full border-separate border-spacing-0 text-sm;
 }
 
 /* Primary variant: table gets the white surface card look */
-.table-root--primary .table__content {
+.rp-table-root--primary .rp-table__content {
   @apply overflow-clip;
 }
 
 /* --------------------------------------------------------------------------
    Table Header (<thead>)
    -------------------------------------------------------------------------- */
-.table__header {
+.rp-table__header {
   @apply border-b border-separator/50 bg-surface-secondary;
 }
 
 /* --------------------------------------------------------------------------
    Table Column (<th>)
    -------------------------------------------------------------------------- */
-.table__column {
-  @apply relative px-4 py-2.5 text-start text-xs font-medium text-muted;
+.rp-table__column {
+  @apply relative px-4 py-2.5 text-start text-xs font-medium;
+
+  --table-column-fg: var(--muted);
+  --table-column-fg-hover: var(--foreground);
+
+  color: var(--table-column-fg);
 
   /* Separator between columns — a short vertical line on the right edge */
   &::after {
@@ -138,6 +140,13 @@
     content: none;
   }
 
+  /* A column holding nothing but the select-all box has no heading for the line to divide from
+   * the next one, and where the end padding is collapsed it lands on the box's own edge and
+   * reads as a border the box grew. */
+  &:has(> .rp-checkbox:only-child)::after {
+    content: none;
+  }
+
   /* Sortable columns */
   &[data-allows-sorting="true"] {
     cursor: var(--cursor-interactive);
@@ -146,7 +155,7 @@
   @media (hover: hover) {
     &[data-allows-sorting="true"]:hover,
     &[data-allows-sorting="true"][data-hovered="true"] {
-      @apply text-foreground;
+      color: var(--table-column-fg-hover);
     }
   }
 
@@ -159,9 +168,9 @@
 }
 
 /* Virtualized: each column is wrapped in a `VirtualizerItem` (role="presentation"),
-   so `.table__column:last-child:not(:only-child)::after` above never matches.
+   so `.rp-table__column:last-child:not(:only-child)::after` above never matches.
    Hide the trailing separator on the rightmost wrapper instead. */
-[role="row"] > [role="presentation"]:last-of-type:not(:only-of-type) > .table__column::after {
+[role="row"] > [role="presentation"]:last-of-type:not(:only-of-type) > .rp-table__column::after {
   content: none;
 }
 
@@ -169,7 +178,7 @@
    Sortable Column Header — wraps the column label and an optional indicator
    icon. Rendered inside a sortable `Table.Column`'s render prop callback.
    -------------------------------------------------------------------------- */
-.table__sortable-column-header {
+.rp-table__sortable-column-header {
   @apply flex items-center justify-between;
 }
 
@@ -177,7 +186,7 @@
    Sortable Column Indicator — chevron that flips based on `data-direction`.
    Defaults to pointing up (ascending) and rotates 180° for descending.
    -------------------------------------------------------------------------- */
-.table__sortable-column-indicator {
+.rp-table__sortable-column-indicator {
   @apply inline-grid size-3 transform place-content-center transition-transform duration-100 ease-out;
 
   &[data-direction="descending"] {
@@ -188,21 +197,21 @@
 /* --------------------------------------------------------------------------
    Table Body (<tbody>)
    -------------------------------------------------------------------------- */
-.table__body {
+.rp-table__body {
   /* Non-virtualized: round corners via first/last cells
      (border-radius on <tbody> itself has no effect).
      Logical properties so corners follow `dir` in RTL. */
   & tr:first-child td:first-child {
-    border-start-start-radius: min(32px, var(--radius-2xl));
+    border-start-start-radius: min(32px, var(--component-radius));
   }
   & tr:first-child td:last-child {
-    border-start-end-radius: min(32px, var(--radius-2xl));
+    border-start-end-radius: min(32px, var(--component-radius));
   }
   & tr:last-child td:first-child {
-    border-end-start-radius: min(32px, var(--radius-2xl));
+    border-end-start-radius: min(32px, var(--component-radius));
   }
   & tr:last-child td:last-child {
-    border-end-end-radius: min(32px, var(--radius-2xl));
+    border-end-end-radius: min(32px, var(--component-radius));
   }
 
   /* Virtualized: elements are divs, not tr/td, and only a window of the rows
@@ -210,14 +219,14 @@
      than the table's. Round the body itself and clip overflow instead. */
   &:not(tbody) {
     @apply relative h-full overflow-clip;
-    border-radius: min(32px, var(--radius-2xl));
+    border-radius: min(32px, var(--component-radius));
   }
 }
 
 /* --------------------------------------------------------------------------
    Table Row (<tr>)
    -------------------------------------------------------------------------- */
-.table__row {
+.rp-table__row {
   @apply relative h-full;
 
   /* Bottom separator */
@@ -230,25 +239,35 @@
 
   /* Hover state — applied to cells so Firefox clips bg to border-radius */
   @media (hover: hover) {
-    &:hover .table__cell,
-    &[data-hovered="true"] .table__cell {
-      @apply bg-surface/40;
+    &:hover .rp-table__cell,
+    &[data-hovered="true"] .rp-table__cell {
+      background-color: var(--table-cell-bg-hover);
     }
   }
 
   /* Selected state */
-  &[data-selected="true"] .table__cell {
-    @apply bg-surface/10;
+  &[data-selected="true"] .rp-table__cell {
+    background-color: var(--table-cell-bg-selected);
+
     @apply forced-selected;
   }
 
+  /* A selected row still answers the pointer. Without this the rule above swallows the hover -
+   * it is later and equally specific, so the row that is both reads as merely selected. */
+  @media (hover: hover) {
+    &[data-selected="true"]:hover .rp-table__cell,
+    &[data-selected="true"][data-hovered="true"] .rp-table__cell {
+      background-color: var(--table-cell-bg-selected-hover);
+    }
+  }
+
   /* Disabled state */
   &[aria-disabled="true"],
   &[data-disabled="true"] {
     @apply status-disabled;
   }
 
-  /* Row focus ring: see “Table row focus ring” block below (after `.table__cell`). */
+  /* Row focus ring: see “Table row focus ring” block below (after `.rp-table__cell`). */
   &:focus-visible,
   &[data-focus-visible="true"] {
     @apply outline-none;
@@ -260,16 +279,26 @@
   }
 
   /* Drop target state */
-  &[data-drop-target="true"] .table__cell {
-    @apply bg-accent-soft;
+  &[data-drop-target="true"] .rp-table__cell {
+    background-color: var(--table-cell-bg-drop-target);
   }
 }
 
 /* --------------------------------------------------------------------------
    Table Cell (<td>)
    -------------------------------------------------------------------------- */
-.table__cell {
-  @apply h-full bg-surface px-4 py-3 align-middle text-sm text-foreground;
+.rp-table__cell {
+  @apply h-full px-4 py-3 align-middle text-sm text-foreground;
+
+  /* The row's fill, per state, declared on the cell because that is what paints — Firefox clips a
+   * row's own background outside the border radius. `.rp-table-root--secondary` re-points two. */
+  --table-cell-bg: var(--surface);
+  --table-cell-bg-hover: var(--surface-hover);
+  --table-cell-bg-selected: var(--accent-soft);
+  --table-cell-bg-selected-hover: var(--accent-soft-hover);
+  --table-cell-bg-drop-target: var(--accent-soft);
+
+  background-color: var(--table-cell-bg);
 
   @apply border-b border-separator-tertiary/50;
 
@@ -281,69 +310,118 @@
   }
 }
 
+/* Virtualized, a cell is a div: `align-middle` above says nothing to one, and block layout pins
+ * its content under the top padding, so anything taller than the content box of a row whose
+ * height the layout fixed hangs off the bottom. Flex is what centring costs a div. */
+.rp-table__cell:not(td) {
+  @apply flex items-center;
+}
+
 /* --------------------------------------------------------------------------
-   Table row focus ring — must follow `.table__cell` (cascade). One continuous
-   inset ring split across cells; `:is(.table__cell, .table__column)` + direct vs
+   Table row focus ring — must follow `.rp-table__cell` (cascade). One continuous
+   inset ring split across cells; `:is(.rp-table__cell, .rp-table__column)` + direct vs
    `> *:…` covers virtualized wrappers. `:is(:focus-visible, [data-focus-visible])`
    matches row keyboard focus from RAC.
    -------------------------------------------------------------------------- */
-.table__row:is(:focus-visible, [data-focus-visible="true"]) :is(.table__cell, .table__column) {
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
+  :is(.rp-table__cell, .rp-table__column) {
   @apply shadow-none;
 }
 
-.table__row:is(:focus-visible, [data-focus-visible="true"])
-  > :is(.table__cell, .table__column):only-child,
-.table__row:is(:focus-visible, [data-focus-visible="true"])
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
+  > :is(.rp-table__cell, .rp-table__column):only-child,
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
   > *:only-child
-  :is(.table__cell, .table__column) {
+  :is(.rp-table__cell, .rp-table__column) {
   @apply rounded-lg shadow-[inset_0_0_0_2px_var(--focus)] outline-none;
 }
 
-.table__row:is(:focus-visible, [data-focus-visible="true"])
-  > :is(.table__cell, .table__column):first-child:not(:only-child),
-.table__row:is(:focus-visible, [data-focus-visible="true"])
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
+  > :is(.rp-table__cell, .rp-table__column):first-child:not(:only-child),
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
   > *:first-child:not(:only-child)
-  :is(.table__cell, .table__column) {
+  :is(.rp-table__cell, .rp-table__column) {
   @apply rounded-s-lg shadow-[inset_2px_0_0_0_var(--focus),inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none;
 }
 
-.table__row:is(:focus-visible, [data-focus-visible="true"])
-  > :is(.table__cell, .table__column):last-child:not(:only-child),
-.table__row:is(:focus-visible, [data-focus-visible="true"])
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
+  > :is(.rp-table__cell, .rp-table__column):last-child:not(:only-child),
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
   > *:last-child:not(:only-child)
-  :is(.table__cell, .table__column) {
+  :is(.rp-table__cell, .rp-table__column) {
   @apply rounded-e-lg shadow-[inset_-2px_0_0_0_var(--focus),inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none;
 }
 
-.table__row:is(:focus-visible, [data-focus-visible="true"])
-  > :is(.table__cell, .table__column):not(:first-child):not(:last-child):not(:only-child),
-.table__row:is(:focus-visible, [data-focus-visible="true"])
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
+  > :is(.rp-table__cell, .rp-table__column):not(:first-child):not(:last-child):not(:only-child),
+.rp-table__row:is(:focus-visible, [data-focus-visible="true"])
   > *:not(:first-child):not(:last-child):not(:only-child)
-  :is(.table__cell, .table__column) {
+  :is(.rp-table__cell, .rp-table__column) {
   @apply shadow-[inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none;
 }
 
+/* --------------------------------------------------------------------------
+   Drop indicator — the gap between two rows a drop would land in.
+   Styled here rather than left to the caller because a windowed collection
+   renders its own: `TableBody` produces one per row it has laid out, and
+   markup written in the row slot cannot reach them.
+   -------------------------------------------------------------------------- */
+.rp-table__drop-indicator {
+  --table-drop-indicator-size: 2px;
+  --table-drop-indicator-bg: var(--accent);
+}
+
+/* Windowed, the layout has already placed it: a band straddling the boundary, out of flow. */
+.rp-table__drop-indicator:not(tr) {
+  height: var(--table-drop-indicator-size);
+
+  &[data-drop-target="true"] {
+    background-color: var(--table-drop-indicator-bg);
+  }
+}
+
+/* In flow, as a real row, it has to take no height at all. A row that occupies the thickness
+ * steps every row below it down, and since the gap moves with the pointer the whole table walks
+ * about under a drag. So the cell paints the line instead, lifted half a thickness onto the
+ * boundary — which is where the windowed one straddles too, so the two read alike. */
+tr.rp-table__drop-indicator {
+  height: 0;
+
+  > td {
+    position: relative;
+  }
+
+  &[data-drop-target="true"] > td::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    top: calc(var(--table-drop-indicator-size) / -2);
+    height: var(--table-drop-indicator-size);
+    background-color: var(--table-drop-indicator-bg);
+  }
+}
+
 /* --------------------------------------------------------------------------
    Tree / expandable rows — indent the tree column by depth (any level).
    React Aria sets `--table-row-level` (1-based) on each body row and
    `data-level` on cells; tree column cells expose `[data-tree-column]`.
    The row custom property inherits onto cells (1rem per level).
    -------------------------------------------------------------------------- */
-.table__cell[data-tree-column] {
+.rp-table__cell[data-tree-column] {
   padding-inline-start: calc(1rem * var(--table-row-level, 1));
 }
 
 /* --------------------------------------------------------------------------
    Table Footer (div outside <table>, sits on gray bg)
    -------------------------------------------------------------------------- */
-.table__footer {
+.rp-table__footer {
   @apply flex items-center px-4 py-2.5;
 }
 
 /* --------------------------------------------------------------------------
    Resizable Container — wraps table to enable column resizing via React Aria.
    -------------------------------------------------------------------------- */
-.table__resizable-container {
+.rp-table__resizable-container {
   @apply relative scrollbar overflow-auto;
   scrollbar-gutter: auto;
 }
@@ -352,31 +430,44 @@
    Column Resizer — drag handle between resizable columns.
    Replaces the ::after separator when present.
    -------------------------------------------------------------------------- */
-.table__column-resizer {
+.rp-table__column-resizer {
   /* Match the ::after separator: absolute, right edge, short vertical line */
-  @apply absolute end-0 top-1/2 h-4 w-px -translate-y-1/2 rounded-sm bg-separator;
+  @apply absolute end-0 top-1/2 h-4 w-px -translate-y-1/2 rounded-sm;
   /* Make it interactive — wider hit area with transparent padding */
   @apply box-content translate-x-1/2 cursor-col-resize touch-none px-2;
   /* Reset appearance */
   @apply border-none bg-clip-content outline-none;
 
+  --table-resizer-bg: var(--separator);
+  --table-resizer-bg-hover: var(--accent);
+  --table-resizer-bg-resizing: var(--table-resizer-bg-hover);
+  --table-resizer-bg-focus-visible: var(--focus);
+
+  background-color: var(--table-resizer-bg);
+
   &[data-hovered="true"],
   &:hover {
-    @apply h-full w-0.5 bg-accent;
+    @apply h-full w-0.5;
+
+    background-color: var(--table-resizer-bg-hover);
   }
 
   &[data-resizing="true"] {
-    @apply h-full w-0.5 bg-accent;
+    @apply h-full w-0.5;
+
+    background-color: var(--table-resizer-bg-resizing);
   }
 
   &[data-focus-visible="true"],
   &:focus-visible {
-    @apply h-full w-0.5 bg-focus;
+    @apply h-full w-0.5;
+
+    background-color: var(--table-resizer-bg-focus-visible);
   }
 }
 
 /* Hide the ::after separator when a resizer is present in the column */
-.table__column:has(.table__column-resizer)::after {
+.rp-table__column:has(.rp-table__column-resizer)::after {
   content: none;
 }
 
@@ -385,7 +476,7 @@
    Non-virtualized: <tr> with <td colSpan=N> inside.
    Virtualized: <div> with <div role="rowheader"> inside.
    -------------------------------------------------------------------------- */
-.table__load-more {
+.rp-table__load-more {
   & td,
   & [role="rowheader"] {
     @apply py-3 text-center;
@@ -399,6 +490,6 @@
    Load More Content — styled container for the loading indicator inside
    the load-more sentinel row.
    -------------------------------------------------------------------------- */
-.table__load-more-content {
+.rp-table__load-more-content {
   @apply flex items-center justify-center gap-2 py-2;
 }

package/dist/components/tabs/tabs.styles.d.ts

@@ -1,59 +1,60 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const tabsVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: {};
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    scrollNext: string;
-    scrollPrev: string;
-    scroller: string;
-    separator: string;
-    tab: string;
-    tabIndicator: string;
-    tabList: string;
-    tabListContainer: string;
-    tabPanel: string;
-}, undefined, {
-    variant: {
-        primary: {};
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    scrollNext: string;
-    scrollPrev: string;
-    scroller: string;
-    separator: string;
-    tab: string;
-    tabIndicator: string;
-    tabList: string;
-    tabListContainer: string;
-    tabPanel: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: {};
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    scrollNext: string;
-    scrollPrev: string;
-    scroller: string;
-    separator: string;
-    tab: string;
-    tabIndicator: string;
-    tabList: string;
-    tabListContainer: string;
-    tabPanel: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const tabsVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {
+    variant?: "primary" | "secondary" | undefined;
+}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    scrollNext: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    scrollPrev: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    scroller: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    separator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    tab: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    tabIndicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    tabList: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    tabListContainer: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    tabPanel: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 type TabsRenderPropsKeys = "selectedKey";
 export type TabsVariants = Omit<VariantProps<typeof tabsVariants>, TabsRenderPropsKeys>;
 export {};

package/dist/components/tabs/tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,YAAY;;QAkBnB,OAAO;QACP,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAGH,KAAK,mBAAmB,GAAG,aAAa,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBvB,CAAC;AAGH,KAAK,mBAAmB,GAAG,aAAa,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,mBAAmB,CAAC,CAAC"}