agentic-ds-kit 0.1.0 → 0.2.0

package/{ui → dist/ui}/Calendar/Calendar.module.css

@@ -1,4 +1,4 @@
-.calendar {
+._calendar_y4lol_1 {
   --calendar-cell: 2.25rem;
   box-sizing: border-box;
   display: inline-grid;
@@ -14,36 +14,36 @@
   color: var(--text-primary);
 }
 
-.sm {
+._sm_y4lol_17 {
   --calendar-cell: 1.9rem;
   gap: var(--space-1);
   padding: var(--space-2);
 }
 
-.md {
+._md_y4lol_23 {
   --calendar-cell: 2.25rem;
   padding: var(--space-4);
 }
 
-.lg {
+._lg_y4lol_28 {
   --calendar-cell: 2.6rem;
   gap: var(--space-3);
   padding: var(--space-6);
 }
 
-.calendar[data-disabled] {
+._calendar_y4lol_1[data-disabled] {
   opacity: var(--opacity-disabled);
   pointer-events: none;
 }
 
-.header {
+._header_y4lol_39 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-2);
 }
 
-.heading {
+._heading_y4lol_46 {
   flex: 1;
   margin: 0;
   text-align: center;
@@ -53,20 +53,20 @@
   color: var(--text-primary);
 }
 
-.grid {
+._grid_y4lol_56 {
   display: grid;
   gap: var(--space-1);
 }
 
-.weekdays,
-.row {
+._weekdays_y4lol_61,
+._row_y4lol_62 {
   display: grid;
   grid-template-columns: repeat(7, var(--calendar-cell));
   gap: var(--space-1);
   justify-content: center;
 }
 
-.weekday {
+._weekday_y4lol_61 {
   display: grid;
   place-items: center;
   width: var(--calendar-cell);
@@ -75,13 +75,13 @@
   color: var(--text-muted);
 }
 
-.cell {
+._cell_y4lol_78 {
   display: grid;
   width: var(--calendar-cell);
   height: var(--calendar-cell);
 }
 
-.day {
+._day_y4lol_84 {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -99,25 +99,25 @@
   transition: background var(--motion-interaction-duration) var(--motion-interaction-easing);
 }
 
-.sm .day {
+._sm_y4lol_17 ._day_y4lol_84 {
   font-size: var(--type-size-caption);
 }
 
-.day:hover:not([aria-disabled="true"]):not([data-selected]) {
+._day_y4lol_84:hover:not([aria-disabled="true"]):not([data-selected]) {
   background: var(--surface-muted);
 }
 
-.day[data-today]:not([data-selected]) {
+._day_y4lol_84[data-today]:not([data-selected]) {
   border-color: var(--border-strong);
   font-weight: var(--type-weight-label);
 }
 
-.day[data-outside] {
+._day_y4lol_84[data-outside] {
   color: var(--text-muted);
   opacity: var(--opacity-muted);
 }
 
-.day[data-selected] {
+._day_y4lol_84[data-selected] {
   background: var(--action-primary);
   color: var(--action-on-primary);
   border-color: var(--action-primary);
@@ -125,22 +125,22 @@
   font-weight: var(--type-weight-label);
 }
 
-.day[aria-disabled="true"] {
+._day_y4lol_84[aria-disabled="true"] {
   opacity: var(--opacity-disabled);
   cursor: not-allowed;
 }
 
-.calendar[data-disabled] .day {
+._calendar_y4lol_1[data-disabled] ._day_y4lol_84 {
   opacity: 1;
 }
 
-.day:focus-visible {
+._day_y4lol_84:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .day {
+  ._day_y4lol_84 {
     transition: none;
   }
 }

package/dist/ui/Calendar/Calendar.module.js

@@ -0,0 +1,20 @@
+import "./Calendar.module.css";
+//#region ui/Calendar/Calendar.module.css
+var e = "_calendar_y4lol_1", t = "_sm_y4lol_17", n = "_md_y4lol_23", r = "_lg_y4lol_28", i = "_header_y4lol_39", a = "_heading_y4lol_46", o = "_grid_y4lol_56", s = "_weekdays_y4lol_61", c = "_row_y4lol_62", l = "_weekday_y4lol_61", u = "_cell_y4lol_78", d = "_day_y4lol_84", f = {
+	calendar: e,
+	sm: t,
+	md: n,
+	lg: r,
+	header: i,
+	heading: a,
+	grid: o,
+	weekdays: s,
+	row: c,
+	weekday: l,
+	cell: u,
+	day: d
+};
+//#endregion
+export { e as calendar, u as cell, d as day, f as default, o as grid, i as header, a as heading, r as lg, n as md, c as row, t as sm, l as weekday, s as weekdays };
+
+//# sourceMappingURL=Calendar.module.js.map

package/dist/ui/Calendar/Calendar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.module.js","names":[],"sources":["../../../ui/Calendar/Calendar.module.css"],"sourcesContent":[".calendar {\n  --calendar-cell: 2.25rem;\n  box-sizing: border-box;\n  display: inline-grid;\n  gap: var(--space-2);\n  width: max-content;\n  margin: 0;\n  padding: var(--space-4);\n  border: var(--border-width-thin) solid var(--border-faint);\n  border-radius: var(--radius-surface-md);\n  background: var(--surface-card);\n  box-shadow: var(--shadow-sm);\n  font-family: var(--font-sans);\n  color: var(--text-primary);\n}\n\n.sm {\n  --calendar-cell: 1.9rem;\n  gap: var(--space-1);\n  padding: var(--space-2);\n}\n\n.md {\n  --calendar-cell: 2.25rem;\n  padding: var(--space-4);\n}\n\n.lg {\n  --calendar-cell: 2.6rem;\n  gap: var(--space-3);\n  padding: var(--space-6);\n}\n\n.calendar[data-disabled] {\n  opacity: var(--opacity-disabled);\n  pointer-events: none;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n}\n\n.heading {\n  flex: 1;\n  margin: 0;\n  text-align: center;\n  font-size: var(--type-size-label);\n  font-weight: var(--type-weight-heading);\n  line-height: var(--type-line-heading);\n  color: var(--text-primary);\n}\n\n.grid {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.weekdays,\n.row {\n  display: grid;\n  grid-template-columns: repeat(7, var(--calendar-cell));\n  gap: var(--space-1);\n  justify-content: center;\n}\n\n.weekday {\n  display: grid;\n  place-items: center;\n  width: var(--calendar-cell);\n  font-size: var(--type-size-caption);\n  font-weight: var(--type-weight-caption);\n  color: var(--text-muted);\n}\n\n.cell {\n  display: grid;\n  width: var(--calendar-cell);\n  height: var(--calendar-cell);\n}\n\n.day {\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: var(--border-width-thin) solid transparent;\n  border-radius: var(--radius-control-sm);\n  background: transparent;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  font-weight: var(--type-weight-body);\n  font-variant-numeric: tabular-nums;\n  color: var(--text-primary);\n  cursor: pointer;\n  transition: background var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.sm .day {\n  font-size: var(--type-size-caption);\n}\n\n.day:hover:not([aria-disabled=\"true\"]):not([data-selected]) {\n  background: var(--surface-muted);\n}\n\n.day[data-today]:not([data-selected]) {\n  border-color: var(--border-strong);\n  font-weight: var(--type-weight-label);\n}\n\n.day[data-outside] {\n  color: var(--text-muted);\n  opacity: var(--opacity-muted);\n}\n\n.day[data-selected] {\n  background: var(--action-primary);\n  color: var(--action-on-primary);\n  border-color: var(--action-primary);\n  opacity: 1;\n  font-weight: var(--type-weight-label);\n}\n\n.day[aria-disabled=\"true\"] {\n  opacity: var(--opacity-disabled);\n  cursor: not-allowed;\n}\n\n.calendar[data-disabled] .day {\n  opacity: 1;\n}\n\n.day:focus-visible {\n  outline: var(--border-focus-width) solid var(--focus-ring);\n  outline-offset: var(--space-inset-2xs);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .day {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/ui/Calendar/Calendar.types.d.ts

@@ -0,0 +1,10 @@
+export type CalendarSize = "sm" | "md" | "lg";
+export interface CalendarProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (date: string) => void;
+    size?: CalendarSize;
+    disabled?: boolean;
+    minDate?: string;
+    maxDate?: string;
+}

package/dist/ui/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarSize } from './Calendar.types';

package/dist/ui/Card/Card.d.ts

@@ -0,0 +1,3 @@
+import { CardProps } from './Card.types';
+export type { CardProps, CardSize, CardAction, CardActionVariant } from './Card.types';
+export declare function Card({ title, description, children, size, actions, headerAction, imageSrc, imageAlt, }: CardProps): import("react").JSX.Element;

package/dist/ui/Card/Card.js

@@ -0,0 +1,57 @@
+import { Button as e } from "../Button/Button.js";
+import t from "./Card.module.js";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ui/Card/Card.tsx
+function a({ title: a, description: o, children: s, size: c = "md", actions: l, headerAction: u, imageSrc: d, imageAlt: f }) {
+	let p = n(), m = (l ?? []).slice(0, 2);
+	return /* @__PURE__ */ i("article", {
+		className: [t.card, t[c]].filter(Boolean).join(" "),
+		"aria-labelledby": a ? p : void 0,
+		children: [d ? /* @__PURE__ */ r("img", {
+			className: t.image,
+			src: d,
+			alt: f ?? ""
+		}) : null, /* @__PURE__ */ i("div", {
+			className: t.content,
+			children: [
+				a || o || u ? /* @__PURE__ */ i("header", {
+					className: t.header,
+					children: [/* @__PURE__ */ i("div", {
+						className: t.copy,
+						children: [a ? /* @__PURE__ */ r("h2", {
+							id: p,
+							className: t.title,
+							children: a
+						}) : null, o ? /* @__PURE__ */ r("p", {
+							className: t.description,
+							children: o
+						}) : null]
+					}), u ? /* @__PURE__ */ r(e, {
+						variant: u.variant ?? "tertiary",
+						size: "sm",
+						onClick: u.onClick,
+						children: u.label
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ r("div", {
+					className: t.body,
+					children: s
+				}),
+				m.length > 0 ? /* @__PURE__ */ r("footer", {
+					className: t.footer,
+					children: m.map((t) => /* @__PURE__ */ r(e, {
+						variant: t.variant,
+						size: "md",
+						onClick: t.onClick,
+						children: t.label
+					}, t.label))
+				}) : null
+			]
+		})]
+	});
+}
+//#endregion
+export { a as Card };
+
+//# sourceMappingURL=Card.js.map

package/dist/ui/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","names":[],"sources":["../../../ui/Card/Card.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { Button } from \"../Button\";\nimport type { CardProps } from \"./Card.types\";\nimport styles from \"./Card.module.css\";\n\nexport type { CardProps, CardSize, CardAction, CardActionVariant } from \"./Card.types\";\n\nexport function Card({\n  title,\n  description,\n  children,\n  size = \"md\",\n  actions,\n  headerAction,\n  imageSrc,\n  imageAlt,\n}: CardProps) {\n  const titleId = useId();\n  const footerActions = (actions ?? []).slice(0, 2);\n\n  return (\n    <article\n      className={[styles.card, styles[size]].filter(Boolean).join(\" \")}\n      aria-labelledby={title ? titleId : undefined}\n    >\n      {imageSrc ? (\n        <img className={styles.image} src={imageSrc} alt={imageAlt ?? \"\"} />\n      ) : null}\n      <div className={styles.content}>\n        {title || description || headerAction ? (\n          <header className={styles.header}>\n            <div className={styles.copy}>\n              {title ? (\n                <h2 id={titleId} className={styles.title}>\n                  {title}\n                </h2>\n              ) : null}\n              {description ? <p className={styles.description}>{description}</p> : null}\n            </div>\n            {headerAction ? (\n              <Button\n                variant={headerAction.variant ?? \"tertiary\"}\n                size=\"sm\"\n                onClick={headerAction.onClick}\n              >\n                {headerAction.label}\n              </Button>\n            ) : null}\n          </header>\n        ) : null}\n        <div className={styles.body}>{children}</div>\n        {footerActions.length > 0 ? (\n          <footer className={styles.footer}>\n            {footerActions.map((action) => (\n              <Button\n                key={action.label}\n                variant={action.variant}\n                size=\"md\"\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </footer>\n        ) : null}\n      </div>\n    </article>\n  );\n}\n"],"mappings":";;;;;AAOA,SAAgB,EAAK,EACnB,UACA,gBACA,aACA,UAAO,MACP,YACA,iBACA,aACA,eACY;CACZ,IAAM,IAAU,EAAM,GAChB,KAAiB,KAAW,CAAC,EAAA,CAAG,MAAM,GAAG,CAAC;CAEhD,OACE,kBAAC,WAAD;EACE,WAAW,CAAC,EAAO,MAAM,EAAO,EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC/D,mBAAiB,IAAQ,IAAU,KAAA;EAFrC,UAAA,CAIG,IACC,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAO,KAAK;GAAU,KAAK,KAAY;EAAK,CAAA,IACjE,MACJ,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAvB,UAAA;IACG,KAAS,KAAe,IACvB,kBAAC,UAAD;KAAQ,WAAW,EAAO;KAA1B,UAAA,CACE,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAvB,UAAA,CACG,IACC,kBAAC,MAAD;OAAI,IAAI;OAAS,WAAW,EAAO;OAChC,UAAA;MACC,CAAA,IACF,MACH,IAAc,kBAAC,KAAD;OAAG,WAAW,EAAO;OAAc,UAAA;MAAe,CAAA,IAAI,IAClE;KACJ,CAAA,GAAA,IACC,kBAAC,GAAD;MACE,SAAS,EAAa,WAAW;MACjC,MAAK;MACL,SAAS,EAAa;MAErB,UAAA,EAAa;KACR,CAAA,IACN,IACE;IACN,CAAA,IAAA;IACJ,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;IAC3C,EAAc,SAAS,IACtB,kBAAC,UAAD;KAAQ,WAAW,EAAO;KACvB,UAAA,EAAc,KAAK,MAClB,kBAAC,GAAD;MAEE,SAAS,EAAO;MAChB,MAAK;MACL,SAAS,EAAO;MAEf,UAAA,EAAO;KACF,GAND,EAAO,KAMN,CACT;IACK,CAAA,IACN;GACD;EACE,CAAA,CAAA;;AAEb"}

package/{ui → dist/ui}/Card/Card.module.css

@@ -1,4 +1,4 @@
-.card {
+._card_1nbnn_1 {
   --card-spacing: var(--space-6);
   display: flex;
   flex-direction: column;
@@ -11,13 +11,13 @@
   box-shadow: var(--shadow-sm);
 }
 
-.sm {
+._sm_1nbnn_14 {
   --card-spacing: var(--space-4);
   max-width: 24rem;
   margin-inline: auto;
 }
 
-.image {
+._image_1nbnn_20 {
   display: block;
   width: 100%;
   height: 10rem;
@@ -26,11 +26,11 @@
   border-top-right-radius: var(--radius-surface-md);
 }
 
-.sm .image {
+._sm_1nbnn_14 ._image_1nbnn_20 {
   height: 8rem;
 }
 
-.content {
+._content_1nbnn_33 {
   display: flex;
   flex-direction: column;
   gap: var(--card-spacing);
@@ -38,14 +38,14 @@
   min-width: 0;
 }
 
-.header {
+._header_1nbnn_41 {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--space-4);
 }
 
-.copy {
+._copy_1nbnn_48 {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
@@ -53,7 +53,7 @@
   flex: 1;
 }
 
-.title {
+._title_1nbnn_56 {
   margin: 0;
   overflow-wrap: anywhere;
   font-family: var(--font-sans);
@@ -63,12 +63,12 @@
   color: var(--text-primary);
 }
 
-.sm .title {
+._sm_1nbnn_14 ._title_1nbnn_56 {
   font-size: var(--type-size-body);
   line-height: var(--type-line-body);
 }
 
-.description {
+._description_1nbnn_71 {
   margin: 0;
   overflow-wrap: anywhere;
   font-family: var(--font-sans);
@@ -77,19 +77,19 @@
   color: var(--text-secondary);
 }
 
-.body {
+._body_1nbnn_80 {
   display: grid;
   gap: var(--space-4);
   min-width: 0;
 }
 
-.footer {
+._footer_1nbnn_86 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: var(--space-2);
 }
 
-.footer button {
+._footer_1nbnn_86 button {
   width: 100%;
 }

package/dist/ui/Card/Card.module.js

@@ -0,0 +1,18 @@
+import "./Card.module.css";
+//#region ui/Card/Card.module.css
+var e = "_card_1nbnn_1", t = "_sm_1nbnn_14", n = "_image_1nbnn_20", r = "_content_1nbnn_33", i = "_header_1nbnn_41", a = "_copy_1nbnn_48", o = "_title_1nbnn_56", s = "_description_1nbnn_71", c = "_body_1nbnn_80", l = "_footer_1nbnn_86", u = {
+	card: e,
+	sm: t,
+	image: n,
+	content: r,
+	header: i,
+	copy: a,
+	title: o,
+	description: s,
+	body: c,
+	footer: l
+};
+//#endregion
+export { c as body, e as card, r as content, a as copy, u as default, s as description, l as footer, i as header, n as image, t as sm, o as title };
+
+//# sourceMappingURL=Card.module.js.map

package/dist/ui/Card/Card.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.module.js","names":[],"sources":["../../../ui/Card/Card.module.css"],"sourcesContent":[".card {\n  --card-spacing: var(--space-6);\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background-color: var(--surface-card);\n  border: 1px solid var(--border-faint);\n  border-radius: var(--radius-surface-md);\n  box-shadow: var(--shadow-sm);\n}\n\n.sm {\n  --card-spacing: var(--space-4);\n  max-width: 24rem;\n  margin-inline: auto;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: 10rem;\n  object-fit: cover;\n  border-top-left-radius: var(--radius-surface-md);\n  border-top-right-radius: var(--radius-surface-md);\n}\n\n.sm .image {\n  height: 8rem;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--card-spacing);\n  padding: var(--card-spacing);\n  min-width: 0;\n}\n\n.header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n\n.copy {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  min-width: 0;\n  flex: 1;\n}\n\n.title {\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-heading);\n  font-weight: var(--type-weight-heading);\n  line-height: var(--type-line-heading);\n  color: var(--text-primary);\n}\n\n.sm .title {\n  font-size: var(--type-size-body);\n  line-height: var(--type-line-body);\n}\n\n.description {\n  margin: 0;\n  overflow-wrap: anywhere;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  line-height: var(--type-line-body);\n  color: var(--text-secondary);\n}\n\n.body {\n  display: grid;\n  gap: var(--space-4);\n  min-width: 0;\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--space-2);\n}\n\n.footer button {\n  width: 100%;\n}\n"],"mappings":""}

package/dist/ui/Card/Card.types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { ButtonVariant } from '../Button';
+export type CardSize = "sm" | "md";
+export type CardActionVariant = ButtonVariant;
+export interface CardAction {
+    label: string;
+    variant?: CardActionVariant;
+    onClick?: () => void;
+}
+export interface CardProps {
+    title?: string;
+    description?: string;
+    children: ReactNode;
+    size?: CardSize;
+    actions?: CardAction[];
+    headerAction?: CardAction;
+    imageSrc?: string;
+    /** Required when imageSrc is set. */
+    imageAlt?: string;
+}

package/{ui/Card/index.ts → dist/ui/Card/index.d.ts}

@@ -1,2 +1,2 @@
-export { Card } from "./Card";
-export type { CardProps, CardSize, CardAction, CardActionVariant } from "./Card.types";
+export { Card } from './Card';
+export type { CardProps, CardSize, CardAction, CardActionVariant } from './Card.types';

package/dist/ui/Carousel/Carousel.d.ts

@@ -0,0 +1,3 @@
+import { CarouselProps } from './Carousel.types';
+export type { CarouselProps, CarouselOrientation, CarouselAlign, CarouselSlidesPerView, } from './Carousel.types';
+export declare function Carousel({ items, orientation, loop, align, slidesPerView, showControls, showIndex, onIndexChange, ariaLabel, }: CarouselProps): import("react").JSX.Element;

package/dist/ui/Carousel/Carousel.js

@@ -0,0 +1,99 @@
+"use client";
+import { Button as e } from "../Button/Button.js";
+import t from "./Carousel.module.js";
+import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "embla-carousel-react";
+//#region ui/Carousel/Carousel.tsx
+function d({ items: d, orientation: f = "horizontal", loop: p = !1, align: m = "start", slidesPerView: h = 1, showControls: g = !0, showIndex: _ = !1, onIndexChange: v, ariaLabel: y = "Carousel" }) {
+	let b = i(() => ({
+		axis: f === "vertical" ? "y" : "x",
+		loop: p,
+		align: m
+	}), [
+		f,
+		p,
+		m
+	]), [x, S] = u(b), [C, w] = o(!1), [T, E] = o(!1), [D, O] = o(0), [k, A] = o(Math.max(d.length, 1)), j = a(v);
+	j.current = v;
+	let M = n(() => {
+		if (!S) return;
+		let e = S.selectedScrollSnap();
+		w(S.canScrollPrev()), E(S.canScrollNext()), O(e), A(S.scrollSnapList().length), j.current?.(e);
+	}, [S]);
+	r(() => {
+		if (S) return M(), S.on("select", M), S.on("reInit", M), () => {
+			S.off("select", M), S.off("reInit", M);
+		};
+	}, [S, M]), r(() => {
+		S?.reInit();
+	}, [
+		S,
+		d.length,
+		h
+	]);
+	function N() {
+		S?.scrollPrev();
+	}
+	function P() {
+		S?.scrollNext();
+	}
+	function F(e) {
+		let t = f === "vertical" ? "ArrowUp" : "ArrowLeft", n = f === "vertical" ? "ArrowDown" : "ArrowRight";
+		e.key === t ? (e.preventDefault(), N()) : e.key === n && (e.preventDefault(), P());
+	}
+	let I = k || Math.max(d.length, 1), L = f === "vertical" ? "ChevronUp" : "ChevronLeft", R = f === "vertical" ? "ChevronDown" : "ChevronRight", z = h === 2 ? t.per2 : h === 3 ? t.per3 : h === 4 ? t.per4 : "";
+	return /* @__PURE__ */ l("div", {
+		className: `${t.root} ${t[f]} ${z}`,
+		role: "region",
+		"aria-roledescription": "carousel",
+		"aria-label": y,
+		tabIndex: 0,
+		onKeyDown: F,
+		children: [/* @__PURE__ */ l("div", {
+			className: t.stage,
+			children: [/* @__PURE__ */ c("div", {
+				className: t.viewport,
+				ref: x,
+				children: /* @__PURE__ */ c("div", {
+					className: t.track,
+					children: d.map((e, n) => /* @__PURE__ */ c("div", {
+						className: t.slide,
+						role: "group",
+						"aria-roledescription": "slide",
+						"aria-label": `Slide ${n + 1} of ${d.length}`,
+						children: e
+					}, n))
+				})
+			}), g ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+				className: t.prev,
+				children: /* @__PURE__ */ c(e, {
+					variant: "secondary",
+					size: "sm",
+					iconStart: L,
+					ariaLabel: "Previous slide",
+					disabled: !C,
+					onClick: N
+				})
+			}), /* @__PURE__ */ c("div", {
+				className: t.next,
+				children: /* @__PURE__ */ c(e, {
+					variant: "secondary",
+					size: "sm",
+					iconStart: R,
+					ariaLabel: "Next slide",
+					disabled: !T,
+					onClick: P
+				})
+			})] }) : null]
+		}), _ ? /* @__PURE__ */ c("p", {
+			className: t.index,
+			"aria-live": "polite",
+			children: `Slide ${D + 1} of ${I}`
+		}) : null]
+	});
+}
+//#endregion
+export { d as Carousel };
+
+//# sourceMappingURL=Carousel.js.map

package/dist/ui/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../ui/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport { Button } from \"../Button\";\nimport type { CarouselProps } from \"./Carousel.types\";\nimport styles from \"./Carousel.module.css\";\n\nexport type {\n  CarouselProps,\n  CarouselOrientation,\n  CarouselAlign,\n  CarouselSlidesPerView,\n} from \"./Carousel.types\";\n\nexport function Carousel({\n  items,\n  orientation = \"horizontal\",\n  loop = false,\n  align = \"start\",\n  slidesPerView = 1,\n  showControls = true,\n  showIndex = false,\n  onIndexChange,\n  ariaLabel = \"Carousel\",\n}: CarouselProps) {\n  const emblaOptions = useMemo(\n    () => ({\n      axis: (orientation === \"vertical\" ? \"y\" : \"x\") as \"x\" | \"y\",\n      loop,\n      align,\n    }),\n    [orientation, loop, align],\n  );\n  const [viewportRef, emblaApi] = useEmblaCarousel(emblaOptions);\n\n  const [canScrollPrev, setCanScrollPrev] = useState(false);\n  const [canScrollNext, setCanScrollNext] = useState(false);\n  const [index, setIndex] = useState(0);\n  const [snapCount, setSnapCount] = useState(Math.max(items.length, 1));\n  const onIndexChangeRef = useRef(onIndexChange);\n  onIndexChangeRef.current = onIndexChange;\n\n  const sync = useCallback(() => {\n    if (!emblaApi) return;\n    const nextIndex = emblaApi.selectedScrollSnap();\n    setCanScrollPrev(emblaApi.canScrollPrev());\n    setCanScrollNext(emblaApi.canScrollNext());\n    setIndex(nextIndex);\n    setSnapCount(emblaApi.scrollSnapList().length);\n    onIndexChangeRef.current?.(nextIndex);\n  }, [emblaApi]);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    sync();\n    emblaApi.on(\"select\", sync);\n    emblaApi.on(\"reInit\", sync);\n    return () => {\n      emblaApi.off(\"select\", sync);\n      emblaApi.off(\"reInit\", sync);\n    };\n  }, [emblaApi, sync]);\n\n  useEffect(() => {\n    emblaApi?.reInit();\n  }, [emblaApi, items.length, slidesPerView]);\n\n  function scrollPrev() {\n    emblaApi?.scrollPrev();\n  }\n\n  function scrollNext() {\n    emblaApi?.scrollNext();\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const prevKey = orientation === \"vertical\" ? \"ArrowUp\" : \"ArrowLeft\";\n    const nextKey = orientation === \"vertical\" ? \"ArrowDown\" : \"ArrowRight\";\n    if (event.key === prevKey) {\n      event.preventDefault();\n      scrollPrev();\n    } else if (event.key === nextKey) {\n      event.preventDefault();\n      scrollNext();\n    }\n  }\n\n  const count = snapCount || Math.max(items.length, 1);\n  const prevIcon = orientation === \"vertical\" ? \"ChevronUp\" : \"ChevronLeft\";\n  const nextIcon = orientation === \"vertical\" ? \"ChevronDown\" : \"ChevronRight\";\n  const perClass =\n    slidesPerView === 2 ? styles.per2 : slidesPerView === 3 ? styles.per3 : slidesPerView === 4 ? styles.per4 : \"\";\n\n  return (\n    <div\n      className={`${styles.root} ${styles[orientation]} ${perClass}`}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label={ariaLabel}\n      tabIndex={0}\n      onKeyDown={onKeyDown}\n    >\n      <div className={styles.stage}>\n        <div className={styles.viewport} ref={viewportRef}>\n          <div className={styles.track}>\n            {items.map((item, i) => (\n              <div\n                key={i}\n                className={styles.slide}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-label={`Slide ${i + 1} of ${items.length}`}\n              >\n                {item}\n              </div>\n            ))}\n          </div>\n        </div>\n        {showControls ? (\n          <>\n            <div className={styles.prev}>\n              <Button\n                variant=\"secondary\"\n                size=\"sm\"\n                iconStart={prevIcon}\n                ariaLabel=\"Previous slide\"\n                disabled={!canScrollPrev}\n                onClick={scrollPrev}\n              />\n            </div>\n            <div className={styles.next}>\n              <Button\n                variant=\"secondary\"\n                size=\"sm\"\n                iconStart={nextIcon}\n                ariaLabel=\"Next slide\"\n                disabled={!canScrollNext}\n                onClick={scrollNext}\n              />\n            </div>\n          </>\n        ) : null}\n      </div>\n      {showIndex ? (\n        <p className={styles.index} aria-live=\"polite\">\n          {`Slide ${index + 1} of ${count}`}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/Carousel/Carousel.module.css

@@ -1,45 +1,45 @@
-.root {
+._root_1mva0_1 {
   width: 100%;
   min-width: 0;
   outline: none;
 }
 
-.root:focus-visible {
+._root_1mva0_1:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
 
-.horizontal,
-.vertical {
+._horizontal_1mva0_12,
+._vertical_1mva0_13 {
   min-width: 0;
 }
 
-.stage {
+._stage_1mva0_17 {
   position: relative;
 }
 
-.viewport {
+._viewport_1mva0_21 {
   overflow: hidden;
 }
 
-.vertical .viewport {
+._vertical_1mva0_13 ._viewport_1mva0_21 {
   block-size: 12.5rem;
 }
 
-.track {
+._track_1mva0_29 {
   display: flex;
   align-items: stretch;
   margin-inline-start: calc(-1 * var(--space-4));
 }
 
-.vertical .track {
+._vertical_1mva0_13 ._track_1mva0_29 {
   flex-direction: column;
   height: 100%;
   margin-inline-start: 0;
   margin-block-start: calc(-1 * var(--space-4));
 }
 
-.slide {
+._slide_1mva0_42 {
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -50,60 +50,60 @@
   padding-inline-start: var(--space-4);
 }
 
-.slide > * {
+._slide_1mva0_42 > * {
   flex: 1 1 auto;
   width: 100%;
   min-width: 0;
 }
 
-.vertical .slide {
+._vertical_1mva0_13 ._slide_1mva0_42 {
   padding-inline-start: 0;
   padding-block-start: var(--space-4);
 }
 
-.per2 .slide {
+._per2_1mva0_64 ._slide_1mva0_42 {
   flex-basis: 50%;
 }
 
-.per3 .slide {
+._per3_1mva0_68 ._slide_1mva0_42 {
   flex-basis: calc(100% / 3);
 }
 
-.per4 .slide {
+._per4_1mva0_72 ._slide_1mva0_42 {
   flex-basis: 25%;
 }
 
-.prev,
-.next {
+._prev_1mva0_76,
+._next_1mva0_77 {
   position: absolute;
   z-index: 1;
 }
 
-.horizontal .prev {
+._horizontal_1mva0_12 ._prev_1mva0_76 {
   inset-block-start: 50%;
   inset-inline-start: calc(-1 * var(--space-12));
   transform: translateY(-50%);
 }
 
-.horizontal .next {
+._horizontal_1mva0_12 ._next_1mva0_77 {
   inset-block-start: 50%;
   inset-inline-end: calc(-1 * var(--space-12));
   transform: translateY(-50%);
 }
 
-.vertical .prev {
+._vertical_1mva0_13 ._prev_1mva0_76 {
   inset-block-start: calc(-1 * var(--space-12));
   inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
-.vertical .next {
+._vertical_1mva0_13 ._next_1mva0_77 {
   inset-block-end: calc(-1 * var(--space-12));
   inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
-.index {
+._index_1mva0_106 {
   margin: var(--space-3) 0 0;
   text-align: center;
   font-family: var(--font-sans);