@cognitiv/components-web 1.0.4 → 1.1.0

package/dist/components/pagination/pagination.js

@@ -0,0 +1,230 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { Button } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { IconChevronLeft, IconChevronRight } from '../icons.js';
+import { paginationVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const PaginationContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationRoot = ({
+  children,
+  className,
+  size,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => paginationVariants({
+    size
+  }), [size]);
+  return /*#__PURE__*/jsx(PaginationContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx("nav", {
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      role: "navigation",
+      ...props,
+      className: composeSlotClassName(slots.base, className),
+      children: children
+    })
+  });
+};
+PaginationRoot.displayName = "Cognitiv.Pagination";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Summary
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationSummary = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.summary, className),
+    "data-slot": "pagination-summary",
+    ...props,
+    children: children
+  });
+};
+PaginationSummary.displayName = "Cognitiv.Pagination.Summary";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  return /*#__PURE__*/jsx("ul", {
+    className: composeSlotClassName(slots?.content, className),
+    "data-slot": "pagination-content",
+    ...props,
+    children: children
+  });
+};
+PaginationContent.displayName = "Cognitiv.Pagination.Content";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Item
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  return /*#__PURE__*/jsx("li", {
+    className: composeSlotClassName(slots?.item, className),
+    "data-slot": "pagination-item",
+    ...props,
+    children: children
+  });
+};
+PaginationItem.displayName = "Cognitiv.Pagination.Item";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Link
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationLink = ({
+  children,
+  className,
+  isActive,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  return /*#__PURE__*/jsx(Button, {
+    "aria-current": isActive ? "page" : undefined,
+    className: composeTwRenderProps(className, slots?.link()),
+    "data-active": isActive ? "true" : undefined,
+    "data-slot": "pagination-link",
+    ...props,
+    children: children
+  });
+};
+PaginationLink.displayName = "Cognitiv.Pagination.Link";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Previous
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationPrevious = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  const baseClass = `${slots?.link() ?? ""} pagination__link--nav`.trim();
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, baseClass),
+    "data-slot": "pagination-previous",
+    ...props,
+    children: children
+  });
+};
+PaginationPrevious.displayName = "Cognitiv.Pagination.Previous";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Previous Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationPreviousIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: className,
+    "data-slot": "pagination-previous-icon",
+    ...props,
+    children: children ?? /*#__PURE__*/jsx(IconChevronLeft, {})
+  });
+};
+PaginationPreviousIcon.displayName = "Cognitiv.Pagination.PreviousIcon";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Next
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationNext = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  const baseClass = `${slots?.link() ?? ""} pagination__link--nav`.trim();
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, baseClass),
+    "data-slot": "pagination-next",
+    ...props,
+    children: children
+  });
+};
+PaginationNext.displayName = "Cognitiv.Pagination.Next";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Next Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationNextIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: className,
+    "data-slot": "pagination-next-icon",
+    ...props,
+    children: children ?? /*#__PURE__*/jsx(IconChevronRight, {})
+  });
+};
+PaginationNextIcon.displayName = "Cognitiv.Pagination.NextIcon";
+
+/* -------------------------------------------------------------------------------------------------
+ * Pagination Ellipsis
+ * -----------------------------------------------------------------------------------------------*/
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PaginationContext);
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.ellipsis, className),
+    "data-slot": "pagination-ellipsis",
+    ...props,
+    children: "\u2026"
+  });
+};
+PaginationEllipsis.displayName = "Cognitiv.Pagination.Ellipsis";
+
+export { PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationNextIcon, PaginationPrevious, PaginationPreviousIcon, PaginationRoot, PaginationSummary };

package/dist/components/pagination/styles.d.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    ellipsis: string;
+    item: string;
+    link: string;
+    summary: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    ellipsis: string;
+    item: string;
+    link: string;
+    summary: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    ellipsis: string;
+    item: string;
+    link: string;
+    summary: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PaginationVariants = VariantProps<typeof paginationVariants>;

package/dist/components/pagination/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const paginationVariants = tv({
+  defaultVariants: {
+    size: "md"
+  },
+  slots: {
+    base: "pagination",
+    content: "pagination__content",
+    ellipsis: "pagination__ellipsis",
+    item: "pagination__item",
+    link: "pagination__link",
+    summary: "pagination__summary"
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "pagination--lg"
+      },
+      md: {
+        base: "pagination--md"
+      },
+      sm: {
+        base: "pagination--sm"
+      }
+    }
+  }
+});
+
+export { paginationVariants };

package/dist/components/popover/index.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "react";
+import { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from "./popover";
+export declare const Popover: (({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").DialogTrigger>) => import("react/jsx-runtime").JSX.Element) & {
+    Arrow: ({ children, className, ...props }: import("./popover").PopoverArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...props }: import("./popover").PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+    Dialog: ({ children, className, ...props }: import("./popover").PopoverDialogProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ children, className, ...props }: import("./popover").PopoverHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, ...props }: import("react").ComponentPropsWithRef<typeof import("react-aria-components").DialogTrigger>) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./popover").PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Popover = {
+    Props: ComponentProps<typeof PopoverRoot>;
+    RootProps: ComponentProps<typeof PopoverRoot>;
+    TriggerProps: ComponentProps<typeof PopoverTrigger>;
+    DialogProps: ComponentProps<typeof PopoverDialog>;
+    ArrowProps: ComponentProps<typeof PopoverArrow>;
+    ContentProps: ComponentProps<typeof PopoverContent>;
+    HeadingProps: ComponentProps<typeof PopoverHeading>;
+};
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };
+export type { PopoverRootProps, PopoverRootProps as PopoverProps, PopoverTriggerProps, PopoverDialogProps, PopoverArrowProps, PopoverContentProps, PopoverHeadingProps, } from "./popover";
+export { popoverVariants } from "./styles";
+export type { PopoverVariants } from "./styles";

package/dist/components/popover/index.js

@@ -0,0 +1,17 @@
+"use strict";
+import { PopoverRoot, PopoverTrigger, PopoverHeading, PopoverDialog, PopoverContent, PopoverArrow } from './popover.js';
+export { popoverVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Popover = Object.assign(PopoverRoot, {
+  Arrow: PopoverArrow,
+  Content: PopoverContent,
+  Dialog: PopoverDialog,
+  Heading: PopoverHeading,
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger
+});
+
+export { Popover, PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,24 @@
+import type { PopoverVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { Dialog as DialogPrimitive, Heading as HeadingPrimitive, OverlayArrow, Popover as PopoverPrimitive, DialogTrigger as PopoverTriggerPrimitive } from "react-aria-components";
+type PopoverRootProps = ComponentPropsWithRef<typeof PopoverTriggerPrimitive>;
+declare const PopoverRoot: ({ children, ...props }: ComponentPropsWithRef<typeof PopoverTriggerPrimitive>) => import("react/jsx-runtime").JSX.Element;
+interface PopoverContentProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children">, PopoverVariants {
+    children: React.ReactNode;
+}
+declare const PopoverContent: ({ children, className, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverArrowProps = Omit<ComponentPropsWithRef<typeof OverlayArrow>, "children"> & {
+    children?: React.ReactNode;
+};
+declare const PopoverArrow: ({ children, className, ...props }: PopoverArrowProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverDialogProps = Omit<ComponentPropsWithRef<typeof DialogPrimitive>, "children"> & {
+    children: React.ReactNode;
+};
+declare const PopoverDialog: ({ children, className, ...props }: PopoverDialogProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverTriggerProps = ComponentPropsWithRef<"div">;
+declare const PopoverTrigger: ({ children, className, ...props }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+type PopoverHeadingProps = ComponentPropsWithRef<typeof HeadingPrimitive> & {};
+declare const PopoverHeading: ({ children, className, ...props }: PopoverHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export { PopoverRoot, PopoverTrigger, PopoverDialog, PopoverArrow, PopoverContent, PopoverHeading };
+export type { PopoverRootProps, PopoverTriggerProps, PopoverDialogProps, PopoverArrowProps, PopoverContentProps, PopoverHeadingProps, };

package/dist/components/popover/popover.js

@@ -0,0 +1,153 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { DialogTrigger, Pressable, Heading, Dialog, Popover, OverlayArrow } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { popoverVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const PopoverContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverRoot = ({
+  children,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => popoverVariants(), []);
+  return /*#__PURE__*/jsx(PopoverContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(DialogTrigger, {
+      "data-slot": "popover-root",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Content
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(PopoverContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(SurfaceContext, {
+      value: {
+        variant: "default"
+      },
+      children: /*#__PURE__*/jsx(Popover, {
+        ...props,
+        className: composeTwRenderProps(className, slots?.base()),
+        children: children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Arrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverArrow = ({
+  children,
+  className,
+  ...props
+}) => {
+  const defaultArrow = /*#__PURE__*/jsx("svg", {
+    "data-slot": "popover-overlay-arrow",
+    height: 12,
+    viewBox: "0 0 12 12",
+    width: 12,
+    children: /*#__PURE__*/jsx("path", {
+      d: "M0 0 Q6 9 12 0"
+    })
+  });
+  const arrow = /*#__PURE__*/React__default.isValidElement(children) ? /*#__PURE__*/React__default.cloneElement(children, {
+    "data-slot": "popover-overlay-arrow"
+  }) : defaultArrow;
+  return /*#__PURE__*/jsx(OverlayArrow, {
+    "data-slot": "popover-overlay-arrow-group",
+    ...props,
+    className: className,
+    children: arrow
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Dialog
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverDialog = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Dialog, {
+    "data-slot": "popover-dialog",
+    ...props,
+    className: composeSlotClassName(slots?.dialog, className),
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Pressable, {
+    children: /*#__PURE__*/jsx("div", {
+      className: composeSlotClassName(slots?.trigger, className),
+      "data-slot": "popover-trigger",
+      role: "button",
+      ...props,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Popover Heading
+ * -----------------------------------------------------------------------------------------------*/
+
+const PopoverHeading = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Heading, {
+    slot: "title",
+    ...props,
+    className: composeSlotClassName(slots?.heading, className),
+    children: children
+  });
+};
+
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger };

package/dist/components/popover/styles.d.ts

@@ -0,0 +1,45 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            heading?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            dialog?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            heading?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            dialog?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    dialog: string;
+    heading: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            heading?: import("tailwind-merge").ClassNameValue;
+            trigger?: import("tailwind-merge").ClassNameValue;
+            dialog?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    dialog: string;
+    heading: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    dialog: string;
+    heading: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type PopoverVariants = VariantProps<typeof popoverVariants>;

package/dist/components/popover/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const popoverVariants = tv({
+  slots: {
+    base: "popover",
+    dialog: "popover__dialog",
+    heading: "popover__heading",
+    trigger: "popover__trigger"
+  }
+});
+
+export { popoverVariants };

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps } from "react";
+import { ProgressBarFill, ProgressBarOutput, ProgressBarRoot, ProgressBarTrack } from "./progress-bar";
+export declare const ProgressBar: {
+    ({ children, className, color, size, ...props }: import("./progress-bar").ProgressBarRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Fill: {
+        ({ className, style, ...props }: import("./progress-bar").ProgressBarFillProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Output: {
+        ({ children, className, ...props }: import("./progress-bar").ProgressBarOutputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Root: {
+        ({ children, className, color, size, ...props }: import("./progress-bar").ProgressBarRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Track: {
+        ({ children, className, ...props }: import("./progress-bar").ProgressBarTrackProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type ProgressBar = {
+    Props: ComponentProps<typeof ProgressBarRoot>;
+    RootProps: ComponentProps<typeof ProgressBarRoot>;
+    OutputProps: ComponentProps<typeof ProgressBarOutput>;
+    TrackProps: ComponentProps<typeof ProgressBarTrack>;
+    FillProps: ComponentProps<typeof ProgressBarFill>;
+};
+export { ProgressBarRoot, ProgressBarOutput, ProgressBarTrack, ProgressBarFill };
+export type { ProgressBarRootProps, ProgressBarRootProps as ProgressBarProps, ProgressBarOutputProps, ProgressBarTrackProps, ProgressBarFillProps, } from "./progress-bar";
+export { progressBarVariants } from "./styles";
+export type { ProgressBarVariants } from "./styles";

package/dist/components/progress-bar/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { ProgressBarRoot, ProgressBarTrack, ProgressBarOutput, ProgressBarFill } from './progress-bar.js';
+export { progressBarVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ProgressBar = Object.assign(ProgressBarRoot, {
+  Fill: ProgressBarFill,
+  Output: ProgressBarOutput,
+  Root: ProgressBarRoot,
+  Track: ProgressBarTrack
+});
+
+export { ProgressBar, ProgressBarFill, ProgressBarOutput, ProgressBarRoot, ProgressBarTrack };

package/dist/components/progress-bar/progress-bar.d.ts

@@ -0,0 +1,29 @@
+import type { ProgressBarVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { ProgressBar as ProgressBarPrimitive } from "react-aria-components";
+interface ProgressBarRootProps extends ComponentPropsWithRef<typeof ProgressBarPrimitive>, ProgressBarVariants {
+}
+declare const ProgressBarRoot: {
+    ({ children, className, color, size, ...props }: ProgressBarRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ProgressBarOutputProps extends ComponentPropsWithRef<"span"> {
+}
+declare const ProgressBarOutput: {
+    ({ children, className, ...props }: ProgressBarOutputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ProgressBarTrackProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ProgressBarTrack: {
+    ({ children, className, ...props }: ProgressBarTrackProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+interface ProgressBarFillProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ProgressBarFill: {
+    ({ className, style, ...props }: ProgressBarFillProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ProgressBarRoot, ProgressBarOutput, ProgressBarTrack, ProgressBarFill };
+export type { ProgressBarRootProps, ProgressBarOutputProps, ProgressBarTrackProps, ProgressBarFillProps, };