design-system-silkhaus 4.0.0-beta.combine-tailwind-config.1 → 4.0.0

package/dist/index.d.ts

@@ -42,6 +42,13 @@ export declare interface AccordionProps {
     onStateChange?: (state: boolean) => void;
 }
 
+export declare const ActionBar: ({ applyLabel, cancelLabel, onApply, onCancel, }: {
+    applyLabel: string;
+    cancelLabel: string;
+    onApply?: () => void;
+    onCancel?: () => void;
+}) => JSX_2.Element;
+
 declare type ActionButtonProps = {
     label: string;
 } & ButtonProps;
@@ -502,6 +509,8 @@ export declare const DeleteIcon: FC<{
 
 export declare const desktopMinWidth: number;
 
+export declare const DesktopMonthRangePicker: FC<PropsWithChildren<MonthRangePickerProps>>;
+
 export declare const DesktopPopover: FC<PropsWithChildren<PopoverProps>>;
 
 export declare const DesktopTooltip: FC<PropsWithChildren<TooltipProps>>;
@@ -741,7 +750,12 @@ export declare interface ImageViewerProps {
     isOpen: boolean;
     setOpen: (state: boolean) => void;
     images: ImageItem[];
-    index?: number;
+    index?: number /**
+    * Used for RTL.
+    * Pass this as true when you have direction=rtl in your HTML
+    * @default false
+    */;
+    rtl?: boolean;
 }
 
 export declare const InfoIcon: FC<{
@@ -921,6 +935,14 @@ export declare const MagnifyGlassIcon: FC<{
     className?: string;
 }>;
 
+export declare const MailIcon: FC<{
+    className?: string;
+}>;
+
+export declare const MaintenanceIcon: FC<{
+    className?: string;
+}>;
+
 export declare const MessageIcon: FC<{
     className?: string;
 }>;
@@ -950,6 +972,8 @@ export declare interface MobileFilterMenuProps extends HTMLAttributes<HTMLDivEle
     rtl?: boolean;
 }
 
+export declare const MobileMonthRangePicker: FC<PropsWithChildren<MonthRangePickerProps>>;
+
 export declare const MobileMultiSelectFilterDropDown: ForwardRefExoticComponent<MobileMultiSelectFilterDropDownProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface MobileMultiSelectFilterDropDownProps extends HTMLAttributes<HTMLDivElement> {
@@ -1003,6 +1027,39 @@ export declare const MoneyIcon: FC<{
     className?: string;
 }>;
 
+export declare type MonthIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
+
+export declare type MonthRange = {
+    startDate: MonthYear;
+    endDate?: MonthYear;
+};
+
+export declare const MonthRangePicker: FC<PropsWithChildren<MonthRangePickerProps>>;
+
+export declare type MonthRangePickerProps = {
+    minDate: MonthYear;
+    maxDate: MonthYear;
+    value?: MonthRange;
+    onChange?: (value: MonthRange, shortcut: ShortcutsKey) => void;
+    trigger?: ReactNode;
+    triggerContainerClassName?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    /**
+     * Pass this callback function if you want to override the default selected value display text.
+     * By default the dropdown will display the selected dates in the format of "MMM YY - MMM YY"
+     */
+    getSelectedValueDisplayText?: (value?: MonthRange, placeholder?: string) => string;
+    shortcutLabels: ShortcutsProps['labels'];
+    applyLabel?: string;
+    cancelLabel?: string;
+};
+
+export declare type MonthYear = {
+    month: MonthIndex;
+    year: number;
+};
+
 export declare const MoonIcon: FC<{
     className?: string;
 }>;
@@ -1483,6 +1540,15 @@ export declare const ShareIcon: FC<{
     className?: string;
 }>;
 
+declare type ShortcutsKey = 'custom' | 'currentMonth' | 'lastMonth' | 'last3Months' | 'last12Months' | 'allTime';
+
+declare type ShortcutsProps = {
+    labels: Record<ShortcutsKey, string>;
+    value?: ShortcutsKey;
+    onChange?: (value: ShortcutsKey) => void;
+    className?: string;
+};
+
 export declare const SingleBuildingIcon: FC<{
     className?: string;
 }>;
@@ -1896,14 +1962,30 @@ declare const textVariants: {
         readonly lineHeight: "var(--SmallTitle-3Regular-line-height)";
         readonly fontWeight: "var(--font-weight-semibold)";
     }];
+    readonly smallBodyRegular: readonly ["15px", {
+        readonly lineHeight: "24px";
+        readonly fontWeight: "var(--font-weight-normal)";
+    }];
+    readonly smallBodyEmphasized: readonly ["15px", {
+        readonly lineHeight: "24px";
+        readonly fontWeight: "var(--font-weight-semibold)";
+    }];
     readonly smallBody1Regular: readonly ["var(--SmallBody-1Regular-font-size)", {
         readonly lineHeight: "var(--SmallBody-1Regular-line-height)";
         readonly fontWeight: "var(--SmallBody-1Regular-font-weight)";
     }];
+    readonly smallBody1Emphasized: readonly ["var(--SmallBody-1Regular-font-size)", {
+        readonly lineHeight: "var(--SmallBody-1Regular-line-height)";
+        readonly fontWeight: "var(--font-weight-semibold)";
+    }];
     readonly smallBody2Regular: readonly ["var(--SmallBody-2Regular-font-size)", {
         readonly lineHeight: "var(--SmallBody-2Regular-line-height)";
         readonly fontWeight: "var(--SmallBody-2Regular-font-weight)";
     }];
+    readonly smallBody2Emphasized: readonly ["var(--SmallBody-2Regular-font-size)", {
+        readonly lineHeight: "var(--SmallBody-2Regular-line-height)";
+        readonly fontWeight: "var(--font-weight-semibold)";
+    }];
     readonly smallSubheadRegular: readonly ["var(--SmallSubhead-Regular-font-size)", {
         readonly lineHeight: "var(--SmallSubhead-Regular-line-height)";
         readonly fontWeight: "var(--font-weight-normal)";
@@ -2226,6 +2308,9 @@ export declare const useDocumentSize: () => {
     documentWidth: number;
     documentHeight: number;
     screenSize: "mobile" | "tablet" | "desktop";
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
 };
 
 export declare const WarningHollowIcon: FC<{