commerce-toolkit 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/category-card-link-BqMAG9Op.js +211 -0
- package/dist/category-card-link-BqMAG9Op.js.map +1 -0
- package/dist/category-card-link-BwSFHFcd.cjs +2 -0
- package/dist/category-card-link-BwSFHFcd.cjs.map +1 -0
- package/dist/category-card.cjs +1 -1
- package/dist/category-card.cjs.map +1 -1
- package/dist/category-card.js +23 -218
- package/dist/category-card.js.map +1 -1
- package/dist/checkbox-indicator-GNoyS6OL.cjs +2 -0
- package/dist/checkbox-indicator-GNoyS6OL.cjs.map +1 -0
- package/dist/checkbox-indicator-os50dewx.js +18 -0
- package/dist/checkbox-indicator-os50dewx.js.map +1 -0
- package/dist/{checkbox-indicator-Cfw9uH_b.js → checkbox-root-B9W2Y8rY.js} +74 -85
- package/dist/checkbox-root-B9W2Y8rY.js.map +1 -0
- package/dist/checkbox-root-g9HcYZCP.cjs +2 -0
- package/dist/checkbox-root-g9HcYZCP.cjs.map +1 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +5 -4
- package/dist/checkbox.js.map +1 -1
- package/dist/compare-card-specs-empty-BMLUSqQL.js +281 -0
- package/dist/compare-card-specs-empty-BMLUSqQL.js.map +1 -0
- package/dist/compare-card-specs-empty-ar5CneZv.cjs +2 -0
- package/dist/compare-card-specs-empty-ar5CneZv.cjs.map +1 -0
- package/dist/compare-card.cjs +2 -0
- package/dist/compare-card.cjs.map +1 -0
- package/dist/compare-card.js +65 -0
- package/dist/compare-card.js.map +1 -0
- package/dist/components/accordion/index.d.ts.map +1 -1
- package/dist/components/alert/index.d.ts.map +1 -1
- package/dist/components/banner/index.d.ts.map +1 -1
- package/dist/components/blog-post-card/index.d.ts.map +1 -1
- package/dist/components/card/index.d.ts.map +1 -1
- package/dist/components/carousel/index.d.ts.map +1 -1
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/chip/index.d.ts.map +1 -1
- package/dist/components/compare-card/compare-card.d.ts +45 -0
- package/dist/components/compare-card/compare-card.d.ts.map +1 -0
- package/dist/components/compare-card/index.d.ts +3 -0
- package/dist/components/compare-card/index.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-description-content.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-description-content.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-description-empty.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-description-empty.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-description-label.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-description-label.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-description.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-description.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-form-input.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-form-input.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-form.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-form.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-link.d.ts +5 -0
- package/dist/components/compare-card/primitives/compare-card-link.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-product.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-product.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-rating-empty.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-rating-empty.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-rating-label.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-rating-label.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-rating.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-rating.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-root.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-root.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-skeleton.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-skeleton.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-specs-definition.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-specs-definition.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-specs-empty.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-specs-empty.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-specs-label.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-specs-label.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-specs-list.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-specs-list.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-specs-term.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-specs-term.d.ts.map +1 -0
- package/dist/components/compare-card/primitives/compare-card-specs.d.ts +4 -0
- package/dist/components/compare-card/primitives/compare-card-specs.d.ts.map +1 -0
- package/dist/components/compare-card/primitives.d.ts +20 -0
- package/dist/components/compare-card/primitives.d.ts.map +1 -0
- package/dist/components/compare-drawer/index.d.ts.map +1 -1
- package/dist/components/cursor-pagination/index.d.ts +1 -1
- package/dist/components/cursor-pagination/index.d.ts.map +1 -1
- package/dist/components/dropdown-menu/index.d.ts.map +1 -1
- package/dist/components/favorite/index.d.ts.map +1 -1
- package/dist/components/icon/index.d.ts.map +1 -1
- package/dist/components/label/index.d.ts.map +1 -1
- package/dist/components/logo/index.d.ts.map +1 -1
- package/dist/components/modal/index.d.ts.map +1 -1
- package/dist/components/offset-pagination/index.d.ts +1 -1
- package/dist/components/offset-pagination/index.d.ts.map +1 -1
- package/dist/components/price/index.d.ts.map +1 -1
- package/dist/components/product-card/index.d.ts.map +1 -1
- package/dist/components/rating/index.d.ts.map +1 -1
- package/dist/components/reveal/index.d.ts.map +1 -1
- package/dist/components/scroll-area/index.d.ts.map +1 -1
- package/dist/components/skeleton/index.d.ts.map +1 -1
- package/dist/components/tabs/index.d.ts.map +1 -1
- package/dist/index.cjs +10 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +26 -19
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1274 -1132
- package/dist/index.js.map +1 -1
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/offset-pagination-ellipsis-DWDhFCgW.js +79 -0
- package/dist/offset-pagination-ellipsis-DWDhFCgW.js.map +1 -0
- package/dist/offset-pagination-ellipsis-MCFHXB-5.cjs +2 -0
- package/dist/offset-pagination-ellipsis-MCFHXB-5.cjs.map +1 -0
- package/dist/offset-pagination.cjs +1 -1
- package/dist/offset-pagination.cjs.map +1 -1
- package/dist/offset-pagination.js +6 -76
- package/dist/offset-pagination.js.map +1 -1
- package/dist/product-card-label-CJmC9ICf.js +312 -0
- package/dist/product-card-label-CJmC9ICf.js.map +1 -0
- package/dist/product-card-label-D43AXtRL.cjs +2 -0
- package/dist/product-card-label-D43AXtRL.cjs.map +1 -0
- package/dist/product-card-root-4Xz4-pdL.js +43 -0
- package/dist/product-card-root-4Xz4-pdL.js.map +1 -0
- package/dist/product-card-root-BMTVhhFp.cjs +2 -0
- package/dist/product-card-root-BMTVhhFp.cjs.map +1 -0
- package/dist/product-card-skeleton-CCQkDMNl.cjs +2 -0
- package/dist/product-card-skeleton-CCQkDMNl.cjs.map +1 -0
- package/dist/product-card-skeleton-Dkqf-bfA.js +34 -0
- package/dist/product-card-skeleton-Dkqf-bfA.js.map +1 -0
- package/dist/product-card.cjs +1 -1
- package/dist/product-card.cjs.map +1 -1
- package/dist/product-card.js +25 -326
- package/dist/product-card.js.map +1 -1
- package/dist/side-panel-close-Bjcn4BEE.cjs +2 -0
- package/dist/side-panel-close-Bjcn4BEE.cjs.map +1 -0
- package/dist/side-panel-close-DVJwOxdM.js +86 -0
- package/dist/side-panel-close-DVJwOxdM.js.map +1 -0
- package/dist/side-panel.cjs +1 -1
- package/dist/side-panel.cjs.map +1 -1
- package/dist/side-panel.js +9 -82
- package/dist/side-panel.js.map +1 -1
- package/package.json +11 -1
- package/dist/arrow-up-right-Cfau6CiE.cjs +0 -7
- package/dist/arrow-up-right-Cfau6CiE.cjs.map +0 -1
- package/dist/arrow-up-right-D7smpXBs.js +0 -16
- package/dist/arrow-up-right-D7smpXBs.js.map +0 -1
- package/dist/checkbox-indicator-BgXRGvAh.cjs +0 -2
- package/dist/checkbox-indicator-BgXRGvAh.cjs.map +0 -1
- package/dist/checkbox-indicator-Cfw9uH_b.js.map +0 -1
- package/dist/price-BwaeTmkR.js +0 -53
- package/dist/price-BwaeTmkR.js.map +0 -1
- package/dist/price-CdK2ye4P.cjs +0 -2
- package/dist/price-CdK2ye4P.cjs.map +0 -1
- package/dist/primitives--2McVg9Z.js +0 -15
- package/dist/primitives--2McVg9Z.js.map +0 -1
- package/dist/primitives-DmqzDKi2.cjs +0 -2
- package/dist/primitives-DmqzDKi2.cjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-card-label-D43AXtRL.cjs","sources":["../src/components/badge/badge.tsx","../src/components/checkbox/checkbox.tsx","../src/components/product-card/primitives/product-card-preview.tsx","../src/components/product-card/primitives/product-card-thumbnail.tsx","../src/components/product-card/primitives/product-card-image.tsx","../src/components/product-card/primitives/product-card-badge.tsx","../src/components/product-card/primitives/product-card-fallback.tsx","../src/components/product-card/primitives/product-card-link.tsx","../src/components/product-card/primitives/product-card-details.tsx","../src/components/product-card/primitives/product-card-header.tsx","../src/components/product-card/primitives/product-card-title.tsx","../src/components/product-card/primitives/product-card-subtitle.tsx","../src/components/price/price.tsx","../src/components/product-card/primitives/product-card-price.tsx","../src/components/product-card/primitives/product-card-compare.tsx","../src/components/product-card/primitives/product-card-checkbox.tsx","../node_modules/.pnpm/@radix-ui+react-label@2.1.7_@types+react-dom@19.2.2_@types+react@19.2.2__@types+react@19.2.2__h3esd6u5mwikxnlir43mok2s5m/node_modules/@radix-ui/react-label/dist/index.mjs","../src/components/label/label.tsx","../src/components/product-card/primitives/product-card-label.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type BadgeProps = ComponentProps<'span'> & {\n children: string;\n shape?: 'pill' | 'rounded';\n variant?: 'primary' | 'warning' | 'error' | 'success' | 'info';\n};\n\n/**\n * This component supports various CSS variables for theming. Here's a comprehensive list, along\n * with their default values:\n *\n * ```css\n * :root {\n * --badge-primary-background: color-mix(in oklab, hsl(var(--primary)), white 75%);\n * --badge-success-background: color-mix(in oklab, hsl(var(--success)), white 75%);\n * --badge-warning-background: color-mix(in oklab, hsl(var(--warning)), white 75%);\n * --badge-error-background: color-mix(in oklab, hsl(var(--error)), white 75%);\n * --badge-info-background: color-mix(in oklab, hsl(var(--info)), white 75%);\n * --badge-text: hsl(var(--foreground));\n * --badge-font-family: var(--font-family-mono);\n * }\n * ```\n */\nexport function Badge({\n children,\n shape = 'rounded',\n className,\n variant = 'primary',\n ...props\n}: BadgeProps) {\n return (\n <span\n className={cn(\n 'px-2 py-0.5 text-xs uppercase tracking-tighter text-[var(--badge-text,hsl(var(--foreground)))] [font-family:var(--badge-font-family,var(--font-family-mono))]',\n {\n pill: 'rounded-full',\n rounded: 'rounded',\n }[shape],\n {\n primary:\n 'bg-[var(--badge-primary-background,color-mix(in_oklab,hsl(var(--primary)),white_75%))]',\n warning:\n 'bg-[var(--badge-warning-background,color-mix(in_oklab,hsl(var(--warning)),white_75%))]',\n error:\n 'bg-[var(--badge-error-background,color-mix(in_oklab,hsl(var(--error)),white_75%))]',\n success:\n 'bg-[var(--badge-success-background,color-mix(in_oklab,hsl(var(--success)),white_75%))]',\n info: 'bg-[var(--badge-info-background,color-mix(in_oklab,hsl(var(--info)),white_75%))]',\n }[variant],\n className,\n )}\n {...props}\n >\n {children}\n </span>\n );\n}\n","'use client';\n\nimport { Check } from 'lucide-react';\nimport type { ComponentProps } from 'react';\n\nimport * as CheckboxPrimitive from '@/components/checkbox';\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;\n\n/**\n * This component supports various CSS variables for theming. Here's a comprehensive list, along\n * with their default values:\n *\n * ```css\n * :root {\n * --checkbox-focus: var(--primary);\n * --checkbox-light-label: var(--foreground);\n * --checkbox-light-error: var(--error);\n * --checkbox-light-unchecked-border: var(--contrast-200);\n * --checkbox-light-unchecked-border-hover: var(--contrast-300);\n * --checkbox-light-unchecked-background: var(--background);\n * --checkbox-light-unchecked-icon: var(--foreground);\n * --checkbox-light-checked-border: var(--foreground);\n * --checkbox-light-checked-border-hover: var(--foreground);\n * --checkbox-light-checked-background: var(--foreground);\n * --checkbox-light-checked-icon: var(--background);\n * --checkbox-light-disabled-border: var(--contrast-200);\n * --checkbox-light-disabled-background: var(--contrast-100);\n * --checkbox-light-disabled-icon: var(--contrast-300);\n * --checkbox-dark-label: var(--background);\n * --checkbox-dark-error: var(--error);\n * --checkbox-dark-unchecked-border: var(--contrast-400);\n * --checkbox-dark-unchecked-border-hover: var(--contrast-300);\n * --checkbox-dark-unchecked-background: var(--foreground);\n * --checkbox-dark-unchecked-icon: var(--background);\n * --checkbox-dark-checked-border: var(--background);\n * --checkbox-dark-checked-border-hover: var(--background);\n * --checkbox-dark-checked-background: var(--foreground);\n * --checkbox-dark-checked-icon: var(--foreground);\n * --checkbox-dark-disabled-border: var(--contrast-200);\n * --checkbox-dark-disabled-background: var(--contrast-100);\n * --checkbox-dark-disabled-icon: var(--contrast-300);\n * --checkbox-font-family: var(--font-family-body);\n * }\n * ```\n */\nexport function Checkbox({ className, colorScheme = 'light', ...props }: CheckboxProps) {\n return (\n <CheckboxPrimitive.Root className={className} colorScheme={colorScheme} {...props}>\n <CheckboxPrimitive.Indicator>\n <Check className=\"h-4 w-4\" color=\"currentColor\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardPreviewProps = ComponentProps<'div'>;\n\nexport function ProductCardPreview({ className, children, ...props }: ProductCardPreviewProps) {\n return (\n <div className={cn('relative', className)} data-slot=\"product-card-preview\" {...props}>\n {children}\n </div>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardThumbnailProps = ComponentProps<'div'>;\n\nexport function ProductCardThumbnail({ className, children, ...props }: ProductCardThumbnailProps) {\n const { aspectRatio, colorScheme } = useProductCard();\n\n return (\n <div\n className={cn(\n 'relative overflow-hidden rounded-[var(--product-card-border-radius,1rem)]',\n {\n '5:6': 'aspect-[5/6]',\n '3:4': 'aspect-[3/4]',\n '1:1': 'aspect-square',\n }[aspectRatio],\n {\n light: 'bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]',\n dark: 'bg-[var(--product-card-dark-background,hsl(var(--contrast-500)))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-thumbnail\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport interface ProductCardImageProps extends ComponentProps<'img'> {\n asChild?: boolean;\n}\n\nexport function ProductCardImage({\n className,\n children,\n asChild = false,\n ...props\n}: ProductCardImageProps) {\n const { colorScheme } = useProductCard();\n\n const Component = asChild ? Slot : 'img';\n\n return (\n <Component\n className={cn(\n 'h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110',\n {\n light: 'bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]',\n dark: 'bg-[var(--product-card-dark-background,hsl(var(--contrast-500)))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-image\"\n {...props}\n />\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { Badge } from '@/components/badge';\nimport { cn } from '@/lib';\n\nexport type ProductCardBadgeProps = ComponentProps<typeof Badge>;\n\nexport function ProductCardBadge({ className, children, ...props }: ProductCardBadgeProps) {\n return (\n <Badge\n className={cn('absolute left-3 top-3', className)}\n data-slot=\"product-card-badge\"\n shape=\"rounded\"\n {...props}\n >\n {children}\n </Badge>\n );\n}\n","'use client';\n\nimport { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardFallbackProps = ComponentProps<'div'>;\n\nexport function ProductCardFallback({ className, children, ...props }: ProductCardFallbackProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <div\n className={cn(\n 'break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105',\n {\n light: '[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]',\n dark: '[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-fallback\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport interface ProductCardLinkProps extends ComponentProps<'a'> {\n asChild?: boolean;\n}\n\nexport function ProductCardLink({ asChild = false, className, ...props }: ProductCardLinkProps) {\n const { colorScheme } = useProductCard();\n\n const Component = asChild ? Slot : 'a';\n\n return (\n <Component\n className={cn(\n 'absolute inset-0 rounded-[var(--product-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--product-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4',\n {\n light: 'ring-offset-[var(--product-card-light-offset,hsl(var(--background)))]',\n dark: 'ring-offset-[var(--product-card-dark-offset,hsl(var(--foreground)))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-link\"\n {...props}\n />\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardDetailsProps = ComponentProps<'div'>;\n\nexport function ProductCardDetails({ children, className, ...props }: ProductCardDetailsProps) {\n return (\n <div\n className={cn(\n 'mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row',\n className,\n )}\n data-slot=\"product-card-details\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardHeaderProps = ComponentProps<'div'>;\n\nexport function ProductCardHeader({ children, className, ...props }: ProductCardHeaderProps) {\n return (\n <div\n className={cn('relative flex-1 text-sm @[16rem]:text-base', className)}\n data-slot=\"product-card-header\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardTitleProps = ComponentProps<'h3'>;\n\nexport function ProductCardTitle({ className, children, ...props }: ProductCardTitleProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <h3\n className={cn(\n 'block font-semibold',\n {\n light: 'text-[var(--product-card-light-title,hsl(var(--foreground)))]',\n dark: 'text-[var(--product-card-dark-title,hsl(var(--background)))]',\n }[colorScheme],\n )}\n data-slot=\"product-card-title\"\n {...props}\n >\n {children}\n </h3>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardSubtitleProps = ComponentProps<'span'>;\n\nexport function ProductCardSubtitle({ children, className, ...props }: ProductCardSubtitleProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <span\n className={cn(\n 'block text-sm font-normal',\n {\n light:\n 'text-[var(--product-card-light-subtitle,color-mix(in_oklab,hsl(var(--foreground))_75%,transparent))]',\n dark: 'text-[var(--product-card-dark-subtitle,color-mix(in_oklab,hsl(var(--background))_75%,transparent))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-subtitle\"\n {...props}\n >\n {children}\n </span>\n );\n}\n","import * as PricePrimitive from '@/components/price';\n\ninterface PriceDefault {\n type: 'default';\n value: string;\n}\n\ninterface PriceRange {\n type: 'range';\n minValue: string;\n maxValue: string;\n}\n\ninterface PriceSale {\n type: 'sale';\n previousValue: string;\n currentValue: string;\n}\n\ntype PriceType = PriceDefault | PriceRange | PriceSale;\n\nexport interface PriceProps extends PricePrimitive.RootProps {\n price: PriceType;\n}\n\n/**\n * This component supports various CSS variables for theming. Here's a comprehensive list, along\n * with their default values:\n *\n * ```css\n * :root {\n * --price-light-text: hsl(var(--foreground));\n * --price-light-sale-text: hsl(var(--foreground));\n * --price-dark-text: hsl(var(--background));\n * --price-dark-sale-text: hsl(var(--background));\n * }\n * ```\n */\nexport function Price({ className, colorScheme = 'light', price, ...props }: PriceProps) {\n return (\n <PricePrimitive.Root className={className} colorScheme={colorScheme} {...props}>\n {price.type === 'range' && (\n <>\n <PricePrimitive.Default>{price.minValue}</PricePrimitive.Default>\n {' – '}\n <PricePrimitive.Default>{price.maxValue}</PricePrimitive.Default>\n </>\n )}\n {price.type === 'sale' && (\n <>\n <PricePrimitive.Strike>{price.currentValue}</PricePrimitive.Strike>{' '}\n <PricePrimitive.Default>{price.previousValue}</PricePrimitive.Default>\n </>\n )}\n {price.type === 'default' && <PricePrimitive.Default>{price.value}</PricePrimitive.Default>}\n </PricePrimitive.Root>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { Price } from '@/components/price';\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardPriceProps = ComponentProps<typeof Price>;\n\nexport function ProductCardPrice({ className, price, ...props }: ProductCardPriceProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <Price\n className={cn('mt-2', className)}\n colorScheme={colorScheme}\n data-slot=\"product-card-price\"\n price={price}\n {...props}\n />\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardCompareProps = ComponentProps<'div'>;\n\nexport function ProductCardCompare({ className, children, ...props }: ProductCardCompareProps) {\n return (\n <div\n className={cn(\n 'font-(family-name:--checkbox-font-family,var(--font-family-body)) flex shrink-0 items-center gap-2',\n className,\n )}\n data-slot=\"product-card-compare\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { Checkbox } from '@/components/checkbox';\nimport { cn } from '@/lib';\n\nexport type ProductCardCheckboxProps = ComponentProps<typeof Checkbox>;\n\nexport function ProductCardCheckbox({ className, ...props }: ProductCardCheckboxProps) {\n return <Checkbox className={cn(className)} data-slot=\"product-card-checkbox\" {...props} />;\n}\n","\"use client\";\n\n// src/label.tsx\nimport * as React from \"react\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { jsx } from \"react/jsx-runtime\";\nvar NAME = \"Label\";\nvar Label = React.forwardRef((props, forwardedRef) => {\n return /* @__PURE__ */ jsx(\n Primitive.label,\n {\n ...props,\n ref: forwardedRef,\n onMouseDown: (event) => {\n const target = event.target;\n if (target.closest(\"button, input, select, textarea\")) return;\n props.onMouseDown?.(event);\n if (!event.defaultPrevented && event.detail > 1) event.preventDefault();\n }\n }\n );\n});\nLabel.displayName = NAME;\nvar Root = Label;\nexport {\n Label,\n Root\n};\n//# sourceMappingURL=index.mjs.map\n","import * as LabelPrimitive from '@radix-ui/react-label';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type LabelProps = ComponentProps<typeof LabelPrimitive.Root> & {\n colorScheme?: 'light' | 'dark';\n};\n\nexport function Label({ className, children, colorScheme = 'light', ...props }: LabelProps) {\n return (\n <LabelPrimitive.Root\n className={cn(\n 'cursor-pointer text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n {\n light: 'text-[var(--checkbox-light-label,hsl(var(--foreground)))]',\n dark: 'text-[var(--checkbox-dark-label,hsl(var(--background)))]',\n }[colorScheme],\n )}\n data-slot=\"label\"\n {...props}\n >\n {children}\n </LabelPrimitive.Root>\n );\n}\n","'use client';\n\nimport { ComponentProps } from 'react';\n\nimport { Label } from '@/components/label';\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardLabelProps = ComponentProps<typeof Label>;\n\nexport function ProductCardLabel({ className, children, ...props }: ProductCardLabelProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <Label\n className={cn(className)}\n colorScheme={colorScheme}\n data-slot=\"product-card-label\"\n {...props}\n >\n {children}\n </Label>\n );\n}\n"],"names":["Badge","children","shape","className","variant","props","jsx","cn","Checkbox","colorScheme","CheckboxPrimitive.Root","CheckboxPrimitive.Indicator","Check","ProductCardPreview","ProductCardThumbnail","aspectRatio","useProductCard","ProductCardImage","asChild","Component","Slot","ProductCardBadge","ProductCardFallback","ProductCardLink","ProductCardDetails","ProductCardHeader","ProductCardTitle","ProductCardSubtitle","Price","price","PricePrimitive.Root","jsxs","Fragment","PricePrimitive.Default","PricePrimitive.Strike","ProductCardPrice","ProductCardCompare","ProductCardCheckbox","NAME","Label","React","forwardedRef","Primitive","event","Root","LabelPrimitive.Root","ProductCardLabel"],"mappings":"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","x_google_ignoreList":[16]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as i, useMemo as m, use as f } from "react";
|
|
3
|
+
import { c as l } from "./utils-BOGlfttm.js";
|
|
4
|
+
const a = i(void 0);
|
|
5
|
+
function p({
|
|
6
|
+
className: o,
|
|
7
|
+
children: d,
|
|
8
|
+
as: e,
|
|
9
|
+
colorScheme: t = "light",
|
|
10
|
+
aspectRatio: r = "5:6",
|
|
11
|
+
...u
|
|
12
|
+
}) {
|
|
13
|
+
const c = e ?? "article", s = m(
|
|
14
|
+
() => ({
|
|
15
|
+
colorScheme: t,
|
|
16
|
+
aspectRatio: r
|
|
17
|
+
}),
|
|
18
|
+
[t, r]
|
|
19
|
+
);
|
|
20
|
+
return /* @__PURE__ */ n(a.Provider, { value: s, children: /* @__PURE__ */ n(
|
|
21
|
+
c,
|
|
22
|
+
{
|
|
23
|
+
className: l(
|
|
24
|
+
"group w-full max-w-md font-[var(--product-card-font-family,var(--font-family-body))] @container",
|
|
25
|
+
o
|
|
26
|
+
),
|
|
27
|
+
"data-slot": "product-card-root",
|
|
28
|
+
...u,
|
|
29
|
+
children: d
|
|
30
|
+
}
|
|
31
|
+
) });
|
|
32
|
+
}
|
|
33
|
+
function v() {
|
|
34
|
+
const o = f(a);
|
|
35
|
+
if (o === void 0)
|
|
36
|
+
throw new Error("useProductCard must be used within an ProductCardRoot");
|
|
37
|
+
return o;
|
|
38
|
+
}
|
|
39
|
+
export {
|
|
40
|
+
p as P,
|
|
41
|
+
v as u
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=product-card-root-4Xz4-pdL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-card-root-4Xz4-pdL.js","sources":["../src/components/product-card/primitives/product-card-root.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useMemo } from 'react';\nimport type { ComponentProps, ElementType } from 'react';\n\nimport { cn } from '@/lib';\n\ninterface ProductCardContext {\n colorScheme: 'light' | 'dark';\n aspectRatio: '5:6' | '3:4' | '1:1';\n}\n\nexport const ProductCardContext = createContext<ProductCardContext | undefined>(undefined);\n\nexport type ProductCardRootProps<E extends ElementType = 'article'> = Omit<\n ComponentProps<E>,\n 'as'\n> & {\n as?: E;\n colorScheme?: 'light' | 'dark';\n aspectRatio?: '5:6' | '3:4' | '1:1';\n};\n\nexport function ProductCardRoot<T extends ElementType = 'article'>({\n className,\n children,\n as,\n colorScheme = 'light',\n aspectRatio = '5:6',\n ...props\n}: ProductCardRootProps<T>) {\n const ProductCardRootElement = as ?? 'article';\n\n const contextValues = useMemo(\n () => ({\n colorScheme,\n aspectRatio,\n }),\n [colorScheme, aspectRatio],\n );\n\n return (\n <ProductCardContext.Provider value={contextValues}>\n <ProductCardRootElement\n className={cn(\n 'group w-full max-w-md font-[var(--product-card-font-family,var(--font-family-body))] @container',\n className,\n )}\n data-slot=\"product-card-root\"\n {...props}\n >\n {children}\n </ProductCardRootElement>\n </ProductCardContext.Provider>\n );\n}\n\nexport function useProductCard() {\n const context = use(ProductCardContext);\n\n if (context === undefined) {\n throw new Error('useProductCard must be used within an ProductCardRoot');\n }\n\n return context;\n}\n"],"names":["ProductCardContext","createContext","ProductCardRoot","className","children","as","colorScheme","aspectRatio","props","ProductCardRootElement","contextValues","useMemo","jsx","cn","useProductCard","context","use"],"mappings":";;;AAYO,MAAMA,IAAqBC,EAA8C,MAAS;AAWlF,SAASC,EAAmD;AAAA,EACjE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,GAAGC;AACL,GAA4B;AAC1B,QAAMC,IAAyBJ,KAAM,WAE/BK,IAAgBC;AAAA,IACpB,OAAO;AAAA,MACL,aAAAL;AAAA,MACA,aAAAC;AAAA,IAAA;AAAA,IAEF,CAACD,GAAaC,CAAW;AAAA,EAAA;AAG3B,SACE,gBAAAK,EAACZ,EAAmB,UAAnB,EAA4B,OAAOU,GAClC,UAAA,gBAAAE;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,WAAWI;AAAA,QACT;AAAA,QACAV;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MACT,GAAGK;AAAA,MAEH,UAAAJ;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEO,SAASU,IAAiB;AAC/B,QAAMC,IAAUC,EAAIhB,CAAkB;AAEtC,MAAIe,MAAY;AACd,UAAM,IAAI,MAAM,uDAAuD;AAGzE,SAAOA;AACT;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const u=require("react/jsx-runtime"),r=require("react"),l=require("./utils-LBH114_M.cjs"),n=r.createContext(void 0);function C({className:t,children:c,as:d,colorScheme:o="light",aspectRatio:e="5:6",...a}){const s=d??"article",i=r.useMemo(()=>({colorScheme:o,aspectRatio:e}),[o,e]);return u.jsx(n.Provider,{value:i,children:u.jsx(s,{className:l.cn("group w-full max-w-md font-[var(--product-card-font-family,var(--font-family-body))] @container",t),"data-slot":"product-card-root",...a,children:c})})}function f(){const t=r.use(n);if(t===void 0)throw new Error("useProductCard must be used within an ProductCardRoot");return t}exports.ProductCardRoot=C;exports.useProductCard=f;
|
|
2
|
+
//# sourceMappingURL=product-card-root-BMTVhhFp.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-card-root-BMTVhhFp.cjs","sources":["../src/components/product-card/primitives/product-card-root.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useMemo } from 'react';\nimport type { ComponentProps, ElementType } from 'react';\n\nimport { cn } from '@/lib';\n\ninterface ProductCardContext {\n colorScheme: 'light' | 'dark';\n aspectRatio: '5:6' | '3:4' | '1:1';\n}\n\nexport const ProductCardContext = createContext<ProductCardContext | undefined>(undefined);\n\nexport type ProductCardRootProps<E extends ElementType = 'article'> = Omit<\n ComponentProps<E>,\n 'as'\n> & {\n as?: E;\n colorScheme?: 'light' | 'dark';\n aspectRatio?: '5:6' | '3:4' | '1:1';\n};\n\nexport function ProductCardRoot<T extends ElementType = 'article'>({\n className,\n children,\n as,\n colorScheme = 'light',\n aspectRatio = '5:6',\n ...props\n}: ProductCardRootProps<T>) {\n const ProductCardRootElement = as ?? 'article';\n\n const contextValues = useMemo(\n () => ({\n colorScheme,\n aspectRatio,\n }),\n [colorScheme, aspectRatio],\n );\n\n return (\n <ProductCardContext.Provider value={contextValues}>\n <ProductCardRootElement\n className={cn(\n 'group w-full max-w-md font-[var(--product-card-font-family,var(--font-family-body))] @container',\n className,\n )}\n data-slot=\"product-card-root\"\n {...props}\n >\n {children}\n </ProductCardRootElement>\n </ProductCardContext.Provider>\n );\n}\n\nexport function useProductCard() {\n const context = use(ProductCardContext);\n\n if (context === undefined) {\n throw new Error('useProductCard must be used within an ProductCardRoot');\n }\n\n return context;\n}\n"],"names":["ProductCardContext","createContext","ProductCardRoot","className","children","as","colorScheme","aspectRatio","props","ProductCardRootElement","contextValues","useMemo","jsx","cn","useProductCard","context","use"],"mappings":"uGAYaA,EAAqBC,EAAAA,cAA8C,MAAS,EAWlF,SAASC,EAAmD,CACjE,UAAAC,EACA,SAAAC,EACA,GAAAC,EACA,YAAAC,EAAc,QACd,YAAAC,EAAc,MACd,GAAGC,CACL,EAA4B,CAC1B,MAAMC,EAAyBJ,GAAM,UAE/BK,EAAgBC,EAAAA,QACpB,KAAO,CACL,YAAAL,EACA,YAAAC,CAAA,GAEF,CAACD,EAAaC,CAAW,CAAA,EAG3B,OACEK,EAAAA,IAACZ,EAAmB,SAAnB,CAA4B,MAAOU,EAClC,SAAAE,EAAAA,IAACH,EAAA,CACC,UAAWI,EAAAA,GACT,kGACAV,CAAA,EAEF,YAAU,oBACT,GAAGK,EAEH,SAAAJ,CAAA,CAAA,EAEL,CAEJ,CAEO,SAASU,GAAiB,CAC/B,MAAMC,EAAUC,EAAAA,IAAIhB,CAAkB,EAEtC,GAAIe,IAAY,OACd,MAAM,IAAI,MAAM,uDAAuD,EAGzE,OAAOA,CACT"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),c=require("./product-card-root-BMTVhhFp.cjs"),s=require("./utils-LBH114_M.cjs"),n=require("./skeleton-root-uIgjea8b.cjs"),d=require("./skeleton-box-yQLivCqg.cjs"),t=require("./skeleton-text-CLzoDFvz.cjs");require("./checkbox-root-g9HcYZCP.cjs");function l({className:r,...o}){const{aspectRatio:a}=c.useProductCard();return e.jsxs(n.SkeletonRoot,{className:s.cn(r),"data-slot":"product-card-skeleton",...o,children:[e.jsx(d.SkeletonBox,{className:s.cn("rounded-[var(--product-card-border-radius,1rem)]",{"5:6":"aspect-[5/6]","3:4":"aspect-[3/4]","1:1":"aspect-square"}[a])}),e.jsx("div",{className:"mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row",children:e.jsxs("div",{className:"flex-1 text-sm @[16rem]:text-base",children:[e.jsx(t.SkeletonText,{characterCount:10,className:"rounded"}),e.jsx(t.SkeletonText,{characterCount:8,className:"rounded"}),e.jsx(t.SkeletonText,{characterCount:6,className:"rounded"})]})})]})}exports.ProductCardSkeleton=l;
|
|
2
|
+
//# sourceMappingURL=product-card-skeleton-CCQkDMNl.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-card-skeleton-CCQkDMNl.cjs","sources":["../src/components/product-card/primitives/product-card-skeleton.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport * as SkeletonPrimitive from '@/components/skeleton';\nimport { cn } from '@/lib';\n\nexport type ProductCardSkeletonProps = ComponentProps<typeof SkeletonPrimitive.Root>;\n\nexport function ProductCardSkeleton({ className, ...props }: ProductCardSkeletonProps) {\n const { aspectRatio } = useProductCard();\n\n return (\n <SkeletonPrimitive.Root className={cn(className)} data-slot=\"product-card-skeleton\" {...props}>\n <SkeletonPrimitive.Box\n className={cn(\n 'rounded-[var(--product-card-border-radius,1rem)]',\n {\n '5:6': 'aspect-[5/6]',\n '3:4': 'aspect-[3/4]',\n '1:1': 'aspect-square',\n }[aspectRatio],\n )}\n />\n <div className=\"mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row\">\n <div className=\"flex-1 text-sm @[16rem]:text-base\">\n <SkeletonPrimitive.Text characterCount={10} className=\"rounded\" />\n <SkeletonPrimitive.Text characterCount={8} className=\"rounded\" />\n <SkeletonPrimitive.Text characterCount={6} className=\"rounded\" />\n </div>\n </div>\n </SkeletonPrimitive.Root>\n );\n}\n"],"names":["ProductCardSkeleton","className","props","aspectRatio","useProductCard","jsxs","SkeletonPrimitive.Root","cn","jsx","SkeletonPrimitive.Box","SkeletonPrimitive.Text"],"mappings":"uSAQO,SAASA,EAAoB,CAAE,UAAAC,EAAW,GAAGC,GAAmC,CACrF,KAAM,CAAE,YAAAC,CAAA,EAAgBC,iBAAA,EAExB,OACEC,OAACC,EAAAA,aAAA,CAAuB,UAAWC,EAAAA,GAAGN,CAAS,EAAG,YAAU,wBAAyB,GAAGC,EACtF,SAAA,CAAAM,EAAAA,IAACC,EAAAA,YAAA,CACC,UAAWF,EAAAA,GACT,mDACA,CACE,MAAO,eACP,MAAO,eACP,MAAO,eAAA,EACPJ,CAAW,CAAA,CACf,CAAA,QAED,MAAA,CAAI,UAAU,4EACb,SAAAE,EAAAA,KAAC,MAAA,CAAI,UAAU,oCACb,SAAA,CAAAG,EAAAA,IAACE,EAAAA,aAAA,CAAuB,eAAgB,GAAI,UAAU,UAAU,QAC/DA,EAAAA,aAAA,CAAuB,eAAgB,EAAG,UAAU,UAAU,QAC9DA,EAAAA,aAAA,CAAuB,eAAgB,EAAG,UAAU,SAAA,CAAU,CAAA,CAAA,CACjE,CAAA,CACF,CAAA,EACF,CAEJ"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { u as m } from "./product-card-root-4Xz4-pdL.js";
|
|
3
|
+
import { c as t } from "./utils-BOGlfttm.js";
|
|
4
|
+
import { S as d } from "./skeleton-root-DHW28LoV.js";
|
|
5
|
+
import { S as l } from "./skeleton-box-BSzQ5f9Y.js";
|
|
6
|
+
import { S as r } from "./skeleton-text-Dd4GbnEz.js";
|
|
7
|
+
import "./checkbox-root-B9W2Y8rY.js";
|
|
8
|
+
function S({ className: o, ...s }) {
|
|
9
|
+
const { aspectRatio: c } = m();
|
|
10
|
+
return /* @__PURE__ */ a(d, { className: t(o), "data-slot": "product-card-skeleton", ...s, children: [
|
|
11
|
+
/* @__PURE__ */ e(
|
|
12
|
+
l,
|
|
13
|
+
{
|
|
14
|
+
className: t(
|
|
15
|
+
"rounded-[var(--product-card-border-radius,1rem)]",
|
|
16
|
+
{
|
|
17
|
+
"5:6": "aspect-[5/6]",
|
|
18
|
+
"3:4": "aspect-[3/4]",
|
|
19
|
+
"1:1": "aspect-square"
|
|
20
|
+
}[c]
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
),
|
|
24
|
+
/* @__PURE__ */ e("div", { className: "mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row", children: /* @__PURE__ */ a("div", { className: "flex-1 text-sm @[16rem]:text-base", children: [
|
|
25
|
+
/* @__PURE__ */ e(r, { characterCount: 10, className: "rounded" }),
|
|
26
|
+
/* @__PURE__ */ e(r, { characterCount: 8, className: "rounded" }),
|
|
27
|
+
/* @__PURE__ */ e(r, { characterCount: 6, className: "rounded" })
|
|
28
|
+
] }) })
|
|
29
|
+
] });
|
|
30
|
+
}
|
|
31
|
+
export {
|
|
32
|
+
S as P
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=product-card-skeleton-Dkqf-bfA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"product-card-skeleton-Dkqf-bfA.js","sources":["../src/components/product-card/primitives/product-card-skeleton.tsx"],"sourcesContent":["import { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport * as SkeletonPrimitive from '@/components/skeleton';\nimport { cn } from '@/lib';\n\nexport type ProductCardSkeletonProps = ComponentProps<typeof SkeletonPrimitive.Root>;\n\nexport function ProductCardSkeleton({ className, ...props }: ProductCardSkeletonProps) {\n const { aspectRatio } = useProductCard();\n\n return (\n <SkeletonPrimitive.Root className={cn(className)} data-slot=\"product-card-skeleton\" {...props}>\n <SkeletonPrimitive.Box\n className={cn(\n 'rounded-[var(--product-card-border-radius,1rem)]',\n {\n '5:6': 'aspect-[5/6]',\n '3:4': 'aspect-[3/4]',\n '1:1': 'aspect-square',\n }[aspectRatio],\n )}\n />\n <div className=\"mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row\">\n <div className=\"flex-1 text-sm @[16rem]:text-base\">\n <SkeletonPrimitive.Text characterCount={10} className=\"rounded\" />\n <SkeletonPrimitive.Text characterCount={8} className=\"rounded\" />\n <SkeletonPrimitive.Text characterCount={6} className=\"rounded\" />\n </div>\n </div>\n </SkeletonPrimitive.Root>\n );\n}\n"],"names":["ProductCardSkeleton","className","props","aspectRatio","useProductCard","jsxs","SkeletonPrimitive.Root","cn","jsx","SkeletonPrimitive.Box","SkeletonPrimitive.Text"],"mappings":";;;;;;;AAQO,SAASA,EAAoB,EAAE,WAAAC,GAAW,GAAGC,KAAmC;AACrF,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAA;AAExB,SACE,gBAAAC,EAACC,GAAA,EAAuB,WAAWC,EAAGN,CAAS,GAAG,aAAU,yBAAyB,GAAGC,GACtF,UAAA;AAAA,IAAA,gBAAAM;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAWF;AAAA,UACT;AAAA,UACA;AAAA,YACE,OAAO;AAAA,YACP,OAAO;AAAA,YACP,OAAO;AAAA,UAAA,EACPJ,CAAW;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,sBAED,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAA,gBAAAG,EAACE,GAAA,EAAuB,gBAAgB,IAAI,WAAU,WAAU;AAAA,wBAC/DA,GAAA,EAAuB,gBAAgB,GAAG,WAAU,WAAU;AAAA,wBAC9DA,GAAA,EAAuB,gBAAgB,GAAG,WAAU,UAAA,CAAU;AAAA,IAAA,EAAA,CACjE,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
package/dist/product-card.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./product-card-root-BMTVhhFp.cjs"),a=require("react/jsx-runtime"),c=require("./utils-LBH114_M.cjs"),r=require("./product-card-label-D43AXtRL.cjs"),u=require("./product-card-skeleton-CCQkDMNl.cjs");function C({className:e,children:d,...o}){return a.jsx("div",{className:c.cn("relative",e),"data-slot":"product-card-content",...o,children:d})}exports.Root=t.ProductCardRoot;exports.useProductCard=t.useProductCard;exports.Badge=r.ProductCardBadge;exports.Checkbox=r.ProductCardCheckbox;exports.Compare=r.ProductCardCompare;exports.Details=r.ProductCardDetails;exports.Fallback=r.ProductCardFallback;exports.Header=r.ProductCardHeader;exports.Image=r.ProductCardImage;exports.Label=r.ProductCardLabel;exports.Link=r.ProductCardLink;exports.Preview=r.ProductCardPreview;exports.Price=r.ProductCardPrice;exports.Subtitle=r.ProductCardSubtitle;exports.Thumbnail=r.ProductCardThumbnail;exports.Title=r.ProductCardTitle;exports.Skeleton=u.ProductCardSkeleton;exports.Content=C;
|
|
2
2
|
//# sourceMappingURL=product-card.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.cjs","sources":["../src/components/product-card/primitives/product-card-root.tsx","../src/components/product-card/primitives/product-card-content.tsx","../src/components/product-card/primitives/product-card-preview.tsx","../src/components/product-card/primitives/product-card-thumbnail.tsx","../src/components/product-card/primitives/product-card-image.tsx","../src/components/product-card/primitives/product-card-badge.tsx","../src/components/product-card/primitives/product-card-fallback.tsx","../src/components/product-card/primitives/product-card-link.tsx","../src/components/product-card/primitives/product-card-details.tsx","../src/components/product-card/primitives/product-card-header.tsx","../src/components/product-card/primitives/product-card-title.tsx","../src/components/product-card/primitives/product-card-subtitle.tsx","../src/components/product-card/primitives/product-card-price.tsx","../src/components/product-card/primitives/product-card-skeleton.tsx","../src/components/product-card/primitives/product-card-compare.tsx","../src/components/checkbox/checkbox.tsx","../src/components/product-card/primitives/product-card-checkbox.tsx","../node_modules/.pnpm/@radix-ui+react-label@2.1.7_@types+react-dom@19.2.2_@types+react@19.2.2__@types+react@19.2.2__h3esd6u5mwikxnlir43mok2s5m/node_modules/@radix-ui/react-label/dist/index.mjs","../src/components/label/label.tsx","../src/components/product-card/primitives/product-card-label.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useMemo } from 'react';\nimport type { ComponentProps, ElementType } from 'react';\n\nimport { cn } from '@/lib';\n\ninterface ProductCardContext {\n colorScheme: 'light' | 'dark';\n aspectRatio: '5:6' | '3:4' | '1:1';\n}\n\nexport const ProductCardContext = createContext<ProductCardContext | undefined>(undefined);\n\nexport type ProductCardRootProps<E extends ElementType = 'article'> = Omit<\n ComponentProps<E>,\n 'as'\n> & {\n as?: E;\n colorScheme?: 'light' | 'dark';\n aspectRatio?: '5:6' | '3:4' | '1:1';\n};\n\nexport function ProductCardRoot<T extends ElementType = 'article'>({\n className,\n children,\n as,\n colorScheme = 'light',\n aspectRatio = '5:6',\n ...props\n}: ProductCardRootProps<T>) {\n const ProductCardRootElement = as ?? 'article';\n\n const contextValues = useMemo(\n () => ({\n colorScheme,\n aspectRatio,\n }),\n [colorScheme, aspectRatio],\n );\n\n return (\n <ProductCardContext.Provider value={contextValues}>\n <ProductCardRootElement\n className={cn(\n 'group w-full max-w-md font-[var(--product-card-font-family,var(--font-family-body))] @container',\n className,\n )}\n data-slot=\"product-card-root\"\n {...props}\n >\n {children}\n </ProductCardRootElement>\n </ProductCardContext.Provider>\n );\n}\n\nexport function useProductCard() {\n const context = use(ProductCardContext);\n\n if (context === undefined) {\n throw new Error('useProductCard must be used within an ProductCardRoot');\n }\n\n return context;\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardContentProps = ComponentProps<'div'>;\n\nexport function ProductCardContent({ className, children, ...props }: ProductCardContentProps) {\n return (\n <div className={cn('relative', className)} data-slot=\"product-card-content\" {...props}>\n {children}\n </div>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardPreviewProps = ComponentProps<'div'>;\n\nexport function ProductCardPreview({ className, children, ...props }: ProductCardPreviewProps) {\n return (\n <div className={cn('relative', className)} data-slot=\"product-card-preview\" {...props}>\n {children}\n </div>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardThumbnailProps = ComponentProps<'div'>;\n\nexport function ProductCardThumbnail({ className, children, ...props }: ProductCardThumbnailProps) {\n const { aspectRatio, colorScheme } = useProductCard();\n\n return (\n <div\n className={cn(\n 'relative overflow-hidden rounded-[var(--product-card-border-radius,1rem)]',\n {\n '5:6': 'aspect-[5/6]',\n '3:4': 'aspect-[3/4]',\n '1:1': 'aspect-square',\n }[aspectRatio],\n {\n light: 'bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]',\n dark: 'bg-[var(--product-card-dark-background,hsl(var(--contrast-500)))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-thumbnail\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport interface ProductCardImageProps extends ComponentProps<'img'> {\n asChild?: boolean;\n}\n\nexport function ProductCardImage({\n className,\n children,\n asChild = false,\n ...props\n}: ProductCardImageProps) {\n const { colorScheme } = useProductCard();\n\n const Component = asChild ? Slot : 'img';\n\n return (\n <Component\n className={cn(\n 'h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110',\n {\n light: 'bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]',\n dark: 'bg-[var(--product-card-dark-background,hsl(var(--contrast-500)))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-image\"\n {...props}\n />\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { Badge } from '@/components/badge';\nimport { cn } from '@/lib';\n\nexport type ProductCardBadgeProps = ComponentProps<typeof Badge>;\n\nexport function ProductCardBadge({ className, children, ...props }: ProductCardBadgeProps) {\n return (\n <Badge\n className={cn('absolute left-3 top-3', className)}\n data-slot=\"product-card-badge\"\n shape=\"rounded\"\n {...props}\n >\n {children}\n </Badge>\n );\n}\n","'use client';\n\nimport { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardFallbackProps = ComponentProps<'div'>;\n\nexport function ProductCardFallback({ className, children, ...props }: ProductCardFallbackProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <div\n className={cn(\n 'break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105',\n {\n light: '[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]',\n dark: '[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-fallback\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport interface ProductCardLinkProps extends ComponentProps<'a'> {\n asChild?: boolean;\n}\n\nexport function ProductCardLink({ asChild = false, className, ...props }: ProductCardLinkProps) {\n const { colorScheme } = useProductCard();\n\n const Component = asChild ? Slot : 'a';\n\n return (\n <Component\n className={cn(\n 'absolute inset-0 rounded-[var(--product-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--product-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4',\n {\n light: 'ring-offset-[var(--product-card-light-offset,hsl(var(--background)))]',\n dark: 'ring-offset-[var(--product-card-dark-offset,hsl(var(--foreground)))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-link\"\n {...props}\n />\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardDetailsProps = ComponentProps<'div'>;\n\nexport function ProductCardDetails({ children, className, ...props }: ProductCardDetailsProps) {\n return (\n <div\n className={cn(\n 'mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row',\n className,\n )}\n data-slot=\"product-card-details\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardHeaderProps = ComponentProps<'div'>;\n\nexport function ProductCardHeader({ children, className, ...props }: ProductCardHeaderProps) {\n return (\n <div\n className={cn('relative flex-1 text-sm @[16rem]:text-base', className)}\n data-slot=\"product-card-header\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardTitleProps = ComponentProps<'h3'>;\n\nexport function ProductCardTitle({ className, children, ...props }: ProductCardTitleProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <h3\n className={cn(\n 'block font-semibold',\n {\n light: 'text-[var(--product-card-light-title,hsl(var(--foreground)))]',\n dark: 'text-[var(--product-card-dark-title,hsl(var(--background)))]',\n }[colorScheme],\n )}\n data-slot=\"product-card-title\"\n {...props}\n >\n {children}\n </h3>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardSubtitleProps = ComponentProps<'span'>;\n\nexport function ProductCardSubtitle({ children, className, ...props }: ProductCardSubtitleProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <span\n className={cn(\n 'block text-sm font-normal',\n {\n light:\n 'text-[var(--product-card-light-subtitle,color-mix(in_oklab,hsl(var(--foreground))_75%,transparent))]',\n dark: 'text-[var(--product-card-dark-subtitle,color-mix(in_oklab,hsl(var(--background))_75%,transparent))]',\n }[colorScheme],\n className,\n )}\n data-slot=\"product-card-subtitle\"\n {...props}\n >\n {children}\n </span>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { Price } from '@/components/price';\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardPriceProps = ComponentProps<typeof Price>;\n\nexport function ProductCardPrice({ className, price, ...props }: ProductCardPriceProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <Price\n className={cn('mt-2', className)}\n colorScheme={colorScheme}\n data-slot=\"product-card-price\"\n price={price}\n {...props}\n />\n );\n}\n","import { ComponentProps } from 'react';\n\nimport { useProductCard } from '@/components/product-card';\nimport * as SkeletonPrimitive from '@/components/skeleton';\nimport { cn } from '@/lib';\n\nexport type ProductCardSkeletonProps = ComponentProps<typeof SkeletonPrimitive.Root>;\n\nexport function ProductCardSkeleton({ className, ...props }: ProductCardSkeletonProps) {\n const { aspectRatio } = useProductCard();\n\n return (\n <SkeletonPrimitive.Root className={cn(className)} data-slot=\"product-card-skeleton\" {...props}>\n <SkeletonPrimitive.Box\n className={cn(\n 'rounded-[var(--product-card-border-radius,1rem)]',\n {\n '5:6': 'aspect-[5/6]',\n '3:4': 'aspect-[3/4]',\n '1:1': 'aspect-square',\n }[aspectRatio],\n )}\n />\n <div className=\"mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row\">\n <div className=\"flex-1 text-sm @[16rem]:text-base\">\n <SkeletonPrimitive.Text characterCount={10} className=\"rounded\" />\n <SkeletonPrimitive.Text characterCount={8} className=\"rounded\" />\n <SkeletonPrimitive.Text characterCount={6} className=\"rounded\" />\n </div>\n </div>\n </SkeletonPrimitive.Root>\n );\n}\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardCompareProps = ComponentProps<'div'>;\n\nexport function ProductCardCompare({ className, children, ...props }: ProductCardCompareProps) {\n return (\n <div\n className={cn(\n 'font-(family-name:--checkbox-font-family,var(--font-family-body)) flex shrink-0 items-center gap-2',\n className,\n )}\n data-slot=\"product-card-compare\"\n {...props}\n >\n {children}\n </div>\n );\n}\n","'use client';\n\nimport { Check } from 'lucide-react';\nimport type { ComponentProps } from 'react';\n\nimport * as CheckboxPrimitive from '@/components/checkbox';\n\nexport type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;\n\n/**\n * This component supports various CSS variables for theming. Here's a comprehensive list, along\n * with their default values:\n *\n * ```css\n * :root {\n * --checkbox-focus: var(--primary);\n * --checkbox-light-label: var(--foreground);\n * --checkbox-light-error: var(--error);\n * --checkbox-light-unchecked-border: var(--contrast-200);\n * --checkbox-light-unchecked-border-hover: var(--contrast-300);\n * --checkbox-light-unchecked-background: var(--background);\n * --checkbox-light-unchecked-icon: var(--foreground);\n * --checkbox-light-checked-border: var(--foreground);\n * --checkbox-light-checked-border-hover: var(--foreground);\n * --checkbox-light-checked-background: var(--foreground);\n * --checkbox-light-checked-icon: var(--background);\n * --checkbox-light-disabled-border: var(--contrast-200);\n * --checkbox-light-disabled-background: var(--contrast-100);\n * --checkbox-light-disabled-icon: var(--contrast-300);\n * --checkbox-dark-label: var(--background);\n * --checkbox-dark-error: var(--error);\n * --checkbox-dark-unchecked-border: var(--contrast-400);\n * --checkbox-dark-unchecked-border-hover: var(--contrast-300);\n * --checkbox-dark-unchecked-background: var(--foreground);\n * --checkbox-dark-unchecked-icon: var(--background);\n * --checkbox-dark-checked-border: var(--background);\n * --checkbox-dark-checked-border-hover: var(--background);\n * --checkbox-dark-checked-background: var(--foreground);\n * --checkbox-dark-checked-icon: var(--foreground);\n * --checkbox-dark-disabled-border: var(--contrast-200);\n * --checkbox-dark-disabled-background: var(--contrast-100);\n * --checkbox-dark-disabled-icon: var(--contrast-300);\n * --checkbox-font-family: var(--font-family-body);\n * }\n * ```\n */\nexport function Checkbox({ className, colorScheme = 'light', ...props }: CheckboxProps) {\n return (\n <CheckboxPrimitive.Root className={className} colorScheme={colorScheme} {...props}>\n <CheckboxPrimitive.Indicator>\n <Check className=\"h-4 w-4\" color=\"currentColor\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { Checkbox } from '@/components/checkbox';\nimport { cn } from '@/lib';\n\nexport type ProductCardCheckboxProps = ComponentProps<typeof Checkbox>;\n\nexport function ProductCardCheckbox({ className, ...props }: ProductCardCheckboxProps) {\n return <Checkbox className={cn(className)} data-slot=\"product-card-checkbox\" {...props} />;\n}\n","\"use client\";\n\n// src/label.tsx\nimport * as React from \"react\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { jsx } from \"react/jsx-runtime\";\nvar NAME = \"Label\";\nvar Label = React.forwardRef((props, forwardedRef) => {\n return /* @__PURE__ */ jsx(\n Primitive.label,\n {\n ...props,\n ref: forwardedRef,\n onMouseDown: (event) => {\n const target = event.target;\n if (target.closest(\"button, input, select, textarea\")) return;\n props.onMouseDown?.(event);\n if (!event.defaultPrevented && event.detail > 1) event.preventDefault();\n }\n }\n );\n});\nLabel.displayName = NAME;\nvar Root = Label;\nexport {\n Label,\n Root\n};\n//# sourceMappingURL=index.mjs.map\n","import * as LabelPrimitive from '@radix-ui/react-label';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type LabelProps = ComponentProps<typeof LabelPrimitive.Root> & {\n colorScheme?: 'light' | 'dark';\n};\n\nexport function Label({ className, children, colorScheme = 'light', ...props }: LabelProps) {\n return (\n <LabelPrimitive.Root\n className={cn(\n 'cursor-pointer text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n {\n light: 'text-[var(--checkbox-light-label,hsl(var(--foreground)))]',\n dark: 'text-[var(--checkbox-dark-label,hsl(var(--background)))]',\n }[colorScheme],\n )}\n data-slot=\"label\"\n {...props}\n >\n {children}\n </LabelPrimitive.Root>\n );\n}\n","'use client';\n\nimport { ComponentProps } from 'react';\n\nimport { Label } from '@/components/label';\nimport { useProductCard } from '@/components/product-card';\nimport { cn } from '@/lib';\n\nexport type ProductCardLabelProps = ComponentProps<typeof Label>;\n\nexport function ProductCardLabel({ className, children, ...props }: ProductCardLabelProps) {\n const { colorScheme } = useProductCard();\n\n return (\n <Label\n className={cn(className)}\n colorScheme={colorScheme}\n data-slot=\"product-card-label\"\n {...props}\n >\n {children}\n </Label>\n );\n}\n"],"names":["ProductCardContext","createContext","ProductCardRoot","className","children","as","colorScheme","aspectRatio","props","ProductCardRootElement","contextValues","useMemo","jsx","cn","useProductCard","context","use","ProductCardContent","ProductCardPreview","ProductCardThumbnail","ProductCardImage","asChild","Component","Slot","ProductCardBadge","Badge","ProductCardFallback","ProductCardLink","ProductCardDetails","ProductCardHeader","ProductCardTitle","ProductCardSubtitle","ProductCardPrice","price","Price","ProductCardSkeleton","jsxs","SkeletonPrimitive.Root","SkeletonPrimitive.Box","SkeletonPrimitive.Text","ProductCardCompare","Checkbox","CheckboxPrimitive.Root","CheckboxPrimitive.Indicator","Check","ProductCardCheckbox","NAME","Label","React","forwardedRef","Primitive","event","Root","LabelPrimitive.Root","ProductCardLabel"],"mappings":"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","x_google_ignoreList":[17]}
|
|
1
|
+
{"version":3,"file":"product-card.cjs","sources":["../src/components/product-card/primitives/product-card-content.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nexport type ProductCardContentProps = ComponentProps<'div'>;\n\nexport function ProductCardContent({ className, children, ...props }: ProductCardContentProps) {\n return (\n <div className={cn('relative', className)} data-slot=\"product-card-content\" {...props}>\n {children}\n </div>\n );\n}\n"],"names":["ProductCardContent","className","children","props","jsx","cn"],"mappings":"sSAMO,SAASA,EAAmB,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,GAAkC,CAC7F,OACEC,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,GAAG,WAAYJ,CAAS,EAAG,YAAU,uBAAwB,GAAGE,EAC7E,SAAAD,CAAA,CACH,CAEJ"}
|
package/dist/product-card.js
CHANGED
|
@@ -1,330 +1,29 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { c } from "./
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import { S } from "./skeleton-root-DHW28LoV.js";
|
|
9
|
-
import { S as w } from "./skeleton-box-BSzQ5f9Y.js";
|
|
10
|
-
import { S as l } from "./skeleton-text-Dd4GbnEz.js";
|
|
11
|
-
import y from "./check-ChGAB_3v.js";
|
|
12
|
-
import { P as R } from "./index-BzgbBl8b.js";
|
|
13
|
-
const m = v(void 0);
|
|
14
|
-
function z({
|
|
15
|
-
className: r,
|
|
16
|
-
children: a,
|
|
17
|
-
as: t,
|
|
18
|
-
colorScheme: e = "light",
|
|
19
|
-
aspectRatio: d = "5:6",
|
|
20
|
-
...n
|
|
21
|
-
}) {
|
|
22
|
-
const p = t ?? "article", h = g(
|
|
23
|
-
() => ({
|
|
24
|
-
colorScheme: e,
|
|
25
|
-
aspectRatio: d
|
|
26
|
-
}),
|
|
27
|
-
[e, d]
|
|
28
|
-
);
|
|
29
|
-
return /* @__PURE__ */ o(m.Provider, { value: h, children: /* @__PURE__ */ o(
|
|
30
|
-
p,
|
|
31
|
-
{
|
|
32
|
-
className: c(
|
|
33
|
-
"group w-full max-w-md font-[var(--product-card-font-family,var(--font-family-body))] @container",
|
|
34
|
-
r
|
|
35
|
-
),
|
|
36
|
-
"data-slot": "product-card-root",
|
|
37
|
-
...n,
|
|
38
|
-
children: a
|
|
39
|
-
}
|
|
40
|
-
) });
|
|
41
|
-
}
|
|
42
|
-
function s() {
|
|
43
|
-
const r = x(m);
|
|
44
|
-
if (r === void 0)
|
|
45
|
-
throw new Error("useProductCard must be used within an ProductCardRoot");
|
|
46
|
-
return r;
|
|
47
|
-
}
|
|
48
|
-
function G({ className: r, children: a, ...t }) {
|
|
49
|
-
return /* @__PURE__ */ o("div", { className: c("relative", r), "data-slot": "product-card-content", ...t, children: a });
|
|
50
|
-
}
|
|
51
|
-
function J({ className: r, children: a, ...t }) {
|
|
52
|
-
return /* @__PURE__ */ o("div", { className: c("relative", r), "data-slot": "product-card-preview", ...t, children: a });
|
|
53
|
-
}
|
|
54
|
-
function K({ className: r, children: a, ...t }) {
|
|
55
|
-
const { aspectRatio: e, colorScheme: d } = s();
|
|
56
|
-
return /* @__PURE__ */ o(
|
|
57
|
-
"div",
|
|
58
|
-
{
|
|
59
|
-
className: c(
|
|
60
|
-
"relative overflow-hidden rounded-[var(--product-card-border-radius,1rem)]",
|
|
61
|
-
{
|
|
62
|
-
"5:6": "aspect-[5/6]",
|
|
63
|
-
"3:4": "aspect-[3/4]",
|
|
64
|
-
"1:1": "aspect-square"
|
|
65
|
-
}[e],
|
|
66
|
-
{
|
|
67
|
-
light: "bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]",
|
|
68
|
-
dark: "bg-[var(--product-card-dark-background,hsl(var(--contrast-500)))]"
|
|
69
|
-
}[d],
|
|
70
|
-
r
|
|
71
|
-
),
|
|
72
|
-
"data-slot": "product-card-thumbnail",
|
|
73
|
-
...t,
|
|
74
|
-
children: a
|
|
75
|
-
}
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
function O({
|
|
79
|
-
className: r,
|
|
80
|
-
children: a,
|
|
81
|
-
asChild: t = !1,
|
|
82
|
-
...e
|
|
83
|
-
}) {
|
|
84
|
-
const { colorScheme: d } = s();
|
|
85
|
-
return /* @__PURE__ */ o(
|
|
86
|
-
t ? i : "img",
|
|
87
|
-
{
|
|
88
|
-
className: c(
|
|
89
|
-
"h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110",
|
|
90
|
-
{
|
|
91
|
-
light: "bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]",
|
|
92
|
-
dark: "bg-[var(--product-card-dark-background,hsl(var(--contrast-500)))]"
|
|
93
|
-
}[d],
|
|
94
|
-
r
|
|
95
|
-
),
|
|
96
|
-
"data-slot": "product-card-image",
|
|
97
|
-
...e
|
|
98
|
-
}
|
|
99
|
-
);
|
|
100
|
-
}
|
|
101
|
-
function Q({ className: r, children: a, ...t }) {
|
|
102
|
-
return /* @__PURE__ */ o(
|
|
103
|
-
P,
|
|
104
|
-
{
|
|
105
|
-
className: c("absolute left-3 top-3", r),
|
|
106
|
-
"data-slot": "product-card-badge",
|
|
107
|
-
shape: "rounded",
|
|
108
|
-
...t,
|
|
109
|
-
children: a
|
|
110
|
-
}
|
|
111
|
-
);
|
|
112
|
-
}
|
|
113
|
-
function U({ className: r, children: a, ...t }) {
|
|
114
|
-
const { colorScheme: e } = s();
|
|
115
|
-
return /* @__PURE__ */ o(
|
|
116
|
-
"div",
|
|
117
|
-
{
|
|
118
|
-
className: c(
|
|
119
|
-
"break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105",
|
|
120
|
-
{
|
|
121
|
-
light: "[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]",
|
|
122
|
-
dark: "[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]"
|
|
123
|
-
}[e],
|
|
124
|
-
r
|
|
125
|
-
),
|
|
126
|
-
"data-slot": "product-card-fallback",
|
|
127
|
-
...t,
|
|
128
|
-
children: a
|
|
129
|
-
}
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
function W({ asChild: r = !1, className: a, ...t }) {
|
|
133
|
-
const { colorScheme: e } = s();
|
|
134
|
-
return /* @__PURE__ */ o(
|
|
135
|
-
r ? i : "a",
|
|
136
|
-
{
|
|
137
|
-
className: c(
|
|
138
|
-
"absolute inset-0 rounded-[var(--product-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--product-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4",
|
|
139
|
-
{
|
|
140
|
-
light: "ring-offset-[var(--product-card-light-offset,hsl(var(--background)))]",
|
|
141
|
-
dark: "ring-offset-[var(--product-card-dark-offset,hsl(var(--foreground)))]"
|
|
142
|
-
}[e],
|
|
143
|
-
a
|
|
144
|
-
),
|
|
145
|
-
"data-slot": "product-card-link",
|
|
146
|
-
...t
|
|
147
|
-
}
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
function X({ children: r, className: a, ...t }) {
|
|
151
|
-
return /* @__PURE__ */ o(
|
|
152
|
-
"div",
|
|
153
|
-
{
|
|
154
|
-
className: c(
|
|
155
|
-
"mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row",
|
|
156
|
-
a
|
|
157
|
-
),
|
|
158
|
-
"data-slot": "product-card-details",
|
|
159
|
-
...t,
|
|
160
|
-
children: r
|
|
161
|
-
}
|
|
162
|
-
);
|
|
163
|
-
}
|
|
164
|
-
function Y({ children: r, className: a, ...t }) {
|
|
165
|
-
return /* @__PURE__ */ o(
|
|
166
|
-
"div",
|
|
167
|
-
{
|
|
168
|
-
className: c("relative flex-1 text-sm @[16rem]:text-base", a),
|
|
169
|
-
"data-slot": "product-card-header",
|
|
170
|
-
...t,
|
|
171
|
-
children: r
|
|
172
|
-
}
|
|
173
|
-
);
|
|
174
|
-
}
|
|
175
|
-
function Z({ className: r, children: a, ...t }) {
|
|
176
|
-
const { colorScheme: e } = s();
|
|
177
|
-
return /* @__PURE__ */ o(
|
|
178
|
-
"h3",
|
|
179
|
-
{
|
|
180
|
-
className: c(
|
|
181
|
-
"block font-semibold",
|
|
182
|
-
{
|
|
183
|
-
light: "text-[var(--product-card-light-title,hsl(var(--foreground)))]",
|
|
184
|
-
dark: "text-[var(--product-card-dark-title,hsl(var(--background)))]"
|
|
185
|
-
}[e]
|
|
186
|
-
),
|
|
187
|
-
"data-slot": "product-card-title",
|
|
188
|
-
...t,
|
|
189
|
-
children: a
|
|
190
|
-
}
|
|
191
|
-
);
|
|
192
|
-
}
|
|
193
|
-
function rr({ children: r, className: a, ...t }) {
|
|
194
|
-
const { colorScheme: e } = s();
|
|
195
|
-
return /* @__PURE__ */ o(
|
|
196
|
-
"span",
|
|
197
|
-
{
|
|
198
|
-
className: c(
|
|
199
|
-
"block text-sm font-normal",
|
|
200
|
-
{
|
|
201
|
-
light: "text-[var(--product-card-light-subtitle,color-mix(in_oklab,hsl(var(--foreground))_75%,transparent))]",
|
|
202
|
-
dark: "text-[var(--product-card-dark-subtitle,color-mix(in_oklab,hsl(var(--background))_75%,transparent))]"
|
|
203
|
-
}[e],
|
|
204
|
-
a
|
|
205
|
-
),
|
|
206
|
-
"data-slot": "product-card-subtitle",
|
|
207
|
-
...t,
|
|
208
|
-
children: r
|
|
209
|
-
}
|
|
210
|
-
);
|
|
211
|
-
}
|
|
212
|
-
function tr({ className: r, price: a, ...t }) {
|
|
213
|
-
const { colorScheme: e } = s();
|
|
214
|
-
return /* @__PURE__ */ o(
|
|
215
|
-
N,
|
|
216
|
-
{
|
|
217
|
-
className: c("mt-2", r),
|
|
218
|
-
colorScheme: e,
|
|
219
|
-
"data-slot": "product-card-price",
|
|
220
|
-
price: a,
|
|
221
|
-
...t
|
|
222
|
-
}
|
|
223
|
-
);
|
|
224
|
-
}
|
|
225
|
-
function ar({ className: r, ...a }) {
|
|
226
|
-
const { aspectRatio: t } = s();
|
|
227
|
-
return /* @__PURE__ */ u(S, { className: c(r), "data-slot": "product-card-skeleton", ...a, children: [
|
|
228
|
-
/* @__PURE__ */ o(
|
|
229
|
-
w,
|
|
230
|
-
{
|
|
231
|
-
className: c(
|
|
232
|
-
"rounded-[var(--product-card-border-radius,1rem)]",
|
|
233
|
-
{
|
|
234
|
-
"5:6": "aspect-[5/6]",
|
|
235
|
-
"3:4": "aspect-[3/4]",
|
|
236
|
-
"1:1": "aspect-square"
|
|
237
|
-
}[t]
|
|
238
|
-
)
|
|
239
|
-
}
|
|
240
|
-
),
|
|
241
|
-
/* @__PURE__ */ o("div", { className: "mt-2 flex flex-col items-start gap-x-4 gap-y-3 px-1 @xs:mt-3 @xs:flex-row", children: /* @__PURE__ */ u("div", { className: "flex-1 text-sm @[16rem]:text-base", children: [
|
|
242
|
-
/* @__PURE__ */ o(l, { characterCount: 10, className: "rounded" }),
|
|
243
|
-
/* @__PURE__ */ o(l, { characterCount: 8, className: "rounded" }),
|
|
244
|
-
/* @__PURE__ */ o(l, { characterCount: 6, className: "rounded" })
|
|
245
|
-
] }) })
|
|
246
|
-
] });
|
|
247
|
-
}
|
|
248
|
-
function or({ className: r, children: a, ...t }) {
|
|
249
|
-
return /* @__PURE__ */ o(
|
|
250
|
-
"div",
|
|
251
|
-
{
|
|
252
|
-
className: c(
|
|
253
|
-
"font-(family-name:--checkbox-font-family,var(--font-family-body)) flex shrink-0 items-center gap-2",
|
|
254
|
-
r
|
|
255
|
-
),
|
|
256
|
-
"data-slot": "product-card-compare",
|
|
257
|
-
...t,
|
|
258
|
-
children: a
|
|
259
|
-
}
|
|
260
|
-
);
|
|
261
|
-
}
|
|
262
|
-
function _({ className: r, colorScheme: a = "light", ...t }) {
|
|
263
|
-
return /* @__PURE__ */ o(k, { className: r, colorScheme: a, ...t, children: /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(y, { className: "h-4 w-4", color: "currentColor" }) }) });
|
|
264
|
-
}
|
|
265
|
-
function er({ className: r, ...a }) {
|
|
266
|
-
return /* @__PURE__ */ o(_, { className: c(r), "data-slot": "product-card-checkbox", ...a });
|
|
267
|
-
}
|
|
268
|
-
var L = "Label", f = b.forwardRef((r, a) => /* @__PURE__ */ o(
|
|
269
|
-
R.label,
|
|
270
|
-
{
|
|
271
|
-
...r,
|
|
272
|
-
ref: a,
|
|
273
|
-
onMouseDown: (t) => {
|
|
274
|
-
t.target.closest("button, input, select, textarea") || (r.onMouseDown?.(t), !t.defaultPrevented && t.detail > 1 && t.preventDefault());
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
));
|
|
278
|
-
f.displayName = L;
|
|
279
|
-
var B = f;
|
|
280
|
-
function D({ className: r, children: a, colorScheme: t = "light", ...e }) {
|
|
281
|
-
return /* @__PURE__ */ o(
|
|
282
|
-
B,
|
|
283
|
-
{
|
|
284
|
-
className: c(
|
|
285
|
-
"cursor-pointer text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
286
|
-
{
|
|
287
|
-
light: "text-[var(--checkbox-light-label,hsl(var(--foreground)))]",
|
|
288
|
-
dark: "text-[var(--checkbox-dark-label,hsl(var(--background)))]"
|
|
289
|
-
}[t]
|
|
290
|
-
),
|
|
291
|
-
"data-slot": "label",
|
|
292
|
-
...e,
|
|
293
|
-
children: a
|
|
294
|
-
}
|
|
295
|
-
);
|
|
296
|
-
}
|
|
297
|
-
function cr({ className: r, children: a, ...t }) {
|
|
298
|
-
const { colorScheme: e } = s();
|
|
299
|
-
return /* @__PURE__ */ o(
|
|
300
|
-
D,
|
|
301
|
-
{
|
|
302
|
-
className: c(r),
|
|
303
|
-
colorScheme: e,
|
|
304
|
-
"data-slot": "product-card-label",
|
|
305
|
-
...t,
|
|
306
|
-
children: a
|
|
307
|
-
}
|
|
308
|
-
);
|
|
1
|
+
import { P as m, u as d } from "./product-card-root-4Xz4-pdL.js";
|
|
2
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
3
|
+
import { c as o } from "./utils-BOGlfttm.js";
|
|
4
|
+
import { c as p, l as f, k as P, f as b, d as x, g as C, b as k, m as g, e as h, P as v, j, i as L, a as S, h as T } from "./product-card-label-CJmC9ICf.js";
|
|
5
|
+
import { P as B } from "./product-card-skeleton-Dkqf-bfA.js";
|
|
6
|
+
function i({ className: a, children: e, ...t }) {
|
|
7
|
+
return /* @__PURE__ */ s("div", { className: o("relative", a), "data-slot": "product-card-content", ...t, children: e });
|
|
309
8
|
}
|
|
310
9
|
export {
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
10
|
+
p as Badge,
|
|
11
|
+
f as Checkbox,
|
|
12
|
+
P as Compare,
|
|
13
|
+
i as Content,
|
|
14
|
+
b as Details,
|
|
15
|
+
x as Fallback,
|
|
16
|
+
C as Header,
|
|
17
|
+
k as Image,
|
|
18
|
+
g as Label,
|
|
19
|
+
h as Link,
|
|
20
|
+
v as Preview,
|
|
21
|
+
j as Price,
|
|
22
|
+
m as Root,
|
|
23
|
+
B as Skeleton,
|
|
24
|
+
L as Subtitle,
|
|
25
|
+
S as Thumbnail,
|
|
26
|
+
T as Title,
|
|
27
|
+
d as useProductCard
|
|
329
28
|
};
|
|
330
29
|
//# sourceMappingURL=product-card.js.map
|