@semcore/carousel 17.2.3 → 18.0.0-prerelease.0

package/lib/types/Carousel.types.d.ts

@@ -1,8 +1,8 @@
-import type { BoxProps } from '@semcore/base-components';
+import type { NSBox } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales';
 declare namespace NSCarousel {
-    type Props = BoxProps & {
+    type Props = NSBox.Props & {
         /** Index active item */
         index?: number;
         /**
@@ -60,20 +60,20 @@ declare namespace NSCarousel {
         node: HTMLElement;
     };
     namespace Container {
-        type Component = Intergalactic.Component<'div', BoxProps>;
+        type Component = Intergalactic.Component<'div', NSBox.Props>;
     }
     namespace ContentBox {
-        type Component = Intergalactic.Component<'div', BoxProps>;
+        type Component = Intergalactic.Component<'div', NSBox.Props>;
     }
     namespace Indicators {
-        type Props = BoxProps & {
+        type Props = NSBox.Props & {
             items?: NSCarousel.Item[];
             inverted?: boolean;
         };
         type Component = Intergalactic.Component<'div', Props, State>;
     }
     namespace Indicator {
-        type Props = Omit<BoxProps, 'position'> & {
+        type Props = Omit<NSBox.Props, 'position'> & {
             active?: boolean;
             onClick?: () => void;
             inverted?: boolean;
@@ -81,7 +81,7 @@ declare namespace NSCarousel {
         type Component = Intergalactic.Component<'div', Props>;
     }
     namespace Item {
-        type Props = BoxProps & {
+        type Props = NSBox.Props & {
             /** Flag for css cursor
              * @private
              */
@@ -116,7 +116,7 @@ declare namespace NSCarousel {
         type Component = Intergalactic.Component<'div', Props>;
     }
     namespace Prev {
-        type Props = BoxProps & {
+        type Props = NSBox.Props & {
             label?: string;
             inverted?: boolean;
             tabIndex?: number;
@@ -124,7 +124,7 @@ declare namespace NSCarousel {
         type Component = Intergalactic.Component<'div', Props>;
     }
     namespace Next {
-        type Props = BoxProps & {
+        type Props = NSBox.Props & {
             label?: string;
             inverted?: boolean;
             tabIndex?: number;
@@ -160,3 +160,4 @@ export type CarouselIndicatorsProps = NSCarousel.Indicators.Props;
 /** @deprecated It will be removed in v18. */
 export type CarouselIndicatorProps = NSCarousel.Indicator.Props;
 export type { NSCarousel };
+//# sourceMappingURL=Carousel.types.d.ts.map

package/lib/types/Carousel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.types.d.ts","sourceRoot":"","sources":["../../src/Carousel.types.ts"],"names":[],"mappings":"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"}

package/lib/types/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Carousel';
 export * from './Carousel.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,cAAc,kBAAkB,CAAC"}

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -113,3 +113,4 @@ export declare const localizedMessages: {
     };
 };
 export type LocalizedMessages = typeof localizedMessages;
+//# sourceMappingURL=__intergalactic-dynamic-locales.d.ts.map

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"__intergalactic-dynamic-locales.d.ts","sourceRoot":"","sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe7B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,iBAAiB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/carousel",
   "description": "Semrush Carousel Component",
-  "version": "17.2.3",
+  "version": "18.0.0-prerelease.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,12 +14,12 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/button": "^17.2.1",
-    "@semcore/modal": "^17.2.2"
+    "@semcore/button": "^18.0.0-prerelease.0",
+    "@semcore/modal": "^18.0.0-prerelease.0"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^17.2.1",
-    "@semcore/icon": "^17.2.0"
+    "@semcore/base-components": "^18.0.0-prerelease.0",
+    "@semcore/icon": "^18.0.0-prerelease.0"
   },
   "repository": {
     "type": "git",
@@ -27,10 +27,10 @@
     "directory": "semcore/carousel"
   },
   "devDependencies": {
-    "@semcore/base-components": "17.2.1",
-    "@semcore/core": "17.2.1",
+    "@semcore/core": "18.0.0-prerelease.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/icon": "17.2.0"
+    "@semcore/base-components": "18.0.0-prerelease.0",
+    "@semcore/icon": "18.0.0-prerelease.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"

package/src/Carousel.tsx

@@ -1,5 +1,5 @@
 import { createBreakpoints, Box, Flex } from '@semcore/base-components';
-import type { BoxProps } from '@semcore/base-components';
+import type { NSBox } from '@semcore/base-components';
 import Button from '@semcore/button';
 import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';

package/src/Carousel.types.ts

@@ -1,10 +1,10 @@
-import type { BoxProps } from '@semcore/base-components';
+import type { NSBox } from '@semcore/base-components';
 import type { PropGetterFn, Intergalactic } from '@semcore/core';
 
 import type { LocalizedMessages } from './translations/__intergalactic-dynamic-locales';
 
 declare namespace NSCarousel {
-  type Props = BoxProps & {
+  type Props = NSBox.Props & {
     /** Index active item */
     index?: number;
     /**
@@ -63,15 +63,15 @@ declare namespace NSCarousel {
   };
 
   namespace Container {
-    type Component = Intergalactic.Component<'div', BoxProps>;
+    type Component = Intergalactic.Component<'div', NSBox.Props>;
   }
 
   namespace ContentBox {
-    type Component = Intergalactic.Component<'div', BoxProps>;
+    type Component = Intergalactic.Component<'div', NSBox.Props>;
   }
 
   namespace Indicators {
-    type Props = BoxProps & {
+    type Props = NSBox.Props & {
       items?: NSCarousel.Item[];
       inverted?: boolean;
     };
@@ -79,7 +79,7 @@ declare namespace NSCarousel {
   }
 
   namespace Indicator {
-    type Props = Omit<BoxProps, 'position'> & {
+    type Props = Omit<NSBox.Props, 'position'> & {
       active?: boolean;
       onClick?: () => void;
       inverted?: boolean;
@@ -88,7 +88,7 @@ declare namespace NSCarousel {
   }
 
   namespace Item {
-    type Props = BoxProps & {
+    type Props = NSBox.Props & {
       /** Flag for css cursor
        * @private
        */
@@ -131,7 +131,7 @@ declare namespace NSCarousel {
   }
 
   namespace Prev {
-    type Props = BoxProps & {
+    type Props = NSBox.Props & {
       label?: string;
       inverted?: boolean;
       tabIndex?: number;
@@ -140,7 +140,7 @@ declare namespace NSCarousel {
   }
 
   namespace Next {
-    type Props = BoxProps & {
+    type Props = NSBox.Props & {
       label?: string;
       inverted?: boolean;
       tabIndex?: number;

package/src/style/carousel.shadow.css

@@ -15,7 +15,7 @@ SModalBox,
 SIndicator {
   position: relative;
   overflow: hidden;
-  border-radius: var(--intergalactic-surface-rounded, 8px);
+  border-radius: var(--intergalactic-carousel-item-rounded, 14px);
 }
 
 SContentBox:has(SItem:focus-visible)::after {
@@ -29,7 +29,7 @@ SContentBox:has(SItem:focus-visible)::after {
 
 SImageBoxContainer {
   position: relative;
-  border-radius: var(--intergalactic-surface-rounded, 8px);
+  border-radius: var(--intergalactic-carousel-item-preview-rounded, 14px);
 
   &:has(SItem:focus-visible)::after {
     border-radius: inherit;
@@ -56,7 +56,7 @@ SItem {
   max-width: 100%;
   box-sizing: border-box;
   transform: var(--transform);
-  border-radius: var(--intergalactic-surface-rounded, 8px);
+  border-radius: var(--intergalactic-carousel-item-rounded, 14px);
   overflow: hidden;
   outline: none;
 
@@ -76,38 +76,60 @@ SItem[zoomOut] {
 SIndicators {
   display: flex;
   justify-content: center;
-  margin: var(--intergalactic-spacing-4x, 16px) 4px 4px 4px;
+  margin: var(--intergalactic-spacing-content-gap-xxlarge, 16px) var(--intergalactic-spacing-content-gap-small, 4px) var(--intergalactic-spacing-content-gap-small, 4px) var(--intergalactic-spacing-content-gap-small, 4px);
   outline: none;
   position: relative;
+  border-radius: var(--intergalactic-rounded-extra-small, 2px);
 }
 
 SIndicator {
-  margin: 0 calc(0.5 * var(--intergalactic-spacing-3x, 12px));
+  margin: 0 calc(0.5 * var(--intergalactic-spacing-content-gap-xlarge, 12px));
   cursor: pointer;
   display: block;
+  flex-shrink: 0;
   width: 12px;
   height: 12px;
-  background-color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
-  opacity: var(--intergalactic-disabled-opacity, 0.4);
+  background-color: var(--intergalactic-control-carousel-indicator, oklch(0.23 0.01 140));
+  border-radius: var(--intergalactic-carousel-indicator-rounded, 8px);
+  opacity: 0.25;
   object-fit: cover;
-  transition: ease-in-out opacity 0.1s;
+  transition:
+    width calc(var(--intergalactic-duration-control, 200) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    opacity calc(var(--intergalactic-duration-control, 200) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09)),
+    background-color calc(var(--intergalactic-duration-control, 200) * 1ms) var(--intergalactic-easings-medium, cubic-bezier(0.5, 0, 0, 1.09));
+
+  &:hover {
+    opacity: 0.5;
+  }
+
+  &[active] {
+    width: 24px;
+    background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 140));
+    opacity: 1;
+  }
 }
 
 SIndicator[aria-roledescription="slide"] {
   width: 100px;
   height: 100px;
-}
-
-SIndicator:hover {
-  opacity: calc(2 * var(--intergalactic-disabled-opacity, 0.4));
-}
 
-SIndicator[active] {
-  opacity: 1;
+  &[active] {
+    width: 100px;
+  }
 }
 
 SIndicator[inverted] {
-  background-color: var(--intergalactic-icon-primary-invert, oklch(0.998 0.003 173.3 / 0.808));
+  background-color: var(--intergalactic-control-carousel-indicator-invert, oklch(1 0 0));
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 0.75;
+  }
+
+  &[active] {
+    background-color: var(--intergalactic-control-carousel-indicator-active, oklch(0.23 0.01 140));
+    opacity: 1;
+  }
 }
 
 SPrev,
@@ -120,17 +142,17 @@ SNext {
 
   SPrevButton span:has(> svg:only-child),
   SNextButton span:has(> svg:only-child) {
-    margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
-    margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
+    margin-left: calc(2 * var(--intergalactic-spacing-content-gap-small, 4px) - 1px);
+    margin-right: calc(2 * var(--intergalactic-spacing-content-gap-small, 4px) - 1px);
   }
 }
 
 SPrev {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SNext {
-  margin-left: var(--intergalactic-spacing-2x, 8px);
+  margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SPrev[disabled],
@@ -144,4 +166,8 @@ SNext[disabled] {
   SContainer {
     transition: none;
   }
+
+  SIndicator {
+    transition: none;
+  }
 }