{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "css-box",
  "type": "registry:block",
  "title": "Css box",
  "description": "Css box",
  "files": [
    {
      "path": "components/usages/cssboxusage.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useEffect } from \"react\";\n\nimport Image from \"next/image\";\n\nimport CSSBox, { CSSBoxRef } from \"@/registry/open-source/css-box\";\n\nimport { Button } from \"../ui/button\";\nimport { cn } from \"@/registry/utilities/cn\";\n\n\nconst BoxText = ({\n\tchildren,\n\tclassName,\n\ti,\n}: {\n\tchildren: React.ReactNode\n\tclassName?: string\n\ti: number\n}) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"w-full h-full uppercase text-white flex items-center justify-center p-0 text-2xl md:text-3xl font-bold\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t{children}\n\t</div>\n)\n\nfunction CSSBoxHoverDemo() {\n\tconst boxRefs = useRef<(CSSBoxRef | null)[]>([])\n\tconst isRotating = useRef<boolean[]>([])\n\tconst currentRotations = useRef<number[]>([])\n\n\tconst boxes = [\n\t\t{ text: \"January 15, 2025\", size: 300 },\n\t\t{ text: \"Live Q&A\", size: 200 },\n\t\t{ text: \"10:00\", size: 120 },\n\t\t{ text: \"to\", size: 70 },\n\t\t{ text: \"11:30\", size: 120 },\n\t\t{ text: \"CET\", size: 120 },\n\t\t{ text: \"Online\", size: 180 },\n\t\t{ text: \"Recording Available\", size: 380 },\n\t\t{ text: \"In English\", size: 220 },\n\t\t{ text: \"Register Now\", size: 280 },\n\t\t{ text: \"Free Access\", size: 240 },\n\t]\n\n\tuseEffect(() => {\n\t\tcurrentRotations.current = new Array(boxes.length).fill(0)\n\t}, [])\n\n\tconst handleHover = async (index: number) => {\n\t\tif (isRotating.current[index]) return\n\n\t\tisRotating.current[index] = true\n\t\tconst box = boxRefs.current[index]\n\t\tif (!box) return\n\n\t\tconst nextRotation = currentRotations.current[index] + 90\n\t\tcurrentRotations.current[index] = nextRotation\n\n\t\tbox.rotateTo(0, nextRotation)\n\n\t\tisRotating.current[index] = false\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-col items-center justify-center w-dvw h-dvh bg-[#111]\">\n\t\t\t{boxes.map(({ text, size }, index) => (\n\t\t\t\t<CSSBox\n\t\t\t\t\tkey={index}\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\tboxRefs.current[index] = el\n\t\t\t\t\t\t\tisRotating.current[index] = false\n\t\t\t\t\t\t\tcurrentRotations.current[index] = 0\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\twidth={size}\n\t\t\t\t\theight={35}\n\t\t\t\t\tdepth={size}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tclassName=\"hover:z-10\"\n\t\t\t\t\tonMouseEnter={() => handleHover(index)}\n\t\t\t\t\tfaces={{\n\t\t\t\t\t\tfront: <BoxText i={index}>{text}</BoxText>,\n\t\t\t\t\t\tback: (\n\t\t\t\t\t\t\t<BoxText i={index} className=\"\">\n\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t</BoxText>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tleft: <BoxText i={index}>{text}</BoxText>,\n\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t<BoxText i={index} className=\"\">\n\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t</BoxText>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\n\nexport default function Usage() {\n\tconst cubeRef = useRef<CSSBoxRef>(null);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<CSSBoxHoverDemo />\n\t\t\t<>\n\t\t\t\t<CSSBox\n\t\t\t\t\tref={cubeRef}\n\t\t\t\t\twidth={220}\n\t\t\t\t\theight={220}\n\t\t\t\t\tdepth={220}\n\t\t\t\t\tperspective={800}\n\t\t\t\t\tdraggable\n\t\t\t\t\tfaces={{\n\t\t\t\t\t\tfront: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Front\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tback: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\talt=\"Back\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tleft: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Left\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\talt=\"Right\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\ttop: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Top\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tbottom: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Bottom\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<Button onClick={() => cubeRef.current?.showTop()}>Show Top</Button>\n\t\t\t</>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/cssboxusage.tsx",
      "content": "\"use client\";\n\nimport React, { useRef, useEffect } from \"react\";\n\nimport Image from \"next/image\";\n\nimport CSSBox, { CSSBoxRef } from \"@/registry/open-source/css-box\";\n\nimport { Button } from \"../ui/button\";\nimport { cn } from \"@/registry/utilities/cn\";\n\n\nconst BoxText = ({\n\tchildren,\n\tclassName,\n\ti,\n}: {\n\tchildren: React.ReactNode\n\tclassName?: string\n\ti: number\n}) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"w-full h-full uppercase text-white flex items-center justify-center p-0 text-2xl md:text-3xl font-bold\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t{children}\n\t</div>\n)\n\nfunction CSSBoxHoverDemo() {\n\tconst boxRefs = useRef<(CSSBoxRef | null)[]>([])\n\tconst isRotating = useRef<boolean[]>([])\n\tconst currentRotations = useRef<number[]>([])\n\n\tconst boxes = [\n\t\t{ text: \"January 15, 2025\", size: 300 },\n\t\t{ text: \"Live Q&A\", size: 200 },\n\t\t{ text: \"10:00\", size: 120 },\n\t\t{ text: \"to\", size: 70 },\n\t\t{ text: \"11:30\", size: 120 },\n\t\t{ text: \"CET\", size: 120 },\n\t\t{ text: \"Online\", size: 180 },\n\t\t{ text: \"Recording Available\", size: 380 },\n\t\t{ text: \"In English\", size: 220 },\n\t\t{ text: \"Register Now\", size: 280 },\n\t\t{ text: \"Free Access\", size: 240 },\n\t]\n\n\tuseEffect(() => {\n\t\tcurrentRotations.current = new Array(boxes.length).fill(0)\n\t}, [])\n\n\tconst handleHover = async (index: number) => {\n\t\tif (isRotating.current[index]) return\n\n\t\tisRotating.current[index] = true\n\t\tconst box = boxRefs.current[index]\n\t\tif (!box) return\n\n\t\tconst nextRotation = currentRotations.current[index] + 90\n\t\tcurrentRotations.current[index] = nextRotation\n\n\t\tbox.rotateTo(0, nextRotation)\n\n\t\tisRotating.current[index] = false\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-col items-center justify-center w-dvw h-dvh bg-[#111]\">\n\t\t\t{boxes.map(({ text, size }, index) => (\n\t\t\t\t<CSSBox\n\t\t\t\t\tkey={index}\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\tboxRefs.current[index] = el\n\t\t\t\t\t\t\tisRotating.current[index] = false\n\t\t\t\t\t\t\tcurrentRotations.current[index] = 0\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\twidth={size}\n\t\t\t\t\theight={35}\n\t\t\t\t\tdepth={size}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tclassName=\"hover:z-10\"\n\t\t\t\t\tonMouseEnter={() => handleHover(index)}\n\t\t\t\t\tfaces={{\n\t\t\t\t\t\tfront: <BoxText i={index}>{text}</BoxText>,\n\t\t\t\t\t\tback: (\n\t\t\t\t\t\t\t<BoxText i={index} className=\"\">\n\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t</BoxText>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tleft: <BoxText i={index}>{text}</BoxText>,\n\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t<BoxText i={index} className=\"\">\n\t\t\t\t\t\t\t\t{text}\n\t\t\t\t\t\t\t</BoxText>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t)\n}\n\n\nexport default function Usage() {\n\tconst cubeRef = useRef<CSSBoxRef>(null);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<CSSBoxHoverDemo />\n\t\t\t<>\n\t\t\t\t<CSSBox\n\t\t\t\t\tref={cubeRef}\n\t\t\t\t\twidth={220}\n\t\t\t\t\theight={220}\n\t\t\t\t\tdepth={220}\n\t\t\t\t\tperspective={800}\n\t\t\t\t\tdraggable\n\t\t\t\t\tfaces={{\n\t\t\t\t\t\tfront: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Front\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tback: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\talt=\"Back\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tleft: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Left\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tright: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\talt=\"Right\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\ttop: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Top\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t\tbottom: (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\t\theight={100}\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\t\t\t\talt=\"Bottom\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<Button onClick={() => cubeRef.current?.showTop()}>Show Top</Button>\n\t\t\t</>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/css-box.tsx",
      "content": "\"use client\";\n\nimport {\n\tforwardRef,\n\tReactNode,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\n\ninterface FaceProps {\n\ttransform: string;\n\tclassName?: string;\n\tshowBackface?: boolean;\n\tchildren?: ReactNode;\n\tstyle?: React.CSSProperties;\n}\n\nconst CubeFace = ({\n\ttransform,\n\tclassName,\n\tshowBackface,\n\tchildren,\n\tstyle,\n}: FaceProps) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"absolute\",\n\t\t\tshowBackface ? \"backface-visible\" : \"backface-hidden\",\n\t\t\tclassName\n\t\t)}\n\t\tstyle={{ transform, ...style }}\n\t>\n\t\t{children}\n\t</div>\n);\n\ninterface CubeFaces {\n\tfront?: ReactNode;\n\tback?: ReactNode;\n\tright?: ReactNode;\n\tleft?: ReactNode;\n\ttop?: ReactNode;\n\tbottom?: ReactNode;\n}\n\nexport interface CSSBoxRef {\n\tshowFront: () => void;\n\tshowBack: () => void;\n\tshowLeft: () => void;\n\tshowRight: () => void;\n\tshowTop: () => void;\n\tshowBottom: () => void;\n\trotateTo: (x: number, y: number) => void;\n\tgetCurrentRotation: () => { x: number; y: number };\n}\n\ninterface CSSBoxProps extends React.HTMLProps<HTMLDivElement> {\n\twidth: number;\n\theight: number;\n\tdepth: number;\n\tclassName?: string;\n\tperspective?: number;\n\tstiffness?: number;\n\tdamping?: number;\n\tshowBackface?: boolean;\n\tfaces?: CubeFaces;\n\tdraggable?: boolean;\n}\n\nconst CSSBox = forwardRef<CSSBoxRef, CSSBoxProps>(\n\t(\n\t\t{\n\t\t\twidth,\n\t\t\theight,\n\t\t\tdepth,\n\t\t\tclassName,\n\t\t\tperspective = 600,\n\t\t\tstiffness = 100,\n\t\t\tdamping = 30,\n\t\t\tshowBackface = false,\n\t\t\tfaces = {},\n\t\t\tdraggable = true,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst isDragging = useRef(false);\n\t\tconst startPosition = useRef({ x: 0, y: 0 });\n\t\tconst startRotation = useRef({ x: 0, y: 0 });\n\n\t\tconst baseRotateX = useMotionValue(0);\n\t\tconst baseRotateY = useMotionValue(0);\n\n\t\tconst springRotateX = useSpring(baseRotateX, {\n\t\t\tstiffness,\n\t\t\tdamping,\n\t\t\t...(isDragging.current ? { stiffness: stiffness / 2 } : {}),\n\t\t});\n\t\tconst springRotateY = useSpring(baseRotateY, {\n\t\t\tstiffness,\n\t\t\tdamping,\n\t\t\t...(isDragging.current ? { stiffness: stiffness / 2 } : {}),\n\t\t});\n\n\t\tconst currentRotation = useRef({ x: 0, y: 0 });\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => ({\n\t\t\t\tshowFront: () => {\n\t\t\t\t\tbaseRotateX.set(0);\n\t\t\t\t\tbaseRotateY.set(0);\n\t\t\t\t},\n\t\t\t\tshowBack: () => {\n\t\t\t\t\tbaseRotateX.set(0);\n\t\t\t\t\tbaseRotateY.set(180);\n\t\t\t\t},\n\t\t\t\tshowLeft: () => {\n\t\t\t\t\tbaseRotateX.set(0);\n\t\t\t\t\tbaseRotateY.set(-90);\n\t\t\t\t},\n\t\t\t\tshowRight: () => {\n\t\t\t\t\tbaseRotateX.set(0);\n\t\t\t\t\tbaseRotateY.set(90);\n\t\t\t\t},\n\t\t\t\tshowTop: () => {\n\t\t\t\t\tbaseRotateX.set(-90);\n\t\t\t\t\tbaseRotateY.set(0);\n\t\t\t\t},\n\t\t\t\tshowBottom: () => {\n\t\t\t\t\tbaseRotateX.set(90);\n\t\t\t\t\tbaseRotateY.set(0);\n\t\t\t\t},\n\t\t\t\trotateTo: (x: number, y: number) => {\n\t\t\t\t\tbaseRotateX.set(x);\n\t\t\t\t\tbaseRotateY.set(y);\n\t\t\t\t},\n\n\t\t\t\tgetCurrentRotation: () => currentRotation.current,\n\t\t\t}),\n\t\t\t[]\n\t\t);\n\n\t\tconst transform = useTransform(\n\t\t\t[springRotateX, springRotateY],\n\t\t\t([x, y]) =>\n\t\t\t\t`translateZ(-${depth / 2}px) rotateX(${x}deg) rotateY(${y}deg)`\n\t\t);\n\t\tconst handleStart = useCallback(\n\t\t\t(e: React.MouseEvent | React.TouchEvent) => {\n\t\t\t\tif (!draggable) return;\n\t\t\t\tisDragging.current = true;\n\t\t\t\tconst point = \"touches\" in e ? e.touches[0] : e;\n\t\t\t\tstartPosition.current = { x: point.clientX, y: point.clientY };\n\t\t\t\tstartRotation.current = {\n\t\t\t\t\tx: baseRotateX.get(),\n\t\t\t\t\ty: baseRotateY.get(),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[draggable]\n\t\t);\n\n\t\tconst handleMove = useCallback((e: MouseEvent | TouchEvent) => {\n\t\t\tif (!isDragging.current) return;\n\t\t\tconst point = \"touches\" in e ? e.touches[0] : e;\n\t\t\tconst deltaX = point.clientX - startPosition.current.x;\n\t\t\tconst deltaY = point.clientY - startPosition.current.y;\n\t\t\tbaseRotateX.set(startRotation.current.x - deltaY / 2);\n\t\t\tbaseRotateY.set(startRotation.current.y + deltaX / 2);\n\t\t}, []);\n\n\t\tconst handleEnd = useCallback(() => {\n\t\t\tisDragging.current = false;\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (draggable) {\n\t\t\t\twindow.addEventListener(\"mousemove\", handleMove);\n\t\t\t\twindow.addEventListener(\"mouseup\", handleEnd);\n\t\t\t\twindow.addEventListener(\"touchmove\", handleMove);\n\t\t\t\twindow.addEventListener(\"touchend\", handleEnd);\n\t\t\t\treturn () => {\n\t\t\t\t\twindow.removeEventListener(\"mousemove\", handleMove);\n\t\t\t\t\twindow.removeEventListener(\"mouseup\", handleEnd);\n\t\t\t\t\twindow.removeEventListener(\"touchmove\", handleMove);\n\t\t\t\t\twindow.removeEventListener(\"touchend\", handleEnd);\n\t\t\t\t};\n\t\t\t}\n\t\t}, [draggable, handleMove, handleEnd]);\n\n\t\tuseEffect(() => {\n\t\t\tconst unsubscribeX = baseRotateX.on(\"change\", (v) => {\n\t\t\t\tcurrentRotation.current.x = v;\n\t\t\t});\n\t\t\tconst unsubscribeY = baseRotateY.on(\"change\", (v) => {\n\t\t\t\tcurrentRotation.current.y = v;\n\t\t\t});\n\t\t\treturn () => {\n\t\t\t\tunsubscribeX();\n\t\t\t\tunsubscribeY();\n\t\t\t};\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(draggable && \"cursor-move\", className)}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t\tperspective: `${perspective}px`,\n\t\t\t\t}}\n\t\t\t\tonMouseDown={handleStart}\n\t\t\t\tonTouchStart={handleStart}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"relative w-full h-full transform-3d\"\n\t\t\t\t\tstyle={{ transform }}\n\t\t\t\t>\n\t\t\t\t\t{/* Front and Back */}\n\t\t\t\t\t<CubeFace\n\t\t\t\t\t\ttransform={`rotateY(0deg) translateZ(${depth / 2}px)`}\n\t\t\t\t\t\tstyle={{ width, height }}\n\t\t\t\t\t\tshowBackface={showBackface}\n\t\t\t\t\t>\n\t\t\t\t\t\t{faces.front}\n\t\t\t\t\t</CubeFace>\n\n\t\t\t\t\t<CubeFace\n\t\t\t\t\t\ttransform={`rotateY(180deg) translateZ(${depth / 2}px)`}\n\t\t\t\t\t\tstyle={{ width, height }}\n\t\t\t\t\t\tshowBackface={showBackface}\n\t\t\t\t\t>\n\t\t\t\t\t\t{faces.back}\n\t\t\t\t\t</CubeFace>\n\n\t\t\t\t\t{/* Right and Left */}\n\t\t\t\t\t<CubeFace\n\t\t\t\t\t\ttransform={`rotateY(90deg) translateZ(${width / 2}px)`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: depth,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\tleft: (width - depth) / 2,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tshowBackface={showBackface}\n\t\t\t\t\t>\n\t\t\t\t\t\t{faces.right}\n\t\t\t\t\t</CubeFace>\n\n\t\t\t\t\t<CubeFace\n\t\t\t\t\t\ttransform={`rotateY(-90deg) translateZ(${width / 2}px)`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: depth,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\tleft: (width - depth) / 2,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tshowBackface={showBackface}\n\t\t\t\t\t>\n\t\t\t\t\t\t{faces.left}\n\t\t\t\t\t</CubeFace>\n\n\t\t\t\t\t{/* Top and Bottom */}\n\t\t\t\t\t<CubeFace\n\t\t\t\t\t\ttransform={`rotateX(90deg) translateZ(${height / 2}px)`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\theight: depth,\n\t\t\t\t\t\t\ttop: (height - depth) / 2,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tshowBackface={showBackface}\n\t\t\t\t\t>\n\t\t\t\t\t\t{faces.top}\n\t\t\t\t\t</CubeFace>\n\n\t\t\t\t\t<CubeFace\n\t\t\t\t\t\ttransform={`rotateX(-90deg) translateZ(${height / 2}px)`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\theight: depth,\n\t\t\t\t\t\t\ttop: (height - depth) / 2,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tshowBackface={showBackface}\n\t\t\t\t\t>\n\t\t\t\t\t\t{faces.bottom}\n\t\t\t\t\t</CubeFace>\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nCSSBox.displayName = \"CSSBox\";\n\nexport default CSSBox;\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    }
  ]
}