design-system-silkhaus 2.18.0-beta.app-components.3 → 2.18.0-beta.app-components.5

package/dist/app/index.d.ts

@@ -33,10 +33,18 @@ export declare interface ButtonsGroupSelectorProps extends HTMLAttributes<HTMLDi
     value?: Array<{
         label: string;
         value: string;
+        startIcon?: default_2.ReactNode;
+        endIcon?: default_2.ReactNode;
+        className?: string;
+        buttonClassName?: string;
     }>;
     options: Array<{
         label: string;
         value: string;
+        startIcon?: default_2.ReactNode;
+        endIcon?: default_2.ReactNode;
+        className?: string;
+        buttonClassName?: string;
     }>;
     onSelectionChange?: (selected: Array<{
         label: string;

package/dist/app/index.js

@@ -1 +1 @@
-"use strict";var P=Object.defineProperty,G=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var B=(e,s,t)=>s in e?P(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,y=(e,s)=>{for(var t in s||(s={}))N.call(s,t)&&B(e,t,s[t]);if(b)for(var t of b(s))C.call(s,t)&&B(e,t,s[t]);return e},F=(e,s)=>G(e,$(s));var R=(e,s)=>{var t={};for(var a in e)N.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))s.indexOf(a)<0&&C.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../utils-B_SuUsRF.cjs"),c=require("react"),D=({children:e,size:s="small"})=>d.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${s==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),q={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},V={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},_=c.forwardRef((h,E)=>{var o=h,{color:e="primary",disabled:s=!1,className:t,children:a,startIcon:x,selected:m,endIcon:i,trackingId:p,helperText:u,helpterTextClassName:j,buttonClassName:f}=o,g=R(o,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return d.jsxRuntimeExports.jsxs("div",{className:d.cn("ds-flex ds-flex-col ds-gap-1",t),children:[d.jsxRuntimeExports.jsxs("button",F(y({"data-tracking-id":p,ref:E,disabled:s,className:d.twMerge(d.clsx({[V[e]]:m,[q[e]]:!m},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",f))},g),{children:[x&&d.jsxRuntimeExports.jsx(D,{children:x}),a&&d.jsxRuntimeExports.jsx("div",{className:`${x?"ds-ml-1":""} ${i?"ds-mr-1":""}`,children:a}),i&&d.jsxRuntimeExports.jsx(D,{children:i})]})),u&&d.jsxRuntimeExports.jsx("div",{className:d.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",j),children:u})]})});_.displayName="Button";const T=c.forwardRef((e,s)=>{const S=e,{value:t,options:a,onSelectionChange:x=()=>{},isMultiSelect:m,noDataError:i,minWidthButton:p,buttonWidth:u,minSelectionError:j,buttonsContainerClassName:f,buttonClassName:g}=S,E=R(S,["value","options","onSelectionChange","isMultiSelect","noDataError","minWidthButton","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[h,o]=c.useState([]),[w,v]=c.useState("");c.useEffect(()=>{t&&t.length?o(t):o([])},[t]);const W=(r,l)=>{l.currentTarget.blur();const n=[...h],k=n.findIndex(M=>M.value===r.value);k!==-1?n.length>1?(n.splice(k,1),v("")):v(j):(n.push(r),v("")),o(n),x(n)},z=(r,l)=>{l.currentTarget.blur();const n=[r];o(n),x(n)};return d.jsxRuntimeExports.jsxs("div",F(y({ref:s},E),{children:[d.jsxRuntimeExports.jsx("div",{className:d.cn("ds-flex ds-flex-wrap ds-gap-2",f),children:a.length>0?a.map(r=>d.jsxRuntimeExports.jsx(c.Fragment,{children:m?d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===r.value),onClick:l=>W(r,l),color:"secondary",style:{minWidth:p,width:u},className:g,children:r.label}):d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===r.value),onClick:l=>z(r,l),color:"secondary",style:{minWidth:p,width:u},className:g,children:r.label})},r.value)):d.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:i})}),w&&d.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:w})]}))});T.displayName="ButtonsGroupSelector";exports.Button=_;exports.ButtonsGroupSelector=T;
+"use strict";var P=Object.defineProperty,G=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var B=(e,s,t)=>s in e?P(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,y=(e,s)=>{for(var t in s||(s={}))N.call(s,t)&&B(e,t,s[t]);if(b)for(var t of b(s))C.call(s,t)&&B(e,t,s[t]);return e},F=(e,s)=>G(e,$(s));var R=(e,s)=>{var t={};for(var a in e)N.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))s.indexOf(a)<0&&C.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../utils-k1RektY7.cjs"),c=require("react"),D=({children:e,size:s="small"})=>d.jsxRuntimeExports.jsx("div",{className:`ds-flex ds-items-center ds-justify-center ${s==="small"?"ds-h-5 ds-w-5":"ds-h-6 ds-w-6"}`,children:e}),q={primary:"ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-rounded-sm hover:ds-text-Text-textPrimaryDark hover:ds-bg-Background-accentEggplant-highlight hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-Background-accentEggplant-darkened focus:ds-bg-Background-accentEggplant-100 focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:focus:ds-shadow-none disabled:ds-bg-Background-accentEggplant-20 ds-text-mediumFootnoteEmphasized",secondary:"ds-text-black ds-rounded-sm ds-border ds-border-Fills-terciary hover:ds-bg-[#F6F8FC] hover:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] active:ds-bg-[#F6F8FC] active:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] focus:ds-bg-[#F6F8FC] focus:ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] disabled:ds-border disabled:ds-border-Fills-terciary disabled:ds-text-Text-tertiary disabled:ds-bg-transparent ds-text-mediumFootnoteEmphasized"},V={primary:"ds-rounded-sm ds-border ds-text-black ds-border-Fills-terciary ds-bg-[#F6F8FC] ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized",secondary:"ds-rounded-sm ds-bg-Background-accentEggplant-100 ds-text-Text-textPrimaryDark ds-shadow-[0px_1px_4px_0px_rgba(0,0,0,0.16)] ds-text-mediumFootnoteEmphasized"},_=c.forwardRef((h,E)=>{var o=h,{color:e="primary",disabled:s=!1,className:t,children:a,startIcon:x,selected:m,endIcon:i,trackingId:p,helperText:u,helpterTextClassName:j,buttonClassName:f}=o,g=R(o,["color","disabled","className","children","startIcon","selected","endIcon","trackingId","helperText","helpterTextClassName","buttonClassName"]);return d.jsxRuntimeExports.jsxs("div",{className:d.cn("ds-flex ds-flex-col ds-gap-1",t),children:[d.jsxRuntimeExports.jsxs("button",F(y({"data-tracking-id":p,ref:E,disabled:s,className:d.twMerge(d.clsx({[V[e]]:m,[q[e]]:!m},"ds-px-2 ds-py-1","ds-flex ds-w-full ds-flex-1 ds-items-center ds-justify-center",f))},g),{children:[x&&d.jsxRuntimeExports.jsx(D,{children:x}),a&&d.jsxRuntimeExports.jsx("div",{className:`${x?"ds-ml-1":""} ${i?"ds-mr-1":""}`,children:a}),i&&d.jsxRuntimeExports.jsx(D,{children:i})]})),u&&d.jsxRuntimeExports.jsx("div",{className:d.cn("ds-w-full ds-text-right ds-text-mediumFootnoteRegular",j),children:u})]})});_.displayName="Button";const T=c.forwardRef((e,s)=>{const S=e,{value:t,options:a,onSelectionChange:x=()=>{},isMultiSelect:m,noDataError:i,minWidthButton:p,buttonWidth:u,minSelectionError:j,buttonsContainerClassName:f,buttonClassName:g}=S,E=R(S,["value","options","onSelectionChange","isMultiSelect","noDataError","minWidthButton","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[h,o]=c.useState([]),[w,v]=c.useState("");c.useEffect(()=>{t&&t.length?o(t):o([])},[t]);const W=(r,l)=>{l.currentTarget.blur();const n=[...h],k=n.findIndex(M=>M.value===r.value);k!==-1?n.length>1?(n.splice(k,1),v("")):v(j):(n.push(r),v("")),o(n),x(n)},z=(r,l)=>{l.currentTarget.blur();const n=[r];o(n),x(n)};return d.jsxRuntimeExports.jsxs("div",F(y({ref:s},E),{children:[d.jsxRuntimeExports.jsx("div",{className:d.cn("ds-flex ds-flex-wrap ds-gap-2",f),children:a.length>0?a.map(r=>d.jsxRuntimeExports.jsx(c.Fragment,{children:m?d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===r.value),onClick:l=>W(r,l),color:"secondary",style:{minWidth:p,width:u},className:g,children:r.label}):d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===r.value),onClick:l=>z(r,l),color:"secondary",style:{minWidth:p,width:u},className:g,children:r.label})},r.value)):d.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:i})}),w&&d.jsxRuntimeExports.jsx("div",{className:"ds_xSmallSubheadRegular ds-p-2 ds-text-System-red",children:w})]}))});T.displayName="ButtonsGroupSelector";exports.Button=_;exports.ButtonsGroupSelector=T;

package/dist/index.d.ts

@@ -141,10 +141,22 @@ export declare const BedRegularIcon: FC<{
     className?: string;
 }>;
 
+export declare const BellIcon: FC<{
+    className?: string;
+}>;
+
+export declare const BellSolidIcon: FC<{
+    className?: string;
+}>;
+
 export declare const BoltIcon: FC<{
     className?: string;
 }>;
 
+export declare const BookIcon: FC<{
+    className?: string;
+}>;
+
 export declare const BookingQuoteCard: default_2.ForwardRefExoticComponent<BookingQuoteCardProps & default_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface BookingQuoteCardProps extends default_2.HTMLAttributes<HTMLDivElement> {
@@ -348,6 +360,8 @@ export declare const DeleteIcon: FC<{
 
 export declare const desktopMinWidth: number;
 
+export declare const DesktopPopover: FC<PropsWithChildren<PopoverProps>>;
+
 export declare const DesktopTooltip: FC<PropsWithChildren<TooltipProps>>;
 
 export declare const Dialog: ForwardRefExoticComponent<DialogProps & RefAttributes<HTMLDivElement>>;
@@ -618,6 +632,10 @@ export declare const MagnifyGlassIcon: FC<{
     className?: string;
 }>;
 
+export declare const MinusIcon: FC<{
+    className?: string;
+}>;
+
 export declare const MobileFilterMenu: ForwardRefExoticComponent<MobileFilterMenuProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface MobileFilterMenuProps extends HTMLAttributes<HTMLDivElement> {
@@ -654,6 +672,8 @@ export declare interface MobileMultiSelectFilterDropDownProps extends HTMLAttrib
     disabled?: boolean;
 }
 
+export declare const MobilePopover: FC<PropsWithChildren<PopoverProps>>;
+
 export declare const MobileSelectCardDropDown: ForwardRefExoticComponent<MobileSelectCardDropDownProps & RefAttributes<HTMLDivElement>>;
 
 export declare interface MobileSelectCardDropDownProps extends HTMLAttributes<HTMLDivElement> {
@@ -685,6 +705,19 @@ export declare const MoonIcon: FC<{
     className?: string;
 }>;
 
+export declare const NotificationItem: FC<NotificationItemProps>;
+
+export declare type NotificationItemProps = {
+    id?: string | number;
+    className?: string;
+    title: string;
+    description1: string;
+    description2?: string;
+    thumbnailUrl?: string;
+    isRead?: boolean;
+    onClick?: (item: NotificationItemProps) => void;
+};
+
 export declare const OpenNewIcon: FC<{
     className?: string;
 }>;
@@ -819,6 +852,70 @@ export declare const PlusCircleIcon: FC<{
     className?: string;
 }>;
 
+export declare const PlusIcon: FC<{
+    className?: string;
+}>;
+
+/**
+ * A component that displays a floating popover with the `content` on click of the `trigger` element for desktop
+ * and for mobile it displays a dialog that slides from the bottom
+ */
+export declare const Popover: FC<PropsWithChildren<PopoverProps>>;
+
+export declare interface PopoverProps {
+    /**
+     * Content of the popover
+     */
+    content: ReactNode;
+    /**
+     * The element that triggers the popover
+     */
+    trigger: ReactNode;
+    /**
+     * The placement of the floating popover. Only used in desktop version
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /**
+     * The trigger of the popover is wrapped in a container. This classname is added to that container
+     */
+    triggerContainerClassName?: string;
+    /**
+     * The content of the popover is wrapped in a container. This classname is added to that container
+     */
+    contentContainerClassname?: string;
+    /**
+     * When set true, popover will not be shown
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The offset of the popover from the trigger in px. Only applicable for desktop popover
+     * @default 4
+     */
+    offset?: number;
+    /**
+     * The title of the popover
+     */
+    title?: string;
+    /**
+     * Callback when popover is opened or closed
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Pass this value to control the open state
+     */
+    isOpen?: boolean;
+    /**
+     * Adjust the height of the popover to fit the content in viewport
+     */
+    adjustHeight?: boolean | number;
+    /**
+     * Adjust the width of the popover to fit the content in viewport
+     */
+    adjustWidth?: boolean;
+}
+
 export declare const PreviewIcon: FC<{
     className?: string;
 }>;
@@ -941,6 +1038,26 @@ export declare const Scrollbar: FC<ScrollbarProps>;
 export declare interface ScrollbarProps extends Props {
 }
 
+export declare const Section: default_2.FC<SectionProps>;
+
+export declare const SectionHeader: default_2.FC<SectionHeaderProps>;
+
+export declare interface SectionHeaderProps {
+    title?: string;
+    description?: string;
+    className?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+}
+
+export declare interface SectionProps {
+    head?: default_2.ReactNode;
+    body?: default_2.ReactNode;
+    className?: string;
+    headClassName?: string;
+    bodyClassName?: string;
+}
+
 export declare const SECURITY_DEPOSIT_REFUND = "security_deposit_refund";
 
 export declare const SegmentedControl: FC<SegmentedControlProps>;
@@ -1187,7 +1304,7 @@ export declare interface TooltipProps {
     disabled?: boolean;
     /**
      * The offset of the tooltip from the trigger in px. Only applicable for desktop tooltip
-     * @dwefault 4
+     * @default 4
      */
     offset?: number;
 }