@wishket/design-system 2.1.2 → 2.1.4
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/dist/Components/Feedbacks/DialogBox/DialogBox.js +4 -4
- package/dist/Components/Inputs/RangeSlider/RangeSlider.d.ts +1 -1
- package/dist/Components/Inputs/RangeSlider/RangeSlider.js +4 -42
- package/dist/Components/Utils/ModalContainer/ModalContainer.js +1 -1
- package/dist/cjs/Components/Feedbacks/DialogBox/DialogBox.js +3 -3
- package/dist/cjs/Components/Inputs/RangeSlider/RangeSlider.js +4 -42
- package/dist/cjs/Components/Utils/ModalContainer/ModalContainer.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as
|
|
2
|
-
return e(
|
|
3
|
-
/*#__PURE__*/e(
|
|
1
|
+
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{Button as t}from"../../Inputs/Button/Button.js";const i=({title:i,description:s,variant:n="primary",onClose:c,onConfirm:m,confirm:d,close:g="닫기",testId:p})=>{const u="caution"===n;/*#__PURE__*/
|
|
2
|
+
return e(l,{className:"bg-w-white shadow-modal tablet:w-[400px] flex h-fit max-w-[calc(100vw-40px)] flex-col items-center gap-8 rounded-3xl p-8 font-normal not-italic","data-testid":p||"design-system--dialog-box",children:[
|
|
3
|
+
/*#__PURE__*/e(l,{className:"flex w-full flex-col gap-6",children:[
|
|
4
4
|
/*#__PURE__*/r(a,{variant:"subTitle18",className:"text-w-gray-900 font-medium",children:i}),
|
|
5
5
|
/*#__PURE__*/r(a,{variant:"body16",className:"text-w-gray-800 whitespace-break-spaces",children:s})]}),
|
|
6
|
-
/*#__PURE__*/e(
|
|
6
|
+
/*#__PURE__*/e(l,{className:"flex w-full items-center justify-end gap-4",children:[g&&/*#__PURE__*/r(t,{role:"close",onClick:c,variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-300 hover:bg-w-bluegray-300",children:g}),d&&/*#__PURE__*/r(t,{role:"confirm",onClick:m,variant:"solid",className:o(u&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-600 hover:bg-w-orange-600"),children:d})]})]})};export{i as DialogBox};
|
|
@@ -50,5 +50,5 @@ export interface RangeSliderProps extends Omit<ComponentProps<'input'>, 'value'
|
|
|
50
50
|
* onChange={(value) => console.log(value)}
|
|
51
51
|
* />
|
|
52
52
|
*/
|
|
53
|
-
declare const RangeSlider: ({ variant, size, step, value, min, max, onChange, className, ...rest }: RangeSliderProps) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
declare const RangeSlider: ({ variant, size, step, value, min, max, onChange, className, disabled, ...rest }: RangeSliderProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
54
|
export { RangeSlider };
|
|
@@ -1,43 +1,5 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as n}from"tailwind-merge";import{useState as r,useEffect as a}from"react";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){m(e,t,n[t])}))}return e}function o(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
/*#__PURE__*/t("input",s({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:p,max:c,value:v.max,onInput:e=>B(e,"max"),step:g,className:n("pointer-events-auto absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",D(),z&&"pointer-events-none","end"===N&&"z-50")},y)),
|
|
5
|
-
/*#__PURE__*/e(i,{"data-testid":"design-system-rangeSlider--container",className:n("relative overflow-hidden","sm"===d&&"h-1 rounded-xs","md"===d&&"h-2 rounded"),children:["md"===d&&/*#__PURE__*/t(i,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:[...Array($)].map(((e,n)=>/*#__PURE__*/t(i,{"data-testid":"design-system-rangeSlider--unit-dot",className:"bg-w-white size-1 rounded-full"},n)))}),
|
|
1
|
+
"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as n}from"tailwind-merge";import{useState as r,useEffect as a}from"react";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){m(e,t,n[t])}))}return e}function o(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}const u="\n [&::-moz-range-thumb]:pointer-events-auto\n [&::-moz-range-thumb]:mr-2\n [&::-moz-range-thumb]:-translate-x-1/4\n [&::-moz-range-thumb]:transform\n [&::-moz-range-thumb]:appearance-none\n [&::-moz-range-thumb]:rounded-full\n [&::-moz-range-thumb]:border\n [&::-moz-range-thumb]:border-w-gray-200\n [&::-moz-range-thumb]:bg-transparent\n [&::-moz-range-thumb]:bg-white\n [&::-moz-range-thumb]:shadow-graymedium\n [&::-moz-range-thumb]:outline\n [&::-moz-range-thumb]:inset-ring\n [&::-moz-range-thumb]:inset-ring-w-gray-200\n [&::-moz-range-thumb]:transition-all\n [&::-moz-range-thumb]:duration-150\n [&::-moz-range-thumb]:ease-in-out\n [&::-moz-range-thumb]:dark:bg-w-white\n\n [&::-webkit-slider-thumb]:pointer-events-auto\n [&::-webkit-slider-thumb]:mr-2\n [&::-webkit-slider-thumb]:-translate-x-1/4\n [&::-webkit-slider-thumb]:transform\n [&::-webkit-slider-thumb]:appearance-none\n [&::-webkit-slider-thumb]:rounded-full\n [&::-webkit-slider-thumb]:border\n [&::-webkit-slider-thumb]:border-w-gray-200\n [&::-webkit-slider-thumb]:bg-transparent\n [&::-webkit-slider-thumb]:bg-white\n [&::-webkit-slider-thumb]:shadow-graymedium\n [&::-webkit-slider-thumb]:outline\n [&::-webkit-slider-thumb]:inset-ring\n [&::-webkit-slider-thumb]:inset-ring-w-gray-200\n [&::-webkit-slider-thumb]:transition-all\n [&::-webkit-slider-thumb]:duration-150\n [&::-webkit-slider-thumb]:ease-in-out\n [&::-webkit-slider-thumb]:dark:bg-w-white\n ",b="pointer-events-none [&::-webkit-slider-thumb]:pointer-events-none [&::-moz-range-thumb]:pointer-events-none",d="absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",g=m=>{var{variant:g="single",size:h="sm",step:p=10,value:c={min:0,max:0},min:w=0,max:f=100,onChange:y,className:z,disabled:O}=m,k=l(m,["variant","size","step","value","min","max","onChange","className","disabled"]);const v="dual"===g,{min:x,max:j}=c,N=v?x:0,[P,S]=r({min:N,max:j}),[B,D]=r("end"),$=e=>f===w?0:(e-w)/(f-w)*100,E=(e,t)=>{const n="min"===t,r=n?"start":"end",a=Number(e.target.value),i=n?Math.min(a,P.max):Math.max(a,P.min);D(r);const m=o(s({},P),{[t]:i});S(m),null==y||y(m)},I=()=>"sm"===h?`${u}[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4`:`${u}[&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5`,M=Math.floor(Number(f)/Number(p))+1;return a((()=>{var e;S({min:v?null!==(e=c.min)&&void 0!==e?e:P.min:0,max:c.max})}),[c.min,c.max]),/*#__PURE__*/e(i,{className:n("relative px-1",z),"data-testid":"design-system-rangeSlider",children:[v&&/*#__PURE__*/t("input",s({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:w,max:f,step:p,value:P.min,onInput:e=>E(e,"min"),className:n(d,"pointer-events-none",I(),"start"===B&&"z-50",O&&b),disabled:O},k)),
|
|
2
|
+
/*#__PURE__*/t("input",s({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:w,max:f,value:P.max,onInput:e=>E(e,"max"),step:p,className:n(d,"pointer-events-auto",I(),v&&"pointer-events-none","end"===B&&"z-50",O&&b),disabled:O},k)),
|
|
3
|
+
/*#__PURE__*/e(i,{"data-testid":"design-system-rangeSlider--container",className:n("relative overflow-hidden","sm"===h&&"h-1 rounded-xs","md"===h&&"h-2 rounded"),children:["md"===h&&/*#__PURE__*/t(i,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:[...Array(M)].map(((e,n)=>/*#__PURE__*/t(i,{"data-testid":"design-system-rangeSlider--unit-dot",className:"bg-w-white size-1 rounded-full"},n)))}),
|
|
6
4
|
/*#__PURE__*/t(i,{className:"bg-w-gray-50 absolute top-0 left-0 z-0 h-full w-full","data-testid":"design-system-rangeSlider--rail"}),
|
|
7
|
-
/*#__PURE__*/t(i,{className:"bg-primary absolute top-0 left-0 z-10 h-full","data-testid":"design-system-rangeSlider--fill-track",style:{width:`${
|
|
8
|
-
/**
|
|
9
|
-
* 단일 또는 이중 슬라이더를 제공하는 범위 선택 컴포넌트입니다.
|
|
10
|
-
*
|
|
11
|
-
* @component
|
|
12
|
-
*
|
|
13
|
-
* @param {Object} props
|
|
14
|
-
* @param {('single'|'dual')} [props.variant='single'] - 슬라이더 유형 (단일 또는 이중)
|
|
15
|
-
* @param {('sm'|'md')} [props.size='sm'] - 슬라이더 크기
|
|
16
|
-
* @param {number} [props.step=10] - 슬라이더 단계 값
|
|
17
|
-
* @param {{min: number, max: number}} [props.value={min: 0, max: 0}] - 슬라이더의 현재 값 (0~100 사이)
|
|
18
|
-
* @param {number} [props.min=0] - 최소값
|
|
19
|
-
* @param {number} [props.max=100] - 최대값
|
|
20
|
-
* @param {(value: {min: number, max: number}) => void} [props.onChange] - 값 변경 시 호출되는 콜백 함수
|
|
21
|
-
* @param {string} [props.className] - 추가 CSS 클래스
|
|
22
|
-
*
|
|
23
|
-
* @example
|
|
24
|
-
* // 단일 슬라이더
|
|
25
|
-
* <RangeSlider
|
|
26
|
-
* variant="single"
|
|
27
|
-
* min={0}
|
|
28
|
-
* max={100}
|
|
29
|
-
* step={10}
|
|
30
|
-
* value={{ min: 0, max: 50 }}
|
|
31
|
-
* onChange={(value) => console.log(value)}
|
|
32
|
-
* />
|
|
33
|
-
*
|
|
34
|
-
* // 이중 슬라이더
|
|
35
|
-
* <RangeSlider
|
|
36
|
-
* variant="dual"
|
|
37
|
-
* min={0}
|
|
38
|
-
* max={100}
|
|
39
|
-
* step={10}
|
|
40
|
-
* value={{ min: 30, max: 70 }}
|
|
41
|
-
* onChange={(value) => console.log(value)}
|
|
42
|
-
* />
|
|
43
|
-
*/export{b as RangeSlider};
|
|
5
|
+
/*#__PURE__*/t(i,{className:n("bg-primary absolute top-0 left-0 z-10 h-full",O&&"bg-w-gray-300"),"data-testid":"design-system-rangeSlider--fill-track",style:{width:`${v?$(P.max)-$(P.min):$(P.max)}%`,left:v?`${$(P.min)}%`:0}})]})]})};export{g as RangeSlider};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const t=({size:t="md",overflow:r="auto",children:s})=>/*#__PURE__*/e(l,{"data-testid":"design-system--modal-container",className:o("bg-w-white shadow-modal h-fit rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";const t=({size:t="md",overflow:r="auto",children:s})=>/*#__PURE__*/e(l,{"data-testid":"design-system--modal-container",className:o("bg-w-white shadow-modal h-fit max-w-[calc(100vw-40px)] rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
|
|
2
2
|
"flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[t],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[r]),children:s});export{t as ModalContainer};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),o=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../Inputs/Button/Button.js");exports.DialogBox=({title:l,description:t,variant:i="primary",onClose:n,onConfirm:c,confirm:u,close:d="닫기",testId:
|
|
2
|
-
return e.jsxs(o.Box,{className:"bg-w-white shadow-modal tablet:w-[400px] flex h-fit flex-col items-center gap-8 rounded-3xl p-8 font-normal not-italic","data-testid":
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),o=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../../Inputs/Button/Button.js");exports.DialogBox=({title:l,description:t,variant:i="primary",onClose:n,onConfirm:c,confirm:u,close:d="닫기",testId:x})=>{const g="caution"===i;/*#__PURE__*/
|
|
2
|
+
return e.jsxs(o.Box,{className:"bg-w-white shadow-modal tablet:w-[400px] flex h-fit max-w-[calc(100vw-40px)] flex-col items-center gap-8 rounded-3xl p-8 font-normal not-italic","data-testid":x||"design-system--dialog-box",children:[
|
|
3
3
|
/*#__PURE__*/e.jsxs(o.Box,{className:"flex w-full flex-col gap-6",children:[
|
|
4
4
|
/*#__PURE__*/e.jsx(a.Typography,{variant:"subTitle18",className:"text-w-gray-900 font-medium",children:l}),
|
|
5
5
|
/*#__PURE__*/e.jsx(a.Typography,{variant:"body16",className:"text-w-gray-800 whitespace-break-spaces",children:t})]}),
|
|
6
|
-
/*#__PURE__*/e.jsxs(o.Box,{className:"flex w-full items-center justify-end gap-4",children:[d&&/*#__PURE__*/e.jsx(s.Button,{role:"close",onClick:n,variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-300 hover:bg-w-bluegray-300",children:d}),u&&/*#__PURE__*/e.jsx(s.Button,{role:"confirm",onClick:c,variant:"solid",className:r.twJoin(
|
|
6
|
+
/*#__PURE__*/e.jsxs(o.Box,{className:"flex w-full items-center justify-end gap-4",children:[d&&/*#__PURE__*/e.jsx(s.Button,{role:"close",onClick:n,variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-300 hover:bg-w-bluegray-300",children:d}),u&&/*#__PURE__*/e.jsx(s.Button,{role:"confirm",onClick:c,variant:"solid",className:r.twJoin(g&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-600 hover:bg-w-orange-600"),children:u})]})]})};
|
|
@@ -1,43 +1,5 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),n=require("react"),r=require("../../Base/Layouts/Box/Box.js");function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){a(e,t,n[t])}))}return e}function s(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
*
|
|
5
|
-
* @component
|
|
6
|
-
*
|
|
7
|
-
* @param {Object} props
|
|
8
|
-
* @param {('single'|'dual')} [props.variant='single'] - 슬라이더 유형 (단일 또는 이중)
|
|
9
|
-
* @param {('sm'|'md')} [props.size='sm'] - 슬라이더 크기
|
|
10
|
-
* @param {number} [props.step=10] - 슬라이더 단계 값
|
|
11
|
-
* @param {{min: number, max: number}} [props.value={min: 0, max: 0}] - 슬라이더의 현재 값 (0~100 사이)
|
|
12
|
-
* @param {number} [props.min=0] - 최소값
|
|
13
|
-
* @param {number} [props.max=100] - 최대값
|
|
14
|
-
* @param {(value: {min: number, max: number}) => void} [props.onChange] - 값 변경 시 호출되는 콜백 함수
|
|
15
|
-
* @param {string} [props.className] - 추가 CSS 클래스
|
|
16
|
-
*
|
|
17
|
-
* @example
|
|
18
|
-
* // 단일 슬라이더
|
|
19
|
-
* <RangeSlider
|
|
20
|
-
* variant="single"
|
|
21
|
-
* min={0}
|
|
22
|
-
* max={100}
|
|
23
|
-
* step={10}
|
|
24
|
-
* value={{ min: 0, max: 50 }}
|
|
25
|
-
* onChange={(value) => console.log(value)}
|
|
26
|
-
* />
|
|
27
|
-
*
|
|
28
|
-
* // 이중 슬라이더
|
|
29
|
-
* <RangeSlider
|
|
30
|
-
* variant="dual"
|
|
31
|
-
* min={0}
|
|
32
|
-
* max={100}
|
|
33
|
-
* step={10}
|
|
34
|
-
* value={{ min: 30, max: 70 }}
|
|
35
|
-
* onChange={(value) => console.log(value)}
|
|
36
|
-
* />
|
|
37
|
-
*/exports.RangeSlider=a=>{var{variant:l="single",size:o="sm",step:b=10,value:d={min:0,max:0},min:g=0,max:h=100,onChange:c,className:p}=a,w=u(a,["variant","size","step","value","min","max","onChange","className"]);const f="dual"===l,{min:y,max:x}=d,z=f?y:0,[j,O]=n.useState({min:z,max:x}),[k,v]=n.useState("end"),S=e=>h===g?0:(e-g)/(h-g)*100,N=(e,t)=>{const n="min"===t,r=n?"start":"end",a=Number(e.target.value),u=n?Math.min(a,j.max-b):Math.max(a,j.min+b);v(r),O((e=>s(i({},e),{[t]:u}))),null==c||c(s(i({},j),{[t]:u}))},P=()=>"sm"===o?`${m}[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4`:`${m}[&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5`,B=Math.floor(Number(h)/Number(b))+1;return n.useEffect((()=>{O(s(i({},j),{max:d.max}));
|
|
38
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
-
}),[d.max]),/*#__PURE__*/e.jsxs(r.Box,{className:t.twMerge("relative px-1",p),"data-testid":"design-system-rangeSlider",children:[f&&/*#__PURE__*/e.jsx("input",i({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:g,max:h,step:b,value:j.min,onInput:e=>N(e,"min"),className:t.twMerge("pointer-events-none absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",P(),"start"===k&&"z-50")},w)),
|
|
40
|
-
/*#__PURE__*/e.jsx("input",i({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:g,max:h,value:j.max,onInput:e=>N(e,"max"),step:b,className:t.twMerge("pointer-events-auto absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",P(),f&&"pointer-events-none","end"===k&&"z-50")},w)),
|
|
41
|
-
/*#__PURE__*/e.jsxs(r.Box,{"data-testid":"design-system-rangeSlider--container",className:t.twMerge("relative overflow-hidden","sm"===o&&"h-1 rounded-xs","md"===o&&"h-2 rounded"),children:["md"===o&&/*#__PURE__*/e.jsx(r.Box,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:[...Array(B)].map(((t,n)=>/*#__PURE__*/e.jsx(r.Box,{"data-testid":"design-system-rangeSlider--unit-dot",className:"bg-w-white size-1 rounded-full"},n)))}),
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),n=require("react"),r=require("../../Base/Layouts/Box/Box.js");function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){a(e,t,n[t])}))}return e}function s(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function m(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}require("../../Base/Layouts/FullBleed/FullBleed.js");const u="\n [&::-moz-range-thumb]:pointer-events-auto\n [&::-moz-range-thumb]:mr-2\n [&::-moz-range-thumb]:-translate-x-1/4\n [&::-moz-range-thumb]:transform\n [&::-moz-range-thumb]:appearance-none\n [&::-moz-range-thumb]:rounded-full\n [&::-moz-range-thumb]:border\n [&::-moz-range-thumb]:border-w-gray-200\n [&::-moz-range-thumb]:bg-transparent\n [&::-moz-range-thumb]:bg-white\n [&::-moz-range-thumb]:shadow-graymedium\n [&::-moz-range-thumb]:outline\n [&::-moz-range-thumb]:inset-ring\n [&::-moz-range-thumb]:inset-ring-w-gray-200\n [&::-moz-range-thumb]:transition-all\n [&::-moz-range-thumb]:duration-150\n [&::-moz-range-thumb]:ease-in-out\n [&::-moz-range-thumb]:dark:bg-w-white\n\n [&::-webkit-slider-thumb]:pointer-events-auto\n [&::-webkit-slider-thumb]:mr-2\n [&::-webkit-slider-thumb]:-translate-x-1/4\n [&::-webkit-slider-thumb]:transform\n [&::-webkit-slider-thumb]:appearance-none\n [&::-webkit-slider-thumb]:rounded-full\n [&::-webkit-slider-thumb]:border\n [&::-webkit-slider-thumb]:border-w-gray-200\n [&::-webkit-slider-thumb]:bg-transparent\n [&::-webkit-slider-thumb]:bg-white\n [&::-webkit-slider-thumb]:shadow-graymedium\n [&::-webkit-slider-thumb]:outline\n [&::-webkit-slider-thumb]:inset-ring\n [&::-webkit-slider-thumb]:inset-ring-w-gray-200\n [&::-webkit-slider-thumb]:transition-all\n [&::-webkit-slider-thumb]:duration-150\n [&::-webkit-slider-thumb]:ease-in-out\n [&::-webkit-slider-thumb]:dark:bg-w-white\n ",o="pointer-events-none [&::-webkit-slider-thumb]:pointer-events-none [&::-moz-range-thumb]:pointer-events-none",l="absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent";exports.RangeSlider=a=>{var{variant:b="single",size:d="sm",step:g=10,value:h={min:0,max:0},min:c=0,max:w=100,onChange:p,className:f,disabled:y}=a,x=m(a,["variant","size","step","value","min","max","onChange","className","disabled"]);const z="dual"===b,{min:j,max:v}=h,O=z?j:0,[k,S]=n.useState({min:O,max:v}),[N,P]=n.useState("end"),B=e=>w===c?0:(e-c)/(w-c)*100,M=(e,t)=>{const n="min"===t,r=n?"start":"end",a=Number(e.target.value),m=n?Math.min(a,k.max):Math.max(a,k.min);P(r);const u=s(i({},k),{[t]:m});S(u),null==p||p(u)},q=()=>"sm"===d?`${u}[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4`:`${u}[&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5`,D=Math.floor(Number(w)/Number(g))+1;return n.useEffect((()=>{var e;S({min:z?null!==(e=h.min)&&void 0!==e?e:k.min:0,max:h.max})}),[h.min,h.max]),/*#__PURE__*/e.jsxs(r.Box,{className:t.twMerge("relative px-1",f),"data-testid":"design-system-rangeSlider",children:[z&&/*#__PURE__*/e.jsx("input",i({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:c,max:w,step:g,value:k.min,onInput:e=>M(e,"min"),className:t.twMerge(l,"pointer-events-none",q(),"start"===N&&"z-50",y&&o),disabled:y},x)),
|
|
2
|
+
/*#__PURE__*/e.jsx("input",i({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:c,max:w,value:k.max,onInput:e=>M(e,"max"),step:g,className:t.twMerge(l,"pointer-events-auto",q(),z&&"pointer-events-none","end"===N&&"z-50",y&&o),disabled:y},x)),
|
|
3
|
+
/*#__PURE__*/e.jsxs(r.Box,{"data-testid":"design-system-rangeSlider--container",className:t.twMerge("relative overflow-hidden","sm"===d&&"h-1 rounded-xs","md"===d&&"h-2 rounded"),children:["md"===d&&/*#__PURE__*/e.jsx(r.Box,{className:"absolute z-20 flex h-2 w-full items-center justify-between bg-transparent p-0.5",children:[...Array(D)].map(((t,n)=>/*#__PURE__*/e.jsx(r.Box,{"data-testid":"design-system-rangeSlider--unit-dot",className:"bg-w-white size-1 rounded-full"},n)))}),
|
|
42
4
|
/*#__PURE__*/e.jsx(r.Box,{className:"bg-w-gray-50 absolute top-0 left-0 z-0 h-full w-full","data-testid":"design-system-rangeSlider--rail"}),
|
|
43
|
-
/*#__PURE__*/e.jsx(r.Box,{className:"bg-primary absolute top-0 left-0 z-10 h-full","data-testid":"design-system-rangeSlider--fill-track",style:{width:`${
|
|
5
|
+
/*#__PURE__*/e.jsx(r.Box,{className:t.twMerge("bg-primary absolute top-0 left-0 z-10 h-full",y&&"bg-w-gray-300"),"data-testid":"design-system-rangeSlider--fill-track",style:{width:`${z?B(k.max)-B(k.min):B(k.max)}%`,left:z?`${B(k.min)}%`:0}})]})]})};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),l=require("tailwind-merge"),o=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.ModalContainer=({size:r="md",overflow:s="auto",children:i})=>/*#__PURE__*/e.jsx(o.Box,{"data-testid":"design-system--modal-container",className:l.twJoin("bg-w-white shadow-modal h-fit rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),l=require("tailwind-merge"),o=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.ModalContainer=({size:r="md",overflow:s="auto",children:i})=>/*#__PURE__*/e.jsx(o.Box,{"data-testid":"design-system--modal-container",className:l.twJoin("bg-w-white shadow-modal h-fit max-w-[calc(100vw-40px)] rounded-3xl",// 아직 정해지지 않은 내부 레이아웃
|
|
2
2
|
"flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[r],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[s]),children:i});
|