@neo-ui-kit/react 0.0.0-stage → 1.0.0

package/dist/components/effects/ImageShine/styles.css

@@ -0,0 +1,66 @@
+/* Styles owned by ImageShine: the light sweeps, the picture breathes, the glow pulses.
+   Every layer animates transform or opacity only; the glow's blur is drawn once. */
+.ad-image-shine {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+}
+.ad-image-shine > img,
+.ad-image-shine-sweep {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+  pointer-events: none;
+}
+.ad-image-shine-glow {
+  filter: blur(1.4rem) brightness(1.4) saturate(1.3);
+  opacity: 0.45;
+  will-change: opacity;
+  animation: ad-image-shine-glow 2.6s ease-in-out infinite;
+}
+.ad-image-shine-picture {
+  will-change: transform;
+}
+.ad-image-shine[data-glow] > .ad-image-shine-picture {
+  animation: ad-image-shine-breathe 2.6s ease-in-out infinite;
+}
+/* The band of light, seen only through the picture's own shape. */
+.ad-image-shine-sweep {
+  overflow: hidden;
+  mask: var(--ad-shine-src) center / contain no-repeat;
+}
+.ad-image-shine-sweep > i {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 50%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-secondary) r g b / 0.4) 42%,
+    rgb(from var(--ad-secondary-100) r g b / 0.75) 50%,
+    rgb(from var(--ad-secondary) r g b / 0.4) 58%,
+    transparent
+  );
+  transform: translateX(-100%);
+  will-change: transform;
+  animation: ad-image-shine-sweep 2.2s ease-in-out infinite;
+}
+@keyframes ad-image-shine-glow {
+  50% {
+    opacity: 0.95;
+  }
+}
+@keyframes ad-image-shine-sweep {
+  to {
+    transform: translateX(200%);
+  }
+}
+@keyframes ad-image-shine-breathe {
+  50% {
+    transform: scale(1.035);
+  }
+}

package/dist/components/effects/Marquee/Marquee.d.ts

@@ -0,0 +1,9 @@
+import { type CommonProps } from "../../../core/base";
+export interface MarqueeProps extends CommonProps {
+    /** Seconds for one full loop. */
+    duration?: number;
+    /** Scroll to the right instead of the left. */
+    reverse?: boolean;
+}
+/** Endless ticker with faded edges; pauses while hovered so it can be read. */
+export declare function Marquee({ duration, reverse, style, children, ...p }: MarqueeProps): import("react").JSX.Element;

package/dist/components/effects/Marquee/styles.css

@@ -0,0 +1,46 @@
+/* Styles owned by Marquee. */
+.ad-marquee {
+  overflow: hidden;
+  min-width: 0;
+  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+.ad-marquee-track {
+  display: flex;
+  width: max-content;
+  animation: ad-marquee var(--ad-marquee-time) linear infinite;
+}
+.ad-marquee[data-reverse] .ad-marquee-track {
+  animation-direction: reverse;
+}
+.ad-marquee:is(:hover, :focus-within) .ad-marquee-track {
+  animation-play-state: paused;
+}
+.ad-marquee[data-static] {
+  mask: none;
+}
+.ad-marquee[data-static] .ad-marquee-track {
+  animation: none;
+  width: 100%;
+}
+.ad-marquee[data-static] .ad-marquee-group {
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  padding: 0;
+  overflow-wrap: anywhere;
+}
+.ad-marquee[data-static] .ad-marquee-group[aria-hidden] {
+  display: none;
+}
+.ad-marquee-group {
+  display: flex;
+  align-items: center;
+  gap: var(--ad-space-6);
+  padding-right: var(--ad-space-6);
+  flex: none;
+}
+@keyframes ad-marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}

package/dist/components/effects/MelodixText/MelodixText.d.ts

@@ -0,0 +1,15 @@
+import { type ElementType } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface MelodixTextProps extends CommonProps {
+    children: string;
+    as?: ElementType;
+    /** "silver": brushed-metal letters under a blue neon; "theme": the theme's colours; "ink": plain text colour. */
+    finish?: "silver" | "theme" | "ink";
+    /** A neon halo round the letters. */
+    glow?: boolean;
+}
+/**
+ * A title set in Melodix, the library's musical typeface: records, keys, notes and clefs are
+ * part of the letters themselves. In brushed silver, in the theme's colours, or plain.
+ */
+export declare function MelodixText({ children, as, finish, glow, ...p }: MelodixTextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/effects/MelodixText/styles.css

@@ -0,0 +1,28 @@
+/* Styles owned by MelodixText: the Melodix typeface in brushed silver (or the theme's colours)
+   under a still neon halo; nothing here animates. */
+.ad-melodix-text {
+  --ad-melodix-glow: #3d8bff;
+  --ad-melodix-top: #ffffff;
+  --ad-melodix-mid: #c9d3e3;
+  --ad-melodix-low: #7f8ca6;
+  display: inline-block;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+  font-family: var(--ad-font-family-melodix);
+  line-height: 1.25;
+  letter-spacing: 0.06em;
+}
+.ad-melodix-text:not([data-finish="ink"]) {
+  color: transparent;
+  background: linear-gradient(180deg, var(--ad-melodix-top) 10%, var(--ad-melodix-mid) 46%, var(--ad-melodix-low) 58%, var(--ad-melodix-top) 92%);
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+.ad-melodix-text[data-finish="theme"] {
+  --ad-melodix-glow: var(--ad-primary);
+  --ad-melodix-mid: var(--ad-secondary-100);
+  --ad-melodix-low: var(--ad-primary);
+}
+.ad-melodix-text[data-glow] {
+  filter: drop-shadow(0 0 0.05em rgb(from var(--ad-melodix-glow) r g b / 0.85)) drop-shadow(0 0 0.25em rgb(from var(--ad-melodix-glow) r g b / 0.4));
+}

package/dist/components/effects/Reveal/Reveal.d.ts

@@ -0,0 +1,13 @@
+import { type ElementType, type ReactElement } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface RevealProps extends CommonProps {
+    as?: ElementType;
+    /** How children arrive. */
+    effect?: "rise" | "fade" | "zoom" | "blur";
+    /** Delay between consecutive children, ms. */
+    stagger?: number;
+    /** Play again every time the block re-enters the viewport. */
+    repeat?: boolean;
+}
+/** Children arrive one after another when the block scrolls into view. */
+export declare function Reveal({ as, effect, stagger, repeat, style, children, ...p }: RevealProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/effects/Reveal/styles.css

@@ -0,0 +1,25 @@
+/* Styles owned by Reveal. */
+.ad-reveal {
+  display: grid;
+  gap: var(--ad-space-3);
+}
+.ad-reveal > * {
+  transition:
+    opacity 0.6s ease-out,
+    transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15),
+    filter 0.6s ease-out;
+  transition-delay: calc(var(--ad-reveal-i, 0) * var(--ad-reveal-stagger));
+}
+.ad-reveal:not([data-shown]) > * {
+  opacity: 0;
+}
+.ad-reveal[data-effect="rise"]:not([data-shown]) > * {
+  transform: translateY(1.5rem);
+}
+.ad-reveal[data-effect="zoom"]:not([data-shown]) > * {
+  transform: scale(0.85);
+}
+.ad-reveal[data-effect="blur"]:not([data-shown]) > * {
+  filter: blur(0.75rem);
+  transform: scale(1.05);
+}

package/dist/components/effects/Shimmer/Shimmer.d.ts

@@ -0,0 +1,10 @@
+import { type CommonProps } from "../../../core/base";
+export interface ShimmerProps extends CommonProps {
+    /** Text lines to imitate. */
+    lines?: number;
+    /** Add a round placeholder, e.g. for an avatar. */
+    circle?: boolean;
+    label?: string;
+}
+/** Loading placeholder: the shape of the coming content with a light running over it. */
+export declare function Shimmer({ lines, circle, label, ...p }: ShimmerProps): import("react").JSX.Element;

package/dist/components/effects/Shimmer/styles.css

@@ -0,0 +1,48 @@
+/* Styles owned by Shimmer. */
+.ad-shimmer {
+  display: flex;
+  align-items: center;
+  gap: var(--ad-space-3);
+  min-width: 0;
+}
+.ad-shimmer-lines {
+  display: grid;
+  gap: 0.6rem;
+  flex: 1;
+  min-width: 0;
+}
+.ad-shimmer i {
+  position: relative;
+  display: block;
+  height: 0.75rem;
+  overflow: hidden;
+  border-radius: 999rem;
+  background: #ffffff10;
+}
+/* The sweep: a light 60% as wide as the line, slid across it on its own layer (no repaint). */
+.ad-shimmer i::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 60%;
+  background: linear-gradient(
+    100deg,
+    transparent 30%,
+    rgb(from var(--ad-secondary) r g b / 0.2) 50%,
+    transparent 70%
+  );
+  transform: translateX(-100%);
+  animation: ad-shimmer-run 1.6s ease-in-out infinite;
+  will-change: transform;
+}
+.ad-shimmer-circle {
+  flex: none;
+  width: 2.75rem !important;
+  height: 2.75rem !important;
+}
+@keyframes ad-shimmer-run {
+  to {
+    /* From 60% of the line left of it to just past its right edge, as the old background ran. */
+    transform: translateX(166.667%);
+  }
+}

package/dist/components/effects/Sparkles/Sparkles.d.ts

@@ -0,0 +1,9 @@
+import { type CommonProps } from "../../../core/base";
+export interface SparklesProps extends CommonProps {
+    /** Number of sparks. */
+    count?: number;
+    /** Spark colour; defaults to a warm white. */
+    color?: string;
+}
+/** Twinkling four-point stars scattered around the content. */
+export declare function Sparkles({ count, color, style, children, ...p }: SparklesProps): import("react").JSX.Element;

package/dist/components/effects/Sparkles/styles.css

@@ -0,0 +1,28 @@
+/* Styles owned by Sparkles. */
+.ad-sparkles {
+  --ad-sparkle: var(--ad-neutral-200);
+  position: relative;
+  contain: layout;
+  display: inline-block;
+}
+.ad-sparkle {
+  position: absolute;
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  fill: var(--ad-sparkle);
+  filter: drop-shadow(0 0 0.25em var(--ad-primary));
+  pointer-events: none;
+  scale: 0;
+  animation: ad-sparkle-twinkle 2.4s ease-in-out infinite;
+}
+@keyframes ad-sparkle-twinkle {
+  0%,
+  100% {
+    scale: 0;
+    rotate: 0deg;
+  }
+  50% {
+    scale: 1;
+    rotate: 90deg;
+  }
+}

package/dist/components/effects/Spotlight/Spotlight.d.ts

@@ -0,0 +1,11 @@
+import { type ElementType } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface SpotlightProps extends CommonProps {
+    as?: ElementType;
+    /** Light colour; defaults to the theme accent. */
+    color?: string;
+    /** Radius of the light circle, any CSS length. */
+    radius?: string;
+}
+/** A light that follows the pointer across the surface and lights the edge nearest to it. */
+export declare function Spotlight({ as, color, radius, style, children, ...p }: SpotlightProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/effects/Spotlight/styles.css

@@ -0,0 +1,45 @@
+/* Styles owned by Spotlight. */
+.ad-spotlight {
+  --ad-spot-color: var(--ad-red);
+  --ad-spot-r: 18rem;
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--ad-radius);
+}
+.ad-spotlight::before,
+.ad-spotlight::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.35s;
+  pointer-events: none;
+}
+/* Glow over the surface. */
+.ad-spotlight::before {
+  z-index: 1;
+  background: radial-gradient(
+    var(--ad-spot-r) circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 50%),
+    color-mix(in srgb, var(--ad-spot-color) 18%, transparent),
+    transparent 65%
+  );
+}
+/* Edge that lights up near the pointer. */
+.ad-spotlight::after {
+  z-index: 2;
+  padding: 0.0625rem;
+  background: radial-gradient(
+    calc(var(--ad-spot-r) * 0.6) circle at var(--ad-spot-x, 50%)
+      var(--ad-spot-y, 50%),
+    color-mix(in srgb, var(--ad-spot-color) 90%, #fff),
+    transparent 70%
+  );
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+}
+.ad-spotlight:hover::before,
+.ad-spotlight:hover::after {
+  opacity: 1;
+}

package/dist/components/effects/Tilt/Tilt.d.ts

@@ -0,0 +1,11 @@
+import { type ElementType } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface TiltProps extends CommonProps {
+    as?: ElementType;
+    /** Largest tilt in degrees. */
+    max?: number;
+    /** Show a glare that follows the pointer. */
+    glare?: boolean;
+}
+/** Leans toward the pointer in 3D, with a glossy glare, and springs back when left. */
+export declare function Tilt({ as, max, glare, children, ...p }: TiltProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/effects/Tilt/styles.css

@@ -0,0 +1,67 @@
+/* Styles owned by Tilt: floats gently on its own, leans toward the pointer with depth and glare. */
+.ad-tilt {
+  position: relative;
+  display: block;
+  border-radius: var(--ad-radius);
+  perspective: 50rem;
+  transform-style: preserve-3d;
+  animation: ad-tilt-float 6s ease-in-out infinite;
+}
+.ad-tilt:hover {
+  animation-play-state: paused;
+}
+.ad-tilt > * {
+  transform: rotateX(var(--ad-tilt-x, 0deg)) rotateY(var(--ad-tilt-y, 0deg));
+  transform-style: preserve-3d;
+  transition:
+    transform 0.7s cubic-bezier(0.34, 1.45, 0.5, 1),
+    scale 0.5s cubic-bezier(0.34, 1.45, 0.5, 1),
+    box-shadow 0.4s;
+  will-change: transform;
+}
+.ad-tilt:hover > * {
+  scale: 1.03;
+  transition-duration: 0.12s, 0.5s, 0.4s;
+  box-shadow:
+    0 1.4rem 2.6rem #000c,
+    0 0 1.6rem rgb(from var(--ad-primary) r g b / 0.2);
+}
+.ad-tilt[data-glare]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at var(--ad-glare-x, 50%) var(--ad-glare-y, 50%),
+    #ffffff44,
+    rgb(from var(--ad-secondary-200) r g b / 0.1) 30%,
+    transparent 60%
+  );
+  mix-blend-mode: screen;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.ad-tilt[data-glare]:hover::after {
+  opacity: 1;
+}
+.ad-tilt[data-ad-motion="off"],
+.ad-tilt[data-ad-motion="off"] > * {
+  animation: none;
+  transform: none;
+  translate: none;
+  scale: none;
+  will-change: auto;
+}
+@keyframes ad-tilt-float {
+  0%,
+  100% {
+    transform: perspective(50rem) rotateX(3deg) rotateY(-4deg);
+    translate: 0 0;
+  }
+  50% {
+    transform: perspective(50rem) rotateX(-3deg) rotateY(4deg);
+    translate: 0 -0.35rem;
+  }
+}

package/dist/components/feedback/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import { type BadgeProps } from "../shared";
+/** A tone adds a live status dot in front of the label. */
+export declare const Badge: (p: BadgeProps) => import("react").JSX.Element;

package/dist/components/feedback/Badge/styles.css

@@ -0,0 +1,91 @@
+/* Styles owned by Badge: a chamfered neon tag; a light sweep crosses it now and then. */
+.ad-badge:not([data-ad-tone]) {
+  --ad-tone: var(--ad-pink);
+}
+.ad-badge {
+  --ad-badge-cut: 0.3rem;
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.4em;
+  padding: 0.18rem 0.6rem;
+  font-size: 0.6875rem;
+  line-height: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  color: color-mix(in srgb, var(--ad-tone) 25%, var(--ad-text));
+  clip-path: polygon(
+    var(--ad-badge-cut) 0,
+    100% 0,
+    100% calc(100% - var(--ad-badge-cut)),
+    calc(100% - var(--ad-badge-cut)) 100%,
+    0 100%,
+    0 var(--ad-badge-cut)
+  );
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--ad-tone) 30%, var(--ad-neutral-900)),
+    color-mix(in srgb, var(--ad-tone) 14%, var(--ad-neutral-900))
+  );
+  box-shadow:
+    inset 0 0 0 0.0625rem color-mix(in srgb, var(--ad-tone) 55%, transparent),
+    inset 0 0.0625rem 0 #ffffff26;
+}
+/* The light sweep: a slanted glint that slides across now and then (moved, never repainted). */
+.ad-badge::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, transparent 40%, #ffffff40 50%, transparent 60%);
+  transform: translateX(-100%);
+  animation: ad-badge-sweep 6s ease-in-out infinite;
+  pointer-events: none;
+}
+/* Sizes scale the type, padding, chamfer and dot together. */
+.ad-badge[data-ad-size="xs"] {
+  --ad-badge-cut: 0.2rem;
+  padding: 0.05rem 0.4rem;
+  font-size: 0.5625rem;
+  line-height: 0.9rem;
+}
+.ad-badge[data-ad-size="sm"] {
+  --ad-badge-cut: 0.25rem;
+  padding: 0.12rem 0.5rem;
+  font-size: 0.625rem;
+  line-height: 1rem;
+}
+.ad-badge[data-ad-size="lg"] {
+  --ad-badge-cut: 0.4rem;
+  padding: 0.3rem 0.85rem;
+  font-size: 0.8125rem;
+  line-height: 1.35rem;
+}
+.ad-badge-dot {
+  width: 0.58em;
+  height: 0.58em;
+  border-radius: 50%;
+  background: var(--ad-tone);
+  box-shadow: 0 0 0.35rem var(--ad-tone);
+  flex: none;
+}
+.ad-badge:is([data-ad-tone="success"], [data-ad-tone="processing"]) .ad-badge-dot {
+  animation: ad-badge-pulse 1.8s ease-in-out infinite;
+}
+@keyframes ad-badge-sweep {
+  0%,
+  70% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes ad-badge-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}

package/dist/components/feedback/CollapsibleSection/CollapsibleSection.d.ts

@@ -0,0 +1,2 @@
+import { type CollapsibleSectionProps } from "../shared";
+export declare const CollapsibleSection: (p: CollapsibleSectionProps) => import("react").JSX.Element;

package/dist/components/feedback/CollapsibleSection/styles.css

@@ -0,0 +1,76 @@
+/* Styles owned by CollapsibleSection: the body unfolds smoothly, the chevron turns, content rises in. */
+.ad-collapsible-section {
+  border-radius: 0.9375rem;
+  interpolate-size: allow-keywords;
+  transition: box-shadow 0.35s;
+}
+.ad-collapsible-section[open] {
+  box-shadow: 0 0 1.2rem rgb(from var(--ad-primary) r g b / 0.13);
+}
+.ad-collapsible-section summary {
+  position: relative;
+  padding: 1rem 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  cursor: pointer;
+  list-style: none;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: inherit;
+  transition:
+    background 0.25s,
+    color 0.25s;
+}
+.ad-collapsible-section summary::-webkit-details-marker {
+  display: none;
+}
+.ad-collapsible-section summary:hover {
+  background: #ffffff08;
+}
+.ad-collapse-heading {
+  display: grid;
+  flex: 1;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.ad-collapse-heading > small {
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  font-weight: 400;
+}
+.ad-collapsible-section summary > .ad-icon:first-child {
+  transition:
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1),
+    color 0.25s;
+}
+.ad-collapsible-section summary:hover > .ad-icon:first-child,
+.ad-collapsible-section[open] summary > .ad-icon:first-child {
+  transform: scale(1.12) rotate(-8deg);
+  color: var(--ad-pink);
+}
+/* Smooth height where supported (::details-content); elsewhere it opens instantly. */
+.ad-collapsible-section::details-content {
+  block-size: 0;
+  overflow: hidden;
+  transition:
+    block-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
+    content-visibility 0.45s allow-discrete;
+}
+.ad-collapsible-section[open]::details-content {
+  block-size: auto;
+}
+.ad-collapse-content {
+  padding: 0 1.25rem 1.25rem;
+  font-size: 0.8125rem;
+  color: var(--ad-muted);
+}
+.ad-collapsible-section[open] .ad-collapse-content {
+  animation: ad-collapse-in 0.5s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+@keyframes ad-collapse-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+}

package/dist/components/feedback/DataTable/DataTable.d.ts

@@ -0,0 +1,16 @@
+import type { DataTableColumn, DataTableFilter, DataTableProps, DataTableRow } from "../shared";
+/** The filter editor in a column header's popover. */
+export declare function FilterEditor({ kind, options, filter, onChange, }: {
+    kind: "text" | "values" | "range";
+    options: string[];
+    filter?: DataTableFilter;
+    onChange: (filter: DataTableFilter | undefined) => void;
+}): import("react").JSX.Element;
+/** Export the filtered, sorted rows with the same columns the reader can see. */
+export declare const dataTableCsv: <T extends DataTableRow>(columns: DataTableColumn<T>[], rows: T[]) => string;
+/**
+ * A data table: sortable columns, row selection with "select all", search, pages, a sticky
+ * header when it scrolls, loading and empty states. Plain `columns: string[]` with array
+ * rows still works.
+ */
+export declare function DataTable<T extends DataTableRow = DataTableRow>({ columns: providedColumns, rows, caption, rowKey, sort: controlledSort, defaultSort, onSortChange, sorting: controlledSorting, defaultSorting, onSortingChange, selectable, selected: controlledSelection, defaultSelected, onSelectionChange, searchable, query: controlledQuery, defaultQuery, onQueryChange, filterable, filters: controlledFilters, defaultFilters, onFiltersChange, groupable, groupBy: controlledGroupBy, defaultGroupBy, onGroupByChange, pageSize, pageSizeOptions, pagination: controlledPagination, defaultPagination, onPaginationChange, manualFiltering, manualSorting, manualPagination, rowCount, columnOrder: controlledColumnOrder, defaultColumnOrder, onColumnOrderChange, columnPinning: controlledColumnPinning, defaultColumnPinning, onColumnPinningChange, resizableColumns, maxHeight, virtualize, estimatedRowHeight, overscan, renderRowDetails, expandedRows: controlledExpandedRows, defaultExpandedRows, onExpandedRowsChange, renderRowActions, rowActionsWidth, rowNumbers, dense: controlledDense, densityToggle, onDenseChange, striped, loading, empty: providedEmpty, onRowClick, ...p }: DataTableProps<T>): import("react").JSX.Element;