@flamingo-stack/openframe-frontend-core 0.0.394-snapshot.20260709183206 → 0.0.394
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-ZB5HSWX4.js → chunk-2J6AOHJI.js} +2 -2
- package/dist/{chunk-Y4I4462K.cjs → chunk-4FT3KQD3.cjs} +15 -15
- package/dist/{chunk-Y4I4462K.cjs.map → chunk-4FT3KQD3.cjs.map} +1 -1
- package/dist/{chunk-NN73KMIK.js → chunk-5J3LR56Z.js} +2 -2
- package/dist/{chunk-WHJEU7V7.js → chunk-A7IGCQUD.js} +4 -4
- package/dist/{chunk-PFF6Q6N5.js → chunk-AGTM2H7T.js} +2 -2
- package/dist/{chunk-PJ2YFSMY.js → chunk-AQJ5S6RS.js} +2 -2
- package/dist/{chunk-T6FEE3R2.cjs → chunk-CJMM2WZP.cjs} +5 -5
- package/dist/{chunk-T6FEE3R2.cjs.map → chunk-CJMM2WZP.cjs.map} +1 -1
- package/dist/{chunk-5U72NXGG.cjs → chunk-DFCPMBYN.cjs} +9 -9
- package/dist/{chunk-5U72NXGG.cjs.map → chunk-DFCPMBYN.cjs.map} +1 -1
- package/dist/{chunk-J2UDV3FH.cjs → chunk-DRSAMA27.cjs} +62 -62
- package/dist/{chunk-J2UDV3FH.cjs.map → chunk-DRSAMA27.cjs.map} +1 -1
- package/dist/{chunk-TWLPG5IQ.js → chunk-DXIDOGF4.js} +2 -2
- package/dist/{chunk-3VJPMRNT.cjs → chunk-FIOOW474.cjs} +7 -7
- package/dist/{chunk-3VJPMRNT.cjs.map → chunk-FIOOW474.cjs.map} +1 -1
- package/dist/{chunk-YJE3HL6Q.js → chunk-FVFPGGDA.js} +4 -4
- package/dist/{chunk-TTEAYVLT.js → chunk-G6CNEEZ3.js} +2 -2
- package/dist/{chunk-NJPMHDFG.js → chunk-GAD4OYKN.js} +2 -2
- package/dist/{chunk-BEPZ5YAN.cjs → chunk-HXDBJR4A.cjs} +59 -59
- package/dist/{chunk-BEPZ5YAN.cjs.map → chunk-HXDBJR4A.cjs.map} +1 -1
- package/dist/{chunk-OSOKWP5R.cjs → chunk-IEKEUSPV.cjs} +31 -31
- package/dist/{chunk-OSOKWP5R.cjs.map → chunk-IEKEUSPV.cjs.map} +1 -1
- package/dist/{chunk-RNWLVI3V.cjs → chunk-LP3FQTCB.cjs} +26 -26
- package/dist/{chunk-RNWLVI3V.cjs.map → chunk-LP3FQTCB.cjs.map} +1 -1
- package/dist/{chunk-4YVUL4T7.cjs → chunk-N6SH4ZYN.cjs} +12 -12
- package/dist/{chunk-4YVUL4T7.cjs.map → chunk-N6SH4ZYN.cjs.map} +1 -1
- package/dist/{chunk-RWBTSF2E.js → chunk-NYBMBTBL.js} +5181 -5295
- package/dist/chunk-NYBMBTBL.js.map +1 -0
- package/dist/{chunk-M7WTWBCY.cjs → chunk-PVMISZQT.cjs} +37 -37
- package/dist/{chunk-M7WTWBCY.cjs.map → chunk-PVMISZQT.cjs.map} +1 -1
- package/dist/{chunk-PNMX75W4.cjs → chunk-R6PS3AXI.cjs} +1057 -1171
- package/dist/chunk-R6PS3AXI.cjs.map +1 -0
- package/dist/{chunk-45Z6B6CO.js → chunk-SSZL4QYX.js} +4 -4
- package/dist/{chunk-MPN3MV5H.js → chunk-WAKXAMRC.js} +4 -4
- package/dist/{chunk-ZCKVP4SU.cjs → chunk-YIJGUS7V.cjs} +26 -26
- package/dist/{chunk-ZCKVP4SU.cjs.map → chunk-YIJGUS7V.cjs.map} +1 -1
- package/dist/components/carousel.d.ts +19 -0
- package/dist/components/carousel.d.ts.map +1 -0
- 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/index.cjs +2 -6
- package/dist/components/features/index.cjs.map +1 -1
- package/dist/components/features/index.d.ts +0 -1
- package/dist/components/features/index.d.ts.map +1 -1
- package/dist/components/features/index.js +1 -5
- package/dist/components/features/video-bites-strip.d.ts +26 -15
- 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 +120 -124
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +9 -13
- 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 +2 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -5
- package/dist/types/blog.d.ts +10 -9
- package/dist/types/blog.d.ts.map +1 -1
- package/dist/types/case-study.d.ts +5 -2
- package/dist/types/case-study.d.ts.map +1 -1
- package/dist/types/customer-interview.d.ts +5 -2
- package/dist/types/customer-interview.d.ts.map +1 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +2 -1
- package/src/components/.carousel.md +50 -0
- package/src/components/carousel.tsx +262 -0
- package/src/components/features/index.ts +0 -3
- package/src/components/features/video-bites-strip.tsx +375 -53
- package/src/types/blog.ts +10 -9
- package/src/types/case-study.ts +5 -2
- package/src/types/customer-interview.ts +5 -2
- package/src/types/index.ts +0 -1
- package/dist/chunk-PNMX75W4.cjs.map +0 -1
- package/dist/chunk-RWBTSF2E.js.map +0 -1
- package/dist/components/features/cards-strip.d.ts +0 -114
- package/dist/components/features/cards-strip.d.ts.map +0 -1
- package/dist/types/entity-platform.d.ts +0 -22
- package/dist/types/entity-platform.d.ts.map +0 -1
- package/src/components/features/cards-strip.tsx +0 -587
- package/src/stories/CardsStrip.stories.tsx +0 -101
- package/src/types/entity-platform.ts +0 -21
- /package/dist/{chunk-ZB5HSWX4.js.map → chunk-2J6AOHJI.js.map} +0 -0
- /package/dist/{chunk-NN73KMIK.js.map → chunk-5J3LR56Z.js.map} +0 -0
- /package/dist/{chunk-WHJEU7V7.js.map → chunk-A7IGCQUD.js.map} +0 -0
- /package/dist/{chunk-PFF6Q6N5.js.map → chunk-AGTM2H7T.js.map} +0 -0
- /package/dist/{chunk-PJ2YFSMY.js.map → chunk-AQJ5S6RS.js.map} +0 -0
- /package/dist/{chunk-TWLPG5IQ.js.map → chunk-DXIDOGF4.js.map} +0 -0
- /package/dist/{chunk-YJE3HL6Q.js.map → chunk-FVFPGGDA.js.map} +0 -0
- /package/dist/{chunk-TTEAYVLT.js.map → chunk-G6CNEEZ3.js.map} +0 -0
- /package/dist/{chunk-NJPMHDFG.js.map → chunk-GAD4OYKN.js.map} +0 -0
- /package/dist/{chunk-45Z6B6CO.js.map → chunk-SSZL4QYX.js.map} +0 -0
- /package/dist/{chunk-MPN3MV5H.js.map → chunk-WAKXAMRC.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customer-interview.d.ts","sourceRoot":"","sources":["../../src/types/customer-interview.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"customer-interview.d.ts","sourceRoot":"","sources":["../../src/types/customer-interview.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG7C,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACxH,OAAO,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAExH,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,iCAAiC,CAAC,EAAE,MAAM,CAAA;IAC1C,8DAA8D;IAC9D,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IAGzB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IAGtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,OAAO,EAAE,WAAW,EAAE,CAAA;IAGtB,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,yBAAyB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzC,2BAA2B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3C,sBAAsB,CAAC,EAAE,QAAQ,GAAG,cAAc,GAAG,IAAI,CAAA;IACzD,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAGpC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAG5B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAG7B,MAAM,EAAE,OAAO,GAAG,WAAW,CAAA;IAC7B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IAGxB,oBAAoB,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAA;IACxE,iBAAiB,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAA;IACrE,eAAe,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAA;IACnE,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAG5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,2BAA2B,CAAC,EAAE,MAAM,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,EAAE,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAA;IAG5B,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAG5B,qBAAqB,CAAC,EAAE,cAAc,EAAE,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAG3B,yBAAyB,CAAC,EAAE,aAAa,EAAE,CAAA;IAI3C,eAAe,CAAC,EAAE,cAAc,CAAA;IAEhC,kDAAkD;IAClD,MAAM,CAAC,EAAE,uBAAuB,CAAA;IAGhC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAA;IAGlC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAGlB,UAAU,EAAE,MAAM,CAAA;IAGlB,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4BAA4B,CAAC,EAAE,KAAK,CAAC;QACnC,WAAW,EAAE,MAAM,CAAA;QACnB,WAAW,EAAE,OAAO,CAAA;QACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;KAC9B,CAAC,CAAA;CACH;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,oBAAoB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,OAAO,GAAG,WAAW,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,MAAM,CAAC,EAAE,uBAAuB,CAAA;IAChC,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACpC;AAED,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC,2BAA2B,CAAC,CAAA;AAE9E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,KAAK,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAC1B;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;CACd"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9,7 +9,6 @@ export * from './auth';
|
|
|
9
9
|
export * from './blog';
|
|
10
10
|
export * from './entity-author';
|
|
11
11
|
export * from './case-study';
|
|
12
|
-
export * from './entity-platform';
|
|
13
12
|
export * from './customer-interview';
|
|
14
13
|
export * from './customer-interview-ai.types';
|
|
15
14
|
export * from './luma';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAA;AAI9B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACtF,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,IAAI,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAGjK,cAAc,YAAY,CAAA;AAG1B,cAAc,QAAQ,CAAA;AAGtB,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAA;AAI9B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,QAAQ,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACtF,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,IAAI,gBAAgB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAGjK,cAAc,YAAY,CAAA;AAG1B,cAAc,QAAQ,CAAA;AAGtB,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,sBAAsB,CAAA;AACpC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAGlC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AAGtB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAG1B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AAGvB,cAAc,cAAc,CAAA;AAG5B,cAAc,cAAc,CAAA;AAG5B,cAAc,eAAe,CAAA;AAG7B,cAAc,YAAY,CAAA;AAG1B,cAAc,aAAa,CAAA;AAE3B,cAAc,uBAAuB,CAAA;AACrC,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,QAAQ,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flamingo-stack/openframe-frontend-core",
|
|
3
|
-
"version": "0.0.394
|
|
3
|
+
"version": "0.0.394",
|
|
4
4
|
"description": "Shared design system and components for all Flamingo platforms",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -323,6 +323,7 @@
|
|
|
323
323
|
"class-variance-authority": "^0.7.0",
|
|
324
324
|
"clsx": "^2.1.1",
|
|
325
325
|
"cmdk": "^1.0.4",
|
|
326
|
+
"embla-carousel-react": "^8.6.0",
|
|
326
327
|
"file-type": "^22.0.1",
|
|
327
328
|
"framer-motion": "^12.23.12",
|
|
328
329
|
"graphql": "^16.12.0",
|
|
@@ -0,0 +1,50 @@
|
|
|
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.
|
|
@@ -0,0 +1,262 @@
|
|
|
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
|
+
}
|
|
@@ -52,13 +52,10 @@ export * from './tags-selector'
|
|
|
52
52
|
export * from './warning-block'
|
|
53
53
|
// Unified video primitives — single source of truth across all platforms.
|
|
54
54
|
// `<Video>` replaces the deleted `<VideoPlayer>` + `<YouTubeEmbed>` pair;
|
|
55
|
-
// `<CardsStrip>` is THE horizontal card-strip engine (render-prop mode for
|
|
56
|
-
// bites, organic `children` mode for any card component);
|
|
57
55
|
// `<EntityVideoSection>` + `<VideoBitesStrip>` are the public detail-page
|
|
58
56
|
// wrappers (`<VideoBitesDisplay>` is a deprecated shim over the strip);
|
|
59
57
|
// `video-ratio-tabs` keeps the aspect-ratio primitives (tabs/grid = admin-only);
|
|
60
58
|
// `video-bites-shared` is the SERVER-SAFE leaf (also its own published subpath).
|
|
61
|
-
export * from './cards-strip'
|
|
62
59
|
export * from './video'
|
|
63
60
|
export * from './video-ratio-tabs'
|
|
64
61
|
export * from './video-bites-shared'
|