design-system-silkhaus 3.8.0-beta.ST-1134.3 → 3.8.0-beta.ST-1134.4

package/dist/app/index.d.ts

@@ -1,164 +0,0 @@
-import { default as default_2 } from 'react';
-import { FC } from 'react';
-import { HTMLAttributes } from 'react';
-import { Placement } from '@floating-ui/react';
-import { PropsWithChildren } from 'react';
-import { ReactNode } 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<OptionType | Separator>;
-    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 declare const DesktopDropdown: FC<PropsWithChildren<DropdownProps>>;
-
-/**
- * A dropdown component to be used in webapps that display a list of options.
- * It will display a default dropdown by default. You can pass the trigger element as a prop if you want customized trigger
- */
-export declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
-
-export declare type DropdownOption = {
-    value: string;
-    label: string;
-    icon?: React.ReactNode;
-    thumbnailUrl?: string;
-    disabled?: boolean;
-};
-
-export declare interface DropdownProps {
-    /**
-     * The options of the dropdown
-     */
-    options: DropdownOption[];
-    /**
-     * The value of selected dropdown option
-     */
-    value?: string | string[];
-    /**
-     * The placeholder text for the dropdown, when no value is selected
-     */
-    placeholder?: string;
-    /**
-     * Callback when dropdown value is changed
-     */
-    onChange?: (selectedOption: DropdownOption | DropdownOption[]) => void;
-    /**
-     * Pass this callback function if you want to override the default selected value display text.
-     * By default the dropdown will display the label from the selected option
-     */
-    getSelectedValueDisplayText?: (selectedOption: DropdownOption | DropdownOption[]) => string;
-    /**
-     * Callback when dropdown is opened or closed
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-    /**
-     * The element that triggers the dropdown.
-     * This parameter is optional. By default it is a button with selected option label and chevron icon.
-     */
-    trigger?: ReactNode;
-    /**
-     * The direction in which the dropdown will open
-     * @default 'bottom-start'
-     */
-    placement?: Placement;
-    /**
-     * The trigger of the dropdown is wrapped in a container. This classname is added to that container
-     */
-    triggerContainerClassName?: string;
-    /**
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Adjust the height of the dropdown popover to fit the content in viewport
-     * @default true
-     */
-    adjustHeight?: boolean | number;
-    /**
-     * Adjust the width of the dropdown popover to fit the content in viewport
-     * @default true
-     */
-    adjustWidth?: boolean;
-    /**
-     * Indicates if the dropdown is multi-select
-     * @default false
-     */
-    isMultiSelect?: boolean;
-    /**
-     * The label for the close button for mobile popup
-     * @default 'Close'
-     */
-    closeButtonLabel?: string;
-}
-
-export declare const findOptionByValue: (value: string | string[] | undefined, options: DropdownOption[]) => DropdownOption | DropdownOption[] | undefined;
-
-export declare const MobileDropdown: FC<PropsWithChildren<DropdownProps>>;
-
-declare type OptionType = {
-    type?: 'option';
-    label: string;
-    value: string;
-    startIcon?: default_2.ReactNode;
-    endIcon?: default_2.ReactNode;
-};
-
-declare type Separator = {
-    type: 'separator';
-    component?: default_2.ReactNode;
-};
-
-export { }

package/dist/app/index.js

@@ -1,279 +0,0 @@
-var J = Object.defineProperty, K = Object.defineProperties;
-var L = Object.getOwnPropertyDescriptors;
-var C = Object.getOwnPropertySymbols;
-var Q = Object.prototype.hasOwnProperty, X = Object.prototype.propertyIsEnumerable;
-var I = (s, e, a) => e in s ? J(s, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : s[e] = a, x = (s, e) => {
-  for (var a in e || (e = {}))
-    Q.call(e, a) && I(s, a, e[a]);
-  if (C)
-    for (var a of C(e))
-      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-Fwn9xZMc.js";
-import { w as ks } from "../ButtonsGroupSelector-Fwn9xZMc.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";
-const M = ({
-  placement: s = "bottom-start",
-  trigger: e,
-  triggerContainerClassName: a,
-  disabled: l,
-  onOpenChange: o,
-  adjustHeight: n = !0,
-  adjustWidth: t = !0,
-  options: r,
-  getSelectedValueDisplayText: i = P,
-  placeholder: u,
-  value: f,
-  isMultiSelect: y,
-  onChange: w
-}) => {
-  const [p, N] = b(), h = typeof f == "undefined" ? p : f, c = typeof f == "undefined" ? N : () => {
-  }, [A, F] = b(!1), { refs: g, floatingStyles: B, context: j } = Z({
-    open: A,
-    onOpenChange: (v) => {
-      F(v), o && o(v);
-    },
-    middleware: [
-      _(8),
-      O({
-        crossAxis: s.includes("-"),
-        fallbackAxisSideDirection: "end"
-      }),
-      ss({ padding: 4 }),
-      es({
-        apply({ availableWidth: v, availableHeight: q, elements: z }) {
-          n && (z.floating.style.maxHeight = `${q - 4}px`), t && (z.floating.style.maxWidth = `${v - 4}px`);
-        }
-      })
-    ],
-    whileElementsMounted: os,
-    placement: s
-  }), E = ds(j), W = as(j), $ = ls(j), G = ts(j), { getReferenceProps: T, getFloatingProps: H } = rs([E, W, $, G]);
-  return e || (e = /* @__PURE__ */ d.jsx(
-    U,
-    {
-      selectedOption: D(h, r),
-      getSelectedValueDisplayText: i,
-      placeholder: u
-    }
-  )), l ? /* @__PURE__ */ d.jsx("div", { className: a, children: e }) : /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
-    /* @__PURE__ */ d.jsx(
-      "div",
-      k(x({
-        className: m("ds-cursor-pointer", a),
-        ref: g.setReference
-      }, T()), {
-        children: e
-      })
-    ),
-    A && /* @__PURE__ */ d.jsx(ns, { children: /* @__PURE__ */ d.jsx(
-      "div",
-      k(x({
-        ref: g.setFloating,
-        style: B
-      }, H()), {
-        className: m(
-          "ds-z-[29999] ds-flex ds-min-w-[200px] ds-flex-col ds-gap-1 ds-rounded ds-bg-white ds-p-2 ds-shadow-md",
-          n && "ds-overflow-y-auto",
-          t && "ds-overflow-x-auto"
-        ),
-        children: /* @__PURE__ */ d.jsx(
-          V,
-          {
-            isMultiSelect: y,
-            options: r,
-            value: h,
-            setValue: c,
-            setIsOpen: F,
-            onChange: w
-          }
-        )
-      })
-    ) })
-  ] });
-};
-M.displayName = "DesktopDropdown";
-const R = ({
-  trigger: s,
-  triggerContainerClassName: e,
-  disabled: a,
-  onOpenChange: l,
-  getSelectedValueDisplayText: o = P,
-  placeholder: n,
-  value: t,
-  options: r,
-  isMultiSelect: i,
-  onChange: u,
-  closeButtonLabel: f = "Close"
-}) => {
-  const [y, w] = b(), p = typeof t == "undefined" ? y : t, N = typeof t == "undefined" ? w : () => {
-  }, [h, c] = b(!1);
-  return s || (s = /* @__PURE__ */ d.jsx(
-    U,
-    {
-      selectedOption: D(p, r),
-      getSelectedValueDisplayText: o,
-      placeholder: n
-    }
-  )), a ? /* @__PURE__ */ d.jsx("div", { className: e, children: s }) : /* @__PURE__ */ d.jsxs(d.Fragment, { children: [
-    /* @__PURE__ */ d.jsx(
-      "div",
-      {
-        className: e,
-        onClick: () => {
-          c(!0), l && l(!0);
-        },
-        children: s
-      }
-    ),
-    /* @__PURE__ */ d.jsx(
-      is,
-      {
-        animation: "slideUp",
-        show: h,
-        handleClose: () => {
-          c(!1), l && l(!1);
-        },
-        contentClassName: m("ds-absolute ds-mb-0 ds-w-full"),
-        className: "ds-z-[29999]",
-        children: /* @__PURE__ */ d.jsx(
-          S,
-          {
-            onClose: () => {
-              c(!1), l && l(!1);
-            },
-            closeButtonLabel: f,
-            children: /* @__PURE__ */ d.jsx(
-              V,
-              {
-                isMultiSelect: i,
-                options: r,
-                value: p,
-                setValue: N,
-                setIsOpen: c,
-                onChange: u
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-};
-R.displayName = "MobileDropdown";
-const S = ({ onClose: s, closeButtonLabel: e, children: a }) => /* @__PURE__ */ d.jsxs("div", { className: "ds-mb-0 ds-flex ds-max-h-dvh ds-w-full ds-flex-col ds-bg-white", children: [
-  /* @__PURE__ */ d.jsxs("div", { className: "ds-flex ds-shrink-0 ds-items-center ds-justify-between ds-px-8 ds-py-4", children: [
-    /* @__PURE__ */ d.jsx(
-      "div",
-      {
-        onClick: s,
-        className: "ds-flex ds-size-5 ds-cursor-pointer ds-items-center ds-justify-center",
-        children: /* @__PURE__ */ d.jsx(fs, { className: "ds-size-4" })
-      }
-    ),
-    /* @__PURE__ */ d.jsx("div", { className: "ds-size-5" })
-  ] }),
-  /* @__PURE__ */ d.jsx("div", { className: "ds-grow ds-overflow-y-auto ds-p-4 ds-text-xSmallCalloutRegular", children: a }),
-  /* @__PURE__ */ d.jsx("div", { className: "ds-px-8 ds-py-4", children: /* @__PURE__ */ d.jsx(
-    xs,
-    {
-      buttonClassName: "ds-py-3",
-      onClick: s,
-      children: e
-    }
-  ) })
-] });
-S.displayName = "MobilePopoverContentWrapper";
-const U = ({
-  selectedOption: s,
-  getSelectedValueDisplayText: e,
-  placeholder: a
-}) => {
-  const l = !s || Array.isArray(s) && s.length === 0 ? a || "" : e(s);
-  return /* @__PURE__ */ d.jsx(
-    cs,
-    {
-      color: "secondary",
-      endIcon: /* @__PURE__ */ d.jsx(us, { className: "ds-size-4" }),
-      buttonClassName: "ds-justify-between",
-      children: l
-    }
-  );
-}, V = ({
-  options: s,
-  isMultiSelect: e,
-  value: a,
-  setValue: l,
-  setIsOpen: o,
-  onChange: n
-}) => s && s.map((t) => /* @__PURE__ */ d.jsx(
-  js,
-  {
-    onClick: () => {
-      let r;
-      if (e) {
-        const i = a || [];
-        i.includes(t.value) ? r = i.filter((u) => u !== t.value) : r = [...i, t.value];
-      } else
-        r = t.value, o(!1);
-      l(r), n && n(D(r, s));
-    },
-    option: t,
-    isSelected: Array.isArray(a) ? a.some((r) => r === t.value) : a === t.value,
-    showCheckbox: e
-  },
-  t.value
-)), js = ({
-  onClick: s,
-  option: e,
-  isSelected: a,
-  showCheckbox: l
-}) => /* @__PURE__ */ d.jsxs(
-  "div",
-  {
-    onClick: e.disabled ? void 0 : s,
-    className: m(
-      "ds-group ds-flex ds-min-h-[72px] ds-cursor-pointer ds-items-center ds-gap-4 ds-rounded ds-px-4 ds-py-2 ds-text-mediumSubHeadEmphasized hover:ds-bg-[#F6F8FC] ds-tablet:ds-min-h-[auto] ds-tablet:ds-gap-2 ds-tablet:ds-px-2 ds-desktop:ds-text-mediumFootnoteEmphasized",
-      !l && "ds-transition-[padding] ds-duration-300 hover:ds-px-4"
-    ),
-    children: [
-      e.thumbnailUrl && /* @__PURE__ */ d.jsx(
-        "img",
-        {
-          src: e.thumbnailUrl,
-          className: "ds-h-14 ds-w-14 ds-shrink-0 ds-rounded ds-object-cover group-hover:ds-pr-0 ds-tablet:ds-h-6 ds-tablet:ds-w-9 ds-tablet:ds-rounded-sm"
-        }
-      ),
-      e.icon,
-      /* @__PURE__ */ d.jsx(
-        "div",
-        {
-          className: m(
-            "ds-flex-grow",
-            !l && "ds-transition-[padding] ds-duration-300 group-hover:ds-pr-0 ds-tablet:ds-pr-4"
-          ),
-          children: e.label
-        }
-      ),
-      a && !l && /* @__PURE__ */ d.jsx(ms, { className: "ds-size-4 ds-shrink-0" }),
-      l && /* @__PURE__ */ d.jsx(
-        ps,
-        {
-          isChecked: a,
-          disabled: e.disabled
-        }
-      )
-    ]
-  }
-), D = (s, e) => Array.isArray(s) ? e.filter((a) => s.includes(a.value)) : e.find((a) => a.value === s), P = (s) => Array.isArray(s) ? s.map((e) => e.label).join(", ") : s.label;
-export {
-  cs as Button,
-  ks as ButtonsGroupSelector,
-  M as DesktopDropdown,
-  hs as Dropdown,
-  R as MobileDropdown,
-  D as findOptionByValue
-};