@voila.dev/ui 1.1.9

package/package.json

@@ -0,0 +1,78 @@
+{
+	"name": "@voila.dev/ui",
+	"version": "1.1.9",
+	"type": "module",
+	"description": "85 components, one convention. The floor everything else stands on.",
+	"license": "MIT",
+	"homepage": "https://ui.voila.dev",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/voila-voila-dev/ui.git",
+		"directory": "packages/ui"
+	},
+	"keywords": [
+		"react",
+		"ui",
+		"components",
+		"tailwindcss",
+		"base-ui",
+		"design-system"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"!src/**/*.test.ts",
+		"!src/**/*.test.tsx",
+		"!src/**/*.stories.ts",
+		"!src/**/*.stories.tsx"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"exports": {
+		"./styles.css": "./src/styles.css",
+		"./styles/globals.css": "./src/styles/globals.css",
+		"./lib/utils": "./src/lib/utils.ts",
+		"./lib/time-math": "./src/lib/time-math.ts",
+		"./cva": "./src/lib/cva.ts",
+		"./badge-variants": "./src/components/ui/badge-variants.ts",
+		"./button-variants": "./src/components/ui/button-variants.ts",
+		"./menu-variants": "./src/components/ui/menu-variants.ts",
+		"./components/*": "./src/components/ui/*.tsx",
+		"./hooks/*": "./src/hooks/*.ts"
+	},
+	"imports": {
+		"#/*": "./src/*"
+	},
+	"scripts": {
+		"check": "biome check",
+		"check-types": "tsc --noEmit",
+		"format": "biome format",
+		"lint": "biome lint",
+		"test": "vitest run"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.4.1",
+		"@phosphor-icons/react": "2.1.10",
+		"@voila.dev/ui-icon": "0.0.0",
+		"@voila.dev/ui-tokens": "0.0.0",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"cva": "^1.0.0-beta.4",
+		"embla-carousel-react": "^8.6.0",
+		"input-otp": "^1.4.2",
+		"react-day-picker": "^10.0.1",
+		"react-resizable-panels": "^4.11.1",
+		"sonner": "^2.0.7",
+		"tailwind-merge": "^3.3.1",
+		"tw-animate-css": "^1.4.0",
+		"vaul": "^1.1.2"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"tailwindcss": "^4.0.0"
+	}
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,79 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { cn, proseLinkClassName } from "#/lib/utils.ts";
+
+function Accordion({
+	className,
+	// Deliberate kit default: one item open at a time. Pass `multiple` to opt out.
+	multiple = false,
+	...props
+}: AccordionPrimitive.Root.Props) {
+	return (
+		<AccordionPrimitive.Root
+			data-slot="accordion"
+			className={cn("flex w-full flex-col", className)}
+			multiple={multiple}
+			{...props}
+		/>
+	);
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+	return (
+		<AccordionPrimitive.Item
+			data-slot="accordion-item"
+			className={cn("not-last:border-b", className)}
+			{...props}
+		/>
+	);
+}
+
+function AccordionTrigger({
+	className,
+	children,
+	...props
+}: AccordionPrimitive.Trigger.Props) {
+	return (
+		<AccordionPrimitive.Header className="flex">
+			<AccordionPrimitive.Trigger
+				data-slot="accordion-trigger"
+				className={cn(
+					"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				<CaretDownIcon
+					data-slot="accordion-trigger-icon"
+					className="pointer-events-none shrink-0 transition-transform duration-200 group-aria-expanded/accordion-trigger:rotate-180 motion-reduce:transition-none"
+				/>
+			</AccordionPrimitive.Trigger>
+		</AccordionPrimitive.Header>
+	);
+}
+
+function AccordionContent({
+	className,
+	children,
+	...props
+}: AccordionPrimitive.Panel.Props) {
+	return (
+		<AccordionPrimitive.Panel
+			data-slot="accordion-content"
+			className={cn(
+				"h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none",
+				className,
+			)}
+			{...props}
+		>
+			<div
+				className={cn("pb-2.5 [&_p:not(:last-child)]:mb-4", proseLinkClassName)}
+			>
+				{children}
+			</div>
+		</AccordionPrimitive.Panel>
+	);
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,198 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+import { Button } from "#/components/ui/button.tsx";
+import { cn } from "#/lib/utils.ts";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+	return (
+		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+	);
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+	return (
+		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+	);
+}
+
+function AlertDialogClose({ ...props }: AlertDialogPrimitive.Close.Props) {
+	return (
+		<AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+	);
+}
+
+function AlertDialogOverlay({
+	className,
+	...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+	return (
+		<AlertDialogPrimitive.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 motion-reduce:animate-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+type AlertDialogContentSize = "default" | "sm";
+
+function AlertDialogContent({
+	className,
+	size = "default",
+	...props
+}: AlertDialogPrimitive.Popup.Props & {
+	size?: AlertDialogContentSize;
+}) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.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 max-w-xs -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]: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 motion-reduce:animate-none",
+					className,
+				)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<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
+}: React.ComponentProps<"div">) {
+	return (
+		<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
+}: React.ComponentProps<"div">) {
+	return (
+		<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
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
+		<AlertDialogPrimitive.Title
+			data-slot="alert-dialog-title"
+			className={cn(
+				"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
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
+		<AlertDialogPrimitive.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,
+	variant = "default",
+	size = "default",
+	...props
+}: AlertDialogPrimitive.Close.Props &
+	Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+	return (
+		<AlertDialogPrimitive.Close
+			data-slot="alert-dialog-action"
+			className={className}
+			render={<Button variant={variant} size={size} />}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogCancel({
+	className,
+	variant = "outline",
+	size = "default",
+	...props
+}: AlertDialogPrimitive.Close.Props &
+	Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+	return (
+		<AlertDialogPrimitive.Close
+			data-slot="alert-dialog-cancel"
+			className={className}
+			render={<Button variant={variant} size={size} />}
+			{...props}
+		/>
+	);
+}
+
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogClose,
+	AlertDialogContent,
+	type AlertDialogContentSize,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogMedia,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,105 @@
+import { XIcon } from "@phosphor-icons/react";
+import type * as React from "react";
+import { buttonVariants } from "#/components/ui/button-variants.ts";
+import { cva, type VariantProps } from "#/lib/cva.ts";
+
+import { cn, proseLinkClassName } from "#/lib/utils.ts";
+
+const alertVariants = cva({
+	base: "group/alert relative grid w-full grid-cols-1 gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-data-[slot=alert-action]:gap-x-2 has-[>svg]:has-data-[slot=alert-action]:grid-cols-[auto_1fr_auto] *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+	variants: {
+		variant: {
+			default: "bg-card text-card-foreground",
+			destructive:
+				"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			success:
+				"bg-card text-success *:data-[slot=alert-description]:text-success/90 *:[svg]:text-current",
+			warning:
+				"bg-card text-warning *:data-[slot=alert-description]:text-warning/90 *:[svg]:text-current",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"font-medium group-has-[>svg]/alert:col-start-2",
+				proseLinkClassName,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-sm text-balance text-muted-foreground md:text-pretty [&_p:not(:last-child)]:mb-4",
+				proseLinkClassName,
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-action"
+			className={cn(
+				"col-start-2 row-span-2 row-start-1 self-center group-has-[>svg]/alert:col-start-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertClose({ className, ...props }: React.ComponentProps<"button">) {
+	return (
+		<AlertAction>
+			<button
+				type="button"
+				data-slot="alert-close"
+				aria-label="Dismiss"
+				className={cn(
+					buttonVariants({ variant: "ghost", size: "icon-xs" }),
+					"text-muted-foreground",
+					className,
+				)}
+				{...props}
+			>
+				<XIcon />
+			</button>
+		</AlertAction>
+	);
+}
+
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertTitle };

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,30 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import type * as React from "react";
+import { cn } from "#/lib/utils.ts";
+
+function AspectRatio({
+	ratio = 1,
+	className,
+	render,
+	...props
+}: useRender.ComponentProps<"div"> & { ratio?: number | string }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps<"div">(
+			{
+				className: cn("relative aspect-(--ratio)", className),
+				style: {
+					"--ratio": ratio,
+				} as React.CSSProperties,
+			},
+			props,
+		),
+		render,
+		state: {
+			slot: "aspect-ratio",
+		},
+	});
+}
+
+export { AspectRatio };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,125 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import type * as React from "react";
+
+import { cn } from "#/lib/utils.ts";
+
+function Avatar({
+	className,
+	size = "default",
+	...props
+}: AvatarPrimitive.Root.Props & {
+	size?: "default" | "sm" | "lg";
+}) {
+	return (
+		<AvatarPrimitive.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 }: AvatarPrimitive.Image.Props) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn(
+				"aspect-square size-full animate-in rounded-full object-cover duration-300 fade-in",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: AvatarPrimitive.Fallback.Props) {
+	return (
+		<AvatarPrimitive.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=lg]/avatar:text-base group-data-[size=sm]/avatar:text-xs",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const avatarBadgeStatusClassNames = {
+	online: "bg-success text-success-foreground",
+	offline: "bg-muted-foreground text-muted",
+	busy: "bg-destructive text-destructive-foreground",
+} as const;
+
+function AvatarBadge({
+	className,
+	status,
+	...props
+}: React.ComponentProps<"span"> & {
+	status?: "online" | "offline" | "busy";
+}) {
+	return (
+		<span
+			data-slot="avatar-badge"
+			data-status={status}
+			className={cn(
+				"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
+				status && avatarBadgeStatusClassNames[status],
+				"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 }: React.ComponentProps<"div">) {
+	return (
+		<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,
+	size = "default",
+	...props
+}: React.ComponentProps<"div"> & {
+	size?: "default" | "sm" | "lg";
+}) {
+	return (
+		<div
+			data-slot="avatar-group-count"
+			data-size={size}
+			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 data-[size=lg]:size-10 data-[size=sm]:size-6 data-[size=lg]:text-base data-[size=sm]:text-xs [&>svg]:size-4 data-[size=lg]:[&>svg]:size-5 data-[size=sm]:[&>svg]:size-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Avatar,
+	AvatarBadge,
+	AvatarFallback,
+	AvatarGroup,
+	AvatarGroupCount,
+	AvatarImage,
+};