design-system-silkhaus 3.11.0 → 3.12.0-beta.month-range-picker.2

package/dist/app/index.js

@@ -10,8 +10,8 @@ var I = (s, e, a) => e in s ? J(s, e, { enumerable: !0, configurable: !0, writab
       X.call(e, a) && I(s, a, e[a]);
   return s;
 }, k = (s, e) => K(s, L(e));
-import { j as d, p as Y, u as Z, o as _, i as O, s as ss, r as es, v as ds, d as as, e as ls, f as ts, g as rs, a as m, F as ns, A as is, h as os, D as cs, x as us, C as fs, l as xs, k as ms, n as ps } from "../ButtonsGroupSelector-Da7wwKtY.js";
-import { w as ks } from "../ButtonsGroupSelector-Da7wwKtY.js";
+import { j as d, p as Y, u as Z, o as _, i as O, s as ss, r as es, v as ds, d as as, e as ls, f as ts, g as rs, a as m, F as ns, A as is, h as os, x as cs, y as us, C as fs, l as xs, k as ms, n as ps } from "../ButtonsGroupSelector-Dw7UzSrk.js";
+import { w as ks } from "../ButtonsGroupSelector-Dw7UzSrk.js";
 import { useState as b } from "react";
 const hs = (s) => window.innerWidth < Y ? /* @__PURE__ */ d.jsx(R, x({}, s)) : /* @__PURE__ */ d.jsx(M, x({}, s));
 hs.displayName = "Dropdown";

package/dist/index.d.ts

@@ -500,8 +500,17 @@ export declare const DeleteIcon: FC<{
     className?: string;
 }>;
 
+export declare const DesktopActionBar: ({ applyLabel, cancelLabel, onApply, onCancel, }: {
+    applyLabel: string;
+    cancelLabel: string;
+    onApply?: () => void;
+    onCancel?: () => void;
+}) => JSX_2.Element;
+
 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>>;
@@ -1003,6 +1012,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) => 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 +1525,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;
 }>;
@@ -1880,14 +1931,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)";