@blenx-dev/core 0.1.0 → 0.2.3

package/src/components/Stack/stack.tsx

@@ -1,22 +1,12 @@
-import clsx from "clsx";
 import type { BoxProps } from "../Box/box";
 import { Box } from "../Box/box";
-import { stackRecipe } from "./stack.css";
-import type { RecipeVariants } from "@vanilla-extract/recipes";
 
-type StackVariants = RecipeVariants<typeof stackRecipe>;
+export type StackProps = Omit<BoxProps, "display"> & {
+  wrap?: boolean;
+};
 
-export type StackProps = Omit<BoxProps, "display"> & StackVariants;
-
-export function Stack({ gap, align, justify, wrap, className, style, ...props }: StackProps) {
-  return (
-    <Box
-      display="flex"
-      className={clsx(stackRecipe({ gap, align, justify, wrap }), className)}
-      style={style}
-      {...props}
-    />
-  );
+export function Stack({ wrap, ...props }: StackProps) {
+  return <Box display="flex" {...(wrap ? { flexWrap: "wrap" } : {})} gap="md" {...props} />;
 }
 
 type VStackProps = Omit<StackProps, "direction">;

package/src/components/Text/text.tsx

@@ -26,7 +26,7 @@ const variantTag = {
 } as const satisfies Record<string, keyof React.JSX.IntrinsicElements>;
 
 export type TextProps = useRender.ComponentProps<"div"> &
-  BaseSprinkles &
+  Omit<BaseSprinkles, "fontSize"> &
   RecipeVariants<typeof textVariants> & { span?: boolean } & {
     size?: BaseSprinkles["fontSize"];
   };

package/src/components/index.ts

@@ -11,15 +11,12 @@ export * from "./Badge/badge";
 export * from "./Box/box";
 export * from "./Breadcrumbs/breadcrumbs";
 export * from "./Button/button";
-export * from "./Calendar/calendar";
 export * from "./Card/card";
 export * from "./Checkbox/checkbox";
 export * from "./Command/command";
-export * from "./ColorPicker/color-picker";
 export * from "./ColorSwatch/color-swatch";
 export * from "./Combobox/combobox";
 export * from "./Container/container";
-// Export * from "./DatePicker/date-picker";
 export * from "./Dialog/dialog";
 export * from "./Drawer/drawer";
 export * from "./Field/field";

package/src/icons/ArrowRightIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ArrowRightIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"/>',
+    }}
+    {...props}
+  />
+));
+
+ArrowRightIcon.displayName = "ArrowRightIcon";

package/src/icons/CalendarIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const CalendarIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 2v4m8-4v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></g>',
+    }}
+    {...props}
+  />
+));
+
+CalendarIcon.displayName = "CalendarIcon";

package/src/icons/CheckIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const CheckIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"/>',
+    }}
+    {...props}
+  />
+));
+
+CheckIcon.displayName = "CheckIcon";

package/src/icons/ChevronDownIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ChevronDownIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/>',
+    }}
+    {...props}
+  />
+));
+
+ChevronDownIcon.displayName = "ChevronDownIcon";

package/src/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ChevronLeftIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 18l-6-6l6-6"/>',
+    }}
+    {...props}
+  />
+));
+
+ChevronLeftIcon.displayName = "ChevronLeftIcon";

package/src/icons/ChevronRightIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"/>',
+    }}
+    {...props}
+  />
+));
+
+ChevronRightIcon.displayName = "ChevronRightIcon";

package/src/icons/ChevronUpIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ChevronUpIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m18 15l-6-6l-6 6"/>',
+    }}
+    {...props}
+  />
+));
+
+ChevronUpIcon.displayName = "ChevronUpIcon";

package/src/icons/CircleAlertIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const CircleAlertIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></g>',
+    }}
+    {...props}
+  />
+));
+
+CircleAlertIcon.displayName = "CircleAlertIcon";

package/src/icons/CopyIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const CopyIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></g>',
+    }}
+    {...props}
+  />
+));
+
+CopyIcon.displayName = "CopyIcon";

package/src/icons/EllipsisIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const EllipsisIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></g>',
+    }}
+    {...props}
+  />
+));
+
+EllipsisIcon.displayName = "EllipsisIcon";

package/src/icons/FolderOpenIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const FolderOpenIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>',
+    }}
+    {...props}
+  />
+));
+
+FolderOpenIcon.displayName = "FolderOpenIcon";

package/src/icons/ListIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ListIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13"/>',
+    }}
+    {...props}
+  />
+));
+
+ListIcon.displayName = "ListIcon";

package/src/icons/LoaderCircleIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const LoaderCircleIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/>',
+    }}
+    {...props}
+  />
+));
+
+LoaderCircleIcon.displayName = "LoaderCircleIcon";

package/src/icons/SearchIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const SearchIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"/><circle cx="11" cy="11" r="8"/></g>',
+    }}
+    {...props}
+  />
+));
+
+SearchIcon.displayName = "SearchIcon";

package/src/icons/SquareCheckIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const SquareCheckIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12l2 2l4-4"/></g>',
+    }}
+    {...props}
+  />
+));
+
+SquareCheckIcon.displayName = "SquareCheckIcon";

package/src/icons/XIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const XIcon = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    dangerouslySetInnerHTML={{
+      __html:
+        '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>',
+    }}
+    {...props}
+  />
+));
+
+XIcon.displayName = "XIcon";

package/src/icons/index.ts

@@ -0,0 +1,17 @@
+export interface IconProps extends React.SVGProps<SVGSVGElement> {}
+export * from "./ChevronLeftIcon";
+export * from "./ChevronRightIcon";
+export * from "./ChevronUpIcon";
+export * from "./ChevronDownIcon";
+export * from "./CalendarIcon";
+export * from "./SquareCheckIcon";
+export * from "./SearchIcon";
+export * from "./CheckIcon";
+export * from "./XIcon";
+export * from "./FolderOpenIcon";
+export * from "./LoaderCircleIcon";
+export * from "./CircleAlertIcon";
+export * from "./CopyIcon";
+export * from "./ListIcon";
+export * from "./EllipsisIcon";
+export * from "./ArrowRightIcon";

package/src/utils/sprinkles.css.ts

@@ -72,6 +72,7 @@ const flexProperties = defineProperties({
     flexGrow: { 0: 0, 1: 1 },
     flexShrink: { 0: 0, 1: 1 },
     display: ["block", "flex", "grid", "inline-flex", "none"],
+    flexWrap: ["wrap", "nowrap", "wrap-reverse"],
     flexDirection: ["row", "row-reverse", "column", "column-reverse"],
     gap: spacing,
   },
@@ -168,13 +169,26 @@ const alignmentProperties = defineProperties({
   conditions: responsiveConditions,
   defaultCondition: "base",
   properties: {
-    alignItems: ["start", "center", "end", "stretch", "baseline"],
-    justifyItems: ["start", "center", "end", "stretch"],
-    justifyContent: ["center", "start", "end", "stretch", "between", "around", "evenly"],
+    alignItems: {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      baseline: "baseline",
+    },
+    justifyContent: {
+      start: "flex-start",
+      center: "center",
+      end: "flex-end",
+      stretch: "stretch",
+      between: "space-between",
+      around: "space-around",
+      evenly: "space-evenly",
+    },
   },
   shorthands: {
     align: ["alignItems"],
-    justify: ["justifyItems", "justifyContent"],
+    justify: ["justifyContent"],
   },
 });
 export const baseSprinkles = createSprinkles(

package/src/DataTable/data-table-column-toggle.tsx

@@ -1,73 +0,0 @@
-import { semanticVars } from "@blenx-dev/theme/contract";
-import { ListIcon } from "@phosphor-icons/react";
-import type { Table } from "@tanstack/react-table";
-import * as styles from "./data-table.css";
-import { Button, Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "../components";
-
-interface DataTableColumnToggleProps<TData> {
-  table: Table<TData>;
-}
-
-export function DataTableColumnToggle<TData>({ table }: DataTableColumnToggleProps<TData>) {
-  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
-
-  if (columns.length === 0) return null;
-
-  const allVisible = columns.every((column) => column.getIsVisible());
-  const someVisible = columns.some((column) => column.getIsVisible());
-
-  return (
-    <Menu>
-      <MenuTrigger render={<Button variant="outline" size="sm" />}>
-        <ListIcon size={16} />
-        <span>Columns</span>
-      </MenuTrigger>
-      <MenuPopup align="end">
-        <MenuItem
-          onClick={() => {
-            for (const column of columns) {
-              column.toggleVisibility(allVisible);
-            }
-          }}
-        >
-          <span className={styles.deselectLabel}>{allVisible ? "Deselect all" : "Select all"}</span>
-          <span className={allVisible ? styles.checkboxChecked : styles.checkboxUnchecked}>
-            {allVisible && <CheckMark />}
-            {!allVisible && someVisible && <div className={styles.partial} />}
-          </span>
-        </MenuItem>
-        <MenuSeparator />
-        {columns.map((column) => {
-          const label = column.columnDef.header?.toString() ?? column.id;
-          const isVisible = column.getIsVisible();
-          return (
-            <MenuItem key={column.id} onClick={() => column.toggleVisibility(!isVisible)}>
-              <span className={styles.itemLabel}>{label}</span>
-              <span className={isVisible ? styles.checkboxChecked : styles.checkboxUnchecked}>
-                {isVisible && <CheckMark />}
-              </span>
-            </MenuItem>
-          );
-        })}
-      </MenuPopup>
-    </Menu>
-  );
-}
-
-function CheckMark() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={semanticVars.interactive.primaryFg}
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <title>Visible</title>
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );
-}

package/src/DataTable/data-table-empty.tsx

@@ -1,27 +0,0 @@
-import { FolderOpenIcon } from "@phosphor-icons/react";
-import * as styles from "./data-table.css";
-
-interface DataTableEmptyProps {
-  message?: string;
-  icon?: React.ReactNode;
-  action?: React.ReactNode;
-}
-
-export function DataTableEmpty({
-  message = "No results found",
-  icon,
-  action,
-}: DataTableEmptyProps) {
-  return (
-    <output aria-label={message} className={styles.emptyContainer}>
-      {icon && <div className={styles.iconWrap}>{icon}</div>}
-      {!icon && (
-        <div className={styles.iconWrap}>
-          <FolderOpenIcon size={48} />
-        </div>
-      )}
-      <p className={styles.message}>{message}</p>
-      {action && <div className={styles.actionWrap}>{action}</div>}
-    </output>
-  );
-}

package/src/DataTable/data-table-error.tsx

@@ -1,25 +0,0 @@
-import { WarningCircleIcon } from "@phosphor-icons/react";
-import * as styles from "./data-table.css";
-import { Button } from "../components";
-
-interface DataTableErrorProps {
-  message?: string;
-  onRetry?: () => void;
-}
-
-export function DataTableError({
-  message = "Something went wrong while loading data",
-  onRetry,
-}: DataTableErrorProps) {
-  return (
-    <div role="alert" aria-label={message} className={styles.errorContainer}>
-      <WarningCircleIcon size={48} />
-      <p className={styles.errorMessage}>{message}</p>
-      {onRetry && (
-        <Button variant="outline" size="sm" onClick={onRetry}>
-          Retry
-        </Button>
-      )}
-    </div>
-  );
-}

package/src/DataTable/data-table-infinite-loader.tsx

@@ -1,73 +0,0 @@
-import { Button, Spinner } from "../components";
-import type { InfiniteScrollConfig } from "./types";
-import { useInfiniteScroll } from "./use-infinite-scroll";
-import * as styles from "./data-table.css";
-
-interface DataTableInfiniteLoaderProps {
-  fetchNextPage: () => void;
-  hasNextPage: boolean;
-  isFetchingNextPage: boolean;
-  isFetching?: boolean;
-  config?: InfiniteScrollConfig;
-}
-
-export function DataTableInfiniteLoader({
-  fetchNextPage,
-  hasNextPage,
-  isFetchingNextPage,
-  isFetching,
-  config,
-}: DataTableInfiniteLoaderProps) {
-  const isAuto = config?.mode === "auto";
-  const loadingText = config?.loadingText ?? "Loading...";
-  const noMoreText = config?.noMoreText ?? "No more results";
-
-  const { sentinelRef } = useInfiniteScroll({
-    hasNextPage,
-    isFetchingNextPage: isFetchingNextPage || Boolean(isFetching),
-    fetchNextPage,
-    rootMargin: config?.rootMargin,
-    threshold: config?.threshold,
-    enabled: isAuto,
-  });
-
-  if (isAuto) {
-    return (
-      <div
-        ref={sentinelRef}
-        aria-label={isFetchingNextPage ? loadingText : noMoreText}
-        className={styles.sentinel}
-      >
-        {isFetchingNextPage && (
-          <div className={styles.loadingInline}>
-            <Spinner />
-            <span className={styles.loaderLoadingText}>{loadingText}</span>
-          </div>
-        )}
-        {!hasNextPage && !isFetchingNextPage && <span className={styles.noMore}>{noMoreText}</span>}
-      </div>
-    );
-  }
-
-  if (!hasNextPage) {
-    return (
-      <div className={styles.center}>
-        <span className={styles.noMore}>{noMoreText}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.center}>
-      <Button
-        variant="outline"
-        onClick={fetchNextPage}
-        disabled={isFetchingNextPage}
-        loading={isFetchingNextPage}
-        aria-label={config?.loadMoreText ?? "Load more"}
-      >
-        {config?.loadMoreText ?? "Load more"}
-      </Button>
-    </div>
-  );
-}