@jenesei-software/jenesei-kit-react 1.3.35 → 1.3.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-info.txt +3 -3
- package/build/{component-Co53yylj.cjs → component-C8NWMxxo.cjs} +2 -2
- package/build/{component-Co53yylj.cjs.map → component-C8NWMxxo.cjs.map} +1 -1
- package/build/{component-34--WtCE.js → component-CS0uHwL5.js} +3 -3
- package/build/{component-34--WtCE.js.map → component-CS0uHwL5.js.map} +1 -1
- package/build/{component-CAWbX2_9.cjs → component-DkO36zGe.cjs} +2 -2
- package/build/{component-CAWbX2_9.cjs.map → component-DkO36zGe.cjs.map} +1 -1
- package/build/{component-DHwK4xEP.js → component-DrO-3u2I.js} +2 -2
- package/build/{component-DHwK4xEP.js.map → component-DrO-3u2I.js.map} +1 -1
- package/build/component-image-button.cjs.js +1 -1
- package/build/component-image-button.es.js +1 -1
- package/build/component-image-select.cjs.js +1 -1
- package/build/component-image-select.es.js +1 -1
- package/build/component-image-slider.cjs.js +1 -1
- package/build/component-image-slider.es.js +1 -1
- package/build/{component.constants-DybDxNgw.js → component.constants-DEtpkwiA.js} +2 -2
- package/build/{component.constants-DybDxNgw.js.map → component.constants-DEtpkwiA.js.map} +1 -1
- package/build/{component.constants-CuYFwf5W.cjs → component.constants-QEk9PcRK.cjs} +2 -2
- package/build/{component.constants-CuYFwf5W.cjs.map → component.constants-QEk9PcRK.cjs.map} +1 -1
- package/build/consts.cjs.js +1 -1
- package/build/consts.es.js +1 -1
- package/build/context-dialog.cjs.js +1 -1
- package/build/context-dialog.es.js +1 -1
- package/build/context.hooks-C-jAj7Vc.cjs +2 -0
- package/build/context.hooks-C-jAj7Vc.cjs.map +1 -0
- package/build/{context.hooks-DGYU76JL.js → context.hooks-CxwYYLmV.js} +5 -5
- package/build/context.hooks-CxwYYLmV.js.map +1 -0
- package/build/index.cjs.js +1 -1
- package/build/index.es.js +4 -4
- package/build/{use-CGZzVbz2.js → use-Cglz8LOj.js} +2 -2
- package/build/{use-CGZzVbz2.js.map → use-Cglz8LOj.js.map} +1 -1
- package/build/{use-DEkooQyB.cjs → use-DGVoIo0g.cjs} +2 -2
- package/build/{use-DEkooQyB.cjs.map → use-DGVoIo0g.cjs.map} +1 -1
- package/package.json +1 -1
- package/build/context.hooks-Biv8ZMzm.cjs +0 -2
- package/build/context.hooks-Biv8ZMzm.cjs.map +0 -1
- package/build/context.hooks-DGYU76JL.js.map +0 -1
package/build/build-info.txt
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
version: 1.3.
|
|
2
|
-
commit:
|
|
3
|
-
date: 2025-10-
|
|
1
|
+
version: 1.3.36
|
|
2
|
+
commit: a74d383
|
|
3
|
+
date: 2025-10-12T15:14:01Z
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),t=require("./consts.cjs.js"),i=require("./use-
|
|
2
|
-
//# sourceMappingURL=component-
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),t=require("./consts.cjs.js"),i=require("./use-DGVoIo0g.cjs"),s=require("./context.constants-CDgzMcxb.cjs"),n=require("./component-BPtJjkt0.cjs"),r=require("./component-CoOTSdM5.cjs"),o=require("styled-components");require("./context.constants-BWZS-di6.cjs");const a=require("./context.hooks-C-jAj7Vc.cjs"),l=require("react"),u=require("framer-motion");exports.ImageSelect=d=>{const{onChange:c}=d,g=l.useMemo(()=>s.KEY_SIZE_DATA[d.size],[d.size]),[x,p]=l.useState(d.images||[]),[m,h]=l.useState(!1),j=l.useRef(null),f=o.useTheme(),S=l.useCallback(e=>{e&&p(t=>{const i=e.map((e,i)=>({...e,index:t.length+i})),s=[...t,...i];return null==c||c(s),s})},[c]),b=()=>{var e;null==(e=j.current)||e.click()},{handleAddFiles:v}=i.useImageCrop({onSave:S,locale:d.locale,dialog:{button:{genre:d.propsButton.default.genre,size:d.propsButton.default.size},buttonDelete:{genre:d.propsButton.delete.genre,size:d.propsButton.delete.size}},imageSettings:{maxSize:d.imageSettings.maxSize,maxCount:d.imageSettings.maxCount-x.length,aspect:d.imageSettings.aspect},refInput:j}),{handleAdd:R}=(t=>{const i=l.useMemo(()=>s.KEY_SIZE_DATA[t.size],[t.size]),o=l.useMemo(()=>`${i.radius}px`,[i.radius]),{add:u}=a.useDialog({br:o,propsDialog:{borderRadius:o,padding:"0",background:"whiteStandard"}});return{handleAdd:l.useCallback(i=>{u({content:(o,a)=>e.jsxRuntimeExports.jsxs(r.Stack,{sx:{default:{position:"relative",overflow:"hidden",aspectRatio:2*t.imageSettings.aspect+" / 2",width:"auto",maxWidth:"70dvw",height:"85dvh",borderRadius:null==o?void 0:o.br},tablet:{maxWidth:"95dvw"}},children:[e.jsxRuntimeExports.jsx(n.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:!0,sxImage:{default:{objectFit:"contain"}},alt:null==i?void 0:i.imageSrc,src:null==i?void 0:i.imageSrc,componentFallback:e.jsxRuntimeExports.jsx(s.Typography,{sx:{default:{variant:"h6"}},children:t.locale.imageFallback})}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",bottom:15,right:15}},genre:"realebail-white",size:"small",icons:[{type:"id",name:"Arrow4"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>null==a?void 0:a()})]})})},[u,t.imageSettings.aspect,t.locale.imageFallback])}})({size:d.size,locale:d.locale,imageSettings:d.imageSettings,genre:d.genre});return l.useEffect(()=>{p(d.images||[])},[d.images]),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs(s.ImageSelectWrapper,{$genre:d.genre,$size:d.size,id:d.id,$sx:d.sx,$error:d.error,children:[e.jsxRuntimeExports.jsxs(s.ImageSelectListWrapper,{onDrop:e=>{(e=>{var t;e.preventDefault(),(null==(t=e.dataTransfer.files)?void 0:t.length)&&v(e.dataTransfer.files)})(e),h(!1)},onDragOver:e=>e.preventDefault(),onDragEnter:()=>h(!0),onDragLeave:()=>h(!1),animate:{borderColor:m?f.colors.imageSelect[d.genre].border.hover:f.colors.imageSelect[d.genre].border.rest},transition:{duration:.3},$genre:d.genre,$size:d.size,children:[e.jsxRuntimeExports.jsxs(u.motion.div,{transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},layout:!0,style:{display:"flex",flexWrap:"wrap",gap:g.padding-2+"px"},children:[x.map(t=>t.url&&e.jsxRuntimeExports.jsxs(u.motion.div,{style:{position:"relative",width:`${d.imageSettings.width}px`,height:`${d.imageSettings.height}px`,userSelect:"none",overflow:"hidden",borderRadius:`${g.radius}px`,flexGrow:1},layout:!0,transition:{layout:{duration:.3,ease:"easeInOut",type:"spring"}},children:[e.jsxRuntimeExports.jsx(n.Image,{sxStack:e=>({default:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.palette.black10,position:"absolute",pointerEvents:"none"}}),isShowBeforeImage:d.isContain,sxImage:{default:{objectFit:d.isContain?"contain":"cover"}},alt:t.name||"image",src:t.url,componentFallback:e.jsxRuntimeExports.jsx(s.Typography,{sx:{default:{variant:"h6"}},children:d.locale.imageFallback})}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",top:5,right:5}},genre:d.genre,size:"small",icons:[{type:"id",name:"Close"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>{return e=t.id,void p(t=>{const i=t.filter(t=>t.id!==e);return null==c||c(i),i});var e}}),e.jsxRuntimeExports.jsx(s.Button,{sx:{default:{position:"absolute",bottom:5,right:5}},genre:d.genre,size:"small",icons:[{type:"id",name:"Activity"}],isWidthAsHeight:!0,isHiddenBorder:!0,isRadius:!0,onClick:()=>t.url&&R({id:t.id,imageSrc:t.url})})]},t.id)),0===x.length?e.jsxRuntimeExports.jsx("div",{onClick:b,style:{position:"relative",width:`${d.imageSettings.width}px`,height:`${d.imageSettings.height}px`,userSelect:"none",overflow:"hidden",borderRadius:`${g.radius}px`,flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",textAlign:"center",cursor:"pointer"},children:e.jsxRuntimeExports.jsx(s.Typography,{style:{color:f.colors.imageSelect[d.genre].color.rest},sx:{default:{}},children:d.locale.dragAndDrop})},"empty"):null]}),e.jsxRuntimeExports.jsx("input",{ref:j,type:"file",accept:t.LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT,multiple:!0,style:{display:"none"},onChange:e=>{e.target.files&&v(e.target.files)}})]}),e.jsxRuntimeExports.jsxs(r.Stack,{sx:{default:{flexGrow:1,gap:g.padding-2+"px"}},children:[e.jsxRuntimeExports.jsx(s.Button,{type:"button",genre:d.genre,size:d.size,sx:{default:{flexGrow:3}},isRadius:!0,onClick:b,children:d.locale.buttonAdd}),e.jsxRuntimeExports.jsx(s.Button,{isRadius:!0,type:"button",sx:{default:{flexGrow:1}},onClick:()=>{p(d.defaultImages||[]),null==c||c(d.defaultImages||[])},genre:d.genre,size:d.size,children:d.locale.buttonReset})]})]}),(null==d?void 0:d.error)?e.jsxRuntimeExports.jsx(s.ErrorMessage,{...d.error,size:(null==d?void 0:d.error.size)??d.size,font:{size:12,weight:400,family:f.font.family}}):null]})};
|
|
2
|
+
//# sourceMappingURL=component-C8NWMxxo.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-Co53yylj.cjs","sources":["../src/components/image-select/component.tsx","../src/hooks/use-image-view/use.tsx"],"sourcesContent":["import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from '@local/consts';\nimport { useImageCrop } from '@local/hooks/use-image-crop';\nimport { useImageView } from '@local/hooks/use-image-view';\nimport { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\n\nexport const ImageSelect = (props: ImageSelectProps) => {\n const { onChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n\n const [images, setImages] = useState<ImageSelectItemProps[]>(props.images || []);\n\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n\n const refInput = useRef<HTMLInputElement | null>(null);\n\n const theme = useTheme();\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n if (e.dataTransfer.files?.length) {\n handleAddFilesCrop(e.dataTransfer.files);\n }\n };\n\n const handleDelete = (id: number) => {\n setImages((prev) => {\n const finalImages = prev.filter((img) => img.id !== id);\n onChange?.(finalImages);\n return finalImages;\n });\n };\n\n const handleOnSave = useCallback(\n (files: ImageSelectItemProps[] | null) => {\n if (files) {\n setImages((prev) => {\n const newImages = files.map((file, idx) => ({\n ...file,\n index: prev.length + idx,\n }));\n const finalImages = [...prev, ...newImages];\n onChange?.(finalImages);\n return finalImages;\n });\n }\n },\n [onChange],\n );\n\n const openFileDialog = () => {\n refInput.current?.click();\n };\n\n const resetImages = () => {\n setImages(props.defaultImages || []);\n onChange?.(props.defaultImages || []);\n };\n\n const { handleAddFiles: handleAddFilesCrop } = useImageCrop({\n onSave: handleOnSave,\n locale: props.locale,\n dialog: {\n button: {\n genre: props.propsButton.default.genre,\n size: props.propsButton.default.size,\n },\n buttonDelete: {\n genre: props.propsButton.delete.genre,\n size: props.propsButton.delete.size,\n },\n },\n imageSettings: {\n maxSize: props.imageSettings.maxSize,\n maxCount: props.imageSettings.maxCount - images.length,\n aspect: props.imageSettings.aspect,\n },\n refInput: refInput,\n });\n\n const { handleAdd } = useImageView({\n size: props.size,\n locale: props.locale,\n imageSettings: props.imageSettings,\n genre: props.genre,\n });\n\n useEffect(() => {\n setImages(props.images || []);\n }, [props.images]);\n\n return (\n <>\n <ImageSelectWrapper $genre={props.genre} $size={props.size} id={props.id} $sx={props.sx} $error={props.error}>\n <ImageSelectListWrapper\n onDrop={(e) => {\n handleDrop(e);\n setIsDraggingOver(false);\n }}\n onDragOver={(e) => e.preventDefault()}\n onDragEnter={() => setIsDraggingOver(true)}\n onDragLeave={() => setIsDraggingOver(false)}\n animate={{\n borderColor: isDraggingOver\n ? theme.colors.imageSelect[props.genre].border.hover\n : theme.colors.imageSelect[props.genre].border.rest,\n }}\n transition={{ duration: 0.3 }}\n $genre={props.genre}\n $size={props.size}\n >\n <motion.div\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n layout\n style={{ display: 'flex', flexWrap: 'wrap', gap: `${size.padding - 2}px` }}\n >\n {images.map(\n (img) =>\n img.url && (\n <motion.div\n key={img.id}\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n }}\n layout\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage={props.isContain}\n sxImage={{\n default: {\n objectFit: props.isContain ? 'contain' : 'cover',\n },\n }}\n alt={img.name || 'image'}\n src={img.url}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Close',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleDelete(img.id)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => img.url && handleAdd({ id: img.id, imageSrc: img.url })}\n />\n </motion.div>\n ),\n )}\n {images.length === 0 ? (\n <div\n onClick={openFileDialog}\n key='empty'\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n cursor: 'pointer',\n }}\n >\n <Typography\n style={{\n color: theme.colors.imageSelect[props.genre].color.rest,\n }}\n sx={{\n default: {},\n }}\n >\n {props.locale.dragAndDrop}\n </Typography>\n </div>\n ) : null}\n </motion.div>\n\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) handleAddFilesCrop(e.target.files);\n }}\n />\n </ImageSelectListWrapper>\n <Stack sx={{ default: { flexGrow: 1, gap: `${size.padding - 2}px` } }}>\n <Button\n type='button'\n genre={props.genre}\n size={props.size}\n sx={{\n default: {\n flexGrow: 3,\n },\n }}\n isRadius\n onClick={openFileDialog}\n >\n {props.locale.buttonAdd}\n </Button>\n <Button\n isRadius\n type='button'\n sx={{\n default: {\n flexGrow: 1,\n },\n }}\n onClick={resetImages}\n genre={props.genre}\n size={props.size}\n >\n {props.locale.buttonReset}\n </Button>\n </Stack>\n </ImageSelectWrapper>\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: theme.font.family,\n }}\n />\n ) : null}\n </>\n );\n};\n","import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { SliderImageProps } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useImageViewProps } from '.';\n\nexport const useImageView = (props: useImageViewProps) => {\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const { add } = useDialog<{\n br?: string;\n }>({\n br: br,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(\n (image: SliderImageProps) => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br,\n },\n tablet: {\n maxWidth: '95dvw',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain',\n },\n }}\n alt={image?.imageSrc}\n src={image?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre='realebail-white'\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n </Stack>\n ),\n });\n },\n [add, props.imageSettings.aspect, props.locale.imageFallback],\n );\n return { handleAdd };\n};\n"],"names":["props","onChange","size","useMemo","KEY_SIZE_DATA","images","setImages","useState","isDraggingOver","setIsDraggingOver","refInput","useRef","theme","useTheme","handleOnSave","useCallback","files","prev","newImages","map","file","idx","index","length","finalImages","openFileDialog","_a","current","click","handleAddFiles","handleAddFilesCrop","useImageCrop","onSave","locale","dialog","button","genre","propsButton","default","buttonDelete","delete","imageSettings","maxSize","maxCount","aspect","handleAdd","br","radius","add","useDialog","propsDialog","borderRadius","padding","background","image","content","params","remove","jsxs","Stack","sx","position","overflow","aspectRatio","width","maxWidth","height","tablet","children","jsx","Image","sxStack","alignItems","justifyContent","backgroundColor","palette","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","imageSrc","src","componentFallback","Typography","variant","imageFallback","Button","bottom","right","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","useImageView","useEffect","Fragment","ImageSelectWrapper","$genre","$size","id","$sx","$error","error","ImageSelectListWrapper","onDrop","e","preventDefault","dataTransfer","handleDrop","onDragOver","onDragEnter","onDragLeave","animate","borderColor","colors","imageSelect","border","hover","rest","transition","duration","motion","div","layout","ease","style","display","flexWrap","gap","img","url","userSelect","flexGrow","isContain","top","handleDelete","filter","textAlign","cursor","color","dragAndDrop","ref","accept","LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT","multiple","target","buttonAdd","defaultImages","buttonReset","ErrorMessage","font","weight","family"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component-C8NWMxxo.cjs","sources":["../src/components/image-select/component.tsx","../src/hooks/use-image-view/use.tsx"],"sourcesContent":["import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from '@local/consts';\nimport { useImageCrop } from '@local/hooks/use-image-crop';\nimport { useImageView } from '@local/hooks/use-image-view';\nimport { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\n\nexport const ImageSelect = (props: ImageSelectProps) => {\n const { onChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n\n const [images, setImages] = useState<ImageSelectItemProps[]>(props.images || []);\n\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n\n const refInput = useRef<HTMLInputElement | null>(null);\n\n const theme = useTheme();\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n if (e.dataTransfer.files?.length) {\n handleAddFilesCrop(e.dataTransfer.files);\n }\n };\n\n const handleDelete = (id: number) => {\n setImages((prev) => {\n const finalImages = prev.filter((img) => img.id !== id);\n onChange?.(finalImages);\n return finalImages;\n });\n };\n\n const handleOnSave = useCallback(\n (files: ImageSelectItemProps[] | null) => {\n if (files) {\n setImages((prev) => {\n const newImages = files.map((file, idx) => ({\n ...file,\n index: prev.length + idx,\n }));\n const finalImages = [...prev, ...newImages];\n onChange?.(finalImages);\n return finalImages;\n });\n }\n },\n [onChange],\n );\n\n const openFileDialog = () => {\n refInput.current?.click();\n };\n\n const resetImages = () => {\n setImages(props.defaultImages || []);\n onChange?.(props.defaultImages || []);\n };\n\n const { handleAddFiles: handleAddFilesCrop } = useImageCrop({\n onSave: handleOnSave,\n locale: props.locale,\n dialog: {\n button: {\n genre: props.propsButton.default.genre,\n size: props.propsButton.default.size,\n },\n buttonDelete: {\n genre: props.propsButton.delete.genre,\n size: props.propsButton.delete.size,\n },\n },\n imageSettings: {\n maxSize: props.imageSettings.maxSize,\n maxCount: props.imageSettings.maxCount - images.length,\n aspect: props.imageSettings.aspect,\n },\n refInput: refInput,\n });\n\n const { handleAdd } = useImageView({\n size: props.size,\n locale: props.locale,\n imageSettings: props.imageSettings,\n genre: props.genre,\n });\n\n useEffect(() => {\n setImages(props.images || []);\n }, [props.images]);\n\n return (\n <>\n <ImageSelectWrapper $genre={props.genre} $size={props.size} id={props.id} $sx={props.sx} $error={props.error}>\n <ImageSelectListWrapper\n onDrop={(e) => {\n handleDrop(e);\n setIsDraggingOver(false);\n }}\n onDragOver={(e) => e.preventDefault()}\n onDragEnter={() => setIsDraggingOver(true)}\n onDragLeave={() => setIsDraggingOver(false)}\n animate={{\n borderColor: isDraggingOver\n ? theme.colors.imageSelect[props.genre].border.hover\n : theme.colors.imageSelect[props.genre].border.rest,\n }}\n transition={{ duration: 0.3 }}\n $genre={props.genre}\n $size={props.size}\n >\n <motion.div\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n layout\n style={{ display: 'flex', flexWrap: 'wrap', gap: `${size.padding - 2}px` }}\n >\n {images.map(\n (img) =>\n img.url && (\n <motion.div\n key={img.id}\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n }}\n layout\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage={props.isContain}\n sxImage={{\n default: {\n objectFit: props.isContain ? 'contain' : 'cover',\n },\n }}\n alt={img.name || 'image'}\n src={img.url}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Close',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleDelete(img.id)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => img.url && handleAdd({ id: img.id, imageSrc: img.url })}\n />\n </motion.div>\n ),\n )}\n {images.length === 0 ? (\n <div\n onClick={openFileDialog}\n key='empty'\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n cursor: 'pointer',\n }}\n >\n <Typography\n style={{\n color: theme.colors.imageSelect[props.genre].color.rest,\n }}\n sx={{\n default: {},\n }}\n >\n {props.locale.dragAndDrop}\n </Typography>\n </div>\n ) : null}\n </motion.div>\n\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) handleAddFilesCrop(e.target.files);\n }}\n />\n </ImageSelectListWrapper>\n <Stack sx={{ default: { flexGrow: 1, gap: `${size.padding - 2}px` } }}>\n <Button\n type='button'\n genre={props.genre}\n size={props.size}\n sx={{\n default: {\n flexGrow: 3,\n },\n }}\n isRadius\n onClick={openFileDialog}\n >\n {props.locale.buttonAdd}\n </Button>\n <Button\n isRadius\n type='button'\n sx={{\n default: {\n flexGrow: 1,\n },\n }}\n onClick={resetImages}\n genre={props.genre}\n size={props.size}\n >\n {props.locale.buttonReset}\n </Button>\n </Stack>\n </ImageSelectWrapper>\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: theme.font.family,\n }}\n />\n ) : null}\n </>\n );\n};\n","import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { SliderImageProps } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useImageViewProps } from '.';\n\nexport const useImageView = (props: useImageViewProps) => {\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const { add } = useDialog<{\n br?: string;\n }>({\n br: br,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(\n (image: SliderImageProps) => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br,\n },\n tablet: {\n maxWidth: '95dvw',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain',\n },\n }}\n alt={image?.imageSrc}\n src={image?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre='realebail-white'\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n </Stack>\n ),\n });\n },\n [add, props.imageSettings.aspect, props.locale.imageFallback],\n );\n return { handleAdd };\n};\n"],"names":["props","onChange","size","useMemo","KEY_SIZE_DATA","images","setImages","useState","isDraggingOver","setIsDraggingOver","refInput","useRef","theme","useTheme","handleOnSave","useCallback","files","prev","newImages","map","file","idx","index","length","finalImages","openFileDialog","_a","current","click","handleAddFiles","handleAddFilesCrop","useImageCrop","onSave","locale","dialog","button","genre","propsButton","default","buttonDelete","delete","imageSettings","maxSize","maxCount","aspect","handleAdd","br","radius","add","useDialog","propsDialog","borderRadius","padding","background","image","content","params","remove","jsxs","Stack","sx","position","overflow","aspectRatio","width","maxWidth","height","tablet","children","jsx","Image","sxStack","alignItems","justifyContent","backgroundColor","palette","black10","pointerEvents","isShowBeforeImage","sxImage","objectFit","alt","imageSrc","src","componentFallback","Typography","variant","imageFallback","Button","bottom","right","icons","type","name","isWidthAsHeight","isHiddenBorder","isRadius","onClick","useImageView","useEffect","Fragment","ImageSelectWrapper","$genre","$size","id","$sx","$error","error","ImageSelectListWrapper","onDrop","e","preventDefault","dataTransfer","handleDrop","onDragOver","onDragEnter","onDragLeave","animate","borderColor","colors","imageSelect","border","hover","rest","transition","duration","motion","div","layout","ease","style","display","flexWrap","gap","img","url","userSelect","flexGrow","isContain","top","handleDelete","filter","textAlign","cursor","color","dragAndDrop","ref","accept","LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT","multiple","target","buttonAdd","defaultImages","buttonReset","ErrorMessage","font","weight","family"],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
|
|
2
2
|
import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from "./consts.es.js";
|
|
3
|
-
import { u as useImageCrop } from "./use-
|
|
3
|
+
import { u as useImageCrop } from "./use-Cglz8LOj.js";
|
|
4
4
|
import { bo as KEY_SIZE_DATA, aM as Typography, B as Button, V as ImageSelectWrapper, W as ImageSelectListWrapper, bk as ErrorMessage } from "./context.constants-Bh-ajJM2.js";
|
|
5
5
|
import { I as Image } from "./component-9fzcSAV7.js";
|
|
6
6
|
import { b as Stack } from "./component-gcvwlILJ.js";
|
|
7
7
|
import { useTheme } from "styled-components";
|
|
8
8
|
import "./context.constants-Nfy-8Qzj.js";
|
|
9
|
-
import { a as useDialog } from "./context.hooks-
|
|
9
|
+
import { a as useDialog } from "./context.hooks-CxwYYLmV.js";
|
|
10
10
|
import { useMemo, useCallback, useState, useRef, useEffect } from "react";
|
|
11
11
|
import { motion } from "framer-motion";
|
|
12
12
|
const useImageView = (props) => {
|
|
@@ -429,4 +429,4 @@ const ImageSelect = (props) => {
|
|
|
429
429
|
export {
|
|
430
430
|
ImageSelect as I
|
|
431
431
|
};
|
|
432
|
-
//# sourceMappingURL=component-
|
|
432
|
+
//# sourceMappingURL=component-CS0uHwL5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-34--WtCE.js","sources":["../src/hooks/use-image-view/use.tsx","../src/components/image-select/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { SliderImageProps } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useImageViewProps } from '.';\n\nexport const useImageView = (props: useImageViewProps) => {\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const { add } = useDialog<{\n br?: string;\n }>({\n br: br,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(\n (image: SliderImageProps) => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br,\n },\n tablet: {\n maxWidth: '95dvw',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain',\n },\n }}\n alt={image?.imageSrc}\n src={image?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre='realebail-white'\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n </Stack>\n ),\n });\n },\n [add, props.imageSettings.aspect, props.locale.imageFallback],\n );\n return { handleAdd };\n};\n","import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from '@local/consts';\nimport { useImageCrop } from '@local/hooks/use-image-crop';\nimport { useImageView } from '@local/hooks/use-image-view';\nimport { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\n\nexport const ImageSelect = (props: ImageSelectProps) => {\n const { onChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n\n const [images, setImages] = useState<ImageSelectItemProps[]>(props.images || []);\n\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n\n const refInput = useRef<HTMLInputElement | null>(null);\n\n const theme = useTheme();\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n if (e.dataTransfer.files?.length) {\n handleAddFilesCrop(e.dataTransfer.files);\n }\n };\n\n const handleDelete = (id: number) => {\n setImages((prev) => {\n const finalImages = prev.filter((img) => img.id !== id);\n onChange?.(finalImages);\n return finalImages;\n });\n };\n\n const handleOnSave = useCallback(\n (files: ImageSelectItemProps[] | null) => {\n if (files) {\n setImages((prev) => {\n const newImages = files.map((file, idx) => ({\n ...file,\n index: prev.length + idx,\n }));\n const finalImages = [...prev, ...newImages];\n onChange?.(finalImages);\n return finalImages;\n });\n }\n },\n [onChange],\n );\n\n const openFileDialog = () => {\n refInput.current?.click();\n };\n\n const resetImages = () => {\n setImages(props.defaultImages || []);\n onChange?.(props.defaultImages || []);\n };\n\n const { handleAddFiles: handleAddFilesCrop } = useImageCrop({\n onSave: handleOnSave,\n locale: props.locale,\n dialog: {\n button: {\n genre: props.propsButton.default.genre,\n size: props.propsButton.default.size,\n },\n buttonDelete: {\n genre: props.propsButton.delete.genre,\n size: props.propsButton.delete.size,\n },\n },\n imageSettings: {\n maxSize: props.imageSettings.maxSize,\n maxCount: props.imageSettings.maxCount - images.length,\n aspect: props.imageSettings.aspect,\n },\n refInput: refInput,\n });\n\n const { handleAdd } = useImageView({\n size: props.size,\n locale: props.locale,\n imageSettings: props.imageSettings,\n genre: props.genre,\n });\n\n useEffect(() => {\n setImages(props.images || []);\n }, [props.images]);\n\n return (\n <>\n <ImageSelectWrapper $genre={props.genre} $size={props.size} id={props.id} $sx={props.sx} $error={props.error}>\n <ImageSelectListWrapper\n onDrop={(e) => {\n handleDrop(e);\n setIsDraggingOver(false);\n }}\n onDragOver={(e) => e.preventDefault()}\n onDragEnter={() => setIsDraggingOver(true)}\n onDragLeave={() => setIsDraggingOver(false)}\n animate={{\n borderColor: isDraggingOver\n ? theme.colors.imageSelect[props.genre].border.hover\n : theme.colors.imageSelect[props.genre].border.rest,\n }}\n transition={{ duration: 0.3 }}\n $genre={props.genre}\n $size={props.size}\n >\n <motion.div\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n layout\n style={{ display: 'flex', flexWrap: 'wrap', gap: `${size.padding - 2}px` }}\n >\n {images.map(\n (img) =>\n img.url && (\n <motion.div\n key={img.id}\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n }}\n layout\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage={props.isContain}\n sxImage={{\n default: {\n objectFit: props.isContain ? 'contain' : 'cover',\n },\n }}\n alt={img.name || 'image'}\n src={img.url}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Close',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleDelete(img.id)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => img.url && handleAdd({ id: img.id, imageSrc: img.url })}\n />\n </motion.div>\n ),\n )}\n {images.length === 0 ? (\n <div\n onClick={openFileDialog}\n key='empty'\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n cursor: 'pointer',\n }}\n >\n <Typography\n style={{\n color: theme.colors.imageSelect[props.genre].color.rest,\n }}\n sx={{\n default: {},\n }}\n >\n {props.locale.dragAndDrop}\n </Typography>\n </div>\n ) : null}\n </motion.div>\n\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) handleAddFilesCrop(e.target.files);\n }}\n />\n </ImageSelectListWrapper>\n <Stack sx={{ default: { flexGrow: 1, gap: `${size.padding - 2}px` } }}>\n <Button\n type='button'\n genre={props.genre}\n size={props.size}\n sx={{\n default: {\n flexGrow: 3,\n },\n }}\n isRadius\n onClick={openFileDialog}\n >\n {props.locale.buttonAdd}\n </Button>\n <Button\n isRadius\n type='button'\n sx={{\n default: {\n flexGrow: 1,\n },\n }}\n onClick={resetImages}\n genre={props.genre}\n size={props.size}\n >\n {props.locale.buttonReset}\n </Button>\n </Stack>\n </ImageSelectWrapper>\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: theme.font.family,\n }}\n />\n ) : null}\n </>\n );\n};\n"],"names":["jsxs","jsx","Fragment","theme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"component-CS0uHwL5.js","sources":["../src/hooks/use-image-view/use.tsx","../src/components/image-select/component.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { SliderImageProps } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useImageViewProps } from '.';\n\nexport const useImageView = (props: useImageViewProps) => {\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const { add } = useDialog<{\n br?: string;\n }>({\n br: br,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(\n (image: SliderImageProps) => {\n add({\n content: (params, remove) => (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${props.imageSettings.aspect * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br,\n },\n tablet: {\n maxWidth: '95dvw',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain',\n },\n }}\n alt={image?.imageSrc}\n src={image?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre='realebail-white'\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n </Stack>\n ),\n });\n },\n [add, props.imageSettings.aspect, props.locale.imageFallback],\n );\n return { handleAdd };\n};\n","import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from '@local/consts';\nimport { useImageCrop } from '@local/hooks/use-image-crop';\nimport { useImageView } from '@local/hooks/use-image-view';\nimport { ErrorMessage } from '@local/styles/error';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { motion } from 'framer-motion';\nimport { DragEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { Button } from '../button';\nimport { Image } from '../image';\nimport { Stack } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSelectItemProps, ImageSelectListWrapper, ImageSelectProps, ImageSelectWrapper } from '.';\n\nexport const ImageSelect = (props: ImageSelectProps) => {\n const { onChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n\n const [images, setImages] = useState<ImageSelectItemProps[]>(props.images || []);\n\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n\n const refInput = useRef<HTMLInputElement | null>(null);\n\n const theme = useTheme();\n\n const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n if (e.dataTransfer.files?.length) {\n handleAddFilesCrop(e.dataTransfer.files);\n }\n };\n\n const handleDelete = (id: number) => {\n setImages((prev) => {\n const finalImages = prev.filter((img) => img.id !== id);\n onChange?.(finalImages);\n return finalImages;\n });\n };\n\n const handleOnSave = useCallback(\n (files: ImageSelectItemProps[] | null) => {\n if (files) {\n setImages((prev) => {\n const newImages = files.map((file, idx) => ({\n ...file,\n index: prev.length + idx,\n }));\n const finalImages = [...prev, ...newImages];\n onChange?.(finalImages);\n return finalImages;\n });\n }\n },\n [onChange],\n );\n\n const openFileDialog = () => {\n refInput.current?.click();\n };\n\n const resetImages = () => {\n setImages(props.defaultImages || []);\n onChange?.(props.defaultImages || []);\n };\n\n const { handleAddFiles: handleAddFilesCrop } = useImageCrop({\n onSave: handleOnSave,\n locale: props.locale,\n dialog: {\n button: {\n genre: props.propsButton.default.genre,\n size: props.propsButton.default.size,\n },\n buttonDelete: {\n genre: props.propsButton.delete.genre,\n size: props.propsButton.delete.size,\n },\n },\n imageSettings: {\n maxSize: props.imageSettings.maxSize,\n maxCount: props.imageSettings.maxCount - images.length,\n aspect: props.imageSettings.aspect,\n },\n refInput: refInput,\n });\n\n const { handleAdd } = useImageView({\n size: props.size,\n locale: props.locale,\n imageSettings: props.imageSettings,\n genre: props.genre,\n });\n\n useEffect(() => {\n setImages(props.images || []);\n }, [props.images]);\n\n return (\n <>\n <ImageSelectWrapper $genre={props.genre} $size={props.size} id={props.id} $sx={props.sx} $error={props.error}>\n <ImageSelectListWrapper\n onDrop={(e) => {\n handleDrop(e);\n setIsDraggingOver(false);\n }}\n onDragOver={(e) => e.preventDefault()}\n onDragEnter={() => setIsDraggingOver(true)}\n onDragLeave={() => setIsDraggingOver(false)}\n animate={{\n borderColor: isDraggingOver\n ? theme.colors.imageSelect[props.genre].border.hover\n : theme.colors.imageSelect[props.genre].border.rest,\n }}\n transition={{ duration: 0.3 }}\n $genre={props.genre}\n $size={props.size}\n >\n <motion.div\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n layout\n style={{ display: 'flex', flexWrap: 'wrap', gap: `${size.padding - 2}px` }}\n >\n {images.map(\n (img) =>\n img.url && (\n <motion.div\n key={img.id}\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n }}\n layout\n transition={{\n layout: {\n duration: 0.3,\n ease: 'easeInOut',\n type: 'spring',\n },\n }}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage={props.isContain}\n sxImage={{\n default: {\n objectFit: props.isContain ? 'contain' : 'cover',\n },\n }}\n alt={img.name || 'image'}\n src={img.url}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locale.imageFallback}\n </Typography>\n }\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Close',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleDelete(img.id)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size='small'\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => img.url && handleAdd({ id: img.id, imageSrc: img.url })}\n />\n </motion.div>\n ),\n )}\n {images.length === 0 ? (\n <div\n onClick={openFileDialog}\n key='empty'\n style={{\n position: 'relative',\n width: `${props.imageSettings.width}px`,\n height: `${props.imageSettings.height}px`,\n userSelect: 'none',\n overflow: 'hidden',\n borderRadius: `${size.radius}px`,\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n textAlign: 'center',\n cursor: 'pointer',\n }}\n >\n <Typography\n style={{\n color: theme.colors.imageSelect[props.genre].color.rest,\n }}\n sx={{\n default: {},\n }}\n >\n {props.locale.dragAndDrop}\n </Typography>\n </div>\n ) : null}\n </motion.div>\n\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) handleAddFilesCrop(e.target.files);\n }}\n />\n </ImageSelectListWrapper>\n <Stack sx={{ default: { flexGrow: 1, gap: `${size.padding - 2}px` } }}>\n <Button\n type='button'\n genre={props.genre}\n size={props.size}\n sx={{\n default: {\n flexGrow: 3,\n },\n }}\n isRadius\n onClick={openFileDialog}\n >\n {props.locale.buttonAdd}\n </Button>\n <Button\n isRadius\n type='button'\n sx={{\n default: {\n flexGrow: 1,\n },\n }}\n onClick={resetImages}\n genre={props.genre}\n size={props.size}\n >\n {props.locale.buttonReset}\n </Button>\n </Stack>\n </ImageSelectWrapper>\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: theme.font.family,\n }}\n />\n ) : null}\n </>\n );\n};\n"],"names":["jsxs","jsx","Fragment","theme"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),t=require("./consts.cjs.js"),n=require("./use-
|
|
2
|
-
//# sourceMappingURL=component-
|
|
1
|
+
"use strict";const e=require("./jsx-runtime-C6yv_9g1.cjs"),t=require("./consts.cjs.js"),n=require("./use-DGVoIo0g.cjs"),s=require("react"),l=require("./context.constants-CDgzMcxb.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)}})]})};
|
|
2
|
+
//# sourceMappingURL=component-DkO36zGe.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-
|
|
1
|
+
{"version":3,"file":"component-DkO36zGe.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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "./jsx-runtime-DZS36FSE.js";
|
|
2
2
|
import { LIST_IMAGE_SUPPORTED_FORMAT_FOR_INPUT } from "./consts.es.js";
|
|
3
|
-
import { u as useImageCrop } from "./use-
|
|
3
|
+
import { u as useImageCrop } from "./use-Cglz8LOj.js";
|
|
4
4
|
import { useRef, useCallback } from "react";
|
|
5
5
|
import { B as Button } from "./context.constants-Bh-ajJM2.js";
|
|
6
6
|
const ImageButton = (props) => {
|
|
@@ -47,4 +47,4 @@ const ImageButton = (props) => {
|
|
|
47
47
|
export {
|
|
48
48
|
ImageButton as I
|
|
49
49
|
};
|
|
50
|
-
//# sourceMappingURL=component-
|
|
50
|
+
//# sourceMappingURL=component-DrO-3u2I.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component-
|
|
1
|
+
{"version":3,"file":"component-DrO-3u2I.js","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":["jsxs","Fragment","jsx"],"mappings":";;;;;AAQO,MAAM,cAAoC,CAAC,UAAU;AAC1D,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,uBAAuB,YAAY,MAAM;;AAC7C,mBAAS,YAAT,mBAAkB;AAAA,EACpB,GAAG,CAAA,CAAE;AAEL,QAAM,EAAE,eAAA,IAAmB,aAAa;AAAA,IACtC,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,eAAe,MAAM;AAAA,IACrB;AAAA,EAAA,CACD;AAED,SACEA,kCAAAA,KAAAC,4BAAA,EACE,UAAA;AAAA,IAAAC,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG,MAAM;AAAA,QACV,SAAS,CAAC,MAAM;;AACd,4BAAM,QAAO,YAAb,4BAAuB;AACvB,+BAAA;AAAA,QACF;AAAA,QAEC,UAAA,MAAM,OAAO,YAAY,MAAM,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzCA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,UAAQ;AAAA,QACR,OAAO,EAAE,SAAS,OAAA;AAAA,QAClB,UAAU,CAAC,MAAM;AACf,cAAI,EAAE,OAAO,MAAO,gBAAe,EAAE,OAAO,KAAK;AAAA,QACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component-DkO36zGe.cjs");exports.ImageButton=e.ImageButton;
|
|
2
2
|
//# sourceMappingURL=component-image-button.cjs.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./component-C8NWMxxo.cjs"),t=require("./context.constants-CDgzMcxb.cjs");exports.ImageSelect=e.ImageSelect,exports.ImageSelectListSize=t.ImageSelectListSize,exports.ImageSelectListSizeConstructor=t.ImageSelectListSizeConstructor,exports.ImageSelectListWrapper=t.ImageSelectListWrapper,exports.ImageSelectSize=t.ImageSelectSize,exports.ImageSelectSizeConstructor=t.ImageSelectSizeConstructor,exports.ImageSelectWrapper=t.ImageSelectWrapper;
|
|
2
2
|
//# sourceMappingURL=component-image-select.cjs.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./context.constants-CDgzMcxb.cjs"),t=require("./component.constants-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./context.constants-CDgzMcxb.cjs"),t=require("./component.constants-QEk9PcRK.cjs");exports.SliderDot=e.SliderDot,exports.SliderImage=e.SliderImage,exports.IMAGES=t.IMAGES,exports.ImageSlider=t.ImageSlider;
|
|
2
2
|
//# sourceMappingURL=component-image-slider.cjs.js.map
|
|
@@ -4,7 +4,7 @@ import { I as Image } from "./component-9fzcSAV7.js";
|
|
|
4
4
|
import { b as Stack, c as StackMotion } from "./component-gcvwlILJ.js";
|
|
5
5
|
import "styled-components";
|
|
6
6
|
import "./context.constants-Nfy-8Qzj.js";
|
|
7
|
-
import { a as useDialog } from "./context.hooks-
|
|
7
|
+
import { a as useDialog } from "./context.hooks-CxwYYLmV.js";
|
|
8
8
|
import { AnimatePresence } from "framer-motion";
|
|
9
9
|
import { useMemo, useState, useCallback, useEffect } from "react";
|
|
10
10
|
const useImageSlider = (props) => {
|
|
@@ -734,4 +734,4 @@ export {
|
|
|
734
734
|
ImageSlider as I,
|
|
735
735
|
IMAGES as a
|
|
736
736
|
};
|
|
737
|
-
//# sourceMappingURL=component.constants-
|
|
737
|
+
//# sourceMappingURL=component.constants-DEtpkwiA.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.constants-DybDxNgw.js","sources":["../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { ImageSliderProps, SliderDot, SliderImage } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog, useDialogProps } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useImageSliderProps } from '.';\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const images = useMemo(() => props.images, [props.images]);\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0,\n });\n const isLengthOne = useMemo(() => images?.length === 1, [images]);\n const isLengthZero = useMemo(() => images?.length === 0, [images]);\n\n const activeImageIndex = useMemo(() => images.findIndex((img) => img.id === activeImageId), [activeImageId, images]);\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length;\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection });\n },\n [activeImageId, images],\n );\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo;\n const swipeThreshold = 50;\n const swipePower = Math.abs(offset.x) * velocity.x;\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1);\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1);\n }\n },\n [swipeToImage],\n );\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const newIndex = images.findIndex((img) => img.id === imageId);\n if (newIndex === -1 || newIndex === currentIndex) return;\n\n const direction = newIndex > currentIndex ? 1 : -1;\n setActiveImage({ activeImageId: imageId, direction });\n },\n [activeImageId, images],\n );\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId);\n }, [activeImageId, onIndexChange]);\n\n const { add } = useDialog<ComponentHandleAddProps>({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n };\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n\ntype ComponentHandleAddProps = {\n br?: string;\n dragEndHandler: (dragInfo: PanInfo) => void;\n images: ImageSliderProps['images'];\n children?: ImageSliderProps['children'];\n activeImageIndex: number;\n activeImageId: number | null;\n swipeToImage: (swipeDirection: number) => void;\n skipToImage: (imageId: number) => void;\n direction: number;\n aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.aspect! * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br,\n },\n tablet: {\n maxWidth: '95dvw',\n },\n }}\n >\n <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br,\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!params?.isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo),\n }\n : {})}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain',\n },\n }}\n alt={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {params?.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!params?.isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px',\n },\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {(params?.images ?? [])?.map((i) => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n );\n};\n","import { useImageSlider } from '@local/hooks/use-image-slider';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { AnimatePresence, Variants } from 'framer-motion';\nimport { FC, useMemo } from 'react';\n\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Image } from '../image';\nimport { Stack, StackMotion } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSliderProps, SliderDot, SliderImage } from '.';\n\nexport const ImageSlider: FC<ImageSliderProps> = (props) => {\n const { onIndexChange } = props;\n const images = useMemo(() => props.images, [props.images]);\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children,\n });\n return (\n <StackMotion\n {...props.propsStack}\n sx={(theme) => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {}),\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {}),\n },\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Icon size='large' type='loading' color='blueFocus' name='Line' />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br,\n }}\n custom={direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo),\n }\n : {})}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {images.map((i) => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n );\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n","import 'styled-components';\n\nimport { Button } from '../button';\nimport { Stack } from '../stack';\nimport { ImageSliderProps } from '.';\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v',\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D',\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg',\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n];\n"],"names":["direction","jsx","sliderVariants","sliderTransition","jsxs","Fragment","_a","_b","_c","_d"],"mappings":";;;;;;;;;AAaO,MAAM,iBAAiB,CAAC,UAA+B;;AAC5D,QAAM,EAAE,kBAAkB;AAE1B,QAAM,OAAO,QAAQ,MAAM,cAAc,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AAClE,QAAM,KAAK,QAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,CAAC;AAE1D,QAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC;AAEzD,QAAM,CAAC,EAAE,eAAe,aAAa,cAAc,IAAI,SAAS;AAAA,IAC9D,iBAAe,sCAAS,OAAT,mBAAa,OAAM;AAAA,IAClC,WAAW;AAAA,EAAA,CACZ;AACD,QAAM,cAAc,QAAQ,OAAM,iCAAQ,YAAW,GAAG,CAAC,MAAM,CAAC;AAChE,QAAM,eAAe,QAAQ,OAAM,iCAAQ,YAAW,GAAG,CAAC,MAAM,CAAC;AAEjE,QAAM,mBAAmB,QAAQ,MAAM,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,aAAa,GAAG,CAAC,eAAe,MAAM,CAAC;AAEnH,QAAM,eAAe;AAAA,IACnB,CAAC,mBAA2B;AAC1B,YAAM,eAAe,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,aAAa;AACvE,YAAM,aAAa,eAAe,iBAAiB,OAAO,UAAU,OAAO;AAC3E,qBAAe,EAAE,eAAe,OAAO,SAAS,EAAE,IAAI,WAAW,gBAAgB;AAAA,IACnF;AAAA,IACA,CAAC,eAAe,MAAM;AAAA,EAAA;AAExB,QAAM,iBAAiB;AAAA,IACrB,CAAC,aAAsB;AACrB,YAAM,EAAE,QAAQ,SAAA,IAAa;AAC7B,YAAM,iBAAiB;AACvB,YAAM,aAAa,KAAK,IAAI,OAAO,CAAC,IAAI,SAAS;AAEjD,UAAI,aAAa,OAAO,OAAO,IAAI,gBAAgB;AACjD,qBAAa,EAAE;AAAA,MACjB,WAAW,aAAa,QAAQ,OAAO,IAAI,CAAC,gBAAgB;AAC1D,qBAAa,CAAC;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAEf,QAAM,cAAc;AAAA,IAClB,CAAC,YAAoB;AACnB,YAAM,eAAe,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,aAAa;AACvE,YAAM,WAAW,OAAO,UAAU,CAAC,QAAQ,IAAI,OAAO,OAAO;AAC7D,UAAI,aAAa,MAAM,aAAa,aAAc;AAElD,YAAMA,aAAY,WAAW,eAAe,IAAI;AAChD,qBAAe,EAAE,eAAe,SAAS,WAAAA,YAAW;AAAA,IACtD;AAAA,IACA,CAAC,eAAe,MAAM;AAAA,EAAA;AAGxB,YAAU,MAAM;AACd,QAAI,8DAA+B;AAAA,EACrC,GAAG,CAAC,eAAe,aAAa,CAAC;AAEjC,QAAM,EAAE,IAAA,IAAQ,UAAmC;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,cAAc;AAAA,IAC5B,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ,cAAc,MAAM,QAAQ;AAAA,IAC5B;AAAA,IACA,aAAa;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,IAAA;AAAA,EACd,CACD;AACD,QAAM,YAAY,YAAY,MAAM;AAClC,QAAI;AAAA,MACF,SAAS,CAAC,QAAQ,WAAWC,kCAAAA,IAAC,oBAAA,EAAmB,QAAgB,OAAA,CAAgB;AAAA,IAAA,CAClF;AAAA,EACH,GAAG,CAAC,GAAG,CAAC;AAER,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;AACA,MAAMC,mBAA2B;AAAA,EAC/B,SAAS,CAAC,eAAe;AAAA,IACvB,GAAG,YAAY,IAAI,SAAS;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ,EAAE,GAAG,GAAG,OAAO,GAAG,SAAS,EAAA;AAAA,EACnC,MAAM,CAAC,eAAe;AAAA,IACpB,GAAG,YAAY,IAAI,UAAU;AAAA,IAC7B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AACA,MAAMC,qBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAC/B;AAiBA,MAAM,qBAGD,CAAC,EAAE,QAAQ,aAAa;;AAC3B,SACEC,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,SAAS;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,aAAa,IAAG,iCAAQ,UAAU,CAAC;AAAA,UACnC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,cAAc,iCAAQ;AAAA,QAAA;AAAA,QAExB,QAAQ;AAAA,UACN,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAGF,UAAA;AAAA,QAAAH,sCAAC,iBAAA,EAAgB,SAAS,OAAO,QAAQ,iCAAQ,WAC/C,UAAAG,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,cACL,UAAU;AAAA,cACV,cAAc,iCAAQ;AAAA,YAAA;AAAA,YAExB,QAAQ,iCAAQ;AAAA,YAChB,UAAUF;AAAAA,YACV,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,YAAYC;AAAAA,YACX,GAAI,EAAC,iCAAQ,eACV;AAAA,cACE,MAAM;AAAA,cACN,iBAAiB,EAAE,MAAM,GAAG,OAAO,EAAA;AAAA,cACnC,aAAa;AAAA,cACb,WAAW,CAAC,GAAG,aAAa,iCAAQ,eAAe;AAAA,YAAQ,IAE7D,CAAA;AAAA,YAEJ,UAAA;AAAA,cAAAF,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,CAAC,WAAW;AAAA,oBACnB,SAAS;AAAA,sBACP,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,gBAAgB;AAAA,sBAChB,iBAAiB,MAAM,QAAQ;AAAA,sBAC/B,UAAU;AAAA,sBACV,eAAe;AAAA,oBAAA;AAAA,kBACjB;AAAA,kBAEF,mBAAiB;AAAA,kBACjB,SAAS;AAAA,oBACP,SAAS;AAAA,sBACP,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,MAAM,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,kBAC9D,MAAM,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,kBAC9D,mBACEA,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,IAAI;AAAA,wBACF,SAAS;AAAA,0BACP,SAAS;AAAA,wBAAA;AAAA,sBACX;AAAA,sBAGD,UAAA,iCAAQ;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACX;AAAA,cAAA;AAAA,eAGF,6CAAQ,WAAU,CAAA,MAAlB,oBAAwB,iCAAQ,qBAAoB,OAApD,mBAAwD;AAAA,YAAA;AAAA,UAAA;AAAA,UApDrD,iCAAQ;AAAA,QAAA,GAsDjB;AAAA,QACC,QAAO,iCAAQ,cAAa,cAAa,sCAAQ,aAAR,gCAAmB,EAAE,UAAU,KAAA,KAAU,iCAAQ;AAAA,QAE3FA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,gBACP,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,OAAO;AAAA,cAAA;AAAA,YACT;AAAA,YAEF,QAAO,iCAAQ,UAAS;AAAA,YACxB,OAAM,iCAAQ,SAAQ;AAAA,YACtB,OAAO;AAAA,cACL;AAAA,gBACE,MAAM;AAAA,gBACN,MAAM;AAAA,cAAA;AAAA,YACR;AAAA,YAEF,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,UAAQ;AAAA,YACR,SAAS,MAAM;AAAA,UAAS;AAAA,QAAA;AAAA,QAEzB,EAAC,iCAAQ,eACRG,kCAAAA,KAAAC,kBAAAA,UAAA,EACE,UAAA;AAAA,UAAAD,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,KAAK;AAAA,gBAAA;AAAA,cACP;AAAA,cAGF,UAAA;AAAA,gBAAAH,kCAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAO,iCAAQ,UAAS;AAAA,oBACxB,OAAM,iCAAQ,SAAQ;AAAA,oBACtB,OAAO;AAAA,sBACL;AAAA,wBACE,MAAM;AAAA,wBACN,MAAM;AAAA,wBACN,MAAM;AAAA,sBAAA;AAAA,oBACR;AAAA,oBAEF,iBAAe;AAAA,oBACf,gBAAc;AAAA,oBACd,qBAAmB;AAAA,oBACnB,UAAQ;AAAA,oBACR,SAAS,MAAA;;AAAM,8BAAAK,MAAA,iCAAQ,iBAAR,gBAAAA,IAAA,aAAuB;AAAA;AAAA,kBAAE;AAAA,gBAAA;AAAA,gBAE1CL,kCAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,QAAO,iCAAQ,UAAS;AAAA,oBACxB,OAAM,iCAAQ,SAAQ;AAAA,oBACtB,OAAO;AAAA,sBACL;AAAA,wBACE,MAAM;AAAA,wBACN,MAAM;AAAA,wBACN,MAAM;AAAA,sBAAA;AAAA,oBACR;AAAA,oBAEF,iBAAe;AAAA,oBACf,gBAAc;AAAA,oBACd,qBAAmB;AAAA,oBACnB,UAAQ;AAAA,oBACR,SAAS,MAAA;;AAAM,8BAAAK,MAAA,iCAAQ,iBAAR,gBAAAA,IAAA,aAAuB;AAAA;AAAA,kBAAC;AAAA,gBAAA;AAAA,cACzC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFL,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,WAAW;AAAA,kBACX,KAAK;AAAA,gBAAA;AAAA,cACP;AAAA,cAGA,kDAAQ,WAAU,CAAA,yBAAK,IAAI,CAAC,MAC5BA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,MAAA;;AAAM,4BAAAK,MAAA,iCAAQ,gBAAR,gBAAAA,IAAA,aAAsB,EAAE;AAAA;AAAA,kBAEvC,SAAS;AAAA,kBACT,SAAS;AAAA,oBACP,QAAO,iCAAQ,mBAAkB,EAAE,KAAK,MAAM;AAAA,oBAC9C,UAAS,iCAAQ,mBAAkB,EAAE,KAAK,IAAI;AAAA,kBAAA;AAAA,gBAChD;AAAA,gBALK,EAAE;AAAA,cAAA;AAAA,YAOV;AAAA,UAAA;AAAA,QACH,EAAA,CACF,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGV;AC5SO,MAAM,cAAoC,CAAC,UAAU;;AAC1D,QAAM,EAAE,kBAAkB;AAC1B,QAAM,SAAS,QAAQ,MAAM,MAAM,QAAQ,CAAC,MAAM,MAAM,CAAC;AACzD,QAAM,OAAO,QAAQ,MAAM,cAAc,MAAM,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC;AAClE,QAAM,KAAK,QAAQ,MAAM,GAAG,KAAK,MAAM,MAAM,CAAC,KAAK,MAAM,CAAC;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,eAAe;AAAA,IACjB,OAAO,MAAM;AAAA,IACb,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,eAAe,MAAM;AAAA,IACrB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,UAAU,MAAM;AAAA,EAAA,CACjB;AACD,SACEL,kCAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG,MAAM;AAAA,MACV,IAAI,CAAC,UAAA;;AAAW;AAAA,UACd,IAAGK,MAAA,MAAM,eAAN,gBAAAA,IAAkB;AAAA,UACrB,SAAS;AAAA,YACP,cAAc;AAAA,YACd,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,OAAO;AAAA,YACP,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,KAAIC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,MAClB,SAAOC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,QAAO,cAC9BC,MAAA,MAAM,eAAN,gBAAAA,IAAkB,GAAG,OAAO,WAC5B,WAAM,eAAN,mBAAkB,GAAG,UACvB,CAAA;AAAA,UAAC;AAAA,UAEP,QAAQ;AAAA,YACN,UAAU;AAAA,YACV,KAAI,WAAM,eAAN,mBAAkB,MAClB,SAAO,WAAM,eAAN,mBAAkB,QAAO,cAC9B,WAAM,eAAN,mBAAkB,GAAG,OAAO,UAC5B,WAAM,eAAN,mBAAkB,GAAG,SACvB,CAAA;AAAA,UAAC;AAAA,QACP;AAAA;AAAA,MAGD,gBAAM,YACLR,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAGF,UAAAA,kCAAAA,IAAC,QAAK,MAAK,SAAQ,MAAK,WAAU,OAAM,aAAY,MAAK,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA,IAEhE,CAAC,eACHG,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAGF,UAAA;AAAA,YAAAH,kCAAAA,IAAC,iBAAA,EAAgB,SAAS,OAAO,QAAQ,WACvC,UAAAG,kCAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,cAAc;AAAA,gBAAA;AAAA,gBAEhB,QAAQ;AAAA,gBACR,UAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,YAAY;AAAA,gBACX,GAAI,CAAC,cACF;AAAA,kBACE,MAAM;AAAA,kBACN,iBAAiB,EAAE,MAAM,GAAG,OAAO,EAAA;AAAA,kBACnC,aAAa;AAAA,kBACb,WAAW,CAAC,GAAG,aAAa,eAAe,QAAQ;AAAA,gBAAA,IAErD,CAAA;AAAA,gBAEJ,UAAA;AAAA,kBAAAH,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,CAAC,WAAW;AAAA,wBACnB,SAAS;AAAA,0BACP,OAAO;AAAA,0BACP,QAAQ;AAAA,0BACR,YAAY;AAAA,0BACZ,gBAAgB;AAAA,0BAChB,iBAAiB,MAAM,QAAQ;AAAA,0BAC/B,UAAU;AAAA,0BACV,eAAe;AAAA,wBAAA;AAAA,sBACjB;AAAA,sBAEF,MAAK,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,sBAC/B,MAAK,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,sBAC/B,mBACEA,kCAAAA;AAAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,IAAI;AAAA,4BACF,SAAS;AAAA,8BACP,SAAS;AAAA,4BAAA;AAAA,0BACX;AAAA,0BAGD,gBAAM,QAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACjB;AAAA,kBAAA;AAAA,mBAGH,YAAO,gBAAgB,MAAvB,mBAA0B;AAAA,gBAAA;AAAA,cAAA;AAAA,cA9CtB;AAAA,YAAA,GAgDT;AAAA,YACC,QAAO,+BAAO,cAAa,cAAa,oCAAO,aAAP,+BAAkB,EAAE,UAAU,MAAA,KAAW,+BAAO;AAAA,YAExF,CAAC,eACAG,kCAAAA,KAAAC,kBAAAA,UAAA,EACE,UAAA;AAAA,cAAAJ,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,MAAM;AAAA,sBACN,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,OAAO,MAAM;AAAA,kBACb,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM,aAAa,EAAE;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEhCA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,KAAK;AAAA,sBACL,OAAO;AAAA,sBACP,WAAW;AAAA,oBAAA;AAAA,kBACb;AAAA,kBAEF,OAAO,MAAM;AAAA,kBACb,MAAM,MAAM;AAAA,kBACZ,OAAO;AAAA,oBACL;AAAA,sBACE,MAAM;AAAA,sBACN,MAAM;AAAA,sBACN,MAAM;AAAA,oBAAA;AAAA,kBACR;AAAA,kBAEF,iBAAe;AAAA,kBACf,gBAAc;AAAA,kBACd,UAAQ;AAAA,kBACR,SAAS,MAAM,aAAa,CAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,cAE/BA,kCAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,oBACF,SAAS;AAAA,sBACP,UAAU;AAAA,sBACV,QAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,WAAW;AAAA,sBACX,KAAK;AAAA,oBAAA;AAAA,kBACP;AAAA,kBAGD,UAAA,OAAO,IAAI,CAAC,MACXA,kCAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,SAAS,MAAM,YAAY,EAAE,EAAE;AAAA,sBAE/B,SAAS;AAAA,sBACT,SAAS;AAAA,wBACP,OAAO,kBAAkB,EAAE,KAAK,MAAM;AAAA,wBACtC,SAAS,kBAAkB,EAAE,KAAK,IAAI;AAAA,sBAAA;AAAA,oBACxC;AAAA,oBALK,EAAE;AAAA,kBAAA,CAOV;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YAGFA,kCAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,SAAS;AAAA,oBACP,UAAU;AAAA,oBACV,QAAQ;AAAA,oBACR,OAAO;AAAA,kBAAA;AAAA,gBACT;AAAA,gBAEF,OAAO,MAAM;AAAA,gBACb,MAAM,MAAM;AAAA,gBACZ,OAAO;AAAA,kBACL;AAAA,oBACE,MAAM;AAAA,oBACN,MAAM;AAAA,kBAAA;AAAA,gBACR;AAAA,gBAEF,iBAAe;AAAA,gBACf,gBAAc;AAAA,gBACd,UAAQ;AAAA,gBACR,SAAS,MAAM,UAAA;AAAA,cAAU;AAAA,YAAA;AAAA,UAC3B;AAAA,QAAA;AAAA,MAAA,IAGFA,kCAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,YACF,SAAS;AAAA,cACP,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAAA;AAAA,UAClB;AAAA,UAGF,UAAAA,kCAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,kBACP,SAAS;AAAA,gBAAA;AAAA,cACX;AAAA,cAGD,gBAAM,QAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AACA,MAAM,iBAA2B;AAAA,EAC/B,SAAS,CAAC,eAAe;AAAA,IACvB,GAAG,YAAY,IAAI,SAAS;AAAA,IAC5B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ,EAAE,GAAG,GAAG,OAAO,GAAG,SAAS,EAAA;AAAA,EACnC,MAAM,CAAC,eAAe;AAAA,IACpB,GAAG,YAAY,IAAI,UAAU;AAAA,IAC7B,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AACA,MAAM,mBAAmB;AAAA,EACvB,UAAU;AAAA,EACV,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI;AAC/B;ACzRO,MAAM,SAAqC;AAAA,EAChD;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAAA,EAEJ;AAAA,IACE,IAAI;AAAA,IACJ,UACEA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,UACF,SAAS;AAAA,YACP,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,UAAU;AAAA,UAAA;AAAA,QACZ;AAAA,QAGF,UAAAA,kCAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,gBAAc;AAAA,YACd,YAAU;AAAA,YACV,OAAM;AAAA,YACN,MAAK;AAAA,YACL,cAAc,EAAE,SAAS,EAAE,QAAQ,MAAI;AAAA,YACxC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED;AAAA,IAAA;AAAA,IAGJ,UACE;AAAA,EAAA;AAEN;"}
|
|
1
|
+
{"version":3,"file":"component.constants-DEtpkwiA.js","sources":["../src/hooks/use-image-slider/use.tsx","../src/components/image-slider/component.tsx","../src/components/image-slider/component.constants.tsx"],"sourcesContent":["import { Button } from '@local/components/button';\nimport { Image } from '@local/components/image';\nimport { ImageSliderProps, SliderDot, SliderImage } from '@local/components/image-slider';\nimport { Stack } from '@local/components/stack';\nimport { Typography } from '@local/components/typography';\nimport { useDialog, useDialogProps } from '@local/contexts/context-dialog';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { AnimatePresence, PanInfo, Variants } from 'framer-motion';\nimport { FC, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useImageSliderProps } from '.';\n\nexport const useImageSlider = (props: useImageSliderProps) => {\n const { onIndexChange } = props;\n\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const images = useMemo(() => props.images, [props.images]);\n\n const [{ activeImageId, direction }, setActiveImage] = useState({\n activeImageId: images?.[0]?.id ?? null,\n direction: 0,\n });\n const isLengthOne = useMemo(() => images?.length === 1, [images]);\n const isLengthZero = useMemo(() => images?.length === 0, [images]);\n\n const activeImageIndex = useMemo(() => images.findIndex((img) => img.id === activeImageId), [activeImageId, images]);\n\n const swipeToImage = useCallback(\n (swipeDirection: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const nextIndex = (currentIndex + swipeDirection + images.length) % images.length;\n setActiveImage({ activeImageId: images[nextIndex].id, direction: swipeDirection });\n },\n [activeImageId, images],\n );\n const dragEndHandler = useCallback(\n (dragInfo: PanInfo) => {\n const { offset, velocity } = dragInfo;\n const swipeThreshold = 50;\n const swipePower = Math.abs(offset.x) * velocity.x;\n\n if (swipePower > 500 || offset.x > swipeThreshold) {\n swipeToImage(-1);\n } else if (swipePower < -500 || offset.x < -swipeThreshold) {\n swipeToImage(1);\n }\n },\n [swipeToImage],\n );\n const skipToImage = useCallback(\n (imageId: number) => {\n const currentIndex = images.findIndex((img) => img.id === activeImageId);\n const newIndex = images.findIndex((img) => img.id === imageId);\n if (newIndex === -1 || newIndex === currentIndex) return;\n\n const direction = newIndex > currentIndex ? 1 : -1;\n setActiveImage({ activeImageId: imageId, direction });\n },\n [activeImageId, images],\n );\n\n useEffect(() => {\n if (activeImageId) onIndexChange?.(activeImageId);\n }, [activeImageId, onIndexChange]);\n\n const { add } = useDialog<ComponentHandleAddProps>({\n br: br,\n dragEndHandler: dragEndHandler,\n images: images,\n children: props.children,\n activeImageIndex: activeImageIndex,\n activeImageId: activeImageId,\n swipeToImage: swipeToImage,\n skipToImage: skipToImage,\n direction: direction,\n aspect: props.imageSettings.aspect,\n genre: props.genre,\n size: props.size,\n failedToLoad: props.locales.failedToLoad,\n isLengthOne: isLengthOne,\n propsDialog: {\n borderRadius: br,\n padding: '0',\n background: 'whiteStandard',\n },\n });\n const handleAdd = useCallback(() => {\n add({\n content: (params, remove) => <ComponentHandleAdd params={params} remove={remove} />,\n });\n }, [add]);\n\n return {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n };\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n\ntype ComponentHandleAddProps = {\n br?: string;\n dragEndHandler: (dragInfo: PanInfo) => void;\n images: ImageSliderProps['images'];\n children?: ImageSliderProps['children'];\n activeImageIndex: number;\n activeImageId: number | null;\n swipeToImage: (swipeDirection: number) => void;\n skipToImage: (imageId: number) => void;\n direction: number;\n aspect: number;\n failedToLoad: string;\n isLengthOne: boolean;\n} & Pick<ImageSliderProps, 'genre' | 'size'>;\n\nconst ComponentHandleAdd: FC<{\n params?: useDialogProps<ComponentHandleAddProps>;\n remove?: () => void;\n}> = ({ params, remove }) => {\n return (\n <Stack\n sx={{\n default: {\n position: 'relative',\n overflow: 'hidden',\n aspectRatio: `${params?.aspect! * 2} / 2`,\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n borderRadius: params?.br,\n },\n tablet: {\n maxWidth: '95dvw',\n },\n }}\n >\n <AnimatePresence initial={false} custom={params?.direction}>\n <SliderImage\n key={params?.activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: params?.br,\n }}\n custom={params?.direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!params?.isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => params?.dragEndHandler(dragInfo),\n }\n : {})}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n isShowBeforeImage\n sxImage={{\n default: {\n objectFit: 'contain',\n },\n }}\n alt={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n src={(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {params?.failedToLoad}\n </Typography>\n }\n />\n {(params?.images ?? [])?.[params?.activeImageIndex ?? 0]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof params?.children === 'function' ? params?.children?.({ isDialog: true }) : params?.children}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n right: 15,\n },\n }}\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => remove?.()}\n />\n {!params?.isLengthOne ? (\n <>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: 15,\n gap: '8px',\n },\n }}\n >\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(-1)}\n />\n <Button\n genre={params?.genre ?? 'product'}\n size={params?.size ?? 'medium'}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isPlaystationEffect\n isRadius\n onClick={() => params?.swipeToImage?.(1)}\n />\n </Stack>\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 15,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {(params?.images ?? [])?.map((i) => (\n <SliderDot\n onClick={() => params?.skipToImage?.(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: params?.activeImageId === i.id ? 1.5 : 1,\n opacity: params?.activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n ) : null}\n </Stack>\n );\n};\n","import { useImageSlider } from '@local/hooks/use-image-slider';\nimport { KEY_SIZE_DATA } from '@local/theme';\n\nimport { AnimatePresence, Variants } from 'framer-motion';\nimport { FC, useMemo } from 'react';\n\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Image } from '../image';\nimport { Stack, StackMotion } from '../stack';\nimport { Typography } from '../typography';\nimport { ImageSliderProps, SliderDot, SliderImage } from '.';\n\nexport const ImageSlider: FC<ImageSliderProps> = (props) => {\n const { onIndexChange } = props;\n const images = useMemo(() => props.images, [props.images]);\n const size = useMemo(() => KEY_SIZE_DATA[props.size], [props.size]);\n const br = useMemo(() => `${size.radius}px`, [size.radius]);\n\n const {\n isLengthZero,\n direction,\n activeImageId,\n isLengthOne,\n dragEndHandler,\n activeImageIndex,\n swipeToImage,\n skipToImage,\n handleAdd,\n } = useImageSlider({\n genre: props.genre,\n size: props.size,\n images: images,\n imageSettings: props.imageSettings,\n locales: props.locales,\n onIndexChange: onIndexChange,\n children: props.children,\n });\n return (\n <StackMotion\n {...props.propsStack}\n sx={(theme) => ({\n ...props.propsStack?.sx,\n default: {\n borderRadius: br,\n flexDirection: 'column',\n alignItems: 'center',\n overflow: 'hidden',\n width: 'auto',\n maxWidth: '70dvw',\n height: '85dvh',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).default\n : props.propsStack?.sx.default\n : {}),\n },\n tablet: {\n maxWidth: '95dvw',\n ...(props.propsStack?.sx\n ? typeof props.propsStack?.sx === 'function'\n ? props.propsStack?.sx(theme).tablet\n : props.propsStack?.sx.tablet\n : {}),\n },\n })}\n >\n {props.isLoading ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Icon size='large' type='loading' color='blueFocus' name='Line' />\n </Stack>\n ) : !isLengthZero ? (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n },\n }}\n >\n <AnimatePresence initial={false} custom={direction}>\n <SliderImage\n key={activeImageId}\n style={{\n overflow: 'hidden',\n borderRadius: br,\n }}\n custom={direction}\n variants={sliderVariants}\n initial='initial'\n animate='active'\n exit='exit'\n transition={sliderTransition}\n {...(!isLengthOne\n ? {\n drag: 'x',\n dragConstraints: { left: 0, right: 0 },\n dragElastic: 0.5,\n onDragEnd: (_, dragInfo) => dragEndHandler(dragInfo),\n }\n : {})}\n >\n <Image\n sxStack={(theme) => ({\n default: {\n width: '100%',\n height: '100%',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.palette.black10,\n position: 'absolute',\n pointerEvents: 'none',\n },\n })}\n alt={images[activeImageIndex]?.imageSrc}\n src={images[activeImageIndex]?.imageSrc}\n componentFallback={\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.failedToLoad}\n </Typography>\n }\n />\n {images[activeImageIndex]?.children}\n </SliderImage>\n </AnimatePresence>\n {typeof props?.children === 'function' ? props?.children?.({ isDialog: false }) : props?.children}\n\n {!isLengthOne && (\n <>\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n left: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: 90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(-1)}\n />\n <Button\n sx={{\n default: {\n position: 'absolute',\n top: '50%',\n right: 5,\n transform: 'translateY(-50%)',\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Arrow4',\n turn: -90,\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => swipeToImage(1)}\n />\n <Stack\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n left: '50%',\n transform: 'translateX(-50%)',\n gap: '4px',\n },\n }}\n >\n {images.map((i) => (\n <SliderDot\n onClick={() => skipToImage(i.id)}\n key={i.id}\n initial={false}\n animate={{\n scale: activeImageId === i.id ? 1.5 : 1,\n opacity: activeImageId === i.id ? 1 : 0.5,\n }}\n />\n ))}\n </Stack>\n </>\n )}\n\n <Button\n sx={{\n default: {\n position: 'absolute',\n bottom: 5,\n right: 5,\n },\n }}\n genre={props.genre}\n size={props.size}\n icons={[\n {\n type: 'id',\n name: 'Activity',\n },\n ]}\n isWidthAsHeight\n isHiddenBorder\n isRadius\n onClick={() => handleAdd()}\n />\n </Stack>\n ) : (\n <Stack\n sx={{\n default: {\n width: '100%',\n height: '100%',\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n },\n }}\n >\n <Typography\n sx={{\n default: {\n variant: 'h6',\n },\n }}\n >\n {props.locales.noImagesAvailable}\n </Typography>\n </Stack>\n )}\n </StackMotion>\n );\n};\nconst sliderVariants: Variants = {\n initial: (direction) => ({\n x: direction > 0 ? '100%' : '-100%',\n scale: 1,\n opacity: 0,\n }),\n active: { x: 0, scale: 1, opacity: 1 },\n exit: (direction) => ({\n x: direction > 0 ? '-100%' : '100%',\n scale: 1,\n opacity: 0.2,\n }),\n};\nconst sliderTransition = {\n duration: 0.3,\n ease: [0.56, 0.03, 0.12, 1.04],\n};\n","import 'styled-components';\n\nimport { Button } from '../button';\nimport { Stack } from '../stack';\nimport { ImageSliderProps } from '.';\n\nexport const IMAGES: ImageSliderProps['images'] = [\n {\n id: 0,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://drupal-prod.visitcalifornia.com/sites/default/files/styles/fluid_1920/public/2020-06/VC_PlacesToVisit_LosAngelesCounty_RF_1170794243.jpg.webp?itok=46pJYz8v',\n },\n {\n id: 1,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.unsplash.com/flagged/photo-1575555201693-7cd442b8023f?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bG9zJTIwYW5nZWxlc3xlbnwwfHwwfHx8MA%3D%3D',\n },\n {\n id: 2,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://img.goodfon.com/original/2048x1319/8/29/ssha-kaliforniia-los-andzheles-los-angeles-doma-neboskreby-s.jpg',\n },\n {\n id: 3,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/2231756/pexels-photo-2231756.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n {\n id: 4,\n children: (\n <Stack\n sx={{\n default: {\n justifyContent: 'flex-start',\n padding: '5px',\n flexGrow: 1,\n },\n }}\n >\n <Button\n isHiddenBorder\n isDisabled\n genre='realebail-white'\n size='medium'\n sxTypography={{ default: { weight: 700 } }}\n >\n Los Angeles\n </Button>\n </Stack>\n ),\n imageSrc:\n 'https://images.pexels.com/photos/1813157/pexels-photo-1813157.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500',\n },\n];\n"],"names":["direction","jsx","sliderVariants","sliderTransition","jsxs","Fragment","_a","_b","_c","_d"],"mappings":"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"}
|