@gnome-ui/react 1.49.0 → 1.50.0

package/dist/components/ButtonRow/ButtonRow.module.css.js

@@ -1,11 +1,11 @@
 var e = {
-	row: "_row_1877a_3",
-	title: "_title_1877a_48",
-	leading: "_leading_1877a_59",
-	trailing: "_trailing_1877a_60",
-	default: "_default_1877a_68",
-	suggested: "_suggested_1877a_77",
-	destructive: "_destructive_1877a_86"
+	row: "_row_i8gww_3",
+	title: "_title_i8gww_46",
+	leading: "_leading_i8gww_57",
+	trailing: "_trailing_i8gww_58",
+	default: "_default_i8gww_66",
+	suggested: "_suggested_i8gww_75",
+	destructive: "_destructive_i8gww_84"
 };
 //#endregion
 export { e as default };

package/dist/components/ButtonRow/ButtonRow.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.module.css.js","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  /* Reset button */\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.row:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  flex: 1;\n  text-align: center;\n}\n\n/* ─── Leading / trailing icons ─────────────────────────────────────────────── */\n\n.leading,\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.default .title {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.default .leading,\n.default .trailing {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.suggested .title {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.suggested .leading,\n.suggested .trailing {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.destructive .title {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n.destructive .leading,\n.destructive .trailing {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ButtonRow.module.css.js","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  /* Reset button */\n  appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: center;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.row:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  flex: 1;\n  text-align: center;\n}\n\n/* ─── Leading / trailing icons ─────────────────────────────────────────────── */\n\n.leading,\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.default .title {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.default .leading,\n.default .trailing {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.suggested .title {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.suggested .leading,\n.suggested .trailing {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.destructive .title {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n.destructive .leading,\n.destructive .trailing {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n"],"mappings":""}

package/dist/components/Card/Card.module.css.cjs

@@ -1,2 +1,2 @@
-var e={card:`_card_12nxd_1`,"padding-none":`_padding-none_12nxd_12`,"padding-sm":`_padding-sm_12nxd_15`,"padding-md":`_padding-md_12nxd_18`,"padding-lg":`_padding-lg_12nxd_21`,interactive:`_interactive_12nxd_27`};exports.default=e;
+var e={card:`_card_vvaqp_1`,"padding-none":`_padding-none_vvaqp_12`,"padding-sm":`_padding-sm_vvaqp_16`,"padding-md":`_padding-md_vvaqp_20`,"padding-lg":`_padding-lg_vvaqp_24`,interactive:`_interactive_vvaqp_30`};exports.default=e;
 //# sourceMappingURL=Card.module.css.cjs.map

package/dist/components/Card/Card.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.css.cjs","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.css.cjs","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}

package/dist/components/Card/Card.module.css.js

@@ -1,10 +1,10 @@
 var e = {
-	card: "_card_12nxd_1",
-	"padding-none": "_padding-none_12nxd_12",
-	"padding-sm": "_padding-sm_12nxd_15",
-	"padding-md": "_padding-md_12nxd_18",
-	"padding-lg": "_padding-lg_12nxd_21",
-	interactive: "_interactive_12nxd_27"
+	card: "_card_vvaqp_1",
+	"padding-none": "_padding-none_vvaqp_12",
+	"padding-sm": "_padding-sm_vvaqp_16",
+	"padding-md": "_padding-md_vvaqp_20",
+	"padding-lg": "_padding-lg_vvaqp_24",
+	interactive: "_interactive_vvaqp_30"
 };
 //#endregion
 export { e as default };

package/dist/components/Card/Card.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.css.js","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.css.js","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}

package/dist/components/Carousel/Carousel.cjs

@@ -1,2 +1,2 @@
-const e=require("./Carousel.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorDots,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.dot,a===r?e.default.dotActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),i=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorLines,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.line,a===r?e.default.lineActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),a=({children:r,orientation:i=`horizontal`,spacing:a=0,loop:o=!1,onPageChanged:s,page:c,className:l,...u})=>{let d=(0,t.useRef)(null),f=t.Children.count(r),[p,m]=(0,t.useState)(0),h=c!==void 0,g=h?c:p,_=(0,t.useCallback)((e,t=`smooth`)=>{let n=d.current;n&&(i===`horizontal`?n.scrollTo({left:n.clientWidth*e,behavior:t}):n.scrollTo({top:n.clientHeight*e,behavior:t}))},[i]);(0,t.useEffect)(()=>{h&&_(c,`smooth`)},[c,_,h]),(0,t.useEffect)(()=>{let e=d.current;if(!e)return;let t=()=>{Array.from(e.children);let t=i===`horizontal`?e.clientWidth:e.clientHeight,n=i===`horizontal`?e.scrollLeft:e.scrollTop,r=Math.round(n/(t||1)),a=Math.max(0,Math.min(r,f-1));h||m(a),s?.(a)};return e.addEventListener(`scroll`,t,{passive:!0}),()=>e.removeEventListener(`scroll`,t)},[i,f,h,s]);let v=(0,t.useCallback)(e=>{let t=i===`horizontal`?e.key===`ArrowRight`:e.key===`ArrowDown`,n=i===`horizontal`?e.key===`ArrowLeft`:e.key===`ArrowUp`;if(t){e.preventDefault();let t=o?(g+1)%f:Math.min(g+1,f-1);_(t),h||m(t),s?.(t)}else if(n){e.preventDefault();let t=o?(g-1+f)%f:Math.max(g-1,0);_(t),h||m(t),s?.(t)}},[g,f,o,i,_,h,s]),y=i===`horizontal`;return(0,n.jsx)(`div`,{ref:d,role:`region`,"aria-roledescription":`carousel`,className:[e.default.carousel,y?e.default.horizontal:e.default.vertical,l].filter(Boolean).join(` `),style:y?{columnGap:a||void 0}:{rowGap:a||void 0},onKeyDown:v,...u,children:t.Children.map(r,(t,r)=>(0,n.jsx)(`div`,{className:e.default.slide,role:`group`,"aria-roledescription":`slide`,"aria-label":`${r+1} of ${f}`,children:t},r))})};exports.Carousel=a,exports.CarouselIndicatorDots=r,exports.CarouselIndicatorLines=i;
+const e=require("./Carousel.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={bottom:`column`,top:`column-reverse`,left:`row-reverse`,right:`row`},i=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorDots,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.dot,a===r?e.default.dotActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),a=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorLines,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.line,a===r?e.default.lineActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),o=({children:o,orientation:s=`horizontal`,spacing:c=0,loop:l=!1,visibleSlides:u=1,onPageChanged:d,page:f,autoPlay:p=!1,interval:m=3e3,indicator:h,indicatorPosition:g=`bottom`,className:_,style:v,...y})=>{let b=(0,t.useRef)(null),x=Math.max(1,Math.floor(u)),S=t.Children.count(o),C=Math.ceil(S/x),[w,T]=(0,t.useState)(0),[E,D]=(0,t.useState)(!1),O=f!==void 0,k=O?f:w,A=(0,t.useRef)(!1),j=(0,t.useRef)(!1),M=(0,t.useRef)({pos:0,scroll:0,time:0}),N=(0,t.useRef)(0),P=(0,t.useRef)(!1),F=(0,t.useRef)(0),I=(0,t.useRef)(k),L=(0,t.useRef)(!1);(0,t.useEffect)(()=>{I.current=k});let R=(0,t.useCallback)(()=>{let e=b.current;if(!e)return 1;let t=(s===`horizontal`?e.clientWidth:e.clientHeight)+c;return t>0?t:1},[s,c]),z=(0,t.useCallback)((e,t=`smooth`)=>{let n=b.current;if(!n)return;P.current=!0,window.clearTimeout(F.current),F.current=window.setTimeout(()=>{P.current=!1},t===`smooth`?400:50);let r=R()*e;s===`horizontal`?n.scrollTo({left:r,behavior:t}):n.scrollTo({top:r,behavior:t})},[s,R]);(0,t.useEffect)(()=>{O&&z(f,`smooth`)},[f,z,O]),(0,t.useEffect)(()=>{let e=b.current;if(!e)return;let t=()=>{if(A.current||P.current)return;let t=R(),n=s===`horizontal`?e.scrollLeft:e.scrollTop,r=Math.round(n/t),i=Math.max(0,Math.min(r,C-1));O||T(i),d?.(i)};return e.addEventListener(`scroll`,t,{passive:!0}),()=>e.removeEventListener(`scroll`,t)},[s,C,O,d,R]);let B=(0,t.useCallback)(e=>{let t=s===`horizontal`?e.key===`ArrowRight`:e.key===`ArrowDown`,n=s===`horizontal`?e.key===`ArrowLeft`:e.key===`ArrowUp`;if(!t&&!n)return;e.preventDefault();let r=t?l?(k+1)%C:Math.min(k+1,C-1):l?(k-1+C)%C:Math.max(k-1,0);z(r),O||T(r),d?.(r)},[k,C,l,s,z,O,d]),V=(0,t.useCallback)(e=>{if(e.pointerType===`mouse`&&e.button!==0)return;let t=b.current;t&&(window.clearTimeout(N.current),t.style.scrollSnapType=`none`,e.currentTarget.setPointerCapture(e.pointerId),A.current=!0,j.current=!1,D(!0),M.current={pos:s===`horizontal`?e.clientX:e.clientY,scroll:s===`horizontal`?t.scrollLeft:t.scrollTop,time:Date.now()})},[s]),H=(0,t.useCallback)(e=>{if(!A.current)return;let t=b.current;if(!t)return;let n=s===`horizontal`?e.clientX:e.clientY,r=M.current.pos-n;Math.abs(r)>4&&(j.current=!0);let i=s===`horizontal`?t.scrollWidth-t.clientWidth:t.scrollHeight-t.clientHeight,a=M.current.scroll+r;a<0?a*=.3:a>i&&(a=i+(a-i)*.3),s===`horizontal`?t.scrollLeft=a:t.scrollTop=a},[s]),U=(0,t.useCallback)(e=>{if(!A.current)return;A.current=!1,D(!1);let t=b.current;if(!j.current||!t){t?.style.removeProperty(`scroll-snap-type`);return}let n=e.type===`pointercancel`,r=n?M.current.pos:s===`horizontal`?e.clientX:e.clientY,i=M.current.pos-r,a=Math.max(Date.now()-M.current.time,1),o=n?0:i/a,c=R(),u=s===`horizontal`?t.scrollLeft:t.scrollTop,f=s===`horizontal`?t.scrollWidth-t.clientWidth:t.scrollHeight-t.clientHeight,p;if(Math.abs(o)>.3){let e=o>0?Math.ceil(u/c):Math.floor(u/c);p=l&&o<0&&e===0&&u<=0?C-1:l&&o>0&&e===C-1&&u>=f?0:e}else p=Math.round(u/c);p=l?(p%C+C)%C:Math.max(0,Math.min(p,C-1)),z(p),O||T(p),d?.(p),N.current=window.setTimeout(()=>{t.style.removeProperty(`scroll-snap-type`)},350)},[s,R,l,C,z,O,d]);(0,t.useEffect)(()=>{if(!p||m<=0)return;let e=window.setInterval(()=>{if(A.current||L.current)return;let e=I.current;if(!l&&e>=C-1)return;let t=l?(e+1)%C:e+1;I.current=t,z(t),O||T(t),d?.(t)},m);return()=>window.clearInterval(e)},[p,m,l,C,z,O,d]),(0,t.useEffect)(()=>()=>{window.clearTimeout(N.current),window.clearTimeout(F.current)},[]);let W=(0,t.useCallback)(e=>{j.current&&=(e.preventDefault(),e.stopPropagation(),!1)},[]),G=s===`horizontal`,K=h===`dots`||h===`lines`,q=g===`left`||g===`right`,J=x===1?void 0:`calc((100% - ${c*(x-1)}px) / ${x})`,Y=(0,n.jsx)(`div`,{ref:b,role:`region`,"aria-roledescription":`carousel`,tabIndex:0,className:[e.default.carousel,G?e.default.horizontal:e.default.vertical,E?e.default.dragging:null,K?null:_].filter(Boolean).join(` `),style:{...G?{columnGap:c||void 0}:{rowGap:c||void 0},...K&&(q?{flex:`1 1 0`,width:`auto`}:{flex:`1 1 auto`})},onMouseEnter:()=>{L.current=!0},onMouseLeave:()=>{L.current=!1},onKeyDown:B,onClick:W,...K?{}:y,children:t.Children.map(o,(t,r)=>(0,n.jsx)(`div`,{className:e.default.slide,role:`group`,"aria-roledescription":`slide`,"aria-label":`${r+1} of ${S}`,style:{...J?{flex:`0 0 ${J}`}:void 0,...x>1&&r%x!==0?{scrollSnapAlign:`none`}:void 0},onPointerDown:V,onPointerMove:H,onPointerUp:U,onPointerCancel:U,children:t},r))});if(!K)return Y;let X=e=>{z(e),O||T(e),d?.(e)},Z=q?{flexDirection:`column`,padding:`0 12px`}:void 0;return(0,n.jsxs)(`div`,{className:_,style:{...v,display:`flex`,flexDirection:r[g]},...y,children:[Y,h===`dots`&&(0,n.jsx)(i,{pages:C,currentPage:k,onPageSelected:X,style:Z}),h===`lines`&&(0,n.jsx)(a,{pages:C,currentPage:k,onPageSelected:X,style:Z})]})};exports.Carousel=o,exports.CarouselIndicatorDots=i,exports.CarouselIndicatorLines=a;
 //# sourceMappingURL=Carousel.cjs.map

package/dist/components/Carousel/Carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  Children,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './Carousel.module.css';\n\n// ─── CarouselIndicatorDots ────────────────────────────────────────────────────\n\nexport interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a dot. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Dot-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorDots`.\n */\nexport const CarouselIndicatorDots = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorDotsProps) => {\n  return (\n    <div\n      className={[styles.indicatorDots, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.dot, i === currentPage ? styles.dotActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── CarouselIndicatorLines ───────────────────────────────────────────────────\n\nexport interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a line. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Line-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorLines`.\n */\nexport const CarouselIndicatorLines = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorLinesProps) => {\n  return (\n    <div\n      className={[styles.indicatorLines, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.line, i === currentPage ? styles.lineActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── Carousel ─────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /**\n   * Scroll orientation.\n   * @default \"horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Gap between pages in px.\n   * @default 0\n   */\n  spacing?: number;\n  /**\n   * Allow infinite looping (wraps around on the last/first page).\n   * @default false\n   */\n  loop?: boolean;\n  /** Called whenever the visible page changes. */\n  onPageChanged?: (index: number) => void;\n  /**\n   * Controlled current page index.\n   * When omitted the carousel manages page state internally.\n   */\n  page?: number;\n}\n\n/**\n * Swipeable content carousel.\n *\n * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling\n * page transitions. Supports keyboard navigation (arrow keys) and touch/mouse\n * drag via the browser's native scroll handling.\n *\n * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html\n */\nexport const Carousel = ({\n  children,\n  orientation = 'horizontal',\n  spacing = 0,\n  loop = false,\n  onPageChanged,\n  page: controlledPage,\n  className,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pageCount = Children.count(children);\n  const [internalPage, setInternalPage] = useState(0);\n  const isControlled = controlledPage !== undefined;\n  const currentPage = isControlled ? controlledPage : internalPage;\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n\n      if (!el) {\n        return;\n      }\n\n      if (orientation === 'horizontal') {\n        el.scrollTo({ left: el.clientWidth * index, behavior });\n      } else {\n        el.scrollTo({ top: el.clientHeight * index, behavior });\n      }\n    },\n    [orientation],\n  );\n\n  // Scroll to the controlled page when it changes externally\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n\n    scrollToPage(controlledPage, 'smooth');\n  }, [controlledPage, scrollToPage, isControlled]);\n\n  // Detect page changes via IntersectionObserver on each child\n  useEffect(() => {\n    const el = scrollRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    const handleScroll = () => {\n      const pages = Array.from(el.children) as HTMLElement[];\n      const size = orientation === 'horizontal' ? el.clientWidth : el.clientHeight;\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n      const idx = Math.round(scroll / (size || 1));\n      const clamped = Math.max(0, Math.min(idx, pageCount - 1));\n\n      if (!isControlled) {\n        setInternalPage(clamped);\n      }\n\n      onPageChanged?.(clamped);\n      void pages; // suppress lint\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [orientation, pageCount, isControlled, onPageChanged]);\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const isForward =\n        orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';\n      const isBack = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';\n\n      if (isForward) {\n        e.preventDefault();\n        const next = loop\n          ? (currentPage + 1) % pageCount\n          : Math.min(currentPage + 1, pageCount - 1);\n\n        scrollToPage(next);\n        if (!isControlled) {\n          setInternalPage(next);\n        }\n\n        onPageChanged?.(next);\n      } else if (isBack) {\n        e.preventDefault();\n        const prev = loop\n          ? (currentPage - 1 + pageCount) % pageCount\n          : Math.max(currentPage - 1, 0);\n\n        scrollToPage(prev);\n        if (!isControlled) {\n          setInternalPage(prev);\n        }\n\n        onPageChanged?.(prev);\n      }\n    },\n    [currentPage, pageCount, loop, orientation, scrollToPage, isControlled, onPageChanged],\n  );\n\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <div\n      ref={scrollRef}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      className={[styles.carousel, isHorizontal ? styles.horizontal : styles.vertical, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <div\n          key={i}\n          className={styles.slide}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${i + 1} of ${pageCount}`}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  Children,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './Carousel.module.css';\n\ntype IndicatorPosition = 'top' | 'bottom' | 'left' | 'right';\n\nconst INDICATOR_FLEX_DIR: Record<IndicatorPosition, CSSProperties['flexDirection']> = {\n  bottom: 'column',\n  top: 'column-reverse',\n  left: 'row-reverse',\n  right: 'row',\n};\n\n// ─── CarouselIndicatorDots ────────────────────────────────────────────────────\n\nexport interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a dot. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Dot-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorDots`.\n */\nexport const CarouselIndicatorDots = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorDotsProps) => {\n  return (\n    <div\n      className={[styles.indicatorDots, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.dot, i === currentPage ? styles.dotActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── CarouselIndicatorLines ───────────────────────────────────────────────────\n\nexport interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a line. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Line-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorLines`.\n */\nexport const CarouselIndicatorLines = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorLinesProps) => {\n  return (\n    <div\n      className={[styles.indicatorLines, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.line, i === currentPage ? styles.lineActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── Carousel ─────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /**\n   * Scroll orientation.\n   * @default \"horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Gap between pages in px.\n   * @default 0\n   */\n  spacing?: number;\n  /**\n   * Allow infinite looping (wraps around on the last/first page).\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Number of slides visible at once (integer ≥ 1). Navigation advances one\n   * full group at a time, and the indicator shows one dot/line per group.\n   * @default 1\n   */\n  visibleSlides?: number;\n  /** Called whenever the visible page changes. */\n  onPageChanged?: (index: number) => void;\n  /**\n   * Controlled current page index.\n   * When omitted the carousel manages page state internally.\n   */\n  page?: number;\n  /**\n   * Automatically advance to the next slide. Pauses while the pointer\n   * hovers over the carousel or during drag.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Milliseconds between automatic slide transitions.\n   * Only used when `autoPlay` is `true`.\n   * @default 3000\n   */\n  interval?: number;\n  /**\n   * Page indicator rendered alongside the carousel.\n   * - `'dots'`: small circular dots (`CarouselIndicatorDots`)\n   * - `'lines'`: short line segments (`CarouselIndicatorLines`)\n   * - `'none'` or omitted: no indicator\n   */\n  indicator?: 'dots' | 'lines' | 'none';\n  /**\n   * Position of the indicator relative to the carousel.\n   * @default 'bottom'\n   */\n  indicatorPosition?: IndicatorPosition;\n}\n\n/**\n * Swipeable content carousel.\n *\n * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling\n * page transitions. Supports keyboard navigation (arrow keys), touch/mouse drag,\n * and velocity-based flick gestures.\n *\n * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html\n */\nexport const Carousel = ({\n  children,\n  orientation = 'horizontal',\n  spacing = 0,\n  loop = false,\n  visibleSlides = 1,\n  onPageChanged,\n  page: controlledPage,\n  autoPlay = false,\n  interval = 3000,\n  indicator,\n  indicatorPosition = 'bottom',\n  className,\n  style,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const vSlides = Math.max(1, Math.floor(visibleSlides)); // enforce integer\n  const slideCount = Children.count(children);\n  const pageCount = Math.ceil(slideCount / vSlides);\n  const [internalPage, setInternalPage] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const isControlled = controlledPage !== undefined;\n  const currentPage = isControlled ? controlledPage : internalPage;\n\n  // Refs for drag state — avoids stale closures in pointer handlers\n  const draggingRef = useRef(false);\n  const hasDraggedRef = useRef(false);\n  const dragStartRef = useRef({ pos: 0, scroll: 0, time: 0 });\n  const snapRestoreTimerRef = useRef(0);\n  // Suppresses handleScroll feedback during programmatic scrolls (e.g. dot clicks)\n  const isProgrammaticScrollRef = useRef(false);\n  const programmaticScrollTimerRef = useRef(0);\n  // Auto-play: always-fresh snapshot of currentPage to avoid stale closure in setInterval\n  const currentPageRef = useRef(currentPage);\n  const isHoveringRef = useRef(false);\n  useEffect(() => {\n    currentPageRef.current = currentPage;\n  });\n\n  // Scroll distance per page = one full group = containerSize + spacing.\n  // Each slide is (containerSize - spacing*(vSlides-1)) / vSlides wide, so\n  // vSlides slides + (vSlides-1) gaps = containerSize, plus the inter-group\n  // gap gives containerSize + spacing.\n  const getPageSize = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return 1;\n    }\n    const containerSize = orientation === 'horizontal' ? el.clientWidth : el.clientHeight;\n    const size = containerSize + spacing;\n    return size > 0 ? size : 1;\n  }, [orientation, spacing]);\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n      // Suppress handleScroll feedback while the animation runs\n      isProgrammaticScrollRef.current = true;\n      window.clearTimeout(programmaticScrollTimerRef.current);\n      programmaticScrollTimerRef.current = window.setTimeout(\n        () => {\n          isProgrammaticScrollRef.current = false;\n        },\n        behavior === 'smooth' ? 400 : 50,\n      );\n\n      const offset = getPageSize() * index;\n      if (orientation === 'horizontal') {\n        el.scrollTo({ left: offset, behavior });\n      } else {\n        el.scrollTo({ top: offset, behavior });\n      }\n    },\n    [orientation, getPageSize],\n  );\n\n  // Scroll to the controlled page when it changes externally\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n    scrollToPage(controlledPage, 'smooth');\n  }, [controlledPage, scrollToPage, isControlled]);\n\n  // Detect page changes from native scroll (touch) — skipped during mouse drag\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return;\n    }\n\n    const handleScroll = () => {\n      if (draggingRef.current || isProgrammaticScrollRef.current) {\n        return;\n      }\n      const pageSize = getPageSize();\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n      const idx = Math.round(scroll / pageSize);\n      const clamped = Math.max(0, Math.min(idx, pageCount - 1));\n      if (!isControlled) {\n        setInternalPage(clamped);\n      }\n      onPageChanged?.(clamped);\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [orientation, pageCount, isControlled, onPageChanged, getPageSize]);\n\n  // ── Keyboard navigation ───────────────────────────────────────────────────\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isForward =\n        orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';\n      const isBack = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';\n\n      if (!isForward && !isBack) {\n        return;\n      }\n      e.preventDefault();\n\n      const next = isForward\n        ? loop\n          ? (currentPage + 1) % pageCount\n          : Math.min(currentPage + 1, pageCount - 1)\n        : loop\n          ? (currentPage - 1 + pageCount) % pageCount\n          : Math.max(currentPage - 1, 0);\n\n      scrollToPage(next);\n      if (!isControlled) {\n        setInternalPage(next);\n      }\n      onPageChanged?.(next);\n    },\n    [currentPage, pageCount, loop, orientation, scrollToPage, isControlled, onPageChanged],\n  );\n\n  // ── Drag (mouse + touch + pen) ───────────────────────────────────────────\n\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      // Ignore non-primary mouse buttons\n      if (e.pointerType === 'mouse' && e.button !== 0) {\n        return;\n      }\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n\n      // Disable scroll-snap immediately via DOM — not via React state, which would\n      // only apply after the next render, letting scroll-snap fight the first moves.\n      window.clearTimeout(snapRestoreTimerRef.current);\n      el.style.scrollSnapType = 'none';\n\n      // Capture so pointermove/up fire even when the pointer leaves the element\n      e.currentTarget.setPointerCapture(e.pointerId);\n      draggingRef.current = true;\n      hasDraggedRef.current = false;\n      setIsDragging(true);\n      dragStartRef.current = {\n        pos: orientation === 'horizontal' ? e.clientX : e.clientY,\n        scroll: orientation === 'horizontal' ? el.scrollLeft : el.scrollTop,\n        time: Date.now(),\n      };\n    },\n    [orientation],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!draggingRef.current) {\n        return;\n      }\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n\n      const pos = orientation === 'horizontal' ? e.clientX : e.clientY;\n      const delta = dragStartRef.current.pos - pos;\n\n      if (Math.abs(delta) > 4) {\n        hasDraggedRef.current = true;\n      }\n\n      // Apply boundary resistance: dampen movement past first/last slide\n      const maxScroll =\n        orientation === 'horizontal'\n          ? el.scrollWidth - el.clientWidth\n          : el.scrollHeight - el.clientHeight;\n      let newScroll = dragStartRef.current.scroll + delta;\n\n      if (newScroll < 0) {\n        newScroll *= 0.3;\n      } else if (newScroll > maxScroll) {\n        newScroll = maxScroll + (newScroll - maxScroll) * 0.3;\n      }\n\n      if (orientation === 'horizontal') {\n        el.scrollLeft = newScroll;\n      } else {\n        el.scrollTop = newScroll;\n      }\n    },\n    [orientation],\n  );\n\n  const handlePointerUp = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!draggingRef.current) {\n        return;\n      }\n\n      draggingRef.current = false;\n      setIsDragging(false);\n\n      const el = scrollRef.current;\n\n      if (!hasDraggedRef.current || !el) {\n        // No real drag — restore snap immediately\n        el?.style.removeProperty('scroll-snap-type');\n        return;\n      }\n\n      const isCancel = e.type === 'pointercancel';\n      const pos = isCancel\n        ? dragStartRef.current.pos\n        : orientation === 'horizontal'\n          ? e.clientX\n          : e.clientY;\n\n      const delta = dragStartRef.current.pos - pos;\n      const elapsed = Math.max(Date.now() - dragStartRef.current.time, 1);\n      const velocity = isCancel ? 0 : delta / elapsed; // px/ms, positive = forward\n      const pageSize = getPageSize();\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n\n      const maxScroll =\n        orientation === 'horizontal'\n          ? el.scrollWidth - el.clientWidth\n          : el.scrollHeight - el.clientHeight;\n\n      let target: number;\n      if (Math.abs(velocity) > 0.3) {\n        const rawTarget =\n          velocity > 0 ? Math.ceil(scroll / pageSize) : Math.floor(scroll / pageSize);\n        // In loop mode the browser clamps scroll to [0, maxScroll], so a backward\n        // flick from page 0 and a forward flick from the last page both produce a\n        // rawTarget stuck at the boundary. Detect and wrap explicitly.\n        if (loop && velocity < 0 && rawTarget === 0 && scroll <= 0) {\n          target = pageCount - 1;\n        } else if (loop && velocity > 0 && rawTarget === pageCount - 1 && scroll >= maxScroll) {\n          target = 0;\n        } else {\n          target = rawTarget;\n        }\n      } else {\n        // Slow drag — snap to nearest page\n        target = Math.round(scroll / pageSize);\n      }\n\n      if (loop) {\n        target = ((target % pageCount) + pageCount) % pageCount;\n      } else {\n        target = Math.max(0, Math.min(target, pageCount - 1));\n      }\n\n      // Scroll to target while snap is still disabled, then re-enable once settled\n      scrollToPage(target);\n      if (!isControlled) {\n        setInternalPage(target);\n      }\n      onPageChanged?.(target);\n\n      // Re-enable snap after the smooth scroll animation completes (~300 ms)\n      snapRestoreTimerRef.current = window.setTimeout(() => {\n        el.style.removeProperty('scroll-snap-type');\n      }, 350);\n    },\n    [orientation, getPageSize, loop, pageCount, scrollToPage, isControlled, onPageChanged],\n  );\n\n  // Auto-play: advance one slide every `interval` ms, pausing on hover/drag\n  useEffect(() => {\n    if (!autoPlay || interval <= 0) {\n      return;\n    }\n\n    const timer = window.setInterval(() => {\n      if (draggingRef.current || isHoveringRef.current) {\n        return;\n      }\n      const page = currentPageRef.current;\n      if (!loop && page >= pageCount - 1) {\n        return;\n      }\n      const next = loop ? (page + 1) % pageCount : page + 1;\n      // Update ref immediately so back-to-back ticks see the correct page\n      currentPageRef.current = next;\n      scrollToPage(next);\n      if (!isControlled) {\n        setInternalPage(next);\n      }\n      onPageChanged?.(next);\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [autoPlay, interval, loop, pageCount, scrollToPage, isControlled, onPageChanged]);\n\n  // Clean up timers on unmount\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(snapRestoreTimerRef.current);\n      window.clearTimeout(programmaticScrollTimerRef.current);\n    };\n  }, []);\n\n  // Prevent click events that fire after a drag (e.g. links/buttons inside slides)\n  const handleClick = useCallback((e: MouseEvent) => {\n    if (hasDraggedRef.current) {\n      e.preventDefault();\n      e.stopPropagation();\n      hasDraggedRef.current = false;\n    }\n  }, []);\n\n  const isHorizontal = orientation === 'horizontal';\n  const showIndicator = indicator === 'dots' || indicator === 'lines';\n  const isSide = indicatorPosition === 'left' || indicatorPosition === 'right';\n\n  // Slide width when showing more than one at a time\n  const slideFlexBasis =\n    vSlides !== 1 ? `calc((100% - ${spacing * (vSlides - 1)}px) / ${vSlides})` : undefined;\n\n  const scrollContainer = (\n    <div\n      ref={scrollRef}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      tabIndex={0}\n      className={[\n        styles.carousel,\n        isHorizontal ? styles.horizontal : styles.vertical,\n        isDragging ? styles.dragging : null,\n        showIndicator ? null : className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...(isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }),\n        ...(showIndicator && (isSide ? { flex: '1 1 0', width: 'auto' } : { flex: '1 1 auto' })),\n      }}\n      onMouseEnter={() => {\n        isHoveringRef.current = true;\n      }}\n      onMouseLeave={() => {\n        isHoveringRef.current = false;\n      }}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      {...(showIndicator ? {} : props)}\n    >\n      {Children.map(children, (child, i) => (\n        <div\n          key={i}\n          className={styles.slide}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${i + 1} of ${slideCount}`}\n          style={{\n            ...(slideFlexBasis ? { flex: `0 0 ${slideFlexBasis}` } : undefined),\n            // Only the first slide of each group is a snap target; intermediate\n            // slides would cause the carousel to stop mid-group.\n            ...(vSlides > 1 && i % vSlides !== 0 ? { scrollSnapAlign: 'none' } : undefined),\n          }}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUp}\n          onPointerCancel={handlePointerUp}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n\n  if (!showIndicator) {\n    return scrollContainer;\n  }\n\n  const onPageSelected = (i: number) => {\n    scrollToPage(i);\n    if (!isControlled) {\n      setInternalPage(i);\n    }\n    onPageChanged?.(i);\n  };\n\n  const indicatorStyle: CSSProperties | undefined = isSide\n    ? { flexDirection: 'column', padding: '0 12px' }\n    : undefined;\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        display: 'flex',\n        flexDirection: INDICATOR_FLEX_DIR[indicatorPosition],\n      }}\n      {...props}\n    >\n      {scrollContainer}\n      {indicator === 'dots' && (\n        <CarouselIndicatorDots\n          pages={pageCount}\n          currentPage={currentPage}\n          onPageSelected={onPageSelected}\n          style={indicatorStyle}\n        />\n      )}\n      {indicator === 'lines' && (\n        <CarouselIndicatorLines\n          pages={pageCount}\n          currentPage={currentPage}\n          onPageSelected={onPageSelected}\n          style={indicatorStyle}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Carousel/Carousel.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+type IndicatorPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {
     /** Total number of pages. */
     pages: number;
@@ -42,6 +43,12 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     loop?: boolean;
+    /**
+     * Number of slides visible at once (integer ≥ 1). Navigation advances one
+     * full group at a time, and the indicator shows one dot/line per group.
+     * @default 1
+     */
+    visibleSlides?: number;
     /** Called whenever the visible page changes. */
     onPageChanged?: (index: number) => void;
     /**
@@ -49,16 +56,41 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
      * When omitted the carousel manages page state internally.
      */
     page?: number;
+    /**
+     * Automatically advance to the next slide. Pauses while the pointer
+     * hovers over the carousel or during drag.
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Milliseconds between automatic slide transitions.
+     * Only used when `autoPlay` is `true`.
+     * @default 3000
+     */
+    interval?: number;
+    /**
+     * Page indicator rendered alongside the carousel.
+     * - `'dots'`: small circular dots (`CarouselIndicatorDots`)
+     * - `'lines'`: short line segments (`CarouselIndicatorLines`)
+     * - `'none'` or omitted: no indicator
+     */
+    indicator?: 'dots' | 'lines' | 'none';
+    /**
+     * Position of the indicator relative to the carousel.
+     * @default 'bottom'
+     */
+    indicatorPosition?: IndicatorPosition;
 }
 /**
  * Swipeable content carousel.
  *
  * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling
- * page transitions. Supports keyboard navigation (arrow keys) and touch/mouse
- * drag via the browser's native scroll handling.
+ * page transitions. Supports keyboard navigation (arrow keys), touch/mouse drag,
+ * and velocity-based flick gestures.
  *
  * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html
  */
-export declare const Carousel: ({ children, orientation, spacing, loop, onPageChanged, page: controlledPage, className, ...props }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Carousel: ({ children, orientation, spacing, loop, visibleSlides, onPageChanged, page: controlledPage, autoPlay, interval, indicator, indicatorPosition, className, style, ...props }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Carousel/Carousel.js

@@ -1,8 +1,13 @@
 import e from "./Carousel.module.css.js";
 import { Children as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/Carousel/Carousel.tsx
-var s = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) => /* @__PURE__ */ o("div", {
+var c = {
+	bottom: "column",
+	top: "column-reverse",
+	left: "row-reverse",
+	right: "row"
+}, l = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) => /* @__PURE__ */ o("div", {
 	className: [e.indicatorDots, i].filter(Boolean).join(" "),
 	role: "tablist",
 	"aria-label": "Carousel pages",
@@ -15,7 +20,7 @@ var s = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) =>
 		className: [e.dot, i === n ? e.dotActive : null].filter(Boolean).join(" "),
 		onClick: () => r?.(i)
 	}, i))
-}), c = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) => /* @__PURE__ */ o("div", {
+}), u = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) => /* @__PURE__ */ o("div", {
 	className: [e.indicatorLines, i].filter(Boolean).join(" "),
 	role: "tablist",
 	"aria-label": "Carousel pages",
@@ -28,80 +33,211 @@ var s = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) =>
 		className: [e.line, i === n ? e.lineActive : null].filter(Boolean).join(" "),
 		onClick: () => r?.(i)
 	}, i))
-}), l = ({ children: s, orientation: c = "horizontal", spacing: l = 0, loop: u = !1, onPageChanged: d, page: f, className: p, ...m }) => {
-	let h = i(null), g = t.count(s), [_, v] = a(0), y = f !== void 0, b = y ? f : _, x = n((e, t = "smooth") => {
-		let n = h.current;
-		n && (c === "horizontal" ? n.scrollTo({
-			left: n.clientWidth * e,
+}), d = ({ children: d, orientation: f = "horizontal", spacing: p = 0, loop: m = !1, visibleSlides: h = 1, onPageChanged: g, page: _, autoPlay: v = !1, interval: y = 3e3, indicator: b, indicatorPosition: x = "bottom", className: S, style: C, ...w }) => {
+	let T = i(null), E = Math.max(1, Math.floor(h)), D = t.count(d), O = Math.ceil(D / E), [ee, k] = a(0), [A, j] = a(!1), M = _ !== void 0, N = M ? _ : ee, P = i(!1), F = i(!1), I = i({
+		pos: 0,
+		scroll: 0,
+		time: 0
+	}), L = i(0), R = i(!1), z = i(0), B = i(N), V = i(!1);
+	r(() => {
+		B.current = N;
+	});
+	let H = n(() => {
+		let e = T.current;
+		if (!e) return 1;
+		let t = (f === "horizontal" ? e.clientWidth : e.clientHeight) + p;
+		return t > 0 ? t : 1;
+	}, [f, p]), U = n((e, t = "smooth") => {
+		let n = T.current;
+		if (!n) return;
+		R.current = !0, window.clearTimeout(z.current), z.current = window.setTimeout(() => {
+			R.current = !1;
+		}, t === "smooth" ? 400 : 50);
+		let r = H() * e;
+		f === "horizontal" ? n.scrollTo({
+			left: r,
 			behavior: t
 		}) : n.scrollTo({
-			top: n.clientHeight * e,
+			top: r,
 			behavior: t
-		}));
-	}, [c]);
+		});
+	}, [f, H]);
 	r(() => {
-		y && x(f, "smooth");
+		M && U(_, "smooth");
 	}, [
-		f,
-		x,
-		y
+		_,
+		U,
+		M
 	]), r(() => {
-		let e = h.current;
+		let e = T.current;
 		if (!e) return;
 		let t = () => {
-			Array.from(e.children);
-			let t = c === "horizontal" ? e.clientWidth : e.clientHeight, n = c === "horizontal" ? e.scrollLeft : e.scrollTop, r = Math.round(n / (t || 1)), i = Math.max(0, Math.min(r, g - 1));
-			y || v(i), d?.(i);
+			if (P.current || R.current) return;
+			let t = H(), n = f === "horizontal" ? e.scrollLeft : e.scrollTop, r = Math.round(n / t), i = Math.max(0, Math.min(r, O - 1));
+			M || k(i), g?.(i);
 		};
 		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
 	}, [
-		c,
+		f,
+		O,
+		M,
 		g,
-		y,
-		d
+		H
 	]);
-	let S = n((e) => {
-		let t = c === "horizontal" ? e.key === "ArrowRight" : e.key === "ArrowDown", n = c === "horizontal" ? e.key === "ArrowLeft" : e.key === "ArrowUp";
-		if (t) {
-			e.preventDefault();
-			let t = u ? (b + 1) % g : Math.min(b + 1, g - 1);
-			x(t), y || v(t), d?.(t);
-		} else if (n) {
-			e.preventDefault();
-			let t = u ? (b - 1 + g) % g : Math.max(b - 1, 0);
-			x(t), y || v(t), d?.(t);
+	let W = n((e) => {
+		let t = f === "horizontal" ? e.key === "ArrowRight" : e.key === "ArrowDown", n = f === "horizontal" ? e.key === "ArrowLeft" : e.key === "ArrowUp";
+		if (!t && !n) return;
+		e.preventDefault();
+		let r = t ? m ? (N + 1) % O : Math.min(N + 1, O - 1) : m ? (N - 1 + O) % O : Math.max(N - 1, 0);
+		U(r), M || k(r), g?.(r);
+	}, [
+		N,
+		O,
+		m,
+		f,
+		U,
+		M,
+		g
+	]), G = n((e) => {
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		let t = T.current;
+		t && (window.clearTimeout(L.current), t.style.scrollSnapType = "none", e.currentTarget.setPointerCapture(e.pointerId), P.current = !0, F.current = !1, j(!0), I.current = {
+			pos: f === "horizontal" ? e.clientX : e.clientY,
+			scroll: f === "horizontal" ? t.scrollLeft : t.scrollTop,
+			time: Date.now()
+		});
+	}, [f]), te = n((e) => {
+		if (!P.current) return;
+		let t = T.current;
+		if (!t) return;
+		let n = f === "horizontal" ? e.clientX : e.clientY, r = I.current.pos - n;
+		Math.abs(r) > 4 && (F.current = !0);
+		let i = f === "horizontal" ? t.scrollWidth - t.clientWidth : t.scrollHeight - t.clientHeight, a = I.current.scroll + r;
+		a < 0 ? a *= .3 : a > i && (a = i + (a - i) * .3), f === "horizontal" ? t.scrollLeft = a : t.scrollTop = a;
+	}, [f]), K = n((e) => {
+		if (!P.current) return;
+		P.current = !1, j(!1);
+		let t = T.current;
+		if (!F.current || !t) {
+			t?.style.removeProperty("scroll-snap-type");
+			return;
 		}
+		let n = e.type === "pointercancel", r = n ? I.current.pos : f === "horizontal" ? e.clientX : e.clientY, i = I.current.pos - r, a = Math.max(Date.now() - I.current.time, 1), o = n ? 0 : i / a, s = H(), c = f === "horizontal" ? t.scrollLeft : t.scrollTop, l = f === "horizontal" ? t.scrollWidth - t.clientWidth : t.scrollHeight - t.clientHeight, u;
+		if (Math.abs(o) > .3) {
+			let e = o > 0 ? Math.ceil(c / s) : Math.floor(c / s);
+			u = m && o < 0 && e === 0 && c <= 0 ? O - 1 : m && o > 0 && e === O - 1 && c >= l ? 0 : e;
+		} else u = Math.round(c / s);
+		u = m ? (u % O + O) % O : Math.max(0, Math.min(u, O - 1)), U(u), M || k(u), g?.(u), L.current = window.setTimeout(() => {
+			t.style.removeProperty("scroll-snap-type");
+		}, 350);
 	}, [
-		b,
-		g,
-		u,
-		c,
-		x,
+		f,
+		H,
+		m,
+		O,
+		U,
+		M,
+		g
+	]);
+	r(() => {
+		if (!v || y <= 0) return;
+		let e = window.setInterval(() => {
+			if (P.current || V.current) return;
+			let e = B.current;
+			if (!m && e >= O - 1) return;
+			let t = m ? (e + 1) % O : e + 1;
+			B.current = t, U(t), M || k(t), g?.(t);
+		}, y);
+		return () => window.clearInterval(e);
+	}, [
+		v,
 		y,
-		d
-	]), C = c === "horizontal";
-	return /* @__PURE__ */ o("div", {
-		ref: h,
+		m,
+		O,
+		U,
+		M,
+		g
+	]), r(() => () => {
+		window.clearTimeout(L.current), window.clearTimeout(z.current);
+	}, []);
+	let ne = n((e) => {
+		F.current &&= (e.preventDefault(), e.stopPropagation(), !1);
+	}, []), q = f === "horizontal", J = b === "dots" || b === "lines", Y = x === "left" || x === "right", X = E === 1 ? void 0 : `calc((100% - ${p * (E - 1)}px) / ${E})`, Z = /* @__PURE__ */ o("div", {
+		ref: T,
 		role: "region",
 		"aria-roledescription": "carousel",
+		tabIndex: 0,
 		className: [
 			e.carousel,
-			C ? e.horizontal : e.vertical,
-			p
+			q ? e.horizontal : e.vertical,
+			A ? e.dragging : null,
+			J ? null : S
 		].filter(Boolean).join(" "),
-		style: C ? { columnGap: l || void 0 } : { rowGap: l || void 0 },
-		onKeyDown: S,
-		...m,
-		children: t.map(s, (t, n) => /* @__PURE__ */ o("div", {
+		style: {
+			...q ? { columnGap: p || void 0 } : { rowGap: p || void 0 },
+			...J && (Y ? {
+				flex: "1 1 0",
+				width: "auto"
+			} : { flex: "1 1 auto" })
+		},
+		onMouseEnter: () => {
+			V.current = !0;
+		},
+		onMouseLeave: () => {
+			V.current = !1;
+		},
+		onKeyDown: W,
+		onClick: ne,
+		...J ? {} : w,
+		children: t.map(d, (t, n) => /* @__PURE__ */ o("div", {
 			className: e.slide,
 			role: "group",
 			"aria-roledescription": "slide",
-			"aria-label": `${n + 1} of ${g}`,
+			"aria-label": `${n + 1} of ${D}`,
+			style: {
+				...X ? { flex: `0 0 ${X}` } : void 0,
+				...E > 1 && n % E !== 0 ? { scrollSnapAlign: "none" } : void 0
+			},
+			onPointerDown: G,
+			onPointerMove: te,
+			onPointerUp: K,
+			onPointerCancel: K,
 			children: t
 		}, n))
 	});
+	if (!J) return Z;
+	let Q = (e) => {
+		U(e), M || k(e), g?.(e);
+	}, $ = Y ? {
+		flexDirection: "column",
+		padding: "0 12px"
+	} : void 0;
+	return /* @__PURE__ */ s("div", {
+		className: S,
+		style: {
+			...C,
+			display: "flex",
+			flexDirection: c[x]
+		},
+		...w,
+		children: [
+			Z,
+			b === "dots" && /* @__PURE__ */ o(l, {
+				pages: O,
+				currentPage: N,
+				onPageSelected: Q,
+				style: $
+			}),
+			b === "lines" && /* @__PURE__ */ o(u, {
+				pages: O,
+				currentPage: N,
+				onPageSelected: Q,
+				style: $
+			})
+		]
+	});
 };
 //#endregion
-export { l as Carousel, s as CarouselIndicatorDots, c as CarouselIndicatorLines };
+export { d as Carousel, l as CarouselIndicatorDots, u as CarouselIndicatorLines };
 
 //# sourceMappingURL=Carousel.js.map