@nsaa/core 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/index.d.ts

@@ -6,9 +6,11 @@ import { ClassValue } from "clsx";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { ComponentProps, ComponentPropsWithRef, ReactNode } from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+import { Button as Button$1 } from "@base-ui/react/button";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { useRender } from "@base-ui/react/use-render";
-import { Button as Button$1 } from "@base-ui/react/button";
+import { DayButton, DayPicker, Locale } from "react-day-picker";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -50,18 +52,6 @@ declare function Alert({ className, variant, announce, ...props }: React.Compone
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
-  size?: "default" | "sm" | "lg";
-}): React.JSX.Element;
-declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): React.JSX.Element;
-declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): React.JSX.Element;
-declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare const buttonVariants: (props?: ({
   variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
   size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
@@ -83,6 +73,38 @@ declare function Button({ className, variant, size, loading, loadingLabel, loadi
    */
   loadingPlacement?: LoadingPlacement | undefined;
 }): import("react").JSX.Element;
+declare function AlertDialog({ onOpenChange, ...props }: AlertDialog$1.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog$1.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog$1.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog$1.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog$1.Popup.Props & {
+  size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog$1.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
+  size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const badgeVariants: (props?: ({
+  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+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, onClick, "aria-label": label, ...props }: React.ComponentProps<typeof DayButton> & {
+  locale?: Partial<Locale>;
+}): React.JSX.Element;
 declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
   size?: "default" | "sm";
 }): React.JSX.Element;
@@ -310,6 +332,20 @@ type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
 declare function NativeSelect({ className, size, ...props }: NativeSelectProps): React.JSX.Element;
 declare function NativeSelectOption({ className, ...props }: React.ComponentProps<"option">): React.JSX.Element;
 declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<"optgroup">): React.JSX.Element;
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React.JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+  text?: string;
+}): React.JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
 declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
@@ -373,6 +409,10 @@ export declare const SOUND_MAP: {
     readonly open: "navigation.open";
     readonly close: "navigation.close";
   };
+  readonly "alert-dialog": {
+    readonly open: "navigation.open";
+    readonly close: "navigation.close";
+  };
   readonly drawer: {
     readonly open: "navigation.open";
     readonly close: "navigation.close";
@@ -381,6 +421,9 @@ export declare const SOUND_MAP: {
   readonly select: {
     readonly choose: "selection.select";
   };
+  readonly calendar: {
+    readonly select: "selection.select";
+  };
   readonly combobox: {
     readonly choose: "selection.select";
     readonly clear: "input.press";
@@ -629,4 +672,4 @@ declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props):
 declare function Tooltip({ ...props }: Tooltip$1.Root.Props): import("react").JSX.Element;
 declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): import("react").JSX.Element;
 declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, createToastManager, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, type EmptyIllustrationOptions, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, type IconSwapProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, type LoaderComponent, type LoaderProviderProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, type SoundComponent, type SoundCue, type SoundPlayer, SoundProvider, type SoundProviderProps, Spinner, type SpinnerProps, type SpinnerVariant, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize, type ToggleGroupVariant, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSize, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, createToastManager, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };

package/dist/index.js

@@ -8,10 +8,12 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { Children, Fragment as Fragment$1, createContext, createElement, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { AnimatePresence, animate, motion, useReducedMotion, useReducedMotionConfig } from "motion/react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+import { Button as Button$1 } from "@base-ui/react/button";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { Button as Button$1 } from "@base-ui/react/button";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
@@ -284,12 +286,17 @@ const SOUND_MAP = {
 		open: "navigation.open",
 		close: "navigation.close"
 	},
+	"alert-dialog": {
+		open: "navigation.open",
+		close: "navigation.close"
+	},
 	drawer: {
 		open: "navigation.open",
 		close: "navigation.close",
 		snap: "movement.snap"
 	},
 	select: { choose: "selection.select" },
+	calendar: { select: "selection.select" },
 	combobox: {
 		choose: "selection.select",
 		clear: "input.press",
@@ -367,73 +374,6 @@ function AlertAction({ className, ...props }) {
 		...props
 	});
 }
-// src/avatar/avatar.tsx
-function Avatar({ className, size = "default", ...props }) {
-	return /* @__PURE__ */ jsx(Avatar$1.Root, {
-		"data-slot": "avatar",
-		"data-size": size,
-		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
-		...props
-	});
-}
-function AvatarImage({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Avatar$1.Image, {
-		"data-slot": "avatar-image",
-		className: cn("aspect-square size-full rounded-full object-cover", className),
-		...props
-	});
-}
-function AvatarFallback({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
-		"data-slot": "avatar-fallback",
-		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
-		...props
-	});
-}
-function AvatarBadge({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "avatar-badge",
-		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
-		...props
-	});
-}
-function AvatarGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "avatar-group",
-		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
-		...props
-	});
-}
-function AvatarGroupCount({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "avatar-group-count",
-		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
-		...props
-	});
-}
-// src/badge/badge.tsx
-const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap 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:text-destructive-hover-foreground",
-		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
-		}
-	});
-}
 // src/lib/control-defaults.tsx
 const ControlDefaultsContext = createContext({});
 function useControlDefaults() {
@@ -442,9 +382,10 @@ function useControlDefaults() {
 // src/lib/use-press.ts
 /**
 * Parts of a larger shape, or high-frequency toggles: their buttons don't scale on their own
-* (legacy `pressScale={false}`). A Toggle Group outside a Toolbar counts too (#128, alpha-4).
+* (legacy `pressScale={false}`). A Toggle Group outside a Toolbar counts too (#128, alpha-4), and
+* Pagination and the Calendar's day grid (#136).
 */
-const SEGMENT = "[data-slot=\"input-group\"], [data-slot=\"button-group\"], [data-slot=\"toolbar\"], [data-slot=\"toggle-group\"]";
+const SEGMENT = "[data-slot=\"input-group\"], [data-slot=\"button-group\"], [data-slot=\"toolbar\"], [data-slot=\"toggle-group\"], [data-slot=\"pagination-link\"], [data-slot=\"calendar\"]";
 /**
 * Pointer-only press: scale to `scale.press` on pointer-down and back on release, on `spring.snap`,
 * interruptible from the live value. Never on hover, on keyboard activation, when disabled, under
@@ -756,6 +697,287 @@ function Button({ className, variant = "default", size = "default", loading = fa
 		children: placement ? loadingContent(children, size ?? "default", loadingLabel, placement) : children
 	});
 }
+// src/alert-dialog/alert-dialog.tsx
+function AlertDialog({ onOpenChange, ...props }) {
+	const cue = useCue("alert-dialog");
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
+		"data-slot": "alert-dialog",
+		onOpenChange: (open, details) => {
+			onOpenChange?.(open, details);
+			if (!details.isCanceled) cue(open ? "open" : "close");
+		},
+		...props
+	});
+}
+function AlertDialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+}
+function AlertDialogContent({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		...props
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		className: cn(className),
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props
+	});
+}
+// src/avatar/avatar.tsx
+function Avatar({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
+		...props
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		...props
+	});
+}
+// src/badge/badge.tsx
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap 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:text-destructive-hover-foreground",
+		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
+		}
+	});
+}
+// src/calendar/calendar.tsx
+/** Lucide's chevrons, in place of shadcn's icon placeholder. */
+function ChevronIcon({ className, orientation }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: /* @__PURE__ */ jsx("path", { d: orientation === "left" ? "m15 18-6-6 6-6" : orientation === "right" ? "m9 18 6-6-6-6" : "m6 9 6 6 6-6" })
+	});
+}
+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 p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", 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) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+			button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none 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 text-sm font-medium", defaultClassNames.dropdowns),
+			dropdown_root: cn("cn-calendar-dropdown-root relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+			dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+			caption_label: cn("font-medium select-none", captionLayout === "label" ? "cn-calendar-caption text-sm" : "cn-calendar-caption-label 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 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", 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("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+			day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&: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, rootRef, ...props }) => {
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": "calendar",
+					ref: rootRef,
+					className: cn(className),
+					...props
+				});
+			},
+			Chevron: ({ className, orientation }) => {
+				if (orientation === "left") return /* @__PURE__ */ jsx(ChevronIcon, {
+					orientation: "left",
+					className: cn("cn-rtl-flip size-4", className)
+				});
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronIcon, {
+					orientation: "right",
+					className: cn("cn-rtl-flip size-4", className)
+				});
+				return /* @__PURE__ */ jsx(ChevronIcon, {
+					orientation: "down",
+					className: cn("size-4", className)
+				});
+			},
+			DayButton: ({ ...props }) => /* @__PURE__ */ jsx(CalendarDayButton, {
+				locale,
+				...props
+			}),
+			WeekNumber: ({ children, ...props }) => {
+				return /* @__PURE__ */ jsx("td", {
+					...props,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex size-(--cell-size) items-center justify-center text-center",
+						children
+					})
+				});
+			},
+			...components
+		},
+		...props
+	});
+}
+function CalendarDayButton({ className, day, modifiers, locale, onClick, "aria-label": label, ...props }) {
+	const defaultClassNames = getDefaultClassNames();
+	const cue = useCue("calendar");
+	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,
+		ref,
+		"aria-label": label?.replace(/\b(\d{1,2})(?:st|nd|rd|th)\b/, "$1"),
+		"aria-current": modifiers.today ? "date" : void 0,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!modifiers.disabled) cue("select");
+		},
+		className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal 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 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		...props
+	});
+}
 // src/card/card.tsx
 function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -2219,6 +2441,134 @@ function NativeSelectOptGroup({ className, ...props }) {
 		...props
 	});
 }
+// src/pagination/pagination.tsx
+function Pagination({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		"data-slot": "pagination",
+		className: cn("mx-auto flex w-full justify-center", className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn("flex items-center gap-0.5", className),
+		...props
+	});
+}
+function PaginationItem({ ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+	return /* @__PURE__ */ jsx(ControlDefaultsContext.Provider, {
+		value: SILENT,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: isActive ? "outline" : "ghost",
+			size,
+			className: cn(className),
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx("a", {
+				role: "link",
+				"aria-current": isActive ? "page" : void 0,
+				"data-slot": "pagination-link",
+				"data-active": isActive,
+				...props
+			})
+		})
+	});
+}
+const SILENT = { sound: false };
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		size: "default",
+		className: cn("pl-1.5!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			"data-icon": "inline-start",
+			className: "cn-rtl-flip",
+			children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		})]
+	});
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		size: "default",
+		className: cn("pr-1.5!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: text
+		}), /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			"data-icon": "inline-end",
+			className: "cn-rtl-flip",
+			children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+		})]
+	});
+}
+function PaginationEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "pagination-ellipsis",
+		className: cn("flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "1"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "19",
+					cy: "12",
+					r: "1"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "5",
+					cy: "12",
+					r: "1"
+				})
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+}
 // src/popover/popover.tsx
 function Popover({ ...props }) {
 	return /* @__PURE__ */ jsx(Popover$1.Root, {
@@ -3525,4 +3875,4 @@ const Toolbar = Object.assign(ToolbarRoot, {
 });
 // src/index.ts
 trackInputModality();
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, IconSwap, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, LoaderProvider, NativeSelect, NativeSelectOptGroup, NativeSelectOption, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, RadioGroup, RadioGroupItem, SOUND_MAP, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, SkeletonContent, Slider, SoundProvider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, ToggleGroup, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, createToastManager, registerLoader, registerLoaders, tabsListVariants, toast, useComboboxAnchor, useEmptyIllustration, useSound, useToastManager };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nsaa/core",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "Nsaa core components: accessible, token-driven, animated to the Nsaa feel spec.",
   "license": "MIT",
   "type": "module",
@@ -42,10 +42,11 @@
     "cmdk": "1.1.1",
     "input-otp": "1.5.0",
     "motion": "^14.7.1",
+    "react-day-picker": "9.14.0",
     "tailwind-merge": "^3.7.0",
     "tailwind-variants": "^3.3.1",
     "uisfx": "0.4.0",
-    "@nsaa/tokens": "^0.1.0-alpha.0"
+    "@nsaa/tokens": "^0.1.0-alpha.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.1",

package/src/feel.css

@@ -61,9 +61,11 @@
   }
 
   /* ---------------------------------------------------------------- modal recipe (Phase 1)
-     Overlay opacity; content from the centre; base in, fast out. Dialog and CommandDialog. */
+     Overlay opacity; content from the centre; base in, fast out. Dialog, CommandDialog, Alert Dialog. */
   [data-slot="dialog-overlay"],
-  [data-slot="dialog-content"] {
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-overlay"],
+  [data-slot="alert-dialog-content"] {
     transition-property: opacity, scale;
     transition-duration: calc(var(--nsaa-duration-base) * var(--nsaa-time-scale));
     transition-timing-function: var(--nsaa-ease-out);
@@ -78,7 +80,8 @@
     }
   }
 
-  [data-slot="dialog-content"] {
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"] {
     transform-origin: center;
 
     &[data-starting-style],
@@ -474,6 +477,7 @@
     [data-slot="popover-content"],
     [data-slot="dropdown-menu-content"],
     [data-slot="dialog-content"],
+    [data-slot="alert-dialog-content"],
     [data-slot="drawer-popup"]
   ) {
     --nsaa-il-surface: var(--popover);
@@ -526,7 +530,9 @@
           [data-slot="context-menu-sub-content"],
           [data-slot="tooltip-content"],
           [data-slot="dialog-overlay"],
-          [data-slot="dialog-content"]
+          [data-slot="dialog-content"],
+          [data-slot="alert-dialog-overlay"],
+          [data-slot="alert-dialog-content"]
         ) {
         transition-property: opacity;
         transition-duration: calc(var(--nsaa-reduced-fade) * var(--nsaa-time-scale));
@@ -688,7 +694,9 @@
         [data-slot="context-menu-sub-content"],
         [data-slot="tooltip-content"],
         [data-slot="dialog-overlay"],
-        [data-slot="dialog-content"]
+        [data-slot="dialog-content"],
+        [data-slot="alert-dialog-overlay"],
+        [data-slot="alert-dialog-content"]
       ) {
       transition-property: opacity;
       transition-duration: calc(var(--nsaa-reduced-fade) * var(--nsaa-time-scale));
@@ -851,7 +859,9 @@
       [data-slot="context-menu-sub-content"],
       [data-slot="tooltip-content"],
       [data-slot="dialog-overlay"],
-      [data-slot="dialog-content"]
+      [data-slot="dialog-content"],
+      [data-slot="alert-dialog-overlay"],
+      [data-slot="alert-dialog-content"]
     )[data-instant],
   :root[data-nsaa-input="keyboard"]
     :is(
@@ -865,6 +875,8 @@
       [data-slot="tooltip-content"],
       [data-slot="dialog-overlay"],
       [data-slot="dialog-content"],
+      [data-slot="alert-dialog-overlay"],
+      [data-slot="alert-dialog-content"],
       [data-slot="drawer-popup"],
       [data-slot="drawer-overlay"],
       [data-slot="accordion-content"],

package/src/styles.css

@@ -57,7 +57,8 @@
 }
 
 /* shadcn style hooks: `cn-rtl-flip` marks icons the shadcn CLI mirrors for right-to-left (the submenu
-   chevrons); `cn-input-otp` is styled by base-nova's style sheet, not by the item's classes. */
+   chevrons); `cn-input-otp` and two `cn-calendar-*` classes are styled by base-nova's style sheet, not
+   by the item's classes. */
 @layer components {
   .cn-rtl-flip:where(:dir(rtl)) {
     rotate: 180deg;
@@ -67,6 +68,23 @@
   .cn-input-otp {
     gap: calc(var(--spacing) * 2);
   }
+
+  /* Calendar with captionLayout="dropdown" (#136): style-nova.css draws the month and year
+     dropdowns' border and focus ring, and pads the caption label; the item's classes don't. */
+  .cn-calendar-dropdown-root {
+    border: 1px solid var(--input);
+
+    &:has(:focus) {
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
+  .cn-calendar-caption-label {
+    height: calc(var(--spacing) * 6);
+    padding-right: calc(var(--spacing) * 1);
+    padding-left: calc(var(--spacing) * 1.5);
+  }
 }
 
 /* Hover only where hovering is real (fine pointers), never on disabled, busy or read-only controls. */