@m3000/market 0.0.1

package/dist/components/blocks/auction/AuctionSuggestedBids.js

@@ -0,0 +1,116 @@
+"use client";
+
+import { getProjectedRankForPrice } from "../../../utils/rank-utils.js";
+import { useAuctionContext } from "./AuctionContext.js";
+import { cn } from "../../../lib/cn.js";
+import { Button } from "../../primitives/Button.js";
+import { Text } from "../../primitives/Text.js";
+import { Scale } from "../../primitives/Scale.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/blocks/auction/AuctionSuggestedBids.tsx
+const SuggestedBidContext = React.createContext(null);
+function useSuggestedBid() {
+	const context = React.useContext(SuggestedBidContext);
+	if (!context) throw new Error("useSuggestedBid must be used within AuctionSuggestedBids.Item");
+	return context;
+}
+function AuctionSuggestedBidsRoot({ className, count = 4, children }) {
+	const { minBidValue, tickConfig, tickSize, isAuctionEnded, bidValue, setBidValue, formatPrice, currencySymbol, bids, setShowBidPreview, lockedBid, userBids, mergedForRank, maxTotalItems } = useAuctionContext();
+	const lockedBidId = React.useMemo(() => {
+		if (lockedBid === null) return null;
+		return userBids.find((ub) => ub.globalBidId === lockedBid.bidId)?.id ?? null;
+	}, [lockedBid, userBids]);
+	const bidsForRankProjection = React.useMemo(() => {
+		if (lockedBidId === null) return mergedForRank;
+		return mergedForRank.filter((b) => b.id !== lockedBidId);
+	}, [mergedForRank, lockedBidId]);
+	const getProjectedRank = React.useCallback((priceValue) => {
+		return getProjectedRankForPrice(priceValue, bidsForRankProjection, maxTotalItems);
+	}, [bidsForRankProjection, maxTotalItems]);
+	if (isAuctionEnded) return null;
+	const getTickSize = (value) => {
+		if (!tickConfig) return tickSize;
+		return value > tickConfig.threshold ? tickConfig.largeTickSize : tickConfig.smallTickSize;
+	};
+	const effectiveMinBid = lockedBid !== null && lockedBid.priceValue > minBidValue ? lockedBid.priceValue : minBidValue;
+	const highestBid = bids.length > 0 ? BigInt(bids[0].price) : effectiveMinBid * 3n;
+	const leadingBid = highestBid + getTickSize(highestBid);
+	const maxBid = leadingBid > effectiveMinBid ? leadingBid : effectiveMinBid * 3n;
+	const selectedValue = bidValue;
+	const disabled = isAuctionEnded;
+	return /* @__PURE__ */ jsx(Scale.Linear, {
+		domain: [effectiveMinBid, maxBid],
+		getTickSize,
+		snapMode: "up",
+		className: cn("grid grid-cols-2 gap-2", className),
+		children: /* @__PURE__ */ jsx(Scale.Ticks, {
+			count,
+			children: ({ value, position }, index) => {
+				const v = value;
+				const display = `${formatPrice(v)} ${currencySymbol}`;
+				const isSelected = v === selectedValue;
+				const { rank: projectedRank, isWinning } = getProjectedRank(v);
+				const contextValue = {
+					value: v,
+					display,
+					position,
+					index,
+					isSelected,
+					onSelect: () => {
+						setBidValue(v);
+						setShowBidPreview(true);
+					},
+					disabled,
+					projectedRank,
+					isWinning
+				};
+				return /* @__PURE__ */ jsx(SuggestedBidContext.Provider, {
+					value: contextValue,
+					children: children(contextValue)
+				});
+			}
+		})
+	});
+}
+function AuctionSuggestedBidsItem({ labels = [
+	"Minimum",
+	"Safe Entry",
+	"Competitive",
+	"Leading"
+] }) {
+	const context = useSuggestedBid();
+	const label = labels[context.index] ?? labels[labels.length - 1] ?? "Bid";
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		color: "tertiary",
+		active: context.isSelected,
+		className: "h-auto w-full items-start justify-between gap-2 px-3 py-2.5 text-left",
+		disabled: context.disabled,
+		onClick: context.onSelect,
+		size: "card",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ jsx(Text, {
+				color: "secondary",
+				size: "1",
+				children: label
+			}), /* @__PURE__ */ jsx(Text, { children: context.display })]
+		}), context.projectedRank != null && /* @__PURE__ */ jsxs("span", {
+			className: "flex shrink-0 flex-col",
+			children: [/* @__PURE__ */ jsx(Text, {
+				color: "secondary",
+				size: "1",
+				children: "Rank"
+			}), /* @__PURE__ */ jsxs(Text, { children: ["#", context.projectedRank] })]
+		})]
+	});
+}
+const AuctionSuggestedBids = {
+	Root: AuctionSuggestedBidsRoot,
+	Item: AuctionSuggestedBidsItem
+};
+
+//#endregion
+export { AuctionSuggestedBids, useSuggestedBid };

package/dist/components/blocks/auction/AuctionYourBidCard.d.ts

@@ -0,0 +1,27 @@
+import { AuctionUserBid } from "../../../types/index.js";
+
+//#region src/components/blocks/auction/AuctionYourBidCard.d.ts
+interface AuctionYourBidCardProps {
+  bid: AuctionUserBid;
+  getRankForBid: (bidId: string) => number | null;
+  lockedBidId: bigint | null;
+  onLockForTopUp: (bidId: bigint, priceValue: bigint) => void;
+  onCancelTopUp: () => void;
+  isAuctionEnded: boolean;
+  onClaim?: (bidId: string) => Promise<boolean>;
+  formatPrice?: (priceValue: bigint) => string;
+  currencySymbol?: string;
+}
+declare function AuctionYourBidCard({
+  bid,
+  getRankForBid,
+  lockedBidId,
+  onLockForTopUp,
+  onCancelTopUp,
+  isAuctionEnded,
+  onClaim,
+  formatPrice,
+  currencySymbol
+}: AuctionYourBidCardProps): React.ReactElement;
+//#endregion
+export { AuctionYourBidCard, AuctionYourBidCardProps };

package/dist/components/blocks/auction/AuctionYourBidCard.js

@@ -0,0 +1,94 @@
+"use client";
+
+import { formatDateTime } from "../../../utils/format.js";
+import { cn } from "../../../lib/cn.js";
+import { Button } from "../../primitives/Button.js";
+import { Text } from "../../primitives/Text.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/blocks/auction/AuctionYourBidCard.tsx
+function getBidStatusLabel(status, isWinning) {
+	if (status === "claimed") return "Won & Claimed";
+	if (isWinning) return "Winning";
+	if (status === "refunded") return "Refunded";
+	return "Outbid";
+}
+function AuctionYourBidCard({ bid, getRankForBid, lockedBidId, onLockForTopUp, onCancelTopUp, isAuctionEnded, onClaim, formatPrice = (v) => (Number(v) / 0xde0b6b3a7640000).toLocaleString("en-US", {
+	minimumFractionDigits: 3,
+	maximumFractionDigits: 3
+}), currencySymbol = "USD" }) {
+	const rank = getRankForBid(bid.id);
+	const isLocked = lockedBidId !== null && bid.globalBidId === lockedBidId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("rounded-xs border bg-muted p-4", isLocked ? "border-success" : "border-transparent"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs(Text, {
+					size: "1",
+					color: "tertiary",
+					children: ["Rank #", rank ?? "-"]
+				}), /* @__PURE__ */ jsx(Text, {
+					size: "1",
+					color: "tertiary",
+					className: "tabular-nums",
+					suppressHydrationWarning: true,
+					children: formatDateTime(bid.createdAt)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between",
+				children: [/* @__PURE__ */ jsxs(Text, {
+					size: "2",
+					className: "mt-2",
+					children: [
+						formatPrice(bid.price),
+						" ",
+						currencySymbol
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-2 flex items-center gap-1.5",
+					children: bid.isWinning ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						className: "size-4 rounded-full bg-success",
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "2",
+						color: "success",
+						children: getBidStatusLabel(bid.status, bid.isWinning)
+					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+						className: "size-4 rounded-full bg-destructive",
+						"aria-hidden": true
+					}), /* @__PURE__ */ jsx(Text, {
+						size: "2",
+						color: "error",
+						children: getBidStatusLabel(bid.status, bid.isWinning)
+					})] })
+				})]
+			}),
+			bid.status === "claimed" ? /* @__PURE__ */ jsxs(Text, {
+				size: "1",
+				color: "tertiary",
+				className: "mt-2",
+				suppressHydrationWarning: true,
+				children: ["Claimed ", bid.claimedAt ? formatDateTime(bid.claimedAt) : ""]
+			}) : bid.isWinning && bid.status === "active" && onClaim ? /* @__PURE__ */ jsx(Button, {
+				color: "secondary",
+				className: "mt-3 w-full",
+				onClick: () => onClaim(bid.id),
+				children: "Claim"
+			}) : null,
+			bid.isWinning && !isAuctionEnded ? /* @__PURE__ */ jsx("div", {
+				className: "mt-3",
+				children: /* @__PURE__ */ jsx(Button, {
+					color: "secondary",
+					className: "w-full",
+					onClick: () => isLocked ? onCancelTopUp() : onLockForTopUp(bid.globalBidId, bid.price),
+					children: isLocked ? "Cancel top-up" : "Top up"
+				})
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { AuctionYourBidCard };

package/dist/components/blocks/auction/AuctionYourBids.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/blocks/auction/AuctionYourBids.d.ts
+interface AuctionYourBidsProps {
+  className?: string;
+}
+declare function AuctionYourBids({
+  className
+}: AuctionYourBidsProps): React.ReactElement | null;
+//#endregion
+export { AuctionYourBids, AuctionYourBidsProps };

package/dist/components/blocks/auction/AuctionYourBids.js

@@ -0,0 +1,49 @@
+"use client";
+
+import { useAuctionContext } from "./AuctionContext.js";
+import { Text } from "../../primitives/Text.js";
+import { AuctionYourBidCard } from "./AuctionYourBidCard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/blocks/auction/AuctionYourBids.tsx
+function AuctionYourBids({ className }) {
+	const { userBids, getRankForBid, lockedBid, setLockedBid, isAuctionEnded, handleClaimEdition, formatPrice, currencySymbol } = useAuctionContext();
+	if (userBids.length === 0) return null;
+	const onLockForTopUp = (bidId, priceValue) => {
+		setLockedBid({
+			bidId,
+			priceValue
+		});
+	};
+	const onCancelTopUp = () => setLockedBid(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			as: "h3",
+			color: "tertiary",
+			className: "mb-3 shrink-0",
+			"aria-label": `Your Bids (${userBids.length})`,
+			children: [
+				"Your Bids (",
+				userBids.length,
+				")"
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "-mr-1 min-h-0 flex-1 space-y-3 overflow-y-auto py-1 pr-1",
+			children: userBids.map((bid) => /* @__PURE__ */ jsx(AuctionYourBidCard, {
+				bid,
+				getRankForBid,
+				lockedBidId: lockedBid?.bidId ?? null,
+				onLockForTopUp,
+				onCancelTopUp,
+				isAuctionEnded,
+				onClaim: handleClaimEdition,
+				formatPrice,
+				currencySymbol
+			}, bid.id))
+		})]
+	});
+}
+
+//#endregion
+export { AuctionYourBids };

package/dist/components/blocks/auction/index.d.ts

@@ -0,0 +1,12 @@
+import { AuctionProvider, AuctionProviderProps, useAuctionContext } from "./AuctionContext.js";
+import { Auction, AuctionProps } from "./Auction.js";
+import { FramedImage, FramedImageProps } from "../../primitives/framed-image/FramedImage.js";
+import { AuctionBidForm } from "./AuctionBidForm.js";
+import { AuctionBidInput, AuctionBidInputProps } from "./AuctionBidInput.js";
+import { AuctionInfo, AuctionInfoProps } from "./AuctionInfo.js";
+import { AuctionBiddingPanel, AuctionBiddingPanelProps, AuctionDetails, AuctionDetailsBody, AuctionDetailsBodyProps, AuctionDetailsFooter, AuctionDetailsFooterProps, AuctionDetailsHeader, AuctionDetailsHeaderProps, AuctionDetailsProps, AuctionLayout, AuctionLayoutProps, AuctionRankingsContainer, AuctionRankingsContainerProps } from "./AuctionLayout.js";
+import { AuctionRankings, AuctionRankingsProps, RankingsSkeleton } from "./AuctionRankings.js";
+import { AuctionStatusTag, AuctionStatusTagProps } from "./AuctionStatusTag.js";
+import { AuctionSuggestedBids, AuctionSuggestedBidsProps, SuggestedBidContextValue, useSuggestedBid } from "./AuctionSuggestedBids.js";
+import { AuctionYourBidCard, AuctionYourBidCardProps } from "./AuctionYourBidCard.js";
+import { AuctionYourBids, AuctionYourBidsProps } from "./AuctionYourBids.js";

package/dist/components/blocks/index.d.ts

@@ -0,0 +1,12 @@
+import { AuctionProvider, AuctionProviderProps, useAuctionContext } from "./auction/AuctionContext.js";
+import { Auction, AuctionProps } from "./auction/Auction.js";
+import { FramedImage, FramedImageProps } from "../primitives/framed-image/FramedImage.js";
+import { AuctionBidForm } from "./auction/AuctionBidForm.js";
+import { AuctionBidInput, AuctionBidInputProps } from "./auction/AuctionBidInput.js";
+import { AuctionInfo, AuctionInfoProps } from "./auction/AuctionInfo.js";
+import { AuctionBiddingPanel, AuctionBiddingPanelProps, AuctionDetails, AuctionDetailsBody, AuctionDetailsBodyProps, AuctionDetailsFooter, AuctionDetailsFooterProps, AuctionDetailsHeader, AuctionDetailsHeaderProps, AuctionDetailsProps, AuctionLayout, AuctionLayoutProps, AuctionRankingsContainer, AuctionRankingsContainerProps } from "./auction/AuctionLayout.js";
+import { AuctionRankings, AuctionRankingsProps, RankingsSkeleton } from "./auction/AuctionRankings.js";
+import { AuctionStatusTag, AuctionStatusTagProps } from "./auction/AuctionStatusTag.js";
+import { AuctionSuggestedBids, AuctionSuggestedBidsProps, SuggestedBidContextValue, useSuggestedBid } from "./auction/AuctionSuggestedBids.js";
+import { AuctionYourBidCard, AuctionYourBidCardProps } from "./auction/AuctionYourBidCard.js";
+import { AuctionYourBids, AuctionYourBidsProps } from "./auction/AuctionYourBids.js";

package/dist/components/index.d.ts

@@ -0,0 +1,28 @@
+import { AuctionProvider, AuctionProviderProps, useAuctionContext } from "./blocks/auction/AuctionContext.js";
+import { Auction, AuctionProps } from "./blocks/auction/Auction.js";
+import { FramedImage, FramedImageProps } from "./primitives/framed-image/FramedImage.js";
+import { AuctionBidForm } from "./blocks/auction/AuctionBidForm.js";
+import { AuctionBidInput, AuctionBidInputProps } from "./blocks/auction/AuctionBidInput.js";
+import { AuctionInfo, AuctionInfoProps } from "./blocks/auction/AuctionInfo.js";
+import { AuctionBiddingPanel, AuctionBiddingPanelProps, AuctionDetails, AuctionDetailsBody, AuctionDetailsBodyProps, AuctionDetailsFooter, AuctionDetailsFooterProps, AuctionDetailsHeader, AuctionDetailsHeaderProps, AuctionDetailsProps, AuctionLayout, AuctionLayoutProps, AuctionRankingsContainer, AuctionRankingsContainerProps } from "./blocks/auction/AuctionLayout.js";
+import { Button, ButtonElement, ButtonProps, buttonVariants } from "./primitives/Button.js";
+import { Countdown, CountdownProps } from "./primitives/countdown/Countdown.js";
+import { Drawer, DrawerProps } from "./primitives/Drawer.js";
+import { Feedback } from "./primitives/Feedback.js";
+import { MorphDialog, MorphDialogProps } from "./primitives/MorphDialog.js";
+import { FormatPriceOptions, Price, PriceProps, PriceSymbolProps, PriceValueProps, formatPrice } from "./primitives/Price.js";
+import { CursorGrowIcon, SteppedInput } from "./primitives/SteppedInput.js";
+import { PriceInput } from "./primitives/PriceInput.js";
+import { Separator } from "./primitives/Separator.js";
+import { Receipt, ReceiptDiscountProps, ReceiptFeeProps, ReceiptFooterProps, ReceiptHeaderProps, ReceiptItemProps, ReceiptPriceProps, ReceiptProps, ReceiptSeparatorProps, ReceiptSubtotalProps, ReceiptTaxProps, ReceiptTotalProps } from "./primitives/Receipt.js";
+import { GroupItemContextValue, RankedList, RankedListProps, Ranking, RankingProps, SlotContext, SlotProps } from "./primitives/ranked-list/Ranking.js";
+import { Scale, ScaleValue, SnapMode, TickContext, useScale } from "./primitives/Scale.js";
+import { Skeleton, SkeletonElement, SkeletonProps } from "./primitives/Skeleton.js";
+import { Tab, Tabs, TabsContextType, TabsIndicator, TabsList, TabsPanel } from "./primitives/Tabs.js";
+import { Text, TextElement, TextProps, textVariants } from "./primitives/Text.js";
+import { Tag, TagElement, TagProps } from "./primitives/Tag.js";
+import { AuctionRankings, AuctionRankingsProps, RankingsSkeleton } from "./blocks/auction/AuctionRankings.js";
+import { AuctionStatusTag, AuctionStatusTagProps } from "./blocks/auction/AuctionStatusTag.js";
+import { AuctionSuggestedBids, AuctionSuggestedBidsProps, SuggestedBidContextValue, useSuggestedBid } from "./blocks/auction/AuctionSuggestedBids.js";
+import { AuctionYourBidCard, AuctionYourBidCardProps } from "./blocks/auction/AuctionYourBidCard.js";
+import { AuctionYourBids, AuctionYourBidsProps } from "./blocks/auction/AuctionYourBids.js";

package/dist/components/primitives/Button.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Button } from "@base-ui/react/button";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/primitives/Button.d.ts
+type ButtonColor = "primary" | "secondary" | "tertiary" | "ghost" | "destructive" | "link";
+type ButtonSize = "default" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "card";
+interface ButtonVariantProps {
+  color?: ButtonColor;
+  size?: ButtonSize;
+  className?: string;
+}
+declare const buttonVariants: (props?: ButtonVariantProps) => string;
+type ButtonVariants = typeof buttonVariants;
+type ButtonProps = React.ComponentProps<typeof Button> & VariantProps<ButtonVariants> & {
+  loading?: boolean;
+  active?: boolean;
+};
+type ButtonElement = React.ComponentRef<"button">;
+declare function Button$1({
+  className,
+  color,
+  size,
+  disabled,
+  loading,
+  children,
+  active,
+  ...props
+}: ButtonProps): React.ReactElement;
+//#endregion
+export { Button$1 as Button, ButtonElement, ButtonProps, buttonVariants };

package/dist/components/primitives/Button.js

@@ -0,0 +1,117 @@
+import { cn } from "../../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { IconLoader2 } from "@tabler/icons-react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/primitives/Button.tsx
+const buttonVariants = cva([
+	"inline-flex cursor-pointer items-center justify-center gap-1.5",
+	"font-sans text-sm leading-none font-medium whitespace-nowrap",
+	"shrink-0 select-none",
+	"transition-all duration-150 ease-out",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	"outline-none",
+	"focus-visible:ring-2 focus-visible:ring-offset-2",
+	"focus-visible:ring-ring focus-visible:ring-offset-background",
+	"disabled:pointer-events-none disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed",
+	"aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/30"
+].join(" "), {
+	variants: {
+		color: {
+			primary: [
+				"border border-solid",
+				"border-primary bg-primary text-primary-foreground",
+				"hover:border-primary-hover hover:bg-primary-hover",
+				"active:opacity-90",
+				"shadow-[0_1px_2px_0_rgb(0,0,0,0.08)]",
+				"disabled:opacity-50 aria-disabled:opacity-50"
+			].join(" "),
+			secondary: [
+				"border border-solid",
+				"border-border bg-transparent text-foreground",
+				"hover:border-input hover:bg-accent",
+				"active:border-input active:bg-accent-active",
+				"data-[state=active]:border-input data-[state=active]:bg-accent-active",
+				"shadow-[0_1px_2px_0_rgb(0,0,0,0.04)]",
+				"disabled:opacity-50 aria-disabled:opacity-50"
+			].join(" "),
+			tertiary: [
+				"border border-solid",
+				"border-border bg-muted text-muted-foreground",
+				"hover:border-input hover:bg-accent-hover hover:text-foreground",
+				"active:bg-accent-active active:text-foreground",
+				"data-[state=active]:bg-accent-active data-[state=active]:text-foreground",
+				"disabled:opacity-50 aria-disabled:opacity-50"
+			].join(" "),
+			ghost: [
+				"border border-transparent bg-transparent",
+				"text-muted-foreground",
+				"hover:bg-accent hover:text-foreground",
+				"active:bg-accent-active active:text-foreground",
+				"data-[state=active]:bg-accent-active data-[state=active]:text-foreground",
+				"disabled:text-disabled-foreground",
+				"aria-disabled:text-disabled-foreground"
+			].join(" "),
+			destructive: [
+				"border border-solid",
+				"border-destructive bg-destructive text-destructive-foreground",
+				"hover:border-destructive-hover hover:bg-destructive-hover",
+				"active:opacity-90",
+				"shadow-[0_1px_2px_0_rgb(0,0,0,0.08)]",
+				"disabled:opacity-50 aria-disabled:opacity-50"
+			].join(" "),
+			link: [
+				"border-transparent bg-transparent",
+				"text-foreground underline-offset-4",
+				"hover:underline",
+				"h-auto px-0 py-0",
+				"disabled:text-disabled-foreground disabled:no-underline",
+				"aria-disabled:text-disabled-foreground aria-disabled:no-underline"
+			].join(" ")
+		},
+		size: {
+			default: "h-9 rounded-md px-4 py-2 has-[>svg]:px-3",
+			xs: "h-6 gap-1 rounded px-2 text-xs has-[>svg]:px-1.5",
+			sm: "h-8 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2.5",
+			lg: "h-10 rounded-lg px-5 text-[15px] has-[>svg]:px-4",
+			xl: "h-12 rounded-lg px-6 text-[15px] font-semibold has-[>svg]:px-5",
+			icon: "size-9 rounded-md",
+			"icon-xs": "size-6 rounded",
+			"icon-sm": "size-8 rounded-md",
+			"icon-lg": "size-10 rounded-lg",
+			card: "min-h-[4rem] rounded-md px-4 py-3"
+		}
+	},
+	defaultVariants: {
+		color: "primary",
+		size: "default"
+	}
+});
+function Button$1({ className, color, size, disabled, loading, children, active, ...props }) {
+	const _disabled = disabled || loading;
+	const _children = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "invisible contents",
+		children
+	}), /* @__PURE__ */ jsx("span", {
+		className: "absolute inset-0 flex items-center justify-center",
+		children: /* @__PURE__ */ jsx(IconLoader2, {
+			"aria-hidden": true,
+			className: "size-4 animate-spin"
+		})
+	})] }) : children;
+	return /* @__PURE__ */ jsx(Button, {
+		"data-state": active ? "active" : void 0,
+		disabled: _disabled,
+		focusableWhenDisabled: true,
+		className: cn(buttonVariants({
+			color,
+			size
+		}), { relative: loading }, className),
+		...props,
+		children: _children
+	});
+}
+
+//#endregion
+export { Button$1 as Button, buttonVariants };

package/dist/components/primitives/Drawer.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Drawer } from "@base-ui/react/drawer";
+
+//#region src/components/primitives/Drawer.d.ts
+type OpenChangeDetails = Parameters<NonNullable<React.ComponentProps<typeof Drawer.Root>["onOpenChange"]>>[1];
+interface DrawerProps {
+  trigger: React.ReactElement;
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeDetails) => void;
+  className?: string;
+  triggerClassName?: string;
+  panelClassName?: string;
+  backdropClassName?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  side?: "left" | "right";
+  modal?: React.ComponentProps<typeof Drawer.Root>["modal"];
+  initialFocus?: React.ComponentProps<typeof Drawer.Popup>["initialFocus"];
+  finalFocus?: React.ComponentProps<typeof Drawer.Popup>["finalFocus"];
+  popupAriaLabel?: string;
+}
+declare function Drawer$1({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  triggerClassName,
+  panelClassName,
+  backdropClassName,
+  title,
+  description,
+  side,
+  modal,
+  initialFocus,
+  finalFocus,
+  popupAriaLabel
+}: DrawerProps): React.ReactElement;
+//#endregion
+export { Drawer$1 as Drawer, DrawerProps };

package/dist/components/primitives/Drawer.js

@@ -0,0 +1,51 @@
+"use client";
+
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+
+//#region src/components/primitives/Drawer.tsx
+function Drawer$1({ trigger, children, open, defaultOpen = false, onOpenChange, className, triggerClassName, panelClassName, backdropClassName, title, description, side = "right", modal = true, initialFocus, finalFocus, popupAriaLabel }) {
+	const sideClassName = side === "left" ? "inset-y-0 left-0 h-full" : "inset-y-0 right-0 h-full";
+	const swipeDirection = side === "left" ? "left" : "right";
+	return /* @__PURE__ */ jsxs(Drawer.Root, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		modal,
+		swipeDirection,
+		children: [/* @__PURE__ */ jsx("div", {
+			className,
+			children: /* @__PURE__ */ jsx(Drawer.Trigger, {
+				className: cn("outline-none", triggerClassName),
+				render: trigger
+			})
+		}), /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: (state) => cn("fixed inset-0 z-60 bg-background/70 backdrop-blur-sm transition-opacity duration-150 ease-out", (state.transitionStatus === "starting" || state.transitionStatus === "ending") && "opacity-0", backdropClassName) }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+			className: "fixed inset-0 z-70 overflow-hidden",
+			children: /* @__PURE__ */ jsx(Drawer.Popup, {
+				"aria-label": popupAriaLabel,
+				initialFocus,
+				finalFocus,
+				className: cn("fixed z-70 flex h-full w-auto outline-none transition-transform duration-200 ease-out", sideClassName),
+				style: (state) => ({ transform: state.transitionStatus === "starting" || state.transitionStatus === "ending" ? side === "left" ? "translateX(-100%)" : "translateX(100%)" : "translateX(var(--drawer-swipe-movement-x, 0px))" }),
+				children: /* @__PURE__ */ jsxs(Drawer.Content, {
+					className: cn("flex h-full w-[max(50vw,24rem)] max-w-none flex-col border-border bg-background shadow-2xl sm:w-[max(50vw,28rem)]", side === "left" ? "border-r" : "border-l", panelClassName),
+					children: [
+						title ? /* @__PURE__ */ jsx(Drawer.Title, {
+							className: "sr-only",
+							children: title
+						}) : null,
+						description ? /* @__PURE__ */ jsx(Drawer.Description, {
+							className: "sr-only",
+							children: description
+						}) : null,
+						children
+					]
+				})
+			})
+		})] })]
+	});
+}
+
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/components/primitives/Feedback.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+//#region src/components/primitives/Feedback.d.ts
+type FeedbackPosition = "bottom" | "top" | "left" | "right";
+interface FeedbackRootProps {
+  children: React.ReactNode;
+  show?: boolean;
+  position?: FeedbackPosition;
+  className?: string;
+  transition?: {
+    stiffness?: number;
+    damping?: number;
+  };
+}
+type ContentTransitionMode = "crossfade" | "slide-up" | "slide-down";
+interface FeedbackContentProps {
+  children: React.ReactNode;
+  className?: string;
+  contentKey?: string | number;
+  mode?: ContentTransitionMode;
+}
+interface FeedbackComponent {
+  Root: React.FC<FeedbackRootProps>;
+  Content: React.FC<FeedbackContentProps>;
+}
+declare const Feedback: FeedbackComponent;
+//#endregion
+export { Feedback };