@stenajs-webui/elements 18.12.0 → 19.0.0-next.0

package/dist/components/ui/action-menu/ActionMenu.d.ts

@@ -1,13 +1,12 @@
 import { BoxProps } from "@stenajs-webui/core";
 import * as React from "react";
 import { ReactNode } from "react";
-export declare type ActionMenuVariant = "standard" | "outlined";
 export interface ActionMenuProps {
     top?: ReactNode;
     width?: BoxProps["width"];
-    variant?: ActionMenuVariant;
     shadow?: BoxProps["shadow"];
     trapFocus?: boolean;
     children?: ReactNode;
+    className?: string;
 }
 export declare const ActionMenu: React.FC<ActionMenuProps>;

package/dist/components/ui/action-menu/ActionMenuItem.d.ts

@@ -1,9 +1,6 @@
-import { ButtonElementProps } from "@stenajs-webui/core";
-import { ButtonContentProps } from "../buttons/common/ButtonContent";
 import * as React from "react";
-export declare type ActionMenuItemVariant = "standard" | "danger" | "success";
-export interface ActionMenuItemProps extends Omit<ButtonElementProps, "children">, ButtonContentProps {
-    variant?: ActionMenuItemVariant;
+import { MenuButtonProps } from "../buttons/menu-button/MenuButton";
+export interface ActionMenuItemProps extends Omit<MenuButtonProps, "children" | "expandable" | "expanded" | "selected"> {
     disableCloseOnClick?: boolean;
 }
 export declare const ActionMenuItem: React.ForwardRefExoticComponent<ActionMenuItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/action-menu/ActionMenuItemContent.d.ts

@@ -1,11 +1,12 @@
 import { DivProps } from "@stenajs-webui/core";
 import * as React from "react";
 import { ReactNode } from "react";
-import { ButtonContentProps } from "../buttons/common/ButtonContent";
-import { ActionMenuItemVariant } from "./ActionMenuItem";
-export interface ActionMenuItemContentProps extends DivProps, ButtonContentProps {
-    variant?: ActionMenuItemVariant;
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { MenuButtonContentProps } from "../buttons/menu-button/MenuButtonContent";
+export interface ActionMenuItemContentProps extends DivProps, MenuButtonContentProps {
+    leftIcon?: IconDefinition;
     disabled?: boolean;
+    right?: ReactNode;
     bottom?: ReactNode;
     fullWidthBottomContent?: boolean;
 }

package/dist/components/ui/action-menu/ActionMenuLink.d.ts

@@ -1,9 +1,6 @@
-import { AnchorElementProps } from "@stenajs-webui/core";
 import * as React from "react";
-import { ActionMenuItemVariant } from "./ActionMenuItem";
-import { ButtonContentProps } from "../buttons/common/ButtonContent";
-export interface ActionMenuLinkProps extends AnchorElementProps, ButtonContentProps {
-    variant?: ActionMenuItemVariant;
+import { MenuButtonLinkProps } from "../buttons/menu-button/MenuButtonLink";
+export interface ActionMenuLinkProps extends Omit<MenuButtonLinkProps, "children" | "expandable" | "expanded" | "selected"> {
     disabled?: boolean;
     disableCloseOnClick?: boolean;
 }

package/dist/components/ui/button-group/ButtonGroup.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
-import { ReactNode } from "react";
+import { ToggleButtonProps } from "../toggle-button/ToggleButton";
+import { FlatButtonProps } from "../buttons/FlatButton";
 export interface ButtonGroupProps {
     className?: string;
-    children?: ReactNode;
+    children: Iterable<React.ReactElement<ToggleButtonProps | FlatButtonProps>>;
 }
 export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/components/ui/buttons/common/ButtonCommon.d.ts

@@ -1,6 +1,6 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { ReactNode } from "react";
-export declare type ButtonSize = "medium" | "small" | "large";
+export declare type ButtonSize = "medium" | "small" | "large" | "larger";
 export declare type ButtonVariant = "normal" | "danger" | "success";
 export interface CommonButtonProps {
     /** The text on the button. */

package/dist/components/ui/buttons/common/ButtonContent.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { ReactNode } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { ButtonSize } from "./ButtonCommon";
 export interface ButtonContentProps {
     label?: string;
     loading?: boolean;
@@ -14,5 +15,6 @@ export interface ButtonContentProps {
     spinnerClassName?: string;
     leftWrapperClassName?: string;
     rightWrapperClassName?: string;
+    size?: ButtonSize;
 }
 export declare const ButtonContent: React.FC<ButtonContentProps>;

package/dist/components/ui/buttons/menu-button/MenuButton.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { ButtonElementProps } from "@stenajs-webui/core";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+export declare type MenuButtonVariant = "standard" | "danger";
+export interface MenuButtonProps extends ButtonElementProps {
+    label: string;
+    expanded?: boolean;
+    expandable?: boolean;
+    selected?: boolean;
+    leftIcon?: IconDefinition;
+    variant?: MenuButtonVariant;
+    children?: ReactNode;
+}
+export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/buttons/menu-button/MenuButtonContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+export interface MenuButtonContentProps {
+    leftIcon?: IconDefinition;
+    label: string;
+}
+export declare const MenuButtonContent: React.FC<MenuButtonContentProps>;

package/dist/components/ui/buttons/menu-button/MenuButtonGroupBox.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { ReactNode } from "react";
+export interface MenuButtonGroupBoxProps {
+    children?: ReactNode;
+}
+export declare const MenuButtonGroupBox: React.FC<MenuButtonGroupBoxProps>;

package/dist/components/ui/buttons/menu-button/MenuButtonLink.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { ReactNode } from "react";
+import { AnchorElementProps } from "@stenajs-webui/core";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { MenuButtonVariant } from "./MenuButton";
+export declare type MenuButtonLinkRenderer = (anchorProps: AnchorElementProps, activeClassName: string) => ReactNode;
+export declare type MenuButtonLinkProps = MenuButtonLinkNotSelectedProps | MenuButtonLinkWithSelectedProps | MenuButtonLinkWithRenderLinkProps;
+interface MenuButtonCommonProps extends AnchorElementProps {
+    label: string;
+    leftIcon?: IconDefinition;
+    variant?: MenuButtonVariant;
+    disabled?: boolean;
+}
+export interface MenuButtonLinkNotSelectedProps extends MenuButtonCommonProps {
+    renderLink?: never;
+    selected?: never;
+}
+export interface MenuButtonLinkWithSelectedProps extends MenuButtonCommonProps {
+    renderLink?: never;
+    selected?: boolean;
+}
+export interface MenuButtonLinkWithRenderLinkProps extends MenuButtonCommonProps {
+    renderLink?: MenuButtonLinkRenderer;
+    selected?: never;
+}
+export declare const MenuButtonLink: React.ForwardRefExoticComponent<MenuButtonLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/ui/icon/CircledIcon.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { CssPropColor } from "@stenajs-webui/theme";
+import { IconProps } from "./Icon";
+declare type SizeVariant = "small" | "medium";
+export interface CircledIconProps extends Omit<IconProps, "size" | "color"> {
+    iconSize?: number;
+    backgroundColor?: CssPropColor;
+    iconColor?: CssPropColor;
+    sizeVariant?: SizeVariant;
+}
+export declare const CircledIcon: React.FC<CircledIconProps>;
+export {};

package/dist/components/ui/toggle-button/ToggleButton.d.ts

@@ -1,27 +1,16 @@
-import { ButtonElementProps } from "@stenajs-webui/core";
+import { InputElementProps } from "@stenajs-webui/core";
 import * as React from "react";
-import { WidthProps } from "styled-system";
 export declare type ToggleButtonSize = "small" | "medium" | "large";
-export interface ToggleButtonProps extends WidthProps, Omit<ButtonElementProps, "value"> {
+export interface ToggleButtonProps extends Omit<InputElementProps, "value" | "size" | "checked"> {
+    value?: boolean;
+    onValueChange?: (value: boolean) => void;
     /**
      * The label of the button.
      */
     label?: string | number;
-    /**
-     * The pressed state change handler.
-     */
-    onValueChange?: (value: boolean) => void;
-    /**
-     * If true, the button will display as pressed.
-     */
-    value?: boolean;
     /**
      * The size of the button.
      */
     size?: ToggleButtonSize;
-    /**
-     * If true, the button will be disabled.
-     */
-    disabled?: boolean;
 }
 export declare const ToggleButton: React.FC<ToggleButtonProps>;

package/dist/icons/ui/IconsUi.d.ts

@@ -1,5 +1,6 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 export declare const stenaAccount: IconDefinition;
+export declare const stenaAngleDown2: IconDefinition;
 export declare const stenaAngleDownDouble: IconDefinition;
 export declare const stenaAngleDown: IconDefinition;
 export declare const stenaAngleLeftDouble: IconDefinition;
@@ -8,6 +9,7 @@ export declare const stenaAngleRightDouble: IconDefinition;
 export declare const stenaAngleRight: IconDefinition;
 export declare const stenaAngleUpDouble: IconDefinition;
 export declare const stenaAngleUp: IconDefinition;
+export declare const stenaAnimals: IconDefinition;
 export declare const stenaArrowCircleDown: IconDefinition;
 export declare const stenaArrowCircleLeft: IconDefinition;
 export declare const stenaArrowCircleRight: IconDefinition;
@@ -26,22 +28,29 @@ export declare const stenaBackspace: IconDefinition;
 export declare const stenaBan: IconDefinition;
 export declare const stenaBellFilled: IconDefinition;
 export declare const stenaBell: IconDefinition;
+export declare const stenaBookmark: IconDefinition;
 export declare const stenaBusinessAgreement: IconDefinition;
+export declare const stenaBusinessArticle: IconDefinition;
 export declare const stenaBusinessCard: IconDefinition;
 export declare const stenaBusinessClaim: IconDefinition;
 export declare const stenaBusinessInvoice: IconDefinition;
 export declare const stenaBusinessNslh: IconDefinition;
 export declare const stenaBusinessSignature: IconDefinition;
+export declare const stenaBuy: IconDefinition;
 export declare const stenaCalculate: IconDefinition;
 export declare const stenaCalendarFilled: IconDefinition;
 export declare const stenaCalendarManage: IconDefinition;
 export declare const stenaCalendarSortDown: IconDefinition;
 export declare const stenaCalendarSortUp: IconDefinition;
 export declare const stenaCalendar: IconDefinition;
+export declare const stenaCargoConstruction: IconDefinition;
+export declare const stenaCargoMetal: IconDefinition;
 export declare const stenaCheckCircleFilled: IconDefinition;
 export declare const stenaCheckCircle: IconDefinition;
+export declare const stenaCheckDouble: IconDefinition;
 export declare const stenaCheckThick: IconDefinition;
 export declare const stenaCheck: IconDefinition;
+export declare const stenaClean: IconDefinition;
 export declare const stenaClearRow: IconDefinition;
 export declare const stenaClear: IconDefinition;
 export declare const stenaClockFilled: IconDefinition;
@@ -50,6 +59,7 @@ export declare const stenaCloudArrow: IconDefinition;
 export declare const stenaCloud: IconDefinition;
 export declare const stenaCog: IconDefinition;
 export declare const stenaCompress: IconDefinition;
+export declare const stenaCookies: IconDefinition;
 export declare const stenaCopyDocument: IconDefinition;
 export declare const stenaCopy: IconDefinition;
 export declare const stenaDetails: IconDefinition;
@@ -57,78 +67,94 @@ export declare const stenaDotFilled: IconDefinition;
 export declare const stenaDotOutline: IconDefinition;
 export declare const stenaDotsVertical: IconDefinition;
 export declare const stenaDots: IconDefinition;
-export declare const stenaDownloadCsv: IconDefinition;
 export declare const stenaDownloadPdf: IconDefinition;
-export declare const stenaDownloadXls: IconDefinition;
 export declare const stenaDownload: IconDefinition;
 export declare const stenaEditColumns: IconDefinition;
-export declare const stenaEnterKey: IconDefinition;
+export declare const stenaEdit: IconDefinition;
 export declare const stenaExclamationCircleFilled: IconDefinition;
 export declare const stenaExclamationCircle: IconDefinition;
 export declare const stenaExclamationTriangleFilled: IconDefinition;
 export declare const stenaExclamationTriangle: IconDefinition;
 export declare const stenaExpand: IconDefinition;
 export declare const stenaExternalLink: IconDefinition;
+export declare const stenaEyeClose: IconDefinition;
+export declare const stenaEyeHide: IconDefinition;
+export declare const stenaEyeOpen: IconDefinition;
+export declare const stenaEyeShow: IconDefinition;
 export declare const stenaFavorites: IconDefinition;
 export declare const stenaFileCsvLabel: IconDefinition;
+export declare const stenaFileCsv: IconDefinition;
 export declare const stenaFilePdfLabel: IconDefinition;
+export declare const stenaFilePdf: IconDefinition;
 export declare const stenaFileXlsLabel: IconDefinition;
+export declare const stenaFileXls: IconDefinition;
 export declare const stenaFilter: IconDefinition;
 export declare const stenaFinancePaid: IconDefinition;
 export declare const stenaFinancePay: IconDefinition;
 export declare const stenaFinanceRaise: IconDefinition;
-export declare const stenaFinanceRebatePercent: IconDefinition;
 export declare const stenaFinanceRebate: IconDefinition;
 export declare const stenaFinanceUnpaid: IconDefinition;
 export declare const stenaFinanceWallet: IconDefinition;
 export declare const stenaHamburger: IconDefinition;
+export declare const stenaHandicapped: IconDefinition;
 export declare const stenaHazardous: IconDefinition;
-export declare const stenaHazardousFilled: IconDefinition;
+export declare const stenaHelp: IconDefinition;
 export declare const stenaHistory: IconDefinition;
+export declare const stenaHotelBed: IconDefinition;
+export declare const stenaHotel: IconDefinition;
 export declare const stenaInfoCircleFilled: IconDefinition;
 export declare const stenaInfoCircle: IconDefinition;
 export declare const stenaInfoMegaphone: IconDefinition;
+export declare const stenaInfoSpeechAlert: IconDefinition;
 export declare const stenaInfoSpeech: IconDefinition;
 export declare const stenaIntermodal: IconDefinition;
+export declare const stenaLanguage: IconDefinition;
 export declare const stenaLightbulb: IconDefinition;
+export declare const stenaLightning: IconDefinition;
+export declare const stenaLineDotted: IconDefinition;
+export declare const stenaLineSlash: IconDefinition;
+export declare const stenaLineStraight: IconDefinition;
 export declare const stenaLink: IconDefinition;
 export declare const stenaLockClosed: IconDefinition;
 export declare const stenaLockOpen: IconDefinition;
 export declare const stenaLogout: IconDefinition;
 export declare const stenaMail: IconDefinition;
+export declare const stenaMapNavigation: IconDefinition;
 export declare const stenaMerge: IconDefinition;
 export declare const stenaMinusCircle: IconDefinition;
 export declare const stenaMinus: IconDefinition;
 export declare const stenaMobile: IconDefinition;
+export declare const stenaMouse: IconDefinition;
 export declare const stenaMoveIn: IconDefinition;
 export declare const stenaMoveOut: IconDefinition;
 export declare const stenaMove: IconDefinition;
-export declare const stenaOverviewFull: IconDefinition;
 export declare const stenaOverview: IconDefinition;
-export declare const stenaPaw: IconDefinition;
 export declare const stenaPen: IconDefinition;
 export declare const stenaPercentage: IconDefinition;
+export declare const stenaPets: IconDefinition;
 export declare const stenaPhone: IconDefinition;
+export declare const stenaPhoto: IconDefinition;
 export declare const stenaPin: IconDefinition;
 export declare const stenaPluginCheck: IconDefinition;
 export declare const stenaPlugin: IconDefinition;
-export declare const stenaPluginFilled: IconDefinition;
 export declare const stenaPlusCircle: IconDefinition;
 export declare const stenaPlus: IconDefinition;
 export declare const stenaPrint: IconDefinition;
 export declare const stenaQuestionBubble: IconDefinition;
 export declare const stenaQuestionCircle: IconDefinition;
+export declare const stenaRateThumbDown: IconDefinition;
+export declare const stenaRateThumbUp: IconDefinition;
 export declare const stenaRefresh: IconDefinition;
+export declare const stenaSailingBus: IconDefinition;
+export declare const stenaSailingCar: IconDefinition;
 export declare const stenaSailingCargo: IconDefinition;
 export declare const stenaSailingCrane: IconDefinition;
-export declare const stenaSailingDrivers: IconDefinition;
 export declare const stenaSailingGate: IconDefinition;
 export declare const stenaSailingImportExport: IconDefinition;
 export declare const stenaSailingLocation: IconDefinition;
 export declare const stenaSailingNoShow: IconDefinition;
 export declare const stenaSailingOffpeak: IconDefinition;
 export declare const stenaSailingOnQuay: IconDefinition;
-export declare const stenaSailingOnQuayFilled: IconDefinition;
 export declare const stenaSailingOnRoute: IconDefinition;
 export declare const stenaSailingPeak: IconDefinition;
 export declare const stenaSailingRoundTrip: IconDefinition;
@@ -143,53 +169,61 @@ export declare const stenaSailingTruckAlt: IconDefinition;
 export declare const stenaSailingVehicle: IconDefinition;
 export declare const stenaSave: IconDefinition;
 export declare const stenaSearchError: IconDefinition;
+export declare const stenaSearchMinus: IconDefinition;
+export declare const stenaSearchPlus: IconDefinition;
 export declare const stenaSearch: IconDefinition;
-export declare const stenaSearchFilled: IconDefinition;
 export declare const stenaSendPlane: IconDefinition;
 export declare const stenaShare: IconDefinition;
+export declare const stenaShield: IconDefinition;
 export declare const stenaSignIn: IconDefinition;
 export declare const stenaSignOut: IconDefinition;
+export declare const stenaSlidersMini: IconDefinition;
 export declare const stenaSliders: IconDefinition;
 export declare const stenaSms: IconDefinition;
+export declare const stenaSortDownMini: IconDefinition;
 export declare const stenaSortDown: IconDefinition;
+export declare const stenaSortUpMini: IconDefinition;
 export declare const stenaSortUp: IconDefinition;
 export declare const stenaStackCheck: IconDefinition;
 export declare const stenaStack: IconDefinition;
+export declare const stenaStar: IconDefinition;
 export declare const stenaStatisticsBar: IconDefinition;
 export declare const stenaStatisticsLine: IconDefinition;
 export declare const stenaStatusActive: IconDefinition;
 export declare const stenaStatusBlock: IconDefinition;
 export declare const stenaStatusCanceled: IconDefinition;
-export declare const stenaStatusCheckedinWaitlist: IconDefinition;
-export declare const stenaStatusCheckedin: IconDefinition;
 export declare const stenaStatusConfirmed: IconDefinition;
 export declare const stenaStatusDone: IconDefinition;
 export declare const stenaStatusInProgress: IconDefinition;
+export declare const stenaStatusMissing: IconDefinition;
 export declare const stenaStatusNoShow: IconDefinition;
 export declare const stenaStatusTodo: IconDefinition;
-export declare const stenaStatusWaitlist: IconDefinition;
+export declare const stenaSupport: IconDefinition;
 export declare const stenaSwitch: IconDefinition;
 export declare const stenaSync: IconDefinition;
 export declare const stenaTag: IconDefinition;
 export declare const stenaTags: IconDefinition;
 export declare const stenaTimesCircle: IconDefinition;
 export declare const stenaTimesSmall: IconDefinition;
+export declare const stenaTimesThick: IconDefinition;
 export declare const stenaTimes: IconDefinition;
+export declare const stenaTodoCreate: IconDefinition;
 export declare const stenaTodoDone: IconDefinition;
 export declare const stenaTodoList: IconDefinition;
 export declare const stenaTrash: IconDefinition;
+export declare const stenaTravelEnjoyHygge: IconDefinition;
 export declare const stenaTurnOff: IconDefinition;
 export declare const stenaUndo: IconDefinition;
 export declare const stenaUnlink: IconDefinition;
 export declare const stenaUpload: IconDefinition;
 export declare const stenaUserAdd: IconDefinition;
 export declare const stenaUserCircle: IconDefinition;
-export declare const stenaUserCircleFilled: IconDefinition;
 export declare const stenaUserGroupLarge: IconDefinition;
 export declare const stenaUserGroupSmall: IconDefinition;
 export declare const stenaUserMultiple: IconDefinition;
 export declare const stenaUserSingle: IconDefinition;
-export declare const stenaUserMultipleFilled: IconDefinition;
 export declare const stenaUser: IconDefinition;
 export declare const stenaUsers: IconDefinition;
 export declare const stenaWarehouse: IconDefinition;
+export declare const stenaWeather: IconDefinition;
+export declare const stenaWifi: IconDefinition;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export declare const StenaFlag: SvgrComponent;
 export * from "./icons/ui/IconsUi";
 export * from "./icons/misc/IconsMisc";
 export * from "./components/ui/banners/banner/Banner";
@@ -14,6 +15,8 @@ export * from "./components/ui/buttons/PrimaryButton";
 export * from "./components/ui/buttons/SecondaryButton";
 export * from "./components/ui/buttons/common/ButtonCommon";
 export * from "./components/ui/buttons/common/ButtonContent";
+export * from "./components/ui/buttons/menu-button/MenuButton";
+export * from "./components/ui/buttons/menu-button/MenuButtonLink";
 export * from "./components/ui/button-links/FlatButtonLink";
 export * from "./components/ui/button-links/PrimaryButtonLink";
 export * from "./components/ui/button-links/SecondaryButtonLink";