@olympusoss/canvas 2.20.1 → 3.1.0

package/styles/utilities/position.css

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
+@layer canvas.utilities {
+  .static { position:static; }
+  .relative { position:relative; }
+  .absolute { position:absolute; }
+  .fixed { position:fixed; }
+  .sticky { position:sticky; }
+  .inset-0 { top:0;right:0;bottom:0;left:0; }
+  .top-0 { top:0; }
+  .right-0 { right:0; }
+  .bottom-0 { bottom:0; }
+  .left-0 { left:0; }
+
+  @media (min-width: 640px) {
+    .sm\:static { position:static; }
+    .sm\:relative { position:relative; }
+    .sm\:absolute { position:absolute; }
+    .sm\:fixed { position:fixed; }
+    .sm\:sticky { position:sticky; }
+    .sm\:inset-0 { top:0;right:0;bottom:0;left:0; }
+    .sm\:top-0 { top:0; }
+    .sm\:right-0 { right:0; }
+    .sm\:bottom-0 { bottom:0; }
+    .sm\:left-0 { left:0; }
+  }
+
+  @media (min-width: 768px) {
+    .md\:static { position:static; }
+    .md\:relative { position:relative; }
+    .md\:absolute { position:absolute; }
+    .md\:fixed { position:fixed; }
+    .md\:sticky { position:sticky; }
+    .md\:inset-0 { top:0;right:0;bottom:0;left:0; }
+    .md\:top-0 { top:0; }
+    .md\:right-0 { right:0; }
+    .md\:bottom-0 { bottom:0; }
+    .md\:left-0 { left:0; }
+  }
+
+  @media (min-width: 1024px) {
+    .lg\:static { position:static; }
+    .lg\:relative { position:relative; }
+    .lg\:absolute { position:absolute; }
+    .lg\:fixed { position:fixed; }
+    .lg\:sticky { position:sticky; }
+    .lg\:inset-0 { top:0;right:0;bottom:0;left:0; }
+    .lg\:top-0 { top:0; }
+    .lg\:right-0 { right:0; }
+    .lg\:bottom-0 { bottom:0; }
+    .lg\:left-0 { left:0; }
+  }
+
+  @media (min-width: 1280px) {
+    .xl\:static { position:static; }
+    .xl\:relative { position:relative; }
+    .xl\:absolute { position:absolute; }
+    .xl\:fixed { position:fixed; }
+    .xl\:sticky { position:sticky; }
+    .xl\:inset-0 { top:0;right:0;bottom:0;left:0; }
+    .xl\:top-0 { top:0; }
+    .xl\:right-0 { right:0; }
+    .xl\:bottom-0 { bottom:0; }
+    .xl\:left-0 { left:0; }
+  }
+
+  @media (min-width: 1536px) {
+    .\32 xl\:static { position:static; }
+    .\32 xl\:relative { position:relative; }
+    .\32 xl\:absolute { position:absolute; }
+    .\32 xl\:fixed { position:fixed; }
+    .\32 xl\:sticky { position:sticky; }
+    .\32 xl\:inset-0 { top:0;right:0;bottom:0;left:0; }
+    .\32 xl\:top-0 { top:0; }
+    .\32 xl\:right-0 { right:0; }
+    .\32 xl\:bottom-0 { bottom:0; }
+    .\32 xl\:left-0 { left:0; }
+  }
+}

package/styles/utilities/sizing.css

@@ -0,0 +1,138 @@
+/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
+@layer canvas.utilities {
+  .w-full { width:100%; }
+  .w-screen { width:100vw; }
+  .w-auto { width:auto; }
+  .w-min { width:min-content; }
+  .w-max { width:max-content; }
+  .w-fit { width:fit-content; }
+  .w-1\/2 { width:50%; }
+  .w-0 { width:0px; }
+  .h-full { height:100%; }
+  .h-screen { height:100vh; }
+  .h-auto { height:auto; }
+  .h-min { height:min-content; }
+  .h-max { height:max-content; }
+  .h-fit { height:fit-content; }
+  .h-dvh { height:100dvh; }
+  .h-0 { height:0px; }
+  .min-w-0 { min-width:0px; }
+  .min-h-0 { min-height:0px; }
+  .max-w-full { max-width:100%; }
+  .max-h-full { max-height:100%; }
+
+  @media (min-width: 640px) {
+    .sm\:w-full { width:100%; }
+    .sm\:w-screen { width:100vw; }
+    .sm\:w-auto { width:auto; }
+    .sm\:w-min { width:min-content; }
+    .sm\:w-max { width:max-content; }
+    .sm\:w-fit { width:fit-content; }
+    .sm\:w-1\/2 { width:50%; }
+    .sm\:w-0 { width:0px; }
+    .sm\:h-full { height:100%; }
+    .sm\:h-screen { height:100vh; }
+    .sm\:h-auto { height:auto; }
+    .sm\:h-min { height:min-content; }
+    .sm\:h-max { height:max-content; }
+    .sm\:h-fit { height:fit-content; }
+    .sm\:h-dvh { height:100dvh; }
+    .sm\:h-0 { height:0px; }
+    .sm\:min-w-0 { min-width:0px; }
+    .sm\:min-h-0 { min-height:0px; }
+    .sm\:max-w-full { max-width:100%; }
+    .sm\:max-h-full { max-height:100%; }
+  }
+
+  @media (min-width: 768px) {
+    .md\:w-full { width:100%; }
+    .md\:w-screen { width:100vw; }
+    .md\:w-auto { width:auto; }
+    .md\:w-min { width:min-content; }
+    .md\:w-max { width:max-content; }
+    .md\:w-fit { width:fit-content; }
+    .md\:w-1\/2 { width:50%; }
+    .md\:w-0 { width:0px; }
+    .md\:h-full { height:100%; }
+    .md\:h-screen { height:100vh; }
+    .md\:h-auto { height:auto; }
+    .md\:h-min { height:min-content; }
+    .md\:h-max { height:max-content; }
+    .md\:h-fit { height:fit-content; }
+    .md\:h-dvh { height:100dvh; }
+    .md\:h-0 { height:0px; }
+    .md\:min-w-0 { min-width:0px; }
+    .md\:min-h-0 { min-height:0px; }
+    .md\:max-w-full { max-width:100%; }
+    .md\:max-h-full { max-height:100%; }
+  }
+
+  @media (min-width: 1024px) {
+    .lg\:w-full { width:100%; }
+    .lg\:w-screen { width:100vw; }
+    .lg\:w-auto { width:auto; }
+    .lg\:w-min { width:min-content; }
+    .lg\:w-max { width:max-content; }
+    .lg\:w-fit { width:fit-content; }
+    .lg\:w-1\/2 { width:50%; }
+    .lg\:w-0 { width:0px; }
+    .lg\:h-full { height:100%; }
+    .lg\:h-screen { height:100vh; }
+    .lg\:h-auto { height:auto; }
+    .lg\:h-min { height:min-content; }
+    .lg\:h-max { height:max-content; }
+    .lg\:h-fit { height:fit-content; }
+    .lg\:h-dvh { height:100dvh; }
+    .lg\:h-0 { height:0px; }
+    .lg\:min-w-0 { min-width:0px; }
+    .lg\:min-h-0 { min-height:0px; }
+    .lg\:max-w-full { max-width:100%; }
+    .lg\:max-h-full { max-height:100%; }
+  }
+
+  @media (min-width: 1280px) {
+    .xl\:w-full { width:100%; }
+    .xl\:w-screen { width:100vw; }
+    .xl\:w-auto { width:auto; }
+    .xl\:w-min { width:min-content; }
+    .xl\:w-max { width:max-content; }
+    .xl\:w-fit { width:fit-content; }
+    .xl\:w-1\/2 { width:50%; }
+    .xl\:w-0 { width:0px; }
+    .xl\:h-full { height:100%; }
+    .xl\:h-screen { height:100vh; }
+    .xl\:h-auto { height:auto; }
+    .xl\:h-min { height:min-content; }
+    .xl\:h-max { height:max-content; }
+    .xl\:h-fit { height:fit-content; }
+    .xl\:h-dvh { height:100dvh; }
+    .xl\:h-0 { height:0px; }
+    .xl\:min-w-0 { min-width:0px; }
+    .xl\:min-h-0 { min-height:0px; }
+    .xl\:max-w-full { max-width:100%; }
+    .xl\:max-h-full { max-height:100%; }
+  }
+
+  @media (min-width: 1536px) {
+    .\32 xl\:w-full { width:100%; }
+    .\32 xl\:w-screen { width:100vw; }
+    .\32 xl\:w-auto { width:auto; }
+    .\32 xl\:w-min { width:min-content; }
+    .\32 xl\:w-max { width:max-content; }
+    .\32 xl\:w-fit { width:fit-content; }
+    .\32 xl\:w-1\/2 { width:50%; }
+    .\32 xl\:w-0 { width:0px; }
+    .\32 xl\:h-full { height:100%; }
+    .\32 xl\:h-screen { height:100vh; }
+    .\32 xl\:h-auto { height:auto; }
+    .\32 xl\:h-min { height:min-content; }
+    .\32 xl\:h-max { height:max-content; }
+    .\32 xl\:h-fit { height:fit-content; }
+    .\32 xl\:h-dvh { height:100dvh; }
+    .\32 xl\:h-0 { height:0px; }
+    .\32 xl\:min-w-0 { min-width:0px; }
+    .\32 xl\:min-h-0 { min-height:0px; }
+    .\32 xl\:max-w-full { max-width:100%; }
+    .\32 xl\:max-h-full { max-height:100%; }
+  }
+}

package/tsconfig.json

@@ -1,23 +1,22 @@
 {
-	"compilerOptions": {
-		"target": "ES2020",
-		"module": "ESNext",
-		"moduleResolution": "bundler",
-		"jsx": "react-jsx",
-		"strict": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"declaration": true,
-		"declarationMap": true,
-		"outDir": "./dist",
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["./src/*"]
-		}
-	},
-	"include": ["src/**/*.ts", "src/**/*.tsx"],
-	"exclude": ["node_modules", "dist"]
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
 }

package/src/components/atoms/README.md

@@ -1,11 +0,0 @@
-# Atoms
-
-Single primitive wrappers. Zero composition.
-
-**Can import**: `tokens/`, `lib/utils`, React. **That's it.**
-
-**Cannot import**: anything from `molecules/`, `organisms/`, or `templates/`.
-
-If an atom wants to compose another atom, it's probably a molecule — promote it.
-
-See [CONTRIBUTING.md](../../../CONTRIBUTING.md) for the full atomic-design rules.

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

@@ -1,32 +0,0 @@
-"use client";
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-import type * as React from "react";
-
-export interface AspectRatioProps
-	extends React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root> {
-	/**
-	 * Aspect ratio expressed as a number (e.g. `16/9`, `4/3`, `1`). The
-	 * child element is sized to fit this ratio while preserving the
-	 * container's width.
-	 */
-	ratio?: number;
-	/**
-	 * Render as a Radix Slot — useful when wrapping a custom container that
-	 * already has its own DOM element.
-	 * @default false
-	 */
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-/**
- * Re-export of Radix's `AspectRatio.Root`. Pass `ratio` (number, e.g.
- * `16/9`) to lock a child's aspect ratio.
- */
-const AspectRatio = AspectRatioPrimitive.Root as React.ForwardRefExoticComponent<
-	AspectRatioProps & React.RefAttributes<HTMLDivElement>
->;
-
-export { AspectRatio };

package/src/components/atoms/avatar.tsx

@@ -1,98 +0,0 @@
-"use client";
-
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
-	/**
-	 * Render as a Radix Slot — wrap a custom element while keeping the
-	 * Avatar's image-loading behaviour.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Avatar content — typically `<AvatarImage>` + `<AvatarFallback>`. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-/**
- * Round profile-image container. Composes `Avatar` + `AvatarImage` +
- * `AvatarFallback`. Defaults to `h-10 w-10`.
- */
-const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
-	({ className, ...props }, ref) => (
-		<AvatarPrimitive.Root
-			ref={ref}
-			className={cn(
-				"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-white",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-export interface AvatarImageProps
-	extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
-	/** Image URL. Hides itself if loading errors so the fallback can render. */
-	src?: string;
-	/** Accessible label. Defaults to the empty string for decorative use. */
-	alt?: string;
-	/** Radix lifecycle hook for tracking the load state. */
-	onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
-	asChild?: boolean;
-	className?: string;
-}
-
-/**
- * The `<img>` slot inside `<Avatar>`. Hides itself if loading errors so the
- * fallback can render.
- */
-const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	AvatarImageProps
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn("aspect-square h-full w-full", className)}
-		{...props}
-	/>
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-export interface AvatarFallbackProps
-	extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
-	/**
-	 * Wait this many ms before showing the fallback (avoids flash on fast
-	 * image loads).
-	 */
-	delayMs?: number;
-	asChild?: boolean;
-	/** Initials, icon, or silhouette. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-/**
- * Rendered when the image is missing or still loading — typically initials,
- * an icon, or a silhouette.
- */
-const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	AvatarFallbackProps
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			"flex h-full w-full items-center justify-center rounded-full bg-white",
-			className,
-		)}
-		{...props}
-	/>
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarFallback, AvatarImage };

package/src/components/atoms/badge.tsx

@@ -1,44 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-	"inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-	{
-		variants: {
-			variant: {
-				default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-				secondary:
-					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				destructive:
-					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-				outline: "text-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-
-export interface BadgeProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof badgeVariants> {
-	/**
-	 * Visual style. `default` is filled brand colour, `secondary` is a muted
-	 * neutral, `outline` is bordered with no fill, `destructive` flags an
-	 * error or warning state.
-	 * @default "default"
-	 */
-	variant?: "default" | "secondary" | "destructive" | "outline";
-	/** Badge label or any nested elements. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-	return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/src/components/atoms/brand-mark.tsx

@@ -1,74 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface BrandMarkProps extends React.SVGAttributes<SVGSVGElement> {
-	/**
-	 * SVG path data (`d` attribute) for the brand mark. Required — canvas
-	 * does not ship a default brand shape; consuming apps supply their own.
-	 */
-	path: string;
-	/**
-	 * SVG `viewBox` matching the path's coordinate space.
-	 * @default "0 0 24 24"
-	 */
-	viewBox?: string;
-	/**
-	 * Optional inner `transform` applied to the path's `<g>` group — useful
-	 * when the path coordinates need to be translated, rotated, or scaled
-	 * relative to the viewBox.
-	 */
-	transform?: string;
-	/**
-	 * Gradient start colour. When omitted, the path is filled with
-	 * `currentColor` and no gradient is generated.
-	 */
-	from?: string;
-	/**
-	 * Gradient end colour. Required when `from` is set.
-	 */
-	to?: string;
-}
-
-/**
- * Generic brand-mark primitive. Renders a single SVG `path` either with
- * `currentColor` (the default) or with a two-stop linear gradient when both
- * `from` and `to` are provided. Sizing is controlled via `className`
- * (`h-10 w-auto`); the SVG honours its `viewBox` aspect ratio.
- *
- * Apps consuming canvas typically build a thin wrapper around this component
- * that hard-codes their own brand path / gradient — see the docs site's
- * `OlympusLogo` for a worked example.
- */
-const BrandMark = React.forwardRef<SVGSVGElement, BrandMarkProps>(
-	({ path, viewBox = "0 0 24 24", transform, from, to, className, ...props }, ref) => {
-		const gradientId = React.useId();
-		const useGradient = from !== undefined && to !== undefined;
-		const fill = useGradient ? `url(#${gradientId})` : "currentColor";
-		const pathEl = <path d={path} fill={fill} fillRule="evenodd" />;
-		return (
-			<svg
-				ref={ref}
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox={viewBox}
-				className={cn("shrink-0", className)}
-				{...props}
-			>
-				{useGradient && (
-					<defs>
-						<linearGradient id={gradientId} x1="1" y1="1" x2="0" y2="0">
-							<stop offset="0%" stopColor={from} />
-							<stop offset="100%" stopColor={to} />
-						</linearGradient>
-					</defs>
-				)}
-				{transform ? <g transform={transform}>{pathEl}</g> : pathEl}
-			</svg>
-		);
-	},
-);
-BrandMark.displayName = "BrandMark";
-
-export { BrandMark };

package/src/components/atoms/button.tsx

@@ -1,105 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground shadow hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary hover:text-brand",
-			},
-			size: {
-				default: "h-9 px-4 py-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
-				icon: "h-9 w-9",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	/**
-	 * Visual emphasis preset. `default` is the primary action, `destructive`
-	 * is for irreversible actions, `outline` and `secondary` are quieter,
-	 * `ghost` is borderless, `link` looks like body-text with a soft
-	 * color shift on hover (no underline).
-	 * @default "default"
-	 */
-	variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-	/**
-	 * Height + horizontal padding preset. `sm` is 32px, `default` is 36px,
-	 * `lg` is 40px, `icon` is square 36×36 for icon-only buttons (always
-	 * pair with `aria-label`).
-	 * @default "default"
-	 */
-	size?: "default" | "sm" | "lg" | "icon";
-	/**
-	 * Render as a Radix Slot — forwards className and behaviour onto the
-	 * immediate child element instead of rendering a wrapper `<button>`.
-	 * Common pattern for using a router `<Link>` while keeping the Button
-	 * styling.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Visible label or any nested elements (icons, badges). */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the root element via `cn()`. */
-	className?: string;
-	/**
-	 * When true, dims the button to 50% opacity and blocks pointer/keyboard
-	 * input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Native HTML button type. `submit` triggers parent form submission;
-	 * `reset` resets parent form fields; `button` does neither.
-	 * @default "button"
-	 */
-	type?: "button" | "submit" | "reset";
-	/** Click handler. Receives a `MouseEvent<HTMLButtonElement>`. */
-	onClick?: React.MouseEventHandler<HTMLButtonElement>;
-	/** Form name when this button submits/resets a form (for forms with multiple buttons). */
-	name?: string;
-	/** Form value sent with the form when this button is the submitter. */
-	value?: string | number | readonly string[];
-	/**
-	 * ID of the form this button belongs to, when the button sits outside
-	 * the `<form>` element.
-	 */
-	form?: string;
-	/** Tab order. Default behaviour is one of native `<button>` tab focus. */
-	tabIndex?: number;
-	/** Accessible label, required for icon-only buttons (`size="icon"`). */
-	"aria-label"?: string;
-	/** ID of an element that describes the button's purpose. */
-	"aria-describedby"?: string;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-		);
-	},
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/components/atoms/checkbox.tsx

@@ -1,63 +0,0 @@
-"use client";
-
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface CheckboxProps
-	extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-	/**
-	 * Controlled checked state. Pass `'indeterminate'` to render the dash
-	 * glyph instead of the check.
-	 */
-	checked?: boolean | "indeterminate";
-	/**
-	 * Initial state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultChecked?: boolean | "indeterminate";
-	/** Fires when the user toggles the checkbox. Use this instead of `onChange`. */
-	onCheckedChange?: (checked: boolean | "indeterminate") => void;
-	/**
-	 * Dims to 50% and blocks input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Block native form submit unless the box is checked.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name for native form submission. */
-	name?: string;
-	/** Form field value when submitted. */
-	value?: string;
-	asChild?: boolean;
-	className?: string;
-}
-
-/**
- * Wraps Radix's `Checkbox.Root`. The check glyph is rendered inside
- * automatically.
- */
-const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
-	({ className, ...props }, ref) => (
-		<CheckboxPrimitive.Root
-			ref={ref}
-			className={cn(
-				"grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-				className,
-			)}
-			{...props}
-		>
-			<CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
-				<Check className="h-4 w-4" />
-			</CheckboxPrimitive.Indicator>
-		</CheckboxPrimitive.Root>
-	),
-);
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };