@festo-ui/react 9.0.0-dev.717 → 9.0.0-dev.719

package/dist/components/accordion/Accordion.css

@@ -0,0 +1,4 @@
+.fr-accordion {
+  border-bottom: 1px solid var(--fwe-gray-100);
+}
+

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,10 @@
+import './Accordion.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface AccordionProps extends ComponentPropsWithoutRef<'div'> {
+    showMore?: string;
+    showLess?: string;
+    keepItemsOpen?: boolean;
+    transparent?: boolean;
+    highlighted?: boolean;
+}
+export declare const Accordion: (props: AccordionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import "./Accordion.css";
+import classnames from "classnames";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { AccordionContext } from "./AccordionContext.js";
+let nextId = 0;
+const Accordion = /*#__PURE__*/ forwardRef(({ children, showMore = 'Show more', showLess = 'Show less', keepItemsOpen = true, className, transparent = false, highlighted = true, ...props }, ref)=>{
+    const componentId = useRef(`accordion-${++nextId}`);
+    const [expanded, setExpanded] = useState(false);
+    const handleChange = useCallback((id, newExpanded)=>{
+        setExpanded(newExpanded ? id : false);
+    }, []);
+    const contextValue = useMemo(()=>({
+            showMore,
+            showLess,
+            parentId: componentId.current,
+            keepItemsOpen,
+            expanded,
+            toggle: handleChange,
+            highlighted
+        }), [
+        expanded,
+        handleChange,
+        keepItemsOpen,
+        showLess,
+        showMore,
+        highlighted
+    ]);
+    return /*#__PURE__*/ jsx(AccordionContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: classnames('fr-accordion', {
+                'fwe-bg-white': !transparent
+            }, className),
+            ...props,
+            children: children
+        })
+    });
+});
+export { Accordion };

package/dist/components/accordion/AccordionContext.d.ts

@@ -0,0 +1,11 @@
+interface ContextProps {
+    showMore: string;
+    showLess: string;
+    parentId: string;
+    keepItemsOpen: boolean;
+    expanded: boolean | string;
+    toggle: (id: string, expanded: boolean) => void;
+    highlighted: boolean;
+}
+export declare const AccordionContext: import("react").Context<Partial<ContextProps>>;
+export {};

package/dist/components/accordion/AccordionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const AccordionContext = /*#__PURE__*/ createContext({});
+export { AccordionContext };

package/dist/components/accordion/accordion-header/AccordionHeader.css

@@ -0,0 +1,11 @@
+.fr-accordion-header {
+  height: 48px;
+  font-size: var(--fwe-font-size-md);
+  font-weight: var(--fwe-font-weight-bold);
+  color: var(--fwe-text);
+  border-bottom: 1px solid var(--fwe-gray-100);
+  align-items: center;
+  padding: 0 16px 0 24px;
+  display: flex;
+}
+

package/dist/components/accordion/accordion-header/AccordionHeader.d.ts

@@ -0,0 +1,2 @@
+import './AccordionHeader.scss';
+export declare const AccordionHeader: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/accordion/accordion-header/AccordionHeader.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import "./AccordionHeader.css";
+import classnames from "classnames";
+import { forwardRef } from "react";
+const AccordionHeader = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('fr-accordion-header', className),
+        ...props,
+        children: children
+    }));
+export { AccordionHeader };

package/dist/components/accordion/accordion-item/AccordionItem.css

@@ -0,0 +1,64 @@
+.fr-accordion-item {
+  border-top: 1px solid var(--fwe-gray-100);
+  border-bottom: 1px solid var(--fwe-gray-100);
+  padding: 0 16px 0 24px;
+  position: relative;
+}
+
+.fr-accordion-item-link {
+  color: var(--fwe-caerul);
+  font-size: var(--fwe-font-size-md);
+  pointer-events: none;
+  display: none;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+}
+
+.fr-accordion-item.fr-accordion-item--highlighted:before {
+  content: "";
+  background-color: var(--fwe-caerul);
+  width: 4px;
+  height: 0;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.fr-accordion-item:after {
+  pointer-events: none;
+  content: "";
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xNiAyMi04LjcwNy04LjcwNyAxLjQxNC0xLjQxNEwxNiAxOS4xNzJsNy4yOTMtNy4yOTMgMS40MTQgMS40MTRMMTYgMjJ6IiAvPjwvc3ZnPg==);
+  width: 32px;
+  height: 32px;
+  transition: transform .2s;
+  position: absolute;
+  top: 21px;
+  right: 16px;
+}
+
+.fr-accordion-item--expanded .fr-accordion-item-header {
+  font-weight: var(--fwe-font-weight-bold);
+}
+
+.fr-accordion-item--expanded .fr-accordion-item-body {
+  height: auto;
+}
+
+.fr-accordion-item--expanded:after {
+  transform: rotate(-180deg);
+}
+
+.fr-accordion-item--expanded.fr-accordion-item--highlighted:before {
+  height: 100%;
+}
+
+.fr-accordion-item--collapsed .fr-accordion-item-body {
+  height: 0;
+}
+
+.fr-accordion-item--collapsed .fr-accordion-item-header {
+  font-weight: var(--fwe-font-weight-normal);
+}
+

package/dist/components/accordion/accordion-item/AccordionItem.d.ts

@@ -0,0 +1,8 @@
+import './AccordionItem.scss';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+}
+export declare const AccordionItem: (props: AccordionItemProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/accordion/accordion-item/AccordionItem.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./AccordionItem.css";
+import classnames from "classnames";
+import { forwardRef, useCallback, useContext, useMemo, useRef } from "react";
+import { useControlled } from "../../../utils/useControlled.js";
+import { AccordionContext } from "../AccordionContext.js";
+import { AccordionItemContext } from "./AccordionItemContext.js";
+let nextId = 0;
+const AccordionItem = /*#__PURE__*/ forwardRef(({ expanded: expandedProp, defaultExpanded = false, children, onChange, className, ...props }, ref)=>{
+    const { showLess, showMore, parentId, keepItemsOpen, expanded: expandedContext, toggle: accordionToggle, highlighted } = useContext(AccordionContext);
+    const componentId = useRef(`accordion-item-${++nextId}`);
+    const id = `${parentId}-${componentId.current}`;
+    const controlledExpanded = keepItemsOpen ? expandedProp : expandedContext === id;
+    const [expanded, setExpanded] = useControlled({
+        controlled: controlledExpanded,
+        default: defaultExpanded
+    });
+    const linkText = expanded ? showLess : showMore;
+    const handleChange = useCallback((event)=>{
+        if (onChange) onChange(event, !expanded);
+        if (!keepItemsOpen) accordionToggle?.(id, !expanded);
+        setExpanded(!expanded);
+    }, [
+        accordionToggle,
+        expanded,
+        id,
+        keepItemsOpen,
+        onChange,
+        setExpanded
+    ]);
+    const contextValue = useMemo(()=>({
+            expanded,
+            toggle: handleChange,
+            id
+        }), [
+        expanded,
+        handleChange,
+        id
+    ]);
+    return /*#__PURE__*/ jsx(AccordionItemContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsxs("div", {
+            ref: ref,
+            className: classnames('fr-accordion-item', {
+                'fr-accordion-item--collapsed': !expanded,
+                'fr-accordion-item--expanded': expanded,
+                'fr-accordion-item--highlighted': expanded && highlighted
+            }, className),
+            ...props,
+            children: [
+                children,
+                /*#__PURE__*/ jsx("div", {
+                    className: "fr-accordion-item-link",
+                    children: linkText
+                })
+            ]
+        })
+    });
+});
+export { AccordionItem };

package/dist/components/accordion/accordion-item/AccordionItemContext.d.ts

@@ -0,0 +1,7 @@
+interface ContextProps {
+    expanded: boolean;
+    toggle: (event: React.SyntheticEvent) => void;
+    id: string;
+}
+export declare const AccordionItemContext: import("react").Context<Partial<ContextProps>>;
+export {};

package/dist/components/accordion/accordion-item/AccordionItemContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const AccordionItemContext = /*#__PURE__*/ createContext({});
+export { AccordionItemContext };

package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.css

@@ -0,0 +1,76 @@
+.fr-accordion-item-body {
+  height: 0;
+  transition: height .3s cubic-bezier(.4, 0, .2, 1);
+  overflow: hidden;
+}
+
+.fr-accordion-item-body > :first-child:not(.fr-accordion-item-body-spacer-bottom):not(.fr-accordion) {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
+
+.fr-accordion-item-body > :not(.fr-accordion) {
+  margin-right: 0;
+}
+
+.fr-accordion-item-body-content {
+  margin-right: 64px;
+}
+
+.fr-accordion-item-body-spacer-bottom {
+  width: 0;
+  height: 0;
+  margin-top: 24px;
+}
+
+.fr-accordion-item-body .fr-accordion {
+  margin-top: 64px;
+  margin-bottom: 24px;
+}
+
+.fr-accordion-item-body .fr-accordion-item-link {
+  display: block;
+  top: 8px;
+}
+
+.fr-accordion-item-body .fr-accordion-item-header {
+  padding-top: 32px;
+  padding-right: 32px;
+}
+
+.fr-accordion-item-body .fr-accordion-item:after {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxNnYxNkgweiIvPjxwYXRoIGZpbGw9IiMwMDkxREMiIGQ9Ik04IDEwLjcwNyAzLjY0NiA2LjM1NGwuNzA4LS43MDhMOCA5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4TDggMTAuNzA3eiIvPjwvc3ZnPg==);
+  width: 16px;
+  height: 16px;
+  top: 12px;
+  right: 4px;
+}
+
+.fr-accordion-item-body .fr-accordion-item--expanded:before {
+  background-color: #0000;
+}
+
+@media (width >= 600px) {
+  .fr-accordion-item-body > :not(.fng-accordion) {
+    margin-right: 64px;
+  }
+
+  .fr-accordion-item-body .fr-accordion-item-header {
+    padding-top: 24px;
+    padding-right: 168px;
+  }
+
+  .fr-accordion-item-body .fr-accordion-item-link {
+    font-size: var(--fwe-font-size-base);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 128px;
+    top: 24px;
+    overflow: hidden;
+  }
+
+  .fr-accordion-item-body .fr-accordion-item:after {
+    top: 30px;
+  }
+}
+

package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.d.ts

@@ -0,0 +1,2 @@
+import './AccordionItemBody.scss';
+export declare const AccordionItemBody: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/accordion/accordion-item/accordion-item-body/AccordionItemBody.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./AccordionItemBody.css";
+import classnames from "classnames";
+import { forwardRef, useContext, useRef } from "react";
+import { Transition } from "react-transition-group";
+import { useForkRef } from "../../../../utils/useForkRef.js";
+import { AccordionItemContext } from "../AccordionItemContext.js";
+const AccordionItemBody = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>{
+    const { expanded, id } = useContext(AccordionItemContext);
+    const innerRef = useRef(null);
+    const element = innerRef.current;
+    const combinedRef = useForkRef(ref, innerRef);
+    const initialHeight = useRef(expanded ? 'auto' : 0);
+    const handleEntering = ()=>{
+        if (element) {
+            const itemHeight = element.scrollHeight;
+            element.style.height = `${itemHeight}px`;
+        }
+    };
+    const handleEntered = ()=>{
+        if (element) element.style.height = 'auto';
+    };
+    const handleExit = ()=>{
+        if (element) {
+            const itemHeight = element.scrollHeight;
+            element.style.height = `${itemHeight}px`;
+        }
+    };
+    const handleExiting = ()=>{
+        setTimeout(()=>{
+            if (element) element.style.height = '0px';
+        });
+    };
+    return /*#__PURE__*/ jsx(Transition, {
+        in: expanded,
+        nodeRef: innerRef,
+        timeout: 300,
+        onExit: handleExit,
+        onExiting: handleExiting,
+        onEntering: handleEntering,
+        onEntered: handleEntered,
+        children: /*#__PURE__*/ jsxs("section", {
+            ref: combinedRef,
+            id: `${id}-body`,
+            "aria-labelledby": `${id}-header`,
+            className: classnames('fr-accordion-item-body', className),
+            style: {
+                height: initialHeight.current,
+                minHeight: 0
+            },
+            ...props,
+            children: [
+                children,
+                /*#__PURE__*/ jsx("div", {
+                    className: "fr-accordion-item-body-spacer-bottom"
+                })
+            ]
+        })
+    });
+});
+export { AccordionItemBody };

package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.css

@@ -0,0 +1,11 @@
+.fr-accordion-item-header {
+  cursor: pointer;
+  background: none;
+  border: none;
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  padding: 24px 64px 24px 0;
+  display: flex;
+}
+

package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.d.ts

@@ -0,0 +1,2 @@
+import './AccordionItemHeader.scss';
+export declare const AccordionItemHeader: (props: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/accordion/accordion-item/accordion-item-header/AccordionItemHeader.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "./AccordionItemHeader.css";
+import classnames from "classnames";
+import { forwardRef, useContext } from "react";
+import { AccordionItemContext } from "../AccordionItemContext.js";
+const AccordionItemHeader = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>{
+    const { toggle, id, expanded } = useContext(AccordionItemContext);
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        type: "button",
+        className: classnames('fr-accordion-item-header', className),
+        id: `${id}-header`,
+        "aria-controls": `${id}-body`,
+        "aria-expanded": expanded,
+        onClick: toggle,
+        ...props,
+        children: children
+    });
+});
+export { AccordionItemHeader };

package/dist/components/bottom-sheet/BottomSheet.css

@@ -0,0 +1,18 @@
+.fr-bottom-sheet-drag-handle-container {
+  cursor: pointer;
+  background: none;
+  border: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.fr-bottom-sheet-drag-handle-container:focus {
+  outline: none;
+}
+
+.fr-bottom-sheet-drag-handle-container:focus-visible {
+  outline: 2px solid var(--fwe-hero);
+  outline-offset: 2px;
+}
+

package/dist/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,12 @@
+import './BottomSheet.scss';
+interface BottomSheetProps {
+    readonly children: React.ReactNode;
+    readonly defaultExpanded?: boolean;
+    readonly open?: boolean;
+    readonly expandFrom?: 'center' | 'bottom';
+    readonly hasBackdrop?: boolean;
+    readonly hideCloseIcon?: boolean;
+    readonly onOpenChange?: (value: boolean) => void;
+}
+export declare function BottomSheet({ children, open, defaultExpanded, expandFrom, hasBackdrop, hideCloseIcon, onOpenChange, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1,101 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "./BottomSheet.css";
+import classnames from "classnames";
+import { useState } from "react";
+function BottomSheet({ children, open, defaultExpanded, expandFrom = 'center', hasBackdrop = true, hideCloseIcon, onOpenChange }) {
+    const [expanded, setExpanded] = useState(defaultExpanded);
+    const [isClosing, setIsClosing] = useState(false);
+    const [startY, setStartY] = useState(0);
+    const [swiping, setSwiping] = useState(false);
+    function toggleExpand() {
+        const newExpanded = !expanded;
+        setExpanded(newExpanded);
+    }
+    function closeBottomSheet() {
+        setIsClosing(true);
+        setExpanded(defaultExpanded);
+        setTimeout(()=>{
+            setIsClosing(false);
+            onOpenChange?.(false);
+        }, 300);
+    }
+    const handleTouchStart = (event)=>{
+        setStartY(event.touches[0].clientY);
+        setSwiping(true);
+    };
+    const handleTouchMove = (event)=>{
+        if (!swiping) return;
+        const currentY = event.touches[0].clientY;
+        const deltaY = currentY - startY;
+        if (deltaY < -50 && !expanded) {
+            setExpanded(true);
+            setSwiping(false);
+        } else if (deltaY > 50 && expanded) {
+            setExpanded(false);
+            setSwiping(false);
+        } else if (deltaY > 100 && !expanded) {
+            closeBottomSheet();
+            setSwiping(false);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                className: classnames('fwe-bottom-sheet-backdrop', {
+                    'fwe-bottom-sheet-backdrop--visible': hasBackdrop && open && !isClosing
+                }),
+                tabIndex: -1,
+                onClick: closeBottomSheet,
+                onKeyDown: (e)=>{
+                    if ('Enter' === e.key || ' ' === e.key) {
+                        e.preventDefault();
+                        closeBottomSheet();
+                    }
+                }
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('fwe-bottom-sheet-container', {
+                    'fwe-bottom-sheet-container--open': open,
+                    'fwe-bottom-sheet-container--expanded': expanded,
+                    'fwe-bottom-sheet-container--expand-from-center': 'center' === expandFrom,
+                    'fwe-bottom-sheet-container--with-backdrop': hasBackdrop,
+                    'fwe-bottom-sheet-container--closing': isClosing
+                }),
+                onTouchStart: handleTouchStart,
+                onTouchMove: handleTouchMove,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "fwe-bottom-sheet-header",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "fr-bottom-sheet-drag-handle-container fwe-bottom-sheet-drag-handle-container",
+                                "aria-label": expanded ? 'Collapse bottom sheet' : 'Expand bottom sheet',
+                                "aria-expanded": expanded,
+                                onClick: toggleExpand,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "fwe-bottom-sheet-drag-handle"
+                                })
+                            }),
+                            !hideCloseIcon && /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                className: "fwe-bottom-sheet-close-btn",
+                                onClick: closeBottomSheet,
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "fwe-sr-only",
+                                    children: "Close"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "fwe-bottom-sheet-content",
+                        children: children
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { BottomSheet };

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ClassNamePropsWithChildren } from '../../utils/types';
+export interface BreadcrumbProps extends ClassNamePropsWithChildren {
+    locations?: {
+        label: string;
+        url: string;
+    }[];
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+}
+/**
+ * Breadcrumb navigation can be used on pages with multiple navigation levels.
+ */
+export declare function Breadcrumb({ locations, onClick, children, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import react from "react";
+function Breadcrumb({ locations, onClick, children, className }) {
+    const childrenList = [];
+    react.Children.forEach(children, (element)=>{
+        if (/*#__PURE__*/ react.isValidElement(element)) childrenList.push({
+            ...element,
+            props: {
+                ...element.props,
+                className: 'fr-breadcrumb-location'
+            }
+        });
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('fwe-breadcrumb', className),
+        children: locations ? locations.map((location)=>/*#__PURE__*/ jsx(react.Fragment, {
+                children: /*#__PURE__*/ jsx("a", {
+                    className: "fr-breadcrumb-location",
+                    href: location.url,
+                    onClick: (e)=>onClick ? onClick(e) : void 0,
+                    children: location.label
+                })
+            }, location.url)) : childrenList.map((child)=>/*#__PURE__*/ jsxs(react.Fragment, {
+                children: [
+                    child,
+                    " "
+                ]
+            }, child.props.children))
+    });
+}
+export { Breadcrumb };

package/dist/components/button/Button.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    primary?: boolean;
+    tertiary?: boolean;
+    iconOnly?: boolean;
+    large?: boolean;
+    floating?: boolean;
+}
+export declare const Button: (props: ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/button/Button.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { IconWrapper } from "../icon-wrapper/IconWrapper.js";
+const Button = /*#__PURE__*/ forwardRef(({ icon, type = 'button', disabled = false, iconOnly = false, large = false, floating = false, onClick, primary = false, tertiary = false, className, children, ...props }, ref)=>{
+    const classes = classnames('fwe-btn', 'fr-button', {
+        'fwe-btn-icon': iconOnly
+    }, {
+        'fwe-disabled': disabled
+    }, {
+        'fwe-btn-hero': primary && !tertiary
+    }, {
+        'fwe-btn-link': tertiary && !primary
+    }, {
+        'fwe-btn-lg': large
+    }, {
+        'fwe-btn-floating': floating
+    }, className);
+    return /*#__PURE__*/ jsxs("button", {
+        type: type,
+        onClick: onClick,
+        className: classes,
+        disabled: disabled,
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                icon: icon
+            }),
+            !iconOnly && /*#__PURE__*/ jsx("div", {
+                children: children
+            })
+        ]
+    });
+});
+export { Button };