@flamingo-stack/openframe-frontend-core 0.0.394 → 0.0.395
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-FIOOW474.cjs → chunk-3VJPMRNT.cjs} +7 -7
- package/dist/{chunk-FIOOW474.cjs.map → chunk-3VJPMRNT.cjs.map} +1 -1
- package/dist/{chunk-SSZL4QYX.js → chunk-45Z6B6CO.js} +4 -4
- package/dist/{chunk-N6SH4ZYN.cjs → chunk-4YVUL4T7.cjs} +12 -12
- package/dist/{chunk-N6SH4ZYN.cjs.map → chunk-4YVUL4T7.cjs.map} +1 -1
- package/dist/{chunk-DFCPMBYN.cjs → chunk-5U72NXGG.cjs} +9 -9
- package/dist/{chunk-DFCPMBYN.cjs.map → chunk-5U72NXGG.cjs.map} +1 -1
- package/dist/{chunk-HXDBJR4A.cjs → chunk-BEPZ5YAN.cjs} +59 -59
- package/dist/{chunk-HXDBJR4A.cjs.map → chunk-BEPZ5YAN.cjs.map} +1 -1
- package/dist/{chunk-DRSAMA27.cjs → chunk-J2UDV3FH.cjs} +62 -62
- package/dist/{chunk-DRSAMA27.cjs.map → chunk-J2UDV3FH.cjs.map} +1 -1
- package/dist/{chunk-PVMISZQT.cjs → chunk-M7WTWBCY.cjs} +37 -37
- package/dist/{chunk-PVMISZQT.cjs.map → chunk-M7WTWBCY.cjs.map} +1 -1
- package/dist/{chunk-WAKXAMRC.js → chunk-MPN3MV5H.js} +4 -4
- package/dist/{chunk-GAD4OYKN.js → chunk-NJPMHDFG.js} +2 -2
- package/dist/{chunk-5J3LR56Z.js → chunk-NN73KMIK.js} +2 -2
- package/dist/{chunk-IEKEUSPV.cjs → chunk-OSOKWP5R.cjs} +31 -31
- package/dist/{chunk-IEKEUSPV.cjs.map → chunk-OSOKWP5R.cjs.map} +1 -1
- package/dist/{chunk-AGTM2H7T.js → chunk-PFF6Q6N5.js} +2 -2
- package/dist/{chunk-AQJ5S6RS.js → chunk-PJ2YFSMY.js} +2 -2
- package/dist/{chunk-R6PS3AXI.cjs → chunk-PNMX75W4.cjs} +1171 -1057
- package/dist/chunk-PNMX75W4.cjs.map +1 -0
- package/dist/{chunk-LP3FQTCB.cjs → chunk-RNWLVI3V.cjs} +26 -26
- package/dist/{chunk-LP3FQTCB.cjs.map → chunk-RNWLVI3V.cjs.map} +1 -1
- package/dist/{chunk-NYBMBTBL.js → chunk-RWBTSF2E.js} +5295 -5181
- package/dist/chunk-RWBTSF2E.js.map +1 -0
- package/dist/{chunk-CJMM2WZP.cjs → chunk-T6FEE3R2.cjs} +5 -5
- package/dist/{chunk-CJMM2WZP.cjs.map → chunk-T6FEE3R2.cjs.map} +1 -1
- package/dist/{chunk-G6CNEEZ3.js → chunk-TTEAYVLT.js} +2 -2
- package/dist/{chunk-DXIDOGF4.js → chunk-TWLPG5IQ.js} +2 -2
- package/dist/{chunk-A7IGCQUD.js → chunk-WHJEU7V7.js} +4 -4
- package/dist/{chunk-4FT3KQD3.cjs → chunk-Y4I4462K.cjs} +15 -15
- package/dist/{chunk-4FT3KQD3.cjs.map → chunk-Y4I4462K.cjs.map} +1 -1
- package/dist/{chunk-FVFPGGDA.js → chunk-YJE3HL6Q.js} +4 -4
- package/dist/{chunk-2J6AOHJI.js → chunk-ZB5HSWX4.js} +2 -2
- package/dist/{chunk-YIJGUS7V.cjs → chunk-ZCKVP4SU.cjs} +26 -26
- package/dist/{chunk-YIJGUS7V.cjs.map → chunk-ZCKVP4SU.cjs.map} +1 -1
- package/dist/components/case-studies/index.cjs +8 -8
- package/dist/components/case-studies/index.js +2 -2
- package/dist/components/chat/index.cjs +2 -2
- package/dist/components/chat/index.js +1 -1
- package/dist/components/contact/index.cjs +3 -3
- package/dist/components/contact/index.js +2 -2
- package/dist/components/docs/index.cjs +5 -5
- package/dist/components/docs/index.js +4 -4
- package/dist/components/embeds/index.cjs +3 -3
- package/dist/components/embeds/index.js +2 -2
- package/dist/components/faq/index.cjs +3 -3
- package/dist/components/faq/index.js +2 -2
- package/dist/components/features/cards-strip.d.ts +114 -0
- package/dist/components/features/cards-strip.d.ts.map +1 -0
- package/dist/components/features/index.cjs +6 -2
- package/dist/components/features/index.cjs.map +1 -1
- package/dist/components/features/index.d.ts +1 -0
- package/dist/components/features/index.d.ts.map +1 -1
- package/dist/components/features/index.js +5 -1
- package/dist/components/features/video-bites-strip.d.ts +15 -26
- package/dist/components/features/video-bites-strip.d.ts.map +1 -1
- package/dist/components/help-center-pages/index.cjs +20 -20
- package/dist/components/help-center-pages/index.js +11 -11
- package/dist/components/index.cjs +124 -120
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +13 -9
- package/dist/components/index.js.map +1 -1
- package/dist/components/navigation/index.cjs +2 -2
- package/dist/components/navigation/index.js +1 -1
- package/dist/components/onboarding-guides/index.cjs +5 -5
- package/dist/components/onboarding-guides/index.js +4 -4
- package/dist/components/related-content/index.cjs +3 -3
- package/dist/components/related-content/index.js +2 -2
- package/dist/components/tickets/index.cjs +5 -5
- package/dist/components/tickets/index.js +4 -4
- package/dist/components/ui/index.cjs +2 -2
- package/dist/components/ui/index.js +1 -1
- package/dist/index.cjs +6 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5 -1
- package/dist/types/blog.d.ts +9 -10
- package/dist/types/blog.d.ts.map +1 -1
- package/dist/types/case-study.d.ts +2 -5
- package/dist/types/case-study.d.ts.map +1 -1
- package/dist/types/customer-interview.d.ts +2 -5
- package/dist/types/customer-interview.d.ts.map +1 -1
- package/dist/types/entity-platform.d.ts +22 -0
- package/dist/types/entity-platform.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -2
- package/src/components/features/cards-strip.tsx +587 -0
- package/src/components/features/index.ts +3 -0
- package/src/components/features/video-bites-strip.tsx +53 -375
- package/src/stories/CardsStrip.stories.tsx +101 -0
- package/src/types/blog.ts +9 -10
- package/src/types/case-study.ts +2 -5
- package/src/types/customer-interview.ts +2 -5
- package/src/types/entity-platform.ts +21 -0
- package/src/types/index.ts +1 -0
- package/dist/chunk-NYBMBTBL.js.map +0 -1
- package/dist/chunk-R6PS3AXI.cjs.map +0 -1
- package/dist/components/carousel.d.ts +0 -19
- package/dist/components/carousel.d.ts.map +0 -1
- package/src/components/.carousel.md +0 -50
- package/src/components/carousel.tsx +0 -262
- /package/dist/{chunk-SSZL4QYX.js.map → chunk-45Z6B6CO.js.map} +0 -0
- /package/dist/{chunk-WAKXAMRC.js.map → chunk-MPN3MV5H.js.map} +0 -0
- /package/dist/{chunk-GAD4OYKN.js.map → chunk-NJPMHDFG.js.map} +0 -0
- /package/dist/{chunk-5J3LR56Z.js.map → chunk-NN73KMIK.js.map} +0 -0
- /package/dist/{chunk-AGTM2H7T.js.map → chunk-PFF6Q6N5.js.map} +0 -0
- /package/dist/{chunk-AQJ5S6RS.js.map → chunk-PJ2YFSMY.js.map} +0 -0
- /package/dist/{chunk-G6CNEEZ3.js.map → chunk-TTEAYVLT.js.map} +0 -0
- /package/dist/{chunk-DXIDOGF4.js.map → chunk-TWLPG5IQ.js.map} +0 -0
- /package/dist/{chunk-A7IGCQUD.js.map → chunk-WHJEU7V7.js.map} +0 -0
- /package/dist/{chunk-FVFPGGDA.js.map → chunk-YJE3HL6Q.js.map} +0 -0
- /package/dist/{chunk-2J6AOHJI.js.map → chunk-ZB5HSWX4.js.map} +0 -0
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
|
-
type CarouselApi = UseEmblaCarouselType[1];
|
|
4
|
-
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
5
|
-
type CarouselOptions = UseCarouselParameters[0];
|
|
6
|
-
type CarouselPlugin = UseCarouselParameters[1];
|
|
7
|
-
type CarouselProps = {
|
|
8
|
-
opts?: CarouselOptions;
|
|
9
|
-
plugins?: CarouselPlugin;
|
|
10
|
-
orientation?: "horizontal" | "vertical";
|
|
11
|
-
setApi?: (api: CarouselApi) => void;
|
|
12
|
-
};
|
|
13
|
-
declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
-
declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
-
declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
16
|
-
declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("./ui").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
17
|
-
declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("./ui").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
18
|
-
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
|
|
19
|
-
//# sourceMappingURL=carousel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAM7B,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA;AAuBD,QAAA,MAAM,QAAQ,6HAyGb,CAAA;AAGD,QAAA,MAAM,eAAe,6GAmBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAmBhB,CAAA;AAGF,QAAA,MAAM,gBAAgB,4JA0BpB,CAAA;AAGF,QAAA,MAAM,YAAY,4JA0BhB,CAAA;AAGF,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,GACb,CAAA"}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
<!-- source-hash: 0335dfc7cb18e8aa8ef0306a01f8ca93 -->
|
|
2
|
-
A React carousel component built on top of Embla Carousel that provides a flexible, accessible carousel with navigation controls and keyboard support. The component uses React Context to manage carousel state and provides composable parts for building custom carousels.
|
|
3
|
-
|
|
4
|
-
## Key Components
|
|
5
|
-
|
|
6
|
-
- **Carousel** - Main wrapper component that provides carousel context and handles keyboard navigation
|
|
7
|
-
- **CarouselContent** - Container for carousel slides with overflow handling
|
|
8
|
-
- **CarouselItem** - Individual slide wrapper with proper ARIA attributes
|
|
9
|
-
- **CarouselPrevious/CarouselNext** - Navigation button components with automatic disable states
|
|
10
|
-
- **useCarousel** - Hook for accessing carousel context (scrolling functions, state, etc.)
|
|
11
|
-
- **CarouselApi** - Type for the underlying Embla carousel API instance
|
|
12
|
-
|
|
13
|
-
## Usage Example
|
|
14
|
-
|
|
15
|
-
```typescript
|
|
16
|
-
import {
|
|
17
|
-
Carousel,
|
|
18
|
-
CarouselContent,
|
|
19
|
-
CarouselItem,
|
|
20
|
-
CarouselPrevious,
|
|
21
|
-
CarouselNext,
|
|
22
|
-
} from "./carousel"
|
|
23
|
-
|
|
24
|
-
function MyCarousel() {
|
|
25
|
-
return (
|
|
26
|
-
<Carousel className="w-full max-w-xs">
|
|
27
|
-
<CarouselContent>
|
|
28
|
-
<CarouselItem>
|
|
29
|
-
<div className="p-1">
|
|
30
|
-
<div className="flex aspect-square items-center justify-center p-6">
|
|
31
|
-
<span className="text-4xl font-semibold">1</span>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</CarouselItem>
|
|
35
|
-
<CarouselItem>
|
|
36
|
-
<div className="p-1">
|
|
37
|
-
<div className="flex aspect-square items-center justify-center p-6">
|
|
38
|
-
<span className="text-4xl font-semibold">2</span>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
</CarouselItem>
|
|
42
|
-
</CarouselContent>
|
|
43
|
-
<CarouselPrevious />
|
|
44
|
-
<CarouselNext />
|
|
45
|
-
</Carousel>
|
|
46
|
-
)
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
The component supports both horizontal and vertical orientations, custom Embla options, plugins, and provides full keyboard accessibility with arrow key navigation.
|
|
@@ -1,262 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import useEmblaCarousel, {
|
|
5
|
-
type UseEmblaCarouselType,
|
|
6
|
-
} from "embla-carousel-react"
|
|
7
|
-
import { ArrowLeft, ArrowRight } from "lucide-react"
|
|
8
|
-
|
|
9
|
-
import { cn } from "../utils/cn"
|
|
10
|
-
import { Button } from "./ui/button"
|
|
11
|
-
|
|
12
|
-
type CarouselApi = UseEmblaCarouselType[1]
|
|
13
|
-
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
|
14
|
-
type CarouselOptions = UseCarouselParameters[0]
|
|
15
|
-
type CarouselPlugin = UseCarouselParameters[1]
|
|
16
|
-
|
|
17
|
-
type CarouselProps = {
|
|
18
|
-
opts?: CarouselOptions
|
|
19
|
-
plugins?: CarouselPlugin
|
|
20
|
-
orientation?: "horizontal" | "vertical"
|
|
21
|
-
setApi?: (api: CarouselApi) => void
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
type CarouselContextProps = {
|
|
25
|
-
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
|
26
|
-
api: ReturnType<typeof useEmblaCarousel>[1]
|
|
27
|
-
scrollPrev: () => void
|
|
28
|
-
scrollNext: () => void
|
|
29
|
-
canScrollPrev: boolean
|
|
30
|
-
canScrollNext: boolean
|
|
31
|
-
} & CarouselProps
|
|
32
|
-
|
|
33
|
-
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
|
34
|
-
|
|
35
|
-
function useCarousel() {
|
|
36
|
-
const context = React.useContext(CarouselContext)
|
|
37
|
-
|
|
38
|
-
if (!context) {
|
|
39
|
-
throw new Error("useCarousel must be used within a <Carousel />")
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return context
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
const Carousel = React.forwardRef<
|
|
46
|
-
HTMLDivElement,
|
|
47
|
-
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
|
48
|
-
>(
|
|
49
|
-
(
|
|
50
|
-
{
|
|
51
|
-
orientation = "horizontal",
|
|
52
|
-
opts,
|
|
53
|
-
setApi,
|
|
54
|
-
plugins,
|
|
55
|
-
className,
|
|
56
|
-
children,
|
|
57
|
-
...props
|
|
58
|
-
},
|
|
59
|
-
ref
|
|
60
|
-
) => {
|
|
61
|
-
const [carouselRef, api] = useEmblaCarousel(
|
|
62
|
-
{
|
|
63
|
-
...opts,
|
|
64
|
-
axis: orientation === "horizontal" ? "x" : "y",
|
|
65
|
-
},
|
|
66
|
-
plugins
|
|
67
|
-
)
|
|
68
|
-
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
|
69
|
-
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
|
70
|
-
|
|
71
|
-
const onSelect = React.useCallback((api: CarouselApi) => {
|
|
72
|
-
if (!api) {
|
|
73
|
-
return
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
setCanScrollPrev(api.canScrollPrev())
|
|
77
|
-
setCanScrollNext(api.canScrollNext())
|
|
78
|
-
}, [])
|
|
79
|
-
|
|
80
|
-
const scrollPrev = React.useCallback(() => {
|
|
81
|
-
api?.scrollPrev()
|
|
82
|
-
}, [api])
|
|
83
|
-
|
|
84
|
-
const scrollNext = React.useCallback(() => {
|
|
85
|
-
api?.scrollNext()
|
|
86
|
-
}, [api])
|
|
87
|
-
|
|
88
|
-
const handleKeyDown = React.useCallback(
|
|
89
|
-
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
|
90
|
-
if (event.key === "ArrowLeft") {
|
|
91
|
-
event.preventDefault()
|
|
92
|
-
scrollPrev()
|
|
93
|
-
} else if (event.key === "ArrowRight") {
|
|
94
|
-
event.preventDefault()
|
|
95
|
-
scrollNext()
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
[scrollPrev, scrollNext]
|
|
99
|
-
)
|
|
100
|
-
|
|
101
|
-
React.useEffect(() => {
|
|
102
|
-
if (!api || !setApi) {
|
|
103
|
-
return
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
setApi(api)
|
|
107
|
-
}, [api, setApi])
|
|
108
|
-
|
|
109
|
-
React.useEffect(() => {
|
|
110
|
-
if (!api) {
|
|
111
|
-
return
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
onSelect(api)
|
|
115
|
-
api.on("reInit", onSelect)
|
|
116
|
-
api.on("select", onSelect)
|
|
117
|
-
|
|
118
|
-
return () => {
|
|
119
|
-
api?.off("select", onSelect)
|
|
120
|
-
}
|
|
121
|
-
}, [api, onSelect])
|
|
122
|
-
|
|
123
|
-
return (
|
|
124
|
-
<CarouselContext.Provider
|
|
125
|
-
value={{
|
|
126
|
-
carouselRef,
|
|
127
|
-
api: api,
|
|
128
|
-
opts,
|
|
129
|
-
orientation:
|
|
130
|
-
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
131
|
-
scrollPrev,
|
|
132
|
-
scrollNext,
|
|
133
|
-
canScrollPrev,
|
|
134
|
-
canScrollNext,
|
|
135
|
-
}}
|
|
136
|
-
>
|
|
137
|
-
<div
|
|
138
|
-
ref={ref}
|
|
139
|
-
onKeyDownCapture={handleKeyDown}
|
|
140
|
-
className={cn("relative", className)}
|
|
141
|
-
role="region"
|
|
142
|
-
aria-roledescription="carousel"
|
|
143
|
-
{...props}
|
|
144
|
-
>
|
|
145
|
-
{children}
|
|
146
|
-
</div>
|
|
147
|
-
</CarouselContext.Provider>
|
|
148
|
-
)
|
|
149
|
-
}
|
|
150
|
-
)
|
|
151
|
-
Carousel.displayName = "Carousel"
|
|
152
|
-
|
|
153
|
-
const CarouselContent = React.forwardRef<
|
|
154
|
-
HTMLDivElement,
|
|
155
|
-
React.HTMLAttributes<HTMLDivElement>
|
|
156
|
-
>(({ className, ...props }, ref) => {
|
|
157
|
-
const { carouselRef, orientation } = useCarousel()
|
|
158
|
-
|
|
159
|
-
return (
|
|
160
|
-
<div ref={carouselRef} className="overflow-hidden">
|
|
161
|
-
<div
|
|
162
|
-
ref={ref}
|
|
163
|
-
className={cn(
|
|
164
|
-
"flex",
|
|
165
|
-
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
|
166
|
-
className
|
|
167
|
-
)}
|
|
168
|
-
{...props}
|
|
169
|
-
/>
|
|
170
|
-
</div>
|
|
171
|
-
)
|
|
172
|
-
})
|
|
173
|
-
CarouselContent.displayName = "CarouselContent"
|
|
174
|
-
|
|
175
|
-
const CarouselItem = React.forwardRef<
|
|
176
|
-
HTMLDivElement,
|
|
177
|
-
React.HTMLAttributes<HTMLDivElement>
|
|
178
|
-
>(({ className, ...props }, ref) => {
|
|
179
|
-
const { orientation } = useCarousel()
|
|
180
|
-
|
|
181
|
-
return (
|
|
182
|
-
<div
|
|
183
|
-
ref={ref}
|
|
184
|
-
role="group"
|
|
185
|
-
aria-roledescription="slide"
|
|
186
|
-
className={cn(
|
|
187
|
-
"min-w-0 shrink-0 grow-0 basis-full",
|
|
188
|
-
orientation === "horizontal" ? "pl-4" : "pt-4",
|
|
189
|
-
className
|
|
190
|
-
)}
|
|
191
|
-
{...props}
|
|
192
|
-
/>
|
|
193
|
-
)
|
|
194
|
-
})
|
|
195
|
-
CarouselItem.displayName = "CarouselItem"
|
|
196
|
-
|
|
197
|
-
const CarouselPrevious = React.forwardRef<
|
|
198
|
-
HTMLButtonElement,
|
|
199
|
-
React.ComponentProps<typeof Button>
|
|
200
|
-
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
201
|
-
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
|
202
|
-
|
|
203
|
-
return (
|
|
204
|
-
<Button
|
|
205
|
-
ref={ref}
|
|
206
|
-
variant={variant}
|
|
207
|
-
size={size}
|
|
208
|
-
className={cn(
|
|
209
|
-
"absolute h-8 w-8 rounded-full",
|
|
210
|
-
orientation === "horizontal"
|
|
211
|
-
? "-left-12 top-1/2 -translate-y-1/2"
|
|
212
|
-
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
213
|
-
className
|
|
214
|
-
)}
|
|
215
|
-
disabled={!canScrollPrev}
|
|
216
|
-
onClick={scrollPrev}
|
|
217
|
-
{...props}
|
|
218
|
-
>
|
|
219
|
-
<ArrowLeft className="h-4 w-4" />
|
|
220
|
-
<span className="sr-only">Previous slide</span>
|
|
221
|
-
</Button>
|
|
222
|
-
)
|
|
223
|
-
})
|
|
224
|
-
CarouselPrevious.displayName = "CarouselPrevious"
|
|
225
|
-
|
|
226
|
-
const CarouselNext = React.forwardRef<
|
|
227
|
-
HTMLButtonElement,
|
|
228
|
-
React.ComponentProps<typeof Button>
|
|
229
|
-
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
230
|
-
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
|
231
|
-
|
|
232
|
-
return (
|
|
233
|
-
<Button
|
|
234
|
-
ref={ref}
|
|
235
|
-
variant={variant}
|
|
236
|
-
size={size}
|
|
237
|
-
className={cn(
|
|
238
|
-
"absolute h-8 w-8 rounded-full",
|
|
239
|
-
orientation === "horizontal"
|
|
240
|
-
? "-right-12 top-1/2 -translate-y-1/2"
|
|
241
|
-
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
242
|
-
className
|
|
243
|
-
)}
|
|
244
|
-
disabled={!canScrollNext}
|
|
245
|
-
onClick={scrollNext}
|
|
246
|
-
{...props}
|
|
247
|
-
>
|
|
248
|
-
<ArrowRight className="h-4 w-4" />
|
|
249
|
-
<span className="sr-only">Next slide</span>
|
|
250
|
-
</Button>
|
|
251
|
-
)
|
|
252
|
-
})
|
|
253
|
-
CarouselNext.displayName = "CarouselNext"
|
|
254
|
-
|
|
255
|
-
export {
|
|
256
|
-
type CarouselApi,
|
|
257
|
-
Carousel,
|
|
258
|
-
CarouselContent,
|
|
259
|
-
CarouselItem,
|
|
260
|
-
CarouselPrevious,
|
|
261
|
-
CarouselNext,
|
|
262
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|