@betfin/ui 0.1.0

package/dist/components/badge.js

@@ -0,0 +1,47 @@
+import {
+  cn
+} from "../chunk-Y2TKUANL.js";
+
+// src/components/badge.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+var badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-4xl border border-transparent px-2 py-0.5 font-medium text-xs transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant = "default", render, ...props }) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ variant }), className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
+    }
+  });
+}
+export {
+  Badge,
+  badgeVariants
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@betfin/ui/lib/utils';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst badgeVariants = cva(\n\t'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-4xl border border-transparent px-2 py-0.5 font-medium text-xs transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n\t\t\t\tsecondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n\t\t\t\tdestructive:\n\t\t\t\t\t'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\n\t\t\t\toutline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n\t\t\t\tghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n\t\t\t\tlink: 'text-primary underline-offset-4 hover:underline',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t},\n\t},\n);\n\nfunction Badge({ className, variant = 'default', render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {\n\treturn useRender({\n\t\tdefaultTagName: 'span',\n\t\tprops: mergeProps<'span'>(\n\t\t\t{\n\t\t\t\tclassName: cn(badgeVariants({ variant }), className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: 'badge',\n\t\t\tvariant,\n\t\t},\n\t});\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAE1B,SAAS,WAA8B;AAEvC,IAAM,gBAAgB;AAAA,EACrB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,SAAS;AAAA,QACT,WAAW;AAAA,QACX,aACC;AAAA,QACD,SAAS;AAAA,QACT,OAAO;AAAA,QACP,MAAM;AAAA,MACP;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,IACV;AAAA,EACD;AACD;AAEA,SAAS,MAAM,EAAE,WAAW,UAAU,WAAW,QAAQ,GAAG,MAAM,GAA0E;AAC3I,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,MACpD;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IACD;AAAA,EACD,CAAC;AACF;","names":[]}

package/dist/components/bet-value.d.ts

@@ -0,0 +1,49 @@
+import { type FormatBetOptions } from '@betfin/ui/lib/format';
+import type { CSSProperties } from 'react';
+declare global {
+    interface Window {
+        /** Whitelabel override for the coin glyph, set by the host from the manifest
+         *  (`branding.betIcon`). A window global so it crosses the module-federation
+         *  boundary — remotes render BetCoin against the host's window. */
+        __BET_ICON__?: string;
+    }
+}
+/**
+ * The BET coin token — the single source of the coin glyph. Renders the default
+ * gold coin (from the original Betfin design system), or a whitelabel image when
+ * `window.__BET_ICON__` is set.
+ */
+export declare function BetCoin({ size, className, style }: {
+    size?: number | string;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;
+export interface BetValueProps extends FormatBetOptions {
+    /** The amount — a number, or a raw on-chain bigint (18-decimals). */
+    value: number | bigint;
+    /** Colour the number + coin in the brand primary (gold). */
+    gold?: boolean;
+    /** Coin size — a px number, or any CSS length. Defaults to `1em` so it scales with the surrounding text. */
+    size?: number | string;
+    /** Show the BET coin (default true). */
+    icon?: boolean;
+    /** Coin side (default 'right'). */
+    iconPosition?: 'left' | 'right';
+    /** Optional text before the number. */
+    prefix?: string;
+    /** Tooltip side (default 'top'). */
+    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Canonical way to display a BET amount. Formats the value compactly and shows
+ * the gold coin (sized to the surrounding text). Hovering reveals the exact,
+ * un-abbreviated amount in a styled tooltip. Use this everywhere a BET amount
+ * is rendered.
+ *
+ *   <BetValue value={12_500} />              → 12.5K ●   (coin matches text size)
+ *   <BetValue value={rewardsBigint} gold />  → 1.24K ● (gold)
+ *   <BetValue value={n} size={30} />         → fixed 30px coin
+ */
+export declare function BetValue({ value, gold, size, icon, iconPosition, prefix, tooltipSide, className, style, ...opts }: BetValueProps): import("react").JSX.Element;

package/dist/components/bet-value.js

@@ -0,0 +1,12 @@
+import {
+  BetCoin,
+  BetValue
+} from "../chunk-ILNHKDYA.js";
+import "../chunk-K7JWN6NH.js";
+import "../chunk-HRFMTZ55.js";
+import "../chunk-Y2TKUANL.js";
+export {
+  BetCoin,
+  BetValue
+};
+//# sourceMappingURL=bet-value.js.map

package/dist/components/bet-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,10 @@
+import { useRender } from '@base-ui/react/use-render';
+import type * as React from 'react';
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/breadcrumb.js

@@ -0,0 +1,65 @@
+import {
+  cn
+} from "../chunk-Y2TKUANL.js";
+
+// src/components/breadcrumb.tsx
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx("ol", { "data-slot": "breadcrumb-list", className: cn("wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm", className), ...props });
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1", className), ...props });
+}
+function BreadcrumbLink({ className, render, ...props }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps(
+      {
+        className: cn("transition-colors hover:text-foreground", className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  });
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props });
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {}) });
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/breadcrumb.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cn } from '@betfin/ui/lib/utils';\nimport { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';\nimport type * as React from 'react';\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {\n\treturn <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" className={cn(className)} {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {\n\treturn (\n\t\t<ol data-slot=\"breadcrumb-list\" className={cn('wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm', className)} {...props} />\n\t);\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {\n\treturn <li data-slot=\"breadcrumb-item\" className={cn('inline-flex items-center gap-1', className)} {...props} />;\n}\n\nfunction BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {\n\treturn useRender({\n\t\tdefaultTagName: 'a',\n\t\tprops: mergeProps<'a'>(\n\t\t\t{\n\t\t\t\tclassName: cn('transition-colors hover:text-foreground', className),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: 'breadcrumb-link',\n\t\t},\n\t});\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {\n\treturn <span data-slot=\"breadcrumb-page\" aria-current=\"page\" className={cn('font-normal text-foreground', className)} {...props} />;\n}\n\nfunction BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {\n\treturn (\n\t\t<li data-slot=\"breadcrumb-separator\" role=\"presentation\" aria-hidden=\"true\" className={cn('[&>svg]:size-3.5', className)} {...props}>\n\t\t\t{children ?? <ChevronRightIcon />}\n\t\t</li>\n\t);\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-ellipsis\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontalIcon />\n\t\t\t<span className=\"sr-only\">More</span>\n\t\t</span>\n\t);\n}\n\nexport { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };\n"],"mappings":";;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAE1B,SAAS,kBAAkB,0BAA0B;AAI7C,cA2CN,YA3CM;AADR,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SAAO,oBAAC,SAAI,cAAW,cAAa,aAAU,cAAa,WAAW,GAAG,SAAS,GAAI,GAAG,OAAO;AACjG;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SACC,oBAAC,QAAG,aAAU,mBAAkB,WAAW,GAAG,qFAAqF,SAAS,GAAI,GAAG,OAAO;AAE5J;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAA+B;AAC5E,SAAO,oBAAC,QAAG,aAAU,mBAAkB,WAAW,GAAG,kCAAkC,SAAS,GAAI,GAAG,OAAO;AAC/G;AAEA,SAAS,eAAe,EAAE,WAAW,QAAQ,GAAG,MAAM,GAAkC;AACvF,SAAO,UAAU;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACN;AAAA,QACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACnE;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,IACP;AAAA,EACD,CAAC;AACF;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,MAAM,GAAiC;AAC9E,SAAO,oBAAC,UAAK,aAAU,mBAAkB,gBAAa,QAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,OAAO;AAClI;AAEA,SAAS,oBAAoB,EAAE,UAAU,WAAW,GAAG,MAAM,GAA+B;AAC3F,SACC,oBAAC,QAAG,aAAU,wBAAuB,MAAK,gBAAe,eAAY,QAAO,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,OAC5H,sBAAY,oBAAC,oBAAiB,GAChC;AAEF;AAEA,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAAiC;AAClF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,0DAA0D,SAAS;AAAA,MAChF,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB;AAAA,QACpB,oBAAC,UAAK,WAAU,WAAU,kBAAI;AAAA;AAAA;AAAA,EAC/B;AAEF;","names":[]}

package/dist/components/button.d.ts

@@ -0,0 +1,8 @@
+import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import { type VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,10 @@
+import {
+  Button,
+  buttonVariants
+} from "../chunk-5CXIFF6J.js";
+import "../chunk-Y2TKUANL.js";
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/calendar.d.ts

@@ -0,0 +1,10 @@
+import { Button } from '@betfin/ui/components/button';
+import * as React from 'react';
+import { type DayButton, DayPicker, type Locale } from 'react-day-picker';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/calendar.js

@@ -0,0 +1,145 @@
+"use client";
+import {
+  Button,
+  buttonVariants
+} from "../chunk-5CXIFF6J.js";
+import {
+  cn
+} from "../chunk-Y2TKUANL.js";
+
+// src/components/calendar.tsx
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { jsx } from "react/jsx-runtime";
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames();
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn(
+        "group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)]",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      ),
+      captionLayout,
+      locale,
+      formatters: {
+        formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+        ...formatters
+      },
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+        dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm", defaultClassNames.dropdowns),
+        dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label" ? "text-sm" : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn("flex-1 select-none rounded-(--cell-radius) font-normal text-[0.8rem] text-muted-foreground", defaultClassNames.weekday),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+        week_number: cn("select-none text-[0.8rem] text-muted-foreground", defaultClassNames.week_number),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none rounded-(--cell-radius) p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+          props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn(
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
+          defaultClassNames.range_end
+        ),
+        today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames
+      },
+      components: {
+        Root: ({ className: className2, rootRef, ...props2 }) => {
+          return /* @__PURE__ */ jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className2), ...props2 });
+        },
+        Chevron: ({ className: className2, orientation, ...props2 }) => {
+          if (orientation === "left") {
+            return /* @__PURE__ */ jsx(ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          if (orientation === "right") {
+            return /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
+          }
+          return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
+        },
+        DayButton: ({ ...props2 }) => /* @__PURE__ */ jsx(CalendarDayButton, { locale, ...props2 }),
+        WeekNumber: ({ children, ...props2 }) => {
+          return /* @__PURE__ */ jsx("td", { ...props2, children: /* @__PURE__ */ jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children }) });
+        },
+        ...components
+      },
+      ...props
+    }
+  );
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      "data-day": day.date.toLocaleDateString(locale?.code),
+      "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+      "data-range-start": modifiers.range_start,
+      "data-range-end": modifiers.range_end,
+      "data-range-middle": modifiers.range_middle,
+      className: cn(
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 font-normal leading-none data-[range-end=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-end=true]:bg-primary data-[range-middle=true]:bg-muted data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Calendar,
+  CalendarDayButton
+};
+//# sourceMappingURL=calendar.js.map

package/dist/components/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/calendar.tsx"],"sourcesContent":["'use client';\n\nimport { Button, buttonVariants } from '@betfin/ui/components/button';\nimport { cn } from '@betfin/ui/lib/utils';\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { type DayButton, DayPicker, getDefaultClassNames, type Locale } from 'react-day-picker';\n\nfunction Calendar({\n\tclassName,\n\tclassNames,\n\tshowOutsideDays = true,\n\tcaptionLayout = 'label',\n\tbuttonVariant = 'ghost',\n\tlocale,\n\tformatters,\n\tcomponents,\n\t...props\n}: React.ComponentProps<typeof DayPicker> & {\n\tbuttonVariant?: React.ComponentProps<typeof Button>['variant'];\n}) {\n\tconst defaultClassNames = getDefaultClassNames();\n\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cn(\n\t\t\t\t'group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)]',\n\t\t\t\tString.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n\t\t\t\tString.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tcaptionLayout={captionLayout}\n\t\t\tlocale={locale}\n\t\t\tformatters={{\n\t\t\t\tformatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: 'short' }),\n\t\t\t\t...formatters,\n\t\t\t}}\n\t\t\tclassNames={{\n\t\t\t\troot: cn('w-fit', defaultClassNames.root),\n\t\t\t\tmonths: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),\n\t\t\t\tmonth: cn('flex w-full flex-col gap-4', defaultClassNames.month),\n\t\t\t\tnav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),\n\t\t\t\tbutton_previous: cn(\n\t\t\t\t\tbuttonVariants({ variant: buttonVariant }),\n\t\t\t\t\t'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n\t\t\t\t\tdefaultClassNames.button_previous,\n\t\t\t\t),\n\t\t\t\tbutton_next: cn(\n\t\t\t\t\tbuttonVariants({ variant: buttonVariant }),\n\t\t\t\t\t'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',\n\t\t\t\t\tdefaultClassNames.button_next,\n\t\t\t\t),\n\t\t\t\tmonth_caption: cn('flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)', defaultClassNames.month_caption),\n\t\t\t\tdropdowns: cn('flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm', defaultClassNames.dropdowns),\n\t\t\t\tdropdown_root: cn('relative rounded-(--cell-radius)', defaultClassNames.dropdown_root),\n\t\t\t\tdropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),\n\t\t\t\tcaption_label: cn(\n\t\t\t\t\t'select-none font-medium',\n\t\t\t\t\tcaptionLayout === 'label' ? 'text-sm' : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',\n\t\t\t\t\tdefaultClassNames.caption_label,\n\t\t\t\t),\n\t\t\t\tmonth_grid: cn('w-full border-collapse', defaultClassNames.month_grid),\n\t\t\t\tweekdays: cn('flex', defaultClassNames.weekdays),\n\t\t\t\tweekday: cn('flex-1 select-none rounded-(--cell-radius) font-normal text-[0.8rem] text-muted-foreground', defaultClassNames.weekday),\n\t\t\t\tweek: cn('mt-2 flex w-full', defaultClassNames.week),\n\t\t\t\tweek_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),\n\t\t\t\tweek_number: cn('select-none text-[0.8rem] text-muted-foreground', defaultClassNames.week_number),\n\t\t\t\tday: cn(\n\t\t\t\t\t'group/day relative aspect-square h-full w-full select-none rounded-(--cell-radius) p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',\n\t\t\t\t\tprops.showWeekNumber\n\t\t\t\t\t\t? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'\n\t\t\t\t\t\t: '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',\n\t\t\t\t\tdefaultClassNames.day,\n\t\t\t\t),\n\t\t\t\trange_start: cn(\n\t\t\t\t\t'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',\n\t\t\t\t\tdefaultClassNames.range_start,\n\t\t\t\t),\n\t\t\t\trange_middle: cn('rounded-none', defaultClassNames.range_middle),\n\t\t\t\trange_end: cn(\n\t\t\t\t\t'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',\n\t\t\t\t\tdefaultClassNames.range_end,\n\t\t\t\t),\n\t\t\t\ttoday: cn('rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none', defaultClassNames.today),\n\t\t\t\toutside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),\n\t\t\t\tdisabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),\n\t\t\t\thidden: cn('invisible', defaultClassNames.hidden),\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tRoot: ({ className, rootRef, ...props }) => {\n\t\t\t\t\treturn <div data-slot=\"calendar\" ref={rootRef} className={cn(className)} {...props} />;\n\t\t\t\t},\n\t\t\t\tChevron: ({ className, orientation, ...props }) => {\n\t\t\t\t\tif (orientation === 'left') {\n\t\t\t\t\t\treturn <ChevronLeftIcon className={cn('size-4', className)} {...props} />;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (orientation === 'right') {\n\t\t\t\t\t\treturn <ChevronRightIcon className={cn('size-4', className)} {...props} />;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn <ChevronDownIcon className={cn('size-4', className)} {...props} />;\n\t\t\t\t},\n\t\t\t\tDayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n\t\t\t\tWeekNumber: ({ children, ...props }) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<td {...props}>\n\t\t\t\t\t\t\t<div className=\"flex size-(--cell-size) items-center justify-center text-center\">{children}</div>\n\t\t\t\t\t\t</td>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t\t...components,\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n\tconst defaultClassNames = getDefaultClassNames();\n\n\tconst ref = React.useRef<HTMLButtonElement>(null);\n\tReact.useEffect(() => {\n\t\tif (modifiers.focused) ref.current?.focus();\n\t}, [modifiers.focused]);\n\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"ghost\"\n\t\t\tsize=\"icon\"\n\t\t\tdata-day={day.date.toLocaleDateString(locale?.code)}\n\t\t\tdata-selected-single={modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle}\n\t\t\tdata-range-start={modifiers.range_start}\n\t\t\tdata-range-end={modifiers.range_end}\n\t\t\tdata-range-middle={modifiers.range_middle}\n\t\t\tclassName={cn(\n\t\t\t\t'relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 font-normal leading-none data-[range-end=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-end=true]:bg-primary data-[range-middle=true]:bg-muted data-[range-start=true]:bg-primary data-[selected-single=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:text-foreground data-[range-start=true]:text-primary-foreground data-[selected-single=true]:text-primary-foreground group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70',\n\t\t\t\tdefaultClassNames.day,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Calendar, CalendarDayButton };\n"],"mappings":"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","names":["className","props"]}

package/dist/components/carousel.d.ts

@@ -0,0 +1,28 @@
+import { Button } from '@betfin/ui/components/button';
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import * as React from 'react';
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: 'horizontal' | 'vertical';
+    setApi?: (api: CarouselApi) => void;
+};
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+declare function useCarousel(): CarouselContextProps;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps): React.JSX.Element;
+declare function CarouselContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CarouselItem({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/components/carousel.js

@@ -0,0 +1,153 @@
+import {
+  Button
+} from "../chunk-5CXIFF6J.js";
+import {
+  cn
+} from "../chunk-Y2TKUANL.js";
+
+// src/components/carousel.tsx
+import useEmblaCarousel from "embla-carousel-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.use(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const onSelect = React.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  const contextValue = React.useMemo(
+    () => ({
+      carouselRef,
+      api,
+      opts,
+      orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext
+    }),
+    [carouselRef, api, opts, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext]
+  );
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { onKeyDownCapture: handleKeyDown, className: cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children }) });
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: /* @__PURE__ */ jsx("div", { className: cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) });
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+      ...props
+    }
+  );
+}
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "carousel-previous",
+      variant,
+      size,
+      className: cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal" ? "inset-y-0 -left-12 my-auto" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "carousel-next",
+      variant,
+      size,
+      className: cn(
+        "absolute touch-manipulation rounded-full",
+        orientation === "horizontal" ? "inset-y-0 -right-12 my-auto" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel
+};
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/carousel.tsx"],"sourcesContent":["import { Button } from '@betfin/ui/components/button';\nimport { cn } from '@betfin/ui/lib/utils';\nimport useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';\nimport { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';\nimport * as React from 'react';\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n\topts?: CarouselOptions;\n\tplugins?: CarouselPlugin;\n\torientation?: 'horizontal' | 'vertical';\n\tsetApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n\tcarouselRef: ReturnType<typeof useEmblaCarousel>[0];\n\tapi: ReturnType<typeof useEmblaCarousel>[1];\n\tscrollPrev: () => void;\n\tscrollNext: () => void;\n\tcanScrollPrev: boolean;\n\tcanScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n\tconst context = React.use(CarouselContext);\n\n\tif (!context) {\n\t\tthrow new Error('useCarousel must be used within a <Carousel />');\n\t}\n\n\treturn context;\n}\n\nfunction Carousel({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }: React.ComponentProps<'div'> & CarouselProps) {\n\tconst [carouselRef, api] = useEmblaCarousel(\n\t\t{\n\t\t\t...opts,\n\t\t\taxis: orientation === 'horizontal' ? 'x' : 'y',\n\t\t},\n\t\tplugins,\n\t);\n\tconst [canScrollPrev, setCanScrollPrev] = React.useState(false);\n\tconst [canScrollNext, setCanScrollNext] = React.useState(false);\n\n\tconst onSelect = React.useCallback((api: CarouselApi) => {\n\t\tif (!api) return;\n\t\tsetCanScrollPrev(api.canScrollPrev());\n\t\tsetCanScrollNext(api.canScrollNext());\n\t}, []);\n\n\tconst scrollPrev = React.useCallback(() => {\n\t\tapi?.scrollPrev();\n\t}, [api]);\n\n\tconst scrollNext = React.useCallback(() => {\n\t\tapi?.scrollNext();\n\t}, [api]);\n\n\tconst handleKeyDown = React.useCallback(\n\t\t(event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\tif (event.key === 'ArrowLeft') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tscrollPrev();\n\t\t\t} else if (event.key === 'ArrowRight') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tscrollNext();\n\t\t\t}\n\t\t},\n\t\t[scrollPrev, scrollNext],\n\t);\n\n\tReact.useEffect(() => {\n\t\tif (!api || !setApi) return;\n\t\tsetApi(api);\n\t}, [api, setApi]);\n\n\tReact.useEffect(() => {\n\t\tif (!api) return;\n\t\tonSelect(api);\n\t\tapi.on('reInit', onSelect);\n\t\tapi.on('select', onSelect);\n\n\t\treturn () => {\n\t\t\tapi?.off('select', onSelect);\n\t\t};\n\t}, [api, onSelect]);\n\n\tconst contextValue = React.useMemo(\n\t\t() => ({\n\t\t\tcarouselRef,\n\t\t\tapi,\n\t\t\topts,\n\t\t\torientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),\n\t\t\tscrollPrev,\n\t\t\tscrollNext,\n\t\t\tcanScrollPrev,\n\t\t\tcanScrollNext,\n\t\t}),\n\t\t[carouselRef, api, opts, orientation, scrollPrev, scrollNext, canScrollPrev, canScrollNext],\n\t);\n\n\treturn (\n\t\t<CarouselContext.Provider value={contextValue}>\n\t\t\t<div onKeyDownCapture={handleKeyDown} className={cn('relative', className)} role=\"region\" aria-roledescription=\"carousel\" data-slot=\"carousel\" {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</CarouselContext.Provider>\n\t);\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {\n\tconst { carouselRef, orientation } = useCarousel();\n\n\treturn (\n\t\t<div ref={carouselRef} className=\"overflow-hidden\" data-slot=\"carousel-content\">\n\t\t\t<div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />\n\t\t</div>\n\t);\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {\n\tconst { orientation } = useCarousel();\n\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\taria-roledescription=\"slide\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CarouselPrevious({ className, variant = 'outline', size = 'icon-sm', ...props }: React.ComponentProps<typeof Button>) {\n\tconst { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n\treturn (\n\t\t<Button\n\t\t\tdata-slot=\"carousel-previous\"\n\t\t\tvariant={variant}\n\t\t\tsize={size}\n\t\t\tclassName={cn(\n\t\t\t\t'absolute touch-manipulation rounded-full',\n\t\t\t\torientation === 'horizontal' ? 'inset-y-0 -left-12 my-auto' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdisabled={!canScrollPrev}\n\t\t\tonClick={scrollPrev}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronLeftIcon />\n\t\t\t<span className=\"sr-only\">Previous slide</span>\n\t\t</Button>\n\t);\n}\n\nfunction CarouselNext({ className, variant = 'outline', size = 'icon-sm', ...props }: React.ComponentProps<typeof Button>) {\n\tconst { orientation, scrollNext, canScrollNext } = useCarousel();\n\n\treturn (\n\t\t<Button\n\t\t\tdata-slot=\"carousel-next\"\n\t\t\tvariant={variant}\n\t\t\tsize={size}\n\t\t\tclassName={cn(\n\t\t\t\t'absolute touch-manipulation rounded-full',\n\t\t\t\torientation === 'horizontal' ? 'inset-y-0 -right-12 my-auto' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdisabled={!canScrollNext}\n\t\t\tonClick={scrollNext}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronRightIcon />\n\t\t\t<span className=\"sr-only\">Next slide</span>\n\t\t</Button>\n\t);\n}\n\nexport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };\n"],"mappings":"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","names":["api"]}