bsign-customization-full 0.0.1

package/src/components/preview.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useRef, useState } from "react";
+import { useIsMobile } from "../hooks/use-mobile";
+import { useLayersStore } from "../store/layers-store";
+import type { LayerImageProps } from "./layers/image-layer";
+import ImageLayer from "./layers/image-layer";
+import type { LayerTextProps } from "./layers/text-layer";
+import TextLayer from "./layers/text-layer";
+import { type TMovableItemProps } from "./movable-item"
+import * as htmlToImage from "html-to-image";
+import { isBackgroundLayer } from "../lib/type-checks";
+import { useCartStore } from "../store/cart-store";
+import GridView from "./layers/grid-view";
+import { getDefaultTemplateOptions, getSizeLimitScale, getTemplateTextFont } from "../lib/config";
+
+const PREVIEW_PIXEL_RATIO = 1;
+const CART_IMAGE_PIXEL_RATIO = 3;
+const CSS_INCH_IN_PX = 96;
+const PREVIEW_CONTENT_MARGIN_PX = 80;
+const MOBILE_REFERENCE_SIZE = getDefaultTemplateOptions().selectedSize.inchs;
+
+export type LayrProps = LayerImageProps | LayerTextProps | { imageSrc: string } & { hidden?: boolean };
+
+export type TLayer<T> = {
+  type: 'image' | 'text' | 'background'
+  subtype?: 'braille' | 'icon'
+  props: T & TMovableItemProps & { hidden?: boolean };
+};
+
+// interface PreviewProps {
+//   background?: {
+//     aspectRatio?: string
+//   }
+// }
+
+export default function Preview() {
+  const { layers, setPreview, cartId, options, change, textCenteringRequest } = useLayersStore();
+  const { update: updateCart } = useCartStore();
+  const isMobile = useIsMobile();
+  const canvasRef = useRef<HTMLDivElement | null>(null);
+  const lastAutoCenteredTemplateIdRef = useRef<string | null>(null);
+
+  const [backgroundLayer, setBackground] = useState<string>();
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const selectedSize = options.selectedSize.inchs;
+  const templateTextFont = getTemplateTextFont(options.selectedTemplateId);
+  const referenceWidthPx = MOBILE_REFERENCE_SIZE.w * CSS_INCH_IN_PX + PREVIEW_CONTENT_MARGIN_PX;
+  const referenceHeightPx = MOBILE_REFERENCE_SIZE.h * CSS_INCH_IN_PX + PREVIEW_CONTENT_MARGIN_PX;
+  const currentWidthPx = selectedSize.w * CSS_INCH_IN_PX + PREVIEW_CONTENT_MARGIN_PX;
+  const currentHeightPx = selectedSize.h * CSS_INCH_IN_PX + PREVIEW_CONTENT_MARGIN_PX;
+  const mobilePreviewScale = isMobile
+    ? Math.min(referenceWidthPx / currentWidthPx, referenceHeightPx / currentHeightPx)
+    : 1;
+  const previewSizeLimitScale = getSizeLimitScale(options.selectedSize);
+
+  useEffect(() => {
+    const layerBackground = layers.find(layer => layer.type === 'background');
+    if (layerBackground && isBackgroundLayer(layerBackground) && layerBackground.props.imageSrc !== backgroundLayer)
+      setBackground(layerBackground.props.imageSrc)
+
+    const timer = setTimeout(() => {
+      generateImage({ pixelRatio: PREVIEW_PIXEL_RATIO, updatePreviewState: true });
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [options, layers[0], layers[1], layers[2], layers[3], layers[4], layers[5]])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      refreshCart()
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [cartId, options, layers[0], layers[1], layers[2], layers[3], layers[4], layers[5]])
+
+  const generateImage = async ({
+    pixelRatio = PREVIEW_PIXEL_RATIO,
+    updatePreviewState = true,
+  }: {
+    pixelRatio?: number;
+    updatePreviewState?: boolean;
+  } = {}) => {
+    if (!canvasRef.current) return undefined;
+
+    try {
+      const previewUrl = await htmlToImage.toPng(canvasRef.current, {
+        cacheBust: true,
+        pixelRatio,
+        skipFonts: false,
+      });
+
+      if (updatePreviewState) {
+        setPreview(previewUrl);
+      }
+
+      return previewUrl;
+    } catch (error) {
+      console.error(error);
+      return undefined;
+    }
+  }
+
+  const refreshCart = async () => {
+    if (cartId) {
+      const img = await generateImage({
+        pixelRatio: CART_IMAGE_PIXEL_RATIO,
+        updatePreviewState: false,
+      });
+      if (img) {
+        updateCart(cartId, {
+          img,
+          sign: layers,
+          options
+        });
+      }
+    }
+  }
+
+  const centerTextBlock = (): boolean => {
+    const textLayers = layers
+      .map((layer, index) => ({ layer, index }))
+      .filter(({ layer }) => layer.type === "text" && layer.subtype !== "braille");
+
+    if (!textLayers.length) return false;
+    const parent = containerRef.current?.offsetParent as HTMLElement;
+    if (!parent) return false;
+
+    const centerX = parent.clientWidth / 2;
+    const centerY = parent.clientHeight / 2;
+
+    const positionedTextLayers = textLayers.filter(({ layer }) =>
+      typeof layer.props.coordinates?.x === "number" && typeof layer.props.coordinates?.y === "number"
+    );
+
+    if (!positionedTextLayers.length) return false;
+
+    const textXCoordinates = positionedTextLayers.map(({ layer }) => layer.props.coordinates.x as number);
+    const textYCoordinates = positionedTextLayers.map(({ layer }) => layer.props.coordinates.y as number);
+
+    const currentTextCenterX = (Math.min(...textXCoordinates) + Math.max(...textXCoordinates)) / 2;
+    const currentTextCenterY = (Math.min(...textYCoordinates) + Math.max(...textYCoordinates)) / 2;
+
+    const deltaX = centerX - currentTextCenterX;
+    const deltaY = centerY - currentTextCenterY;
+
+    if (Math.abs(deltaX) < 0.01 && Math.abs(deltaY) < 0.01) return true;
+
+    positionedTextLayers.forEach(({ layer, index }) => {
+      change(index, {
+        coordinates: {
+          x: (layer.props.coordinates.x as number) + deltaX,
+          y: (layer.props.coordinates.y as number) + deltaY,
+        }
+      });
+    });
+
+    const brailleLayers = layers
+      .map((layer, index) => ({ layer, index }))
+      .filter(({ layer }) => layer.subtype === "braille" &&
+        typeof layer.props.coordinates?.x === "number" &&
+        typeof layer.props.coordinates?.y === "number"
+      );
+
+    brailleLayers.forEach(({ layer, index }) => {
+      change(index, {
+        coordinates: {
+          x: (layer.props.coordinates.x as number) + deltaX,
+          y: (layer.props.coordinates.y as number) + deltaY,
+        }
+      });
+    });
+    return true;
+  };
+
+  // Automatic centering on startup and when template changes.
+  useEffect(() => {
+    if (!backgroundLayer) return;
+    if (lastAutoCenteredTemplateIdRef.current === options.selectedTemplateId) return;
+
+    const isCentered = centerTextBlock();
+    if (isCentered) {
+      lastAutoCenteredTemplateIdRef.current = options.selectedTemplateId;
+    }
+  }, [backgroundLayer, layers, options.selectedTemplateId]);
+
+  // Manual centering by "Center text" button.
+  useEffect(() => {
+    if (textCenteringRequest === 0) return;
+    centerTextBlock();
+  }, [textCenteringRequest])
+
+  return (
+    <>
+      {(backgroundLayer) && <div>
+        <div
+          className={isMobile ? "overflow-hidden" : undefined}
+          style={isMobile ? {
+            width: `${referenceWidthPx}px`,
+            height: `${referenceHeightPx}px`,
+          } : undefined}
+        >
+          <div
+            className={isMobile ? "h-fit w-fit origin-top-left" : undefined}
+            style={isMobile ? { transform: `scale(${mobilePreviewScale})` } : undefined}
+          >
+            <div
+              className="relative overflow-hidden origin-top transition-transform duration-500 ease-in-out"
+              ref={canvasRef}
+              style={{ transform: `scale(${previewSizeLimitScale})` }}
+            >
+
+              <div className="m-10" ref={containerRef}>
+                {/* Layer 1 - Main Background */}
+                <div
+                  className="bg-center bg-no-repeat relative pointer-events-none transition-[width,height] duration-500 ease-in-out will-change-[width,height]"
+                  style={{
+                    backgroundImage: `url(${backgroundLayer})`,
+                    backgroundColor: backgroundLayer ? "transparent" : "#f3f4f6",
+                    backgroundSize: "100% 100%", // Avoid side clipping for rectangular signs when source aspect ratio differs.
+                    width: `${options.selectedSize.inchs.w}in`,
+                    height: `${options.selectedSize.inchs.h}in`,
+                  }}
+                >
+                  {options.gridCm && <div className="absolute inset-0 z-50 pointer-events-none">
+                    <GridView h={options.selectedSize.cm.h} w={options.selectedSize.cm.w} color="color-mix(in oklab, var(--color-red-600) 50%, transparent)" />
+                  </div>}
+                  {options.gridInch && <div className="absolute inset-0 z-50 pointer-events-none">
+                    <GridView h={options.selectedSize.inchs.h} w={options.selectedSize.inchs.w} color="color-mix(in oklab, var(--color-purple-600)  50%, transparent)" width={2} />
+                  </div>}
+                </div>
+
+
+                {layers && layers.map((layer, index) => !layer.props.hidden ? (
+                  <>
+                    {layer.subtype === 'icon' && (
+                      <ImageLayer key={`layer_${index}`} layerIndex={index} />
+                    )}
+
+                    {layer.type === 'image' && (
+                      <ImageLayer key={`layer_${index}`} layerIndex={index} />
+                    )}
+
+                    {(layer.type === 'text' && layer.subtype !== 'braille') && (
+                      <TextLayer key={`layer_${index}`} layerIndex={index} font={templateTextFont} />
+                    )}
+
+                    {layer.subtype === 'braille' && (
+                      <TextLayer key={`layer_${index}`} layerIndex={index} font='font-braille' />
+                    )}
+                  </>
+                ) : null)}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>}
+    </>
+  )
+}

package/src/components/resize-button.tsx

@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { useCallback, useState } from "react";
+
+export type ResizeProps = {
+    isMouseMoveLeftDown: boolean,
+    isMouseMoveRightUp: boolean,
+    isMouseMoveLeftUp: boolean,
+    isMouseMoveRightDown: boolean,
+    isMouseMoveLeft: boolean,
+    isMouseMoveRight: boolean,
+    isMouseMoveUp: boolean,
+}
+
+const resizableItemVariants = cva(
+    "absolute bg-blue-500 hover:bg-red-500 rounded-full h-[14px] w-[14px] translate-y-0",
+    {
+        variants: {
+            position: {
+                leftTop: "-top-[10px] -left-[10px]",
+                leftCenter: "bottom-1/2 -left-[10px]",
+                leftBottom: "-bottom-[10px] -left-[10px]",
+                rightTop: "-top-[10px] -right-[10px]",
+                rightCenter: "bottom-1/2 -right-[10px]",
+                rightBottom: "-bottom-[10px] -right-[10px]",
+                bottomCenter: "-bottom-[10px] left-1/2",
+                topCenter: "-top-[10px] left-1/2",
+            },
+            cursor: {
+                'nwse-resize': 'cursor-nwse-resize',
+                'nesw-resize': 'cursor-nesw-resize',
+                'e-resize': 'cursor-e-resize',
+                'ns-resize': 'cursor-ns-resize'
+            }
+        }
+    }
+)
+
+export default function ResizeButton(props: VariantProps<typeof resizableItemVariants> & {
+    onUpdate: (move: ResizeProps) => void;
+}) {
+    const [isDragging, setIsDragging] = useState(false)
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
+
+    const handleMouseDown = useCallback(
+        (e: React.MouseEvent) => {
+            e.preventDefault()
+            setIsDragging(true)
+            setDragStart({ x: e.clientX, y: e.clientY })
+        }, [],
+    )
+
+    const handleMouseMove = useCallback(
+        (e: React.MouseEvent) => {
+            if (!isDragging) return
+
+            const isMouseMoveLeftDown = e.clientX < dragStart.x && e.clientY > dragStart.y
+            const isMouseMoveRightUp = e.clientX > dragStart.x && e.clientY < dragStart.y
+            const isMouseMoveLeftUp = e.clientX < dragStart.x && e.clientY < dragStart.y
+            const isMouseMoveRightDown = e.clientX > dragStart.x && e.clientY > dragStart.y
+
+            const isMouseMoveLeft = e.clientX < dragStart.x
+            const isMouseMoveRight = e.clientX > dragStart.x
+            const isMouseMoveUp = e.clientY < dragStart.y
+
+            props.onUpdate({ isMouseMoveLeftDown, isMouseMoveRightUp, isMouseMoveLeftUp, isMouseMoveRightDown, isMouseMoveLeft, isMouseMoveRight, isMouseMoveUp })
+        },
+        [isDragging],
+    )
+
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false)
+    }, [])
+
+    return (
+        <div
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseDown={handleMouseDown}
+            className={cn(resizableItemVariants(props))}
+        >{isDragging && 'Dragging'}</div>
+    )
+}

package/src/components/size-guide-modal.tsx

@@ -0,0 +1,47 @@
+import {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+} from "./ui/dialog"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "../lib/utils"
+import { X } from "lucide-react"
+
+interface ImportFileModalProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}
+
+export function SizeGuideModal({
+    open,
+    onOpenChange,
+}: ImportFileModalProps) {
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogPortal>
+                <DialogOverlay className="bg-black/40" />
+                <DialogPrimitive.Content
+                    className={cn(
+                        "fixed left-1/2 top-1/2 z-50 max-h-[90vh] w-[calc(100%-1rem)] max-w-[1600px] overflow-auto bg-background -translate-x-1/2 -translate-y-1/2 sm:w-[calc(100%-2rem)]",
+                        "rounded-2xl",
+                        "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out",
+                        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+                        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+                        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+                        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+                        "focus:outline-none"
+                    )}
+                >
+                    <div className="w-full px-4 pt-2 flex justify-end">
+                        <DialogPrimitive.Close className="flex items-center gap-2 text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">
+                            <X className="h-4 w-4" />
+                            Close
+                        </DialogPrimitive.Close>
+                    </div>
+                    <img src="/size-guide.webp" className="w-full h-auto rounded-2xl object-contain" />
+                </DialogPrimitive.Content>
+            </DialogPortal>
+        </Dialog>
+    )
+}

package/src/components/size-guide.tsx

@@ -0,0 +1,98 @@
+import { Percent, X } from "lucide-react"
+import { Button } from "./ui/button"
+import { useState } from "react"
+import { useIsMobile } from "../hooks/use-mobile"
+
+export type TGuide = {
+    price: string;
+    qty: number;
+    discount?: number;
+    badgeColor?: string;
+}
+
+function Guide({ items, currencySymbol = "$" }: {
+    items: TGuide[];
+    currencySymbol?: string;
+}) {
+    return (
+        <div className="quantity-discount">
+            <div className="qty-discount--list">
+
+                {items.map(({ price, qty, discount, badgeColor }) => (
+                    <div className="qty-discount--item" key={qty}>
+                        <p className="qty-discount--item-qty">{qty} Item</p>
+                        <p className="qty-discount--item-price">
+                            {currencySymbol}<span id="main-product-price">
+                                {price}
+                            </span>
+                        </p>
+                        <p className="qty-discount--item-hm">each</p>
+
+                        {discount && (
+                            <span
+                                className="qty-discount--item-badge"
+                                style={{
+                                    background: badgeColor ?? "#FFBE00",
+                                }}
+                            >
+                                SAVE {discount}%
+                            </span>
+                        )}
+                    </div>
+                ))}
+
+            </div>
+
+            <p className="qty-discount--info">
+                Special pricing is available for B2B clients and Property Managers. Contact us to learn more.
+            </p>
+        </div>
+    )
+}
+
+export default function PriceGuide({ guide, currencySymbol = "$" }: {
+    guide: TGuide[];
+    currencySymbol?: string;
+}) {
+    const [open, setOpen] = useState(false)
+    const isMobile = useIsMobile()
+
+    return (
+        <div className="relative">
+            <Button
+                variant={"green"}
+                size={"lg"}
+                onClick={() => setOpen(prev => !prev)}
+                className={`${open ? "bg-[#107E12] text-white" : ""} hidden md:flex`}
+            >
+                <Percent className="size-4.5" />
+                Price guide
+            </Button>
+
+            <span className="flex md:hidden items-center gap-1.5 text-[#107E12] underline underline-offset-4" onClick={() => setOpen(prev => !prev)}>
+                <Percent className="size-3.5" />
+                Price guide
+            </span>
+
+            {open && (
+                <>
+                    {isMobile && (
+                        <button
+                            type="button"
+                            className="fixed inset-0 z-40 bg-black/30"
+                            onClick={() => setOpen(false)}
+                            aria-label="Close price guide"
+                        />
+                    )}
+                    <div className={`border border-[#E6E6E6] rounded-xl bg-white p-4 z-50 ${isMobile ? "fixed inset-x-3 bottom-3 max-h-[75vh] overflow-auto" : "absolute -top-53 max-w-[600px]"}`}>
+                        <div className="flex items-start justify-between">
+                            <h6 className="mb-4 text-[18px] font-semibold">Price guide</h6>
+                            <X className="size-4 cursor-pointer" onClick={() => setOpen(false)} />
+                        </div>
+                        <Guide items={guide} currencySymbol={currencySymbol} />
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}

package/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+import { Separator } from "./separator"
+
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-[16px] font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background border-black hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "bg-[#F2F2F2] hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        green: "text-[#107E12] bg-white border border-[#107E12]",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-[56px] rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }