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

package/dist/app/index.d.ts

@@ -0,0 +1,70 @@
+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;
+        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;
+        value: string;
+    }>) => void;
+    placeholder?: string;
+    selected?: boolean;
+    isMultiSelect?: boolean;
+    noDataError?: string;
+    minWidthButton?: 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 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

@@ -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