@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/currency-selector.js

@@ -1,192 +1,114 @@
 "use client";
-import {
-  useUncontrolled
-} from "./chunk-QZHSHSVV.js";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "./chunk-SFNJGF6M.js";
-import "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/currency-selector.tsx
-import { cva } from "class-variance-authority";
+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";
-var DEFAULT_FLAG = [
-  { color: "#1f8f55" },
-  { color: "#ffffff" },
-  { color: "#1f8f55" }
+import { cva } from "class-variance-authority";
+//#region src/currency-selector.tsx
+const DEFAULT_FLAG = [
+	{ color: "#1f8f55" },
+	{ color: "#ffffff" },
+	{ color: "#1f8f55" }
 ];
-var 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
-    }
-  }
-);
+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);
+	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 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
-            ))
-          }
-        )
-      ]
-    }
-  );
+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))
+		})]
+	});
 }
-export {
-  CurrencyFlag,
-  CurrencySelector,
-  currencySelectorTriggerVariants
-};
-//# sourceMappingURL=currency-selector.js.map
+//#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 };