@loword/loword-design-system 0.0.14 → 0.0.16

package/dist/components/LDCarousel/CarouselBase.js

@@ -118,12 +118,12 @@ const Slide = ({ slidesPerView = 'auto', index, total, className, style, childre
 const Prev = ({ className, children, ...props }) => {
     const { scrollPrev, canScrollPrev, orientation } = useCarouselContext();
     return (_jsx("button", { type: "button", onClick: scrollPrev, disabled: !canScrollPrev, "aria-label": props['aria-label'] ?? '이전', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ??
-            (orientation === 'vertical' ? (_jsx(ChevronUp, { size: 32, strokeWidth: 1.4 })) : (_jsx(ChevronLeft, { size: 32, strokeWidth: 1.4 }))) }));
+            (orientation === 'vertical' ? (_jsx(ChevronUp, { size: 28, strokeWidth: 1.4 })) : (_jsx(ChevronLeft, { size: 28, strokeWidth: 1.4 }))) }));
 };
 const Next = ({ className, children, ...props }) => {
     const { scrollNext, canScrollNext, orientation } = useCarouselContext();
     return (_jsx("button", { type: "button", onClick: scrollNext, disabled: !canScrollNext, "aria-label": props['aria-label'] ?? '다음', className: cn('ld-carousel__nav', orientation === 'vertical' && 'ld-carousel__nav--vertical', className), children: children ??
-            (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 32, strokeWidth: 1.4 })) : (_jsx(ChevronRight, { size: 32, strokeWidth: 1.4 }))) }));
+            (orientation === 'vertical' ? (_jsx(ChevronDown, { size: 28, strokeWidth: 1.4 })) : (_jsx(ChevronRight, { size: 28, strokeWidth: 1.4 }))) }));
 };
 const TopArrows = ({ className, children, ...props }) => {
     const { scrollNext, scrollPrev, canScrollNext, canScrollPrev, orientation } = useCarouselContext();

package/dist/components/LDCarousel/LDCarousel.d.ts

@@ -28,6 +28,14 @@ export interface LDCarouselProps {
     showCounter?: boolean;
     /** 한 화면에 보일 슬라이드 수. 기본 1. `'auto'`면 각 슬라이드가 내용 폭대로 배치 */
     slidesPerView?: number | 'auto';
+    /** 여러 행으로 쌓는 그리드 설정. 미지정 시 단일 행 */
+    grid?: {
+        /** 세로로 쌓을 행 개수. 2 이상이면 슬라이드를 행 개수만큼 세로로 묶어 한 열씩 넘긴다.
+         *  열이 달라도 같은 행은 같은 선상에서 시작하며, 카드 높이 자체는 콘텐츠대로 유지된다 */
+        rows: number;
+        /** 채우는 순서. 'row'(가로 우선: 0,1,2 / 3,4,5) · 'col'(세로 우선: 0,1 / 2,3). 기본 'row' */
+        fill?: 'row' | 'col';
+    };
     /** 슬라이드 사이 간격(Tailwind gap 단위 px). 기본 16 */
     gap?: number;
     className?: string;
@@ -41,7 +49,7 @@ export interface LDCarouselProps {
  * 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
  */
 declare const LDCarousel: {
-    ({ slides, orientation, loop, autoplay, autoScroll, align, containScroll, options, arrowPosition, showDots, showCounter, slidesPerView, gap, className, style, viewportClassName, slideClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
+    ({ slides, orientation, loop, autoplay, autoScroll, align, containScroll, options, arrowPosition, showDots, showCounter, slidesPerView, grid, gap, className, style, viewportClassName, slideClassName, }: LDCarouselProps): import("react/jsx-runtime").JSX.Element;
     Root: ({ orientation, loop, autoplay, autoScroll, align, containScroll, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Viewport: ({ className, children }: import("./CarouselBase.js").ViewportProps) => import("react/jsx-runtime").JSX.Element;
     Container: ({ className, style, children }: import("./CarouselBase.js").ContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LDCarousel/LDCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;+EAC2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;yMAkBb,eAAe;;;;;;;;;;CAyDjB,CAAC;AAYF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"LDCarousel.d.ts","sourceRoot":"","sources":["../../../src/components/LDCarousel/LDCarousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,8FAA8F;IAC9F,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C;+EAC2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,mCAAmC;IACnC,IAAI,CAAC,EAAE;QACL;8DACsD;QACtD,IAAI,EAAE,MAAM,CAAC;QACb,8EAA8E;QAC9E,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;KACtB,CAAC;IACF,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;GAGG;AACH,QAAA,MAAM,UAAU;+MAmBb,eAAe;;;;;;;;;;CAyFjB,CAAC;AAYF,eAAe,UAAU,CAAC"}

package/dist/components/LDCarousel/LDCarousel.js

@@ -1,15 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
 import CarouselBase from './CarouselBase.js';
 import cn from '../../utils/cn.js';
 /**
  * embla-carousel 기반 기본 캐러셀.
  * 고급 커스터마이징이 필요하면 `LDCarousel.Root` 등 compound API를 직접 조합하세요.
  */
-const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, arrowPosition = 'top', showDots = false, showCounter = false, slidesPerView = 'auto', gap = 16, className, style, viewportClassName, slideClassName, }) => {
+const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', containScroll = 'trimSnaps', options, arrowPosition = 'top', showDots = false, showCounter = false, slidesPerView = 'auto', grid, gap = 16, className, style, viewportClassName, slideClassName, }) => {
     const isVertical = orientation === 'vertical';
-    const total = slides.length;
-    return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, containScroll: containScroll, options: options, gap: gap, className: className, style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [arrowPosition === 'top' && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col'), children: [arrowPosition === 'side' && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: slides.map((slide, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: total, className: slideClassName, children: slide }, i))) }) }), arrowPosition === 'side' && _jsx(CarouselBase.Next, {})] }), (showDots || showCounter) && (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [showDots && (_jsx(CarouselBase.Dots, { className: isVertical ? 'flex-col' : undefined })), showCounter && _jsx(CarouselBase.Counter, {})] }))] }) }));
+    const rows = grid?.rows ?? 1;
+    const columnCount = Math.ceil(slides.length / rows);
+    const columns = rows <= 1
+        ? slides.map((_, i) => [i])
+        : Array.from({ length: columnCount }, (_, col) => Array.from({ length: rows }, (_, row) => grid?.fill === 'col' ? col * rows + row : row * columnCount + col).filter((i) => i < slides.length));
+    return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, containScroll: containScroll, options: options, gap: gap, className: cn(arrowPosition === 'side' && !isVertical && 'ld-carousel--nav-gutter-x', className), style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [arrowPosition === 'top' && _jsx(CarouselBase.TopArrows, {}), _jsxs("div", { className: cn('flex items-center gap-3 w-full relative', isVertical && 'flex-col', isVertical &&
+                        arrowPosition === 'side' &&
+                        'ld-carousel__nav-clearance-y'), children: [arrowPosition === 'side' && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: columns.map((column, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: columns.length, className: slideClassName, children: rows <= 1 ? (slides[i]) : (_jsx("div", { className: "grid h-full items-start", style: {
+                                            gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+                                            rowGap: gap,
+                                        }, children: column.map((slideIndex) => (_jsx(Fragment, { children: slides[slideIndex] }, slideIndex))) })) }, i))) }) }), arrowPosition === 'side' && _jsx(CarouselBase.Next, {})] }), (showDots || showCounter) && (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [showDots && (_jsx(CarouselBase.Dots, { className: isVertical ? 'flex-col' : undefined })), showCounter && _jsx(CarouselBase.Counter, {})] }))] }) }));
 };
 LDCarousel.Root = CarouselBase.Root;
 LDCarousel.Viewport = CarouselBase.Viewport;

package/dist/index.css

@@ -2144,9 +2144,6 @@
   .border-danger600 {
     border-color: var(--color-danger600);
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
   .border-lb500 {
     border-color: var(--color-lb500);
   }
@@ -2914,6 +2911,9 @@
   .outline-danger600 {
     outline-color: var(--color-danger600);
   }
+  .outline-gray-200 {
+    outline-color: var(--color-gray-200);
+  }
   .outline-lb500 {
     outline-color: var(--color-lb500);
   }
@@ -5402,6 +5402,15 @@
   }
 }
 @layer components {
+  .ld-carousel {
+    --ld-carousel-nav-size: 50px;
+  }
+  .ld-carousel--nav-gutter-x {
+    padding-inline: calc(var(--ld-carousel-nav-size) / 2);
+  }
+  .ld-carousel__nav-clearance-y {
+    margin-block: calc(var(--ld-carousel-nav-size) / 2);
+  }
   .ld-carousel__viewport {
     overflow: hidden;
   }
@@ -5411,43 +5420,53 @@
   .ld-carousel__nav {
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
+    z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
-    background: transparent;
-    z-index: 10;
+    background: var(--color-white);
     cursor: pointer;
-    transition: all 300ms ease-out;
     border-radius: 9999px;
-    width: 32px;
-    height: 32px;
+    flex-shrink: 0;
+    width: var(--ld-carousel-nav-size);
+    height: var(--ld-carousel-nav-size);
+    transition: all 300ms ease-out;
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (max-width: calc(768px - 1px)) {
+    .ld-carousel {
+      --ld-carousel-nav-size: 40px;
+    }
+    .ld-carousel__nav svg {
+      width: 20px;
+      height: 20px;
+    }
   }
   .ld-carousel__nav:disabled {
-    opacity: 0.4;
     cursor: not-allowed;
+    color: var(--color-neutral400);
   }
   .ld-carousel__nav:first-child {
-    left: -1%;
+    left: 0;
+    transform: translate(-50%, -50%);
   }
   .ld-carousel__nav:last-child {
-    right: -1%;
-  }
-  .ld-carousel__nav--vertical {
-    transform: translateX(-50%);
+    right: 0;
+    transform: translate(50%, -50%);
   }
   .ld-carousel__nav--vertical:first-child {
-    top: -1%;
-    bottom: auto;
+    top: 0;
     left: 50%;
     right: auto;
+    transform: translate(-50%, -50%);
   }
   .ld-carousel__nav--vertical:last-child {
     top: auto;
-    bottom: -1%;
+    bottom: 0;
     left: 50%;
     right: auto;
+    transform: translate(-50%, 50%);
   }
 }
 @property --tw-translate-x {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",

package/src/styles/carousel.css

@@ -1,4 +1,16 @@
 @layer components {
+  .ld-carousel {
+    --ld-carousel-nav-size: 50px;
+  }
+
+  .ld-carousel--nav-gutter-x {
+    padding-inline: calc(var(--ld-carousel-nav-size) / 2);
+  }
+
+  .ld-carousel__nav-clearance-y {
+    margin-block: calc(var(--ld-carousel-nav-size) / 2);
+  }
+
   .ld-carousel__viewport {
     overflow: hidden;
   }
@@ -10,48 +22,58 @@
   .ld-carousel__nav {
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
+    z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0;
-    background: transparent;
-    z-index: 10;
+    background: var(--color-white);
     cursor: pointer;
-    transition: all 300ms ease-out;
     border-radius: 9999px;
-    width: 32px;
-    height: 32px;
+    flex-shrink: 0;
+    width: var(--ld-carousel-nav-size);
+    height: var(--ld-carousel-nav-size);
+    transition: all 300ms ease-out;
+    @apply shadow-lg;
+  }
+
+  @variant mobile {
+    .ld-carousel {
+      --ld-carousel-nav-size: 40px;
+    }
+
+    .ld-carousel__nav svg {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   .ld-carousel__nav:disabled {
-    opacity: 0.4;
     cursor: not-allowed;
+    color: var(--color-neutral400);
   }
 
   .ld-carousel__nav:first-child {
-    left: -1%;
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   .ld-carousel__nav:last-child {
-    right: -1%;
-  }
-
-  .ld-carousel__nav--vertical {
-    transform: translateX(-50%);
+    right: 0;
+    transform: translate(50%, -50%);
   }
 
   .ld-carousel__nav--vertical:first-child {
-    top: -1%;
-    bottom: auto;
+    top: 0;
     left: 50%;
     right: auto;
+    transform: translate(-50%, -50%);
   }
 
   .ld-carousel__nav--vertical:last-child {
     top: auto;
-    bottom: -1%;
+    bottom: 0;
     left: 50%;
     right: auto;
+    transform: translate(-50%, 50%);
   }
 }