@wishket/design-system 1.13.16 → 1.13.18

package/dist/Components/Base/Layouts/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
-interface BoxProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
+export interface BoxProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
     as?: ElementType;
 }
 /**

package/dist/Components/Base/Layouts/Column/Column.d.ts

@@ -3,6 +3,9 @@ type ColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
 export interface ColumnProps extends PropsWithChildren {
     container?: boolean;
     size?: ColumnSize;
+    leftColumnSize?: ColumnSize;
+    centerColumnSize?: ColumnSize;
+    rightColumnSize?: ColumnSize;
     className?: string;
 }
 /**

package/dist/Components/Base/Layouts/FullBleed/FullBleed.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef } from 'react';
-interface FullBleedProps extends ComponentPropsWithRef<'div'> {
+export interface FullBleedProps extends ComponentPropsWithRef<'div'> {
     className?: string;
     insideContainerClassName?: string;
     maxWidth?: string;

package/dist/Components/DataDisplays/ServiceLogo/ServiceLogo.d.ts

@@ -1,5 +1,5 @@
 import { ServiceLogoNames } from './ServiceLogo.types';
-interface ServiceLogoProps {
+export interface ServiceLogoProps {
     name: ServiceLogoNames;
     className?: string;
     variant?: 'default' | 'disabled' | 'bluegray' | 'white';

package/dist/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{IconButton as i}from"../IconButton/IconButton.js";import{List as n}from"../List/List.js";import l from"../../../hooks/useDropdown.js";
+"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{IconButton as i}from"../IconButton/IconButton.js";import{List as n}from"../List/List.js";import{useDropdown as l}from"../../../hooks/useDropdown.js";
 /**
  * 아이콘 버튼과 드롭다운 목록을 결합한 컴포넌트입니다.
  * 버튼 클릭 시 드롭다운 목록이 표시되며, 키보드 탐색이 가능합니다.

package/dist/Components/Inputs/TextButtonDropdown/TextButtonDropdown.js

@@ -1,4 +1,4 @@
-"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{List as i}from"../List/List.js";import n from"../../../hooks/useDropdown.js";import{TextButton as s}from"./TextButtonDropdown.parts.js";
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import{List as i}from"../List/List.js";import{useDropdown as n}from"../../../hooks/useDropdown.js";import{TextButton as s}from"./TextButtonDropdown.parts.js";
 /**
  * 텍스트 버튼 형태의 드롭다운 컴포넌트입니다.
  *

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

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import"tailwind-merge";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as l}from"../List/List.js";import{SupportTextContainer as t}from"../SupportTextContainer/SupportTextContainer.js";import i from"../../../hooks/useDropdown.js";import{SelectBox as r}from"./TextFieldDropdown.parts.js";
+"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import"tailwind-merge";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as l}from"../List/List.js";import{SupportTextContainer as t}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as i}from"../../../hooks/useDropdown.js";import{SelectBox as r}from"./TextFieldDropdown.parts.js";
 /**
  * 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
  *

package/dist/cjs/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js

@@ -1,3 +1,3 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var n=require("../IconButton/IconButton.js"),i=require("../List/List.js"),o=require("../../../hooks/useDropdown.js");exports.IconButtonDropdown=({icon:l,items:a,selectedItem:r,onItemClick:c,size:d="sm",align:u="left",disabled:m=!1})=>{const{isListOpen:y,ref:I,focusedIndex:x,handleItemClick:j,toggleListOpen:w,handleKeyDown:f}=o.default({items:a,onItemClick:c});/*#__PURE__*/
-return e.jsxs("div",{"data-testid":"design-system-icon-button-dropdown",className:"relative w-fit outline-none",ref:I,onKeyDown:f,tabIndex:0,children:[
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge");require("react");var s=require("../../DataDisplays/SystemIcon/SystemIcon.js");require("../../DataDisplays/SystemIcon/SystemIcon.constants.js"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js");var n=require("../IconButton/IconButton.js"),i=require("../List/List.js"),o=require("../../../hooks/useDropdown.js");exports.IconButtonDropdown=({icon:l,items:a,selectedItem:r,onItemClick:c,size:d="sm",align:u="left",disabled:m=!1})=>{const{isListOpen:y,ref:I,focusedIndex:x,handleItemClick:j,toggleListOpen:w,handleKeyDown:g}=o.useDropdown({items:a,onItemClick:c});/*#__PURE__*/
+return e.jsxs("div",{"data-testid":"design-system-icon-button-dropdown",className:"relative w-fit outline-none",ref:I,onKeyDown:g,tabIndex:0,children:[
 /*#__PURE__*/e.jsx(n.IconButton,{onClick:w,size:d,className:"outline-none",disabled:m,children:/*#__PURE__*/e.jsx(s.SystemIcon,{name:l,className:t.twJoin(m&&"text-w-gray-300")})}),y&&/*#__PURE__*/e.jsx("div",{"data-testid":"design-system-icon-button-dropdown--list-container",className:t.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all","right"===u?"right-0":"left-0 "),children:/*#__PURE__*/e.jsx(i.List.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:a.map(((t,s)=>/*#__PURE__*/e.jsx(i.List.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>j(t),selected:t.key===(null==r?void 0:r.key),isFocused:s===x},t.key)))})})]})};

package/dist/cjs/Components/Inputs/TextButtonDropdown/TextButtonDropdown.js

@@ -1,3 +1,3 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("../List/List.js"),i=require("../../../hooks/useDropdown.js"),n=require("./TextButtonDropdown.parts.js");exports.TextButtonDropdown=({items:o,selectedItem:l,onItemClick:d,alignRight:a=!1,disabled:r=!1})=>{const{isListOpen:u,ref:c,focusedIndex:m,handleItemClick:x,toggleListOpen:p,handleKeyDown:w}=i.default({items:o,onItemClick:d});/*#__PURE__*/
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=require("../List/List.js"),i=require("../../../hooks/useDropdown.js"),n=require("./TextButtonDropdown.parts.js");exports.TextButtonDropdown=({items:o,selectedItem:l,onItemClick:d,alignRight:r=!1,disabled:a=!1})=>{const{isListOpen:u,ref:c,focusedIndex:m,handleItemClick:x,toggleListOpen:p,handleKeyDown:w}=i.useDropdown({items:o,onItemClick:d});/*#__PURE__*/
 return e.jsxs("div",{"data-testid":"design-system-text-button-dropdown",className:"relative flex w-fit flex-col gap-1 outline-none",ref:c,onKeyDown:w,tabIndex:0,children:[
-/*#__PURE__*/e.jsx(n.TextButton,{disabled:r,value:l.value,"data-testid":"design-system-text-button-dropdown--textButton",isListOpen:u,onClick:p}),u&&/*#__PURE__*/e.jsx("div",{className:t.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all",a?"right-0":"left-0 "),"data-testid":"design-system-text-button-dropdown--list",children:/*#__PURE__*/e.jsx(s.List.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:o.map(((t,i)=>/*#__PURE__*/e.jsx(s.List.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>x(t),selected:t.key===(null==l?void 0:l.key),isFocused:i===m},t.key)))})})]})};
+/*#__PURE__*/e.jsx(n.TextButton,{disabled:a,value:l.value,"data-testid":"design-system-text-button-dropdown--textButton",isListOpen:u,onClick:p}),u&&/*#__PURE__*/e.jsx("div",{className:t.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all",r?"right-0":"left-0 "),"data-testid":"design-system-text-button-dropdown--list",children:/*#__PURE__*/e.jsx(s.List.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:o.map(((t,i)=>/*#__PURE__*/e.jsx(s.List.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:()=>x(t),selected:t.key===(null==l?void 0:l.key),isFocused:i===m},t.key)))})})]})};

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

@@ -1,3 +1,3 @@
-"use client";"use strict";var e=require("react/jsx-runtime");require("tailwind-merge");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var l=require("../List/List.js"),r=require("../SupportTextContainer/SupportTextContainer.js"),t=require("../../../hooks/useDropdown.js"),o=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:i,items:a,onItemClick:n,placeholder:d,disabled:u,isError:c,errorMessage:p,supportMessage:x,className:m})=>{const{isListOpen:g,focusedIndex:j,ref:v,handleItemClick:I,toggleListOpen:k,handleKeyDown:w}=t.default({items:a,onItemClick:n,disabled:u}),L=!!x||!!p;/*#__PURE__*/
-return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:v,className:"relative flex w-full flex-col gap-2 outline-none",onKeyDown:w,tabIndex:0,children:[
-/*#__PURE__*/e.jsx(o.SelectBox,{placeholder:d,value:null==i?void 0:i.value,leadingIcon:null==i?void 0:i.leadingIcon,disabled:u,isListOpen:g,onClick:k,error:c,className:m}),L&&/*#__PURE__*/e.jsx(r.SupportTextContainer,{errorMessage:p,supportMessage:x}),g&&/*#__PURE__*/e.jsx(s.Box,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/e.jsx(l.List.Root,{children:a.map(((s,r)=>/*#__PURE__*/e.jsx(l.List.Item,{text:s.value,leadingIcon:s.leadingIcon,onClick:()=>I(s),selected:s.key===(null==i?void 0:i.key),isFocused:r===j},s.key)))})})]})};
+"use client";"use strict";var e=require("react/jsx-runtime");require("tailwind-merge");var s=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var r=require("../List/List.js"),l=require("../SupportTextContainer/SupportTextContainer.js"),o=require("../../../hooks/useDropdown.js"),t=require("./TextFieldDropdown.parts.js");exports.TextFieldDropdown=({selectedItem:i,items:n,onItemClick:a,placeholder:d,disabled:u,isError:c,errorMessage:p,supportMessage:x,className:m})=>{const{isListOpen:g,focusedIndex:j,ref:v,handleItemClick:I,toggleListOpen:w,handleKeyDown:k}=o.useDropdown({items:n,onItemClick:a,disabled:u}),L=!!x||!!p;/*#__PURE__*/
+return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:v,className:"relative flex w-full flex-col gap-2 outline-none",onKeyDown:k,tabIndex:0,children:[
+/*#__PURE__*/e.jsx(t.SelectBox,{placeholder:d,value:null==i?void 0:i.value,leadingIcon:null==i?void 0:i.leadingIcon,disabled:u,isListOpen:g,onClick:w,error:c,className:m}),L&&/*#__PURE__*/e.jsx(l.SupportTextContainer,{errorMessage:p,supportMessage:x}),g&&/*#__PURE__*/e.jsx(s.Box,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/e.jsx(r.List.Root,{children:n.map(((s,l)=>/*#__PURE__*/e.jsx(r.List.Item,{text:s.value,leadingIcon:s.leadingIcon,onClick:()=>I(s),selected:s.key===(null==i?void 0:i.key),isFocused:l===j},s.key)))})})]})};

package/dist/cjs/hooks/useDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@wishket/yogokit");exports.default=({items:r,onItemClick:l,disabled:n})=>{const[s,u]=e.useState(!1),[c,o]=e.useState(-1),a=e.useRef(null),i=e.useRef(s),f=e.useCallback((()=>{i.current&&(u(!1),o(-1))}),[]);t.useClickOutside(a,f);const k=e=>{l(e),f()};return{isListOpen:s,focusedIndex:c,ref:a,handleItemClick:k,toggleListOpen:e=>{null==e||e.preventDefault(),n||u((e=>(i.current=!e,!e)))},handleKeyDown:e=>{if(s)switch(e.key){case"ArrowDown":e.preventDefault(),o((e=>{const t=e<r.length-1?e+1:e,l=a.current;if(l){const e=l.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),o((e=>{const t=e>0?e-1:e,r=a.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),c>=0&&k(r[c]);break;case"Escape":e.preventDefault(),f()}}}};
+"use strict";var e=require("react"),t=require("@wishket/yogokit");exports.useDropdown=({items:r,onItemClick:l,disabled:n})=>{const[s,u]=e.useState(!1),[c,o]=e.useState(-1),a=e.useRef(null),i=e.useRef(s),f=e.useCallback((()=>{i.current&&(u(!1),o(-1))}),[]);t.useClickOutside(a,f);const k=e=>{l(e),f()};return{isListOpen:s,focusedIndex:c,ref:a,handleItemClick:k,toggleListOpen:e=>{null==e||e.preventDefault(),n||u((e=>(i.current=!e,!e)))},handleKeyDown:e=>{if(s)switch(e.key){case"ArrowDown":e.preventDefault(),o((e=>{const t=e<r.length-1?e+1:e,l=a.current;if(l){const e=l.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),o((e=>{const t=e>0?e-1:e,r=a.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),c>=0&&k(r[c]);break;case"Escape":e.preventDefault(),f()}}}};

package/dist/hooks/index.d.ts

@@ -1 +1 @@
-export { default as useDropdown } from './useDropdown';
+export { useDropdown } from './useDropdown';

package/dist/hooks/useDropdown.d.ts

@@ -18,4 +18,4 @@ declare const useDropdown: ({ items, onItemClick, disabled }: UseDropdownProps)
     toggleListOpen: (e?: MouseEvent) => void;
     handleKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
 };
-export default useDropdown;
+export { useDropdown };

package/dist/hooks/useDropdown.js

@@ -1 +1 @@
-import{useState as e,useRef as t,useCallback as r}from"react";import{useClickOutside as n}from"@wishket/yogokit";const l=({items:l,onItemClick:o,disabled:c})=>{const[s,a]=e(!1),[u,i]=e(-1),f=t(null),p=t(s),k=r((()=>{p.current&&(a(!1),i(-1))}),[]);n(f,k);const w=e=>{o(e),k()};return{isListOpen:s,focusedIndex:u,ref:f,handleItemClick:w,toggleListOpen:e=>{null==e||e.preventDefault(),c||a((e=>(p.current=!e,!e)))},handleKeyDown:e=>{if(s)switch(e.key){case"ArrowDown":e.preventDefault(),i((e=>{const t=e<l.length-1?e+1:e,r=f.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),i((e=>{const t=e>0?e-1:e,r=f.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),u>=0&&w(l[u]);break;case"Escape":e.preventDefault(),k()}}}};export{l as default};
+import{useState as e,useRef as t,useCallback as r}from"react";import{useClickOutside as n}from"@wishket/yogokit";const l=({items:l,onItemClick:o,disabled:c})=>{const[s,a]=e(!1),[i,u]=e(-1),f=t(null),p=t(s),k=r((()=>{p.current&&(a(!1),u(-1))}),[]);n(f,k);const w=e=>{o(e),k()};return{isListOpen:s,focusedIndex:i,ref:f,handleItemClick:w,toggleListOpen:e=>{null==e||e.preventDefault(),c||a((e=>(p.current=!e,!e)))},handleKeyDown:e=>{if(s)switch(e.key){case"ArrowDown":e.preventDefault(),u((e=>{const t=e<l.length-1?e+1:e,r=f.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"ArrowUp":e.preventDefault(),u((e=>{const t=e>0?e-1:e,r=f.current;if(r){const e=r.querySelectorAll("li")[t];null==e||e.scrollIntoView({block:"nearest"})}return t}));break;case"Enter":e.preventDefault(),i>=0&&w(l[i]);break;case"Escape":e.preventDefault(),k()}}}};export{l as useDropdown};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "1.13.16",
+  "version": "1.13.18",
   "type": "module",
   "description": "Wishket Design System",
   "main": "dist/index.js",
@@ -53,20 +53,18 @@
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "^7.27.1",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
-    "@chromatic-com/storybook": "^2.0.0",
+    "@chromatic-com/storybook": "^4.0.0",
     "@faker-js/faker": "^8.4.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/addon-interactions": "^8.4.0",
-    "@storybook/addon-links": "^8.4.0",
-    "@storybook/addon-onboarding": "^8.6.14",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/nextjs": "^8.4.0",
-    "@storybook/react": "^8.4.0",
-    "@storybook/test": "^8.4.0",
+    "@storybook/addon-docs": "^9.0.9",
+    "@storybook/addon-links": "^9.0.9",
+    "@storybook/addon-onboarding": "^9.0.9",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/mdx2-csf": "^1.1.0",
+    "@storybook/nextjs": "^9.0.9",
     "@swc/core": "^1.5.5",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.2.0",
@@ -95,7 +93,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-swc3": "^0.12.1",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.4.0",
+    "storybook": "^9.0.9",
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",