@povio/ui 0.0.5 → 0.0.7

package/dist/components/overlays/Tooltip/TooltipEllipsis.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Tooltip } from "./Tooltip.js";
+const TooltipEllipsis = ({ text, children, isDisabled }) => {
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+  const onContentRef = (ref) => {
+    if (ref) {
+      setIsEllipsisActive(ref.offsetWidth < ref.scrollWidth);
+    }
+  };
+  const content = children(onContentRef);
+  if (isEllipsisActive && !isDisabled) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        text,
+        placement: "bottom",
+        isDisabled,
+        children: content
+      }
+    );
+  }
+  return content;
+};
+export {
+  TooltipEllipsis
+};

package/dist/components/segment/Segment.d.ts

@@ -0,0 +1,4 @@
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { ControlledSegmentProps } from './segment.types';
+export declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/Segment.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useRef, Fragment } from "react";
+import { useToggleButtonGroup } from "react-aria";
+import { ToggleButtonGroup } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { useToggleGroupState } from "react-stately";
+import { FormField } from "../inputs/FormField/FormField.js";
+import { SegmentItem } from "./SegmentItem.js";
+const SegmentBase = ({
+  className,
+  items,
+  error,
+  onChange,
+  value,
+  defaultValue,
+  ...rest
+}) => {
+  const props = {
+    ...rest,
+    defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
+    selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
+  };
+  const buttonGroupRef = useRef(null);
+  const state = useToggleGroupState(props);
+  const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
+  const formFieldProps = {
+    error,
+    label: "",
+    hideLabel: true,
+    isDisabled: props.isDisabled
+  };
+  const onSelectionChange = (keys) => {
+    if (props.selectionMode === "multiple") {
+      onChange?.(Array.from(keys.values()));
+    } else {
+      onChange?.(Array.from(keys.values())[0]);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      className: clsx("relative w-full", className),
+      children: /* @__PURE__ */ jsx(
+        ToggleButtonGroup,
+        {
+          ...props,
+          ...groupProps,
+          ref: buttonGroupRef,
+          onSelectionChange,
+          className: clsx(
+            "group/segment flex w-fit items-center gap-segmented-control-side-segmented-control p-segmented-control-side-segmented-control",
+            "bg-elevation-fill-default-3",
+            "rounded-segmented-control-rounding-segmented-control",
+            className
+          ),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              SegmentItem,
+              {
+                ...item,
+                isDisabled: item.isDisabled || props.isDisabled,
+                isSelected: state.selectedKeys.has(item.id),
+                onPress: () => {
+                  state.toggleKey(item.id);
+                }
+              }
+            ),
+            index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "h-5 w-px rounded-2xl",
+                  !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"
+                ),
+                children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
+              }
+            )
+          ] }, item.id))
+        }
+      )
+    }
+  );
+};
+const Segment = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          SegmentBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SegmentBase, { ...props });
+};
+export {
+  Segment
+};

package/dist/components/segment/SegmentItem.d.ts

@@ -0,0 +1,2 @@
+import { SegmentItem as SegmentItemProps } from './segment.types';
+export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/{src/components/segment/SegmentItem.tsx → dist/components/segment/SegmentItem.js}

@@ -1,19 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import type { FC, SVGProps } from "react";
 import { ToggleButton } from "react-aria-components";
-
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-import type { SegmentItem as SegmentItemProps } from "./segment.types";
-
-export const SegmentItem = ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => {
-  const IconComponent = icon as FC<SVGProps<SVGSVGElement>>;
-
-  return (
-    <ToggleButton
-      {...props}
-      id={id}
-      className={clsx(
+import { Typography } from "../text/Typography/Typography.js";
+const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+  const IconComponent = icon;
+  return /* @__PURE__ */ jsxs(
+    ToggleButton,
+    {
+      ...props,
+      id,
+      className: clsx(
         "flex items-center justify-center gap-1 transition-all duration-200",
         "px-segmented-control-side-segment py-segmented-control-height-segment",
         "rounded-segmented-control-rounding-segment",
@@ -21,21 +17,25 @@ export const SegmentItem = ({ label, icon, id, isDisabled, ...props }: SegmentIt
         "pressed:bg-interactive-subtle-secondary-pressed",
         "selected:text-interactive-subtle-secondary-on-toggled-idle text-interactive-subtle-secondary-on-idle hover:text-interactive-subtle-secondary-on-hover",
         "disabled:selected:text-interactive-subtle-secondary-on-toggled-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled",
-      )}
-      isDisabled={isDisabled}
-    >
-      {icon && <IconComponent className="size-6" />}
-      {label && (
-        <Typography
-          variant={props.isSelected ? "prominent-1" : "default"}
-          size="label-2"
-          as="span"
-          className="overflow-hidden text-ellipsis text-center"
-        >
-          {label}
-        </Typography>
-      )}
-    </ToggleButton>
+        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled"
+      ),
+      isDisabled,
+      children: [
+        icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }),
+        label && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: props.isSelected ? "prominent-1" : "default",
+            size: "label-2",
+            as: "span",
+            className: "overflow-hidden text-ellipsis text-center",
+            children: label
+          }
+        )
+      ]
+    }
   );
 };
+export {
+  SegmentItem
+};

package/dist/components/segment/segment.types.d.ts

@@ -0,0 +1,34 @@
+import { FC, ReactElement, Ref, SVGProps } from 'react';
+import { Key, ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { ControlProps } from '../inputs/shared/form.types';
+export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps {
+    id: TKey;
+    label?: string;
+    icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+}
+export interface SingleSegmentProps<TKey extends Key = Key> {
+    selectionMode?: "single";
+    value?: TKey | undefined | null;
+    onChange?: (value: TKey | null) => void;
+    defaultValue?: TKey | null;
+}
+export interface MultiSegmentProps<TKey extends Key = Key> {
+    selectionMode: "multiple";
+    value?: TKey[];
+    onChange?: (value: TKey[]) => void;
+    defaultValue?: TKey[] | null;
+}
+export type GroupedSegmentProps<TKey extends Key = Key> = MultiSegmentProps<TKey> | SingleSegmentProps<TKey>;
+export type GroupedSegmentControlProps<TFieldValues extends FieldValues, TKey extends Key = Key> = ({
+    selectionMode: MultiSegmentProps["selectionMode"];
+} & ControlProps<MultiSegmentProps<TKey>, TFieldValues>) | ({
+    selectionMode?: SingleSegmentProps["selectionMode"];
+} & ControlProps<SingleSegmentProps<TKey>, TFieldValues>);
+export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps, "children" | "onSelectionChange" | "selectedKeys" | "defaultSelectedKeys"> & {
+    ref?: Ref<HTMLElement>;
+    items: SegmentItem<TKey>[];
+    className?: string;
+    error?: string;
+} & GroupedSegmentProps<TKey>;
+export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

package/dist/components/shared/pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+import { PaginationListProps } from './PaginationList';
+export interface PaginationProps extends Omit<PaginationListProps, "totalPages"> {
+    totalItems: number;
+    pageSize: number;
+    totalPages?: number;
+    className?: string;
+    onPageSizeChange?: (pageSize: number) => void;
+}
+export declare const Pagination: ({ size, variant, color, page, totalItems, totalPages, pageSize, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange, onPageSizeChange, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/pagination/Pagination.js

@@ -0,0 +1,75 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { NumberInput } from "../../inputs/Input/NumberInput/NumberInput.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { ns } from "../../../config/i18n.js";
+import { PaginationList } from "./PaginationList.js";
+const Pagination = ({
+  size = "s",
+  variant = "subtle",
+  color = "secondary",
+  page,
+  totalItems,
+  totalPages,
+  pageSize,
+  hideText = true,
+  hideFirstLast = true,
+  hidePrevNext = false,
+  hideNumbers = false,
+  className,
+  onPageChange,
+  onPageSizeChange
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      id: "pagination",
+      className: clsx("flex items-center gap-2", className),
+      children: [
+        totalItems > pageSize && /* @__PURE__ */ jsx(
+          PaginationList,
+          {
+            page,
+            size,
+            color,
+            variant,
+            hideText,
+            hideFirstLast,
+            hidePrevNext,
+            hideNumbers,
+            totalPages: totalPages ?? Math.ceil(totalItems / pageSize),
+            onPageChange
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "default",
+              size: "label-2",
+              as: "span",
+              className: "whitespace-nowrap text-text-default-1",
+              children: t(($) => $.ui.pagination.resultsPerPage)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              value: pageSize,
+              onChange: (value) => onPageSizeChange?.(Number(value)),
+              label: t(($) => $.ui.pagination.resultsPerPage),
+              hideLabel: true,
+              className: "w-min",
+              inputClassName: "min-w-12 !px-3 !py-0-5"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Pagination
+};

package/dist/components/shared/pagination/PaginationList.d.ts

@@ -0,0 +1,15 @@
+import { ButtonProps } from '../../buttons/Button/Button';
+export interface PaginationListProps {
+    page: number;
+    totalPages: number;
+    hideText?: boolean;
+    hideFirstLast?: boolean;
+    hidePrevNext?: boolean;
+    hideNumbers?: boolean;
+    size?: ButtonProps["size"];
+    color?: ButtonProps["color"];
+    variant?: ButtonProps["variant"];
+    className?: string;
+    onPageChange?: (page: number) => void;
+}
+export declare const PaginationList: ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange, }: PaginationListProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/shared/pagination/PaginationList.js

@@ -0,0 +1,145 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronLeftIcon } from "../../../assets/icons/ChevronLeft.js";
+import { ChevronRightIcon } from "../../../assets/icons/ChevronRight.js";
+import { ChevronsLeftIcon } from "../../../assets/icons/ChevronsLeft.js";
+import { ChevronsRightIcon } from "../../../assets/icons/ChevronsRight.js";
+import { Button } from "../../buttons/Button/Button.js";
+import { ns } from "../../../config/i18n.js";
+import { minWidth } from "./minWidth.cva.js";
+const PaginationList = ({
+  page,
+  totalPages,
+  size,
+  color,
+  variant,
+  hideText,
+  hideFirstLast,
+  hidePrevNext,
+  hideNumbers,
+  className,
+  onPageChange
+}) => {
+  const { t } = useTranslation(ns);
+  const isPrevDisabled = page <= 1;
+  const isNextDisabled = page >= totalPages;
+  const renderPageNumbers = useMemo(() => {
+    const pagesToShow = [];
+    pagesToShow.push(1);
+    if (page > 3) {
+      pagesToShow.push("ellipsis");
+    }
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
+      pagesToShow.push(i);
+    }
+    if (page < totalPages - 2) {
+      pagesToShow.push("ellipsis");
+    }
+    if (totalPages > 1 && !pagesToShow.includes(totalPages)) {
+      pagesToShow.push(totalPages);
+    }
+    return pagesToShow.map((p, index) => {
+      if (p === "ellipsis") {
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant,
+            color,
+            size,
+            width: "fill",
+            className: clsx(minWidth({ size })),
+            children: "..."
+          },
+          `ellipsis-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          width: "hug",
+          size,
+          variant,
+          color,
+          "data-selected": p === page ? true : void 0,
+          className: clsx(p.toString().length <= 2 && minWidth({ size })),
+          onPress: () => onPageChange?.(p),
+          children: p.toString()
+        },
+        `page-${p}`
+      );
+    });
+  }, [page, color, size, variant, totalPages, onPageChange]);
+  if (totalPages <= 1) {
+    return null;
+  }
+  const onNext = () => {
+    if (!isNextDisabled) {
+      onPageChange?.(page + 1);
+    }
+  };
+  const onPrevious = () => {
+    if (!isPrevDisabled) {
+      onPageChange?.(page - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: clsx("flex items-center gap-pagination-button-to-button", className), children: [
+    !hideFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => onPageChange?.(1),
+        isDisabled: isPrevDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronsLeftIcon,
+        children: t(($) => $.ui.pagination.firstBtn)
+      }
+    ),
+    !hidePrevNext && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onPrevious,
+        isDisabled: isPrevDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronLeftIcon,
+        children: t(($) => $.ui.pagination.backBtn)
+      }
+    ),
+    !hideNumbers && renderPageNumbers,
+    !hidePrevNext && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onNext,
+        isDisabled: isNextDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronRightIcon,
+        children: t(($) => $.ui.pagination.nextBtn)
+      }
+    ),
+    !hideFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => onPageChange?.(totalPages),
+        isDisabled: isNextDisabled,
+        size,
+        color,
+        variant,
+        iconOnly: hideText,
+        icon: ChevronsRightIcon,
+        children: t(($) => $.ui.pagination.lastBtn)
+      }
+    )
+  ] });
+};
+export {
+  PaginationList
+};

package/dist/components/shared/pagination/minWidth.cva.d.ts

@@ -0,0 +1,3 @@
+export declare const minWidth: (props?: ({
+    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/{src/components/shared/pagination/minWidth.cva.ts → dist/components/shared/pagination/minWidth.cva.js}

@@ -1,13 +1,15 @@
 import { cva } from "class-variance-authority";
-
-export const minWidth = cva("", {
+const minWidth = cva("", {
   variants: {
     size: {
       xxs: ["min-w-button-width-min-width-xxs"],
       xs: ["min-w-button-width-min-width-xs"],
       s: ["min-w-button-width-min-width-s"],
       m: ["min-w-button-width-min-width-m"],
-      l: ["min-w-button-width-min-width-l"],
-    },
-  },
+      l: ["min-w-button-width-min-width-l"]
+    }
+  }
 });
+export {
+  minWidth
+};

package/dist/components/status/Alert/Alert.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode, SVGProps } from 'react';
+import { AlertVariantProps } from './alert.cva';
+export interface AlertProps extends AlertVariantProps {
+    text: string;
+    isLoading?: boolean;
+    icon?: FC<SVGProps<SVGSVGElement>>;
+    rightContent?: ReactNode;
+    hasSeparator?: boolean;
+    className?: string;
+}
+export declare const Alert: ({ variant, color, text, isLoading, rightContent, hasSeparator, icon: Icon, className, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/status/Alert/Alert.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { alert } from "./alert.cva.js";
+import { Loader } from "../Loader/Loader.js";
+import { statusIcon, statusSeparator } from "../shared/status.cva.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const Alert = ({
+  variant,
+  color,
+  text,
+  isLoading = false,
+  rightContent,
+  hasSeparator,
+  icon: Icon,
+  className
+}) => {
+  const uiStyle = UIStyle.useConfig();
+  const alertCva = uiStyle?.alert?.cva ?? alert;
+  const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
+  const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+  return /* @__PURE__ */ jsx("div", { className: alertCva({ variant, color, className }), children: /* @__PURE__ */ jsxs("div", { className: "flex w-auto flex-col items-center md:flex-row", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-alert-gap-icon-to-text px-alert-side-default py-alert-height-content", children: [
+      isLoading && /* @__PURE__ */ jsx(
+        Loader,
+        {
+          size: "default",
+          className: "shrink-0"
+        }
+      ),
+      !isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({ variant, color }) }),
+      /* @__PURE__ */ jsx(Typography, { size: "label-2", children: text })
+    ] }),
+    !!rightContent && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasSeparator && /* @__PURE__ */ jsx("div", { className: separatorCva({ variant, color }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-alert-gap-action px-alert-side-default py-alert-height-actions-mobile md:w-auto md:justify-center md:py-alert-height-actions-desktop", children: rightContent })
+    ] })
+  ] }) });
+};
+export {
+  Alert
+};

package/dist/components/status/Alert/alert.cva.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const alert: (props?: ({
+    variant?: "contained" | "outlined" | null | undefined;
+    color?: "success" | "warning" | "error" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertVariantProps extends VariantProps<typeof alert> {
+}

package/dist/components/status/Alert/alert.cva.js

@@ -0,0 +1,64 @@
+import { cva } from "class-variance-authority";
+const alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
+  variants: {
+    variant: {
+      outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+      contained: "text-text-inverted-1"
+    },
+    color: {
+      neutral: "",
+      success: "",
+      warning: "",
+      error: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "outlined",
+      color: "neutral",
+      className: "border-elevation-outline-default-1"
+    },
+    {
+      variant: "outlined",
+      color: "success",
+      className: "border-elevation-outline-success-1"
+    },
+    {
+      variant: "outlined",
+      color: "warning",
+      className: "border-elevation-outline-warning-1"
+    },
+    {
+      variant: "outlined",
+      color: "error",
+      className: "border-elevation-outline-error-1"
+    },
+    {
+      variant: "contained",
+      color: "neutral",
+      className: "bg-elevation-fill-inverted-1"
+    },
+    {
+      variant: "contained",
+      color: "success",
+      className: "bg-elevation-fill-success-1"
+    },
+    {
+      variant: "contained",
+      color: "warning",
+      className: "bg-elevation-fill-warning-1"
+    },
+    {
+      variant: "contained",
+      color: "error",
+      className: "bg-elevation-fill-error-1"
+    }
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    color: "neutral"
+  }
+});
+export {
+  alert
+};

package/dist/components/status/Loader/Loader.d.ts

@@ -0,0 +1,5 @@
+import { SVGProps } from 'react';
+import { LoaderVariantProps } from './loader.cva';
+export interface LoaderProps extends LoaderVariantProps, SVGProps<SVGSVGElement> {
+}
+export declare const Loader: ({ size, className, ...props }: Omit<LoaderProps, "color">) => import("react/jsx-runtime").JSX.Element;