brd-ui-kit 0.1.79 → 0.1.81

package/dist/components-input-contact-input-contact.js

@@ -1,8 +1,8 @@
 import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import { CaretDown as k } from "phosphor-strokes-icons/icons/CaretDown";
-import { CaretUp as N } from "phosphor-strokes-icons/icons/CaretUp";
-import { EnvelopeSimple as T } from "phosphor-strokes-icons/icons/EnvelopeSimple";
-import { MaxLogo as z } from "phosphor-strokes-icons/icons/MaxLogo";
+import { CaretUp as z } from "phosphor-strokes-icons/icons/CaretUp";
+import { EnvelopeSimple as N } from "phosphor-strokes-icons/icons/EnvelopeSimple";
+import { MaxLogo as T } from "phosphor-strokes-icons/icons/MaxLogo";
 import { Phone as S } from "phosphor-strokes-icons/icons/Phone";
 import { StrokeIcon as n } from "./components-icons-stroke-icon.js";
 import { TelegramLogo as D } from "phosphor-strokes-icons/icons/TelegramLogo";
@@ -88,8 +88,8 @@ const B = [
   phone: S,
   "telegram-logo": D,
   "whats-app-logo-filled": E,
-  "max-logo": z,
-  "envelope-simple": T
+  "max-logo": T,
+  "envelope-simple": N
 }, x = (t) => {
   switch (t) {
     case "max-logo":
@@ -103,7 +103,7 @@ const B = [
     case "whats-app-logo-filled":
       return {
         bgColor: "bg-[#00C202]",
-        textColor: "text-[#00C202]"
+        textColor: "text-primary-inverse-text"
       };
     default:
       return {};
@@ -142,7 +142,7 @@ const B = [
     }
   }, I = (o) => () => {
     y(o), w?.(o), p();
-  }, d = h[r], g = m ? N : k;
+  }, d = h[r], g = m ? z : k;
   return /* @__PURE__ */ f("div", { className: C("relative", t.classes?.container), children: [
     ["telegram-logo", "max-logo", "envelope-simple"].includes(r) ? /* @__PURE__ */ e(
       M,
@@ -216,7 +216,7 @@ const B = [
     m && /* @__PURE__ */ e(
       "div",
       {
-        className: `border-inp-hover-border bg-primary-bg absolute my-2 flex w-full
+        className: `border-inp-hover-border bg-primary-bg absolute z-100 my-2 flex w-full
             flex-col rounded-xl border`,
         ref: l,
         children: B.map(({ label: o, icon: i }) => {

package/dist/components-input-contact-input-contact.js.map

@@ -1 +1 @@
-{"version":3,"file":"components-input-contact-input-contact.js","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n  {\n    label: \"Мобильный\",\n    icon: \"phone\",\n  },\n  {\n    label: \"Telegram\",\n    icon: \"telegram-logo\",\n  },\n  {\n    label: \"WhatsApp\",\n    icon: \"whats-app-logo-filled\",\n  },\n  {\n    label: \"Max\",\n    icon: \"max-logo\",\n  },\n  {\n    label: \"E-mail\",\n    icon: \"envelope-simple\",\n  },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { CaretDown } from \"@/components/icons/CaretDown\";\nimport { CaretUp } from \"@/components/icons/CaretUp\";\nimport { EnvelopeSimple } from \"@/components/icons/EnvelopeSimple\";\nimport { MaxLogo } from \"@/components/icons/MaxLogo\";\nimport { Phone } from \"@/components/icons/Phone\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { TelegramLogo } from \"@/components/icons/TelegramLogo\";\nimport { WhatsAppLogoFilled } from \"@/components/icons/WhatsAppLogoFilled\";\nimport {\n  Button,\n  InputField,\n  InputPhone,\n  cn,\n  usePopupControls,\n  type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n  label: string;\n  icon: TypesChange;\n};\n\ntype TypesChange =\n  | \"phone\"\n  | \"telegram-logo\"\n  | \"whats-app-logo-filled\"\n  | \"max-logo\"\n  | \"envelope-simple\";\n\nconst contactIcons: Record<TypesChange, StrokeIconComponent> = {\n  phone: Phone,\n  \"telegram-logo\": TelegramLogo,\n  \"whats-app-logo-filled\": WhatsAppLogoFilled,\n  \"max-logo\": MaxLogo,\n  \"envelope-simple\": EnvelopeSimple,\n};\n\ntype Props = {\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    container?: string;\n  };\n  value?: string;\n  name?: string;\n  onTypeChange?: (type: TypesChange) => void;\n  inputProps: React.ComponentPropsWithRef<\"input\">;\n  inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: TypesChange) => {\n  switch (icon) {\n    case \"max-logo\":\n      return {\n        bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n      };\n\n    case \"telegram-logo\":\n      return {\n        bgColor: \"bg-[#289AD2]\",\n      };\n\n    case \"whats-app-logo-filled\":\n      return {\n        bgColor: \"bg-[#00C202]\",\n        textColor: \"text-[#00C202]\",\n      };\n\n    default:\n      return {};\n  }\n};\n\nconst getContactIconClasses = (icon: TypesChange) => ({\n  wrapper: cn(\n    `flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm\n    ${iconStyles(icon).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n    ${iconStyles(icon).textColor ?? \"text-primary-inverse-text\"}`,\n  ),\n  icon: \"size-5 shrink-0\",\n});\n\nexport const InputContact = (props: Props) => {\n  const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n  const [type, setType] = useState<TypesChange>(\"phone\");\n  const { isOpened, openPopup, closePopup } = usePopupControls();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n        closePopup();\n      }\n    };\n\n    if (isOpened) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpened, closePopup]);\n\n  const getPlaceholder = (type: TypesChange): string => {\n    switch (type) {\n      case \"phone\":\n        return \"+7 (999) 999-99-99\";\n      case \"telegram-logo\":\n        return \"@username\";\n      case \"whats-app-logo-filled\":\n        return \"+7 (999) 999-99-99\";\n      case \"max-logo\":\n        return \"ID пользователя Max\";\n      case \"envelope-simple\":\n        return \"example@mail.com\";\n      default:\n        return \"Введите значение\";\n    }\n  };\n\n  const handleTypeChange = (type: TypesChange) => {\n    return () => {\n      setType(type);\n      onTypeChange?.(type);\n      closePopup();\n    };\n  };\n\n  const SelectedIcon = contactIcons[type];\n  const ToggleIcon = isOpened ? CaretUp : CaretDown;\n\n  return (\n    <div className={cn(\"relative\", props.classes?.container)}>\n      {[\"telegram-logo\", \"max-logo\", \"envelope-simple\"].includes(type) ? (\n        <InputField\n          {...inputProps}\n          {...rest}\n          date={[\n            {\n              id: \"0\",\n              position: \"inline-start\",\n              component: (\n                <StrokeIcon\n                  icon={SelectedIcon}\n                  size=\"medium\"\n                  classes={getContactIconClasses(type)}\n                />\n              ),\n            },\n            {\n              id: \"1\",\n              position: \"inline-end\",\n              component: (\n                <StrokeIcon\n                  icon={ToggleIcon}\n                  size=\"medium\"\n                  className=\"cursor-pointer\"\n                  onClick={openPopup}\n                />\n              ),\n            },\n          ]}\n          placeholder={getPlaceholder(type)}\n        />\n      ) : (\n        <InputPhone\n          {...inputPhoneProps}\n          {...rest}\n          date={[\n            {\n              id: \"0\",\n              position: \"inline-start\",\n              component: (\n                <StrokeIcon\n                  icon={SelectedIcon}\n                  size=\"medium\"\n                  classes={getContactIconClasses(type)}\n                />\n              ),\n            },\n            {\n              id: \"1\",\n              position: \"inline-end\",\n              component: (\n                <StrokeIcon\n                  icon={ToggleIcon}\n                  size=\"medium\"\n                  className=\"cursor-pointer\"\n                  onClick={openPopup}\n                />\n              ),\n            },\n          ]}\n          placeholder={getPlaceholder(type)}\n        />\n      )}\n\n      {isOpened && (\n        <div\n          className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n            flex-col rounded-xl border\"\n          ref={wrapperRef}\n        >\n          {OPTIONS.map(({ label, icon }) => {\n            const OptionIcon = contactIcons[icon];\n\n            return (\n              <Button\n                key={label}\n                variant=\"ghost\"\n                className=\"flex w-full justify-start\"\n                type=\"button\"\n                onClick={handleTypeChange(icon)}\n              >\n                <StrokeIcon\n                  icon={OptionIcon}\n                  size=\"medium\"\n                  className=\"text-primary-inverse-text\"\n                  classes={getContactIconClasses(icon)}\n                />\n\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","contactIcons","Phone","TelegramLogo","WhatsAppLogoFilled","MaxLogo","EnvelopeSimple","iconStyles","icon","getContactIconClasses","cn","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","SelectedIcon","ToggleIcon","CaretUp","CaretDown","jsxs","jsx","InputField","StrokeIcon","InputPhone","label","OptionIcon","Button"],"mappings":"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"}
+{"version":3,"file":"components-input-contact-input-contact.js","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n  {\n    label: \"Мобильный\",\n    icon: \"phone\",\n  },\n  {\n    label: \"Telegram\",\n    icon: \"telegram-logo\",\n  },\n  {\n    label: \"WhatsApp\",\n    icon: \"whats-app-logo-filled\",\n  },\n  {\n    label: \"Max\",\n    icon: \"max-logo\",\n  },\n  {\n    label: \"E-mail\",\n    icon: \"envelope-simple\",\n  },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { CaretDown } from \"@/components/icons/CaretDown\";\nimport { CaretUp } from \"@/components/icons/CaretUp\";\nimport { EnvelopeSimple } from \"@/components/icons/EnvelopeSimple\";\nimport { MaxLogo } from \"@/components/icons/MaxLogo\";\nimport { Phone } from \"@/components/icons/Phone\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { TelegramLogo } from \"@/components/icons/TelegramLogo\";\nimport { WhatsAppLogoFilled } from \"@/components/icons/WhatsAppLogoFilled\";\nimport {\n  Button,\n  InputField,\n  InputPhone,\n  cn,\n  usePopupControls,\n  type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n  label: string;\n  icon: TypesChange;\n};\n\ntype TypesChange =\n  | \"phone\"\n  | \"telegram-logo\"\n  | \"whats-app-logo-filled\"\n  | \"max-logo\"\n  | \"envelope-simple\";\n\nconst contactIcons: Record<TypesChange, StrokeIconComponent> = {\n  phone: Phone,\n  \"telegram-logo\": TelegramLogo,\n  \"whats-app-logo-filled\": WhatsAppLogoFilled,\n  \"max-logo\": MaxLogo,\n  \"envelope-simple\": EnvelopeSimple,\n};\n\ntype Props = {\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    container?: string;\n  };\n  value?: string;\n  name?: string;\n  onTypeChange?: (type: TypesChange) => void;\n  inputProps: React.ComponentPropsWithRef<\"input\">;\n  inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: TypesChange) => {\n  switch (icon) {\n    case \"max-logo\":\n      return {\n        bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n      };\n\n    case \"telegram-logo\":\n      return {\n        bgColor: \"bg-[#289AD2]\",\n      };\n\n    case \"whats-app-logo-filled\":\n      return {\n        bgColor: \"bg-[#00C202]\",\n        textColor: \"text-primary-inverse-text\",\n      };\n\n    default:\n      return {};\n  }\n};\n\nconst getContactIconClasses = (icon: TypesChange) => ({\n  wrapper: cn(\n    `flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm\n    ${iconStyles(icon).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n    ${iconStyles(icon).textColor ?? \"text-primary-inverse-text\"}`,\n  ),\n  icon: \"size-5 shrink-0\",\n});\n\nexport const InputContact = (props: Props) => {\n  const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n  const [type, setType] = useState<TypesChange>(\"phone\");\n  const { isOpened, openPopup, closePopup } = usePopupControls();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n        closePopup();\n      }\n    };\n\n    if (isOpened) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpened, closePopup]);\n\n  const getPlaceholder = (type: TypesChange): string => {\n    switch (type) {\n      case \"phone\":\n        return \"+7 (999) 999-99-99\";\n      case \"telegram-logo\":\n        return \"@username\";\n      case \"whats-app-logo-filled\":\n        return \"+7 (999) 999-99-99\";\n      case \"max-logo\":\n        return \"ID пользователя Max\";\n      case \"envelope-simple\":\n        return \"example@mail.com\";\n      default:\n        return \"Введите значение\";\n    }\n  };\n\n  const handleTypeChange = (type: TypesChange) => {\n    return () => {\n      setType(type);\n      onTypeChange?.(type);\n      closePopup();\n    };\n  };\n\n  const SelectedIcon = contactIcons[type];\n  const ToggleIcon = isOpened ? CaretUp : CaretDown;\n\n  return (\n    <div className={cn(\"relative\", props.classes?.container)}>\n      {[\"telegram-logo\", \"max-logo\", \"envelope-simple\"].includes(type) ? (\n        <InputField\n          {...inputProps}\n          {...rest}\n          date={[\n            {\n              id: \"0\",\n              position: \"inline-start\",\n              component: (\n                <StrokeIcon\n                  icon={SelectedIcon}\n                  size=\"medium\"\n                  classes={getContactIconClasses(type)}\n                />\n              ),\n            },\n            {\n              id: \"1\",\n              position: \"inline-end\",\n              component: (\n                <StrokeIcon\n                  icon={ToggleIcon}\n                  size=\"medium\"\n                  className=\"cursor-pointer\"\n                  onClick={openPopup}\n                />\n              ),\n            },\n          ]}\n          placeholder={getPlaceholder(type)}\n        />\n      ) : (\n        <InputPhone\n          {...inputPhoneProps}\n          {...rest}\n          date={[\n            {\n              id: \"0\",\n              position: \"inline-start\",\n              component: (\n                <StrokeIcon\n                  icon={SelectedIcon}\n                  size=\"medium\"\n                  classes={getContactIconClasses(type)}\n                />\n              ),\n            },\n            {\n              id: \"1\",\n              position: \"inline-end\",\n              component: (\n                <StrokeIcon\n                  icon={ToggleIcon}\n                  size=\"medium\"\n                  className=\"cursor-pointer\"\n                  onClick={openPopup}\n                />\n              ),\n            },\n          ]}\n          placeholder={getPlaceholder(type)}\n        />\n      )}\n\n      {isOpened && (\n        <div\n          className=\"border-inp-hover-border bg-primary-bg absolute z-100 my-2 flex w-full\n            flex-col rounded-xl border\"\n          ref={wrapperRef}\n        >\n          {OPTIONS.map(({ label, icon }) => {\n            const OptionIcon = contactIcons[icon];\n\n            return (\n              <Button\n                key={label}\n                variant=\"ghost\"\n                className=\"flex w-full justify-start\"\n                type=\"button\"\n                onClick={handleTypeChange(icon)}\n              >\n                <StrokeIcon\n                  icon={OptionIcon}\n                  size=\"medium\"\n                  className=\"text-primary-inverse-text\"\n                  classes={getContactIconClasses(icon)}\n                />\n\n                {label}\n              </Button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","contactIcons","Phone","TelegramLogo","WhatsAppLogoFilled","MaxLogo","EnvelopeSimple","iconStyles","icon","getContactIconClasses","cn","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","SelectedIcon","ToggleIcon","CaretUp","CaretDown","jsxs","jsx","InputField","StrokeIcon","InputPhone","label","OptionIcon","Button"],"mappings":"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"}

package/dist/components-input-field-input-field.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("./components-ui-field-field.cjs"),j=require("./components-ui-input-input.cjs"),o=require("./components-ui-input-group-input-group.cjs"),m=({date:p=[],isValid:l,disabled:e=!1,label:s,description:c,classes:u,ref:d,...a})=>{const t={...l===!0&&!e&&{"aria-valid":!0},...l===!1&&!e&&{"aria-invalid":!0},disabled:e};return n.jsx(i.FieldSet,{className:u?.fieldset,children:n.jsx(i.FieldGroup,{className:u?.fieldgroup,children:n.jsxs(i.Field,{className:u?.field,children:[s&&n.jsx(i.FieldLabel,{...t,children:s}),p.length>0?n.jsxs(o.InputGroup,{"data-slot":!0,children:[n.jsx(o.InputGroupInput,{ref:d,...a,...t,disabled:e}),p.map(r=>n.jsx(o.InputGroupAddon,{align:r.position,children:r.component},r.id))]}):n.jsx(j.Input,{ref:d,...a,...t,disabled:e}),c&&n.jsx(i.FieldDescription,{...t,children:c})]})})})};exports.InputField=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("./components-ui-field-field.cjs"),m=require("./components-ui-input-input.cjs"),o=require("./components-ui-input-group-input-group.cjs"),j=({date:p=[],isValid:l,disabled:e=!1,label:s,description:c,classes:i,ref:d,...a})=>{const u={...l===!0&&!e&&{"aria-valid":!0},...l===!1&&!e&&{"aria-invalid":!0},disabled:e};return n.jsx(t.FieldSet,{className:i?.fieldset,children:n.jsx(t.FieldGroup,{className:i?.fieldgroup,children:n.jsxs(t.Field,{className:i?.field,children:[s&&n.jsx(t.FieldLabel,{...u,children:s}),p.length>0?n.jsxs(o.InputGroup,{"data-slot":!0,className:i?.inputgroup,children:[n.jsx(o.InputGroupInput,{ref:d,...a,...u,disabled:e}),p.map(r=>n.jsx(o.InputGroupAddon,{align:r.position,className:i?.inputaddon,children:r.component},r.id))]}):n.jsx(m.Input,{ref:d,...a,...u,disabled:e}),c&&n.jsx(t.FieldDescription,{...u,children:c})]})})})};exports.InputField=j;
 //# sourceMappingURL=components-input-field-input-field.cjs.map

package/dist/components-input-field-input-field.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components-input-field-input-field.cjs","sources":["../src/components/input-field/input-field.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"../ui/field\";\nimport { Input } from \"../ui/input\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"../ui/input-group\";\n\nexport type DateAddon = {\n  id: string | number;\n  position?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\" | null;\n  component: ReactNode;\n};\n\ntype BaseProps = {\n  date?: DateAddon[];\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n  };\n};\n\ntype InputFieldProps = BaseProps & ComponentPropsWithRef<\"input\">;\n\nexport const InputField = ({\n  date = [],\n  isValid,\n  disabled = false,\n  label,\n  description,\n  classes,\n  ref,\n  ...rest\n}: InputFieldProps) => {\n  const validationProps = {\n    ...(isValid === true && !disabled && { \"aria-valid\": true }),\n    ...(isValid === false && !disabled && { \"aria-invalid\": true }),\n    disabled,\n  };\n\n  return (\n    <FieldSet className={classes?.fieldset}>\n      <FieldGroup className={classes?.fieldgroup}>\n        <Field className={classes?.field}>\n          {label && <FieldLabel {...validationProps}>{label}</FieldLabel>}\n          {date.length > 0 ? (\n            <InputGroup data-slot>\n              <InputGroupInput\n                ref={ref}\n                {...rest}\n                {...validationProps}\n                disabled={disabled}\n              />\n              {date.map((e) => (\n                <InputGroupAddon\n                  key={e.id}\n                  align={e.position}\n                >\n                  {e.component}\n                </InputGroupAddon>\n              ))}\n            </InputGroup>\n          ) : (\n            <Input\n              ref={ref}\n              {...rest}\n              {...validationProps}\n              disabled={disabled}\n            />\n          )}\n          {description && (\n            <FieldDescription {...validationProps}>{description}</FieldDescription>\n          )}\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n};\n\ntype InputProps = InputFieldProps;\n\nexport type { InputFieldProps, InputProps };\n"],"names":["InputField","date","isValid","disabled","label","description","classes","ref","rest","validationProps","jsx","FieldSet","FieldGroup","jsxs","Field","FieldLabel","InputGroup","InputGroupInput","e","InputGroupAddon","Input","FieldDescription"],"mappings":"wQAyBaA,EAAa,CAAC,CACzB,KAAAC,EAAO,CAAA,EACP,QAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EACA,YAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACL,IAAuB,CACrB,MAAMC,EAAkB,CACtB,GAAIP,IAAY,IAAQ,CAACC,GAAY,CAAE,aAAc,EAAA,EACrD,GAAID,IAAY,IAAS,CAACC,GAAY,CAAE,eAAgB,EAAA,EACxD,SAAAA,CAAA,EAGF,OACEO,EAAAA,IAACC,EAAAA,SAAA,CAAS,UAAWL,GAAS,SAC5B,SAAAI,EAAAA,IAACE,aAAA,CAAW,UAAWN,GAAS,WAC9B,SAAAO,OAACC,EAAAA,MAAA,CAAM,UAAWR,GAAS,MACxB,SAAA,CAAAF,GAASM,EAAAA,IAACK,aAAA,CAAY,GAAGN,EAAkB,SAAAL,EAAM,EACjDH,EAAK,OAAS,EACbY,EAAAA,KAACG,EAAAA,WAAA,CAAW,YAAS,GACnB,SAAA,CAAAN,EAAAA,IAACO,EAAAA,gBAAA,CACC,IAAAV,EACC,GAAGC,EACH,GAAGC,EACJ,SAAAN,CAAA,CAAA,EAEDF,EAAK,IAAKiB,GACTR,EAAAA,IAACS,EAAAA,gBAAA,CAEC,MAAOD,EAAE,SAER,SAAAA,EAAE,SAAA,EAHEA,EAAE,EAAA,CAKV,CAAA,CAAA,CACH,EAEAR,EAAAA,IAACU,EAAAA,MAAA,CACC,IAAAb,EACC,GAAGC,EACH,GAAGC,EACJ,SAAAN,CAAA,CAAA,EAGHE,GACCK,EAAAA,IAACW,EAAAA,iBAAA,CAAkB,GAAGZ,EAAkB,SAAAJ,CAAA,CAAY,CAAA,CAAA,CAExD,EACF,EACF,CAEJ"}
+{"version":3,"file":"components-input-field-input-field.cjs","sources":["../src/components/input-field/input-field.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"../ui/field\";\nimport { Input } from \"../ui/input\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"../ui/input-group\";\n\nexport type DateAddon = {\n  id: string | number;\n  position?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\" | null;\n  component: ReactNode;\n};\n\ntype BaseProps = {\n  date?: DateAddon[];\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    inputgroup?: string;\n    inputaddon?: string;\n  };\n};\n\ntype InputFieldProps = BaseProps & ComponentPropsWithRef<\"input\">;\n\nexport const InputField = ({\n  date = [],\n  isValid,\n  disabled = false,\n  label,\n  description,\n  classes,\n  ref,\n  ...rest\n}: InputFieldProps) => {\n  const validationProps = {\n    ...(isValid === true && !disabled && { \"aria-valid\": true }),\n    ...(isValid === false && !disabled && { \"aria-invalid\": true }),\n    disabled,\n  };\n\n  return (\n    <FieldSet className={classes?.fieldset}>\n      <FieldGroup className={classes?.fieldgroup}>\n        <Field className={classes?.field}>\n          {label && <FieldLabel {...validationProps}>{label}</FieldLabel>}\n          {date.length > 0 ? (\n            <InputGroup\n              data-slot\n              className={classes?.inputgroup}\n            >\n              <InputGroupInput\n                ref={ref}\n                {...rest}\n                {...validationProps}\n                disabled={disabled}\n              />\n              {date.map((e) => (\n                <InputGroupAddon\n                  key={e.id}\n                  align={e.position}\n                  className={classes?.inputaddon}\n                >\n                  {e.component}\n                </InputGroupAddon>\n              ))}\n            </InputGroup>\n          ) : (\n            <Input\n              ref={ref}\n              {...rest}\n              {...validationProps}\n              disabled={disabled}\n            />\n          )}\n          {description && (\n            <FieldDescription {...validationProps}>{description}</FieldDescription>\n          )}\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n};\n\ntype InputProps = InputFieldProps;\n\nexport type { InputFieldProps, InputProps };\n"],"names":["InputField","date","isValid","disabled","label","description","classes","ref","rest","validationProps","jsx","FieldSet","FieldGroup","jsxs","Field","FieldLabel","InputGroup","InputGroupInput","e","InputGroupAddon","Input","FieldDescription"],"mappings":"wQA2BaA,EAAa,CAAC,CACzB,KAAAC,EAAO,CAAA,EACP,QAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EACA,YAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACL,IAAuB,CACrB,MAAMC,EAAkB,CACtB,GAAIP,IAAY,IAAQ,CAACC,GAAY,CAAE,aAAc,EAAA,EACrD,GAAID,IAAY,IAAS,CAACC,GAAY,CAAE,eAAgB,EAAA,EACxD,SAAAA,CAAA,EAGF,OACEO,EAAAA,IAACC,EAAAA,SAAA,CAAS,UAAWL,GAAS,SAC5B,SAAAI,EAAAA,IAACE,aAAA,CAAW,UAAWN,GAAS,WAC9B,SAAAO,OAACC,EAAAA,MAAA,CAAM,UAAWR,GAAS,MACxB,SAAA,CAAAF,GAASM,EAAAA,IAACK,aAAA,CAAY,GAAGN,EAAkB,SAAAL,EAAM,EACjDH,EAAK,OAAS,EACbY,EAAAA,KAACG,EAAAA,WAAA,CACC,YAAS,GACT,UAAWV,GAAS,WAEpB,SAAA,CAAAI,EAAAA,IAACO,EAAAA,gBAAA,CACC,IAAAV,EACC,GAAGC,EACH,GAAGC,EACJ,SAAAN,CAAA,CAAA,EAEDF,EAAK,IAAKiB,GACTR,EAAAA,IAACS,EAAAA,gBAAA,CAEC,MAAOD,EAAE,SACT,UAAWZ,GAAS,WAEnB,SAAAY,EAAE,SAAA,EAJEA,EAAE,EAAA,CAMV,CAAA,CAAA,CAAA,EAGHR,EAAAA,IAACU,EAAAA,MAAA,CACC,IAAAb,EACC,GAAGC,EACH,GAAGC,EACJ,SAAAN,CAAA,CAAA,EAGHE,GACCK,EAAAA,IAACW,EAAAA,iBAAA,CAAkB,GAAGZ,EAAkB,SAAAJ,CAAA,CAAY,CAAA,CAAA,CAExD,EACF,EACF,CAEJ"}

package/dist/components-input-field-input-field.js

@@ -1,52 +1,60 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { FieldSet as c, FieldGroup as f, Field as h, FieldLabel as F, FieldDescription as I } from "./components-ui-field-field.js";
-import { Input as s } from "./components-ui-input-input.js";
-import { InputGroup as G, InputGroupInput as g, InputGroupAddon as v } from "./components-ui-input-group-input-group.js";
+import { Input as N } from "./components-ui-input-input.js";
+import { InputGroup as g, InputGroupInput as G, InputGroupAddon as s } from "./components-ui-input-group-input-group.js";
 const D = ({
-  date: e = [],
-  isValid: p,
+  date: p = [],
+  isValid: e,
   disabled: i = !1,
   label: l,
   description: u,
-  classes: o,
-  ref: m,
-  ...a
+  classes: n,
+  ref: a,
+  ...m
 }) => {
-  const n = {
-    ...p === !0 && !i && { "aria-valid": !0 },
-    ...p === !1 && !i && { "aria-invalid": !0 },
+  const o = {
+    ...e === !0 && !i && { "aria-valid": !0 },
+    ...e === !1 && !i && { "aria-invalid": !0 },
     disabled: i
   };
-  return /* @__PURE__ */ r(c, { className: o?.fieldset, children: /* @__PURE__ */ r(f, { className: o?.fieldgroup, children: /* @__PURE__ */ d(h, { className: o?.field, children: [
-    l && /* @__PURE__ */ r(F, { ...n, children: l }),
-    e.length > 0 ? /* @__PURE__ */ d(G, { "data-slot": !0, children: [
-      /* @__PURE__ */ r(
-        g,
-        {
-          ref: m,
-          ...a,
-          ...n,
-          disabled: i
-        }
-      ),
-      e.map((t) => /* @__PURE__ */ r(
-        v,
-        {
-          align: t.position,
-          children: t.component
-        },
-        t.id
-      ))
-    ] }) : /* @__PURE__ */ r(
-      s,
+  return /* @__PURE__ */ r(c, { className: n?.fieldset, children: /* @__PURE__ */ r(f, { className: n?.fieldgroup, children: /* @__PURE__ */ d(h, { className: n?.field, children: [
+    l && /* @__PURE__ */ r(F, { ...o, children: l }),
+    p.length > 0 ? /* @__PURE__ */ d(
+      g,
       {
-        ref: m,
-        ...a,
-        ...n,
+        "data-slot": !0,
+        className: n?.inputgroup,
+        children: [
+          /* @__PURE__ */ r(
+            G,
+            {
+              ref: a,
+              ...m,
+              ...o,
+              disabled: i
+            }
+          ),
+          p.map((t) => /* @__PURE__ */ r(
+            s,
+            {
+              align: t.position,
+              className: n?.inputaddon,
+              children: t.component
+            },
+            t.id
+          ))
+        ]
+      }
+    ) : /* @__PURE__ */ r(
+      N,
+      {
+        ref: a,
+        ...m,
+        ...o,
         disabled: i
       }
     ),
-    u && /* @__PURE__ */ r(I, { ...n, children: u })
+    u && /* @__PURE__ */ r(I, { ...o, children: u })
   ] }) }) });
 };
 export {

package/dist/components-input-field-input-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"components-input-field-input-field.js","sources":["../src/components/input-field/input-field.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"../ui/field\";\nimport { Input } from \"../ui/input\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"../ui/input-group\";\n\nexport type DateAddon = {\n  id: string | number;\n  position?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\" | null;\n  component: ReactNode;\n};\n\ntype BaseProps = {\n  date?: DateAddon[];\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n  };\n};\n\ntype InputFieldProps = BaseProps & ComponentPropsWithRef<\"input\">;\n\nexport const InputField = ({\n  date = [],\n  isValid,\n  disabled = false,\n  label,\n  description,\n  classes,\n  ref,\n  ...rest\n}: InputFieldProps) => {\n  const validationProps = {\n    ...(isValid === true && !disabled && { \"aria-valid\": true }),\n    ...(isValid === false && !disabled && { \"aria-invalid\": true }),\n    disabled,\n  };\n\n  return (\n    <FieldSet className={classes?.fieldset}>\n      <FieldGroup className={classes?.fieldgroup}>\n        <Field className={classes?.field}>\n          {label && <FieldLabel {...validationProps}>{label}</FieldLabel>}\n          {date.length > 0 ? (\n            <InputGroup data-slot>\n              <InputGroupInput\n                ref={ref}\n                {...rest}\n                {...validationProps}\n                disabled={disabled}\n              />\n              {date.map((e) => (\n                <InputGroupAddon\n                  key={e.id}\n                  align={e.position}\n                >\n                  {e.component}\n                </InputGroupAddon>\n              ))}\n            </InputGroup>\n          ) : (\n            <Input\n              ref={ref}\n              {...rest}\n              {...validationProps}\n              disabled={disabled}\n            />\n          )}\n          {description && (\n            <FieldDescription {...validationProps}>{description}</FieldDescription>\n          )}\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n};\n\ntype InputProps = InputFieldProps;\n\nexport type { InputFieldProps, InputProps };\n"],"names":["InputField","date","isValid","disabled","label","description","classes","ref","rest","validationProps","jsx","FieldSet","FieldGroup","jsxs","Field","FieldLabel","InputGroup","InputGroupInput","e","InputGroupAddon","Input","FieldDescription"],"mappings":";;;;AAyBO,MAAMA,IAAa,CAAC;AAAA,EACzB,MAAAC,IAAO,CAAA;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAAuB;AACrB,QAAMC,IAAkB;AAAA,IACtB,GAAIP,MAAY,MAAQ,CAACC,KAAY,EAAE,cAAc,GAAA;AAAA,IACrD,GAAID,MAAY,MAAS,CAACC,KAAY,EAAE,gBAAgB,GAAA;AAAA,IACxD,UAAAA;AAAA,EAAA;AAGF,SACE,gBAAAO,EAACC,GAAA,EAAS,WAAWL,GAAS,UAC5B,UAAA,gBAAAI,EAACE,GAAA,EAAW,WAAWN,GAAS,YAC9B,UAAA,gBAAAO,EAACC,GAAA,EAAM,WAAWR,GAAS,OACxB,UAAA;AAAA,IAAAF,KAAS,gBAAAM,EAACK,GAAA,EAAY,GAAGN,GAAkB,UAAAL,GAAM;AAAA,IACjDH,EAAK,SAAS,IACb,gBAAAY,EAACG,GAAA,EAAW,aAAS,IACnB,UAAA;AAAA,MAAA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACC,GAAGC;AAAA,UACH,GAAGC;AAAA,UACJ,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDF,EAAK,IAAI,CAACiB,MACT,gBAAAR;AAAA,QAACS;AAAA,QAAA;AAAA,UAEC,OAAOD,EAAE;AAAA,UAER,UAAAA,EAAE;AAAA,QAAA;AAAA,QAHEA,EAAE;AAAA,MAAA,CAKV;AAAA,IAAA,EAAA,CACH,IAEA,gBAAAR;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,KAAAb;AAAA,QACC,GAAGC;AAAA,QACH,GAAGC;AAAA,QACJ,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHE,KACC,gBAAAK,EAACW,GAAA,EAAkB,GAAGZ,GAAkB,UAAAJ,EAAA,CAAY;AAAA,EAAA,EAAA,CAExD,GACF,GACF;AAEJ;"}
+{"version":3,"file":"components-input-field-input-field.js","sources":["../src/components/input-field/input-field.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"../ui/field\";\nimport { Input } from \"../ui/input\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"../ui/input-group\";\n\nexport type DateAddon = {\n  id: string | number;\n  position?: \"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\" | null;\n  component: ReactNode;\n};\n\ntype BaseProps = {\n  date?: DateAddon[];\n  isValid?: boolean;\n  label?: string;\n  description?: string;\n  classes?: {\n    fieldset?: string;\n    fieldgroup?: string;\n    field?: string;\n    inputgroup?: string;\n    inputaddon?: string;\n  };\n};\n\ntype InputFieldProps = BaseProps & ComponentPropsWithRef<\"input\">;\n\nexport const InputField = ({\n  date = [],\n  isValid,\n  disabled = false,\n  label,\n  description,\n  classes,\n  ref,\n  ...rest\n}: InputFieldProps) => {\n  const validationProps = {\n    ...(isValid === true && !disabled && { \"aria-valid\": true }),\n    ...(isValid === false && !disabled && { \"aria-invalid\": true }),\n    disabled,\n  };\n\n  return (\n    <FieldSet className={classes?.fieldset}>\n      <FieldGroup className={classes?.fieldgroup}>\n        <Field className={classes?.field}>\n          {label && <FieldLabel {...validationProps}>{label}</FieldLabel>}\n          {date.length > 0 ? (\n            <InputGroup\n              data-slot\n              className={classes?.inputgroup}\n            >\n              <InputGroupInput\n                ref={ref}\n                {...rest}\n                {...validationProps}\n                disabled={disabled}\n              />\n              {date.map((e) => (\n                <InputGroupAddon\n                  key={e.id}\n                  align={e.position}\n                  className={classes?.inputaddon}\n                >\n                  {e.component}\n                </InputGroupAddon>\n              ))}\n            </InputGroup>\n          ) : (\n            <Input\n              ref={ref}\n              {...rest}\n              {...validationProps}\n              disabled={disabled}\n            />\n          )}\n          {description && (\n            <FieldDescription {...validationProps}>{description}</FieldDescription>\n          )}\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n};\n\ntype InputProps = InputFieldProps;\n\nexport type { InputFieldProps, InputProps };\n"],"names":["InputField","date","isValid","disabled","label","description","classes","ref","rest","validationProps","jsx","FieldSet","FieldGroup","jsxs","Field","FieldLabel","InputGroup","InputGroupInput","e","InputGroupAddon","Input","FieldDescription"],"mappings":";;;;AA2BO,MAAMA,IAAa,CAAC;AAAA,EACzB,MAAAC,IAAO,CAAA;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAAuB;AACrB,QAAMC,IAAkB;AAAA,IACtB,GAAIP,MAAY,MAAQ,CAACC,KAAY,EAAE,cAAc,GAAA;AAAA,IACrD,GAAID,MAAY,MAAS,CAACC,KAAY,EAAE,gBAAgB,GAAA;AAAA,IACxD,UAAAA;AAAA,EAAA;AAGF,SACE,gBAAAO,EAACC,GAAA,EAAS,WAAWL,GAAS,UAC5B,UAAA,gBAAAI,EAACE,GAAA,EAAW,WAAWN,GAAS,YAC9B,UAAA,gBAAAO,EAACC,GAAA,EAAM,WAAWR,GAAS,OACxB,UAAA;AAAA,IAAAF,KAAS,gBAAAM,EAACK,GAAA,EAAY,GAAGN,GAAkB,UAAAL,GAAM;AAAA,IACjDH,EAAK,SAAS,IACb,gBAAAY;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,aAAS;AAAA,QACT,WAAWV,GAAS;AAAA,QAEpB,UAAA;AAAA,UAAA,gBAAAI;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,KAAAV;AAAA,cACC,GAAGC;AAAA,cACH,GAAGC;AAAA,cACJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDF,EAAK,IAAI,CAACiB,MACT,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cAEC,OAAOD,EAAE;AAAA,cACT,WAAWZ,GAAS;AAAA,cAEnB,UAAAY,EAAE;AAAA,YAAA;AAAA,YAJEA,EAAE;AAAA,UAAA,CAMV;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGH,gBAAAR;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,KAAAb;AAAA,QACC,GAAGC;AAAA,QACH,GAAGC;AAAA,QACJ,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHE,KACC,gBAAAK,EAACW,GAAA,EAAkB,GAAGZ,GAAkB,UAAAJ,EAAA,CAAY;AAAA,EAAA,EAAA,CAExD,GACF,GACF;AAEJ;"}

package/dist/components-transfer-list-transfer-list-card.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("./lib-utils.cjs"),f=require("./components-basic-tooltip-basic-tooltip.cjs"),i=require("./components-ui-button-button.cjs");require("./components-ui-button-button.styles.cjs");const t=require("./components-ui-icon-icon.cjs");require("phosphor-strokes-icons/icons");const o=require("./components-ui-typography-typography.cjs");require("./components-ui-typography-typography.styles.cjs");const N=({items:h,selectedSet:g,onSelectItem:u,onMoveItem:n,direction:x,headerIcon:l,headerButton:s,showHeaderTooltip:j=!1,showFooterIcons:d=!1})=>{const r=x==="right",p=r?"caret-right":"caret-left",y=r?"check-circle":"x-circle",m=r?"text-success-text":"text-error-text";return e.jsxs("div",{className:`bg-secondary-bg border-delicate-border flex h-full min-h-0 w-97.5
+        flex-col rounded-xl border`,children:[e.jsxs("div",{className:b.cn("bg-primary-bg flex items-center rounded-t-xl px-7.5 py-4",x==="left"?"gap-6":"justify-between"),children:[e.jsxs("div",{className:"w-fit",children:[s&&!r&&e.jsx(i.Button,{variant:"circleGhost",onClick:s.onClick,disabled:s.disabled,children:e.jsx(t.Icon,{type:s.icon,className:"text-placeholder-text"})}),j&&e.jsx(f.BasicTooltip,{place:"left",arrow:!0,text:e.jsx(o.Typography,{variant:"body-xxs-regular",className:"w-fit",children:"Переносите пункты туда или обратно с помощью клика на них"}),children:e.jsx(t.Icon,{type:"info",className:"text-placeholder-text"})}),l&&e.jsx(t.Icon,{type:l.type,className:l.className})]}),e.jsx(o.Typography,{variant:"body-lg-semibold",className:"text-primary-text",children:r?"Нужно для расчета":"Уже есть для расчета"}),s&&r&&e.jsx(i.Button,{variant:"circleGhost",onClick:s.onClick,disabled:s.disabled,children:e.jsx(t.Icon,{type:s.icon,className:"text-placeholder-text"})})]}),e.jsx("div",{className:`border-delicate-border flex min-h-0 flex-1 flex-col gap-2
+          overflow-y-auto border-t`,children:h.map(c=>e.jsxs("div",{className:b.cn(`bg-primary-bg flex cursor-pointer items-center justify-between gap-4 px-8
+              py-4`,g.has(c.id)&&"bg-primary-hover-bg"),onClick:()=>u(c.id),children:[e.jsxs("div",{className:"flex items-center gap-4",children:[d?e.jsx(i.Button,{variant:"circleGhost",onClick:a=>{a.stopPropagation(),n(c.id)},children:e.jsx(t.Icon,{type:p,className:"text-placeholder-text"})}):e.jsx(t.Icon,{type:y,size:25,strokeWidth:1.5,className:m}),e.jsx(o.Typography,{variant:"body-md-regular",className:"text-primary-text",children:c.label})]}),d?e.jsx(t.Icon,{type:y,size:25,strokeWidth:1.5,className:m}):e.jsx(i.Button,{variant:"circleGhost",onClick:a=>{a.stopPropagation(),n(c.id)},children:e.jsx(t.Icon,{type:p,className:"text-placeholder-text"})})]},c.id))})]})};exports.TransferListCard=N;
+//# sourceMappingURL=components-transfer-list-transfer-list-card.cjs.map

package/dist/components-transfer-list-transfer-list-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-transfer-list-transfer-list-card.cjs","sources":["../src/components/transfer-list/transfer-list-card.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { BasicTooltip } from \"../basic-tooltip\";\nimport { Button } from \"../ui/button\";\nimport { Icon } from \"../ui/icon\";\nimport { Typography } from \"../ui/typography\";\nimport type { TransferListItem } from \"./transfer-list\";\nimport type { IconTypes } from \"@/types/types\";\n\ntype Props = {\n  items: TransferListItem[];\n  selectedSet: Set<string>;\n  onSelectItem: (id: string) => void;\n  onMoveItem: (itemId: string) => void;\n  direction: \"left\" | \"right\";\n  headerIcon?: {\n    type: IconTypes;\n    className: string;\n  };\n  headerButton?: {\n    icon: IconTypes;\n    onClick: () => void;\n    disabled: boolean;\n  };\n  showHeaderTooltip?: boolean;\n  showFooterIcons?: boolean;\n};\n\nexport const TransferListCard = ({\n  items,\n  selectedSet,\n  onSelectItem,\n  onMoveItem,\n  direction,\n  headerIcon,\n  headerButton,\n  showHeaderTooltip = false,\n  showFooterIcons = false,\n}: Props) => {\n  const isMovingToRight = direction === \"right\";\n  const moveIcon = isMovingToRight ? \"caret-right\" : \"caret-left\";\n  const footerIcon = isMovingToRight ? \"check-circle\" : \"x-circle\";\n  const footerIconClassName = isMovingToRight ? \"text-success-text\" : \"text-error-text\";\n\n  return (\n    <div\n      className=\"bg-secondary-bg border-delicate-border flex h-full min-h-0 w-97.5\n        flex-col rounded-xl border\"\n    >\n      <div\n        className={cn(\n          \"bg-primary-bg flex items-center rounded-t-xl px-7.5 py-4\",\n          direction === \"left\" ? \"gap-6\" : \"justify-between\",\n        )}\n      >\n        <div className=\"w-fit\">\n          {headerButton && !isMovingToRight && (\n            <Button\n              variant=\"circleGhost\"\n              onClick={headerButton.onClick}\n              disabled={headerButton.disabled}\n            >\n              <Icon\n                type={headerButton.icon}\n                className=\"text-placeholder-text\"\n              />\n            </Button>\n          )}\n          {showHeaderTooltip && (\n            <BasicTooltip\n              place=\"left\"\n              arrow\n              text={\n                <Typography\n                  variant=\"body-xxs-regular\"\n                  className=\"w-fit\"\n                >\n                  Переносите пункты туда или обратно с помощью клика на них\n                </Typography>\n              }\n            >\n              <Icon\n                type=\"info\"\n                className=\"text-placeholder-text\"\n              />\n            </BasicTooltip>\n          )}\n          {headerIcon && (\n            <Icon\n              type={headerIcon.type}\n              className={headerIcon.className}\n            />\n          )}\n        </div>\n\n        <Typography\n          variant=\"body-lg-semibold\"\n          className=\"text-primary-text\"\n        >\n          {isMovingToRight ? \"Нужно для расчета\" : \"Уже есть для расчета\"}\n        </Typography>\n\n        {headerButton && isMovingToRight && (\n          <Button\n            variant=\"circleGhost\"\n            onClick={headerButton.onClick}\n            disabled={headerButton.disabled}\n          >\n            <Icon\n              type={headerButton.icon}\n              className=\"text-placeholder-text\"\n            />\n          </Button>\n        )}\n      </div>\n\n      <div\n        className=\"border-delicate-border flex min-h-0 flex-1 flex-col gap-2\n          overflow-y-auto border-t\"\n      >\n        {items.map((item) => (\n          <div\n            key={item.id}\n            className={cn(\n              `bg-primary-bg flex cursor-pointer items-center justify-between gap-4 px-8\n              py-4`,\n              selectedSet.has(item.id) && \"bg-primary-hover-bg\",\n            )}\n            onClick={() => onSelectItem(item.id)}\n          >\n            <div className=\"flex items-center gap-4\">\n              {showFooterIcons ? (\n                <Button\n                  variant=\"circleGhost\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onMoveItem(item.id);\n                  }}\n                >\n                  <Icon\n                    type={moveIcon}\n                    className=\"text-placeholder-text\"\n                  />\n                </Button>\n              ) : (\n                <Icon\n                  type={footerIcon}\n                  size={25}\n                  strokeWidth={1.5}\n                  className={footerIconClassName}\n                />\n              )}\n\n              <Typography\n                variant=\"body-md-regular\"\n                className=\"text-primary-text\"\n              >\n                {item.label}\n              </Typography>\n            </div>\n\n            {!showFooterIcons ? (\n              <Button\n                variant=\"circleGhost\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onMoveItem(item.id);\n                }}\n              >\n                <Icon\n                  type={moveIcon}\n                  className=\"text-placeholder-text\"\n                />\n              </Button>\n            ) : (\n              <Icon\n                type={footerIcon}\n                size={25}\n                strokeWidth={1.5}\n                className={footerIconClassName}\n              />\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["TransferListCard","items","selectedSet","onSelectItem","onMoveItem","direction","headerIcon","headerButton","showHeaderTooltip","showFooterIcons","isMovingToRight","moveIcon","footerIcon","footerIconClassName","jsxs","cn","jsx","Button","Icon","BasicTooltip","Typography","item","e"],"mappings":"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"}

package/dist/components-transfer-list-transfer-list-card.js

@@ -0,0 +1,194 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cn as h } from "./lib-utils.js";
+import { BasicTooltip as k } from "./components-basic-tooltip-basic-tooltip.js";
+import { Button as c } from "./components-ui-button-button.js";
+import "./components-ui-button-button.styles.js";
+import { Icon as t } from "./components-ui-icon-icon.js";
+import "phosphor-strokes-icons/icons";
+import { Typography as d } from "./components-ui-typography-typography.js";
+import "./components-ui-typography-typography.styles.js";
+const L = ({
+  items: y,
+  selectedSet: g,
+  onSelectItem: N,
+  onMoveItem: n,
+  direction: p,
+  headerIcon: s,
+  headerButton: r,
+  showHeaderTooltip: v = !1,
+  showFooterIcons: m = !1
+}) => {
+  const l = p === "right", x = l ? "caret-right" : "caret-left", f = l ? "check-circle" : "x-circle", b = l ? "text-success-text" : "text-error-text";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `bg-secondary-bg border-delicate-border flex h-full min-h-0 w-97.5
+        flex-col rounded-xl border`,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: h(
+              "bg-primary-bg flex items-center rounded-t-xl px-7.5 py-4",
+              p === "left" ? "gap-6" : "justify-between"
+            ),
+            children: [
+              /* @__PURE__ */ a("div", { className: "w-fit", children: [
+                r && !l && /* @__PURE__ */ e(
+                  c,
+                  {
+                    variant: "circleGhost",
+                    onClick: r.onClick,
+                    disabled: r.disabled,
+                    children: /* @__PURE__ */ e(
+                      t,
+                      {
+                        type: r.icon,
+                        className: "text-placeholder-text"
+                      }
+                    )
+                  }
+                ),
+                v && /* @__PURE__ */ e(
+                  k,
+                  {
+                    place: "left",
+                    arrow: !0,
+                    text: /* @__PURE__ */ e(
+                      d,
+                      {
+                        variant: "body-xxs-regular",
+                        className: "w-fit",
+                        children: "Переносите пункты туда или обратно с помощью клика на них"
+                      }
+                    ),
+                    children: /* @__PURE__ */ e(
+                      t,
+                      {
+                        type: "info",
+                        className: "text-placeholder-text"
+                      }
+                    )
+                  }
+                ),
+                s && /* @__PURE__ */ e(
+                  t,
+                  {
+                    type: s.type,
+                    className: s.className
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                d,
+                {
+                  variant: "body-lg-semibold",
+                  className: "text-primary-text",
+                  children: l ? "Нужно для расчета" : "Уже есть для расчета"
+                }
+              ),
+              r && l && /* @__PURE__ */ e(
+                c,
+                {
+                  variant: "circleGhost",
+                  onClick: r.onClick,
+                  disabled: r.disabled,
+                  children: /* @__PURE__ */ e(
+                    t,
+                    {
+                      type: r.icon,
+                      className: "text-placeholder-text"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `border-delicate-border flex min-h-0 flex-1 flex-col gap-2
+          overflow-y-auto border-t`,
+            children: y.map((i) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: h(
+                  `bg-primary-bg flex cursor-pointer items-center justify-between gap-4 px-8
+              py-4`,
+                  g.has(i.id) && "bg-primary-hover-bg"
+                ),
+                onClick: () => N(i.id),
+                children: [
+                  /* @__PURE__ */ a("div", { className: "flex items-center gap-4", children: [
+                    m ? /* @__PURE__ */ e(
+                      c,
+                      {
+                        variant: "circleGhost",
+                        onClick: (o) => {
+                          o.stopPropagation(), n(i.id);
+                        },
+                        children: /* @__PURE__ */ e(
+                          t,
+                          {
+                            type: x,
+                            className: "text-placeholder-text"
+                          }
+                        )
+                      }
+                    ) : /* @__PURE__ */ e(
+                      t,
+                      {
+                        type: f,
+                        size: 25,
+                        strokeWidth: 1.5,
+                        className: b
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      d,
+                      {
+                        variant: "body-md-regular",
+                        className: "text-primary-text",
+                        children: i.label
+                      }
+                    )
+                  ] }),
+                  m ? /* @__PURE__ */ e(
+                    t,
+                    {
+                      type: f,
+                      size: 25,
+                      strokeWidth: 1.5,
+                      className: b
+                    }
+                  ) : /* @__PURE__ */ e(
+                    c,
+                    {
+                      variant: "circleGhost",
+                      onClick: (o) => {
+                        o.stopPropagation(), n(i.id);
+                      },
+                      children: /* @__PURE__ */ e(
+                        t,
+                        {
+                          type: x,
+                          className: "text-placeholder-text"
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              i.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  L as TransferListCard
+};
+//# sourceMappingURL=components-transfer-list-transfer-list-card.js.map

package/dist/components-transfer-list-transfer-list-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-transfer-list-transfer-list-card.js","sources":["../src/components/transfer-list/transfer-list-card.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { BasicTooltip } from \"../basic-tooltip\";\nimport { Button } from \"../ui/button\";\nimport { Icon } from \"../ui/icon\";\nimport { Typography } from \"../ui/typography\";\nimport type { TransferListItem } from \"./transfer-list\";\nimport type { IconTypes } from \"@/types/types\";\n\ntype Props = {\n  items: TransferListItem[];\n  selectedSet: Set<string>;\n  onSelectItem: (id: string) => void;\n  onMoveItem: (itemId: string) => void;\n  direction: \"left\" | \"right\";\n  headerIcon?: {\n    type: IconTypes;\n    className: string;\n  };\n  headerButton?: {\n    icon: IconTypes;\n    onClick: () => void;\n    disabled: boolean;\n  };\n  showHeaderTooltip?: boolean;\n  showFooterIcons?: boolean;\n};\n\nexport const TransferListCard = ({\n  items,\n  selectedSet,\n  onSelectItem,\n  onMoveItem,\n  direction,\n  headerIcon,\n  headerButton,\n  showHeaderTooltip = false,\n  showFooterIcons = false,\n}: Props) => {\n  const isMovingToRight = direction === \"right\";\n  const moveIcon = isMovingToRight ? \"caret-right\" : \"caret-left\";\n  const footerIcon = isMovingToRight ? \"check-circle\" : \"x-circle\";\n  const footerIconClassName = isMovingToRight ? \"text-success-text\" : \"text-error-text\";\n\n  return (\n    <div\n      className=\"bg-secondary-bg border-delicate-border flex h-full min-h-0 w-97.5\n        flex-col rounded-xl border\"\n    >\n      <div\n        className={cn(\n          \"bg-primary-bg flex items-center rounded-t-xl px-7.5 py-4\",\n          direction === \"left\" ? \"gap-6\" : \"justify-between\",\n        )}\n      >\n        <div className=\"w-fit\">\n          {headerButton && !isMovingToRight && (\n            <Button\n              variant=\"circleGhost\"\n              onClick={headerButton.onClick}\n              disabled={headerButton.disabled}\n            >\n              <Icon\n                type={headerButton.icon}\n                className=\"text-placeholder-text\"\n              />\n            </Button>\n          )}\n          {showHeaderTooltip && (\n            <BasicTooltip\n              place=\"left\"\n              arrow\n              text={\n                <Typography\n                  variant=\"body-xxs-regular\"\n                  className=\"w-fit\"\n                >\n                  Переносите пункты туда или обратно с помощью клика на них\n                </Typography>\n              }\n            >\n              <Icon\n                type=\"info\"\n                className=\"text-placeholder-text\"\n              />\n            </BasicTooltip>\n          )}\n          {headerIcon && (\n            <Icon\n              type={headerIcon.type}\n              className={headerIcon.className}\n            />\n          )}\n        </div>\n\n        <Typography\n          variant=\"body-lg-semibold\"\n          className=\"text-primary-text\"\n        >\n          {isMovingToRight ? \"Нужно для расчета\" : \"Уже есть для расчета\"}\n        </Typography>\n\n        {headerButton && isMovingToRight && (\n          <Button\n            variant=\"circleGhost\"\n            onClick={headerButton.onClick}\n            disabled={headerButton.disabled}\n          >\n            <Icon\n              type={headerButton.icon}\n              className=\"text-placeholder-text\"\n            />\n          </Button>\n        )}\n      </div>\n\n      <div\n        className=\"border-delicate-border flex min-h-0 flex-1 flex-col gap-2\n          overflow-y-auto border-t\"\n      >\n        {items.map((item) => (\n          <div\n            key={item.id}\n            className={cn(\n              `bg-primary-bg flex cursor-pointer items-center justify-between gap-4 px-8\n              py-4`,\n              selectedSet.has(item.id) && \"bg-primary-hover-bg\",\n            )}\n            onClick={() => onSelectItem(item.id)}\n          >\n            <div className=\"flex items-center gap-4\">\n              {showFooterIcons ? (\n                <Button\n                  variant=\"circleGhost\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onMoveItem(item.id);\n                  }}\n                >\n                  <Icon\n                    type={moveIcon}\n                    className=\"text-placeholder-text\"\n                  />\n                </Button>\n              ) : (\n                <Icon\n                  type={footerIcon}\n                  size={25}\n                  strokeWidth={1.5}\n                  className={footerIconClassName}\n                />\n              )}\n\n              <Typography\n                variant=\"body-md-regular\"\n                className=\"text-primary-text\"\n              >\n                {item.label}\n              </Typography>\n            </div>\n\n            {!showFooterIcons ? (\n              <Button\n                variant=\"circleGhost\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onMoveItem(item.id);\n                }}\n              >\n                <Icon\n                  type={moveIcon}\n                  className=\"text-placeholder-text\"\n                />\n              </Button>\n            ) : (\n              <Icon\n                type={footerIcon}\n                size={25}\n                strokeWidth={1.5}\n                className={footerIconClassName}\n              />\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["TransferListCard","items","selectedSet","onSelectItem","onMoveItem","direction","headerIcon","headerButton","showHeaderTooltip","showFooterIcons","isMovingToRight","moveIcon","footerIcon","footerIconClassName","jsxs","cn","jsx","Button","Icon","BasicTooltip","Typography","item","e"],"mappings":"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"}

package/dist/components-transfer-list-transfer-list.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),t=require("react"),M=require("./components-transfer-list-transfer-list-card.cjs"),b=require("./components-ui-button-button.cjs");require("./components-ui-button-button.styles.cjs");const p=require("./components-ui-icon-icon.cjs");require("phosphor-strokes-icons/icons");const d=!1,f=!0,L=({list:n,onChange:h})=>{const l=t.useMemo(()=>n.filter(e=>!e.inTarget),[n]),a=t.useMemo(()=>n.filter(e=>e.inTarget),[n]),[o,m]=t.useState([]),g=t.useMemo(()=>new Set(o),[o]),T=t.useMemo(()=>new Set(l.map(e=>e.id)),[l]),I=t.useMemo(()=>new Set(a.map(e=>e.id)),[a]),C=t.useMemo(()=>o.filter(e=>T.has(e)).length,[o,T]),_=t.useMemo(()=>o.filter(e=>I.has(e)).length,[o,I]),x=t.useCallback(e=>{m(s=>s.includes(e)?s.filter(i=>i!==e):[...s,e])},[]),r=t.useCallback((e,s)=>{const i=s??o;if(i.length===0)return;const v=new Set(i),w=n.map(u=>!v.has(u.id)||u.inTarget===e?u:{...u,inTarget:e});h(w),m([])},[n,h,o]),S=t.useCallback(e=>{r(e,n.filter(s=>s.inTarget!==e).map(s=>s.id))},[n,r]),j=t.useCallback(e=>{r(f,[e])},[r]),k=t.useCallback(e=>{r(d,[e])},[r]);return c.jsxs("div",{className:"flex h-full min-h-0 w-fit gap-6",children:[c.jsx(M.TransferListCard,{items:l,selectedSet:g,onSelectItem:x,onMoveItem:j,direction:"right",showHeaderTooltip:!0,headerButton:{icon:"caret-right",onClick:()=>S(f),disabled:l.length===0},showFooterIcons:!1}),c.jsxs("div",{className:"flex h-full flex-col justify-center gap-8",children:[c.jsx(b.Button,{variant:"circle",onClick:()=>r(f),disabled:C===0,children:c.jsx(p.Icon,{type:"caret-right",className:"text-placeholder-text"})}),c.jsx(b.Button,{variant:"circle",onClick:()=>r(d),disabled:_===0,children:c.jsx(p.Icon,{type:"caret-left",className:"text-placeholder-text"})})]}),c.jsx(M.TransferListCard,{items:a,selectedSet:g,onSelectItem:x,onMoveItem:k,direction:"left",headerButton:{icon:"caret-left",onClick:()=>S(d),disabled:a.length===0},showFooterIcons:!0})]})};exports.TransferList=L;
+//# sourceMappingURL=components-transfer-list-transfer-list.cjs.map

package/dist/components-transfer-list-transfer-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-transfer-list-transfer-list.cjs","sources":["../src/components/transfer-list/transfer-list.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport { TransferListCard } from \"./transfer-list-card\";\nimport { Button } from \"../ui/button\";\nimport { Icon } from \"../ui/icon\";\n\nexport type TransferListItem = {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  inTarget: boolean;\n};\n\ntype Props = {\n  list: TransferListItem[];\n  onChange: (item: TransferListItem[]) => void;\n};\n\nconst MOVE_TO_LEFT = false;\nconst MOVE_TO_RIGHT = true;\n\nexport const TransferList = ({ list, onChange }: Props) => {\n  const leftItems = useMemo(() => list.filter((i) => !i.inTarget), [list]);\n  const rightItems = useMemo(() => list.filter((i) => i.inTarget), [list]);\n\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);\n  const leftIdSet = useMemo(() => new Set(leftItems.map((item) => item.id)), [leftItems]);\n  const rightIdSet = useMemo(\n    () => new Set(rightItems.map((item) => item.id)),\n    [rightItems],\n  );\n\n  const selectedLeftCount = useMemo(\n    () => selectedIds.filter((id) => leftIdSet.has(id)).length,\n    [selectedIds, leftIdSet],\n  );\n  const selectedRightCount = useMemo(\n    () => selectedIds.filter((id) => rightIdSet.has(id)).length,\n    [selectedIds, rightIdSet],\n  );\n\n  const onSelectItem = useCallback((id: string) => {\n    setSelectedIds((prev) =>\n      prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id],\n    );\n  }, []);\n\n  const moveSelectedItems = useCallback(\n    (move: boolean, ids?: string[]) => {\n      const resolvedIds = ids ?? selectedIds;\n      if (resolvedIds.length === 0) return;\n\n      const idsToMoveSet = new Set(resolvedIds);\n\n      const newData = list.map((item) => {\n        if (!idsToMoveSet.has(item.id) || item.inTarget === move) {\n          return item;\n        }\n\n        return {\n          ...item,\n          inTarget: move,\n        };\n      });\n\n      onChange(newData);\n      setSelectedIds([]);\n    },\n    [list, onChange, selectedIds],\n  );\n\n  const allMoveSelectedItems = useCallback(\n    (move: boolean) => {\n      moveSelectedItems(\n        move,\n        list.filter((item) => item.inTarget !== move).map((item) => item.id),\n      );\n    },\n    [list, moveSelectedItems],\n  );\n\n  const moveToRight = useCallback(\n    (itemId: string) => {\n      moveSelectedItems(MOVE_TO_RIGHT, [itemId]);\n    },\n    [moveSelectedItems],\n  );\n\n  const moveToLeft = useCallback(\n    (itemId: string) => {\n      moveSelectedItems(MOVE_TO_LEFT, [itemId]);\n    },\n    [moveSelectedItems],\n  );\n\n  return (\n    <div className=\"flex h-full min-h-0 w-fit gap-6\">\n      <TransferListCard\n        items={leftItems}\n        selectedSet={selectedSet}\n        onSelectItem={onSelectItem}\n        onMoveItem={moveToRight}\n        direction=\"right\"\n        showHeaderTooltip={true}\n        headerButton={{\n          icon: \"caret-right\",\n          onClick: () => allMoveSelectedItems(MOVE_TO_RIGHT),\n          disabled: leftItems.length === 0,\n        }}\n        showFooterIcons={false}\n      />\n\n      <div className=\"flex h-full flex-col justify-center gap-8\">\n        <Button\n          variant=\"circle\"\n          onClick={() => moveSelectedItems(MOVE_TO_RIGHT)}\n          disabled={selectedLeftCount === 0}\n        >\n          <Icon\n            type=\"caret-right\"\n            className=\"text-placeholder-text\"\n          />\n        </Button>\n\n        <Button\n          variant=\"circle\"\n          onClick={() => moveSelectedItems(MOVE_TO_LEFT)}\n          disabled={selectedRightCount === 0}\n        >\n          <Icon\n            type=\"caret-left\"\n            className=\"text-placeholder-text\"\n          />\n        </Button>\n      </div>\n\n      <TransferListCard\n        items={rightItems}\n        selectedSet={selectedSet}\n        onSelectItem={onSelectItem}\n        onMoveItem={moveToLeft}\n        direction=\"left\"\n        headerButton={{\n          icon: \"caret-left\",\n          onClick: () => allMoveSelectedItems(MOVE_TO_LEFT),\n          disabled: rightItems.length === 0,\n        }}\n        showFooterIcons\n      />\n    </div>\n  );\n};\n"],"names":["MOVE_TO_LEFT","MOVE_TO_RIGHT","TransferList","list","onChange","leftItems","useMemo","i","rightItems","selectedIds","setSelectedIds","useState","selectedSet","leftIdSet","item","rightIdSet","selectedLeftCount","id","selectedRightCount","onSelectItem","useCallback","prev","itemId","moveSelectedItems","move","ids","resolvedIds","idsToMoveSet","newData","allMoveSelectedItems","moveToRight","moveToLeft","jsxs","jsx","TransferListCard","Button","Icon"],"mappings":"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"}