@jenesei-software/jenesei-kit-react 1.3.40 → 2.0.0

package/build/component-BUkf5TLO.js

@@ -1,170 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
-import { ac as InputOTPWrapper, bk as ErrorMessage } from "./context.constants-BWLe7YHv.js";
-import { useState, useRef, useCallback } from "react";
-import { I as Input } from "./component-DfSTPgfj.js";
-const InputOTP = (props) => {
-  var _a;
-  const [otp, setOtp] = useState(new Array(props.length).fill(""));
-  const inputsRef = useRef([]);
-  const wrapperRef = useRef(null);
-  const handlePaste = useCallback(
-    (index, e) => {
-      e.preventDefault();
-      const pasteData = e.clipboardData.getData("Text");
-      const digits = pasteData.replace(/\D/g, "").split("");
-      if (!digits.length) return;
-      setOtp((prevOtp) => {
-        var _a2, _b;
-        const newOtp = [...prevOtp];
-        let currentIndex = index;
-        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {
-          newOtp[currentIndex] = digits[i];
-          currentIndex++;
-        }
-        const joined = newOtp.join("");
-        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, joined);
-        if (newOtp.every((char) => char !== "")) {
-          (_b = props.onComplete) == null ? void 0 : _b.call(props, joined);
-        }
-        setTimeout(() => {
-          var _a3, _b2;
-          const firstEmpty = newOtp.findIndex((char) => char === "");
-          if (firstEmpty !== -1) {
-            (_a3 = inputsRef.current[firstEmpty]) == null ? void 0 : _a3.focus();
-          } else if (currentIndex < newOtp.length) {
-            (_b2 = inputsRef.current[currentIndex]) == null ? void 0 : _b2.focus();
-          }
-        }, 0);
-        return newOtp;
-      });
-    },
-    [props]
-  );
-  const handleChange = useCallback(
-    (index, value) => {
-      if (!/^\d*$/.test(value)) return;
-      setOtp((prevOtp) => {
-        var _a2;
-        const newOtp = [...prevOtp];
-        newOtp[index] = value.slice(-1);
-        if (props.onChange) {
-          props.onChange(newOtp.join(""));
-        }
-        if (newOtp.every((char) => char !== "")) {
-          (_a2 = props.onComplete) == null ? void 0 : _a2.call(props, newOtp.join(""));
-        }
-        if (value && index < prevOtp.length - 1) {
-          setTimeout(() => {
-            var _a3;
-            (_a3 = inputsRef.current[index + 1]) == null ? void 0 : _a3.focus();
-          }, 0);
-        }
-        return newOtp;
-      });
-    },
-    [props]
-  );
-  const handleKeyDown = (index, e) => {
-    const input = inputsRef.current[index];
-    if (!input) return;
-    if (e.key === "ArrowRight") {
-      const nextIndex = index < otp.length - 1 ? index + 1 : 0;
-      const nextInput = inputsRef.current[nextIndex];
-      if (nextInput) {
-        nextInput.focus();
-        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);
-      }
-    }
-    if (e.key === "ArrowLeft") {
-      const prevIndex = index > 0 ? index - 1 : otp.length - 1;
-      const prevInput = inputsRef.current[prevIndex];
-      if (prevInput) {
-        prevInput.focus();
-        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);
-      }
-    }
-    if (e.key === "Backspace") {
-      if (input.value) {
-        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);
-      } else if (index > 0) {
-        setTimeout(() => {
-          const prevInput = inputsRef.current[index - 1];
-          if (prevInput) {
-            prevInput.focus();
-            prevInput.setSelectionRange(0, prevInput.value.length);
-          }
-        }, 0);
-      }
-    }
-  };
-  const handleFocusInput = useCallback((e) => {
-    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      InputOTPWrapper,
-      {
-        $error: props.error,
-        $size: props.size,
-        id: props.id,
-        ref: wrapperRef,
-        onBlur: (e) => {
-          setTimeout(() => {
-            var _a2;
-            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {
-              (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
-            }
-          }, 0);
-        },
-        onFocus: (e) => {
-          setTimeout(() => {
-            var _a2, _b;
-            if ((_a2 = wrapperRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
-              (_b = props.onFocus) == null ? void 0 : _b.call(props, e);
-            }
-          }, 0);
-        },
-        $sx: props.sx,
-        children: otp.map((digit, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Input,
-          {
-            isWidthAsHeight: true,
-            tabIndex: index + 1,
-            ref: (el) => {
-              inputsRef.current[index] = el;
-            },
-            variety: "standard",
-            type: "text",
-            inputMode: "numeric",
-            maxLength: 1,
-            value: digit,
-            onFocus: handleFocusInput,
-            onPaste: (e) => handlePaste(index, e),
-            onChange: (value) => handleChange(index, value),
-            onKeyDown: (e) => handleKeyDown(index, e),
-            genre: props.genre,
-            size: props.size,
-            font: props.font
-          },
-          index
-        ))
-      }
-    ),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ErrorMessage,
-      {
-        ...props.error,
-        size: (props == null ? void 0 : props.error.size) ?? props.size,
-        font: {
-          size: 12,
-          weight: 400,
-          family: (_a = props.font) == null ? void 0 : _a.family
-        }
-      }
-    ) : null
-  ] });
-};
-export {
-  InputOTP as I
-};
-//# sourceMappingURL=component-BUkf5TLO.js.map

package/build/component-BUkf5TLO.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-BUkf5TLO.js","sources":["../src/components/input-otp/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/styles/error';\n\nimport { ClipboardEvent, FocusEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';\n\nimport { Input } from '../input';\nimport { InputOTPProps, InputOTPWrapper } from '.';\n\nexport const InputOTP = (props: InputOTPProps) => {\n  const [otp, setOtp] = useState<string[]>(new Array(props.length).fill(''));\n  const inputsRef = useRef<(HTMLInputElement | null)[]>([]);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const handlePaste = useCallback(\n    (index: number, e: ClipboardEvent<HTMLInputElement>) => {\n      e.preventDefault();\n\n      const pasteData = e.clipboardData.getData('Text');\n      const digits = pasteData.replace(/\\D/g, '').split('');\n\n      if (!digits.length) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        let currentIndex = index;\n\n        for (let i = 0; i < digits.length && currentIndex < newOtp.length; i++) {\n          newOtp[currentIndex] = digits[i];\n          currentIndex++;\n        }\n\n        const joined = newOtp.join('');\n\n        props.onChange?.(joined);\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(joined);\n        }\n\n        setTimeout(() => {\n          const firstEmpty = newOtp.findIndex((char) => char === '');\n          if (firstEmpty !== -1) {\n            inputsRef.current[firstEmpty]?.focus();\n          } else if (currentIndex < newOtp.length) {\n            inputsRef.current[currentIndex]?.focus();\n          }\n        }, 0);\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleChange = useCallback(\n    (index: number, value: string) => {\n      if (!/^\\d*$/.test(value)) return;\n\n      setOtp((prevOtp) => {\n        const newOtp = [...prevOtp];\n        newOtp[index] = value.slice(-1);\n\n        if (props.onChange) {\n          props.onChange(newOtp.join(''));\n        }\n\n        if (newOtp.every((char) => char !== '')) {\n          props.onComplete?.(newOtp.join(''));\n        }\n\n        if (value && index < prevOtp.length - 1) {\n          setTimeout(() => {\n            inputsRef.current[index + 1]?.focus();\n          }, 0);\n        }\n\n        return newOtp;\n      });\n    },\n    [props],\n  );\n\n  const handleKeyDown = (index: number, e: KeyboardEvent<HTMLInputElement>) => {\n    const input = inputsRef.current[index];\n\n    if (!input) return;\n\n    if (e.key === 'ArrowRight') {\n      const nextIndex = index < otp.length - 1 ? index + 1 : 0;\n      const nextInput = inputsRef.current[nextIndex];\n\n      if (nextInput) {\n        nextInput.focus();\n        setTimeout(() => nextInput.setSelectionRange(0, nextInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'ArrowLeft') {\n      const prevIndex = index > 0 ? index - 1 : otp.length - 1;\n      const prevInput = inputsRef.current[prevIndex];\n\n      if (prevInput) {\n        prevInput.focus();\n        setTimeout(() => prevInput.setSelectionRange(0, prevInput.value.length), 0);\n      }\n    }\n\n    if (e.key === 'Backspace') {\n      if (input.value) {\n        setTimeout(() => input.setSelectionRange(0, input.value.length), 0);\n      } else if (index > 0) {\n        setTimeout(() => {\n          const prevInput = inputsRef.current[index - 1];\n          if (prevInput) {\n            prevInput.focus();\n            prevInput.setSelectionRange(0, prevInput.value.length);\n          }\n        }, 0);\n      }\n    }\n  };\n\n  const handleFocusInput = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    setTimeout(() => e.target.setSelectionRange(0, e.target.value.length), 0);\n  }, []);\n  return (\n    <>\n      <InputOTPWrapper\n        $error={props.error}\n        $size={props.size}\n        id={props.id}\n        ref={wrapperRef}\n        onBlur={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current && !wrapperRef.current.contains(document.activeElement)) {\n              props.onBlur?.(e);\n            }\n          }, 0);\n        }}\n        onFocus={(e) => {\n          setTimeout(() => {\n            if (wrapperRef.current?.contains(document.activeElement)) {\n              props.onFocus?.(e);\n            }\n          }, 0);\n        }}\n        $sx={props.sx}\n      >\n        {otp.map((digit, index) => (\n          <Input\n            isWidthAsHeight\n            key={index}\n            tabIndex={index + 1}\n            ref={(el) => {\n              inputsRef.current[index] = el;\n            }}\n            variety='standard'\n            type='text'\n            inputMode='numeric'\n            maxLength={1}\n            value={digit}\n            onFocus={handleFocusInput}\n            onPaste={(e) => handlePaste(index, e)}\n            onChange={(value) => handleChange(index, value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            genre={props.genre}\n            size={props.size}\n            font={props.font}\n          />\n        ))}\n      </InputOTPWrapper>\n      {props?.error ? (\n        <ErrorMessage\n          {...props.error}\n          size={props?.error.size ?? props.size}\n          font={{\n            size: 12,\n            weight: 400,\n            family: props.font?.family,\n          }}\n        />\n      ) : null}\n    </>\n  );\n};\n"],"names":["_a","_b","jsxs","Fragment","jsx"],"mappings":";;;;AAOO,MAAM,WAAW,CAAC,UAAyB;;AAChD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAmB,IAAI,MAAM,MAAM,MAAM,EAAE,KAAK,EAAE,CAAC;AACzE,QAAM,YAAY,OAAoC,EAAE;AACxD,QAAM,aAAa,OAA8B,IAAI;AAErD,QAAM,cAAc;AAAA,IAClB,CAAC,OAAe,MAAwC;AACtD,QAAE,eAAA;AAEF,YAAM,YAAY,EAAE,cAAc,QAAQ,MAAM;AAChD,YAAM,SAAS,UAAU,QAAQ,OAAO,EAAE,EAAE,MAAM,EAAE;AAEpD,UAAI,CAAC,OAAO,OAAQ;AAEpB,aAAO,CAAC,YAAY;;AAClB,cAAM,SAAS,CAAC,GAAG,OAAO;AAC1B,YAAI,eAAe;AAEnB,iBAAS,IAAI,GAAG,IAAI,OAAO,UAAU,eAAe,OAAO,QAAQ,KAAK;AACtE,iBAAO,YAAY,IAAI,OAAO,CAAC;AAC/B;AAAA,QACF;AAEA,cAAM,SAAS,OAAO,KAAK,EAAE;AAE7B,SAAAA,MAAA,MAAM,aAAN,gBAAAA,IAAA,YAAiB;AAEjB,YAAI,OAAO,MAAM,CAAC,SAAS,SAAS,EAAE,GAAG;AACvC,sBAAM,eAAN,+BAAmB;AAAA,QACrB;AAEA,mBAAW,MAAM;;AACf,gBAAM,aAAa,OAAO,UAAU,CAAC,SAAS,SAAS,EAAE;AACzD,cAAI,eAAe,IAAI;AACrB,aAAAA,MAAA,UAAU,QAAQ,UAAU,MAA5B,gBAAAA,IAA+B;AAAA,UACjC,WAAW,eAAe,OAAO,QAAQ;AACvC,aAAAC,MAAA,UAAU,QAAQ,YAAY,MAA9B,gBAAAA,IAAiC;AAAA,UACnC;AAAA,QACF,GAAG,CAAC;AAEJ,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGR,QAAM,eAAe;AAAA,IACnB,CAAC,OAAe,UAAkB;AAChC,UAAI,CAAC,QAAQ,KAAK,KAAK,EAAG;AAE1B,aAAO,CAAC,YAAY;;AAClB,cAAM,SAAS,CAAC,GAAG,OAAO;AAC1B,eAAO,KAAK,IAAI,MAAM,MAAM,EAAE;AAE9B,YAAI,MAAM,UAAU;AAClB,gBAAM,SAAS,OAAO,KAAK,EAAE,CAAC;AAAA,QAChC;AAEA,YAAI,OAAO,MAAM,CAAC,SAAS,SAAS,EAAE,GAAG;AACvC,WAAAD,MAAA,MAAM,eAAN,gBAAAA,IAAA,YAAmB,OAAO,KAAK,EAAE;AAAA,QACnC;AAEA,YAAI,SAAS,QAAQ,QAAQ,SAAS,GAAG;AACvC,qBAAW,MAAM;;AACf,aAAAA,MAAA,UAAU,QAAQ,QAAQ,CAAC,MAA3B,gBAAAA,IAA8B;AAAA,UAChC,GAAG,CAAC;AAAA,QACN;AAEA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGR,QAAM,gBAAgB,CAAC,OAAe,MAAuC;AAC3E,UAAM,QAAQ,UAAU,QAAQ,KAAK;AAErC,QAAI,CAAC,MAAO;AAEZ,QAAI,EAAE,QAAQ,cAAc;AAC1B,YAAM,YAAY,QAAQ,IAAI,SAAS,IAAI,QAAQ,IAAI;AACvD,YAAM,YAAY,UAAU,QAAQ,SAAS;AAE7C,UAAI,WAAW;AACb,kBAAU,MAAA;AACV,mBAAW,MAAM,UAAU,kBAAkB,GAAG,UAAU,MAAM,MAAM,GAAG,CAAC;AAAA,MAC5E;AAAA,IACF;AAEA,QAAI,EAAE,QAAQ,aAAa;AACzB,YAAM,YAAY,QAAQ,IAAI,QAAQ,IAAI,IAAI,SAAS;AACvD,YAAM,YAAY,UAAU,QAAQ,SAAS;AAE7C,UAAI,WAAW;AACb,kBAAU,MAAA;AACV,mBAAW,MAAM,UAAU,kBAAkB,GAAG,UAAU,MAAM,MAAM,GAAG,CAAC;AAAA,MAC5E;AAAA,IACF;AAEA,QAAI,EAAE,QAAQ,aAAa;AACzB,UAAI,MAAM,OAAO;AACf,mBAAW,MAAM,MAAM,kBAAkB,GAAG,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,MACpE,WAAW,QAAQ,GAAG;AACpB,mBAAW,MAAM;AACf,gBAAM,YAAY,UAAU,QAAQ,QAAQ,CAAC;AAC7C,cAAI,WAAW;AACb,sBAAU,MAAA;AACV,sBAAU,kBAAkB,GAAG,UAAU,MAAM,MAAM;AAAA,UACvD;AAAA,QACF,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,YAAY,CAAC,MAAoC;AACxE,eAAW,MAAM,EAAE,OAAO,kBAAkB,GAAG,EAAE,OAAO,MAAM,MAAM,GAAG,CAAC;AAAA,EAC1E,GAAG,CAAA,CAAE;AACL,SACEE,kCAAAA,KAAAC,4BAAA,EACE,UAAA;AAAA,IAAAC,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ,MAAM;AAAA,QACd,OAAO,MAAM;AAAA,QACb,IAAI,MAAM;AAAA,QACV,KAAK;AAAA,QACL,QAAQ,CAAC,MAAM;AACb,qBAAW,MAAM;;AACf,gBAAI,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,SAAS,aAAa,GAAG;AAC9E,eAAAJ,MAAA,MAAM,WAAN,gBAAAA,IAAA,YAAe;AAAA,YACjB;AAAA,UACF,GAAG,CAAC;AAAA,QACN;AAAA,QACA,SAAS,CAAC,MAAM;AACd,qBAAW,MAAM;;AACf,iBAAIA,MAAA,WAAW,YAAX,gBAAAA,IAAoB,SAAS,SAAS,gBAAgB;AACxD,0BAAM,YAAN,+BAAgB;AAAA,YAClB;AAAA,UACF,GAAG,CAAC;AAAA,QACN;AAAA,QACA,KAAK,MAAM;AAAA,QAEV,UAAA,IAAI,IAAI,CAAC,OAAO,UACfI,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,iBAAe;AAAA,YAEf,UAAU,QAAQ;AAAA,YAClB,KAAK,CAAC,OAAO;AACX,wBAAU,QAAQ,KAAK,IAAI;AAAA,YAC7B;AAAA,YACA,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAW;AAAA,YACX,OAAO;AAAA,YACP,SAAS;AAAA,YACT,SAAS,CAAC,MAAM,YAAY,OAAO,CAAC;AAAA,YACpC,UAAU,CAAC,UAAU,aAAa,OAAO,KAAK;AAAA,YAC9C,WAAW,CAAC,MAAM,cAAc,OAAO,CAAC;AAAA,YACxC,OAAO,MAAM;AAAA,YACb,MAAM,MAAM;AAAA,YACZ,MAAM,MAAM;AAAA,UAAA;AAAA,UAhBP;AAAA,QAAA,CAkBR;AAAA,MAAA;AAAA,IAAA;AAAA,KAEF,+BAAO,SACNA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG,MAAM;AAAA,QACV,OAAM,+BAAO,MAAM,SAAQ,MAAM;AAAA,QACjC,MAAM;AAAA,UACJ,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,SAAQ,WAAM,SAAN,mBAAY;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA,IAEA;AAAA,EAAA,GACN;AAEJ;"}

package/build/component-BmccRQ_Y.cjs

@@ -1,2 +0,0 @@
-"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),t=require("./consts.cjs.js"),n=require("./use-BF8VW4MA.cjs"),s=require("react"),l=require("./context.constants-baqYH-_k.cjs");exports.ImageButton=r=>{const i=s.useRef(null),u=s.useCallback(()=>{var e;null==(e=i.current)||e.click()},[]),{handleAddFiles:o}=n.useImageCrop({onSave:r.onSave,locale:r.locale,dialog:r.dialog,imageSettings:r.imageSettings,refInput:i});return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(l.Button,{...r.button,onClick:e=>{var t,n;null==(n=(t=r.button).onClick)||n.call(t,e),u()},children:r.button.children||r.locale.buttonAdd}),e.jsxRuntimeExports.jsx("input",{ref:i,type:"file",accept:t.LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT,multiple:!0,style:{display:"none"},onChange:e=>{e.target.files&&o(e.target.files)}})]})};
-//# sourceMappingURL=component-BmccRQ_Y.cjs.map

package/build/component-BmccRQ_Y.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-BmccRQ_Y.cjs","sources":["../src/components/image-button/component.tsx"],"sourcesContent":["import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from '@local/consts';\nimport { useImageCrop } from '@local/hooks/use-image-crop';\n\nimport { FC, useCallback, useRef } from 'react';\n\nimport { Button } from '../button';\nimport { ImageButtonProps } from '.';\n\nexport const ImageButton: FC<ImageButtonProps> = (props) => {\n  const refInput = useRef<HTMLInputElement | null>(null);\n\n  const handleOpenFileDialog = useCallback(() => {\n    refInput.current?.click();\n  }, []);\n\n  const { handleAddFiles } = useImageCrop({\n    onSave: props.onSave,\n    locale: props.locale,\n    dialog: props.dialog,\n    imageSettings: props.imageSettings,\n    refInput: refInput,\n  });\n\n  return (\n    <>\n      <Button\n        {...props.button}\n        onClick={(e) => {\n          props.button.onClick?.(e);\n          handleOpenFileDialog();\n        }}\n      >\n        {props.button.children || props.locale.buttonAdd}\n      </Button>\n      <input\n        ref={refInput}\n        type='file'\n        accept={LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT}\n        multiple\n        style={{ display: 'none' }}\n        onChange={(e) => {\n          if (e.target.files) handleAddFiles(e.target.files);\n        }}\n      />\n    </>\n  );\n};\n"],"names":["props","refInput","useRef","handleOpenFileDialog","useCallback","_a","current","click","handleAddFiles","useImageCrop","onSave","locale","dialog","imageSettings","jsxs","Fragment","children","jsx","Button","button","onClick","e","_b","call","buttonAdd","ref","type","accept","LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT","multiple","style","display","onChange","target","files"],"mappings":"6MAQkDA,IAChD,MAAMC,EAAWC,EAAAA,OAAgC,MAE3CC,EAAuBC,EAAAA,YAAY,WACvC,OAAAC,EAAAJ,EAASK,UAATD,EAAkBE,SACjB,KAEGC,eAAEA,GAAmBC,eAAa,CACtCC,OAAQV,EAAMU,OACdC,OAAQX,EAAMW,OACdC,OAAQZ,EAAMY,OACdC,cAAeb,EAAMa,cACrBZ,aAGF,SACEa,kBAAAA,KAAAC,6BAAA,CACEC,SAAA,GAAAC,kBAAAA,IAACC,EAAAA,OAAA,IACKlB,EAAMmB,OACVC,QAAUC,YACR,OAAAC,GAAAjB,EAAAL,EAAMmB,QAAOC,UAAbE,EAAAC,KAAAlB,EAAuBgB,GACvBlB,KAGDa,SAAAhB,EAAMmB,OAAOH,UAAYhB,EAAMW,OAAOa,cAEzCP,kBAAAA,IAAC,QAAA,CACCQ,IAAKxB,EACLyB,KAAK,OACLC,OAAQC,EAAAA,sCACRC,UAAQ,EACRC,MAAO,CAAEC,QAAS,QAClBC,SAAWX,IACLA,EAAEY,OAAOC,OAAO1B,EAAea,EAAEY,OAAOC"}

package/build/component-Bvq-fgCN.cjs

@@ -1,2 +0,0 @@
-"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),i=require("./component-CVWsmIlg.cjs"),l=require("./context.constants-baqYH-_k.cjs"),o=require("react"),n=require("styled-components");exports.CheckboxGroup=s=>{var t,r;const c=o.useCallback(e=>{const i=s.value.some(i=>i[s.valueField]===e[s.valueField])?s.value.filter(i=>i[s.valueField]!==e[s.valueField]):s.multiple?[...s.value,e]:[e];s.onChange&&s.onChange(i)},[s]),u=n.useTheme();return e.jsxRuntimeExports.jsx(l.CheckboxGroupWrapper,{className:s.className,$sx:s.sx,$size:s.size,$font:{...s.font,size:(null==(t=s.font)?void 0:t.size)??l.KEY_SIZE_DATA[s.size].font,weight:(null==(r=s.font)?void 0:r.weight)??700},children:s.options.map((o,n)=>{var t,r,d,a;const h=s.value.some(e=>e[s.valueField]===o[s.valueField]);return e.jsxRuntimeExports.jsxs(l.CheckboxGroupItem,{onClick:()=>!s.isClickOnlyIcon&&c(o),children:[e.jsxRuntimeExports.jsx(i.Checkbox,{genre:s.checkboxGenre,isHiddenBorder:s.checkboxIsHiddenBorder,view:s.checkBoxView,sx:s.checkboxSX,size:s.size,checked:h,font:{size:(null==(t=s.font)?void 0:t.size)??l.KEY_SIZE_DATA[s.size].font,weight:(null==(r=s.font)?void 0:r.weight)??700,family:(null==(d=s.font)?void 0:d.family)??u.font.family,height:null==(a=s.font)?void 0:a.height},children:s.labelField&&void 0!==(null==o?void 0:o[s.labelField])&&e.jsxRuntimeExports.jsx(l.CheckboxGroupLabel,{dangerouslySetInnerHTML:(x=o[s.labelField],{__html:x})})}),s.childrenField&&void 0!==(null==o?void 0:o[s.childrenField])&&e.jsxRuntimeExports.jsx(l.CheckboxChildren,{children:o[s.childrenField]})]},n);var x})})};
-//# sourceMappingURL=component-Bvq-fgCN.cjs.map

package/build/component-Bvq-fgCN.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-Bvq-fgCN.cjs","sources":["../src/components/checkbox-group/component.tsx"],"sourcesContent":["import { Checkbox } from '@local/components/checkbox';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { ReactNode, useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n  CheckboxChildren,\n  CheckboxGroupItem,\n  CheckboxGroupLabel,\n  CheckboxGroupProps,\n  CheckboxGroupWrapper,\n  ICheckboxValue,\n} from '.';\n\nexport const CheckboxGroup = <T extends ICheckboxValue>(props: CheckboxGroupProps<T>) => {\n  const createMarkup = (html: string) => ({ __html: html });\n\n  const handleCheckboxChange = useCallback(\n    (item: T) => {\n      const isSelected = props.value.some((selectedItem) => selectedItem[props.valueField] === item[props.valueField]);\n\n      const updatedSelectedItems = isSelected\n        ? props.value.filter((selectedItem) => selectedItem[props.valueField] !== item[props.valueField])\n        : props.multiple\n          ? [...props.value, item]\n          : [item];\n      if (props.onChange) props.onChange(updatedSelectedItems);\n    },\n    [props],\n  );\n\n  const theme = useTheme();\n  return (\n    <CheckboxGroupWrapper\n      className={props.className}\n      $sx={props.sx}\n      $size={props.size}\n      $font={{\n        ...props.font,\n        size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n        weight: props.font?.weight ?? 700,\n      }}\n    >\n      {props.options.map((e, index) => {\n        const isChecked = props.value.some((selectedItem) => selectedItem[props.valueField] === e[props.valueField]);\n        return (\n          <CheckboxGroupItem key={index} onClick={() => !props.isClickOnlyIcon && handleCheckboxChange(e)}>\n            <Checkbox\n              genre={props.checkboxGenre}\n              isHiddenBorder={props.checkboxIsHiddenBorder}\n              view={props.checkBoxView}\n              sx={props.checkboxSX}\n              size={props.size}\n              checked={isChecked}\n              font={{\n                size: props.font?.size ?? KEY_SIZE_DATA[props.size].font,\n                weight: props.font?.weight ?? 700,\n                family: props.font?.family ?? theme.font.family,\n                height: props.font?.height,\n              }}\n            >\n              {props.labelField && e?.[props.labelField] !== undefined && (\n                <CheckboxGroupLabel dangerouslySetInnerHTML={createMarkup(e[props.labelField] as string)} />\n              )}\n            </Checkbox>\n            {props.childrenField && e?.[props.childrenField] !== undefined && (\n              <CheckboxChildren>{e[props.childrenField] as ReactNode}</CheckboxChildren>\n            )}\n          </CheckboxGroupItem>\n        );\n      })}\n    </CheckboxGroupWrapper>\n  );\n};\n"],"names":["props","handleCheckboxChange","useCallback","item","updatedSelectedItems","value","some","selectedItem","valueField","filter","multiple","onChange","theme","useTheme","jsx","CheckboxGroupWrapper","className","$sx","sx","$size","size","$font","font","_a","KEY_SIZE_DATA","weight","_b","children","options","map","e","index","isChecked","jsxs","CheckboxGroupItem","onClick","isClickOnlyIcon","Checkbox","genre","checkboxGenre","isHiddenBorder","checkboxIsHiddenBorder","view","checkBoxView","checkboxSX","checked","family","_c","height","_d","labelField","CheckboxGroupLabel","dangerouslySetInnerHTML","html","__html","childrenField","CheckboxChildren"],"mappings":"uNAewDA,YACtD,MAEMC,EAAuBC,EAAAA,YAC1BC,IACC,MAEMC,EAFaJ,EAAMK,MAAMC,KAAMC,GAAiBA,EAAaP,EAAMQ,cAAgBL,EAAKH,EAAMQ,aAGhGR,EAAMK,MAAMI,OAAQF,GAAiBA,EAAaP,EAAMQ,cAAgBL,EAAKH,EAAMQ,aACnFR,EAAMU,SACJ,IAAIV,EAAMK,MAAOF,GACjB,CAACA,GACHH,EAAMW,UAAUX,EAAMW,SAASP,IAErC,CAACJ,IAGGY,EAAQC,EAAAA,WACd,SACEC,kBAAAA,IAACC,EAAAA,qBAAA,CACCC,UAAWhB,EAAMgB,UACjBC,IAAKjB,EAAMkB,GACXC,MAAOnB,EAAMoB,KACbC,MAAO,IACFrB,EAAMsB,KACTF,MAAM,OAAAG,IAAMD,WAAN,EAAAC,EAAYH,OAAQI,EAAAA,cAAcxB,EAAMoB,MAAME,KACpDG,QAAQ,OAAAC,EAAA1B,EAAMsB,WAAN,EAAAI,EAAYD,SAAU,KAG/BE,SAAA3B,EAAM4B,QAAQC,IAAI,CAACC,EAAGC,iBACrB,MAAMC,EAAYhC,EAAMK,MAAMC,KAAMC,GAAiBA,EAAaP,EAAMQ,cAAgBsB,EAAE9B,EAAMQ,aAChG,OACEyB,yBAACC,EAAAA,mBAA8BC,QAAS,KAAOnC,EAAMoC,iBAAmBnC,EAAqB6B,GAC3FH,SAAA,GAAAb,kBAAAA,IAACuB,EAAAA,SAAA,CACCC,MAAOtC,EAAMuC,cACbC,eAAgBxC,EAAMyC,uBACtBC,KAAM1C,EAAM2C,aACZzB,GAAIlB,EAAM4C,WACVxB,KAAMpB,EAAMoB,KACZyB,QAASb,EACTV,KAAM,CACJF,MAAM,OAAAG,EAAAvB,EAAMsB,WAAN,EAAAC,EAAYH,OAAQI,EAAAA,cAAcxB,EAAMoB,MAAME,KACpDG,QAAQ,OAAAC,EAAA1B,EAAMsB,WAAN,EAAAI,EAAYD,SAAU,IAC9BqB,QAAQ,OAAAC,EAAA/C,EAAMsB,WAAN,EAAAyB,EAAYD,SAAUlC,EAAMU,KAAKwB,OACzCE,OAAQ,OAAAC,EAAAjD,EAAMsB,WAAN,EAAA2B,EAAYD,QAGrBrB,SAAA3B,EAAMkD,iBAAwC,KAA1B,MAAApB,OAAA,EAAAA,EAAI9B,EAAMkD,gBAC7BpC,kBAAAA,IAACqC,EAAAA,mBAAA,CAAmBC,yBA/CZC,EA+CkDvB,EAAE9B,EAAMkD,YA/C1D,CAAoBI,OAAQD,QAkDvCrD,EAAMuD,oBAA8C,KAA7B,MAAAzB,OAAA,EAAAA,EAAI9B,EAAMuD,iBAChCzC,wBAAC0C,EAAAA,iBAAA,CAAkB7B,SAAAG,EAAE9B,EAAMuD,mBApBPxB,GA/BX,IAACsB"}

package/build/component-C448kBTA.js

@@ -1,443 +0,0 @@
-import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
-import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from "./consts.es.js";
-import { u as useImageCrop } from "./use-DdGWsOBo.js";
-import { bo as KEY_SIZE_DATA, aM as Typography, B as Button, V as ImageSelectWrapper, W as ImageSelectListWrapper, bk as ErrorMessage } from "./context.constants-BWLe7YHv.js";
-import { I as Image } from "./component-C_6x7Mk8.js";
-import { b as Stack } from "./component-gcvwlILJ.js";
-import { useTheme } from "styled-components";
-import "./context.constants-B14bB8O1.js";
-import { a as useDialog } from "./context.hooks-BnHnPV_i.js";
-import { useMemo, useState, useCallback, useRef, useEffect } from "react";
-import { motion } from "framer-motion";
-const useImageView = (props) => {
-  const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);
-  const br = useMemo(() => `${size.radius}px`, [size.radius]);
-  const [image, setImage] = useState(null);
-  const propsDialog = useMemo(
-    () => ({
-      propsCustom: {
-        image,
-        br
-      },
-      propsDialog: {
-        borderRadius: br,
-        padding: "0",
-        background: "whiteStandard"
-      },
-      onRemove() {
-        setImage(null);
-      },
-      content: (remove, _isAnimating, params) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Stack,
-        {
-          sx: {
-            default: {
-              position: "relative",
-              overflow: "hidden",
-              aspectRatio: `${props.imageSettings.aspect * 2} / 2`,
-              width: "auto",
-              maxWidth: "70dvw",
-              height: "85dvh",
-              borderRadius: params == null ? void 0 : params.br
-            },
-            tablet: {
-              maxWidth: "95dvw"
-            }
-          },
-          children: [
-            (params == null ? void 0 : params.image) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Image,
-              {
-                sxStack: (theme) => ({
-                  default: {
-                    width: "100%",
-                    height: "100%",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    backgroundColor: theme.palette.black10,
-                    position: "absolute",
-                    pointerEvents: "none"
-                  }
-                }),
-                isShowBeforeImage: true,
-                sxImage: {
-                  default: {
-                    objectFit: "contain"
-                  }
-                },
-                alt: params.image.imageSrc,
-                src: params.image.imageSrc,
-                componentFallback: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Typography,
-                  {
-                    sx: {
-                      default: {
-                        variant: "h6"
-                      }
-                    },
-                    children: props.locale.imageFallback
-                  }
-                )
-              }
-            ) : null,
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                sx: {
-                  default: {
-                    position: "absolute",
-                    bottom: 15,
-                    right: 15
-                  }
-                },
-                genre: "realebail-white",
-                size: "small",
-                icons: [
-                  {
-                    type: "id",
-                    name: "Arrow4"
-                  }
-                ],
-                isWidthAsHeight: true,
-                isHiddenBorder: true,
-                isRadius: true,
-                onClick: () => remove == null ? void 0 : remove()
-              }
-            )
-          ]
-        }
-      )
-    }),
-    [br, props.imageSettings.aspect, props.locale.imageFallback, image]
-  );
-  const { add } = useDialog(propsDialog);
-  const handleAdd = useCallback(
-    (image2) => {
-      setImage(image2);
-      add();
-    },
-    [add]
-  );
-  return { handleAdd };
-};
-const ImageSelect = (props) => {
-  const { onChange } = props;
-  const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);
-  const [images, setImages] = useState(props.images || []);
-  const [isDraggingOver, setIsDraggingOver] = useState(false);
-  const refInput = useRef(null);
-  const theme = useTheme();
-  const handleDrop = (e) => {
-    var _a;
-    e.preventDefault();
-    if ((_a = e.dataTransfer.files) == null ? void 0 : _a.length) {
-      handleAddFilesCrop(e.dataTransfer.files);
-    }
-  };
-  const handleDelete = (id) => {
-    setImages((prev) => {
-      const finalImages = prev.filter((img) => img.id !== id);
-      onChange == null ? void 0 : onChange(finalImages);
-      return finalImages;
-    });
-  };
-  const handleOnSave = useCallback(
-    (files) => {
-      if (files) {
-        setImages((prev) => {
-          const newImages = files.map((file, idx) => ({
-            ...file,
-            index: prev.length + idx
-          }));
-          const finalImages = [...prev, ...newImages];
-          onChange == null ? void 0 : onChange(finalImages);
-          return finalImages;
-        });
-      }
-    },
-    [onChange]
-  );
-  const openFileDialog = () => {
-    var _a;
-    (_a = refInput.current) == null ? void 0 : _a.click();
-  };
-  const resetImages = () => {
-    setImages(props.defaultImages || []);
-    onChange == null ? void 0 : onChange(props.defaultImages || []);
-  };
-  const { handleAddFiles: handleAddFilesCrop } = useImageCrop({
-    onSave: handleOnSave,
-    locale: props.locale,
-    dialog: {
-      button: {
-        genre: props.propsButton.default.genre,
-        size: props.propsButton.default.size
-      },
-      buttonDelete: {
-        genre: props.propsButton.delete.genre,
-        size: props.propsButton.delete.size
-      }
-    },
-    imageSettings: {
-      maxSize: props.imageSettings.maxSize,
-      maxCount: props.imageSettings.maxCount - images.length,
-      aspect: props.imageSettings.aspect
-    },
-    refInput
-  });
-  const { handleAdd } = useImageView({
-    size: props.size,
-    locale: props.locale,
-    imageSettings: props.imageSettings,
-    genre: props.genre
-  });
-  useEffect(() => {
-    setImages(props.images || []);
-  }, [props.images]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ImageSelectWrapper, { $genre: props.genre, $size: props.size, id: props.id, $sx: props.sx, $error: props.error, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        ImageSelectListWrapper,
-        {
-          onDrop: (e) => {
-            handleDrop(e);
-            setIsDraggingOver(false);
-          },
-          onDragOver: (e) => e.preventDefault(),
-          onDragEnter: () => setIsDraggingOver(true),
-          onDragLeave: () => setIsDraggingOver(false),
-          animate: {
-            borderColor: isDraggingOver ? theme.colors.imageSelect[props.genre].border.hover : theme.colors.imageSelect[props.genre].border.rest
-          },
-          transition: { duration: 0.3 },
-          $genre: props.genre,
-          $size: props.size,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              motion.div,
-              {
-                transition: {
-                  layout: {
-                    duration: 0.3,
-                    ease: "easeInOut",
-                    type: "spring"
-                  }
-                },
-                layout: true,
-                style: { display: "flex", flexWrap: "wrap", gap: `${size.padding - 2}px` },
-                children: [
-                  images.map(
-                    (img) => img.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      motion.div,
-                      {
-                        style: {
-                          position: "relative",
-                          width: `${props.imageSettings.width}px`,
-                          height: `${props.imageSettings.height}px`,
-                          userSelect: "none",
-                          overflow: "hidden",
-                          borderRadius: `${size.radius}px`,
-                          flexGrow: 1
-                        },
-                        layout: true,
-                        transition: {
-                          layout: {
-                            duration: 0.3,
-                            ease: "easeInOut",
-                            type: "spring"
-                          }
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            Image,
-                            {
-                              sxStack: (theme2) => ({
-                                default: {
-                                  width: "100%",
-                                  height: "100%",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  backgroundColor: theme2.palette.black10,
-                                  position: "absolute",
-                                  pointerEvents: "none"
-                                }
-                              }),
-                              isShowBeforeImage: props.isContain,
-                              sxImage: {
-                                default: {
-                                  objectFit: props.isContain ? "contain" : "cover"
-                                }
-                              },
-                              alt: img.name || "image",
-                              src: img.url,
-                              componentFallback: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                Typography,
-                                {
-                                  sx: {
-                                    default: {
-                                      variant: "h6"
-                                    }
-                                  },
-                                  children: props.locale.imageFallback
-                                }
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            Button,
-                            {
-                              sx: {
-                                default: {
-                                  position: "absolute",
-                                  top: 5,
-                                  right: 5
-                                }
-                              },
-                              genre: props.genre,
-                              size: "small",
-                              icons: [
-                                {
-                                  type: "id",
-                                  name: "Close"
-                                }
-                              ],
-                              isWidthAsHeight: true,
-                              isHiddenBorder: true,
-                              isRadius: true,
-                              onClick: () => handleDelete(img.id)
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            Button,
-                            {
-                              sx: {
-                                default: {
-                                  position: "absolute",
-                                  bottom: 5,
-                                  right: 5
-                                }
-                              },
-                              genre: props.genre,
-                              size: "small",
-                              icons: [
-                                {
-                                  type: "id",
-                                  name: "Activity"
-                                }
-                              ],
-                              isWidthAsHeight: true,
-                              isHiddenBorder: true,
-                              isRadius: true,
-                              onClick: () => img.url && handleAdd({ id: img.id, imageSrc: img.url })
-                            }
-                          )
-                        ]
-                      },
-                      img.id
-                    )
-                  ),
-                  images.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "div",
-                    {
-                      onClick: openFileDialog,
-                      style: {
-                        position: "relative",
-                        width: `${props.imageSettings.width}px`,
-                        height: `${props.imageSettings.height}px`,
-                        userSelect: "none",
-                        overflow: "hidden",
-                        borderRadius: `${size.radius}px`,
-                        flexGrow: 1,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        textAlign: "center",
-                        cursor: "pointer"
-                      },
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                        Typography,
-                        {
-                          style: {
-                            color: theme.colors.imageSelect[props.genre].color.rest
-                          },
-                          sx: {
-                            default: {}
-                          },
-                          children: props.locale.dragAndDrop
-                        }
-                      )
-                    },
-                    "empty"
-                  ) : null
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "input",
-              {
-                ref: refInput,
-                type: "file",
-                accept: LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT,
-                multiple: true,
-                style: { display: "none" },
-                onChange: (e) => {
-                  if (e.target.files) handleAddFilesCrop(e.target.files);
-                }
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { sx: { default: { flexGrow: 1, gap: `${size.padding - 2}px` } }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            type: "button",
-            genre: props.genre,
-            size: props.size,
-            sx: {
-              default: {
-                flexGrow: 3
-              }
-            },
-            isRadius: true,
-            onClick: openFileDialog,
-            children: props.locale.buttonAdd
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            isRadius: true,
-            type: "button",
-            sx: {
-              default: {
-                flexGrow: 1
-              }
-            },
-            onClick: resetImages,
-            genre: props.genre,
-            size: props.size,
-            children: props.locale.buttonReset
-          }
-        )
-      ] })
-    ] }),
-    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ErrorMessage,
-      {
-        ...props.error,
-        size: (props == null ? void 0 : props.error.size) ?? props.size,
-        font: {
-          size: 12,
-          weight: 400,
-          family: theme.font.family
-        }
-      }
-    ) : null
-  ] });
-};
-export {
-  ImageSelect as I
-};
-//# sourceMappingURL=component-C448kBTA.js.map