{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inflected-card",
  "type": "registry:block",
  "title": "Inflected card",
  "description": "Inflected card",
  "files": [
    {
      "path": "components/usages/inflectedcardusage.tsx",
      "content": "// Path to the \"InflectedCard.tsx\" file\nimport InflectedCard from '@/registry/open-source/inflected-card';\nimport { IconCornerRightUp, IconFold } from '@tabler/icons-react';\n\nexport default function InflectedCardUsage() {\n    <div className=\"bg-[#050505] min-h-[300px] flex flex-wrap gap-8 items-center justify-center relative\">\n        <InflectedCard\n            id=\"0\"\n            image=\"/itjustworks.jpg\"\n            title=\"iPhone 15 Pro\"\n            description=\"Titanium smartphone with an advanced camera system, offering stunning photography capabilities and a sleek design.\"\n            tags={[\n                { name: \"Brand new\", textColor: \"#f7f7ff\", backgroundColor: \"#9F4EFF\", rounding: 5 },\n                { name: \"10% off\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 5 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={15}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"0.84rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconCornerRightUp />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#9F4EFF\"\n            buttonBackgroundHoverColor=\"#a960ff\"\n            maxWidth=\"500px\"\n            imageHoverZoom={1.1}\n            price=\"$1,079\"\n            priceTagTextColor=\"#f7f7ff\"\n            oldPrice=\"$1,199\"\n            priceTagRounding=\"25px\"\n        />\n\n        <InflectedCard\n            id=\"1\"\n            image=\"/itjustworks.jpg\"\n            title=\"Samsung Galaxy Flip 6\"\n            description=\"Innovative foldable smartphone with a sleek design that enhances portability while providing a large display for immersive viewing experiences and multitasking.\"\n            tags={[\n                { name: \"Pre-owned\", textColor: \"#f7f7ff\", backgroundColor: \"#00A6FB\", rounding: 0 },\n                { name: \"50% off\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 0 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={15}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"1.12rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconFold />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#00A6FB\"\n            buttonBackgroundHoverColor=\"#0582CA\"\n            maxWidth=\"500px\"\n            imageHoverZoom={1.1}\n            price=\"$499\"\n            priceTagTextColor=\"#050505\"\n            oldPrice=\"$991\"\n            oldPriceTextColor=\"#565656\"\n            priceTagRounding=\"6px\"\n            priceTagBackgroundColor='rgba(255,255,255,0.78)'\n        />\n\n        <InflectedCard\n            id=\"2\"\n            image=\"/itjustworks.jpg\"\n            title=\"iPhone 7\"\n            description=\"Classic iPhone model with 12MP camera and water resistance, offering reliable performance and essential features for everyday smartphone users.\"\n            tags={[\n                { name: \"Refurbished\", textColor: \"#f7f7ff\", backgroundColor: \"#FF3900\", rounding: 5 },\n                { name: \"20% off\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 5 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={14}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"1.12rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconCornerRightUp />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#FF3900\"\n            buttonBackgroundHoverColor=\"#FF5733\"\n            maxWidth=\"392px\"\n            imageHoverZoom={1.35}\n            price=\"$159\"\n            priceTagRounding=\"25px\"\n            priceTagBackgroundColor='#FF3900'\n        />\n\n        <InflectedCard\n            id=\"3\"\n            image=\"/itjustworks.jpg\"\n            title=\"iPhone X\"\n            description=\"סמארטפון אייקוני עם תצוגת Super Retina בגודל 5.8 אינץ', טכנולוגיית Face ID מתקדמת, מצלמות כפולות של 12MP ועיצוב חדשני שמהפכני בצילום הסלולרי.\"\n            tags={[\n                { name: \"40% הנחה\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 15 },\n                { name: \"משומש\", textColor: \"#f7f7ff\", backgroundColor: \"#00A6FB\", rounding: 15 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={36}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"1.12rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconCornerRightUp />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#00A6FB\"\n            buttonBackgroundHoverColor=\"#0582CA\"\n            maxWidth=\"330px\"\n            imageHoverZoom={1.61}\n            price=\"₪599\"\n            priceTagTextColor=\"#f7f7ff\"\n            oldPrice=\"₪991\"\n            oldPriceOnTheRight={true}\n            priceTagRounding=\"25px\"\n            mirrored={true}\n            tagsAlignment=\"right\"\n            titleAlignment=\"center\"\n            descriptionAlignment=\"right\"\n        />\n    </div>\n}\n\n// Note: The InflectedCard component accepts the following props:\n// - id: string (required) - Unique identifier for the card.\n// - image: string (required) - Source URL for the card image.\n// - title: string (required) - Title or name of the product.\n// - description: string (required) - Detailed description of the product.\n// - tags: Tag[] (required) - Array of tag objects for the product.\n// - parentBackgroundColor: string (required) - Background color of the parent container.\n// - onClick: (hoverTarget: string, id: string) => void (optional) - Callback function for click events.\n// - onHover: (hoverTarget: string, id: string) => void (optional) - Callback function for hover events.\n// - cardRounding: number (optional) - Border radius of the card (default: 20).\n// - fontSizes: object (optional) - Font sizes for title, description, tags, and price.\n// - margins: object (optional) - Margin settings for title, description, and tags.\n// - buttonIcon: React.ReactElement (required) - Icon element for the button.\n// - buttonIconSize: number (optional) - Size of the button icon (default: 24).\n// - buttonIconColor: string (optional) - Color of the button icon (default: '#fff').\n// - buttonIconHoverColor: string (optional) - Color of the button icon on hover (default: '#fff').\n// - buttonBackgroundColor: string (optional) - Background color of the button (default: '#282828').\n// - buttonBackgroundHoverColor: string (optional) - Background color of the button on hover (default: '#484848').\n// - imageHoverZoom: number (optional) - Zoom factor for the image on hover (default: 1.1).\n// - titleColor: string (optional) - Color of the title text (default: '#f7f7ff').\n// - descriptionColor: string (optional) - Color of the description text (default: '#c7c7cf').\n// - mirrored: boolean (optional) - Flag to mirror the card layout (default: false).\n// - titleAlignment: 'left' | 'center' | 'right' (optional) - Alignment of the title (default: 'left').\n// - descriptionAlignment: 'left' | 'center' | 'right' (optional) - Alignment of the description (default: 'left').\n// - tagsAlignment: 'left' | 'center' | 'right' (optional) - Alignment of the tags (default: 'left').\n// - maxWidth: string (optional) - Maximum width of the card (default: '100%').\n// - price: string (optional) - Price of the product.\n// - priceTagTextColor: string (optional) - Text color of the price tag (default: '#ffffff').\n// - oldPrice: string (optional) - Old price of the product (if applicable).\n// - oldPriceOnTheRight: boolean (optional) - Flag to position old price on the right (default: false).\n// - oldPriceTextColor: string (optional) - Text color of the old price (default: '#c1c1c7').\n// - priceTagRounding: string (optional) - Border radius of the price tag (default: '5px').\n// - priceTagBackgroundColor: string (optional) - Background color of the price tag (default: 'rgba(0,0,0,0.7)').",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/inflectedcardusage.tsx",
      "content": "// Path to the \"InflectedCard.tsx\" file\nimport InflectedCard from '@/registry/open-source/inflected-card';\nimport { IconCornerRightUp, IconFold } from '@tabler/icons-react';\n\nexport default function InflectedCardUsage() {\n    <div className=\"bg-[#050505] min-h-[300px] flex flex-wrap gap-8 items-center justify-center relative\">\n        <InflectedCard\n            id=\"0\"\n            image=\"/itjustworks.jpg\"\n            title=\"iPhone 15 Pro\"\n            description=\"Titanium smartphone with an advanced camera system, offering stunning photography capabilities and a sleek design.\"\n            tags={[\n                { name: \"Brand new\", textColor: \"#f7f7ff\", backgroundColor: \"#9F4EFF\", rounding: 5 },\n                { name: \"10% off\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 5 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={15}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"0.84rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconCornerRightUp />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#9F4EFF\"\n            buttonBackgroundHoverColor=\"#a960ff\"\n            maxWidth=\"500px\"\n            imageHoverZoom={1.1}\n            price=\"$1,079\"\n            priceTagTextColor=\"#f7f7ff\"\n            oldPrice=\"$1,199\"\n            priceTagRounding=\"25px\"\n        />\n\n        <InflectedCard\n            id=\"1\"\n            image=\"/itjustworks.jpg\"\n            title=\"Samsung Galaxy Flip 6\"\n            description=\"Innovative foldable smartphone with a sleek design that enhances portability while providing a large display for immersive viewing experiences and multitasking.\"\n            tags={[\n                { name: \"Pre-owned\", textColor: \"#f7f7ff\", backgroundColor: \"#00A6FB\", rounding: 0 },\n                { name: \"50% off\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 0 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={15}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"1.12rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconFold />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#00A6FB\"\n            buttonBackgroundHoverColor=\"#0582CA\"\n            maxWidth=\"500px\"\n            imageHoverZoom={1.1}\n            price=\"$499\"\n            priceTagTextColor=\"#050505\"\n            oldPrice=\"$991\"\n            oldPriceTextColor=\"#565656\"\n            priceTagRounding=\"6px\"\n            priceTagBackgroundColor='rgba(255,255,255,0.78)'\n        />\n\n        <InflectedCard\n            id=\"2\"\n            image=\"/itjustworks.jpg\"\n            title=\"iPhone 7\"\n            description=\"Classic iPhone model with 12MP camera and water resistance, offering reliable performance and essential features for everyday smartphone users.\"\n            tags={[\n                { name: \"Refurbished\", textColor: \"#f7f7ff\", backgroundColor: \"#FF3900\", rounding: 5 },\n                { name: \"20% off\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 5 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={14}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"1.12rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconCornerRightUp />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#FF3900\"\n            buttonBackgroundHoverColor=\"#FF5733\"\n            maxWidth=\"392px\"\n            imageHoverZoom={1.35}\n            price=\"$159\"\n            priceTagRounding=\"25px\"\n            priceTagBackgroundColor='#FF3900'\n        />\n\n        <InflectedCard\n            id=\"3\"\n            image=\"/itjustworks.jpg\"\n            title=\"iPhone X\"\n            description=\"סמארטפון אייקוני עם תצוגת Super Retina בגודל 5.8 אינץ', טכנולוגיית Face ID מתקדמת, מצלמות כפולות של 12MP ועיצוב חדשני שמהפכני בצילום הסלולרי.\"\n            tags={[\n                { name: \"40% הנחה\", textColor: \"#242424\", backgroundColor: \"#f1f1f7\", rounding: 15 },\n                { name: \"משומש\", textColor: \"#f7f7ff\", backgroundColor: \"#00A6FB\", rounding: 15 },\n            ]}\n            parentBackgroundColor=\"#050505\"\n            cardRounding={36}\n            fontSizes={{\n                title: \"1.8rem\",\n                description: \"1rem\",\n                tags: \"0.85rem\",\n                price: \"1.12rem\",\n            }}\n            margins={{\n                title: \"0 0 7px 0\",\n                description: \"0 0 18px 0\",\n                tags: \"10px 0 0 0\",\n            }}\n            buttonIcon={<IconCornerRightUp />}\n            buttonIconSize={32}\n            buttonIconColor=\"#ffffff\"\n            buttonIconHoverColor=\"#EEEEEE\"\n            buttonBackgroundColor=\"#00A6FB\"\n            buttonBackgroundHoverColor=\"#0582CA\"\n            maxWidth=\"330px\"\n            imageHoverZoom={1.61}\n            price=\"₪599\"\n            priceTagTextColor=\"#f7f7ff\"\n            oldPrice=\"₪991\"\n            oldPriceOnTheRight={true}\n            priceTagRounding=\"25px\"\n            mirrored={true}\n            tagsAlignment=\"right\"\n            titleAlignment=\"center\"\n            descriptionAlignment=\"right\"\n        />\n    </div>\n}\n\n// Note: The InflectedCard component accepts the following props:\n// - id: string (required) - Unique identifier for the card.\n// - image: string (required) - Source URL for the card image.\n// - title: string (required) - Title or name of the product.\n// - description: string (required) - Detailed description of the product.\n// - tags: Tag[] (required) - Array of tag objects for the product.\n// - parentBackgroundColor: string (required) - Background color of the parent container.\n// - onClick: (hoverTarget: string, id: string) => void (optional) - Callback function for click events.\n// - onHover: (hoverTarget: string, id: string) => void (optional) - Callback function for hover events.\n// - cardRounding: number (optional) - Border radius of the card (default: 20).\n// - fontSizes: object (optional) - Font sizes for title, description, tags, and price.\n// - margins: object (optional) - Margin settings for title, description, and tags.\n// - buttonIcon: React.ReactElement (required) - Icon element for the button.\n// - buttonIconSize: number (optional) - Size of the button icon (default: 24).\n// - buttonIconColor: string (optional) - Color of the button icon (default: '#fff').\n// - buttonIconHoverColor: string (optional) - Color of the button icon on hover (default: '#fff').\n// - buttonBackgroundColor: string (optional) - Background color of the button (default: '#282828').\n// - buttonBackgroundHoverColor: string (optional) - Background color of the button on hover (default: '#484848').\n// - imageHoverZoom: number (optional) - Zoom factor for the image on hover (default: 1.1).\n// - titleColor: string (optional) - Color of the title text (default: '#f7f7ff').\n// - descriptionColor: string (optional) - Color of the description text (default: '#c7c7cf').\n// - mirrored: boolean (optional) - Flag to mirror the card layout (default: false).\n// - titleAlignment: 'left' | 'center' | 'right' (optional) - Alignment of the title (default: 'left').\n// - descriptionAlignment: 'left' | 'center' | 'right' (optional) - Alignment of the description (default: 'left').\n// - tagsAlignment: 'left' | 'center' | 'right' (optional) - Alignment of the tags (default: 'left').\n// - maxWidth: string (optional) - Maximum width of the card (default: '100%').\n// - price: string (optional) - Price of the product.\n// - priceTagTextColor: string (optional) - Text color of the price tag (default: '#ffffff').\n// - oldPrice: string (optional) - Old price of the product (if applicable).\n// - oldPriceOnTheRight: boolean (optional) - Flag to position old price on the right (default: false).\n// - oldPriceTextColor: string (optional) - Text color of the old price (default: '#c1c1c7').\n// - priceTagRounding: string (optional) - Border radius of the price tag (default: '5px').\n// - priceTagBackgroundColor: string (optional) - Background color of the price tag (default: 'rgba(0,0,0,0.7)').",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/inflected-card.tsx",
      "content": "\"use client\"\nimport React, { useState } from 'react';\nimport Image from 'next/image';\nimport styles from './inflected-card.module.css';\n\n// Credit:\n// https://namer-ui.netlify.app/components\n\n// NECESSARY CSS\n/*\n.card {\n    position: relative;\n    border-radius: var(--card-rounding);\n    overflow: hidden;\n    transition: all 0.3s ease;\n  }\n\n  .cardInner {\n    position: relative;\n    width: 100%;\n    height: 18.75rem;\n    background: var(--parent-bg);\n    border-radius: var(--card-rounding);\n    border-bottom-right-radius: 0;\n    overflow: hidden;\n  }\n  \n  .box {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    position: relative;\n  }\n  \n  .imgBox {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n  \n  .imgBox img {\n    transition: transform 0.3s ease;\n  }\n  \n  .imgBox img.hovered {\n    transform: scale(var(--image-hover-zoom, 1.1));\n  }  \n  \n  .icon {\n    position: absolute;\n    bottom: -0.375rem;\n    right: -0.375rem;\n    width: 6rem;\n    height: 6rem;\n    background: var(--parent-bg);\n    border-top-left-radius: 50%;\n    transition: all 0.3s ease;\n  }\n  \n  .icon:hover .iconBox {\n    transform: scale(1.1);\n    cursor: pointer;\n  }\n  \n  .icon::before {\n    position: absolute;\n    content: \"\";\n    bottom: 0.375rem;\n    left: -1.25rem;\n    background: transparent;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-bottom-right-radius: 1.25rem;\n    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--parent-bg);\n  }\n  \n  .icon::after {\n    position: absolute;\n    content: \"\";\n    top: -1.25rem;\n    right: 0.375rem;\n    background: transparent;\n    width: 1.25rem;\n    height: 1.25rem;\n    border-bottom-right-radius: 1.25rem;\n    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--parent-bg);\n  }\n  \n  .iconBox {\n    position: absolute;\n    inset: 0.625rem;\n    background: var(--button-bg);\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    transition: all 0.3s ease;\n  }\n  \n  .iconBox:hover {\n    background: var(--button-hover-bg);\n  }\n  \n  .iconBox span {\n    color: var(--icon-color);\n    font-size: var(--icon-size);\n    transition: color 0.3s ease;\n  }\n  \n  .iconBox:hover span {\n    color: var(--icon-hover-color);\n  }\n  \n  .content {\n    padding: 0.938rem 0.625rem;\n  }\n  \n  .content h3 {\n    transition: color 0.3s ease;\n  }\n  \n  .content p {\n    transition: color 0.3s ease;\n  }\n  \n  .content ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 0.625rem;\n  }\n  \n  .content ul li {\n    background: var(--tag-bg);\n    color: var(--tag-color);\n    font-weight: 700;\n    padding: 0.375rem 0.625rem;\n    border-radius: var(--tag-rounding);\n    transition: all 0.3s ease;\n  }\n  \n  .content ul li:hover {\n    opacity: 0.8;\n  }\n*/\n\ninterface Tag {\n    name: string;\n    textColor: string;\n    backgroundColor: string;\n    rounding?: number;\n    alignment?: 'left' | 'center' | 'right';\n}\n\ninterface InflectedCardProps {\n    id: string;\n    image: string;\n    title: string;\n    description: string;\n    tags: Tag[];\n    parentBackgroundColor: string;\n    onClick?: (hoverTarget: string, id: string) => void;\n    onHover?: (hoverTarget: string, id: string) => void;\n    cardRounding?: number;\n    fontSizes?: {\n        title?: string;\n        description?: string;\n        tags?: string;\n        price?: string;\n    };\n    margins?: {\n        title?: string;\n        description?: string;\n        tags?: string;\n    };\n    buttonIcon: React.ReactElement;\n    buttonIconSize?: number;\n    buttonIconColor?: string;\n    buttonIconHoverColor?: string;\n    buttonBackgroundColor?: string;\n    buttonBackgroundHoverColor?: string;\n    imageHoverZoom?: number;\n    titleColor?: string;\n    descriptionColor?: string;\n    mirrored?: boolean;\n    titleAlignment?: 'left' | 'center' | 'right';\n    descriptionAlignment?: 'left' | 'center' | 'right';\n    tagsAlignment?: 'left' | 'center' | 'right';\n    maxWidth?: string;\n    price?: string;\n    priceTagTextColor?: string;\n    oldPrice?: string;\n    oldPriceOnTheRight?: boolean;\n    oldPriceTextColor?: string;\n    priceTagRounding?: string;\n    priceTagBackgroundColor?: string;\n}\n\nconst InflectedCard: React.FC<InflectedCardProps> = ({\n    id,\n    image,\n    title,\n    description,\n    tags,\n    parentBackgroundColor,\n    onClick,\n    onHover,\n    cardRounding = 20,\n    fontSizes = {},\n    margins = {},\n    buttonIcon,\n    buttonIconSize = 24,\n    buttonIconColor = '#fff',\n    buttonIconHoverColor = '#fff',\n    buttonBackgroundColor = '#282828',\n    buttonBackgroundHoverColor = '#484848',\n    imageHoverZoom = 1.1,\n    titleColor = '#f7f7ff',\n    descriptionColor = '#c7c7cf',\n    mirrored = false,\n    titleAlignment = 'left',\n    descriptionAlignment = 'left',\n    tagsAlignment = 'left',\n    maxWidth = '100%',\n    price,\n    priceTagTextColor = '#ffffff',\n    oldPrice,\n    oldPriceOnTheRight = false,\n    oldPriceTextColor = '#c1c1c7',\n    priceTagRounding = '5px',\n    priceTagBackgroundColor = 'rgba(0,0,0,0.7)',\n}) => {\n    const [hoveredElement, setHoveredElement] = useState<string | null>(null);\n    const [isButtonHovered, setIsButtonHovered] = useState(false);\n    const [isCardHovered, setIsCardHovered] = useState(false);\n\n    const handleCardMouseEnter = () => {\n        setIsCardHovered(true);\n        onHover && onHover('card', id);\n    };\n\n    const handleCardMouseLeave = () => {\n        setIsCardHovered(false);\n    };\n\n    const handleMouseEnter = (element: string) => {\n        setHoveredElement(element);\n        onHover && onHover(element, id);\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        onClick && onClick(hoveredElement || 'card', id);\n    };\n\n    const handleButtonMouseEnter = () => {\n        setIsButtonHovered(true);\n        handleMouseEnter('button');\n    };\n\n    const handleButtonMouseLeave = () => {\n        setIsButtonHovered(false);\n    };\n\n    const isRTLCheck = (text: string): boolean => {\n        return /[\\u0590-\\u05FF\\u0600-\\u06FF\\u0700-\\u074F]/.test(text); // Hebrew, Arabic, and Persian ranges in Unicode\n    };\n\n    const mirroredStyle: React.CSSProperties = mirrored ? { transform: 'scaleX(-1)' } : {};\n    const reverseMirrorStyle: React.CSSProperties = mirrored ? { transform: 'scaleX(-1)' } : {};\n\n    return (\n        <div\n            className={styles.card}\n            style={{\n                '--card-rounding': `${cardRounding}px`,\n                maxWidth: maxWidth,\n                ...mirroredStyle\n            } as React.CSSProperties}\n            onMouseEnter={handleCardMouseEnter}\n            onMouseLeave={handleCardMouseLeave}\n            onClick={handleClick}\n        >\n            <div\n                className={styles.cardInner}\n                style={{ '--parent-bg': parentBackgroundColor } as React.CSSProperties}\n            >\n                <div className={styles.box}>\n                    <div\n                        className={styles.imgBox}\n                        style={{\n                            '--image-hover-zoom': imageHoverZoom,\n                            ...reverseMirrorStyle\n                        } as React.CSSProperties}\n                    >\n                        <Image\n                            src={image}\n                            alt={title}\n                            layout=\"fill\"\n                            objectFit=\"cover\"\n                            className={isCardHovered ? styles.hovered : ''}\n                        />\n                        {price && (\n                            <div className={styles.priceTag}\n                                style={{\n                                    position: 'absolute',\n                                    top: '12px',\n                                    [mirrored ? 'right' : 'left']: '12px',\n                                    backgroundColor: priceTagBackgroundColor,\n                                    color: priceTagTextColor,\n                                    padding: '9px 15px',\n                                    borderRadius: priceTagRounding,\n                                    fontSize: fontSizes.price || '1rem',\n                                }}\n                                onMouseEnter={() => handleMouseEnter('priceTag')}\n                                onClick={(event) => {\n                                    event.stopPropagation();\n                                    onClick && onClick('priceTag', id);\n                                }}\n                            >\n                                {oldPriceOnTheRight ? (\n                                    <>\n                                        <span className={styles['new-price']} style={{ fontWeight: 'bold' }}>{price}</span>\n                                        {oldPrice && <span className={styles['old-price']} style={{ marginLeft: '8px', textDecoration: 'line-through', opacity: 0.7, fontWeight: 'bold', color: oldPriceTextColor }}>{oldPrice}</span>}\n                                    </>\n                                ) : (\n                                    <>\n                                        {oldPrice && <span className={styles['old-price']} style={{ textDecoration: 'line-through', opacity: 0.7, marginRight: '8px', fontWeight: 'bold', color: oldPriceTextColor }}>{oldPrice}</span>}\n                                        <span className={styles['new-price']} style={{ fontWeight: 'bold' }}>{price}</span>\n                                    </>\n                                )}\n                            </div>\n                        )}\n                    </div>\n                    <div\n                        className={styles.icon}\n                        onMouseEnter={handleButtonMouseEnter}\n                        onMouseLeave={handleButtonMouseLeave}\n                    >\n                        <a className={styles.iconBox}\n                            style={{\n                                '--button-bg': buttonBackgroundColor,\n                                '--button-hover-bg': buttonBackgroundHoverColor,\n                                '--icon-color': buttonIconColor,\n                                '--icon-hover-color': buttonIconHoverColor,\n                                '--icon-size': `${buttonIconSize}px`,\n                            } as React.CSSProperties}\n                        >\n                            {React.cloneElement(buttonIcon, {\n                                size: buttonIconSize,\n                                color: isButtonHovered ? buttonIconHoverColor : buttonIconColor\n                            })}\n                        </a>\n                    </div>\n                </div>\n            </div>\n            <div className={styles.content}>\n                <h3\n                    style={{\n                        fontSize: fontSizes.title,\n                        color: titleColor,\n                        margin: margins.title,\n                        fontWeight: 'bold',\n                        direction: isRTLCheck(title) ? 'rtl' : 'ltr',\n                        textAlign: titleAlignment,\n                        ...reverseMirrorStyle\n                    }}\n                    onMouseEnter={() => handleMouseEnter('title')}\n                >\n                    {title}\n                </h3>\n                <p\n                    style={{\n                        fontSize: fontSizes.description,\n                        color: descriptionColor,\n                        margin: margins.description,\n                        direction: isRTLCheck(description) ? 'rtl' : 'ltr',\n                        textAlign: descriptionAlignment,\n                        ...reverseMirrorStyle\n                    }}\n                    onMouseEnter={() => handleMouseEnter('description')}\n                >\n                    {description}\n                </p>\n                <ul style={{\n                    margin: margins.tags,\n                    display: 'flex',\n                    justifyContent: tagsAlignment,\n                    flexWrap: 'wrap',\n                    gap: '0.625rem',\n                    ...reverseMirrorStyle\n                }}>\n                    {tags.map((tag, index) => (\n                        <li\n                            key={index}\n                            style={{\n                                '--tag-bg': tag.backgroundColor,\n                                '--tag-color': tag.textColor,\n                                '--tag-rounding': `${tag.rounding}px`,\n                                fontSize: fontSizes.tags,\n                                direction: isRTLCheck(tag.name) ? 'rtl' : 'ltr',\n                                textAlign: tag.alignment || 'left',\n                                display: 'inline-block',\n                            } as React.CSSProperties}\n                            onMouseEnter={() => handleMouseEnter(`tag-${tag.name}`)}\n                        >\n                            {tag.name}\n                        </li>\n                    ))}\n                </ul>\n            </div>\n        </div>\n    );\n};\n\nexport default InflectedCard;",
      "type": "registry:ui"
    }
  ]
}