@loword/loword-design-system 0.0.15 → 0.0.16

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,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;;;;;;;;;;CAsFjB,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

@@ -14,11 +14,9 @@ const LDCarousel = ({ slides, orientation = 'horizontal', loop = false, autoplay
     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: 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: columns.map((column, i) => (_jsx(CarouselBase.Slide, { slidesPerView: slidesPerView, index: i, total: columns.length, className: slideClassName, children: rows <= 1 ? (slides[i]) : (
-                                    // 행 트랙을 균등 분할해야 열이 달라도 같은 행이 같은 선상에서 시작한다.
-                                    // (슬라이드끼리는 flex stretch로 이미 높이가 같음)
-                                    // items-start: 위치만 맞추고 카드 높이는 콘텐츠대로 둔다.
-                                    _jsx("div", { className: "grid h-full items-start", style: {
+    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, {})] }))] }) }));

package/dist/index.css

@@ -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;
   }
@@ -5409,6 +5418,9 @@
     height: 100%;
   }
   .ld-carousel__nav {
+    position: absolute;
+    top: 50%;
+    z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -5416,16 +5428,15 @@
     cursor: pointer;
     border-radius: 9999px;
     flex-shrink: 0;
-    width: 50px;
-    height: 50px;
+    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__nav {
-      width: 40px;
-      height: 40px;
+    .ld-carousel {
+      --ld-carousel-nav-size: 40px;
     }
     .ld-carousel__nav svg {
       width: 20px;
@@ -5433,29 +5444,29 @@
     }
   }
   .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.15",
+  "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;
   }
@@ -8,6 +20,9 @@
   }
 
   .ld-carousel__nav {
+    position: absolute;
+    top: 50%;
+    z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,16 +30,15 @@
     cursor: pointer;
     border-radius: 9999px;
     flex-shrink: 0;
-    width: 50px;
-    height: 50px;
+    width: var(--ld-carousel-nav-size);
+    height: var(--ld-carousel-nav-size);
     transition: all 300ms ease-out;
     @apply shadow-lg;
   }
 
   @variant mobile {
-    .ld-carousel__nav {
-      width: 40px;
-      height: 40px;
+    .ld-carousel {
+      --ld-carousel-nav-size: 40px;
     }
 
     .ld-carousel__nav svg {
@@ -34,33 +48,32 @@
   }
 
   .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%);
   }
 }