@wishket/design-system 2.1.1 → 2.1.3

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.
@@ -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 u(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 l="\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=m=>{var{variant:b="single",size:d="sm",step:g=10,value:h={min:0,max:0},min:p=0,max:c=100,onChange:w,className:f}=m,y=u(m,["variant","size","step","value","min","max","onChange","className"]);const z="dual"===b,{min:O,max:x}=h,k=z?O:0,[v,j]=r({min:k,max:x}),[N,P]=r("end"),S=e=>c===p?0:(e-p)/(c-p)*100,B=(e,t)=>{const n="min"===t,r=n?"start":"end",a=Number(e.target.value),i=n?Math.min(a,v.max-g):Math.max(a,v.min+g);P(r),j((e=>o(s({},e),{[t]:i}))),null==w||w(o(s({},v),{[t]:i}))},D=()=>"sm"===d?`${l}[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4`:`${l}[&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5`,$=Math.floor(Number(c)/Number(g))+1;return a((()=>{j(o(s({},v),{max:h.max}));
2
- // eslint-disable-next-line react-hooks/exhaustive-deps
3
- }),[h.max]),/*#__PURE__*/e(i,{className:n("relative px-1",f),"data-testid":"design-system-rangeSlider",children:[z&&/*#__PURE__*/t("input",s({"data-testid":"design-system-rangeSlider--start-thumb-input",type:"range",min:p,max:c,step:g,value:v.min,onInput:e=>B(e,"min"),className:n("pointer-events-none absolute z-30 h-full w-full cursor-grab appearance-none rounded-full bg-transparent text-transparent",D(),"start"===N&&"z-50")},y)),
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:`${z?S(v.max)-S(v.min):S(v.max)}%`,left:z?`${S(v.min)}%`:0}})]})]})};
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};
@@ -62,5 +62,5 @@ interface TextLinkProps extends ComponentProps<typeof Link>, TextWithIconsProps
62
62
  * }}
63
63
  * />
64
64
  */
65
- declare const TextLink: ({ href, text, leadingIcon, trailingIcon, isTextSmall, isGray, isUnderline, ...rest }: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
65
+ declare const TextLink: ({ href, text, leadingIcon, trailingIcon, isTextSmall, isGray, isUnderline, className, ...rest }: TextLinkProps) => import("react/jsx-runtime").JSX.Element;
66
66
  export { TextLink };
@@ -57,5 +57,5 @@ import{jsx as e}from"react/jsx-runtime";import t from"next/link";import{twMerge
57
57
  * console.log('대시보드로 이동');
58
58
  * }}
59
59
  * />
60
- */(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const l=l=>{var{href:a,text:f,leadingIcon:s,trailingIcon:p,isTextSmall:u=!1,isGray:O=!1,isUnderline:b=!1}=l,y=c(l,["href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline"]);/*#__PURE__*/
61
- return e(t,o(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({href:a,className:r("flex min-h-6 w-fit items-center justify-center",u?"gap-x-0.5":"gap-x-1")},y),{children:/*#__PURE__*/e(n,{text:f,leadingIcon:s,trailingIcon:p,isTextSmall:u,isUnderline:b,isGray:O})}))};export{l as TextLink};
60
+ */(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}const l=l=>{var{href:a,text:s,leadingIcon:f,trailingIcon:p,isTextSmall:u=!1,isGray:O=!1,isUnderline:b=!1,className:y}=l,m=c(l,["href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);/*#__PURE__*/
61
+ return e(t,o(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({href:a,className:r("flex min-h-6 w-fit items-center justify-center",u?"gap-x-0.5":"gap-x-1",y)},m),{children:/*#__PURE__*/e(n,{text:s,leadingIcon:f,trailingIcon:p,isTextSmall:u,isUnderline:b,isGray:O})}))};export{l as TextLink};
@@ -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 u(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 m="\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 ";
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:`${f?S(j.max)-S(j.min):S(j.max)}%`,left:f?`${S(j.min)}%`:0}})]})]})};
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,4 +1,4 @@
1
- "use strict";var e=require("react/jsx-runtime"),t=require("next/link"),r=require("tailwind-merge"),n=require("../../Base/TextWithIcons/TextWithIcons.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function c(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}
1
+ "use strict";var e=require("react/jsx-runtime"),t=require("next/link"),r=require("tailwind-merge"),n=require("../../Base/TextWithIcons/TextWithIcons.js");function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(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 r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function o(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},c=Object.keys(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}
2
2
  /**
3
3
  * 텍스트 기반의 링크 컴포넌트입니다.
4
4
  *
@@ -57,5 +57,5 @@
57
57
  * console.log('대시보드로 이동');
58
58
  * }}
59
59
  * />
60
- */(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}exports.TextLink=l=>{var{href:s,text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O=!1,isGray:b=!1,isUnderline:y=!1}=l,p=c(l,["href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline"]);/*#__PURE__*/
61
- return e.jsx(t,o(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({href:s,className:r.twMerge("flex min-h-6 w-fit items-center justify-center",O?"gap-x-0.5":"gap-x-1")},p),{children:/*#__PURE__*/e.jsx(n.TextWithIcons,{text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O,isUnderline:y,isGray:b})}))};
60
+ */(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)r=c[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}exports.TextLink=l=>{var{href:s,text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O=!1,isGray:b=!1,isUnderline:y=!1,className:p}=l,g=o(l,["href","text","leadingIcon","trailingIcon","isTextSmall","isGray","isUnderline","className"]);/*#__PURE__*/
61
+ return e.jsx(t,c(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){i(e,t,r[t])}))}return e}({href:s,className:r.twMerge("flex min-h-6 w-fit items-center justify-center",O?"gap-x-0.5":"gap-x-1",p)},g),{children:/*#__PURE__*/e.jsx(n.TextWithIcons,{text:a,leadingIcon:u,trailingIcon:f,isTextSmall:O,isUnderline:y,isGray:b})}))};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wishket/design-system",
3
- "version": "2.1.1",
3
+ "version": "2.1.3",
4
4
  "type": "module",
5
5
  "description": "Wishket Design System",
6
6
  "main": "dist/index.js",