@max-ts/kit 1.3.2 → 1.4.1

package/lib/components/Carousel/Buttons/Buttons.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
-export declare function Buttons({ className, ...props }: ComponentProps<'button'>): import("react").JSX.Element;
+export declare function Arrows({ className, ...props }: ComponentProps<'button'>): import("react").JSX.Element;
 //# sourceMappingURL=Buttons.d.ts.map

package/lib/components/Carousel/Buttons/Buttons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Buttons/Buttons.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAiCxE"}
+{"version":3,"file":"Buttons.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Buttons/Buttons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,QAAQ,CAAC,+BAwCvE"}

package/lib/components/Carousel/Buttons/styles.css.d.ts

@@ -1,4 +1,4 @@
-export declare const next: string;
-export declare const prev: string;
-export declare const orientations: Record<"horizontal" | "vertical", string>;
+export declare const iconWrapper: string;
+export declare const buttonNext: Record<"horizontal" | "vertical", string>;
+export declare const buttonPrev: Record<"horizontal" | "vertical", string>;
 //# sourceMappingURL=styles.css.d.ts.map

package/lib/components/Carousel/Buttons/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Buttons/styles.css.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,YAAY,2CASvB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Buttons/styles.css.ts"],"names":[],"mappings":"AAkBA,eAAO,MAAM,WAAW,QActB,CAAC;AAOH,eAAO,MAAM,UAAU,2CAmBrB,CAAC;AAEH,eAAO,MAAM,UAAU,2CAmBrB,CAAC"}

package/lib/components/Carousel/Carousel.d.ts

@@ -1,18 +1,16 @@
-import type { CSSProperties } from 'react';
-import type { CarouselApi, CarouselOptions, CarouselPlugin } from './types';
-export type CarouselProps<TData> = {
-    opts?: CarouselOptions;
-    plugins?: CarouselPlugin;
-    orientation?: 'horizontal' | 'vertical';
-    setApi?: (api: CarouselApi) => void;
-    className?: string;
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    data: TData[];
-    keyId: keyof TData;
-    showDots?: boolean;
-    showArrows?: boolean;
-    renderItem: (item: TData) => React.ReactNode;
+import type { ComponentProps } from 'react';
+import type { CarouselAlign, CarouselApi, CarouselOrientation } from './types';
+export type CarouselProps = ComponentProps<'section'> & {
+    align?: CarouselAlign;
+    orientation?: CarouselOrientation;
+    setApi?: (api: CarouselApi | undefined) => void;
 };
-export declare function Carousel<TData>({ width, height, ...props }: CarouselProps<TData>): import("react").JSX.Element;
+declare function Carousel({ align, children, className, orientation: orientationProp, setApi, ...props }: CarouselProps): import("react").JSX.Element;
+declare namespace Carousel {
+    var Content: typeof import("./Content").Content;
+    var Item: typeof import("./Item").Item;
+    var Arrows: typeof import("./Buttons").Arrows;
+    var Dots: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+}
+export { Carousel };
 //# sourceMappingURL=Carousel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAO3C,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG5E,MAAM,MAAM,aAAa,CAAC,KAAK,IAAI;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,KAAK,EAAE,MAAM,KAAK,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7C,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAC/B,KAAc,EACd,MAAe,EACf,GAAG,KAAK,EACR,EAAE,aAAa,CAAC,KAAK,CAAC,+BAsDtB"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAO5C,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG/E,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,SAAS,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,iBAAS,QAAQ,CAAC,EACjB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EAAE,eAAe,EAC5B,MAAM,EACN,GAAG,KAAK,EACR,EAAE,aAAa,+BAkCf;kBAzCQ,QAAQ;;;;;;AAgDjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/Carousel/CarouselContext.d.ts

@@ -1,11 +1,9 @@
-import type { EmblaViewportRefType } from 'embla-carousel-react';
 import React from 'react';
-import type { CarouselApi, CarouselOptions } from './types';
+import type { CarouselApi, CarouselOrientation } from './types';
 type CarouselContextProps = {
-    carouselRef: EmblaViewportRefType;
+    carouselRef: (node: HTMLDivElement | null) => void;
     api: CarouselApi;
-    opts: CarouselOptions;
-    orientation: 'horizontal' | 'vertical';
+    orientation: CarouselOrientation;
     scrollPrev: () => void;
     scrollNext: () => void;
     canScrollPrev: boolean;

package/lib/components/Carousel/CarouselContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE5D,KAAK,oBAAoB,GAAG;IAC3B,WAAW,EAAE,oBAAoB,CAAC;IAClC,GAAG,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,4CAE3B,CAAC;AAEF,wBAAgB,WAAW,yBAQ1B"}
+{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEhE,KAAK,oBAAoB,GAAG;IAC3B,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,GAAG,EAAE,WAAW,CAAC;IACjB,WAAW,EAAE,mBAAmB,CAAC;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,4CAE3B,CAAC;AAEF,wBAAgB,WAAW,yBAQ1B"}

package/lib/components/Carousel/Content/Content.d.ts

@@ -1,2 +1,3 @@
-export declare function Content(props: React.ComponentProps<'div'>): import("react").JSX.Element;
+import type { ComponentProps } from 'react';
+export declare function Content({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 //# sourceMappingURL=Content.d.ts.map

package/lib/components/Carousel/Content/Content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Content/Content.tsx"],"names":[],"mappings":"AAGA,wBAAgB,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAYzD"}
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Content/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAgBrE"}

package/lib/components/Carousel/Content/styles.css.d.ts

@@ -1,3 +1,3 @@
-export declare const wrapper: string;
+export declare const content: string;
 export declare const orientations: Record<"horizontal" | "vertical", string>;
 //# sourceMappingURL=styles.css.d.ts.map

package/lib/components/Carousel/Content/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Content/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,YAAY,2CAUvB,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Content/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,QAalB,CAAC;AAEH,eAAO,MAAM,YAAY,2CAmBvB,CAAC"}

package/lib/components/Carousel/Dots/Dots.d.ts

@@ -1,6 +1,3 @@
-import type { CarouselApi } from '../types';
-export declare const Dots: ({ api, orientation, }: {
-    api: CarouselApi;
-    orientation: "horizontal" | "vertical";
-}) => import("react").JSX.Element;
+import type { ComponentProps } from 'react';
+export declare const Dots: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
 //# sourceMappingURL=Dots.d.ts.map

package/lib/components/Carousel/Dots/Dots.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dots.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Dots/Dots.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,eAAO,MAAM,IAAI,GAAI,uBAGlB;IACF,GAAG,EAAE,WAAW,CAAC;IACjB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,gCAgBA,CAAC"}
+{"version":3,"file":"Dots.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Dots/Dots.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,eAAO,MAAM,IAAI,GAAI,yBAAyB,cAAc,CAAC,KAAK,CAAC,gCAkBlE,CAAC"}

package/lib/components/Carousel/Dots/useLogic/useLogic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../../src/components/Carousel/Dots/useLogic/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,eAAO,MAAM,QAAQ,GAAI,KAAK,WAAW;;;8BAK/B,MAAM;CA8Bf,CAAC"}
+{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../../src/components/Carousel/Dots/useLogic/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,eAAO,MAAM,QAAQ,GAAI,KAAK,WAAW;;;8BAK/B,MAAM;CA6Bf,CAAC"}

package/lib/components/Carousel/Item/Item.d.ts

@@ -1,2 +1,3 @@
-export declare function Item(props: React.ComponentProps<'div'>): import("react").JSX.Element;
+import type { ComponentProps } from 'react';
+export declare function Item({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
 //# sourceMappingURL=Item.d.ts.map

package/lib/components/Carousel/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Item/Item.tsx"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAUtD"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Item/Item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAclE"}

package/lib/components/Carousel/Item/styles.css.d.ts

@@ -1,2 +1,3 @@
 export declare const item: string;
+export declare const orientations: Record<"horizontal" | "vertical", string>;
 //# sourceMappingURL=styles.css.d.ts.map

package/lib/components/Carousel/Item/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Item/styles.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAKf,CAAC"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/Item/styles.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,YAAY,2CASvB,CAAC"}

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

@@ -1,7 +1,17 @@
-import type useEmblaCarousel from 'embla-carousel-react';
-import type { UseEmblaCarouselType } from 'embla-carousel-react';
-export type CarouselApi = UseEmblaCarouselType[1];
-export type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-export type CarouselOptions = UseCarouselParameters[0];
-export type CarouselPlugin = UseCarouselParameters[1];
+export type CarouselAlign = 'start' | 'center' | 'end';
+export type CarouselOrientation = 'horizontal' | 'vertical';
+export type CarouselEventName = 'reInit' | 'select';
+export type CarouselEventCallback = (api: CarouselApi) => void;
+export type CarouselApi = {
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    canScrollNext: () => boolean;
+    canScrollPrev: () => boolean;
+    selectedScrollSnap: () => number;
+    scrollSnapList: () => number[];
+    on: (event: CarouselEventName, callback: CarouselEventCallback) => CarouselApi;
+    off: (event: CarouselEventName, callback: CarouselEventCallback) => CarouselApi;
+    reInit: () => void;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAClD,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACxE,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE5D,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;AAE/D,MAAM,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,aAAa,EAAE,MAAM,OAAO,CAAC;IAC7B,kBAAkB,EAAE,MAAM,MAAM,CAAC;IACjC,cAAc,EAAE,MAAM,MAAM,EAAE,CAAC;IAC/B,EAAE,EAAE,CACH,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,qBAAqB,KAC3B,WAAW,CAAC;IACjB,GAAG,EAAE,CACJ,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,qBAAqB,KAC3B,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC"}

package/lib/components/Carousel/useLogic/useLogic.d.ts

@@ -1,20 +1,20 @@
-import type { CarouselProps } from '../Carousel';
-import type { CarouselApi, CarouselOptions } from '../types';
-type UseLogicReturn<TData> = {
-    carouselRef: (emblaRoot: HTMLElement | null) => void;
-    api: CarouselApi | undefined;
+import { type KeyboardEvent } from 'react';
+import type { CarouselAlign, CarouselApi, CarouselOrientation } from '../types';
+type UseLogicProps = {
+    align?: CarouselAlign;
+    orientation?: CarouselOrientation;
+    setApi?: (api: CarouselApi | undefined) => void;
+};
+type UseLogicReturn = {
+    carouselRef: (node: HTMLDivElement | null) => void;
+    api: CarouselApi;
     scrollPrev: () => void;
     scrollNext: () => void;
     canScrollPrev: boolean;
     canScrollNext: boolean;
-    handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    opts: CarouselOptions | undefined;
-    orientation: 'horizontal' | 'vertical';
-    onDotButtonClick: (index: number) => void;
-    isShowButtons: boolean;
-    isShowDots: boolean;
-    data: TData[];
+    handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+    orientation: CarouselOrientation;
 };
-export declare const useLogic: <TData>({ orientation, opts, setApi, plugins, data, showDots, showArrows, }: CarouselProps<TData>) => UseLogicReturn<TData>;
+export declare const useLogic: ({ orientation, align, setApi, }: UseLogicProps) => UseLogicReturn;
 export {};
 //# sourceMappingURL=useLogic.d.ts.map

package/lib/components/Carousel/useLogic/useLogic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/useLogic/useLogic.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,cAAc,CAAC,KAAK,IAAI;IAC5B,WAAW,EAAE,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACpE,IAAI,EAAE,eAAe,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,KAAK,EAAE,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,KAAK,EAAE,qEAQ7B,aAAa,CAAC,KAAK,CAAC,KAAG,cAAc,CAAC,KAAK,CAiF7C,CAAC"}
+{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../../src/components/Carousel/useLogic/useLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,aAAa,EAMlB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACX,aAAa,EACb,WAAW,EAGX,mBAAmB,EACnB,MAAM,UAAU,CAAC;AAElB,KAAK,aAAa,GAAG;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,cAAc,GAAG;IACrB,WAAW,EAAE,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,GAAG,EAAE,WAAW,CAAC;IACjB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,WAAW,EAAE,mBAAmB,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,QAAQ,GAAI,iCAItB,aAAa,KAAG,cAuQlB,CAAC"}

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Accordion, Checkbox } from "@base-ui/react";
 import clsx_0, { clsx } from "clsx";
-import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
+import { ArrowDownNarrowWide, ArrowDownUp, ArrowDownWideNarrow, ArrowLeft, ArrowRight, Calendar1, Check, CheckIcon, ChevronDown, ChevronDownIcon, ChevronLeft, ChevronRight, ChevronRightIcon, ChevronUp, CircleCheck, CircleIcon, Copy, Ellipsis as external_lucide_react_Ellipsis, EllipsisVertical, Info, MoreHorizontalIcon, OctagonAlert, PanelLeftIcon, TriangleAlert, XIcon } from "lucide-react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Button } from "@base-ui/react/button";
 import react, { createContext, createElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -12,7 +12,6 @@ import { useRender } from "@base-ui/react/use-render";
 import { Separator as separator_Separator } from "@base-ui/react/separator";
 import { DayPicker } from "react-day-picker";
 import { ru } from "react-day-picker/locale";
-import embla_carousel_react from "embla-carousel-react";
 import { Collapsible } from "@base-ui/react/collapsible";
 import { Popover } from "@base-ui/react/popover";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -1209,52 +1208,62 @@ function useCarousel() {
     if (!context) throw new Error('useCarousel must be used within a <Carousel />');
     return context;
 }
-var next = 'style__2d6ocq1 style__2d6ocq0';
-var orientations = {
-    horizontal: 'horizontal__2d6ocq3',
-    vertical: 'vertical__2d6ocq4'
+var buttonNext = {
+    horizontal: 'horizontal__2d6ocq2 style__2d6ocq0',
+    vertical: 'vertical__2d6ocq3 style__2d6ocq0'
+};
+var buttonPrev = {
+    horizontal: 'horizontal__2d6ocq4 style__2d6ocq0',
+    vertical: 'vertical__2d6ocq5 style__2d6ocq0'
 };
-var prev = 'style__2d6ocq2 style__2d6ocq0';
-function Buttons({ className, ...props }) {
+var iconWrapper = 'style__2d6ocq1';
+function Arrows({ className, ...props }) {
     const { orientation = 'horizontal', canScrollNext, scrollNext, canScrollPrev, scrollPrev } = useCarousel();
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("button", {
-                className: clsx(next, orientations[orientation]),
+                className: clsx(buttonPrev[orientation], className),
                 type: "button",
-                "data-slot": "carousel-next",
-                disabled: !canScrollNext,
-                onClick: scrollNext,
+                "data-slot": "carousel-previous",
+                "aria-label": "Previous slide",
+                disabled: !canScrollPrev,
+                onClick: scrollPrev,
                 ...props,
-                children: 'horizontal' === orientation ? /*#__PURE__*/ jsx(ChevronRight, {}) : /*#__PURE__*/ jsx(ChevronDown, {})
+                children: /*#__PURE__*/ jsx("span", {
+                    className: iconWrapper,
+                    children: /*#__PURE__*/ jsx(ArrowLeft, {})
+                })
             }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
-                className: clsx(prev, orientations[orientation]),
-                "data-slot": "carousel-previous",
-                disabled: !canScrollPrev,
-                onClick: scrollPrev,
+                className: clsx(buttonNext[orientation], className),
+                "data-slot": "carousel-next",
+                "aria-label": "Next slide",
+                "aria-disabled": !canScrollNext,
+                disabled: !canScrollNext,
+                onClick: scrollNext,
                 ...props,
-                children: 'horizontal' === orientation ? /*#__PURE__*/ jsx(ChevronLeft, {}) : /*#__PURE__*/ jsx(ChevronUp, {})
+                children: /*#__PURE__*/ jsx("span", {
+                    className: iconWrapper,
+                    children: /*#__PURE__*/ jsx(ArrowRight, {})
+                })
             })
         ]
     });
 }
-var styles_css_orientations = {
+var Content_styles_css_content = 'style__i1lems0';
+var orientations = {
     horizontal: 'horizontal__i1lems1',
     vertical: 'vertical__i1lems2'
 };
-var wrapper = 'style__i1lems0';
-function Content_Content(props) {
+function Content_Content({ className, ...props }) {
     const { carouselRef, orientation = 'horizontal' } = useCarousel();
     return /*#__PURE__*/ jsx("div", {
-        className: wrapper,
+        className: clsx(Content_styles_css_content, orientations[orientation], className),
         ref: carouselRef,
         "data-slot": "carousel-content",
-        children: /*#__PURE__*/ jsx("div", {
-            className: styles_css_orientations[orientation],
-            ...props
-        })
+        "data-orientation": orientation,
+        ...props
     });
 }
 var dotButton = {
@@ -1262,7 +1271,7 @@ var dotButton = {
     vertical: 'vertical__e2zpp65 style__e2zpp63'
 };
 var styles_css_selected = 'style__e2zpp66';
-var styles_css_wrapper = {
+var wrapper = {
     horizontal: 'horizontal__e2zpp61 style__e2zpp60',
     vertical: 'vertical__e2zpp62 style__e2zpp60'
 };
@@ -1270,24 +1279,23 @@ const useLogic = (api)=>{
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [scrollSnaps, setScrollSnaps] = useState([]);
     const onDotButtonClick = useCallback((index)=>{
-        if (!api) return;
         api.scrollTo(index);
     }, [
         api
     ]);
     const onInit = useCallback((api)=>{
-        if (!api) return;
         setScrollSnaps(api.scrollSnapList());
     }, []);
     const onSelect = useCallback((api)=>{
-        if (!api) return;
         setSelectedIndex(api.selectedScrollSnap());
     }, []);
     useEffect(()=>{
-        if (!api) return;
         onInit(api);
         onSelect(api);
         api.on('reInit', onInit).on('reInit', onSelect).on('select', onSelect);
+        return ()=>{
+            api.off('reInit', onInit).off('reInit', onSelect).off('select', onSelect);
+        };
     }, [
         api,
         onInit,
@@ -1299,12 +1307,15 @@ const useLogic = (api)=>{
         onDotButtonClick
     };
 };
-const Dots = ({ api, orientation })=>{
+const Dots = ({ className, ...props })=>{
+    const { api, orientation } = useCarousel();
     const { selectedIndex, scrollSnaps, onDotButtonClick } = useLogic(api);
     return /*#__PURE__*/ jsx("div", {
-        className: styles_css_wrapper[orientation],
+        className: clsx(wrapper[orientation], className),
+        ...props,
         children: scrollSnaps.map((number, index)=>/*#__PURE__*/ jsx("button", {
                 type: "button",
+                "aria-label": "Carousel Dots",
                 className: clsx(dotButton[orientation], {
                     [styles_css_selected]: index === selectedIndex
                 }),
@@ -1313,51 +1324,221 @@ const Dots = ({ api, orientation })=>{
     });
 };
 var Item_styles_css_item = 'style__1gif6yr0';
-function Item_Item(props) {
+var styles_css_orientations = {
+    horizontal: 'horizontal__1gif6yr1',
+    vertical: 'vertical__1gif6yr2'
+};
+function Item_Item({ className, ...props }) {
+    const { orientation = 'horizontal' } = useCarousel();
     return /*#__PURE__*/ jsx("div", {
-        className: Item_styles_css_item,
-        role: "presentation",
+        className: clsx(Item_styles_css_item, styles_css_orientations[orientation], className),
+        role: "group",
         "aria-roledescription": "slide",
+        "data-orientation": orientation,
         "data-slot": "carousel-item",
         ...props
     });
 }
 var styles_css_rootClass = 'Carousel__1jbydv50';
-const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins, data, showDots, showArrows })=>{
-    const [carouselRef, api] = embla_carousel_react({
-        ...opts,
-        axis: 'horizontal' === orientation ? 'x' : 'y'
-    }, plugins);
+const useLogic_useLogic = ({ orientation = 'horizontal', align = 'center', setApi })=>{
+    const resolvedOrientation = orientation;
+    const resolvedAlign = align;
+    const viewportRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const mutationObserverRef = useRef(null);
+    const observedSlidesRef = useRef([]);
+    const orientationRef = useRef(resolvedOrientation);
+    const alignRef = useRef(resolvedAlign);
+    const selectedIndexRef = useRef(0);
+    const canScrollPrevRef = useRef(false);
+    const canScrollNextRef = useRef(false);
+    const scrollSnapsRef = useRef([]);
+    const listenersRef = useRef({
+        reInit: new Set(),
+        select: new Set()
+    });
     const [canScrollPrev, setCanScrollPrev] = useState(false);
     const [canScrollNext, setCanScrollNext] = useState(false);
-    const isShowButtons = Boolean(showArrows && data.length > 1);
-    const isShowDots = Boolean(showDots && data.length > 1);
-    const onSelect = useCallback((api)=>{
-        if (!api) return;
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
+    const getSlides = useCallback(()=>{
+        if (!viewportRef.current) return [];
+        return Array.from(viewportRef.current.querySelectorAll('[data-slot="carousel-item"]'));
     }, []);
-    const onDotButtonClick = useCallback((index)=>{
-        if (!api) return;
-        api.scrollTo(index);
+    const getTargetFor = useCallback((index)=>{
+        const viewport = viewportRef.current;
+        if (!viewport) return 0;
+        const slide = getSlides()[index];
+        if (!slide) return 0;
+        const isHorizontal = 'horizontal' === orientationRef.current;
+        const viewportSize = isHorizontal ? viewport.clientWidth : viewport.clientHeight;
+        const slideSize = isHorizontal ? slide.offsetWidth : slide.offsetHeight;
+        const slideStart = isHorizontal ? slide.offsetLeft : slide.offsetTop;
+        let target = slideStart;
+        if ('center' === alignRef.current) target = slideStart - (viewportSize - slideSize) / 2;
+        else if ('end' === alignRef.current) target = slideStart - (viewportSize - slideSize);
+        const max = isHorizontal ? viewport.scrollWidth - viewport.clientWidth : viewport.scrollHeight - viewport.clientHeight;
+        return Math.max(0, Math.min(target, Math.max(0, max)));
     }, [
-        api
+        getSlides
+    ]);
+    const emit = useCallback((event, api)=>{
+        for (const callback of listenersRef.current[event])callback(api);
+    }, []);
+    const rebindSlideObservers = useCallback(()=>{
+        const resizeObserver = resizeObserverRef.current;
+        if (!resizeObserver) return;
+        for (const slide of observedSlidesRef.current)resizeObserver.unobserve(slide);
+        observedSlidesRef.current = getSlides();
+        for (const slide of observedSlidesRef.current)resizeObserver.observe(slide);
+    }, [
+        getSlides
+    ]);
+    const api = useMemo(()=>{
+        const carouselApi = {
+            scrollPrev: ()=>{
+                carouselApi.scrollTo(Math.max(0, selectedIndexRef.current - 1));
+            },
+            scrollNext: ()=>{
+                const lastIndex = getSlides().length - 1;
+                if (lastIndex < 0) return;
+                carouselApi.scrollTo(Math.min(lastIndex, selectedIndexRef.current + 1));
+            },
+            scrollTo: (index, jump = false)=>{
+                const viewport = viewportRef.current;
+                if (!viewport) return;
+                const target = getTargetFor(index);
+                viewport.scrollTo('horizontal' === orientationRef.current ? {
+                    left: target,
+                    behavior: jump ? 'auto' : 'smooth'
+                } : {
+                    top: target,
+                    behavior: jump ? 'auto' : 'smooth'
+                });
+            },
+            canScrollNext: ()=>canScrollNextRef.current,
+            canScrollPrev: ()=>canScrollPrevRef.current,
+            selectedScrollSnap: ()=>selectedIndexRef.current,
+            scrollSnapList: ()=>scrollSnapsRef.current,
+            on: (event, callback)=>{
+                listenersRef.current[event].add(callback);
+                return carouselApi;
+            },
+            off: (event, callback)=>{
+                listenersRef.current[event].delete(callback);
+                return carouselApi;
+            },
+            reInit: ()=>{
+                rebindSlideObservers();
+                const slides = getSlides();
+                scrollSnapsRef.current = slides.map((_, index)=>getTargetFor(index));
+                emit('reInit', carouselApi);
+                emit('select', carouselApi);
+            }
+        };
+        return carouselApi;
+    }, [
+        emit,
+        getSlides,
+        getTargetFor,
+        rebindSlideObservers
+    ]);
+    const refresh = useCallback(()=>{
+        const viewport = viewportRef.current;
+        const slides = getSlides();
+        const scrollSnaps = slides.map((_, index)=>getTargetFor(index));
+        scrollSnapsRef.current = scrollSnaps;
+        if (!viewport || 0 === slides.length) {
+            selectedIndexRef.current = 0;
+            canScrollPrevRef.current = false;
+            canScrollNextRef.current = false;
+            setCanScrollPrev(false);
+            setCanScrollNext(false);
+            emit('select', api);
+            return;
+        }
+        const scrollPosition = 'horizontal' === orientationRef.current ? viewport.scrollLeft : viewport.scrollTop;
+        let nearestIndex = 0;
+        let nearestDistance = 1 / 0;
+        for(let index = 0; index < scrollSnaps.length; index += 1){
+            const distance = Math.abs(scrollSnaps[index] - scrollPosition);
+            if (distance < nearestDistance) {
+                nearestDistance = distance;
+                nearestIndex = index;
+            }
+        }
+        selectedIndexRef.current = nearestIndex;
+        canScrollPrevRef.current = nearestIndex > 0;
+        canScrollNextRef.current = nearestIndex < slides.length - 1;
+        setCanScrollPrev(canScrollPrevRef.current);
+        setCanScrollNext(canScrollNextRef.current);
+        emit('select', api);
+    }, [
+        api,
+        emit,
+        getSlides,
+        getTargetFor
+    ]);
+    const handleScroll = useCallback(()=>{
+        refresh();
+    }, [
+        refresh
+    ]);
+    const detachViewport = useCallback(()=>{
+        if (viewportRef.current) viewportRef.current.removeEventListener('scroll', handleScroll);
+        resizeObserverRef.current?.disconnect();
+        mutationObserverRef.current?.disconnect();
+        resizeObserverRef.current = null;
+        mutationObserverRef.current = null;
+        observedSlidesRef.current = [];
+    }, [
+        handleScroll
+    ]);
+    const carouselRef = useCallback((node)=>{
+        if (viewportRef.current === node) return;
+        detachViewport();
+        viewportRef.current = node;
+        if (!node) return void refresh();
+        node.addEventListener('scroll', handleScroll, {
+            passive: true
+        });
+        if ("u" > typeof ResizeObserver) {
+            resizeObserverRef.current = new ResizeObserver(refresh);
+            resizeObserverRef.current.observe(node);
+        }
+        if ("u" > typeof MutationObserver) {
+            mutationObserverRef.current = new MutationObserver(()=>{
+                rebindSlideObservers();
+                refresh();
+                api.reInit();
+            });
+            mutationObserverRef.current.observe(node, {
+                childList: true,
+                subtree: false
+            });
+        }
+        rebindSlideObservers();
+        refresh();
+    }, [
+        api,
+        detachViewport,
+        handleScroll,
+        rebindSlideObservers,
+        refresh
     ]);
     const scrollPrev = useCallback(()=>{
-        api?.scrollPrev();
+        api.scrollPrev();
     }, [
         api
     ]);
     const scrollNext = useCallback(()=>{
-        api?.scrollNext();
+        api.scrollNext();
     }, [
         api
     ]);
     const handleKeyDown = useCallback((event)=>{
-        if ('ArrowLeft' === event.key) {
+        if ('ArrowLeft' === event.key || 'ArrowUp' === event.key) {
             event.preventDefault();
             scrollPrev();
-        } else if ('ArrowRight' === event.key) {
+        } else if ('ArrowRight' === event.key || 'ArrowDown' === event.key) {
             event.preventDefault();
             scrollNext();
         }
@@ -1366,23 +1547,25 @@ const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins,
         scrollNext
     ]);
     useEffect(()=>{
-        if (!api || !setApi) return;
-        setApi(api);
+        orientationRef.current = resolvedOrientation;
+        alignRef.current = resolvedAlign;
+        refresh();
+        api.reInit();
     }, [
         api,
-        setApi
+        refresh,
+        resolvedAlign,
+        resolvedOrientation
     ]);
     useEffect(()=>{
-        if (!api) return;
-        onSelect(api);
-        api.on('reInit', onSelect);
-        api.on('select', onSelect);
-        return ()=>{
-            api?.off('select', onSelect);
-        };
+        setApi?.(api);
+        return ()=>setApi?.(void 0);
     }, [
         api,
-        onSelect
+        setApi
+    ]);
+    useEffect(()=>()=>detachViewport(), [
+        detachViewport
     ]);
     return {
         carouselRef,
@@ -1392,54 +1575,38 @@ const useLogic_useLogic = ({ orientation = 'horizontal', opts, setApi, plugins,
         canScrollPrev,
         canScrollNext,
         handleKeyDown,
-        opts,
-        orientation,
-        onDotButtonClick,
-        isShowButtons,
-        isShowDots,
-        data
+        orientation
     };
 };
-function Carousel({ width = '100%', height = '100%', ...props }) {
-    const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, api, opts, orientation, carouselRef, handleKeyDown, data, isShowButtons, isShowDots } = useLogic_useLogic(props);
+function Carousel({ align, children, className, orientation: orientationProp, setApi, ...props }) {
+    const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, api, orientation, carouselRef, handleKeyDown } = useLogic_useLogic({
+        align,
+        orientation: orientationProp,
+        setApi
+    });
     return /*#__PURE__*/ jsx(CarouselContext.Provider, {
         value: {
             carouselRef,
             api,
-            opts,
-            orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+            orientation,
             scrollPrev,
             scrollNext,
             canScrollPrev,
             canScrollNext
         },
-        children: /*#__PURE__*/ jsxs("div", {
+        children: /*#__PURE__*/ jsx("section", {
             onKeyDownCapture: handleKeyDown,
-            className: clsx(styles_css_rootClass, props.className),
+            className: clsx(styles_css_rootClass, className),
             "data-slot": "carousel",
-            style: {
-                width,
-                height
-            },
-            children: [
-                /*#__PURE__*/ jsx(Content_Content, {
-                    style: {
-                        width,
-                        height
-                    },
-                    children: data.map((item)=>/*#__PURE__*/ jsx(Item_Item, {
-                            children: props.renderItem(item)
-                        }, `${item[props.keyId]}`))
-                }),
-                isShowButtons && /*#__PURE__*/ jsx(Buttons, {}),
-                isShowDots && /*#__PURE__*/ jsx(Dots, {
-                    api: api,
-                    orientation: orientation
-                })
-            ]
+            ...props,
+            children: children
         })
     });
 }
+Carousel.Content = Content_Content;
+Carousel.Item = Item_Item;
+Carousel.Arrows = Arrows;
+Carousel.Dots = Dots;
 var checkbox_css_icon = 'style__b7yo4k2';
 var indicator = 'style__b7yo4k1';
 var checkbox_css_root = 'style__b7yo4k0';
@@ -1587,11 +1754,11 @@ var sizes = {
     medium: 'medium__1o97kvm2',
     large: 'large__1o97kvm3'
 };
-var Image_styles_css_wrapper = 'style__1o97kvm0';
+var styles_css_wrapper = 'style__1o97kvm0';
 const Image_Image = (props)=>/*#__PURE__*/ jsx("img", {
         alt: props.alt,
         src: props.src,
-        className: clsx_0(Image_styles_css_wrapper, sizes[props.size || 'medium'], props.className),
+        className: clsx_0(styles_css_wrapper, sizes[props.size || 'medium'], props.className),
         width: props.width,
         height: props.height
     });
@@ -3021,7 +3188,7 @@ var Drawer_styles_css_footer = 'style__ccss508';
 var Drawer_styles_css_header = 'style__ccss507';
 var Drawer_styles_css_overlay = 'style__ccss502';
 var Drawer_styles_css_title = 'style__ccss509';
-var viewport = 'style__ccss503';
+var styles_css_viewport = 'style__ccss503';
 const Drawer_Drawer = ({ children, trigger, className, title, description = '', footer, closeButton, swipeDirection = 'down', ...props })=>/*#__PURE__*/ jsxs(Drawer.Root, {
         swipeDirection: swipeDirection,
         ...props,
@@ -3038,7 +3205,7 @@ const Drawer_Drawer = ({ children, trigger, className, title, description = '',
                         className: Drawer_styles_css_overlay
                     }),
                     /*#__PURE__*/ jsx(Drawer.Viewport, {
-                        className: viewport,
+                        className: styles_css_viewport,
                         children: /*#__PURE__*/ jsx(Drawer.Popup, {
                             "data-slot": "drawer-content",
                             className: clsx('group/drawer-content', Drawer_styles_css_content, className),
@@ -3150,7 +3317,7 @@ var carouselInner = 'style__a5l83v1';
 var ImageCarousel_styles_css_image = 'style__a5l83v3';
 var styles_css_indicator = 'style__a5l83v8';
 var indicators = 'style__a5l83v7';
-var slide = 'style__a5l83v2';
+var styles_css_slide = 'style__a5l83v2';
 const ImageCarousel = ({ images = [], autoPlay = false, interval = 5000 })=>{
     const [currentIndex, setCurrentIndex] = useState(0);
     const goToPrevious = ()=>{
@@ -3186,7 +3353,7 @@ const ImageCarousel = ({ images = [], autoPlay = false, interval = 5000 })=>{
                     transform: `translateX(-${100 * currentIndex}%)`
                 },
                 children: images.map((image, index)=>/*#__PURE__*/ jsx("div", {
-                        className: slide,
+                        className: styles_css_slide,
                         children: /*#__PURE__*/ jsx("img", {
                             src: image.src,
                             alt: image.alt || `Slide ${index + 1}`,
@@ -4122,7 +4289,7 @@ var Select_styles_css_sizes = {
     large: 'large__5ilg7o5'
 };
 var Select_styles_css_trigger = 'style__5ilg7o2';
-var styles_css_viewport = 'style__5ilg7o9';
+var Select_styles_css_viewport = 'style__5ilg7o9';
 const Select_Select = ({ onValueChange, ...props })=>/*#__PURE__*/ jsx(Select.Root, {
         ...props,
         onValueChange: (value, eventDetails)=>{
@@ -4175,7 +4342,7 @@ const SelectContent = ({ className, children, side = 'bottom', sideOffset = 4, a
                 children: [
                     /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
                     /*#__PURE__*/ jsx(Select.List, {
-                        className: styles_css_viewport,
+                        className: Select_styles_css_viewport,
                         children: children
                     }),
                     /*#__PURE__*/ jsx(SelectScrollDownButton, {})

package/lib/stories/Carousel.stories.d.ts

@@ -9,5 +9,6 @@ declare const _default: {
 };
 export default _default;
 export declare function Demo(): import("react").JSX.Element;
+export declare function StartAligned(): import("react").JSX.Element;
 export declare function Vertical(): import("react").JSX.Element;
 //# sourceMappingURL=Carousel.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Carousel.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAE9C,wBAOkC;AAElC,wBAAgB,IAAI,gCAiDnB;AAED,wBAAgB,QAAQ,gCAqDvB"}
+{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Carousel.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAE9C,wBAOkC;AAElC,wBAAgB,IAAI,gCAkDnB;AAED,wBAAgB,YAAY,gCAkD3B;AAED,wBAAgB,QAAQ,gCAoDvB"}

package/lib/styles.css

@@ -1916,61 +1916,104 @@ a.outline__1af895x4:hover {
 }
 
 .style__2d6ocq0 {
-  opacity: .4;
-  -webkit-user-select: none;
-  user-select: none;
-  border-radius: var(--borderRadius-md);
-  color: var(--colors-primary);
-  place-items: center;
-  transition: opacity .2s linear;
-  display: grid;
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
   position: absolute;
 }
 
 .style__2d6ocq0:disabled {
-  pointer-events: none;
-  opacity: .2;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+  opacity: .5;
 }
 
-.style__2d6ocq0:hover {
-  opacity: 1;
+.style__2d6ocq1 {
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+  background-color: var(--colors-background-paper);
+  border-radius: 9999px;
+  justify-content: center;
+  align-items: center;
+  transition: transform .2s;
+  display: flex;
 }
 
-.style__2d6ocq1 {
-  bottom: 0;
-  right: 0;
+.style__2d6ocq0:not(:disabled):hover .style__2d6ocq1 {
+  transform: scale(1.1);
 }
 
-.style__2d6ocq2 {
+.style__2d6ocq1 svg {
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+}
+
+.horizontal__2d6ocq2 {
+  width: clamp(2.5rem, 4vw, 4rem);
+  height: 100%;
   top: 0;
+  right: 0;
+}
+
+.vertical__2d6ocq3 {
+  width: 100%;
+  height: clamp(2.5rem, 4vw, 4rem);
+  bottom: 0;
   left: 0;
 }
 
-.horizontal__2d6ocq3 {
-  width: clamp(35px, 15%, 55px);
+.horizontal__2d6ocq4 {
+  width: clamp(2.5rem, 4vw, 4rem);
   height: 100%;
+  top: 0;
+  left: 0;
 }
 
-.vertical__2d6ocq4 {
+.vertical__2d6ocq5 {
   width: 100%;
-  height: clamp(35px, 15%, 55px);
+  height: clamp(2.5rem, 4vw, 4rem);
+  top: 0;
+  right: 0;
+}
+
+.vertical__2d6ocq3 svg, .vertical__2d6ocq5 svg {
+  transform: rotate(90deg);
 }
 
 .style__i1lems0 {
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
   width: 100%;
   height: 100%;
+  display: flex;
   overflow: hidden;
 }
 
+.style__i1lems0::-webkit-scrollbar {
+  display: none;
+}
+
 .horizontal__i1lems1 {
-  gap: var(--spacing-4);
-  display: flex;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
+  column-gap: var(--spacing-4);
+  flex-direction: row;
+  overflow: auto hidden;
 }
 
 .vertical__i1lems2 {
-  gap: var(--spacing-4);
+  scroll-snap-type: y mandatory;
+  overscroll-behavior-y: contain;
+  overscroll-behavior-x: auto;
+  row-gap: var(--spacing-4);
   flex-direction: column;
-  display: flex;
+  overflow: hidden auto;
 }
 
 .style__e2zpp60 {
@@ -2043,6 +2086,16 @@ a.outline__1af895x4:hover {
   min-width: 0;
 }
 
+.horizontal__1gif6yr1 {
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+}
+
+.vertical__1gif6yr2 {
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
 .Carousel__1jbydv50 {
   position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/kit",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",
@@ -18,7 +18,6 @@
     "@base-ui/react": "^1.5.0",
     "@react-input/mask": "^2.0.4",
     "clsx": "^2.1.1",
-    "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^1.17.0",
     "react-day-picker": "^10.0.1",