@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/cta.d.ts

@@ -0,0 +1,64 @@
+import { n as ButtonLink, t as Button } from "./button-BZIeyUw6.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/cta.d.ts
+/**
+ * CTA is a composable marketing panel: a text column (title, description,
+ * checklist) paired with an optional grid of feature cards and an action
+ * row. Compose only the pieces you need — every part is a standalone
+ * primitive, not a fixed layout.
+ *
+ * @example
+ * <CTA variant="subtle">
+ *   <CTAContent>
+ *     <CTATag>Your Next Step</CTATag>
+ *     <CTATitle>Own your first home sooner</CTATitle>
+ *     <CTADescription>
+ *       Shari'ah-compliant financing built around how you actually get paid.
+ *     </CTADescription>
+ *     <CTAList>
+ *       <CTAListItem>No interest, ever</CTAListItem>
+ *       <CTAListItem>Approval in 48 hours</CTAListItem>
+ *     </CTAList>
+ *   </CTAContent>
+ *   <CTACard variant="brand">
+ *     <CTACardIcon variant="surface"><ShieldCheck /></CTACardIcon>
+ *     <CTACardTitle>Backed by NAICOM</CTACardTitle>
+ *     <CTACardDescription>Every plan is insured end to end.</CTACardDescription>
+ *     <CTAButton>Get started</CTAButton>
+ *   </CTACard>
+ * </CTA>
+ */
+declare const ctaVariants: (props?: ({
+  variant?: "default" | "subtle" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CTAProps = useRender.ComponentProps<"section"> & VariantProps<typeof ctaVariants>;
+declare function CTA({ className, render, variant, ...props }: CTAProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTAContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTATag({ className, render, ...props }: useRender.ComponentProps<"span">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTATitle({ className, render, ...props }: useRender.ComponentProps<"h2">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTADescription({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTAList({ className, render, ...props }: useRender.ComponentProps<"ul">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type CTAListItemProps = useRender.ComponentProps<"li"> & {
+  icon?: React.ReactNode;
+};
+declare function CTAListItem({ children, className, icon, render, ...props }: CTAListItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTACard({ className, render, variant, ...props }: useRender.ComponentProps<"div"> & {
+  variant?: "default" | "brand";
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTACardIcon({ className, render, variant, ...props }: useRender.ComponentProps<"span"> & {
+  variant?: "subtle-brand" | "subtle-accent" | "surface";
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTACardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function CTACardDescription({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * CTAButton wraps `Button` with defaults tuned for a CTA's action row: it
+ * stays legible on every `tone`, so a `tone="brand"` panel automatically
+ * gets a canvas-colored button instead of an invisible brand-on-brand one.
+ * Every `Button` prop (variant, size, isLoading, render, …) still works.
+ */
+declare function CTAButton({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CTAButtonLink({ className, ...props }: React.ComponentProps<typeof ButtonLink>): React.JSX.Element;
+//#endregion
+export { CTA, CTAButton, CTAButtonLink, CTACard, CTACardDescription, CTACardIcon, CTACardTitle, CTAContent, CTADescription, CTAList, CTAListItem, type CTAListItemProps, type CTAProps, CTATag, CTATitle, ctaVariants };

package/dist/cta.js

@@ -0,0 +1,192 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button, ButtonLink } from "./button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/cta.tsx
+/**
+* CTA is a composable marketing panel: a text column (title, description,
+* checklist) paired with an optional grid of feature cards and an action
+* row. Compose only the pieces you need — every part is a standalone
+* primitive, not a fixed layout.
+*
+* @example
+* <CTA variant="subtle">
+*   <CTAContent>
+*     <CTATag>Your Next Step</CTATag>
+*     <CTATitle>Own your first home sooner</CTATitle>
+*     <CTADescription>
+*       Shari'ah-compliant financing built around how you actually get paid.
+*     </CTADescription>
+*     <CTAList>
+*       <CTAListItem>No interest, ever</CTAListItem>
+*       <CTAListItem>Approval in 48 hours</CTAListItem>
+*     </CTAList>
+*   </CTAContent>
+*   <CTACard variant="brand">
+*     <CTACardIcon variant="surface"><ShieldCheck /></CTACardIcon>
+*     <CTACardTitle>Backed by NAICOM</CTACardTitle>
+*     <CTACardDescription>Every plan is insured end to end.</CTACardDescription>
+*     <CTAButton>Get started</CTAButton>
+*   </CTACard>
+* </CTA>
+*/
+const ctaVariants = cva("group/cta relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl text-fg-primary transition-[background-color,border-color,box-shadow] py-10 px-5 md:px-10 xl:py-16 xl:px-16 md:gap-10 gap-6", {
+	variants: { variant: {
+		default: "bg-surface",
+		subtle: "bg-surface-brand-subtle"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function CTA({ className, render, variant = "default", ...props }) {
+	return useRender({
+		defaultTagName: "section",
+		props: mergeProps({ className: cn(ctaVariants({ variant }), className) }, props),
+		render,
+		state: { slot: "cta" }
+	});
+}
+function CTAContent({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex min-w-0 flex-1 flex-col gap-2.5", className) }, props),
+		render,
+		state: { slot: "cta-content" }
+	});
+}
+function CTATag({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({ className: cn("text-fg-brand text-gdt-capitalized uppercase font-semibold", className) }, props),
+		render,
+		state: { slot: "cta-title" }
+	});
+}
+function CTATitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h2",
+		props: mergeProps({ className: cn("text-fg-primary text-gdt-h3 lg:text-gdt-h2 font-extrabold", className) }, props),
+		render,
+		state: { slot: "cta-title" }
+	});
+}
+function CTADescription({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-fg-secondary text-gdt-sm md:text-gdt-md", className) }, props),
+		render,
+		state: { slot: "cta-description" }
+	});
+}
+function CTAList({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "ul",
+		props: mergeProps({ className: cn("flex min-w-0 pt-8 flex-col gap-2.5", className) }, props),
+		render,
+		state: { slot: "cta-list" }
+	});
+}
+const CircleCheck = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 22,
+	height: 22,
+	fill: "none",
+	viewBox: "0 0 22 22",
+	"aria-hidden": "true",
+	...props,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: 22,
+		height: 22,
+		fill: "var(--color-surface-brand)",
+		rx: 11
+	}), /* @__PURE__ */ jsx("path", {
+		stroke: "var(--color-fg-on-brand)",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "m7.36 11.26 2.6 2.6 4.68-5.72"
+	})]
+});
+function CTAListItem({ children, className, icon, render, ...props }) {
+	return useRender({
+		defaultTagName: "li",
+		props: mergeProps({
+			className: cn("flex min-w-0 items-start gap-2 text-gdt-sm text-fg-primary", "group-data-[tone=brand]/cta:text-fg-on-brand", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("inline-flex shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0"),
+				children: /* @__PURE__ */ jsx(CircleCheck, {})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children
+			})] })
+		}, props),
+		render,
+		state: { slot: "cta-list-item" }
+	});
+}
+function CTACard({ className, render, variant = "default", ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("group/cta-card min-w-0 flex flex-col gap-3.5  py-6.5 px-6 rounded-2xl text", { "bg-canvas border shadow-1": variant === "default" }, { "bg-surface-brand shadow-2": variant === "brand" }) }, props),
+		render,
+		state: {
+			slot: "cta-card",
+			variant
+		}
+	});
+}
+function CTACardIcon({ className, render, variant = "subtle-brand", ...props }) {
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps({
+			"aria-hidden": true,
+			className: cn("flex size-13.5 shrink-0 items-center justify-center rounded-full [&_svg:not([class*='size-'])]:size-6", {
+				"bg-surface-brand-subtle text-action-primary": variant === "subtle-brand",
+				"bg-surface-accent-subtle text-fg-info": variant === "subtle-accent",
+				"bg-surface-overlay text-fg-brand": variant === "surface"
+			}, className)
+		}, props),
+		render,
+		state: { slot: "cta-card-icon" }
+	});
+}
+function CTACardTitle({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "h3",
+		props: mergeProps({ className: cn("text-gdt-md font-bold text-fg-primary group-data-[variant=brand]/cta-card:text-fg-on-brand", className) }, props),
+		render,
+		state: { slot: "cta-card-title" }
+	});
+}
+function CTACardDescription({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "p",
+		props: mergeProps({ className: cn("text-gdt-sm text-fg-secondary flex-1 group-data-[variant=brand]/cta-card:text-fg-on-brand", className) }, props),
+		render,
+		state: { slot: "cta-card-description" }
+	});
+}
+/**
+* CTAButton wraps `Button` with defaults tuned for a CTA's action row: it
+* stays legible on every `tone`, so a `tone="brand"` panel automatically
+* gets a canvas-colored button instead of an invisible brand-on-brand one.
+* Every `Button` prop (variant, size, isLoading, render, …) still works.
+*/
+function CTAButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "cta-button",
+		className: cn("relative", "group-data-[variant=brand]/cta-card:bg-canvas group-data-[variant=brand]/cta-card:text-fg-brand", "group-data-[variant=brand]/cta-card:hover:bg-surface group-data-[variant=brand]/cta-card:active:bg-surface-raised", className),
+		...props
+	});
+}
+function CTAButtonLink({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ButtonLink, {
+		"data-slot": "cta-button",
+		className: cn("relative", "group-data-[variant=brand]/cta-card:bg-canvas group-data-[variant=brand]/cta-card:text-fg-brand", "group-data-[variant=brand]/cta-card:hover:bg-surface group-data-[variant=brand]/cta-card:active:bg-surface-raised", className),
+		...props
+	});
+}
+//#endregion
+export { CTA, CTAButton, CTAButtonLink, CTACard, CTACardDescription, CTACardIcon, CTACardTitle, CTAContent, CTADescription, CTAList, CTAListItem, CTATag, CTATitle, ctaVariants };

package/dist/currency-selector.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/currency-selector.d.ts
+type CurrencyFlagStripe = {
+  color: string;
+  size?: number;
+};
+type CurrencySelectorOption = {
+  code: string;
+  label: string;
+  countryCode?: string;
+  flag?: readonly CurrencyFlagStripe[];
+};
+type CurrencySelectorSize = NonNullable<VariantProps<typeof currencySelectorTriggerVariants>["size"]>;
+type CurrencySelectorProps = Omit<React.ComponentProps<"button">, "children" | "defaultValue" | "onChange" | "value"> & {
+  options: readonly CurrencySelectorOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, option: CurrencySelectorOption) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  size?: CurrencySelectorSize;
+  withBackground?: boolean;
+  showFlag?: boolean;
+  showOptionFlags?: boolean;
+  contentClassName?: string;
+  placeholder?: string;
+};
+declare const currencySelectorTriggerVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+  withBackground?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function CurrencyFlag({ flag, label, className }: {
+  flag?: readonly CurrencyFlagStripe[];
+  label?: string;
+  className?: string;
+}): React.JSX.Element;
+declare function CurrencySelector({ options, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, size, withBackground, showFlag, showOptionFlags, contentClassName, className, placeholder, type, ...props }: CurrencySelectorProps): React.JSX.Element;
+//#endregion
+export { CurrencyFlag, type CurrencyFlagStripe, CurrencySelector, type CurrencySelectorOption, type CurrencySelectorProps, type CurrencySelectorSize, currencySelectorTriggerVariants };

package/dist/currency-selector.js

@@ -0,0 +1,114 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/currency-selector.tsx
+const DEFAULT_FLAG = [
+	{ color: "#1f8f55" },
+	{ color: "#ffffff" },
+	{ color: "#1f8f55" }
+];
+const currencySelectorTriggerVariants = cva("group/currency-selector inline-flex w-fit shrink-0 items-center rounded-full border-0 font-bold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 data-popup-open:text-fg-primary [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-current", {
+	variants: {
+		size: {
+			sm: "h-8 gap-1.5 px-3 text-gdt-xs",
+			md: "h-11 gap-2 px-4 text-gdt-sm",
+			lg: "h-12 gap-2.5 px-5 text-gdt-md"
+		},
+		withBackground: {
+			true: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-popup-open:bg-action-tertiary-hover",
+			false: "bg-transparent px-0 text-fg-primary hover:text-fg-brand active:text-fg-brand data-popup-open:bg-transparent"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		withBackground: true
+	}
+});
+function findOption(options, value) {
+	return options.find((option) => option.code === value);
+}
+function CurrencyFlag({ flag = DEFAULT_FLAG, label, className }) {
+	const total = flag.reduce((sum, stripe) => sum + (stripe.size ?? 1), 0);
+	let cursor = 0;
+	const stops = flag.flatMap((stripe) => {
+		const start = cursor;
+		cursor += (stripe.size ?? 1) / total * 100;
+		return [`${stripe.color} ${start.toFixed(2)}%`, `${stripe.color} ${cursor.toFixed(2)}%`];
+	});
+	return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": label ?? "Currency flag",
+		"data-slot": "currency-flag",
+		className: cn("inline-block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] bg-cover shadow-[inset_0_0_0_1px_rgb(0_0_0/0.04)]", className),
+		style: { backgroundImage: `linear-gradient(90deg, ${stops.join(", ")})` }
+	});
+}
+function CurrencySelector({ options, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, size = "md", withBackground = true, showFlag = true, showOptionFlags = true, contentClassName, className, placeholder = "Select currency", type = "button", ...props }) {
+	const fallbackValue = options[0]?.code;
+	const [selectedValue, setSelectedValue] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: fallbackValue,
+		onChange: (nextValue) => {
+			const nextOption = findOption(options, nextValue);
+			if (nextOption) onValueChange?.(nextValue, nextOption);
+		}
+	});
+	const selectedOption = findOption(options, selectedValue);
+	const handleValueChange = (nextValue) => {
+		if (nextValue) setSelectedValue(nextValue);
+	};
+	return /* @__PURE__ */ jsxs(Select, {
+		value: selectedValue,
+		onValueChange: handleValueChange,
+		open,
+		defaultOpen,
+		onOpenChange,
+		size,
+		children: [/* @__PURE__ */ jsxs(SelectTrigger, {
+			type,
+			unstyled: true,
+			className: cn(currencySelectorTriggerVariants({
+				size,
+				withBackground
+			}), className),
+			...props,
+			children: [showFlag && selectedOption ? /* @__PURE__ */ jsx(CurrencyFlag, {
+				flag: selectedOption.flag,
+				label: `${selectedOption.countryCode ?? selectedOption.code} flag`
+			}) : null, /* @__PURE__ */ jsx(SelectValue, {
+				placeholder,
+				children: selectedOption?.code ?? placeholder
+			})]
+		}), /* @__PURE__ */ jsx(SelectContent, {
+			align: "start",
+			sideOffset: 8,
+			className: cn("w-65 rounded-[18px] border-line-subtle bg-surface-overlay p-2 shadow-3", contentClassName),
+			children: options.map((option) => /* @__PURE__ */ jsxs(SelectItem, {
+				value: option.code,
+				className: "min-h-12 rounded-lg px-3 text-gdt-sm data-selected:bg-surface-brand-subtle data-selected:font-normal data-selected:text-fg-brand data-highlighted:bg-surface-brand-subtle",
+				children: [
+					showOptionFlags ? /* @__PURE__ */ jsx(CurrencyFlag, {
+						flag: option.flag,
+						label: `${option.countryCode ?? option.code} flag`
+					}) : null,
+					/* @__PURE__ */ jsxs("span", {
+						className: "min-w-0 flex-1 truncate",
+						children: [
+							option.code,
+							" - ",
+							option.label
+						]
+					}),
+					option.code === selectedValue ? /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto size-4 text-fg-brand" }) : null
+				]
+			}, option.code))
+		})]
+	});
+}
+//#endregion
+export { CurrencyFlag, CurrencySelector, currencySelectorTriggerVariants };

package/dist/data-table.d.ts

@@ -0,0 +1,164 @@
+import { t as Button } from "./button-BZIeyUw6.js";
+import { Empty } from "./empty-state.js";
+import { FilterApplyButtonProps, FilterContentProps, FilterProps, FilterResetButtonProps } from "./filter.js";
+import { Pagination } from "./pagination.js";
+import { PopoverBody, PopoverContent, PopoverFooter, PopoverHeader } from "./popover.js";
+import { Table as Table$1 } from "./table.js";
+import * as React from "react";
+import { ColumnDef, Row, Table, TableOptions } from "@tanstack/react-table";
+//#region src/data-table.d.ts
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData, TValue> extends DataTableColumnMeta {}
+}
+type DataTableColumnMeta = {
+  cardLabel?: React.ReactNode;
+  hideInCard?: boolean;
+  isPinned?: boolean;
+  pinPosition?: "left" | "right";
+  skeletonType?: "default" | "image-description";
+  useAsCardBadge?: boolean;
+  useAsCardSubtitle?: boolean;
+  useAsCardTitle?: boolean;
+};
+type DataTableColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue>;
+type DataTableRow<TData> = Row<TData>;
+type DataTableInstance<TData> = Table<TData>;
+type DataTableContextValue<TData> = {
+  isLoading?: boolean;
+  onRowClick?: (row: Row<TData>) => void;
+  table: Table<TData>;
+};
+declare function useDataTableContext<TData>(): DataTableContextValue<TData>;
+type UseDataTableOptions<TData, TValue = unknown> = Omit<TableOptions<TData>, "columns" | "data" | "enableRowSelection" | "getCoreRowModel"> & {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  enableRowSelection?: boolean;
+};
+declare function useDataTable<TData, TValue = unknown>({ columns, data, enableRowSelection, initialState, getSortedRowModel: getSortedRowModelOption, ...options }: UseDataTableOptions<TData, TValue>): Table<TData>;
+type DataTableRootProps<TData> = React.ComponentProps<"div"> & {
+  isLoading?: boolean;
+  onRowClick?: (row: Row<TData>) => void;
+  table: Table<TData>;
+};
+declare function DataTableRoot<TData>({ children, className, isLoading, onRowClick, table, ...props }: DataTableRootProps<TData>): React.JSX.Element;
+type DataTableToolbarProps = React.ComponentProps<"div">;
+declare function DataTableToolbar({ className, ...props }: DataTableToolbarProps): React.JSX.Element;
+type DataTableFilterProps = Omit<FilterProps, "children"> & {
+  applyButtonProps?: FilterApplyButtonProps;
+  children?: React.ReactNode;
+  closeOnApply?: boolean;
+  closeOnReset?: boolean;
+  contentProps?: FilterContentProps;
+  defaultOpen?: boolean;
+  footer?: React.ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  open?: boolean;
+  popoverBodyProps?: React.ComponentProps<typeof PopoverBody>;
+  popoverContentProps?: Omit<React.ComponentProps<typeof PopoverContent>, "children">;
+  popoverFooterProps?: React.ComponentProps<typeof PopoverFooter>;
+  popoverHeaderProps?: React.ComponentProps<typeof PopoverHeader>;
+  resetButtonProps?: FilterResetButtonProps;
+  title?: React.ReactNode;
+  trigger?: React.ReactElement;
+  triggerButtonProps?: Omit<React.ComponentProps<typeof Button>, "children">;
+  triggerCountClassName?: string;
+  triggerHideCountWhenZero?: boolean;
+  triggerLabel?: React.ReactNode;
+};
+declare function DataTableFilter({ applyButtonProps, children, closeOnApply, closeOnReset, contentProps, defaultJoin, defaultOpen, defaultValue, fields, footer, onApply, onOpenChange, open, popoverBodyProps, popoverContentProps, popoverFooterProps, popoverHeaderProps, resetButtonProps, title, trigger, triggerButtonProps, triggerCountClassName, triggerHideCountWhenZero, triggerLabel }: DataTableFilterProps): React.JSX.Element;
+type DataTableTableProps<TData> = Omit<React.ComponentProps<typeof Table$1>, "children"> & {
+  emptyState?: React.ReactNode;
+  interactiveColumnIds?: string[];
+  isLoading?: boolean;
+  loadingRowCount?: number;
+  onRowClick?: (row: Row<TData>) => void;
+  table?: Table<TData>;
+};
+declare function DataTable<TData>({ containerClassName, emptyState, interactiveColumnIds, isLoading: isLoadingProp, loadingRowCount, onRowClick: onRowClickProp, table: tableProp, ...props }: DataTableTableProps<TData>): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined>;
+type DataTableCardGridProps<TData> = React.ComponentProps<"div"> & {
+  actionsColumnId?: string;
+  badgeColumnId?: string;
+  detailColumnIds?: string[];
+  emptyState?: React.ReactNode;
+  isLoading?: boolean;
+  loadingCardCount?: number;
+  onCardClick?: (row: Row<TData>) => void;
+  renderActions?: (row: Row<TData>) => React.ReactNode;
+  renderCard?: (row: Row<TData>, args: DataTableCardGridRenderArgs<TData>) => React.ReactNode;
+  subtitleColumnId?: string;
+  table?: Table<TData>;
+  titleColumnId?: string;
+};
+type DataTableCardGridRenderArgs<TData> = {
+  action: React.ReactNode;
+  actions: React.ReactNode;
+  row: Row<TData>;
+  selection: React.ReactNode;
+  table: Table<TData>;
+};
+declare function DataTableCardGrid<TData>({ actionsColumnId, badgeColumnId, className, detailColumnIds, emptyState, isLoading: isLoadingProp, loadingCardCount, onCardClick, renderActions, renderCard, subtitleColumnId, table: tableProp, titleColumnId, ...props }: DataTableCardGridProps<TData>): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined>;
+type DataTableBulkActionsRenderArgs<TData> = {
+  data: TData[];
+  rows: Row<TData>[];
+  table: Table<TData>;
+};
+type DataTableBulkActionsProps<TData> = Omit<React.ComponentProps<"div">, "children"> & {
+  children: React.ReactNode | ((args: DataTableBulkActionsRenderArgs<TData>) => React.ReactNode);
+  table?: Table<TData>;
+};
+declare function DataTableBulkActions<TData>({ children, className, style, table: tableProp, ...props }: DataTableBulkActionsProps<TData>): React.JSX.Element | null;
+type DataTablePaginationProps<TData> = React.ComponentProps<typeof Pagination> & {
+  controlAppearance?: "control" | "icon";
+  getSummaryLabel?: (args: {
+    end: number;
+    page: number;
+    pageSize: number;
+    start: number;
+    totalEntries: number;
+  }) => React.ReactNode;
+  /**
+   * Called with the next 1-based page when a control is activated. Provide
+   * this (together with `page` and `pageCount`) to drive pagination from API
+   * state instead of the TanStack table instance.
+   */
+  onPageChange?: (page: number) => void;
+  /** Current 1-based page. Overrides the table's pagination state when set. */
+  page?: number;
+  /** Total number of pages. Overrides `table.getPageCount()` when set. */
+  pageCount?: number;
+  /** Current page size. Used for API-driven summaries and page count fallback. */
+  pageSize?: number;
+  showControls?: boolean;
+  showJumpToPage?: boolean;
+  showPreviousNext?: boolean;
+  showSummary?: boolean;
+  jumpToPageLabel?: React.ReactNode;
+  nextLabel?: React.ReactNode;
+  previousLabel?: React.ReactNode;
+  siblingCount?: number;
+  table?: Table<TData>;
+  totalEntries?: number;
+};
+declare function DataTablePagination<TData>({ className, controlAppearance, getSummaryLabel, jumpToPageLabel, nextLabel, onPageChange, page, pageCount: pageCountProp, pageSize: pageSizeProp, previousLabel, showControls, showJumpToPage, showPreviousNext, showSummary, siblingCount, table: tableProp, totalEntries: totalEntriesProp, ...props }: DataTablePaginationProps<TData>): React.JSX.Element | null;
+type DataTablePageSizeSelectProps<TData> = {
+  className?: string;
+  label?: (pageSize: number) => React.ReactNode;
+  /**
+   * Called with the next page size. Provide this (together with `pageSize`) to
+   * drive the control from API state instead of the TanStack table instance.
+   */
+  onPageSizeChange?: (pageSize: number) => void;
+  /** Current page size. Overrides the table's pagination state when set. */
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  table?: Table<TData>;
+};
+declare function DataTablePageSizeSelect<TData>({ className, label, onPageSizeChange, pageSize: pageSizeProp, pageSizeOptions, table: tableProp }: DataTablePageSizeSelectProps<TData>): React.JSX.Element;
+type DataTableEmptyStateProps = {
+  action?: React.ReactNode;
+  description?: React.ReactNode;
+  title?: React.ReactNode;
+} & React.ComponentProps<typeof Empty>;
+declare function DataTableEmptyState({ action, className, description, title, ...props }: DataTableEmptyStateProps): React.JSX.Element;
+//#endregion
+export { DataTable, DataTableBulkActions, type DataTableBulkActionsProps, DataTableCardGrid, type DataTableCardGridProps, type DataTableCardGridRenderArgs, type DataTableColumnDef, type DataTableColumnMeta, DataTableEmptyState, DataTableFilter, type DataTableFilterProps, type DataTableInstance, DataTablePageSizeSelect, DataTablePagination, type DataTablePaginationProps, DataTableRoot, type DataTableRootProps, type DataTableRow, type DataTableTableProps, DataTableToolbar, type DataTableToolbarProps, type UseDataTableOptions, useDataTable, useDataTableContext };