@zayne-labs/ui-react 0.9.8 → 0.9.12

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.
Files changed (79) hide show
  1. package/dist/esm/await-parts-BJ6C-y1f.d.ts +36 -0
  2. package/dist/esm/chunk-CLGH26AQ.js +337 -0
  3. package/dist/esm/chunk-CLGH26AQ.js.map +1 -0
  4. package/dist/esm/chunk-CWUEUCR5.js +3 -0
  5. package/dist/esm/chunk-CWUEUCR5.js.map +1 -0
  6. package/dist/esm/chunk-EYWTW54R.js +42 -0
  7. package/dist/esm/chunk-EYWTW54R.js.map +1 -0
  8. package/dist/esm/chunk-G5BNZM66.js +32 -0
  9. package/dist/esm/chunk-G5BNZM66.js.map +1 -0
  10. package/dist/esm/{chunk-IREUBYDK.js → chunk-JC52CA2O.js} +26 -23
  11. package/dist/esm/chunk-JC52CA2O.js.map +1 -0
  12. package/dist/esm/chunk-KLEJZWKY.js +45 -0
  13. package/dist/esm/chunk-KLEJZWKY.js.map +1 -0
  14. package/dist/esm/{chunk-V5DSTESN.js → chunk-M7YXNGT6.js} +3 -3
  15. package/dist/esm/{chunk-V5DSTESN.js.map → chunk-M7YXNGT6.js.map} +1 -1
  16. package/dist/esm/chunk-MT2MQDK2.js +13 -0
  17. package/dist/esm/chunk-MT2MQDK2.js.map +1 -0
  18. package/dist/esm/chunk-MY5NL5PB.js +627 -0
  19. package/dist/esm/chunk-MY5NL5PB.js.map +1 -0
  20. package/dist/esm/{chunk-XZRSR3EM.js → chunk-N4274N5K.js} +6 -2
  21. package/dist/esm/chunk-N4274N5K.js.map +1 -0
  22. package/dist/esm/chunk-V5ZPMMIH.js +121 -0
  23. package/dist/esm/chunk-V5ZPMMIH.js.map +1 -0
  24. package/dist/esm/{chunk-2P3P5AXH.js → chunk-Y5VBSXZS.js} +14 -7
  25. package/dist/esm/chunk-Y5VBSXZS.js.map +1 -0
  26. package/dist/esm/{chunk-IUEPHHGO.js → chunk-YO5LJ7ZJ.js} +2 -2
  27. package/dist/esm/{chunk-IUEPHHGO.js.map → chunk-YO5LJ7ZJ.js.map} +1 -1
  28. package/dist/esm/chunk-Z6JJE4G6.js +68 -0
  29. package/dist/esm/chunk-Z6JJE4G6.js.map +1 -0
  30. package/dist/esm/chunk-ZSDYJOYB.js +274 -0
  31. package/dist/esm/chunk-ZSDYJOYB.js.map +1 -0
  32. package/dist/esm/components/common/await/index.d.ts +10 -12
  33. package/dist/esm/components/common/await/index.js +5 -24
  34. package/dist/esm/components/common/await/index.js.map +1 -1
  35. package/dist/esm/components/common/error-boundary/index.d.ts +6 -30
  36. package/dist/esm/components/common/error-boundary/index.js +1 -2
  37. package/dist/esm/components/common/for/index.d.ts +6 -20
  38. package/dist/esm/components/common/index.d.ts +13 -0
  39. package/dist/esm/components/common/index.js +14 -0
  40. package/dist/esm/components/common/show/index.js +2 -2
  41. package/dist/esm/components/common/slot/index.d.ts +7 -3
  42. package/dist/esm/components/common/slot/index.js +1 -1
  43. package/dist/esm/components/common/suspense-with-boundary/index.d.ts +3 -3
  44. package/dist/esm/components/common/suspense-with-boundary/index.js +2 -12
  45. package/dist/esm/components/common/suspense-with-boundary/index.js.map +1 -1
  46. package/dist/esm/components/common/switch/index.js +3 -40
  47. package/dist/esm/components/common/switch/index.js.map +1 -1
  48. package/dist/esm/components/common/teleport/index.js +1 -29
  49. package/dist/esm/components/common/teleport/index.js.map +1 -1
  50. package/dist/esm/components/ui/card/index.js +4 -43
  51. package/dist/esm/components/ui/card/index.js.map +1 -1
  52. package/dist/esm/components/ui/carousel/index.js +14 -273
  53. package/dist/esm/components/ui/carousel/index.js.map +1 -1
  54. package/dist/esm/components/ui/drag-scroll/index.js +2 -119
  55. package/dist/esm/components/ui/drag-scroll/index.js.map +1 -1
  56. package/dist/esm/components/ui/drop-zone/index.d.ts +8 -181
  57. package/dist/esm/components/ui/drop-zone/index.js +15 -327
  58. package/dist/esm/components/ui/drop-zone/index.js.map +1 -1
  59. package/dist/esm/components/ui/form/index.js +7 -625
  60. package/dist/esm/components/ui/form/index.js.map +1 -1
  61. package/dist/esm/components/ui/index.d.ts +11 -0
  62. package/dist/esm/components/ui/index.js +21 -0
  63. package/dist/esm/drop-zone-parts-CvseSoXA.d.ts +186 -0
  64. package/dist/esm/error-boundary-BD0X61Sg.d.ts +28 -0
  65. package/dist/esm/for-8C6fFbN6.d.ts +21 -0
  66. package/dist/esm/{lib/utils/getSlotMap/index.d.ts → getSlotMap-DTkxtGhd.d.ts} +10 -8
  67. package/dist/esm/lib/utils/{getSlot/index.d.ts → index.d.ts} +1 -0
  68. package/dist/esm/lib/utils/index.js +5 -0
  69. package/dist/esm/lib/utils/index.js.map +1 -0
  70. package/dist/esm/{types-CeWumkhm.d.ts → types-mdfDDNrr.d.ts} +9 -6
  71. package/dist/style.css +1 -1
  72. package/package.json +17 -16
  73. package/dist/esm/chunk-2P3P5AXH.js.map +0 -1
  74. package/dist/esm/chunk-IREUBYDK.js.map +0 -1
  75. package/dist/esm/chunk-XZRSR3EM.js.map +0 -1
  76. package/dist/esm/lib/utils/getSlot/index.js +0 -4
  77. package/dist/esm/lib/utils/getSlotMap/index.js +0 -4
  78. /package/dist/esm/{lib/utils/getSlot → components/common}/index.js.map +0 -0
  79. /package/dist/esm/{lib/utils/getSlotMap → components/ui}/index.js.map +0 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/common/switch/switch.tsx","../../../../../src/components/common/switch/switch-parts.ts"],"names":[],"mappings":";;;;;AAcA,IAAM,kBAAA,GAAqB,OAAO,eAAe,CAAA;AAE1C,SAAS,WAAW,KAAoB,EAAA;AAC9C,EAAA,MAAM,EAAE,QAAA,EAAU,KAAQ,GAAA,kBAAA,EAAuB,GAAA,KAAA;AAEjD,EAAM,MAAA,WAAA,GAAc,aAAc,CAAA,QAAA,EAAU,aAAe,EAAA;AAAA,IAC1D,YAAc,EAAA,gDAAA;AAAA,IACd,wBAA0B,EAAA;AAAA,GAC1B,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqB,kBAAmB,CAAA,QAAA,EAAU,aAAa,CAAA;AAErE,EAAA,MAAM,WAAc,GAAA,kBAAA,CAAmB,IAAK,CAAA,CAAC,KAAU,KAAA;AAEtD,IAAA,IAAI,UAAU,kBAAoB,EAAA;AACjC,MAAO,OAAA,OAAA,CAAQ,KAAM,CAAA,KAAA,CAAM,IAAI,CAAA;AAAA;AAIhC,IAAO,OAAA,KAAA,CAAM,MAAM,IAAS,KAAA,KAAA;AAAA,GAC5B,CAAA;AAED,EAAA,OAAO,WAAe,IAAA,WAAA;AACvB;AAOO,SAAS,YAAmB,KAAgC,EAAA;AAClE,EAAM,MAAA,EAAE,QAAU,EAAA,IAAA,EAAS,GAAA,KAAA;AAE3B,EAAA,MAAM,mBAAmB,UAAW,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,IAAa,CAAI,GAAA,QAAA;AAE1E,EAAO,OAAA,gBAAA;AACR;AAEO,SAAS,aAAA,CAAc,EAAE,QAAA,EAA2C,EAAA;AAC1E,EAAO,OAAA,QAAA;AACR;AACA,aAAc,CAAA,UAAA,GAAa,OAAO,gBAAgB,CAAA;;;ACvDlD,IAAA,oBAAA,GAAA;AAAA,QAAA,CAAA,oBAAA,EAAA;AAAA,EAAA,OAAA,EAAA,MAAA,aAAA;AAAA,EAAA,KAAA,EAAA,MAAA,WAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"index.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { getRegularChildren, getSingleSlot } from \"@/lib/utils/getSlot\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype ValidSwitchComponentType = React.ReactElement<SwitchMatchProps<unknown>>;\n\ntype SwitchProps = {\n\tchildren: ValidSwitchComponentType | ValidSwitchComponentType[];\n\tvalue?: unknown;\n};\n\nconst defaultValueSymbol = Symbol(\"default-value\");\n\nexport function SwitchRoot(props: SwitchProps) {\n\tconst { children, value = defaultValueSymbol } = props;\n\n\tconst defaultCase = getSingleSlot(children, SwitchDefault, {\n\t\terrorMessage: \"Only one <Switch.Default> component is allowed\",\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tconst childrenCasesArray = getRegularChildren(children, SwitchDefault) as ValidSwitchComponentType[];\n\n\tconst matchedCase = childrenCasesArray.find((child) => {\n\t\t// == If value is defaultValueSymbol, match the cases in order like switch(true)\n\t\tif (value === defaultValueSymbol) {\n\t\t\treturn Boolean(child.props.when);\n\t\t}\n\n\t\t// == Otherwise, match the cases like switch(value)\n\t\treturn child.props.when === value;\n\t});\n\n\treturn matchedCase ?? defaultCase;\n}\n\ntype SwitchMatchProps<TWhen> = {\n\tchildren: React.ReactNode | ((value: TWhen) => React.ReactNode);\n\twhen: false | TWhen | null | undefined;\n};\n\nexport function SwitchMatch<TWhen>(props: SwitchMatchProps<TWhen>) {\n\tconst { children, when } = props;\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\treturn resolvedChildren;\n}\n\nexport function SwitchDefault({ children }: { children: React.ReactNode }) {\n\treturn children;\n}\nSwitchDefault.slotSymbol = Symbol(\"switch-default\");\n","export { SwitchDefault as Default, SwitchMatch as Match, SwitchRoot as Root } from \"./switch\";\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -1,32 +1,4 @@
1
+ export { Teleport } from '../../../chunk-G5BNZM66.js';
1
2
  import '../../../chunk-PZ5AY32C.js';
2
- import { useState, useEffect } from 'react';
3
- import { isString } from '@zayne-labs/toolkit-type-helpers';
4
- import { createPortal } from 'react-dom';
5
-
6
- function Teleport(props) {
7
- const { children, insertPosition, to } = props;
8
- const [portalContainer, setPortalContainer] = useState(null);
9
- useEffect(() => {
10
- if (!to) return;
11
- if (insertPosition) return;
12
- const destination = isString(to) ? document.querySelector(to) : to;
13
- destination && setPortalContainer(destination);
14
- }, [to, insertPosition]);
15
- useEffect(() => {
16
- if (!to) return;
17
- if (!insertPosition) return;
18
- const destination = isString(to) ? document.querySelector(to) : to;
19
- const tempWrapper = document.createElement("div");
20
- tempWrapper.style.display = "contents";
21
- destination?.insertAdjacentElement(insertPosition, tempWrapper);
22
- setPortalContainer(tempWrapper);
23
- return () => {
24
- tempWrapper.remove();
25
- };
26
- }, [to, insertPosition]);
27
- return portalContainer && createPortal(children, portalContainer);
28
- }
29
-
30
- export { Teleport };
31
3
  //# sourceMappingURL=index.js.map
32
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/common/teleport/teleport.tsx"],"names":[],"mappings":";;;;;AAgBA,SAAS,SAAS,KAAoB,EAAA;AACrC,EAAA,MAAM,EAAE,QAAA,EAAU,cAAgB,EAAA,EAAA,EAAO,GAAA,KAAA;AAEzC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAA6B,IAAI,CAAA;AAI/E,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,CAAC,EAAI,EAAA;AAET,IAAA,IAAI,cAAgB,EAAA;AAEpB,IAAA,MAAM,cAAc,QAAS,CAAA,EAAE,IAAI,QAAS,CAAA,aAAA,CAA2B,EAAE,CAAI,GAAA,EAAA;AAE7E,IAAA,WAAA,IAAe,mBAAmB,WAAW,CAAA;AAAA,GAC3C,EAAA,CAAC,EAAI,EAAA,cAAc,CAAC,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,CAAC,EAAI,EAAA;AAET,IAAA,IAAI,CAAC,cAAgB,EAAA;AAErB,IAAA,MAAM,cAAc,QAAS,CAAA,EAAE,IAAI,QAAS,CAAA,aAAA,CAA2B,EAAE,CAAI,GAAA,EAAA;AAE7E,IAAM,MAAA,WAAA,GAAc,QAAS,CAAA,aAAA,CAAc,KAAK,CAAA;AAChD,IAAA,WAAA,CAAY,MAAM,OAAU,GAAA,UAAA;AAE5B,IAAa,WAAA,EAAA,qBAAA,CAAsB,gBAAgB,WAAW,CAAA;AAE9D,IAAA,kBAAA,CAAmB,WAAW,CAAA;AAE9B,IAAA,OAAO,MAAM;AACZ,MAAA,WAAA,CAAY,MAAO,EAAA;AAAA,KACpB;AAAA,GACE,EAAA,CAAC,EAAI,EAAA,cAAc,CAAC,CAAA;AAIvB,EAAO,OAAA,eAAA,IAAmB,YAAa,CAAA,QAAA,EAAU,eAAe,CAAA;AACjE","file":"index.js","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { type AnyString, isString } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\ntype ValidHtmlTags = keyof HTMLElementTagNameMap;\n\ntype PortalProps = {\n\tchildren: React.ReactNode;\n\tinsertPosition?: InsertPosition;\n\tto: AnyString | HTMLElement | ValidHtmlTags | null;\n};\n\nfunction Teleport(props: PortalProps) {\n\tconst { children, insertPosition, to } = props;\n\n\tconst [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);\n\n\t/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect -- Allow */\n\n\tuseEffect(() => {\n\t\tif (!to) return;\n\n\t\tif (insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tdestination && setPortalContainer(destination);\n\t}, [to, insertPosition]);\n\n\tuseEffect(() => {\n\t\tif (!to) return;\n\n\t\tif (!insertPosition) return;\n\n\t\tconst destination = isString(to) ? document.querySelector<HTMLElement>(to) : to;\n\n\t\tconst tempWrapper = document.createElement(\"div\");\n\t\ttempWrapper.style.display = \"contents\";\n\n\t\tdestination?.insertAdjacentElement(insertPosition, tempWrapper);\n\n\t\tsetPortalContainer(tempWrapper);\n\n\t\treturn () => {\n\t\t\ttempWrapper.remove();\n\t\t};\n\t}, [to, insertPosition]);\n\n\t/* eslint-enable react-hooks-extra/no-direct-set-state-in-use-effect -- Allow */\n\n\treturn portalContainer && createPortal(children, portalContainer);\n}\n\nexport { Teleport };\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -1,45 +1,6 @@
1
- import { cnMerge } from '../../../chunk-OHG7GB7O.js';
2
- import { Slot } from '../../../chunk-2P3P5AXH.js';
3
- import { __export } from '../../../chunk-PZ5AY32C.js';
4
- import * as React from 'react';
5
-
6
- function CardRoot(props) {
7
- const { as: Element = "article", ...restOfProps } = props;
8
- return /* @__PURE__ */ React.createElement(Element, { ...restOfProps });
9
- }
10
- function CardHeader(props) {
11
- const { as: Element = "header", ...restOfProps } = props;
12
- return /* @__PURE__ */ React.createElement(Element, { ...restOfProps });
13
- }
14
- function CardTitle(props) {
15
- const { as: Element = "h3", className, ...restOfProps } = props;
16
- return /* @__PURE__ */ React.createElement(Element, { className: cnMerge("font-semibold", className), ...restOfProps });
17
- }
18
- function CardDescription(props) {
19
- const { as: Element = "p", className, ...restOfProps } = props;
20
- return /* @__PURE__ */ React.createElement(Element, { className: cnMerge("text-shadcn-muted-foreground text-sm", className), ...restOfProps });
21
- }
22
- function CardContent(props) {
23
- const { as: Element = "div", ...restOfProps } = props;
24
- return /* @__PURE__ */ React.createElement(Element, { ...restOfProps });
25
- }
26
- function CardFooter(props) {
27
- const { as: Element = "footer", asChild, ...restOfProps } = props;
28
- const Component = asChild ? Slot : Element;
29
- return /* @__PURE__ */ React.createElement(Component, { ...restOfProps });
30
- }
31
-
32
- // src/components/ui/card/card-parts.ts
33
- var card_parts_exports = {};
34
- __export(card_parts_exports, {
35
- Content: () => CardContent,
36
- Description: () => CardDescription,
37
- Footer: () => CardFooter,
38
- Header: () => CardHeader,
39
- Root: () => CardRoot,
40
- Title: () => CardTitle
41
- });
42
-
43
- export { card_parts_exports as Card, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };
1
+ export { card_parts_exports as Card, CardContent, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from '../../../chunk-KLEJZWKY.js';
2
+ import '../../../chunk-OHG7GB7O.js';
3
+ import '../../../chunk-Y5VBSXZS.js';
4
+ import '../../../chunk-PZ5AY32C.js';
44
5
  //# sourceMappingURL=index.js.map
45
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/ui/card/card.tsx","../../../../../src/components/ui/card/card-parts.ts"],"names":[],"mappings":";;;;;AAMO,SAAS,SACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,SAAW,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEpD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAClC;AAEO,SAAS,WACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,QAAU,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEnD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAClC;AAEO,SAAS,UAAqD,KAAmC,EAAA;AACvG,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,MAAM,SAAW,EAAA,GAAG,aAAgB,GAAA,KAAA;AAE1D,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,SAAW,EAAA,OAAA,CAAQ,iBAAiB,SAAS,CAAA,EAAI,GAAG,WAAa,EAAA,CAAA;AAClF;AAEO,SAAS,gBACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,KAAK,SAAW,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEzD,EACC,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAQ,SAAW,EAAA,OAAA,CAAQ,wCAAwC,SAAS,CAAA,EAAI,GAAG,WAAa,EAAA,CAAA;AAEnG;AAEO,SAAS,YACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,KAAO,EAAA,GAAG,aAAgB,GAAA,KAAA;AAEhD,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAS,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AAClC;AAEO,SAAS,WACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,OAAA,GAAU,UAAU,OAAS,EAAA,GAAG,aAAgB,GAAA,KAAA;AAE5D,EAAM,MAAA,SAAA,GAAY,UAAU,IAAO,GAAA,OAAA;AAEnC,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,WAAa,EAAA,CAAA;AACpC;;;ACtDA,IAAA,kBAAA,GAAA;AAAA,QAAA,CAAA,kBAAA,EAAA;AAAA,EAAA,OAAA,EAAA,MAAA,WAAA;AAAA,EAAA,WAAA,EAAA,MAAA,eAAA;AAAA,EAAA,MAAA,EAAA,MAAA,UAAA;AAAA,EAAA,MAAA,EAAA,MAAA,UAAA;AAAA,EAAA,IAAA,EAAA,MAAA,QAAA;AAAA,EAAA,KAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\n\nimport { Slot } from \"@/components/common/slot\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\n\nexport function CardRoot<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"article\", ...restOfProps } = props;\n\n\treturn <Element {...restOfProps} />;\n}\n\nexport function CardHeader<TElement extends React.ElementType = \"header\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"header\", ...restOfProps } = props;\n\n\treturn <Element {...restOfProps} />;\n}\n\nexport function CardTitle<TElement extends React.ElementType = \"h3\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"h3\", className, ...restOfProps } = props;\n\n\treturn <Element className={cnMerge(\"font-semibold\", className)} {...restOfProps} />;\n}\n\nexport function CardDescription<TElement extends React.ElementType = \"p\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"p\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element className={cnMerge(\"text-shadcn-muted-foreground text-sm\", className)} {...restOfProps} />\n\t);\n}\n\nexport function CardContent<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"div\", ...restOfProps } = props;\n\n\treturn <Element {...restOfProps} />;\n}\n\nexport function CardFooter<TElement extends React.ElementType = \"footer\">(\n\tprops: PolymorphicProps<TElement, { asChild?: boolean }>\n) {\n\tconst { as: Element = \"footer\", asChild, ...restOfProps } = props;\n\n\tconst Component = asChild ? Slot : Element;\n\n\treturn <Component {...restOfProps} />;\n}\n","export {\n\tCardContent as Content,\n\tCardDescription as Description,\n\tCardFooter as Footer,\n\tCardHeader as Header,\n\tCardRoot as Root,\n\tCardTitle as Title,\n} from \"./card\";\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -1,275 +1,16 @@
1
- import { cnMerge } from '../../../chunk-OHG7GB7O.js';
2
- import { getElementList } from '../../../chunk-ZNL6YLIM.js';
3
- import { show_parts_exports } from '../../../chunk-V5DSTESN.js';
4
- import '../../../chunk-IUEPHHGO.js';
5
- import { __export } from '../../../chunk-PZ5AY32C.js';
6
- import * as React3 from 'react';
7
- import { useEffect, useState } from 'react';
8
- import { useConstant, useAnimationInterval, useCallbackRef } from '@zayne-labs/toolkit-react';
9
- import { createZustandContext } from '@zayne-labs/toolkit-react/zustand';
10
- import { create } from 'zustand';
11
-
12
- var [Provider, useCarouselStoreContext] = createZustandContext({
13
- hookName: "useCarouselStore",
14
- name: "CarouselStoreContext",
15
- providerName: "CarouselContextProvider"
16
- });
17
- var createCarouselStore = (storeValues) => {
18
- const { images, onSlideBtnClick } = storeValues;
19
- const useInitCarouselStore = create()((set, get) => ({
20
- currentSlide: 0,
21
- images,
22
- maxSlide: images.length - 1,
23
- /* eslint-disable perfectionist/sort-objects -- actions should be last */
24
- actions: {
25
- /* eslint-enable perfectionist/sort-objects -- actions should be last */
26
- goToNextSlide: () => {
27
- const { currentSlide, maxSlide } = get();
28
- const { goToSlide } = get().actions;
29
- if (currentSlide === maxSlide) {
30
- goToSlide(0);
31
- return;
32
- }
33
- goToSlide(currentSlide + 1);
34
- },
35
- goToPreviousSlide: () => {
36
- const { currentSlide, maxSlide } = get();
37
- const { goToSlide } = get().actions;
38
- if (currentSlide === 0) {
39
- goToSlide(maxSlide);
40
- return;
41
- }
42
- goToSlide(currentSlide - 1);
43
- },
44
- goToSlide: (newValue) => {
45
- onSlideBtnClick?.();
46
- set({ currentSlide: newValue });
47
- }
48
- }
49
- }));
50
- return useInitCarouselStore;
51
- };
52
- var useCarousel = (props) => {
53
- const { images, onSlideBtnClick } = props;
54
- const useInitCarouselStore = useConstant(() => createCarouselStore({ images, onSlideBtnClick }));
55
- useEffect(() => {
56
- useInitCarouselStore.setState({ images });
57
- }, [images]);
58
- return useInitCarouselStore;
59
- };
60
- function CarouselContextProvider(props) {
61
- const { children, images, onSlideBtnClick } = props;
62
- const useInitCarouselStore = useCarousel({ images, onSlideBtnClick });
63
- return /* @__PURE__ */ React3.createElement(Provider, { value: useInitCarouselStore }, children);
64
- }
65
- var ChevronLeftIcon = (props) => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React3.createElement("g", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }, /* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React3.createElement("path", { d: "m14 16l-4-4l4-4" })));
66
- var useCarouselOptions = (options = {}) => {
67
- const { autoSlideInterval = 5e3, hasAutoSlide = false, shouldPauseOnHover = false } = options;
68
- const { goToNextSlide } = useCarouselStoreContext((state) => state.actions);
69
- const [isPaused, setIsPaused] = useState(false);
70
- const shouldAutoSlide = hasAutoSlide && !isPaused;
71
- useAnimationInterval({
72
- intervalDuration: shouldAutoSlide ? autoSlideInterval : null,
73
- onAnimation: goToNextSlide
74
- });
75
- const pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));
76
- const resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));
77
- return { pauseAutoSlide, resumeAutoSlide };
78
- };
79
-
80
- // src/components/ui/carousel/carousel.tsx
81
- function CarouselContent(props) {
82
- const {
83
- as: HtmlElement = "article",
84
- autoSlideInterval,
85
- children,
86
- classNames,
87
- hasAutoSlide,
88
- shouldPauseOnHover
89
- } = props;
90
- const { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({
91
- autoSlideInterval,
92
- hasAutoSlide,
93
- shouldPauseOnHover
94
- });
95
- return /* @__PURE__ */ React3.createElement(
96
- HtmlElement,
97
- {
98
- "data-id": "Carousel",
99
- className: cnMerge("relative select-none", classNames?.base),
100
- onMouseEnter: pauseAutoSlide,
101
- onMouseLeave: resumeAutoSlide
102
- },
103
- /* @__PURE__ */ React3.createElement(
104
- "div",
105
- {
106
- "data-id": "Scroll Container",
107
- className: cnMerge(
108
- "flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
109
- classNames?.scrollContainer
110
- )
111
- },
112
- children
113
- )
114
- );
115
- }
116
- function CarouselButton(props) {
117
- const { classNames, icon, variant } = props;
118
- const { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);
119
- return /* @__PURE__ */ React3.createElement(
120
- "button",
121
- {
122
- type: "button",
123
- className: cnMerge(
124
- "z-30 flex h-full w-fit items-center",
125
- variant === "prev" ? "justify-start" : "justify-end",
126
- classNames?.base
127
- ),
128
- onClick: variant === "prev" ? goToPreviousSlide : goToNextSlide
129
- },
130
- /* @__PURE__ */ React3.createElement("span", { className: cnMerge("transition-transform active:scale-[1.06]", classNames?.iconContainer) }, icon ?? /* @__PURE__ */ React3.createElement(
131
- ChevronLeftIcon,
132
- {
133
- className: cnMerge(variant === "next" && "rotate-180", classNames?.defaultIcon)
134
- }
135
- ))
136
- );
137
- }
138
- function CarouselControls(props) {
139
- const { classNames, icon } = props;
140
- return /* @__PURE__ */ React3.createElement("div", { className: cnMerge("absolute inset-0 flex justify-between", classNames?.base) }, /* @__PURE__ */ React3.createElement(show_parts_exports.Root, { when: icon?.iconType }, /* @__PURE__ */ React3.createElement(
141
- CarouselButton,
142
- {
143
- variant: "prev",
144
- classNames: {
145
- defaultIcon: classNames?.defaultIcon,
146
- iconContainer: cnMerge(
147
- icon?.iconType === "nextIcon" && "rotate-180",
148
- classNames?.iconContainer
149
- )
150
- },
151
- icon: icon?.icon
152
- }
153
- ), /* @__PURE__ */ React3.createElement(
154
- CarouselButton,
155
- {
156
- variant: "next",
157
- classNames: {
158
- defaultIcon: classNames?.defaultIcon,
159
- iconContainer: cnMerge(
160
- icon?.iconType === "prevIcon" && "rotate-180",
161
- classNames?.iconContainer
162
- )
163
- },
164
- icon: icon?.icon
165
- }
166
- ), /* @__PURE__ */ React3.createElement(show_parts_exports.Otherwise, null, /* @__PURE__ */ React3.createElement(
167
- CarouselButton,
168
- {
169
- variant: "prev",
170
- classNames: {
171
- defaultIcon: classNames?.defaultIcon,
172
- iconContainer: classNames?.iconContainer
173
- },
174
- icon: icon?.prev
175
- }
176
- ), /* @__PURE__ */ React3.createElement(
177
- CarouselButton,
178
- {
179
- variant: "next",
180
- classNames: {
181
- defaultIcon: classNames?.defaultIcon,
182
- iconContainer: classNames?.iconContainer
183
- },
184
- icon: icon?.next
185
- }
186
- ))));
187
- }
188
- function CarouselItemGroup(props) {
189
- const { children, className, each, render } = props;
190
- const [ItemList] = getElementList("base");
191
- const currentSlide = useCarouselStoreContext((state) => state.currentSlide);
192
- const images = useCarouselStoreContext((state) => each ?? state.images);
193
- return /* @__PURE__ */ React3.createElement(
194
- "ul",
195
- {
196
- "data-id": "Carousel Image Wrapper",
197
- className: cnMerge(
198
- `flex w-full shrink-0 snap-center [transform:translate3d(var(--translate-distance),0,0)]
199
- [transition:transform_800ms_ease]`,
200
- className
201
- ),
202
- style: {
203
- "--translate-distance": `-${currentSlide * 100}%`
204
- }
205
- },
206
- typeof render === "function" ? /* @__PURE__ */ React3.createElement(ItemList, { each: images, render }) : /* @__PURE__ */ React3.createElement(ItemList, { each: images }, children)
207
- );
208
- }
209
- function CarouselItem({ children, className, ...restOfProps }) {
210
- return /* @__PURE__ */ React3.createElement(
211
- "li",
212
- {
213
- className: cnMerge("flex w-full shrink-0 snap-center justify-center", className),
214
- ...restOfProps
215
- },
216
- children
217
- );
218
- }
219
- function CarouselCaption(props) {
220
- const { as: HtmlElement = "div", children, className } = props;
221
- return /* @__PURE__ */ React3.createElement(HtmlElement, { "data-id": "Carousel Caption", className: cnMerge("absolute z-10", className) }, children);
222
- }
223
- function CarouselIndicatorGroup(props) {
224
- const { children, className, each, render } = props;
225
- const images = useCarouselStoreContext((state) => each ?? state.images);
226
- const [IndicatorList] = getElementList("base");
227
- return /* @__PURE__ */ React3.createElement(
228
- "ul",
229
- {
230
- "data-id": "Carousel Indicators",
231
- className: cnMerge(
232
- "absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]",
233
- className
234
- )
235
- },
236
- typeof render === "function" ? /* @__PURE__ */ React3.createElement(IndicatorList, { each: images, render }) : /* @__PURE__ */ React3.createElement(IndicatorList, { each: images }, children)
237
- );
238
- }
239
- function CarouselIndicator(props) {
240
- const { classNames, currentIndex } = props;
241
- const {
242
- actions: { goToSlide },
243
- currentSlide
244
- } = useCarouselStoreContext((state) => state);
245
- return /* @__PURE__ */ React3.createElement("li", { className: cnMerge("inline-flex", classNames?.base) }, /* @__PURE__ */ React3.createElement(
246
- "button",
247
- {
248
- type: "button",
249
- onClick: () => goToSlide(currentIndex),
250
- className: cnMerge(
251
- "size-[6px] rounded-[50%]",
252
- classNames?.base,
253
- currentIndex === currentSlide && ["w-[35px] rounded-[5px]", classNames?.isActive]
254
- )
255
- }
256
- ));
257
- }
258
-
259
- // src/components/ui/carousel/carousel-parts.ts
260
- var carousel_parts_exports = {};
261
- __export(carousel_parts_exports, {
262
- Button: () => CarouselButton,
263
- Caption: () => CarouselCaption,
264
- Content: () => CarouselContent,
265
- Controls: () => CarouselControls,
266
- Indicator: () => CarouselIndicator,
267
- IndicatorGroup: () => CarouselIndicatorGroup,
268
- Item: () => CarouselItem,
269
- ItemGroup: () => CarouselItemGroup,
270
- Root: () => CarouselContextProvider
271
- });
272
-
273
- export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselContent, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup };
1
+ export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselContent, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup } from '../../../chunk-ZSDYJOYB.js';
2
+ import '../../../chunk-OHG7GB7O.js';
3
+ import '../../../chunk-CWUEUCR5.js';
4
+ import '../../../chunk-MT2MQDK2.js';
5
+ import '../../../chunk-EYWTW54R.js';
6
+ import '../../../chunk-G5BNZM66.js';
7
+ import '../../../chunk-Z6JJE4G6.js';
8
+ import '../../../chunk-N4274N5K.js';
9
+ import '../../../chunk-JC52CA2O.js';
10
+ import '../../../chunk-ZNL6YLIM.js';
11
+ import '../../../chunk-M7YXNGT6.js';
12
+ import '../../../chunk-YO5LJ7ZJ.js';
13
+ import '../../../chunk-Y5VBSXZS.js';
14
+ import '../../../chunk-PZ5AY32C.js';
274
15
  //# sourceMappingURL=index.js.map
275
16
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/ui/carousel/carousel-store-context.tsx","../../../../../src/components/ui/carousel/icons.tsx","../../../../../src/components/ui/carousel/useCarouselOptions.ts","../../../../../src/components/ui/carousel/carousel.tsx","../../../../../src/components/ui/carousel/carousel-parts.ts"],"names":["React","React2"],"mappings":";;;;;;;;;;;AASA,IAAM,CAAC,QAAA,EAAU,uBAAuB,CAAA,GAAI,oBAAoC,CAAA;AAAA,EAC/E,QAAU,EAAA,kBAAA;AAAA,EACV,IAAM,EAAA,sBAAA;AAAA,EACN,YAAc,EAAA;AACf,CAAC,CAAA;AAGD,IAAM,mBAAA,GAAsB,CAC3B,WACI,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,eAAA,EAAoB,GAAA,WAAA;AAEpC,EAAA,MAAM,oBAAuB,GAAA,MAAA,EAAiC,CAAA,CAAC,KAAK,GAAS,MAAA;AAAA,IAC5E,YAAc,EAAA,CAAA;AAAA,IACd,MAAA;AAAA,IACA,QAAA,EAAU,OAAO,MAAS,GAAA,CAAA;AAAA;AAAA,IAG1B,OAAS,EAAA;AAAA;AAAA,MAGR,eAAe,MAAM;AACpB,QAAA,MAAM,EAAE,YAAA,EAAc,QAAS,EAAA,GAAI,GAAI,EAAA;AACvC,QAAA,MAAM,EAAE,SAAA,EAAc,GAAA,GAAA,EAAM,CAAA,OAAA;AAE5B,QAAA,IAAI,iBAAiB,QAAU,EAAA;AAC9B,UAAA,SAAA,CAAU,CAAC,CAAA;AACX,UAAA;AAAA;AAGD,QAAA,SAAA,CAAU,eAAe,CAAC,CAAA;AAAA,OAC3B;AAAA,MAEA,mBAAmB,MAAM;AACxB,QAAA,MAAM,EAAE,YAAA,EAAc,QAAS,EAAA,GAAI,GAAI,EAAA;AACvC,QAAA,MAAM,EAAE,SAAA,EAAc,GAAA,GAAA,EAAM,CAAA,OAAA;AAE5B,QAAA,IAAI,iBAAiB,CAAG,EAAA;AACvB,UAAA,SAAA,CAAU,QAAQ,CAAA;AAClB,UAAA;AAAA;AAGD,QAAA,SAAA,CAAU,eAAe,CAAC,CAAA;AAAA,OAC3B;AAAA,MAEA,SAAA,EAAW,CAAC,QAAa,KAAA;AACxB,QAAkB,eAAA,IAAA;AAElB,QAAI,GAAA,CAAA,EAAE,YAAc,EAAA,QAAA,EAAU,CAAA;AAAA;AAC/B;AACD,GACC,CAAA,CAAA;AAEF,EAAO,OAAA,oBAAA;AACR,CAAA;AAEA,IAAM,WAAA,GAAc,CACnB,KACI,KAAA;AACJ,EAAM,MAAA,EAAE,MAAQ,EAAA,eAAA,EAAoB,GAAA,KAAA;AAEpC,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM,mBAAA,CAAoB,EAAE,MAAQ,EAAA,eAAA,EAAiB,CAAC,CAAA;AAG/F,EAAA,SAAA,CAAU,MAAM;AACf,IAAqB,oBAAA,CAAA,QAAA,CAAS,EAAE,MAAA,EAAQ,CAAA;AAAA,GAEzC,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAO,OAAA,oBAAA;AACR,CAAA;AAGA,SAAS,wBAAoD,KAAuC,EAAA;AACnG,EAAA,MAAM,EAAE,QAAA,EAAU,MAAQ,EAAA,eAAA,EAAoB,GAAA,KAAA;AAE9C,EAAA,MAAM,oBAAuB,GAAA,WAAA,CAAY,EAAE,MAAA,EAAQ,iBAAiB,CAAA;AAEpE,EAAA,uBAAQA,MAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,oBAAA,EAAA,EAAuB,QAAS,CAAA;AACzD;ACtFO,IAAM,kBAAkB,CAAC,KAAA,0CAC9B,KAAI,EAAA,EAAA,KAAA,EAAM,8BAA6B,KAAM,EAAA,KAAA,EAAM,MAAO,EAAA,KAAA,EAAM,SAAQ,WAAa,EAAA,GAAG,yBACvFC,MAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAE,MAAK,MAAO,EAAA,MAAA,EAAO,cAAe,EAAA,aAAA,EAAc,SAAQ,cAAe,EAAA,OAAA,EAAQ,aAAY,GAC7F,EAAA,kBAAAA,MAAA,CAAA,aAAA,CAAC,YAAO,EAAG,EAAA,IAAA,EAAK,IAAG,IAAK,EAAA,CAAA,EAAE,MAAK,CAC/B,kBAAAA,MAAA,CAAA,aAAA,CAAC,UAAK,CAAE,EAAA,iBAAA,EAAkB,CAC3B,CACD,CAAA;ACED,IAAM,kBAAqB,GAAA,CAAC,OAA2B,GAAA,EAAO,KAAA;AAC7D,EAAA,MAAM,EAAE,iBAAoB,GAAA,GAAA,EAAM,eAAe,KAAO,EAAA,kBAAA,GAAqB,OAAU,GAAA,OAAA;AAEvF,EAAA,MAAM,EAAE,aAAc,EAAA,GAAI,wBAAwB,CAAC,KAAA,KAAU,MAAM,OAAO,CAAA;AAE1E,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,eAAA,GAAkB,gBAAgB,CAAC,QAAA;AAEzC,EAAqB,oBAAA,CAAA;AAAA,IACpB,gBAAA,EAAkB,kBAAkB,iBAAoB,GAAA,IAAA;AAAA,IACxD,WAAa,EAAA;AAAA,GACb,CAAA;AAED,EAAA,MAAM,iBAAiB,cAAe,CAAA,MAAM,kBAAsB,IAAA,WAAA,CAAY,IAAI,CAAC,CAAA;AAEnF,EAAA,MAAM,kBAAkB,cAAe,CAAA,MAAM,kBAAsB,IAAA,WAAA,CAAY,KAAK,CAAC,CAAA;AAErF,EAAO,OAAA,EAAE,gBAAgB,eAAgB,EAAA;AAC1C,CAAA;;;ACRO,SAAS,gBACf,KACC,EAAA;AACD,EAAM,MAAA;AAAA,IACL,IAAI,WAAc,GAAA,SAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACG,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,cAAA,EAAgB,eAAgB,EAAA,GAAI,kBAAmB,CAAA;AAAA,IAC9D,iBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACA,CAAA;AAGD,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACA,SAAQ,EAAA,UAAA;AAAA,MACR,SAAW,EAAA,OAAA,CAAQ,sBAAwB,EAAA,UAAA,EAAY,IAAI,CAAA;AAAA,MAC3D,YAAc,EAAA,cAAA;AAAA,MACd,YAAc,EAAA;AAAA,KAAA;AAAA,oBAEd,MAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,SAAQ,EAAA,kBAAA;AAAA,QACR,SAAW,EAAA,OAAA;AAAA,UACV,uFAAA;AAAA,UACA,UAAY,EAAA;AAAA;AACb,OAAA;AAAA,MAEC;AAAA;AACF,GACD;AAEF;AAEO,SAAS,eAAe,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,IAAM,EAAA,OAAA,EAAY,GAAA,KAAA;AAEtC,EAAM,MAAA,EAAE,eAAe,iBAAkB,EAAA,GAAI,wBAAwB,CAAC,KAAA,KAAU,MAAM,OAAO,CAAA;AAE7F,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAA,OAAA;AAAA,QACV,qCAAA;AAAA,QACA,OAAA,KAAY,SAAS,eAAkB,GAAA,aAAA;AAAA,QACvC,UAAY,EAAA;AAAA,OACb;AAAA,MACA,OAAA,EAAS,OAAY,KAAA,MAAA,GAAS,iBAAoB,GAAA;AAAA,KAAA;AAAA,oBAElD,MAAA,CAAA,aAAA,CAAC,UAAK,SAAW,EAAA,OAAA,CAAQ,4CAA4C,UAAY,EAAA,aAAa,KAC5F,IACA,oBAAA,MAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACA,WAAW,OAAQ,CAAA,OAAA,KAAY,MAAU,IAAA,YAAA,EAAc,YAAY,WAAW;AAAA;AAAA,KAGjF;AAAA,GACD;AAEF;AAEO,SAAS,iBAAiB,KAA6B,EAAA;AAC7D,EAAM,MAAA,EAAE,UAAY,EAAA,IAAA,EAAS,GAAA,KAAA;AAE7B,EAAA,uBACE,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,yCAAyC,UAAY,EAAA,IAAI,CAChF,EAAA,kBAAA,MAAA,CAAA,aAAA,CAAC,kBAAK,CAAA,IAAA,EAAL,EAAU,IAAA,EAAM,MAAM,QACtB,EAAA,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,aAAe,EAAA,OAAA;AAAA,UACd,IAAA,EAAM,aAAa,UAAc,IAAA,YAAA;AAAA,UACjC,UAAY,EAAA;AAAA;AACb,OACD;AAAA,MACA,MAAM,IAAM,EAAA;AAAA;AAAA,GAGb,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,aAAe,EAAA,OAAA;AAAA,UACd,IAAA,EAAM,aAAa,UAAc,IAAA,YAAA;AAAA,UACjC,UAAY,EAAA;AAAA;AACb,OACD;AAAA,MACA,MAAM,IAAM,EAAA;AAAA;AAAA,GAGb,kBAAA,MAAA,CAAA,aAAA,CAAC,kBAAK,CAAA,SAAA,EAAL,IACA,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,eAAe,UAAY,EAAA;AAAA,OAC5B;AAAA,MACA,MAAM,IAAM,EAAA;AAAA;AAAA,GAGb,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACA,OAAQ,EAAA,MAAA;AAAA,MACR,UAAY,EAAA;AAAA,QACX,aAAa,UAAY,EAAA,WAAA;AAAA,QACzB,eAAe,UAAY,EAAA;AAAA,OAC5B;AAAA,MACA,MAAM,IAAM,EAAA;AAAA;AAAA,GAEd,CACD,CACD,CAAA;AAEF;AAEO,SAAS,kBAA8B,KAAyC,EAAA;AACtF,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,IAAA,EAAM,QAAW,GAAA,KAAA;AAE9C,EAAA,MAAM,CAAC,QAAQ,CAAI,GAAA,cAAA,CAAe,MAAM,CAAA;AACxC,EAAA,MAAM,YAAe,GAAA,uBAAA,CAAwB,CAAC,KAAA,KAAU,MAAM,YAAY,CAAA;AAC1E,EAAA,MAAM,SAAS,uBAAwB,CAAA,CAAC,KAAU,KAAA,IAAA,IAAS,MAAM,MAAuB,CAAA;AAExF,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,SAAQ,EAAA,wBAAA;AAAA,MACR,SAAW,EAAA,OAAA;AAAA,QACV,CAAA;AAAA,qCAAA,CAAA;AAAA,QAEA;AAAA,OACD;AAAA,MACA,KACC,EAAA;AAAA,QACC,sBAAA,EAAwB,CAAI,CAAA,EAAA,YAAA,GAAe,GAAG,CAAA,CAAA;AAAA;AAC/C,KAAA;AAAA,IAGA,OAAO,MAAA,KAAW,UAClB,mBAAA,MAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,MAAQ,EAAA,MAAA,EAAgB,CAExC,mBAAA,MAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,IAAA,EAAM,UAAS,QAAS;AAAA,GAEpC;AAEF;AAEO,SAAS,aAAa,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,aAAmC,EAAA;AACzF,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,OAAQ,CAAA,iDAAA,EAAmD,SAAS,CAAA;AAAA,MAC9E,GAAG;AAAA,KAAA;AAAA,IAEH;AAAA,GACF;AAEF;AAEO,SAAS,gBACf,KACC,EAAA;AACD,EAAA,MAAM,EAAE,EAAI,EAAA,WAAA,GAAc,KAAO,EAAA,QAAA,EAAU,WAAc,GAAA,KAAA;AAEzD,EACC,uBAAA,MAAA,CAAA,aAAA,CAAC,eAAY,SAAQ,EAAA,kBAAA,EAAmB,WAAW,OAAQ,CAAA,eAAA,EAAiB,SAAS,CAAA,EAAA,EACnF,QACF,CAAA;AAEF;AAEO,SAAS,uBAAmC,KAAyC,EAAA;AAC3F,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,IAAA,EAAM,QAAW,GAAA,KAAA;AAE9C,EAAA,MAAM,SAAS,uBAAwB,CAAA,CAAC,KAAU,KAAA,IAAA,IAAS,MAAM,MAAuB,CAAA;AACxF,EAAA,MAAM,CAAC,aAAa,CAAI,GAAA,cAAA,CAAe,MAAM,CAAA;AAE7C,EACC,uBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,SAAQ,EAAA,qBAAA;AAAA,MACR,SAAW,EAAA,OAAA;AAAA,QACV,iFAAA;AAAA,QACA;AAAA;AACD,KAAA;AAAA,IAEC,OAAO,MAAA,KAAW,UAClB,mBAAA,MAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,IAAA,EAAM,MAAQ,EAAA,MAAA,EAAgB,CAE7C,mBAAA,MAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,IAAA,EAAM,UAAS,QAAS;AAAA,GAEzC;AAEF;AAEO,SAAS,kBAAkB,KAA+B,EAAA;AAChE,EAAM,MAAA,EAAE,UAAY,EAAA,YAAA,EAAiB,GAAA,KAAA;AAErC,EAAM,MAAA;AAAA,IACL,OAAA,EAAS,EAAE,SAAU,EAAA;AAAA,IACrB;AAAA,GACG,GAAA,uBAAA,CAAwB,CAAC,KAAA,KAAU,KAAK,CAAA;AAE5C,EAAA,4CACE,IAAG,EAAA,EAAA,SAAA,EAAW,QAAQ,aAAe,EAAA,UAAA,EAAY,IAAI,CACrD,EAAA,kBAAA,MAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,OAAA,EAAS,MAAM,SAAA,CAAU,YAAY,CAAA;AAAA,MACrC,SAAW,EAAA,OAAA;AAAA,QACV,0BAAA;AAAA,QACA,UAAY,EAAA,IAAA;AAAA,QACZ,YAAiB,KAAA,YAAA,IAAgB,CAAC,wBAAA,EAA0B,YAAY,QAAQ;AAAA;AACjF;AAAA,GAEF,CAAA;AAEF;;;AC7OA,IAAA,sBAAA,GAAA;AAAA,QAAA,CAAA,sBAAA,EAAA;AAAA,EAAA,MAAA,EAAA,MAAA,cAAA;AAAA,EAAA,OAAA,EAAA,MAAA,eAAA;AAAA,EAAA,OAAA,EAAA,MAAA,eAAA;AAAA,EAAA,QAAA,EAAA,MAAA,gBAAA;AAAA,EAAA,SAAA,EAAA,MAAA,iBAAA;AAAA,EAAA,cAAA,EAAA,MAAA,sBAAA;AAAA,EAAA,IAAA,EAAA,MAAA,YAAA;AAAA,EAAA,SAAA,EAAA,MAAA,iBAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\n\nimport { useConstant } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport type { CarouselProviderProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [Provider, useCarouselStoreContext] = createZustandContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselContextProvider\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselProviderProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst useInitCarouselStore = create<CarouselStore<TImages>>()((set, get) => ({\n\t\tcurrentSlide: 0,\n\t\timages,\n\t\tmaxSlide: images.length - 1,\n\n\t\t/* eslint-disable perfectionist/sort-objects -- actions should be last */\n\t\tactions: {\n\t\t\t/* eslint-enable perfectionist/sort-objects -- actions should be last */\n\n\t\t\tgoToNextSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === maxSlide) {\n\t\t\t\t\tgoToSlide(0);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide + 1);\n\t\t\t},\n\n\t\t\tgoToPreviousSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === 0) {\n\t\t\t\t\tgoToSlide(maxSlide);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide - 1);\n\t\t\t},\n\n\t\t\tgoToSlide: (newValue) => {\n\t\t\t\tonSlideBtnClick?.();\n\n\t\t\t\tset({ currentSlide: newValue });\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn useInitCarouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(\n\tprops: Omit<CarouselProviderProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst useInitCarouselStore = useConstant(() => createCarouselStore({ images, onSlideBtnClick }));\n\n\t// == To set images again when a page is mounted, preventing stale images from previous page\n\tuseEffect(() => {\n\t\tuseInitCarouselStore.setState({ images });\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps -- useInitCarouselStore is stable\n\t}, [images]);\n\n\treturn useInitCarouselStore;\n};\n\n// == Provider Component\nfunction CarouselContextProvider<TImages extends ImagesType>(props: CarouselProviderProps<TImages>) {\n\tconst { children, images, onSlideBtnClick } = props;\n\n\tconst useInitCarouselStore = useCarousel({ images, onSlideBtnClick });\n\n\treturn <Provider value={useInitCarouselStore}>{children}</Provider>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components -- It's fine\nexport { useCarouselStoreContext, CarouselContextProvider };\n","import * as React from \"react\";\n\nexport const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n\t\t<g fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\">\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"m14 16l-4-4l4-4\" />\n\t\t</g>\n\t</svg>\n);\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport { useCarouselStoreContext } from \"./carousel-store-context\";\n\ntype CarouselOptions = {\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions = {}) => {\n\tconst { autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst { goToNextSlide } = useCarouselStoreContext((state) => state.actions);\n\n\tconst [isPaused, setIsPaused] = useState(false);\n\n\tconst shouldAutoSlide = hasAutoSlide && !isPaused;\n\n\tuseAnimationInterval({\n\t\tintervalDuration: shouldAutoSlide ? autoSlideInterval : null,\n\t\tonAnimation: goToNextSlide,\n\t});\n\n\tconst pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));\n\n\tconst resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));\n\n\treturn { pauseAutoSlide, resumeAutoSlide };\n};\n\nexport { useCarouselOptions };\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { Show } from \"@/components/common\";\nimport { getElementList } from \"@/components/common/for\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport type { CssWithCustomProperties, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCarouselStoreContext } from \"./carousel-store-context\";\nimport { ChevronLeftIcon } from \"./icons\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselContentProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselWrapperProps,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO - Add dragging and swiping support\nexport function CarouselContent<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement, CarouselContentProps>\n) {\n\tconst {\n\t\tas: HtmlElement = \"article\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\t// FIXME - Prevent touch swipe on mobile using a cover element or allow swipe but it must update the state appropriately\n\treturn (\n\t\t<HtmlElement\n\t\t\tdata-id=\"Carousel\"\n\t\t\tclassName={cnMerge(\"relative select-none\", classNames?.base)}\n\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-id=\"Scroll Container\"\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\tclassNames?.scrollContainer\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselButton(props: CarouselButtonsProps) {\n\tconst { classNames, icon, variant } = props;\n\n\tconst { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"z-30 flex h-full w-fit items-center\",\n\t\t\t\tvariant === \"prev\" ? \"justify-start\" : \"justify-end\",\n\t\t\t\tclassNames?.base\n\t\t\t)}\n\t\t\tonClick={variant === \"prev\" ? goToPreviousSlide : goToNextSlide}\n\t\t>\n\t\t\t<span className={cnMerge(\"transition-transform active:scale-[1.06]\", classNames?.iconContainer)}>\n\t\t\t\t{icon ?? (\n\t\t\t\t\t<ChevronLeftIcon\n\t\t\t\t\t\tclassName={cnMerge(variant === \"next\" && \"rotate-180\", classNames?.defaultIcon)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nexport function CarouselControls(props: CarouselControlProps) {\n\tconst { classNames, icon } = props;\n\n\treturn (\n\t\t<div className={cnMerge(\"absolute inset-0 flex justify-between\", classNames?.base)}>\n\t\t\t<Show.Root when={icon?.iconType}>\n\t\t\t\t<CarouselButton\n\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\tclassNames={{\n\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t/>\n\n\t\t\t\t<CarouselButton\n\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\tclassNames={{\n\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t/>\n\n\t\t\t\t<Show.Otherwise>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.prev}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.next}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Otherwise>\n\t\t\t</Show.Root>\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemGroup<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each, render } = props;\n\n\tconst [ItemList] = getElementList(\"base\");\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-id=\"Carousel Image Wrapper\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`flex w-full shrink-0 snap-center [transform:translate3d(var(--translate-distance),0,0)]\n\t\t\t\t[transition:transform_800ms_ease]`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--translate-distance\": `-${currentSlide * 100}%`,\n\t\t\t\t} satisfies CssWithCustomProperties as CssWithCustomProperties\n\t\t\t}\n\t\t>\n\t\t\t{typeof render === \"function\" ? (\n\t\t\t\t<ItemList each={images} render={render} />\n\t\t\t) : (\n\t\t\t\t<ItemList each={images}>{children}</ItemList>\n\t\t\t)}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem({ children, className, ...restOfProps }: OtherCarouselProps) {\n\treturn (\n\t\t<li\n\t\t\tclassName={cnMerge(\"flex w-full shrink-0 snap-center justify-center\", className)}\n\t\t\t{...restOfProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport function CarouselCaption<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement, OtherCarouselProps>\n) {\n\tconst { as: HtmlElement = \"div\", children, className } = props;\n\n\treturn (\n\t\t<HtmlElement data-id=\"Carousel Caption\" className={cnMerge(\"absolute z-10\", className)}>\n\t\t\t{children}\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselIndicatorGroup<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each, render } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\tconst [IndicatorList] = getElementList(\"base\");\n\n\treturn (\n\t\t<ul\n\t\t\tdata-id=\"Carousel Indicators\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{typeof render === \"function\" ? (\n\t\t\t\t<IndicatorList each={images} render={render} />\n\t\t\t) : (\n\t\t\t\t<IndicatorList each={images}>{children}</IndicatorList>\n\t\t\t)}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { classNames, currentIndex } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\treturn (\n\t\t<li className={cnMerge(\"inline-flex\", classNames?.base)}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"size-[6px] rounded-[50%]\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-[35px] rounded-[5px]\", classNames?.isActive]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export { CarouselContextProvider as Root } from \"./carousel-store-context\";\nexport {\n\tCarouselContent as Content,\n\tCarouselControls as Controls,\n\tCarouselButton as Button,\n\tCarouselItem as Item,\n\tCarouselItemGroup as ItemGroup,\n\tCarouselCaption as Caption,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorGroup as IndicatorGroup,\n} from \"./carousel\";\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
@@ -1,122 +1,5 @@
1
- import { cnMerge } from '../../../chunk-OHG7GB7O.js';
1
+ export { useDragScroll } from '../../../chunk-V5ZPMMIH.js';
2
+ import '../../../chunk-OHG7GB7O.js';
2
3
  import '../../../chunk-PZ5AY32C.js';
3
- import { off, on, checkIsDeviceMobile } from '@zayne-labs/toolkit-core';
4
- import { useCallbackRef } from '@zayne-labs/toolkit-react';
5
- import { mergeTwoProps, composeRefs } from '@zayne-labs/toolkit-react/utils';
6
- import { useRef } from 'react';
7
-
8
- var updateCursor = (element) => {
9
- element.style.cursor = "grabbing";
10
- element.style.userSelect = "none";
11
- };
12
- var onScrollSnap = (action, element) => {
13
- if (action === "remove") {
14
- element.style.scrollSnapType = "none";
15
- return;
16
- }
17
- element.style.scrollSnapType = "";
18
- };
19
- var resetCursor = (element) => {
20
- element.style.cursor = "";
21
- element.style.userSelect = "";
22
- };
23
- var handleScrollSnap = (dragContainer) => {
24
- const isMobile = checkIsDeviceMobile();
25
- if (!isMobile) {
26
- onScrollSnap("remove", dragContainer);
27
- } else {
28
- onScrollSnap("reset", dragContainer);
29
- }
30
- };
31
-
32
- // src/components/ui/drag-scroll/use-drag-scroll.ts
33
- var useDragScroll = (props) => {
34
- const {
35
- classNames,
36
- extraItemProps,
37
- extraRootProps,
38
- orientation = "horizontal",
39
- usage = "allScreens"
40
- } = props ?? {};
41
- const dragContainerRef = useRef(null);
42
- const positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });
43
- const handleMouseMove = useCallbackRef((event) => {
44
- if (!dragContainerRef.current) return;
45
- if (orientation === "horizontal" || orientation === "both") {
46
- const dx = event.clientX - positionRef.current.x;
47
- dragContainerRef.current.scrollLeft = positionRef.current.left - dx;
48
- }
49
- if (orientation === "vertical" || orientation === "both") {
50
- const dy = event.clientY - positionRef.current.y;
51
- dragContainerRef.current.scrollTop = positionRef.current.top - dy;
52
- }
53
- });
54
- const handleMouseUpOrLeave = useCallbackRef(() => {
55
- if (!dragContainerRef.current) return;
56
- off("mousemove", dragContainerRef.current, handleMouseMove);
57
- off("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
58
- off("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
59
- resetCursor(dragContainerRef.current);
60
- });
61
- const handleMouseDown = useCallbackRef((event) => {
62
- if (usage === "mobileAndTabletOnly" && window.innerWidth >= 768) return;
63
- if (usage === "desktopOnly" && window.innerWidth < 768) return;
64
- if (!dragContainerRef.current) return;
65
- if (orientation === "horizontal" || orientation === "both") {
66
- positionRef.current.x = event.clientX;
67
- positionRef.current.left = dragContainerRef.current.scrollLeft;
68
- }
69
- if (orientation === "vertical" || orientation === "both") {
70
- positionRef.current.y = event.clientY;
71
- positionRef.current.top = dragContainerRef.current.scrollTop;
72
- }
73
- updateCursor(dragContainerRef.current);
74
- on("mousemove", dragContainerRef.current, handleMouseMove);
75
- on("mouseup", dragContainerRef.current, handleMouseUpOrLeave);
76
- on("mouseleave", dragContainerRef.current, handleMouseUpOrLeave);
77
- });
78
- const refCallBack = useCallbackRef((node) => {
79
- dragContainerRef.current = node;
80
- node && handleScrollSnap(node);
81
- const cleanup = on("mousedown", dragContainerRef.current, handleMouseDown);
82
- return cleanup;
83
- });
84
- const getRootProps = (rootProps) => {
85
- const mergedRootProps = mergeTwoProps(extraRootProps, rootProps);
86
- return {
87
- ...mergedRootProps,
88
- className: cnMerge(
89
- `scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-y-hidden
90
- overflow-x-scroll`,
91
- orientation === "horizontal" && "flex-row",
92
- orientation === "vertical" && "flex-col",
93
- usage === "mobileAndTabletOnly" && "md:cursor-default md:flex-col",
94
- usage === "desktopOnly" && "max-md:cursor-default max-md:flex-col",
95
- classNames?.base,
96
- mergedRootProps.className
97
- ),
98
- "data-part": "root",
99
- "data-scope": "drag-scroll",
100
- "data-slot": "drag-scroll-root",
101
- ref: composeRefs(
102
- refCallBack,
103
- mergedRootProps?.ref
104
- )
105
- };
106
- };
107
- const getItemProps = (itemProps) => {
108
- const mergedItemProps = mergeTwoProps(extraItemProps, itemProps);
109
- return {
110
- ...mergedItemProps,
111
- className: cnMerge("snap-center snap-always", classNames?.item, mergedItemProps.className),
112
- "data-part": "item",
113
- "data-scope": "drag-scroll",
114
- "data-slot": "drag-scroll-item"
115
- };
116
- };
117
- return { getItemProps, getRootProps };
118
- };
119
-
120
- export { useDragScroll };
121
4
  //# sourceMappingURL=index.js.map
122
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/ui/drag-scroll/utils.ts","../../../../../src/components/ui/drag-scroll/use-drag-scroll.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { checkIsDeviceMobile } from \"@zayne-labs/toolkit-core\";\n\n/* eslint-disable no-param-reassign -- Mutation is needed here since it's an element */\nexport const updateCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"grabbing\";\n\telement.style.userSelect = \"none\";\n};\n\nexport const onScrollSnap = <TElement extends HTMLElement>(\n\taction: \"remove\" | \"reset\",\n\telement: TElement\n) => {\n\tif (action === \"remove\") {\n\t\telement.style.scrollSnapType = \"none\";\n\t\treturn;\n\t}\n\n\telement.style.scrollSnapType = \"\";\n};\n\nexport const resetCursor = <TElement extends HTMLElement>(element: TElement) => {\n\telement.style.cursor = \"\";\n\telement.style.userSelect = \"\";\n};\n/* eslint-enable no-param-reassign -- Mutation is needed here since it's an element */\n\nexport const handleScrollSnap = (dragContainer: HTMLElement) => {\n\tconst isMobile = checkIsDeviceMobile();\n\n\tif (!isMobile) {\n\t\tonScrollSnap(\"remove\", dragContainer);\n\t} else {\n\t\tonScrollSnap(\"reset\", dragContainer);\n\t}\n};\n","import { cnMerge } from \"@/lib/utils/cn\";\nimport { off, on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { type InferProps, composeRefs, mergeTwoProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { type RefCallback, useRef } from \"react\";\nimport { handleScrollSnap, resetCursor, updateCursor } from \"./utils\";\n\ntype ItemProps<TItemElement extends HTMLElement> = Omit<InferProps<TItemElement>, \"children\">;\n\ntype RootProps<TElement extends HTMLElement> = Omit<InferProps<TElement>, \"children\">;\n\ntype DragScrollProps<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tclassNames?: { base?: string; item?: string };\n\textraItemProps?: ItemProps<TItemElement>;\n\textraRootProps?: InferProps<TElement>;\n\torientation?: \"both\" | \"horizontal\" | \"vertical\";\n\tusage?: \"allScreens\" | \"desktopOnly\" | \"mobileAndTabletOnly\";\n};\n\ntype DragScrollResult<TElement extends HTMLElement, TItemElement extends HTMLElement> = {\n\tgetItemProps: (itemProps?: ItemProps<TItemElement>) => ItemProps<TItemElement>;\n\tgetRootProps: (rootProps?: RootProps<TElement>) => RootProps<TElement>;\n};\n\nconst useDragScroll = <TElement extends HTMLElement, TItemElement extends HTMLElement = HTMLElement>(\n\tprops?: DragScrollProps<TElement, TItemElement>\n): DragScrollResult<TElement, TItemElement> => {\n\tconst {\n\t\tclassNames,\n\t\textraItemProps,\n\t\textraRootProps,\n\t\torientation = \"horizontal\",\n\t\tusage = \"allScreens\",\n\t} = props ?? {};\n\n\tconst dragContainerRef = useRef<TElement>(null);\n\n\tconst positionRef = useRef({ left: 0, top: 0, x: 0, y: 0 });\n\n\tconst handleMouseMove = useCallbackRef((event: MouseEvent) => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the horizontal scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dx = event.clientX - positionRef.current.x;\n\n\t\t\t// == Assign the scrollLeft of the container to the difference between its previous horizontal scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollLeft = positionRef.current.left - dx;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\t// == calculate the current change in the vertical scroll position based on the difference between the previous mouse position and the new mouse position\n\t\t\tconst dy = event.clientY - positionRef.current.y;\n\n\t\t\t// == Assign the scrollTop of the container to the difference between its previous vertical scroll position and the change in the mouse position\n\t\t\tdragContainerRef.current.scrollTop = positionRef.current.top - dy;\n\t\t}\n\t});\n\n\tconst handleMouseUpOrLeave = useCallbackRef(() => {\n\t\tif (!dragContainerRef.current) return;\n\n\t\toff(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\toff(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\toff(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\n\t\tresetCursor(dragContainerRef.current);\n\t});\n\n\tconst handleMouseDown = useCallbackRef((event: MouseEvent) => {\n\t\tif (usage === \"mobileAndTabletOnly\" && window.innerWidth >= 768) return;\n\t\tif (usage === \"desktopOnly\" && window.innerWidth < 768) return;\n\n\t\tif (!dragContainerRef.current) return;\n\n\t\t// == Update all initial position properties stored in the positionRef\n\t\tif (orientation === \"horizontal\" || orientation === \"both\") {\n\t\t\tpositionRef.current.x = event.clientX;\n\t\t\tpositionRef.current.left = dragContainerRef.current.scrollLeft;\n\t\t}\n\n\t\tif (orientation === \"vertical\" || orientation === \"both\") {\n\t\t\tpositionRef.current.y = event.clientY;\n\t\t\tpositionRef.current.top = dragContainerRef.current.scrollTop;\n\t\t}\n\n\t\tupdateCursor(dragContainerRef.current);\n\n\t\ton(\"mousemove\", dragContainerRef.current, handleMouseMove);\n\t\ton(\"mouseup\", dragContainerRef.current, handleMouseUpOrLeave);\n\t\ton(\"mouseleave\", dragContainerRef.current, handleMouseUpOrLeave);\n\t});\n\n\tconst refCallBack: RefCallback<TElement> = useCallbackRef((node) => {\n\t\tdragContainerRef.current = node;\n\n\t\tnode && handleScrollSnap(node);\n\n\t\tconst cleanup = on(\"mousedown\", dragContainerRef.current, handleMouseDown);\n\n\t\treturn cleanup;\n\t});\n\n\tconst getRootProps: DragScrollResult<TElement, TItemElement>[\"getRootProps\"] = (rootProps) => {\n\t\tconst mergedRootProps = mergeTwoProps(extraRootProps, rootProps);\n\n\t\treturn {\n\t\t\t...mergedRootProps,\n\t\t\tclassName: cnMerge(\n\t\t\t\t`scrollbar-hidden flex w-full cursor-grab snap-x snap-mandatory overflow-y-hidden\n\t\t\t\toverflow-x-scroll`,\n\t\t\t\torientation === \"horizontal\" && \"flex-row\",\n\t\t\t\torientation === \"vertical\" && \"flex-col\",\n\t\t\t\tusage === \"mobileAndTabletOnly\" && \"md:cursor-default md:flex-col\",\n\t\t\t\tusage === \"desktopOnly\" && \"max-md:cursor-default max-md:flex-col\",\n\t\t\t\tclassNames?.base,\n\t\t\t\tmergedRootProps.className\n\t\t\t),\n\t\t\t\"data-part\": \"root\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\"data-slot\": \"drag-scroll-root\",\n\t\t\tref: composeRefs(\n\t\t\t\trefCallBack,\n\t\t\t\t(mergedRootProps as { ref?: React.Ref<TElement> } | undefined)?.ref\n\t\t\t),\n\t\t};\n\t};\n\n\tconst getItemProps: DragScrollResult<TElement, TItemElement>[\"getItemProps\"] = (itemProps) => {\n\t\tconst mergedItemProps = mergeTwoProps(extraItemProps, itemProps);\n\n\t\treturn {\n\t\t\t...mergedItemProps,\n\t\t\tclassName: cnMerge(\"snap-center snap-always\", classNames?.item, mergedItemProps.className),\n\t\t\t\"data-part\": \"item\",\n\t\t\t\"data-scope\": \"drag-scroll\",\n\t\t\t\"data-slot\": \"drag-scroll-item\",\n\t\t};\n\t};\n\n\treturn { getItemProps, getRootProps };\n};\n\nexport { useDragScroll };\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}