design-system-silkhaus 2.18.0-beta.app-components.4 → 2.18.0-beta.app-components.6

package/dist/app/index.d.ts

@@ -0,0 +1,66 @@
+import { default as default_2 } from 'react';
+import { HTMLAttributes } from 'react';
+
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    color?: 'primary' | 'secondary';
+    disabled?: true | false;
+    startIcon?: default_2.ReactNode;
+    endIcon?: default_2.ReactNode;
+    trackingId?: string;
+    selected?: boolean;
+    helperText?: string;
+    /**
+     * classes to apply on the outer most container which contains
+     * the button and the helper text
+     */
+    className?: string;
+    /**
+     * classes to apply on button element
+     */
+    buttonClassName?: string;
+    /**
+     * classes to apply on the helper text
+     */
+    helpterTextClassName?: string;
+}
+
+export declare const ButtonsGroupSelector: default_2.ForwardRefExoticComponent<ButtonsGroupSelectorProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ButtonsGroupSelectorProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    value?: Array<{
+        label: string;
+        value: string;
+        startIcon?: default_2.ReactNode;
+        endIcon?: default_2.ReactNode;
+    }>;
+    options: Array<{
+        label: string;
+        value: string;
+        startIcon?: default_2.ReactNode;
+        endIcon?: default_2.ReactNode;
+    }>;
+    onSelectionChange?: (selected: Array<{
+        label: string;
+        value: string;
+    }>) => void;
+    placeholder?: string;
+    selected?: boolean;
+    isMultiSelect?: boolean;
+    noDataError?: string;
+    buttonMinWidth?: string;
+    buttonWidth?: string;
+    minSelectionError?: string;
+    /**
+     * className for the wrapping div on the buttons
+     */
+    buttonsContainerClassName?: string;
+    /**
+     * className to applied on each button
+     */
+    buttonClassName?: string;
+}
+
+export { }

package/dist/app/index.js

@@ -0,0 +1 @@
+"use strict";var z=Object.defineProperty,P=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var N=(e,s,t)=>s in e?z(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,y=(e,s)=>{for(var t in s||(s={}))B.call(s,t)&&N(e,t,s[t]);if(b)for(var t of b(s))C.call(s,t)&&N(e,t,s[t]);return e},F=(e,s)=>P(e,G(s));var R=(e,s)=>{var t={};for(var r in e)B.call(e,r)&&s.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&b)for(var r of b(e))s.indexOf(r)<0&&C.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../utils-k1RektY7.cjs"),x=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}),$={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"},q={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"},_=x.forwardRef((h,E)=>{var c=h,{color:e="primary",disabled:s=!1,className:t,children:r,startIcon:o,selected:m,endIcon:i,trackingId:p,helperText:u,helpterTextClassName:j,buttonClassName:f}=c,g=R(c,["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({[q[e]]:m,[$[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:[o&&d.jsxRuntimeExports.jsx(D,{children:o}),r&&d.jsxRuntimeExports.jsx("div",{className:`${o?"ds-ml-1":""} ${i?"ds-mr-1":""}`,children:r}),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 I=x.forwardRef((e,s)=>{const S=e,{value:t,options:r,onSelectionChange:o=()=>{},isMultiSelect:m,noDataError:i,buttonMinWidth:p,buttonWidth:u,minSelectionError:j,buttonsContainerClassName:f,buttonClassName:g}=S,E=R(S,["value","options","onSelectionChange","isMultiSelect","noDataError","buttonMinWidth","buttonWidth","minSelectionError","buttonsContainerClassName","buttonClassName"]),[h,c]=x.useState([]),[w,v]=x.useState("");x.useEffect(()=>{t&&t.length?c(t):c([])},[t]);const T=(a,l)=>{l.currentTarget.blur();const n=[...h],k=n.findIndex(W=>W.value===a.value);k!==-1?n.length>1?(n.splice(k,1),v("")):v(j):(n.push(a),v("")),c(n),o(n)},M=(a,l)=>{l.currentTarget.blur();const n=[a];c(n),o(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:r.length>0?r.map(a=>d.jsxRuntimeExports.jsx(x.Fragment,{children:m?d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===a.value),onClick:l=>T(a,l),color:"secondary",style:{minWidth:p,width:u},className:g,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label}):d.jsxRuntimeExports.jsx(_,{selected:h.some(l=>l.value===a.value),onClick:l=>M(a,l),color:"secondary",style:{minWidth:p,width:u},className:g,startIcon:a.startIcon,endIcon:a.endIcon,children:a.label})},a.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})]}))});I.displayName="ButtonsGroupSelector";exports.Button=_;exports.ButtonsGroupSelector=I;

package/dist/index.d.ts

@@ -153,6 +153,10 @@ 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> {
@@ -628,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> {
@@ -844,6 +852,10 @@ 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