@wishket/design-system 3.4.2 → 3.5.0

package/dist/Components/Inputs/InputChip/InputChip.js

@@ -1,12 +1,14 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as a}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as s}from"../../Base/Typography/Typography.js";import{Box as r}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as o}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Typography as o}from"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as a}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){s(e,t,r[t])}))}return 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}
 /**
  * 삭제 가능한 칩(chip) 형태의 입력 컴포넌트입니다.
  *
  * @component
  * @param {Object} props
  * @param {React.ReactNode} props.children - 칩 내부에 표시될 콘텐츠
- * @param {() => void} [props.onDelete] - 삭제 버튼 클릭 시 실행될 콜백 함수
+ * @param {() => void} [props.onDelete] - 삭제 버튼 클릭 시 실행될 콜백 함수. 삭제 버튼은 `<button type="button">`으로 렌더되어 클릭뿐 아니라 키보드(Tab 포커스 + Enter/Space)로도 동작합니다.
  * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {string} [props.deleteLabel] - 삭제 버튼의 접근 가능한 이름. 미지정 시 `children`이 문자열이면 `"{children} 삭제"`, 아니면 `"삭제"`
+ * @param {Object} [props.deleteButtonProps] - 삭제 버튼에 직접 전달할 `id` / `tabIndex` / `onFocus`. 칩 묶음의 roving tabindex 구현용이며 단독 사용 시에는 불필요합니다.
  *
  * @example
  * ```tsx
@@ -23,5 +25,12 @@
  *   커스텀 스타일 태그
  * </InputChip>
  * ```
- */const i=({children:i,onDelete:l,className:p})=>/*#__PURE__*/e(r,{"data-testid":"design-system-input-chip--container",className:a("bg-w-gray-100 flex h-6 w-fit max-w-[100px] items-center gap-0.5 rounded-lg px-2 py-px select-none",!!l&&"pr-1.5 pl-2",p),children:[
-/*#__PURE__*/t(s,{variant:"body14",className:"text-w-gray-600 h-6 w-full overflow-hidden break-all text-ellipsis whitespace-nowrap",children:i}),!!l&&/*#__PURE__*/t(r,{onClick:l,"data-testid":"design-system-input-chip--delete",children:/*#__PURE__*/t(o,{name:"small_delete",className:"text-w-gray-400 cursor-pointer"})})]});export{i as InputChip};
+ */const l=({children:s,onDelete:l,className:p,deleteLabel:y,deleteButtonProps:m})=>{
+// 아이콘만 있는 버튼이라 접근 가능한 이름을 명시해야 한다. children이
+// ReactNode라 항상 텍스트는 아니므로, 문자열/숫자일 때만 칩 텍스트를 이름에
+// 넣고 그 외(엘리먼트, 배열 등)에는 일반 라벨로 폴백한다. 임의 ReactNode에서
+// 텍스트를 추출할 일반적인 방법은 없으므로, 그런 경우 소비자가 deleteLabel로
+// 직접 지정한다.
+const u="string"==typeof s||"number"==typeof s?String(s):void 0,b=null!=y?y:u?`${u} 삭제`:"삭제";/*#__PURE__*/
+return e(n,{"data-testid":"design-system-input-chip--container",className:r("bg-w-gray-100 flex h-6 w-fit max-w-[100px] items-center gap-0.5 rounded-lg px-2 py-px select-none",!!l&&"pr-1.5 pl-2",p),children:[
+/*#__PURE__*/t(o,{variant:"body14",className:"text-w-gray-600 h-6 w-full overflow-hidden break-all text-ellipsis whitespace-nowrap",children:s}),!!l&&/*#__PURE__*/t("button",c(i({},m),{type:"button",onClick:l,"aria-label":b,"data-testid":"design-system-input-chip--delete",className:"flex cursor-pointer items-center",children:/*#__PURE__*/t(a,{name:"small_delete",className:"text-w-gray-400"})}))]})};export{l as InputChip};

package/dist/Components/Inputs/Radio/Radio.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{forwardRef as o}from"react";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";function a(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function n(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),o.forEach((function(e){a(r,e,t[e])}))}return r}function l(r,e){if(null==r)return{};var t,o,i=function(r,e){if(null==r)return{};var t,o,i={},a=Object.keys(r);for(o=0;o<a.length;o++)t=a[o],e.indexOf(t)>=0||(i[t]=r[t]);return i}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(o=0;o<a.length;o++)t=a[o],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(i[t]=r[t])}return i}const s=({disabled:r,checked:o,isError:i})=>/*#__PURE__*/e("div",{className:t("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",!r&&!i&&"group-focus-within:border-primary-500",
+"use client";import{jsxs as r,jsx as e}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{forwardRef as o}from"react";import"../../Base/Typography/Typography.js";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";function a(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function n(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),o.forEach((function(e){a(r,e,t[e])}))}return r}function s(r,e){if(null==r)return{};var t,o,i=function(r,e){if(null==r)return{};var t,o,i={},a=Object.keys(r);for(o=0;o<a.length;o++)t=a[o],e.indexOf(t)>=0||(i[t]=r[t]);return i}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(o=0;o<a.length;o++)t=a[o],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(i[t]=r[t])}return i}const l=({disabled:r,checked:o,isError:i})=>/*#__PURE__*/e("div",{className:t("relative box-border flex h-[18px] w-[18px] items-center justify-center rounded-full border p-[4px]",!r&&!i&&"group-focus-within:border-primary-500",
 // 체크되었고 비활성화 상태의 경우
 o&&r?"bg-w-white border-primary-100 cursor-not-allowed":
 // 비활성화 상태의 경우
@@ -8,10 +8,10 @@ o&&!i?"bg-w-white border-primary-500":
 // 활성화 상태에서 체크되었고 오류가 있는 경우
 o&&i?"bg-w-white border-w-red-500":
 // 활성화 상태에서 체크되지 않았고 오류가 있는 경우
-!o&&i?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer"),role:"radio-button",children:/*#__PURE__*/e("div",{className:t("bg-primary size-2 rounded-full transition-all duration-100 ease-in-out",!o&&"h-0 w-0",i&&"bg-w-red-500",r&&"bg-w-gray-200",o&&r&&"bg-primary-100")})}),c=/*#__PURE__*/o(((o,a)=>{var{value:c="",checked:d=!1,disabled:u=!1,isError:b=!1,className:p}=o,m=l(o,["value","checked","disabled","isError","className"]);/*#__PURE__*/
+!o&&i?"border-w-red-500":"bg-white border-w-gray-200 group-hover:border-primary-500 cursor-pointer"),"data-testid":"design-system-radio-button",children:/*#__PURE__*/e("div",{className:t("bg-primary size-2 rounded-full transition-all duration-100 ease-in-out",!o&&"h-0 w-0",i&&"bg-w-red-500",r&&"bg-w-gray-200",o&&r&&"bg-primary-100")})}),d=/*#__PURE__*/o(((o,a)=>{var{value:d="",checked:c=!1,disabled:u=!1,isError:b=!1,className:p}=o,y=s(o,["value","checked","disabled","isError","className"]);/*#__PURE__*/
 return r(i,{"data-testid":"design-system-radio",className:t("group relative cursor-pointer",p),children:[
-/*#__PURE__*/e("input",n({ref:a,type:"radio",className:"absolute inset-0 z-10 cursor-pointer opacity-0",value:c,checked:d,disabled:u},m)),
-/*#__PURE__*/e(s,{checked:d,isError:b,disabled:u})]})}));
+/*#__PURE__*/e("input",n({ref:a,type:"radio",className:"absolute inset-0 z-10 cursor-pointer opacity-0",value:d,checked:c,disabled:u},y)),
+/*#__PURE__*/e(l,{checked:c,isError:b,disabled:u})]})}));
 /**
  * 사용자가 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
  *
@@ -44,4 +44,4 @@ return r(i,{"data-testid":"design-system-radio",className:t("group relative curs
  *     <Radio value="option5" checked={field.value === 'option5'} onChange={field.onChange} />
  *   )}
  * />
- */c.displayName="Radio";export{c as Radio};
+ */d.displayName="Radio";export{d as Radio};

package/dist/Components/Inputs/RadioCard/RadioCard.js

@@ -1,8 +1,8 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{RadioCardContainer as i,StyledRadio as d,RadioCardIcon as s,TitleContainer as o}from"./RadioCard.parts.js";import{useRadioCard as n}from"./useRadioCard.js";const l=l=>{const{disabled:c=!1,checked:m=!1,isError:p=!1,onChange:h,isWide:g=!1,className:y,iconName:u,title:x,description:C,testId:f,value:b,name:B}=l,N=null!=u?u:g?null:"receipt",{handleChange:j}=n({checked:m,disabled:c,onChange:h});/*#__PURE__*/
-return e("label",{"data-testid":f,role:"radio-card",className:"group",children:/*#__PURE__*/t(i,{"data-testid":"design-system-radioCard--container",checked:m,isError:p,isWide:g,disabled:c,className:y,children:[
-/*#__PURE__*/e(d,{name:B,value:b,isWide:g,checked:m,onChange:j,isError:p,disabled:c}),N&&/*#__PURE__*/e(s,{iconName:N,checked:m,isError:p,disabled:c}),
-/*#__PURE__*/t(o,{isWide:g,"data-testid":"design-system-radioCard--titleBox",children:[
-/*#__PURE__*/e(r,{"data-testid":"design-system-radioCard--title",variant:"body16",className:a("font-medium",g?"text-left":"text-center",c?"text-w-gray-300":"text-w-gray-900"),children:x}),C&&/*#__PURE__*/e(r,{variant:"body14",className:a("font-normal",g?"text-left":"text-center",c?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-radioCard--description",children:C})]})]})})};
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import"react";import{twMerge as a}from"tailwind-merge";import{Typography as r}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{RadioCardContainer as i,StyledRadio as d,RadioCardIcon as s,TitleContainer as o}from"./RadioCard.parts.js";import{useRadioCard as n}from"./useRadioCard.js";const l=l=>{const{disabled:c=!1,checked:m=!1,isError:p=!1,onChange:g,isWide:h=!1,className:y,iconName:u,title:x,description:C,testId:f,value:b,name:B}=l,N=null!=u?u:h?null:"receipt",{handleChange:j}=n({checked:m,disabled:c,onChange:g});/*#__PURE__*/
+return e("label",{"data-testid":f||"design-system-radioCard",className:"group",children:/*#__PURE__*/t(i,{"data-testid":"design-system-radioCard--container",checked:m,isError:p,isWide:h,disabled:c,className:y,children:[
+/*#__PURE__*/e(d,{name:B,value:b,isWide:h,checked:m,onChange:j,isError:p,disabled:c}),N&&/*#__PURE__*/e(s,{iconName:N,checked:m,isError:p,disabled:c}),
+/*#__PURE__*/t(o,{isWide:h,"data-testid":"design-system-radioCard--titleBox",children:[
+/*#__PURE__*/e(r,{"data-testid":"design-system-radioCard--title",variant:"body16",className:a("font-medium",h?"text-left":"text-center",c?"text-w-gray-300":"text-w-gray-900"),children:x}),C&&/*#__PURE__*/e(r,{variant:"body14",className:a("font-normal",h?"text-left":"text-center",c?"text-w-gray-300":"text-w-gray-600"),"data-testid":"design-system-radioCard--description",children:C})]})]})})};
 /**
  * 라디오 카드 컴포넌트
  *

package/dist/Components/Inputs/RadioCard/RadioCard.parts.js

@@ -1,4 +1,4 @@
-import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"react";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as o}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Radio as i}from"../Radio/Radio.js";function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function a(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const l=t=>{var{children:o,isWide:i,checked:n,isError:l,disabled:d,className:p}=t,u=a(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
-return e("div",c(s({className:r("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 py-6",!d&&!l&&"group-focus-within:border-primary-500",d&&n&&!l?"cursor-not-allowed border-primary-100":d?"cursor-not-allowed border-w-gray-200":l?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary",d?n&&!l?"bg-primary-10":"bg-w-gray-10":n?l?"bg-w-red-10":"bg-primary-10":"bg-w-white",p)},u),{children:o}))},d=({isWide:r,children:o})=>/*#__PURE__*/e("div",{className:t("flex h-auto w-full flex-col justify-between gap-0.5",r?"items-start":"items-center"),children:o}),p=t=>{var{isWide:o,disabled:n,isError:c,checked:l}=t,d=a(t,["isWide","disabled","isError","checked"]);const p=c&&l&&n;/*#__PURE__*/
-return e(i,s({className:r(!o&&"absolute top-[17px] left-[17px]"),disabled:n||p,checked:!p&&l,isError:c},d))},u=({iconName:t,disabled:i,checked:n,isError:s})=>{const c=s||!n;/*#__PURE__*/
-return e("div",{className:r("flex size-[60px] shrink-0 items-center justify-center",i&&"opacity-30"),"data-testid":"design-system-radioCard--icon",children:/*#__PURE__*/e(o,{name:t,disabled:c})})};export{l as RadioCardContainer,u as RadioCardIcon,p as StyledRadio,d as TitleContainer};
+import{jsx as r}from"react/jsx-runtime";import{twMerge as e,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as o}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Radio as i}from"../Radio/Radio.js";function n(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function s(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),o.forEach((function(e){n(r,e,t[e])}))}return r}function a(r,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(e)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(e)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(e,t))})),r}function c(r,e){if(null==r)return{};var t,o,i=function(r,e){if(null==r)return{};var t,o,i={},n=Object.keys(r);for(o=0;o<n.length;o++)t=n[o],e.indexOf(t)>=0||(i[t]=r[t]);return i}(r,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(r);for(o=0;o<n.length;o++)t=n[o],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(i[t]=r[t])}return i}const l=t=>{var{children:o,isWide:i,checked:n,isError:l,disabled:p,className:d}=t,u=c(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
+return r("div",a(s({className:e("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 py-6",!p&&!l&&"group-focus-within:border-primary-500",p&&n&&!l?"cursor-not-allowed border-primary-100":p?"cursor-not-allowed border-w-gray-200":l?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary",p?n&&!l?"bg-primary-10":"bg-w-gray-10":n?l?"bg-w-red-10":"bg-primary-10":"bg-w-white",d)},u),{children:o}))},p=({isWide:e,children:o})=>/*#__PURE__*/r("div",{className:t("flex h-auto w-full flex-col justify-between gap-0.5",e?"items-start":"items-center"),children:o}),d=t=>{var{isWide:o,disabled:n,isError:a,checked:l}=t,p=c(t,["isWide","disabled","isError","checked"]);const d=a&&l&&n;/*#__PURE__*/
+return r(i,s({className:e(!o&&"absolute top-[17px] left-[17px]"),disabled:n||d,checked:!d&&l,isError:a},p))},u=({iconName:t,disabled:i,checked:n,isError:s})=>{const a=s||!n;/*#__PURE__*/
+return r("div",{className:e("flex size-[60px] shrink-0 items-center justify-center",i&&"opacity-30"),"data-testid":"design-system-radioCard--icon",children:/*#__PURE__*/r(o,{name:t,disabled:a})})};export{l as RadioCardContainer,u as RadioCardIcon,d as StyledRadio,p as TitleContainer};

package/dist/Components/Inputs/RangeSlider/RangeSlider.js

@@ -1,5 +1,5 @@
-"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)),
-/*#__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)),
+"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"../../Base/Typography/Typography.js";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:y=100,onChange:f,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=>y===w?0:(e-w)/(y-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==f||f(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(y)/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:y,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)),
+/*#__PURE__*/t("input",s({"data-testid":"design-system-rangeSlider--end-thumb-input",type:"range",min:w,max:y,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)),
 /*#__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)))}),
 /*#__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"}),
 /*#__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};

package/dist/Components/Inputs/SearchField/SearchField.js

@@ -1,4 +1,4 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n}from"tailwind-merge";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextButtonDropdown as i}from"../TextButtonDropdown/TextButtonDropdown.js";import{TextFieldContainer as l}from"../TextFieldContainer/TextFieldContainer.js";import{Input as a}from"../Input/Input.js";import"../Input/PasswordInput.js";import"../Input/LabelInput.js";import"../Input/InputTypeSelector.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(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){c(e,t,r[t])}))}return e}function m(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},s=Object.keys(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as o}from"tailwind-merge";import"../../Base/Typography/Typography.js";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextButtonDropdown as i}from"../TextButtonDropdown/TextButtonDropdown.js";import{TextFieldContainer as a}from"../TextFieldContainer/TextFieldContainer.js";import{Input as l}from"../Input/Input.js";import"../Input/PasswordInput.js";import"../Input/LabelInput.js";import"../Input/InputTypeSelector.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){c(e,t,r[t])}))}return e}function p(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},s=Object.keys(e);for(o=0;o<s.length;o++)r=s[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}
 /**
  * 검색 필드 컴포넌트
  *
@@ -34,7 +34,7 @@
  *     ]
  *   }}
  * />
- */(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)r=s[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const p=c=>{var{type:p,onSearch:d,className:f,disabled:b,spellCheck:y,onFocus:j,onBlur:h,filters:O}=c,g=m(c,["type","onSearch","className","disabled","spellCheck","onFocus","onBlur","filters"]);const[I,v]=r(!1);/*#__PURE__*/
-return e("form",{onSubmit:e=>{e.preventDefault(),d()},"data-testid":"design-system-search-field",children:/*#__PURE__*/e("label",{className:"cursor-text",children:/*#__PURE__*/t(l,{isFocused:I,isDisabled:b,className:"overflow-visible",children:[!!O&&/*#__PURE__*/e(o,{className:"shrink-0",children:/*#__PURE__*/e(i,u({disabled:b},O))}),
-/*#__PURE__*/e(a,u({onFocus:e=>{v(!0),null==j||j(e)},onBlur:e=>{v(!1),null==h||h(e)},spellCheck:y||!1,disabled:b},g)),
-/*#__PURE__*/e("button",{type:"submit",className:"shrink-0","data-testid":"design-system-search-field--submit-button",disabled:b,children:/*#__PURE__*/e(s,{testId:"design-system-search-field--submit-button-icon",name:"medium_search",className:n("text-w-gray-600 pointer-events-none",b&&"text-w-gray-300")})})]})})})};export{p as SearchField};
+ */(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(o=0;o<s.length;o++)r=s[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}const m=c=>{var{type:m,onSearch:d,className:y,disabled:f,spellCheck:b,onFocus:j,onBlur:h,filters:g}=c,O=p(c,["type","onSearch","className","disabled","spellCheck","onFocus","onBlur","filters"]);const[I,v]=r(!1);/*#__PURE__*/
+return e("form",{onSubmit:e=>{e.preventDefault(),d()},"data-testid":"design-system-search-field",children:/*#__PURE__*/e("label",{className:"cursor-text",children:/*#__PURE__*/t(a,{isFocused:I,isDisabled:f,className:"overflow-visible",children:[!!g&&/*#__PURE__*/e(n,{className:"shrink-0",children:/*#__PURE__*/e(i,u({disabled:f},g))}),
+/*#__PURE__*/e(l,u({onFocus:e=>{v(!0),null==j||j(e)},onBlur:e=>{v(!1),null==h||h(e)},spellCheck:b||!1,disabled:f},O)),
+/*#__PURE__*/e("button",{type:"submit",className:"shrink-0","data-testid":"design-system-search-field--submit-button",disabled:f,children:/*#__PURE__*/e(s,{testId:"design-system-search-field--submit-button-icon",name:"medium_search",className:o("text-w-gray-600 pointer-events-none",f&&"text-w-gray-300")})})]})})})};export{m as SearchField};

package/dist/Components/Inputs/TextField/TextField.js

@@ -38,4 +38,4 @@
  *   maxLength={50}
  * />
  */(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)t=a[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const b=/*#__PURE__*/t(((t,u)=>{var{type:b,name:d,value:g,onChange:y,maxLength:O,disabled:j=!1,placeholder:h,label:x,testId:I,measure:v,isError:w,trailingIcon:P,leadingIcon:S,errorMessage:C,supportMessage:E,variant:F="default",className:L,onBlur:M}=t,T=m(t,["type","name","value","onChange","maxLength","disabled","placeholder","label","testId","measure","isError","trailingIcon","leadingIcon","errorMessage","supportMessage","variant","className","onBlur"]);const[D,N]=n(!1),[k,B]=n(0),q=p({variant:F,type:b,name:d,value:g,placeholder:h,label:x,maxLength:O,onChange:y,isFocused:D,isError:w,onFocus:()=>{N(!0)},disabled:j,onBlur:e=>{N(!1),M&&M(e)}},T),z=w||E||O;return o((()=>{"string"==typeof g&&O&&B(g.length)}),[g,O]),/*#__PURE__*/e("div",{className:a("tracking-default flex w-full flex-col gap-2 select-none",L),"data-testid":I,children:[
-/*#__PURE__*/r("label",{role:"input-box",className:j?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e(l,{leadingIcon:S,trailingIcon:P,measure:v,isFocused:D,isError:w,isDisabled:j,children:["label"===F&&/*#__PURE__*/r(s,f(p({isFixed:!!h},q),{ref:u})),"default"===F&&/*#__PURE__*/r(c,f(p({},q),{ref:u}))]})}),z&&/*#__PURE__*/r(i,{errorMessage:C,supportMessage:E,currentLength:k,maxLength:O})]})}));b.displayName="TextField";export{b as TextField};
+/*#__PURE__*/r("label",{className:j?"cursor-not-allowed":"cursor-text",children:/*#__PURE__*/e(l,{leadingIcon:S,trailingIcon:P,measure:v,isFocused:D,isError:w,isDisabled:j,children:["label"===F&&/*#__PURE__*/r(s,f(p({isFixed:!!h},q),{ref:u})),"default"===F&&/*#__PURE__*/r(c,f(p({},q),{ref:u}))]})}),z&&/*#__PURE__*/r(i,{errorMessage:C,supportMessage:E,currentLength:k,maxLength:O})]})}));b.displayName="TextField";export{b as TextField};

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.d.ts

@@ -5,6 +5,12 @@ export type Item = {
     value: string;
     leadingIcon?: SystemIconName;
 };
+export type PanelWidth = 'trigger' | 'viewport';
+export interface ResponsivePanelWidth {
+    base?: PanelWidth;
+    tablet?: PanelWidth;
+    desktop?: PanelWidth;
+}
 export interface TextFieldDropdownProps {
     items: Item[];
     onItemClick: (item: Item) => void;
@@ -17,7 +23,7 @@ export interface TextFieldDropdownProps {
     isError?: boolean;
     variant?: SelectBoxVariant;
     label?: string;
-    panelWidth?: 'trigger' | 'viewport';
+    panelWidth?: PanelWidth | ResponsivePanelWidth;
     panelGutter?: number;
 }
 /**
@@ -37,8 +43,14 @@ export interface TextFieldDropdownProps {
  * @param {boolean} [props.isError] - 오류 상태 여부
  * @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
  * @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
- * @param {number} [props.panelGutter=20] - `panelWidth="viewport"`일 때 패널과 화면 좌우 끝 사이에 둘 여백(px). 기본값 `20`.
- * @param {'trigger' | 'viewport'} [props.panelWidth='trigger'] - 옵션 패널의 너비 기준. `'trigger'`(기본)는 트리거와 동일한 너비로 트리거 바로 아래에 `absolute`로 겹쳐 펼쳐집니다. `'viewport'`는 트리거가 좁은 컨테이너(예: 모바일 grid 2열)에 있어도 패널이 컨테이너 바깥, 화면 전체 너비로 펼쳐집니다. 이때 패널은 `fixed`가 아니라 in-flow로 렌더되어 자기 높이만큼 실제 영역을 차지하므로(아래 콘텐츠를 밀어냄) 뷰포트 하단에서 잘리지 않고, 옵션이 많으면 패널 내부에서 스크롤됩니다.
+ * @param {number} [props.panelGutter=20] - `panelWidth`(또는 그 브레이크포인트 값)가 `"viewport"`일 때 패널과 화면 좌우 끝 사이에 둘 여백(px). 기본값 `20`.
+ * @param {'trigger' | 'viewport' | {base?: 'trigger'|'viewport', tablet?: 'trigger'|'viewport', desktop?: 'trigger'|'viewport'}} [props.panelWidth='trigger'] - 옵션 패널의 너비 기준.
+ * `'trigger'`(기본)는 트리거와 동일한 너비로 트리거 바로 아래에 `absolute`로 겹쳐 펼쳐집니다.
+ * `'viewport'`는 트리거가 좁은 컨테이너(예: 모바일 grid 2열)에 있어도 패널이 컨테이너 바깥, 화면 전체 너비로 펼쳐집니다.
+ * 이때 패널은 `fixed`가 아니라 in-flow로 렌더되어 자기 높이만큼 실제 영역을 차지하므로(아래 콘텐츠를 밀어냄) 뷰포트 하단에서 잘리지 않고, 옵션이 많으면 패널 내부에서 스크롤됩니다.
+ * `{ base, tablet, desktop }` 객체를 주면 `tailwind.config.js`의 `mobile(360px)/tablet(720px)/desktop(960px)` 브레이크포인트별로 다른 값을 지정할 수 있습니다.
+ * 지정하지 않은 브레이크포인트는 더 작은 브레이크포인트의 값을 물려받습니다(mobile-first). 예) `{ base: 'viewport', desktop: 'trigger' }` → 모바일·태블릿은 viewport, 데스크탑은 trigger.
+ * 이 객체 형태는 CSS 브레이크포인트 클래스 전환으로 처리되어 `matchMedia`/리사이즈 판정 로직이 추가되지 않습니다. 다만 객체의 어느 브레이크포인트든 `'viewport'`를 포함하면, 패널이 열려 있는 동안 트리거의 위치를 추적하는 `scroll`/`resize` 리스너가 (브레이크포인트 수와 무관하게) 1세트 붙습니다 — 이는 `panelWidth="viewport"` 단일 값을 쓸 때와 동일한 수준입니다.
  *
  * @example
  * ```tsx
@@ -64,6 +76,15 @@ export interface TextFieldDropdownProps {
  *   onItemClick={(item) => console.log('선택된 아이템:', item)}
  *   selectedItem={items[0]}
  * />
+ *
+ * // 모바일·태블릿은 viewport 전체, 데스크탑은 트리거 폭 그대로
+ * <TextFieldDropdown
+ *   items={items}
+ *   placeholder="옵션을 선택하세요"
+ *   onItemClick={(item) => console.log('선택된 아이템:', item)}
+ *   selectedItem={items[0]}
+ *   panelWidth={{ base: 'viewport', desktop: 'trigger' }}
+ * />
  * ```
  */
 declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, className, variant, label, panelWidth, panelGutter, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js

@@ -1,54 +1,10 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useLayoutEffect as r}from"react";import{twJoin as i}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as n}from"../List/List.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as a}from"../../../hooks/useDropdown.js";import{SelectBox as d}from"./TextFieldDropdown.parts.js";
-/**
- * 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
- *
- * @component
- *
- * @param {Object} props
- * @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
- * @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
- * @param {string} [props.placeholder] - 선택되지 않은 상태에서 표시될 안내 텍스트
- * @param {Item} [props.selectedItem] - 현재 선택된 아이템
- * @param {boolean} [props.disabled] - 비활성화 여부
- * @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
- * @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
- * @param {string} [props.className] - 추가적인 CSS 클래스명
- * @param {boolean} [props.isError] - 오류 상태 여부
- * @param {'default' | 'label'} [props.variant='default'] - 트리거(SelectBox)의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
- * @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
- * @param {number} [props.panelGutter=20] - `panelWidth="viewport"`일 때 패널과 화면 좌우 끝 사이에 둘 여백(px). 기본값 `20`.
- * @param {'trigger' | 'viewport'} [props.panelWidth='trigger'] - 옵션 패널의 너비 기준. `'trigger'`(기본)는 트리거와 동일한 너비로 트리거 바로 아래에 `absolute`로 겹쳐 펼쳐집니다. `'viewport'`는 트리거가 좁은 컨테이너(예: 모바일 grid 2열)에 있어도 패널이 컨테이너 바깥, 화면 전체 너비로 펼쳐집니다. 이때 패널은 `fixed`가 아니라 in-flow로 렌더되어 자기 높이만큼 실제 영역을 차지하므로(아래 콘텐츠를 밀어냄) 뷰포트 하단에서 잘리지 않고, 옵션이 많으면 패널 내부에서 스크롤됩니다.
- *
- * @example
- * ```tsx
- * const items = [
- *   { key: 1, value: '옵션 1', leadingIcon: 'home' },
- *   { key: 2, value: '옵션 2', leadingIcon: 'settings' }
- * ];
- *
- * // 기본 동작 — placeholder 기반 트리거
- * <TextFieldDropdown
- *   items={items}
- *   placeholder="옵션을 선택하세요"
- *   onItemClick={(item) => console.log('선택된 아이템:', item)}
- *   selectedItem={items[0]}
- *   supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
- * />
- *
- * // TextField variant="label"과 동일한 플로팅 라벨 트리거
- * <TextFieldDropdown
- *   variant="label"
- *   label="업종"
- *   items={items}
- *   onItemClick={(item) => console.log('선택된 아이템:', item)}
- *   selectedItem={items[0]}
- * />
- * ```
- */const p=({selectedItem:p,items:m,onItemClick:c,placeholder:u,disabled:f,isError:g,errorMessage:v,supportMessage:w,className:x,variant:h="default",label:b,panelWidth:L="trigger",panelGutter:I=20})=>{const{isListOpen:y,focusedIndex:k,ref:C,handleItemClick:j,toggleListOpen:B,handleKeyDown:D}=a({items:m,onItemClick:c,disabled:f}),E=!!w||!!v,F="viewport"===L,[M,N]=o(void 0);
-// viewport 패널은 좁은 컨테이너 바깥, 화면 전체 너비로 펼쳐져야 한다.
-// 단 fixed로 띄우면 out-of-flow라 영역을 차지하지 못해 하단에서 잘리므로,
-// in-flow(relative)로 두고 트리거의 화면상 좌측 위치/뷰포트 너비를 측정해
-// 좌우로 full-bleed시킨다. 높이는 in-flow라 실제 영역을 차지하고,
-// 옵션이 많으면 List 내부(max-height)에서 스크롤된다. (리사이즈/스크롤 시 추적)
-return r((()=>{if(!y||!F)return;const e=C.current;if(!e)return;const t=()=>{const{left:t}=e.getBoundingClientRect(),o=document.documentElement.clientWidth;N({marginLeft:I-t,width:o-2*I})};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[y,F,I,C]),/*#__PURE__*/e("div",{"data-testid":"design-system--textFieldDropdown",ref:C,className:"group/dropdown relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:D,tabIndex:f?-1:0,role:"combobox","aria-haspopup":"listbox","aria-expanded":y,"aria-disabled":f,children:[
-/*#__PURE__*/t(d,{placeholder:u,value:null==p?void 0:p.value,leadingIcon:null==p?void 0:p.leadingIcon,disabled:f,isListOpen:y,onClick:B,error:g,className:x,variant:h,label:b}),E&&/*#__PURE__*/t(s,{errorMessage:v,supportMessage:w}),y&&/*#__PURE__*/t(l,{"data-testid":"design-system--textFieldDropdown-panel",className:i("z-40",F?"relative":i("absolute w-full","label"===h?"top-[72px]":"top-[54px]")),style:F?M:void 0,children:/*#__PURE__*/t(n.Root,{children:m.map(((e,o)=>/*#__PURE__*/t(n.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>j(e),selected:e.key===(null==p?void 0:p.key),isFocused:o===k},e.key)))})})]})};export{p as TextFieldDropdown};
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useMemo as l,useState as o,useLayoutEffect as a}from"react";import{twJoin as r}from"tailwind-merge";import"../../Base/Typography/Typography.js";import{Box as i}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as d}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as p}from"../../../hooks/useDropdown.js";import{SelectBox as n}from"./TextFieldDropdown.parts.js";const m={base:{trigger:"absolute ml-0 w-full",viewport:"relative ml-[var(--tfd-panel-ml)] w-[var(--tfd-panel-w)]"},tablet:{trigger:"tablet:absolute tablet:ml-0 tablet:w-full",viewport:"tablet:relative tablet:ml-[var(--tfd-panel-ml)] tablet:w-[var(--tfd-panel-w)]"},desktop:{trigger:"desktop:absolute desktop:ml-0 desktop:w-full",viewport:"desktop:relative desktop:ml-[var(--tfd-panel-ml)] desktop:w-[var(--tfd-panel-w)]"}},u={base:{trigger:{default:"top-[54px]",label:"top-[72px]"},viewport:{default:"top-0",label:"top-0"}},tablet:{trigger:{default:"tablet:top-[54px]",label:"tablet:top-[72px]"},viewport:{default:"tablet:top-0",label:"tablet:top-0"}},desktop:{trigger:{default:"desktop:top-[54px]",label:"desktop:top-[72px]"},viewport:{default:"desktop:top-0",label:"desktop:top-0"}}},b=({selectedItem:b,items:v,onItemClick:c,placeholder:w,disabled:f,isError:g,errorMessage:k,supportMessage:x,className:h,variant:y="default",label:L,panelWidth:I="trigger",panelGutter:j=20})=>{const{isListOpen:B,focusedIndex:C,ref:D,handleItemClick:E,toggleListOpen:F,handleKeyDown:T}=p({items:v,onItemClick:c,disabled:f}),M=!!x||!!k,N="viewport"===I,z=l((()=>{return"object"==typeof(e=I)&&null!==e?(e=>{var t;const l=null!==(t=e.base)&&void 0!==t?t:"trigger";var o;const a=null!==(o=e.tablet)&&void 0!==o?o:l;var r;return{base:l,tablet:a,desktop:null!==(r=e.desktop)&&void 0!==r?r:a}})(I):void 0;var e}),[I]),O=void 0!==z&&("viewport"===z.base||"viewport"===z.tablet||"viewport"===z.desktop),K=N||O,[R,S]=o(void 0);a((()=>{if(!B||!K)return;const e=D.current;if(!e)return;const t=()=>{S(((e,t)=>{const{left:l}=e.getBoundingClientRect();return{marginLeft:t-l,width:document.documentElement.clientWidth-2*t}})(e,j))};return t(),window.addEventListener("scroll",t,!0),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t,!0),window.removeEventListener("resize",t)}}),[B,K,j,D]);
+// 객체 경로: 측정값을 CSS 커스텀 프로퍼티로만 노출(클래스가 항상 override 가능해야 함).
+const W=R?{"--tfd-panel-ml":`${R.marginLeft}px`,"--tfd-panel-w":`${R.width}px`}:void 0,$=R?{marginLeft:R.marginLeft,width:R.width}:void 0,G=r("z-40",z?((e,t)=>r(m.base[e.base],u.base[e.base][t],m.tablet[e.tablet],u.tablet[e.tablet][t],m.desktop[e.desktop],u.desktop[e.desktop][t]))(z,y):N?"relative":r("absolute w-full","label"===y?"top-[72px]":"top-[54px]")),q=z?W:N?$:void 0;
+// 문자열 경로: 기존과 동일하게 실제 marginLeft/width 인라인 스타일을 그대로 사용.
+/*#__PURE__*/
+return e("div",{"data-testid":"design-system--textFieldDropdown",ref:D,className:"group/dropdown relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:T,tabIndex:f?-1:0,role:"combobox","aria-haspopup":"listbox","aria-expanded":B,"aria-disabled":f,children:[
+/*#__PURE__*/t(n,{placeholder:w,value:null==b?void 0:b.value,leadingIcon:null==b?void 0:b.leadingIcon,disabled:f,isListOpen:B,onClick:F,error:g,className:h,variant:y,label:L}),M&&/*#__PURE__*/t(d,{errorMessage:k,supportMessage:x}),B&&/*#__PURE__*/t(i,{"data-testid":"design-system--textFieldDropdown-panel",className:G,style:q,children:/*#__PURE__*/t(s.Root,{children:v.map(((e,l)=>/*#__PURE__*/t(s.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>E(e),selected:e.key===(null==b?void 0:b.key),isFocused:l===C},e.key)))})})]})};
+// base -> tablet -> desktop 순으로 값이 없으면 더 작은 브레이크포인트의 값을 물려받는다.
+// (mobile-first cascade. FullBleed의 padding fallback과 동일한 관례)
+export{b as TextFieldDropdown};

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.d.ts

@@ -13,4 +13,13 @@ interface SelectBoxProps {
     label?: string;
 }
 export declare const SelectBox: ({ placeholder, value, isListOpen, disabled, error, onClick, className, variant, label, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element;
+export interface LabelSelectBoxProps {
+    value: string;
+    placeholder: string;
+    label?: string;
+    isFocused?: boolean;
+    isError?: boolean;
+    disabled?: boolean;
+}
+export declare const LabelSelectBox: ({ label, value, placeholder, isFocused, isError, disabled, }: LabelSelectBoxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.parts.js

@@ -3,4 +3,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twMerge as a,twJoin as
 /*#__PURE__*/e("div",{className:r("transition-transform duration-300",c&&"rotate-180"),children:/*#__PURE__*/e(i,{name:"medium_arrow_down",className:m?"text-w-gray-300":"text-w-gray-600",testId:"design-system--selectBox-icon"})})]}),n=({label:i,value:l,placeholder:d,isFocused:n,isError:c,disabled:m})=>{const p=!!d;/*#__PURE__*/
 return t(o,{className:"relative flex h-[42px] w-full flex-col gap-0.5 py-px","data-testid":"design-system--selectBox-label",children:[
 /*#__PURE__*/e("div",{className:a("tracking-default absolute",m?"text-w-gray-400":c?"text-w-red-500":n?"text-primary-500":"text-w-gray-400 group-hover:text-primary-500",p?"typo-caption11":n||l?"scale-[0.6875] -translate-y-0.5 origin-top-left transition-transform duration-300":"typo-body16 transition-transform duration-300 translate-y-2 origin-top-left"),"data-testid":"design-system--label-text",children:i}),
-/*#__PURE__*/e(s,{"data-testid":"design-system--selectBox-text",variant:"body16",className:r(m?"text-w-gray-300":l?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:l||(p?d:"")})]})};export{d as SelectBox};
+/*#__PURE__*/e(s,{"data-testid":"design-system--selectBox-text",variant:"body16",className:r(m?"text-w-gray-300":l?"text-w-gray-600":"text-w-gray-300","w-full pt-[14px]"),children:l||(p?d:"")})]})};export{n as LabelSelectBox,d as SelectBox};

package/dist/Components/Inputs/TextFieldTrigger/TextFieldTrigger.d.ts

@@ -0,0 +1,73 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { SelectBoxVariant } from '../TextFieldDropdown/TextFieldDropdown.parts';
+export interface TextFieldTriggerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'type' | 'value'> {
+    variant?: SelectBoxVariant;
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    isError?: boolean;
+    errorMessage?: string;
+    supportMessage?: string;
+    testId?: string;
+}
+/**
+ * 입력 필드처럼 보이지만 직접 타이핑하지 않고, 클릭(또는 Enter/Space)으로 별도 UI(모달,
+ * 패널 등)를 여는 트리거 컴포넌트입니다. 날짜 선택, 주소 검색, 파일 선택, 회사명 검색
+ * 모달처럼 "필드 모양의 트리거"가 필요한 모든 곳에서 사용할 수 있습니다.
+ *
+ * `readOnly` `TextField`를 트리거로 우회 사용하면 스크린리더가 "편집 가능 텍스트,
+ * 읽기 전용"으로 읽고 Enter/Space를 직접 구현해야 하는 문제가 있습니다.
+ * `TextFieldTrigger`는 실제 `<button type="button">`으로 렌더링되어 이 문제를 근본적으로
+ * 해결합니다 — 브라우저가 포커스, Enter/Space 클릭, disabled 처리를 기본으로 제공합니다.
+ * `<button>` 안에 `<input>`을 넣는 것은 invalid HTML이므로, 값은 항상 일반 텍스트로만
+ * 표시됩니다.
+ *
+ * 시각 스타일은 `TextFieldDropdown`의 트리거(`SelectBox`/`LabelSelectBox`)와 동일한
+ * `TextFieldContainer` + 라벨 플로팅 애니메이션을 그대로 재사용하며, 에러/서포트 텍스트는
+ * `SupportTextContainer`로 렌더링해 같은 폼의 `TextField` 에러와 렌더 경로·스타일이
+ * 일치합니다.
+ *
+ * `className`과 나머지 DOM 속성(rest, 예: `onClick`, `aria-haspopup`, `aria-expanded`)은
+ * 모두 시각적 트리거이자 실제 클릭 대상인 `<button>` 엘리먼트 하나에만 적용됩니다.
+ * `TextField`처럼 `className`은 바깥 wrapper에, rest는 내부 `<input>`에만 적용되어
+ * 커서 영역과 클릭 핸들러 영역이 어긋나는 문제가 `TextFieldTrigger`에는 없습니다.
+ *
+ * `value`가 비어 있을 때 `placeholder`는 시각적으로만 힌트를 보여주고, `label`이 있는
+ * 경우 접근 가능한 이름(accessible name)에 섞여 들어가지 않도록 처리했습니다
+ * (예: `label="회사명"`, `placeholder="기업명을 검색하세요"`, `value=""`이면 접근 가능한
+ * 이름은 "회사명"입니다). 소비자가 `aria-label`을 직접 넘기면 이 내부 계산보다 항상
+ * 우선합니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {'default' | 'label'} [props.variant='default'] - 트리거의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
+ * @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
+ * @param {string} [props.value] - 현재 선택된 값(표시용 텍스트). 직접 타이핑할 수 없으므로 항상 상위 상태에서 내려받습니다.
+ * @param {string} [props.placeholder] - 값이 없을 때 표시되는 안내 텍스트
+ * @param {boolean} [props.isError] - 오류 상태 표시 여부
+ * @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
+ * @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
+ * @param {boolean} [props.disabled] - 비활성화 여부. `<button disabled>`로 렌더되어 클릭·키보드 입력이 모두 무시됩니다.
+ * @param {string} [props.className] - `<button>`에 적용될 추가 CSS 클래스명
+ * @param {string} [props.testId] - 테스트용 ID (`<button>`에 적용)
+ * @param {() => void} [props.onClick] - 클릭(및 Enter/Space) 시 호출되는 콜백. 별도의 키보드 핸들러를 구현할 필요가 없습니다.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <TextFieldTrigger
+ *   variant="label"
+ *   label="회사명"
+ *   value={companyName}
+ *   placeholder="기업명을 검색하세요"
+ *   isError={hasError}
+ *   errorMessage={errorMessage}
+ *   aria-haspopup="dialog"
+ *   aria-expanded={isOpen}
+ *   onClick={() => setIsOpen(true)}
+ * />
+ * ```
+ */
+declare const TextFieldTrigger: import("react").ForwardRefExoticComponent<TextFieldTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { TextFieldTrigger };

package/dist/Components/Inputs/TextFieldTrigger/TextFieldTrigger.js

@@ -0,0 +1,62 @@
+"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{forwardRef as t,useState as o}from"react";import{twJoin as l,twMerge as n}from"tailwind-merge";import{Typography as a}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{TextFieldContainer as s}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as i}from"../SupportTextContainer/SupportTextContainer.js";import{LabelSelectBox as c}from"../TextFieldDropdown/TextFieldDropdown.parts.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}function d(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function b(e,r){if(null==e)return{};var t,o,l=function(e,r){if(null==e)return{};var t,o,l={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(l[t]=e[t]);return l}
+/**
+ * 입력 필드처럼 보이지만 직접 타이핑하지 않고, 클릭(또는 Enter/Space)으로 별도 UI(모달,
+ * 패널 등)를 여는 트리거 컴포넌트입니다. 날짜 선택, 주소 검색, 파일 선택, 회사명 검색
+ * 모달처럼 "필드 모양의 트리거"가 필요한 모든 곳에서 사용할 수 있습니다.
+ *
+ * `readOnly` `TextField`를 트리거로 우회 사용하면 스크린리더가 "편집 가능 텍스트,
+ * 읽기 전용"으로 읽고 Enter/Space를 직접 구현해야 하는 문제가 있습니다.
+ * `TextFieldTrigger`는 실제 `<button type="button">`으로 렌더링되어 이 문제를 근본적으로
+ * 해결합니다 — 브라우저가 포커스, Enter/Space 클릭, disabled 처리를 기본으로 제공합니다.
+ * `<button>` 안에 `<input>`을 넣는 것은 invalid HTML이므로, 값은 항상 일반 텍스트로만
+ * 표시됩니다.
+ *
+ * 시각 스타일은 `TextFieldDropdown`의 트리거(`SelectBox`/`LabelSelectBox`)와 동일한
+ * `TextFieldContainer` + 라벨 플로팅 애니메이션을 그대로 재사용하며, 에러/서포트 텍스트는
+ * `SupportTextContainer`로 렌더링해 같은 폼의 `TextField` 에러와 렌더 경로·스타일이
+ * 일치합니다.
+ *
+ * `className`과 나머지 DOM 속성(rest, 예: `onClick`, `aria-haspopup`, `aria-expanded`)은
+ * 모두 시각적 트리거이자 실제 클릭 대상인 `<button>` 엘리먼트 하나에만 적용됩니다.
+ * `TextField`처럼 `className`은 바깥 wrapper에, rest는 내부 `<input>`에만 적용되어
+ * 커서 영역과 클릭 핸들러 영역이 어긋나는 문제가 `TextFieldTrigger`에는 없습니다.
+ *
+ * `value`가 비어 있을 때 `placeholder`는 시각적으로만 힌트를 보여주고, `label`이 있는
+ * 경우 접근 가능한 이름(accessible name)에 섞여 들어가지 않도록 처리했습니다
+ * (예: `label="회사명"`, `placeholder="기업명을 검색하세요"`, `value=""`이면 접근 가능한
+ * 이름은 "회사명"입니다). 소비자가 `aria-label`을 직접 넘기면 이 내부 계산보다 항상
+ * 우선합니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {'default' | 'label'} [props.variant='default'] - 트리거의 디자인 변형 타입. `TextField`의 variant와 동일한 시맨틱입니다.
+ * @param {string} [props.label] - `variant="label"`일 때 트리거 위에 플로팅되는 라벨
+ * @param {string} [props.value] - 현재 선택된 값(표시용 텍스트). 직접 타이핑할 수 없으므로 항상 상위 상태에서 내려받습니다.
+ * @param {string} [props.placeholder] - 값이 없을 때 표시되는 안내 텍스트
+ * @param {boolean} [props.isError] - 오류 상태 표시 여부
+ * @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
+ * @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
+ * @param {boolean} [props.disabled] - 비활성화 여부. `<button disabled>`로 렌더되어 클릭·키보드 입력이 모두 무시됩니다.
+ * @param {string} [props.className] - `<button>`에 적용될 추가 CSS 클래스명
+ * @param {string} [props.testId] - 테스트용 ID (`<button>`에 적용)
+ * @param {() => void} [props.onClick] - 클릭(및 Enter/Space) 시 호출되는 콜백. 별도의 키보드 핸들러를 구현할 필요가 없습니다.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <TextFieldTrigger
+ *   variant="label"
+ *   label="회사명"
+ *   value={companyName}
+ *   placeholder="기업명을 검색하세요"
+ *   isError={hasError}
+ *   errorMessage={errorMessage}
+ *   aria-haspopup="dialog"
+ *   aria-expanded={isOpen}
+ *   onClick={() => setIsOpen(true)}
+ * />
+ * ```
+ */(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(l[t]=e[t])}return l}const f=/*#__PURE__*/t(((t,u)=>{var{variant:f="default",label:y,value:g="",placeholder:m="",isError:O,errorMessage:j,supportMessage:x,disabled:w=!1,className:v,onFocus:h,onBlur:F,testId:P,"aria-label":T}=t,B=b(t,["variant","label","value","placeholder","isError","errorMessage","supportMessage","disabled","className","onFocus","onBlur","testId","aria-label"]);const[S,D]=o(!1),E=!!y&&!g,M=!!x||!!j;/*#__PURE__*/
+return e("div",{className:"tracking-default flex w-full flex-col gap-2 select-none",children:[
+/*#__PURE__*/r("button",d(p({},B),{ref:u,type:"button",disabled:w,onFocus:e=>{D(!0),null==h||h(e)},onBlur:e=>{D(!1),null==F||F(e)},"aria-label":null!=T?T:E?y:void 0,"data-testid":null!=P?P:"design-system--textFieldTrigger",className:n("w-full text-left",w?"cursor-not-allowed":"cursor-pointer",v),children:/*#__PURE__*/r(s,{isFocused:S,isDisabled:w,isError:O,testId:"design-system--textFieldTrigger-box",children:"label"===f?/*#__PURE__*/r(c,{label:y,value:g,placeholder:m,isFocused:S,isError:O,disabled:w}):/*#__PURE__*/r(a,{"data-testid":"design-system--textFieldTrigger-text",variant:"body16",className:l(w&&g?"text-w-gray-300":w&&!g?"text-w-gray-200":g?"text-w-gray-600":"text-w-gray-300","w-full"),children:g||m})})})),M&&/*#__PURE__*/r(i,{errorMessage:j,supportMessage:x})]})}));f.displayName="TextFieldTrigger";export{f as TextFieldTrigger};

package/dist/Components/Inputs/TextFieldTrigger/index.d.ts

@@ -0,0 +1,2 @@
+export { TextFieldTrigger } from './TextFieldTrigger';
+export type { TextFieldTriggerProps } from './TextFieldTrigger';

package/dist/Components/Inputs/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n,twJoin as o}from"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as l}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as s}from"../SupportTextContainer/SupportTextContainer.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(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){m(e,t,r[t])}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r}from"react";import{twMerge as n,twJoin as o}from"tailwind-merge";import"../../Base/Typography/Typography.js";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/Avatar/Avatar.js";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{TextFieldContainer as i}from"../TextFieldContainer/TextFieldContainer.js";import{SupportTextContainer as l}from"../SupportTextContainer/SupportTextContainer.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(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){m(e,t,r[t])}))}return e}function p(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}
 /**
  * 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
  *
@@ -41,7 +41,7 @@
  *   />
  * </div>
  * ```
- */(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const p=m=>{var{isError:p=!1,size:f="md",resize:d=!1,isLengthVisible:g=!1,supportText:x,errorText:y,maxLength:h,value:b,disabled:j,name:O,onChange:v,onBlur:w}=m,S=c(m,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[D,z]=r(!1),B=p||x||g;/*#__PURE__*/
+ */(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}const c=m=>{var{isError:c=!1,size:f="md",resize:d=!1,isLengthVisible:y=!1,supportText:g,errorText:x,maxLength:h,value:b,disabled:j,name:O,onChange:v,onBlur:w}=m,S=p(m,["isError","size","resize","isLengthVisible","supportText","errorText","maxLength","value","disabled","name","onChange","onBlur"]);const[T,B]=r(!1),D=c||g||y;/*#__PURE__*/
 return e(a,{"data-testid":"design-system-textarea",className:n("flex w-full flex-col gap-2","full"===f?"h-full":"h-fit"),children:[
-/*#__PURE__*/e(i,{isDisabled:j,isError:p,isFocused:D,isTextarea:!0,className:o("full"===f&&"h-full"),children:[
-/*#__PURE__*/t("textarea",u({"data-testid":"design-system-textarea--textarea",className:n("scrollbar-list tracking-default placeholder:tracking-default text-w-gray-600 placeholder:text-w-gray-300 w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal outline-hidden placeholder:font-[inherit]","sm"===f?"min-h-[118px]":"md"===f?"min-h-[238px]":"lg"===f?"min-h-[358px]":"full"===f?"min-h-full":void 0,d?"resize-y":"resize-none",j&&"resize-none"),name:O,value:b,disabled:j,onChange:v,maxLength:h,onFocus:e=>{z(!0)},onBlur:e=>{z(!1),w&&w(e)}},S)),d&&/*#__PURE__*/t(l,{name:"small_resizer",className:"text-w-gray-400 absolute right-[5px] bottom-[5px]",testId:"design-system-textarea--resize-icon"})]}),B&&/*#__PURE__*/t(s,{errorMessage:y,supportMessage:x,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:h})]})};export{p as Textarea};
+/*#__PURE__*/e(i,{isDisabled:j,isError:c,isFocused:T,isTextarea:!0,className:o("full"===f&&"h-full"),children:[
+/*#__PURE__*/t("textarea",u({"data-testid":"design-system-textarea--textarea",className:n("scrollbar-list tracking-default placeholder:tracking-default text-w-gray-600 placeholder:text-w-gray-300 w-full overflow-y-scroll py-[11px] pl-4 font-[inherit] font-normal outline-hidden placeholder:font-[inherit]","sm"===f?"min-h-[118px]":"md"===f?"min-h-[238px]":"lg"===f?"min-h-[358px]":"full"===f?"min-h-full":void 0,d?"resize-y":"resize-none",j&&"resize-none"),name:O,value:b,disabled:j,onChange:v,maxLength:h,onFocus:e=>{B(!0)},onBlur:e=>{B(!1),w&&w(e)}},S)),d&&/*#__PURE__*/t(s,{name:"small_resizer",className:"text-w-gray-400 absolute right-[5px] bottom-[5px]",testId:"design-system-textarea--resize-icon"})]}),D&&/*#__PURE__*/t(l,{errorMessage:x,supportMessage:g,currentLength:(null==b?void 0:b.toString().length)||0,maxLength:h})]})};export{c as Textarea};

package/dist/Components/Inputs/index.d.ts

@@ -22,6 +22,7 @@ export * from './TextButton';
 export * from './TextField';
 export * from './List';
 export * from './TextFieldDropdown';
+export * from './TextFieldTrigger';
 export * from './CommentArea';
 export * from './IconButtonDropdown';
 export * from './MultiColumnList';

package/dist/Components/Navigations/Drawer/Drawer.js

@@ -1,4 +1,4 @@
-import{jsxs as r,Fragment as e,jsx as t}from"react/jsx-runtime";import{twMerge as o}from"tailwind-merge";import{BackDrop as i}from"../../Utils/BackDrop/BackDrop.js";import"react";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react-dom";import{directionStyle as a,sizeStyle as l,openStyle as m}from"./Drawer.styles.js";
+import{jsxs as r,Fragment as e,jsx as o}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{BackDrop as i}from"../../Utils/BackDrop/BackDrop.js";import"react";import"../../Base/Typography/Typography.js";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react-dom";import{directionStyle as a,sizeStyle as m,openStyle as l}from"./Drawer.styles.js";
 /**
  * 화면의 가장자리에서 슬라이딩되어 나타나는 서랍형 컴포넌트입니다.
  *
@@ -25,5 +25,5 @@ import{jsxs as r,Fragment as e,jsx as t}from"react/jsx-runtime";import{twMerge a
  * >
  *   <div>서랍 내용</div>
  * </Drawer>
- */const n=({isOpen:n,onClose:c,direction:d="right",size:p="quarter",className:f,children:B})=>/*#__PURE__*/r(e,{children:[n&&/*#__PURE__*/t(i,{onClick:c,isBlack:!0}),
-/*#__PURE__*/t(s,{className:o("fixed z-30 flex flex-col bg-white transition-transform duration-300 ease-in-out",a[d],l(p,d),n&&m[d],f),"data-testid":"design-system-drawer",children:B})]});export{n as Drawer};
+ */const p=({isOpen:p,onClose:n,direction:c="right",size:d="quarter",className:B,children:f})=>/*#__PURE__*/r(e,{children:[p&&/*#__PURE__*/o(i,{onClick:n,isBlack:!0}),
+/*#__PURE__*/o(s,{className:t("fixed z-30 flex flex-col bg-white transition-transform duration-300 ease-in-out",a[c],m(d,c),p&&l[c],B),"data-testid":"design-system-drawer",children:f})]});export{p as Drawer};