@vite-mf-monorepo/ui 0.4.7 → 0.4.8
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/Avatar/Avatar.js +1 -61
- package/dist/Avatar/Avatar.js.map +1 -1
- package/dist/Avatar/index.js +1 -4
- package/dist/Avatar/index.js.map +1 -1
- package/dist/Badge/Badge.js +1 -47
- package/dist/Badge/Badge.js.map +1 -1
- package/dist/Badge/index.js +1 -4
- package/dist/Badge/index.js.map +1 -1
- package/dist/Button/Button.utils.js +1 -43
- package/dist/Button/Button.utils.js.map +1 -1
- package/dist/Button/index.js +1 -4
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/Card.js +1 -20
- package/dist/Card/Card.js.map +1 -1
- package/dist/Card/index.js +1 -4
- package/dist/Card/index.js.map +1 -1
- package/dist/Carousel/Carousel.js +1 -267
- package/dist/Carousel/Carousel.js.map +1 -1
- package/dist/Carousel/CarouselCounter.js +1 -27
- package/dist/Carousel/CarouselCounter.js.map +1 -1
- package/dist/Carousel/CarouselError.js +1 -17
- package/dist/Carousel/CarouselError.js.map +1 -1
- package/dist/Carousel/CarouselItem.js +1 -27
- package/dist/Carousel/CarouselItem.js.map +1 -1
- package/dist/Carousel/CarouselLoading.js +1 -62
- package/dist/Carousel/CarouselLoading.js.map +1 -1
- package/dist/Carousel/CarouselNavigation.js +1 -96
- package/dist/Carousel/CarouselNavigation.js.map +1 -1
- package/dist/Carousel/CarouselPagination.js +1 -28
- package/dist/Carousel/CarouselPagination.js.map +1 -1
- package/dist/Carousel/index.js +1 -14
- package/dist/Carousel/index.js.map +1 -1
- package/dist/HeroImage/HeroImage.js +1 -46
- package/dist/HeroImage/HeroImage.js.map +1 -1
- package/dist/HeroImage/index.js +1 -4
- package/dist/HeroImage/index.js.map +1 -1
- package/dist/Icon/Icon.js +1 -203
- package/dist/Icon/Icon.js.map +1 -1
- package/dist/Icon/index.js +1 -4
- package/dist/Icon/index.js.map +1 -1
- package/dist/IconButton/IconButton.js +1 -43
- package/dist/IconButton/IconButton.js.map +1 -1
- package/dist/IconButton/index.js +1 -4
- package/dist/IconButton/index.js.map +1 -1
- package/dist/Image/Image.js +1 -124
- package/dist/Image/Image.js.map +1 -1
- package/dist/Image/index.js +1 -4
- package/dist/Image/index.js.map +1 -1
- package/dist/Modal/Modal.js +1 -54
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/Modal/index.js +1 -4
- package/dist/Modal/index.js.map +1 -1
- package/dist/MovieCard/MovieCard.utils.js +1 -19
- package/dist/MovieCard/MovieCard.utils.js.map +1 -1
- package/dist/MovieCard/MovieCardContent.js +1 -74
- package/dist/MovieCard/MovieCardContent.js.map +1 -1
- package/dist/MovieCard/index.js +1 -4
- package/dist/MovieCard/index.js.map +1 -1
- package/dist/Rating/CircleRating.js +1 -74
- package/dist/Rating/CircleRating.js.map +1 -1
- package/dist/Rating/Rating.js +1 -40
- package/dist/Rating/Rating.js.map +1 -1
- package/dist/Rating/StarsRating.js +1 -46
- package/dist/Rating/StarsRating.js.map +1 -1
- package/dist/Rating/index.js +1 -4
- package/dist/Rating/index.js.map +1 -1
- package/dist/Skeleton/Skeleton.js +1 -35
- package/dist/Skeleton/Skeleton.js.map +1 -1
- package/dist/Skeleton/index.js +1 -4
- package/dist/Skeleton/index.js.map +1 -1
- package/dist/Spinner/Spinner.js +1 -19
- package/dist/Spinner/Spinner.js.map +1 -1
- package/dist/Spinner/index.js +1 -4
- package/dist/Spinner/index.js.map +1 -1
- package/dist/Tabs/Tabs.js +1 -46
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Tabs/TabsContext.js +1 -15
- package/dist/Tabs/TabsContext.js.map +1 -1
- package/dist/Tabs/TabsList.js +1 -50
- package/dist/Tabs/TabsList.js.map +1 -1
- package/dist/Tabs/TabsListContext.js +1 -15
- package/dist/Tabs/TabsListContext.js.map +1 -1
- package/dist/Tabs/TabsPanel.js +1 -25
- package/dist/Tabs/TabsPanel.js.map +1 -1
- package/dist/Tabs/TabsTrigger.js +1 -123
- package/dist/Tabs/TabsTrigger.js.map +1 -1
- package/dist/Tabs/index.js +1 -4
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Talent/Talent.js +1 -68
- package/dist/Talent/Talent.js.map +1 -1
- package/dist/Talent/index.js +1 -4
- package/dist/Talent/index.js.map +1 -1
- package/dist/TrailerCard/TrailerCard.js +1 -85
- package/dist/TrailerCard/TrailerCard.js.map +1 -1
- package/dist/TrailerCard/index.js +1 -4
- package/dist/TrailerCard/index.js.map +1 -1
- package/dist/Typography/Typography.js +1 -54
- package/dist/Typography/Typography.js.map +1 -1
- package/dist/Typography/index.js +1 -4
- package/dist/Typography/index.js.map +1 -1
- package/dist/index.js +1 -51
- package/dist/index.js.map +1 -1
- package/dist/next/Button/Button.js +1 -51
- package/dist/next/Button/Button.js.map +1 -1
- package/dist/next/Button/index.js +1 -4
- package/dist/next/Button/index.js.map +1 -1
- package/dist/next/HeroImage/HeroImage.js +1 -43
- package/dist/next/HeroImage/HeroImage.js.map +1 -1
- package/dist/next/HeroImage/index.js +1 -4
- package/dist/next/HeroImage/index.js.map +1 -1
- package/dist/next/Image/NextImage.js +1 -83
- package/dist/next/Image/NextImage.js.map +1 -1
- package/dist/next/Image/index.js +1 -4
- package/dist/next/Image/index.js.map +1 -1
- package/dist/next/MovieCard/MovieCard.js +1 -43
- package/dist/next/MovieCard/MovieCard.js.map +1 -1
- package/dist/next/MovieCard/MovieCardContent.js +1 -78
- package/dist/next/MovieCard/MovieCardContent.js.map +1 -1
- package/dist/next/MovieCard/index.js +1 -4
- package/dist/next/MovieCard/index.js.map +1 -1
- package/dist/next/index.js +1 -10
- package/dist/next/index.js.map +1 -1
- package/dist/react-router/Button/Button.js +1 -51
- package/dist/react-router/Button/Button.js.map +1 -1
- package/dist/react-router/Button/index.js +1 -4
- package/dist/react-router/Button/index.js.map +1 -1
- package/dist/react-router/MovieCard/MovieCard.js +1 -41
- package/dist/react-router/MovieCard/MovieCard.js.map +1 -1
- package/dist/react-router/MovieCard/index.js +1 -4
- package/dist/react-router/MovieCard/index.js.map +1 -1
- package/dist/react-router/index.js +1 -6
- package/dist/react-router/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,55 +1,2 @@
|
|
|
1
|
-
import clsx from "
|
|
2
|
-
import { createElement } from "react";
|
|
3
|
-
const variantStyles = {
|
|
4
|
-
h1: "ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground",
|
|
5
|
-
h2: "ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground",
|
|
6
|
-
h3: "ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground",
|
|
7
|
-
h4: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground",
|
|
8
|
-
h5: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground",
|
|
9
|
-
h6: "ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground",
|
|
10
|
-
body: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground",
|
|
11
|
-
"body-sm": "ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground",
|
|
12
|
-
"body-lg": "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground",
|
|
13
|
-
lead: "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground",
|
|
14
|
-
caption: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
|
|
15
|
-
"caption-xs": "ui:font-inter ui:text-xs ui:text-muted-foreground",
|
|
16
|
-
label: "ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground",
|
|
17
|
-
muted: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
|
|
18
|
-
blockquote: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground"
|
|
19
|
-
};
|
|
20
|
-
const variantToTag = {
|
|
21
|
-
h1: "h1",
|
|
22
|
-
h2: "h2",
|
|
23
|
-
h3: "h3",
|
|
24
|
-
h4: "h4",
|
|
25
|
-
h5: "h5",
|
|
26
|
-
h6: "h6",
|
|
27
|
-
body: "p",
|
|
28
|
-
"body-sm": "p",
|
|
29
|
-
"body-lg": "p",
|
|
30
|
-
lead: "p",
|
|
31
|
-
caption: "span",
|
|
32
|
-
"caption-xs": "span",
|
|
33
|
-
label: "label",
|
|
34
|
-
muted: "p",
|
|
35
|
-
blockquote: "blockquote"
|
|
36
|
-
};
|
|
37
|
-
function Typography({
|
|
38
|
-
variant,
|
|
39
|
-
as,
|
|
40
|
-
className,
|
|
41
|
-
children,
|
|
42
|
-
...rest
|
|
43
|
-
}) {
|
|
44
|
-
const Component = as ?? variantToTag[variant];
|
|
45
|
-
return createElement(
|
|
46
|
-
Component,
|
|
47
|
-
{ className: clsx(variantStyles[variant], className), ...rest },
|
|
48
|
-
children
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
var Typography_default = Typography;
|
|
52
|
-
export {
|
|
53
|
-
Typography_default as default
|
|
54
|
-
};
|
|
1
|
+
import r from"clsx";import{createElement as x}from"react";const d={h1:"ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground",h2:"ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground",h3:"ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground",h4:"ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground",h5:"ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground",h6:"ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground",body:"ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground","body-sm":"ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground","body-lg":"ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground",lead:"ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground",caption:"ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground","caption-xs":"ui:font-inter ui:text-xs ui:text-muted-foreground",label:"ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground",muted:"ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",blockquote:"ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",body:"p","body-sm":"p","body-lg":"p",lead:"p",caption:"span","caption-xs":"span",label:"label",muted:"p",blockquote:"blockquote"};function a({variant:t,as:e,className:i,children:o,...u}){const n=e??l[t];return x(n,{className:r(d[t],i),...u},o)}var g=a;export{g as default};
|
|
55
2
|
//# sourceMappingURL=Typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Typography/Typography.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { createElement } from 'react'\n\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react'\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'h4'\n | 'h5'\n | 'h6'\n | 'body'\n | 'body-sm'\n | 'body-lg'\n | 'lead'\n | 'caption'\n | 'caption-xs'\n | 'label'\n | 'muted'\n | 'blockquote'\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n /** Visual style variant */\n variant: TypographyVariant\n /** Override semantic HTML tag */\n as?: ElementType\n /** Additional CSS classes */\n className?: string\n /** Content */\n children: ReactNode\n}\n\nconst variantStyles: Record<TypographyVariant, string> = {\n h1: 'ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground',\n h2: 'ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground',\n h3: 'ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground',\n h4: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground',\n h5: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground',\n h6: 'ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground',\n body: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground',\n 'body-sm':\n 'ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground',\n 'body-lg':\n 'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground',\n lead: 'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground',\n caption: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n 'caption-xs': 'ui:font-inter ui:text-xs ui:text-muted-foreground',\n label:\n 'ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground',\n muted: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n blockquote:\n 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground',\n}\n\nconst variantToTag: Record<TypographyVariant, ElementType> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n h6: 'h6',\n body: 'p',\n 'body-sm': 'p',\n 'body-lg': 'p',\n lead: 'p',\n caption: 'span',\n 'caption-xs': 'span',\n label: 'label',\n muted: 'p',\n blockquote: 'blockquote',\n}\n\nfunction Typography({\n variant,\n as,\n className,\n children,\n ...rest\n}: Readonly<TypographyProps>) {\n const Component = as ?? variantToTag[variant]\n\n return createElement(\n Component,\n { className: clsx(variantStyles[variant], className), ...rest },\n children\n )\n}\n\nexport default Typography\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Typography/Typography.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { createElement } from 'react'\n\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react'\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'h4'\n | 'h5'\n | 'h6'\n | 'body'\n | 'body-sm'\n | 'body-lg'\n | 'lead'\n | 'caption'\n | 'caption-xs'\n | 'label'\n | 'muted'\n | 'blockquote'\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n /** Visual style variant */\n variant: TypographyVariant\n /** Override semantic HTML tag */\n as?: ElementType\n /** Additional CSS classes */\n className?: string\n /** Content */\n children: ReactNode\n}\n\nconst variantStyles: Record<TypographyVariant, string> = {\n h1: 'ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground',\n h2: 'ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground',\n h3: 'ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground',\n h4: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground',\n h5: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground',\n h6: 'ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground',\n body: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground',\n 'body-sm':\n 'ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground',\n 'body-lg':\n 'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground',\n lead: 'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground',\n caption: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n 'caption-xs': 'ui:font-inter ui:text-xs ui:text-muted-foreground',\n label:\n 'ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground',\n muted: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n blockquote:\n 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground',\n}\n\nconst variantToTag: Record<TypographyVariant, ElementType> = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n h6: 'h6',\n body: 'p',\n 'body-sm': 'p',\n 'body-lg': 'p',\n lead: 'p',\n caption: 'span',\n 'caption-xs': 'span',\n label: 'label',\n muted: 'p',\n blockquote: 'blockquote',\n}\n\nfunction Typography({\n variant,\n as,\n className,\n children,\n ...rest\n}: Readonly<TypographyProps>) {\n const Component = as ?? variantToTag[variant]\n\n return createElement(\n Component,\n { className: clsx(variantStyles[variant], className), ...rest },\n children\n )\n}\n\nexport default Typography\n"],"mappings":"AAAA,OAAOA,MAAU,OACjB,OAAS,iBAAAC,MAAqB,QAgC9B,MAAMC,EAAmD,CACvD,GAAI,0HACJ,GAAI,yHACJ,GAAI,6HACJ,GAAI,4HACJ,GAAI,8GACJ,GAAI,8GACJ,KAAM,+FACN,UACE,+EACF,UACE,+FACF,KAAM,mHACN,QAAS,kEACT,aAAc,oDACd,MACE,2EACF,MAAO,kEACP,WACE,kIACJ,EAEMC,EAAuD,CAC3D,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,KAAM,IACN,UAAW,IACX,UAAW,IACX,KAAM,IACN,QAAS,OACT,aAAc,OACd,MAAO,QACP,MAAO,IACP,WAAY,YACd,EAEA,SAASC,EAAW,CAClB,QAAAC,EACA,GAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAA8B,CAC5B,MAAMC,EAAYJ,GAAMH,EAAaE,CAAO,EAE5C,OAAOJ,EACLS,EACA,CAAE,UAAWV,EAAKE,EAAcG,CAAO,EAAGE,CAAS,EAAG,GAAGE,CAAK,EAC9DD,CACF,CACF,CAEA,IAAOG,EAAQP","names":["clsx","createElement","variantStyles","variantToTag","Typography","variant","as","className","children","rest","Component","Typography_default"]}
|
package/dist/Typography/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Typography/index.ts"],"sourcesContent":["export { default as Typography } from './Typography'\nexport type { TypographyProps, TypographyVariant } from './Typography'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Typography/index.ts"],"sourcesContent":["export { default as Typography } from './Typography'\nexport type { TypographyProps, TypographyVariant } from './Typography'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAA6B","names":["default"]}
|
package/dist/index.js
CHANGED
|
@@ -1,52 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Avatar } from "./Avatar";
|
|
3
|
-
import { Badge } from "./Badge";
|
|
4
|
-
import { Button } from "./Button";
|
|
5
|
-
import { Card } from "./Card";
|
|
6
|
-
import { Icon } from "./Icon";
|
|
7
|
-
import { IconButton } from "./IconButton";
|
|
8
|
-
import { Image } from "./Image";
|
|
9
|
-
import { HeroImage } from "./HeroImage";
|
|
10
|
-
import { Modal } from "./Modal";
|
|
11
|
-
import { Rating } from "./Rating";
|
|
12
|
-
import { MovieCard } from "./MovieCard";
|
|
13
|
-
import { TrailerCard } from "./TrailerCard";
|
|
14
|
-
import {
|
|
15
|
-
Carousel,
|
|
16
|
-
CarouselCounter,
|
|
17
|
-
CarouselItem,
|
|
18
|
-
CarouselLoading,
|
|
19
|
-
CarouselNavigation,
|
|
20
|
-
CarouselPagination
|
|
21
|
-
} from "./Carousel";
|
|
22
|
-
import { Tabs } from "./Tabs";
|
|
23
|
-
import { Skeleton } from "./Skeleton";
|
|
24
|
-
import { Talent } from "./Talent";
|
|
25
|
-
import { Typography } from "./Typography";
|
|
26
|
-
import { Spinner } from "./Spinner";
|
|
27
|
-
export {
|
|
28
|
-
Avatar,
|
|
29
|
-
Badge,
|
|
30
|
-
Button,
|
|
31
|
-
Card,
|
|
32
|
-
Carousel,
|
|
33
|
-
CarouselCounter,
|
|
34
|
-
CarouselItem,
|
|
35
|
-
CarouselLoading,
|
|
36
|
-
CarouselNavigation,
|
|
37
|
-
CarouselPagination,
|
|
38
|
-
HeroImage,
|
|
39
|
-
Icon,
|
|
40
|
-
IconButton,
|
|
41
|
-
Image,
|
|
42
|
-
Modal,
|
|
43
|
-
MovieCard,
|
|
44
|
-
Rating,
|
|
45
|
-
Skeleton,
|
|
46
|
-
Spinner,
|
|
47
|
-
Tabs,
|
|
48
|
-
Talent,
|
|
49
|
-
TrailerCard,
|
|
50
|
-
Typography
|
|
51
|
-
};
|
|
1
|
+
import"./styles.css";import{Avatar as t}from"./Avatar";import{Badge as p}from"./Badge";import{Button as m}from"./Button";import{Card as i}from"./Card";import{Icon as x}from"./Icon";import{IconButton as l}from"./IconButton";import{Image as P}from"./Image";import{HeroImage as u}from"./HeroImage";import{Modal as I}from"./Modal";import{Rating as B}from"./Rating";import{MovieCard as v}from"./MovieCard";import{TrailerCard as A}from"./TrailerCard";import{Carousel as R,CarouselCounter as V,CarouselItem as b,CarouselLoading as h,CarouselNavigation as z,CarouselPagination as N}from"./Carousel";import{Tabs as H}from"./Tabs";import{Skeleton as w}from"./Skeleton";import{Talent as q}from"./Talent";import{Typography as E}from"./Typography";import{Spinner as G}from"./Spinner";export{t as Avatar,p as Badge,m as Button,i as Card,R as Carousel,V as CarouselCounter,b as CarouselItem,h as CarouselLoading,z as CarouselNavigation,N as CarouselPagination,u as HeroImage,x as Icon,l as IconButton,P as Image,I as Modal,v as MovieCard,B as Rating,w as Skeleton,G as Spinner,H as Tabs,q as Talent,A as TrailerCard,E as Typography};
|
|
52
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import './styles.css'\n\nexport { Avatar } from './Avatar'\nexport type { AvatarProps, AvatarSize } from './Avatar'\n\nexport { Badge } from './Badge'\nexport type { BadgeProps, BadgeSize, BadgeVariant } from './Badge'\n\nexport { Button } from './Button'\nexport type { ButtonProps } from './Button'\n\nexport { Card } from './Card'\nexport type { CardProps, CardVariant } from './Card'\n\nexport { Icon } from './Icon'\nexport type { IconProps, IconName, IconSize } from './Icon'\n\nexport { IconButton } from './IconButton'\nexport type { IconButtonProps } from './IconButton'\n\nexport { Image } from './Image'\nexport type { AspectRatio, ImageProps, ImageState } from './Image'\n\nexport { HeroImage } from './HeroImage'\nexport type { HeroImageProps } from './HeroImage'\n\nexport { Modal } from './Modal'\nexport type { ModalProps } from './Modal'\n\nexport { Rating } from './Rating'\nexport type { RatingProps, RatingSize, RatingVariant } from './Rating'\n\nexport { MovieCard } from './MovieCard'\nexport type { MovieCardProps } from './MovieCard'\n\nexport { TrailerCard } from './TrailerCard'\nexport type { TrailerCardProps } from './TrailerCard'\n\nexport {\n Carousel,\n CarouselCounter,\n CarouselItem,\n CarouselLoading,\n CarouselNavigation,\n CarouselPagination,\n} from './Carousel'\nexport type {\n CarouselArrowPosition,\n CarouselCounterProps,\n CarouselItemProps,\n CarouselLoadingProps,\n CarouselNavigationPosition,\n CarouselNavigationProps,\n CarouselPaginationProps,\n CarouselProps,\n CarouselVariant,\n} from './Carousel'\n\nexport { Tabs } from './Tabs'\nexport type { TabsProps, TabsVariant } from './Tabs'\n\nexport { Skeleton } from './Skeleton'\nexport type { SkeletonProps } from './Skeleton'\n\nexport { Talent } from './Talent'\nexport type { TalentProps } from './Talent'\n\nexport { Typography } from './Typography'\nexport type { TypographyProps, TypographyVariant } from './Typography'\n\nexport { Spinner } from './Spinner'\nexport type { SpinnerProps } from './Spinner'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import './styles.css'\n\nexport { Avatar } from './Avatar'\nexport type { AvatarProps, AvatarSize } from './Avatar'\n\nexport { Badge } from './Badge'\nexport type { BadgeProps, BadgeSize, BadgeVariant } from './Badge'\n\nexport { Button } from './Button'\nexport type { ButtonProps } from './Button'\n\nexport { Card } from './Card'\nexport type { CardProps, CardVariant } from './Card'\n\nexport { Icon } from './Icon'\nexport type { IconProps, IconName, IconSize } from './Icon'\n\nexport { IconButton } from './IconButton'\nexport type { IconButtonProps } from './IconButton'\n\nexport { Image } from './Image'\nexport type { AspectRatio, ImageProps, ImageState } from './Image'\n\nexport { HeroImage } from './HeroImage'\nexport type { HeroImageProps } from './HeroImage'\n\nexport { Modal } from './Modal'\nexport type { ModalProps } from './Modal'\n\nexport { Rating } from './Rating'\nexport type { RatingProps, RatingSize, RatingVariant } from './Rating'\n\nexport { MovieCard } from './MovieCard'\nexport type { MovieCardProps } from './MovieCard'\n\nexport { TrailerCard } from './TrailerCard'\nexport type { TrailerCardProps } from './TrailerCard'\n\nexport {\n Carousel,\n CarouselCounter,\n CarouselItem,\n CarouselLoading,\n CarouselNavigation,\n CarouselPagination,\n} from './Carousel'\nexport type {\n CarouselArrowPosition,\n CarouselCounterProps,\n CarouselItemProps,\n CarouselLoadingProps,\n CarouselNavigationPosition,\n CarouselNavigationProps,\n CarouselPaginationProps,\n CarouselProps,\n CarouselVariant,\n} from './Carousel'\n\nexport { Tabs } from './Tabs'\nexport type { TabsProps, TabsVariant } from './Tabs'\n\nexport { Skeleton } from './Skeleton'\nexport type { SkeletonProps } from './Skeleton'\n\nexport { Talent } from './Talent'\nexport type { TalentProps } from './Talent'\n\nexport { Typography } from './Typography'\nexport type { TypographyProps, TypographyVariant } from './Typography'\n\nexport { Spinner } from './Spinner'\nexport type { SpinnerProps } from './Spinner'\n"],"mappings":"AAAA,MAAO,eAEP,OAAS,UAAAA,MAAc,WAGvB,OAAS,SAAAC,MAAa,UAGtB,OAAS,UAAAC,MAAc,WAGvB,OAAS,QAAAC,MAAY,SAGrB,OAAS,QAAAC,MAAY,SAGrB,OAAS,cAAAC,MAAkB,eAG3B,OAAS,SAAAC,MAAa,UAGtB,OAAS,aAAAC,MAAiB,cAG1B,OAAS,SAAAC,MAAa,UAGtB,OAAS,UAAAC,MAAc,WAGvB,OAAS,aAAAC,MAAiB,cAG1B,OAAS,eAAAC,MAAmB,gBAG5B,OACE,YAAAC,EACA,mBAAAC,EACA,gBAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,sBAAAC,MACK,aAaP,OAAS,QAAAC,MAAY,SAGrB,OAAS,YAAAC,MAAgB,aAGzB,OAAS,UAAAC,MAAc,WAGvB,OAAS,cAAAC,MAAkB,eAG3B,OAAS,WAAAC,MAAe","names":["Avatar","Badge","Button","Card","Icon","IconButton","Image","HeroImage","Modal","Rating","MovieCard","TrailerCard","Carousel","CarouselCounter","CarouselItem","CarouselLoading","CarouselNavigation","CarouselPagination","Tabs","Skeleton","Talent","Typography","Spinner"]}
|
|
@@ -1,52 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Link from "next/link";
|
|
3
|
-
import {
|
|
4
|
-
getButtonClasses,
|
|
5
|
-
getButtonDisabledClasses,
|
|
6
|
-
iconSizeMap
|
|
7
|
-
} from "../../Button/Button.utils";
|
|
8
|
-
import { Icon } from "../../Icon";
|
|
9
|
-
function Button(props) {
|
|
10
|
-
const {
|
|
11
|
-
variant = "primary",
|
|
12
|
-
size = "md",
|
|
13
|
-
icon,
|
|
14
|
-
iconPosition = "left",
|
|
15
|
-
className,
|
|
16
|
-
children
|
|
17
|
-
} = props;
|
|
18
|
-
const classes = getButtonClasses({ variant, size, iconPosition, className });
|
|
19
|
-
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
20
|
-
icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSizeMap[size] }),
|
|
21
|
-
children
|
|
22
|
-
] });
|
|
23
|
-
if (props.as === "link") {
|
|
24
|
-
const {
|
|
25
|
-
as: _2,
|
|
26
|
-
variant: _v2,
|
|
27
|
-
size: _s2,
|
|
28
|
-
icon: _i2,
|
|
29
|
-
iconPosition: _ip2,
|
|
30
|
-
className: _c2,
|
|
31
|
-
children: _ch2,
|
|
32
|
-
...linkProps
|
|
33
|
-
} = props;
|
|
34
|
-
return /* @__PURE__ */ jsx(Link, { className: classes, ...linkProps, children: content });
|
|
35
|
-
}
|
|
36
|
-
const {
|
|
37
|
-
as: _,
|
|
38
|
-
variant: _v,
|
|
39
|
-
size: _s,
|
|
40
|
-
icon: _i,
|
|
41
|
-
iconPosition: _ip,
|
|
42
|
-
className: _c,
|
|
43
|
-
children: _ch,
|
|
44
|
-
...buttonProps
|
|
45
|
-
} = props;
|
|
46
|
-
return /* @__PURE__ */ jsx("button", { className: getButtonDisabledClasses(classes), ...buttonProps, children: content });
|
|
47
|
-
}
|
|
48
|
-
var Button_default = Button;
|
|
49
|
-
export {
|
|
50
|
-
Button_default as default
|
|
51
|
-
};
|
|
1
|
+
import{Fragment as B,jsx as n,jsxs as h}from"react/jsx-runtime";import u from"next/link";import{getButtonClasses as p,getButtonDisabledClasses as f,iconSizeMap as d}from"../../Button/Button.utils";import{Icon as N}from"../../Icon";function P(t){const{variant:a="primary",size:o="md",icon:i,iconPosition:c="left",className:r,children:l}=t,s=p({variant:a,size:o,iconPosition:c,className:r}),e=h(B,{children:[i&&n(N,{name:i,size:d[o]}),l]});if(t.as==="link"){const{as:C,variant:L,size:D,icon:I,iconPosition:M,className:R,children:S,..._}=t;return n(u,{className:s,..._,children:e})}const{as:v,variant:z,size:b,icon:k,iconPosition:y,className:g,children:x,...m}=t;return n("button",{className:f(s),...m,children:e})}var E=P;export{E as default};
|
|
52
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/Button/Button.tsx"],"sourcesContent":["import Link from 'next/link'\n\nimport {\n getButtonClasses,\n getButtonDisabledClasses,\n iconSizeMap,\n} from '../../Button/Button.utils'\nimport { Icon } from '../../Icon'\n\nimport type { NextButtonProps } from './Button.types'\n\nfunction Button(props: Readonly<NextButtonProps>) {\n const {\n variant = 'primary',\n size = 'md',\n icon,\n iconPosition = 'left',\n className,\n children,\n } = props\n\n const classes = getButtonClasses({ variant, size, iconPosition, className })\n\n const content = (\n <>\n {icon && <Icon name={icon} size={iconSizeMap[size]} />}\n {children}\n </>\n )\n\n if (props.as === 'link') {\n const {\n as: _,\n variant: _v,\n size: _s,\n icon: _i,\n iconPosition: _ip,\n className: _c,\n children: _ch,\n ...linkProps\n } = props\n\n return (\n <Link className={classes} {...linkProps}>\n {content}\n </Link>\n )\n }\n\n const {\n as: _,\n variant: _v,\n size: _s,\n icon: _i,\n iconPosition: _ip,\n className: _c,\n children: _ch,\n ...buttonProps\n } = props\n\n return (\n <button className={getButtonDisabledClasses(classes)} {...buttonProps}>\n {content}\n </button>\n )\n}\n\nexport default Button\n"],"mappings":"AAwBI,
|
|
1
|
+
{"version":3,"sources":["../../../src/next/Button/Button.tsx"],"sourcesContent":["import Link from 'next/link'\n\nimport {\n getButtonClasses,\n getButtonDisabledClasses,\n iconSizeMap,\n} from '../../Button/Button.utils'\nimport { Icon } from '../../Icon'\n\nimport type { NextButtonProps } from './Button.types'\n\nfunction Button(props: Readonly<NextButtonProps>) {\n const {\n variant = 'primary',\n size = 'md',\n icon,\n iconPosition = 'left',\n className,\n children,\n } = props\n\n const classes = getButtonClasses({ variant, size, iconPosition, className })\n\n const content = (\n <>\n {icon && <Icon name={icon} size={iconSizeMap[size]} />}\n {children}\n </>\n )\n\n if (props.as === 'link') {\n const {\n as: _,\n variant: _v,\n size: _s,\n icon: _i,\n iconPosition: _ip,\n className: _c,\n children: _ch,\n ...linkProps\n } = props\n\n return (\n <Link className={classes} {...linkProps}>\n {content}\n </Link>\n )\n }\n\n const {\n as: _,\n variant: _v,\n size: _s,\n icon: _i,\n iconPosition: _ip,\n className: _c,\n children: _ch,\n ...buttonProps\n } = props\n\n return (\n <button className={getButtonDisabledClasses(classes)} {...buttonProps}>\n {content}\n </button>\n )\n}\n\nexport default Button\n"],"mappings":"AAwBI,mBAAAA,EACW,OAAAC,EADX,QAAAC,MAAA,oBAxBJ,OAAOC,MAAU,YAEjB,OACE,oBAAAC,EACA,4BAAAC,EACA,eAAAC,MACK,4BACP,OAAS,QAAAC,MAAY,aAIrB,SAASC,EAAOC,EAAkC,CAChD,KAAM,CACJ,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,KAAAC,EACA,aAAAC,EAAe,OACf,UAAAC,EACA,SAAAC,CACF,EAAIN,EAEEO,EAAUZ,EAAiB,CAAE,QAAAM,EAAS,KAAAC,EAAM,aAAAE,EAAc,UAAAC,CAAU,CAAC,EAErEG,EACJf,EAAAF,EAAA,CACG,UAAAY,GAAQX,EAACM,EAAA,CAAK,KAAMK,EAAM,KAAMN,EAAYK,CAAI,EAAG,EACnDI,GACH,EAGF,GAAIN,EAAM,KAAO,OAAQ,CACvB,KAAM,CACJ,GAAIS,EACJ,QAASC,EACT,KAAMC,EACN,KAAMC,EACN,aAAcC,EACd,UAAWC,EACX,SAAUC,EACV,GAAGC,CACL,EAAIhB,EAEJ,OACER,EAACE,EAAA,CAAK,UAAWa,EAAU,GAAGS,EAC3B,SAAAR,EACH,CAEJ,CAEA,KAAM,CACJ,GAAIC,EACJ,QAASC,EACT,KAAMC,EACN,KAAMC,EACN,aAAcC,EACd,UAAWC,EACX,SAAUC,EACV,GAAGE,CACL,EAAIjB,EAEJ,OACER,EAAC,UAAO,UAAWI,EAAyBW,CAAO,EAAI,GAAGU,EACvD,SAAAT,EACH,CAEJ,CAEA,IAAOU,EAAQnB","names":["Fragment","jsx","jsxs","Link","getButtonClasses","getButtonDisabledClasses","iconSizeMap","Icon","Button","props","variant","size","icon","iconPosition","className","children","classes","content","_","_v","_s","_i","_ip","_c","_ch","linkProps","buttonProps","Button_default"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/Button/index.ts"],"sourcesContent":["export { default as Button } from './Button'\nexport type {\n NextButtonProps,\n NextButtonAsButton,\n NextButtonAsLink,\n} from './Button.types'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/next/Button/index.ts"],"sourcesContent":["export { default as Button } from './Button'\nexport type {\n NextButtonProps,\n NextButtonAsButton,\n NextButtonAsLink,\n} from './Button.types'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAAyB","names":["default"]}
|
|
@@ -1,44 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Skeleton } from "../../Skeleton";
|
|
3
|
-
import { NextImage } from "../Image";
|
|
4
|
-
function HeroImage({ backdropPath, title }) {
|
|
5
|
-
const src = backdropPath ? `https://image.tmdb.org/t/p/original${backdropPath}` : void 0;
|
|
6
|
-
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7
|
-
src ? /* @__PURE__ */ jsx(
|
|
8
|
-
NextImage,
|
|
9
|
-
{
|
|
10
|
-
src,
|
|
11
|
-
alt: title ?? "Unknown",
|
|
12
|
-
fill: true,
|
|
13
|
-
preload: true,
|
|
14
|
-
sizes: "100vw",
|
|
15
|
-
className: "ui:h-full ui:w-full",
|
|
16
|
-
fallback: /* @__PURE__ */ jsx(
|
|
17
|
-
Skeleton,
|
|
18
|
-
{
|
|
19
|
-
"data-testid": "hero-image-skeleton",
|
|
20
|
-
variant: "rectangle",
|
|
21
|
-
width: "ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",
|
|
22
|
-
aspectRatio: "21/9",
|
|
23
|
-
rounded: false
|
|
24
|
-
}
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
|
-
) : /* @__PURE__ */ jsx(
|
|
28
|
-
Skeleton,
|
|
29
|
-
{
|
|
30
|
-
"data-testid": "hero-image-skeleton",
|
|
31
|
-
variant: "rectangle",
|
|
32
|
-
width: "ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",
|
|
33
|
-
aspectRatio: "21/9",
|
|
34
|
-
rounded: false
|
|
35
|
-
}
|
|
36
|
-
),
|
|
37
|
-
/* @__PURE__ */ jsx("div", { className: "ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0" })
|
|
38
|
-
] });
|
|
39
|
-
}
|
|
40
|
-
var HeroImage_default = HeroImage;
|
|
41
|
-
export {
|
|
42
|
-
HeroImage_default as default
|
|
43
|
-
};
|
|
1
|
+
import{Fragment as r,jsx as e,jsxs as n}from"react/jsx-runtime";import{Skeleton as a}from"../../Skeleton";import{NextImage as u}from"../Image";function o({backdropPath:t,title:l}){const i=t?`https://image.tmdb.org/t/p/original${t}`:void 0;return n(r,{children:[i?e(u,{src:i,alt:l??"Unknown",fill:!0,preload:!0,sizes:"100vw",className:"ui:h-full ui:w-full",fallback:e(a,{"data-testid":"hero-image-skeleton",variant:"rectangle",width:"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",aspectRatio:"21/9",rounded:!1})}):e(a,{"data-testid":"hero-image-skeleton",variant:"rectangle",width:"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",aspectRatio:"21/9",rounded:!1}),e("div",{className:"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0"})]})}var f=o;export{f as default};
|
|
44
2
|
//# sourceMappingURL=HeroImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/HeroImage/HeroImage.tsx"],"sourcesContent":["import { Skeleton } from '../../Skeleton'\nimport { NextImage } from '../Image'\n\nexport interface NextHeroImageProps {\n /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n backdropPath?: string | null\n /** Alt text for the image */\n title?: string | null\n}\n\nfunction HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>) {\n const src = backdropPath\n ? `https://image.tmdb.org/t/p/original${backdropPath}`\n : undefined\n\n return (\n <>\n {src ? (\n <NextImage\n src={src}\n alt={title ?? 'Unknown'}\n fill\n preload\n sizes=\"100vw\"\n className=\"ui:h-full ui:w-full\"\n fallback={\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n }\n />\n ) : (\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n )}\n {/* Gradient Overlay */}\n <div className=\"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0\" />\n </>\n )\n}\n\nexport default HeroImage\n"],"mappings":"AAgBI,
|
|
1
|
+
{"version":3,"sources":["../../../src/next/HeroImage/HeroImage.tsx"],"sourcesContent":["import { Skeleton } from '../../Skeleton'\nimport { NextImage } from '../Image'\n\nexport interface NextHeroImageProps {\n /** Backdrop path from TMDB API (e.g. \"/abc123.jpg\") */\n backdropPath?: string | null\n /** Alt text for the image */\n title?: string | null\n}\n\nfunction HeroImage({ backdropPath, title }: Readonly<NextHeroImageProps>) {\n const src = backdropPath\n ? `https://image.tmdb.org/t/p/original${backdropPath}`\n : undefined\n\n return (\n <>\n {src ? (\n <NextImage\n src={src}\n alt={title ?? 'Unknown'}\n fill\n preload\n sizes=\"100vw\"\n className=\"ui:h-full ui:w-full\"\n fallback={\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n }\n />\n ) : (\n <Skeleton\n data-testid=\"hero-image-skeleton\"\n variant=\"rectangle\"\n width=\"ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0\"\n aspectRatio=\"21/9\"\n rounded={false}\n />\n )}\n {/* Gradient Overlay */}\n <div className=\"ui:absolute ui:inset-0 ui:bg-gradient-to-t ui:from-black/80 ui:via-black/40 ui:to-transparent ui:z-1 ui:top-0 ui:left-0 ui:right-0 ui:bottom-0\" />\n </>\n )\n}\n\nexport default HeroImage\n"],"mappings":"AAgBI,mBAAAA,EAUQ,OAAAC,EAVR,QAAAC,MAAA,oBAhBJ,OAAS,YAAAC,MAAgB,iBACzB,OAAS,aAAAC,MAAiB,WAS1B,SAASC,EAAU,CAAE,aAAAC,EAAc,MAAAC,CAAM,EAAiC,CACxE,MAAMC,EAAMF,EACR,sCAAsCA,CAAY,GAClD,OAEJ,OACEJ,EAAAF,EAAA,CACG,UAAAQ,EACCP,EAACG,EAAA,CACC,IAAKI,EACL,IAAKD,GAAS,UACd,KAAI,GACJ,QAAO,GACP,MAAM,QACN,UAAU,sBACV,SACEN,EAACE,EAAA,CACC,cAAY,sBACZ,QAAQ,YACR,MAAM,wDACN,YAAY,OACZ,QAAS,GACX,EAEJ,EAEAF,EAACE,EAAA,CACC,cAAY,sBACZ,QAAQ,YACR,MAAM,wDACN,YAAY,OACZ,QAAS,GACX,EAGFF,EAAC,OAAI,UAAU,iJAAiJ,GAClK,CAEJ,CAEA,IAAOQ,EAAQJ","names":["Fragment","jsx","jsxs","Skeleton","NextImage","HeroImage","backdropPath","title","src","HeroImage_default"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/HeroImage/index.ts"],"sourcesContent":["export { default as HeroImage } from './HeroImage'\nexport type { NextHeroImageProps } from './HeroImage'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/next/HeroImage/index.ts"],"sourcesContent":["export { default as HeroImage } from './HeroImage'\nexport type { NextHeroImageProps } from './HeroImage'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAA4B","names":["default"]}
|
|
@@ -1,84 +1,2 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import clsx from "clsx";
|
|
4
|
-
import Image from "next/image";
|
|
5
|
-
import { useCallback, useEffect, useRef, useState } from "react";
|
|
6
|
-
import { Icon } from "../../Icon";
|
|
7
|
-
function NextImage({
|
|
8
|
-
fallback,
|
|
9
|
-
aspectRatio,
|
|
10
|
-
blurDataURL,
|
|
11
|
-
className,
|
|
12
|
-
onLoad,
|
|
13
|
-
onError,
|
|
14
|
-
style,
|
|
15
|
-
...rest
|
|
16
|
-
}) {
|
|
17
|
-
const [state, setState] = useState("loading");
|
|
18
|
-
const wrapperRef = useRef(null);
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
const img = wrapperRef.current?.querySelector("img");
|
|
21
|
-
console.warn("NextImage::useEffect - img: ", img);
|
|
22
|
-
if (img?.complete && img.naturalWidth > 0) {
|
|
23
|
-
console.warn("NextImage::useEffect - loaded from cache");
|
|
24
|
-
setState("loaded");
|
|
25
|
-
}
|
|
26
|
-
}, []);
|
|
27
|
-
const handleLoad = useCallback(
|
|
28
|
-
(e) => {
|
|
29
|
-
setState("loaded");
|
|
30
|
-
console.warn("NextImage::handleLoad::loaded");
|
|
31
|
-
if (typeof onLoad === "function") {
|
|
32
|
-
onLoad(e);
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
[onLoad]
|
|
36
|
-
);
|
|
37
|
-
const handleError = useCallback(
|
|
38
|
-
(e) => {
|
|
39
|
-
setState("error");
|
|
40
|
-
console.warn("NextImage::handleError::error");
|
|
41
|
-
if (typeof onError === "function") {
|
|
42
|
-
onError(e);
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
[onError]
|
|
46
|
-
);
|
|
47
|
-
const defaultFallback = /* @__PURE__ */ jsx("div", { className: "ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted", children: /* @__PURE__ */ jsx(
|
|
48
|
-
Icon,
|
|
49
|
-
{
|
|
50
|
-
name: "Photo",
|
|
51
|
-
size: 48,
|
|
52
|
-
className: "ui:text-muted-foreground",
|
|
53
|
-
"aria-hidden": "true"
|
|
54
|
-
}
|
|
55
|
-
) });
|
|
56
|
-
return /* @__PURE__ */ jsx(
|
|
57
|
-
"div",
|
|
58
|
-
{
|
|
59
|
-
className: clsx("ui:relative ui:overflow-hidden ui:bg-muted", className),
|
|
60
|
-
style: aspectRatio ? { aspectRatio, ...style } : style,
|
|
61
|
-
"data-state": state,
|
|
62
|
-
ref: wrapperRef,
|
|
63
|
-
children: state === "error" ? fallback ?? defaultFallback : /* @__PURE__ */ jsx(
|
|
64
|
-
Image,
|
|
65
|
-
{
|
|
66
|
-
...rest,
|
|
67
|
-
className: clsx(
|
|
68
|
-
"ui:transition-opacity ui:duration-300",
|
|
69
|
-
state === "loaded" ? "ui:opacity-100" : "ui:opacity-0"
|
|
70
|
-
),
|
|
71
|
-
onLoad: handleLoad,
|
|
72
|
-
onError: handleError,
|
|
73
|
-
placeholder: blurDataURL ? "blur" : "empty",
|
|
74
|
-
blurDataURL
|
|
75
|
-
}
|
|
76
|
-
)
|
|
77
|
-
}
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
var NextImage_default = NextImage;
|
|
81
|
-
export {
|
|
82
|
-
NextImage_default as default
|
|
83
|
-
};
|
|
1
|
+
"use client";import{jsx as t}from"react/jsx-runtime";import c from"clsx";import h from"next/image";import{useCallback as s,useEffect as N,useRef as x,useState as E}from"react";import{Icon as v}from"../../Icon";function S({fallback:d,aspectRatio:n,blurDataURL:m,className:f,onLoad:a,onError:o,style:l,...p}){const[r,i]=E("loading"),u=x(null);N(()=>{const e=u.current?.querySelector("img");console.warn("NextImage::useEffect - img: ",e),e?.complete&&e.naturalWidth>0&&(console.warn("NextImage::useEffect - loaded from cache"),i("loaded"))},[]);const g=s(e=>{i("loaded"),console.warn("NextImage::handleLoad::loaded"),typeof a=="function"&&a(e)},[a]),y=s(e=>{i("error"),console.warn("NextImage::handleError::error"),typeof o=="function"&&o(e)},[o]),I=t("div",{className:"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted",children:t(v,{name:"Photo",size:48,className:"ui:text-muted-foreground","aria-hidden":"true"})});return t("div",{className:c("ui:relative ui:overflow-hidden ui:bg-muted",f),style:n?{aspectRatio:n,...l}:l,"data-state":r,ref:u,children:r==="error"?d??I:t(h,{...p,className:c("ui:transition-opacity ui:duration-300",r==="loaded"?"ui:opacity-100":"ui:opacity-0"),onLoad:g,onError:y,placeholder:m?"blur":"empty",blurDataURL:m})})}var H=S;export{H as default};
|
|
84
2
|
//# sourceMappingURL=NextImage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/Image/NextImage.tsx"],"sourcesContent":["'use client'\n\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../../Icon'\n\nimport type { NextImageProps } from './NextImage.types'\nimport type { ImageState } from '../../Image'\nimport type { SyntheticEvent } from 'react'\n\nfunction NextImage({\n fallback,\n aspectRatio,\n blurDataURL,\n className,\n onLoad,\n onError,\n style,\n ...rest\n}: Readonly<NextImageProps>) {\n const [state, setState] = useState<ImageState>('loading')\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const img = wrapperRef.current?.querySelector('img')\n console.warn('NextImage::useEffect - img: ', img)\n if (img?.complete && img.naturalWidth > 0) {\n console.warn('NextImage::useEffect - loaded from cache')\n setState('loaded')\n }\n }, [])\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('loaded')\n console.warn('NextImage::handleLoad::loaded')\n if (typeof onLoad === 'function') {\n onLoad(e as Parameters<typeof onLoad>[0])\n }\n },\n [onLoad]\n )\n\n const handleError = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('error')\n console.warn('NextImage::handleError::error')\n if (typeof onError === 'function') {\n onError(e as Parameters<typeof onError>[0])\n }\n },\n [onError]\n )\n\n const defaultFallback = (\n <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n <Icon\n name=\"Photo\"\n size={48}\n className=\"ui:text-muted-foreground\"\n aria-hidden=\"true\"\n />\n </div>\n )\n\n return (\n <div\n className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n style={aspectRatio ? { aspectRatio, ...style } : style}\n data-state={state}\n ref={wrapperRef}\n >\n {state === 'error' ? (\n (fallback ?? defaultFallback)\n ) : (\n <Image\n {...rest}\n className={clsx(\n 'ui:transition-opacity ui:duration-300',\n state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0'\n )}\n onLoad={handleLoad}\n onError={handleError}\n placeholder={blurDataURL ? 'blur' : 'empty'}\n blurDataURL={blurDataURL}\n />\n )}\n </div>\n )\n}\n\nexport default NextImage\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/next/Image/NextImage.tsx"],"sourcesContent":["'use client'\n\nimport clsx from 'clsx'\nimport Image from 'next/image'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nimport { Icon } from '../../Icon'\n\nimport type { NextImageProps } from './NextImage.types'\nimport type { ImageState } from '../../Image'\nimport type { SyntheticEvent } from 'react'\n\nfunction NextImage({\n fallback,\n aspectRatio,\n blurDataURL,\n className,\n onLoad,\n onError,\n style,\n ...rest\n}: Readonly<NextImageProps>) {\n const [state, setState] = useState<ImageState>('loading')\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const img = wrapperRef.current?.querySelector('img')\n console.warn('NextImage::useEffect - img: ', img)\n if (img?.complete && img.naturalWidth > 0) {\n console.warn('NextImage::useEffect - loaded from cache')\n setState('loaded')\n }\n }, [])\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('loaded')\n console.warn('NextImage::handleLoad::loaded')\n if (typeof onLoad === 'function') {\n onLoad(e as Parameters<typeof onLoad>[0])\n }\n },\n [onLoad]\n )\n\n const handleError = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('error')\n console.warn('NextImage::handleError::error')\n if (typeof onError === 'function') {\n onError(e as Parameters<typeof onError>[0])\n }\n },\n [onError]\n )\n\n const defaultFallback = (\n <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted\">\n <Icon\n name=\"Photo\"\n size={48}\n className=\"ui:text-muted-foreground\"\n aria-hidden=\"true\"\n />\n </div>\n )\n\n return (\n <div\n className={clsx('ui:relative ui:overflow-hidden ui:bg-muted', className)}\n style={aspectRatio ? { aspectRatio, ...style } : style}\n data-state={state}\n ref={wrapperRef}\n >\n {state === 'error' ? (\n (fallback ?? defaultFallback)\n ) : (\n <Image\n {...rest}\n className={clsx(\n 'ui:transition-opacity ui:duration-300',\n state === 'loaded' ? 'ui:opacity-100' : 'ui:opacity-0'\n )}\n onLoad={handleLoad}\n onError={handleError}\n placeholder={blurDataURL ? 'blur' : 'empty'}\n blurDataURL={blurDataURL}\n />\n )}\n </div>\n )\n}\n\nexport default NextImage\n"],"mappings":"aA2DM,cAAAA,MAAA,oBAzDN,OAAOC,MAAU,OACjB,OAAOC,MAAW,aAClB,OAAS,eAAAC,EAAa,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAEzD,OAAS,QAAAC,MAAY,aAMrB,SAASC,EAAU,CACjB,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAA6B,CAC3B,KAAM,CAACC,EAAOC,CAAQ,EAAIZ,EAAqB,SAAS,EAElDa,EAAad,EAAuB,IAAI,EAE9CD,EAAU,IAAM,CACd,MAAMgB,EAAMD,EAAW,SAAS,cAAc,KAAK,EACnD,QAAQ,KAAK,+BAAgCC,CAAG,EAC5CA,GAAK,UAAYA,EAAI,aAAe,IACtC,QAAQ,KAAK,0CAA0C,EACvDF,EAAS,QAAQ,EAErB,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAalB,EAChB,GAAwC,CACvCe,EAAS,QAAQ,EACjB,QAAQ,KAAK,+BAA+B,EACxC,OAAOL,GAAW,YACpBA,EAAO,CAAiC,CAE5C,EACA,CAACA,CAAM,CACT,EAEMS,EAAcnB,EACjB,GAAwC,CACvCe,EAAS,OAAO,EAChB,QAAQ,KAAK,+BAA+B,EACxC,OAAOJ,GAAY,YACrBA,EAAQ,CAAkC,CAE9C,EACA,CAACA,CAAO,CACV,EAEMS,EACJvB,EAAC,OAAI,UAAU,4EACb,SAAAA,EAACO,EAAA,CACC,KAAK,QACL,KAAM,GACN,UAAU,2BACV,cAAY,OACd,EACF,EAGF,OACEP,EAAC,OACC,UAAWC,EAAK,6CAA8CW,CAAS,EACvE,MAAOF,EAAc,CAAE,YAAAA,EAAa,GAAGK,CAAM,EAAIA,EACjD,aAAYE,EACZ,IAAKE,EAEJ,SAAAF,IAAU,QACRR,GAAYc,EAEbvB,EAACE,EAAA,CACE,GAAGc,EACJ,UAAWf,EACT,wCACAgB,IAAU,SAAW,iBAAmB,cAC1C,EACA,OAAQI,EACR,QAASC,EACT,YAAaX,EAAc,OAAS,QACpC,YAAaA,EACf,EAEJ,CAEJ,CAEA,IAAOa,EAAQhB","names":["jsx","clsx","Image","useCallback","useEffect","useRef","useState","Icon","NextImage","fallback","aspectRatio","blurDataURL","className","onLoad","onError","style","rest","state","setState","wrapperRef","img","handleLoad","handleError","defaultFallback","NextImage_default"]}
|
package/dist/next/Image/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/Image/index.ts"],"sourcesContent":["export { default as NextImage } from './NextImage'\nexport type { NextImageProps } from './NextImage.types'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/next/Image/index.ts"],"sourcesContent":["export { default as NextImage } from './NextImage'\nexport type { NextImageProps } from './NextImage.types'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAA4B","names":["default"]}
|
|
@@ -1,44 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Link from "next/link";
|
|
3
|
-
import { getMovieCardLinkClasses } from "../../MovieCard/MovieCard.utils";
|
|
4
|
-
import MovieCardContent from "./MovieCardContent";
|
|
5
|
-
function MovieCard({
|
|
6
|
-
id,
|
|
7
|
-
title,
|
|
8
|
-
posterUrl,
|
|
9
|
-
voteAverage,
|
|
10
|
-
year,
|
|
11
|
-
className,
|
|
12
|
-
imageLoading = "lazy",
|
|
13
|
-
blurDataURL,
|
|
14
|
-
as = "card",
|
|
15
|
-
...rest
|
|
16
|
-
}) {
|
|
17
|
-
const href = "href" in rest ? rest.href : void 0;
|
|
18
|
-
const onClick = "onClick" in rest ? rest.onClick : void 0;
|
|
19
|
-
const isInteractive = as === "link" || as === "button";
|
|
20
|
-
const cardContent = /* @__PURE__ */ jsx(
|
|
21
|
-
MovieCardContent,
|
|
22
|
-
{
|
|
23
|
-
id,
|
|
24
|
-
title,
|
|
25
|
-
posterUrl,
|
|
26
|
-
voteAverage,
|
|
27
|
-
year,
|
|
28
|
-
className,
|
|
29
|
-
imageLoading,
|
|
30
|
-
isInteractive,
|
|
31
|
-
onClick: as === "button" ? onClick : void 0,
|
|
32
|
-
blurDataURL
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
if (as === "link" && href) {
|
|
36
|
-
return /* @__PURE__ */ jsx(Link, { href, className: getMovieCardLinkClasses(), children: cardContent });
|
|
37
|
-
}
|
|
38
|
-
return cardContent;
|
|
39
|
-
}
|
|
40
|
-
var MovieCard_default = MovieCard;
|
|
41
|
-
export {
|
|
42
|
-
MovieCard_default as default
|
|
43
|
-
};
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import m from"next/link";import{getMovieCardLinkClasses as p}from"../../MovieCard/MovieCard.utils";import k from"./MovieCardContent";function u({id:r,title:a,posterUrl:d,voteAverage:c,year:l,className:f,imageLoading:C="lazy",blurDataURL:s,as:e="card",...i}){const n="href"in i?i.href:void 0,v="onClick"in i?i.onClick:void 0,o=t(k,{id:r,title:a,posterUrl:d,voteAverage:c,year:l,className:f,imageLoading:C,isInteractive:e==="link"||e==="button",onClick:e==="button"?v:void 0,blurDataURL:s});return e==="link"&&n?t(m,{href:n,className:p(),children:o}):o}var h=u;export{h as default};
|
|
44
2
|
//# sourceMappingURL=MovieCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/next/MovieCard/MovieCard.tsx"],"sourcesContent":["import Link from 'next/link'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\n\nimport MovieCardContent from './MovieCardContent'\n\nimport type { NextMovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n id,\n title,\n posterUrl,\n voteAverage,\n year,\n className,\n imageLoading = 'lazy',\n blurDataURL,\n as = 'card',\n ...rest\n}: Readonly<NextMovieCardProps>) {\n const href = 'href' in rest ? rest.href : undefined\n const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n const isInteractive = as === 'link' || as === 'button'\n\n const cardContent = (\n <MovieCardContent\n id={id}\n title={title}\n posterUrl={posterUrl}\n voteAverage={voteAverage}\n year={year}\n className={className}\n imageLoading={imageLoading}\n isInteractive={isInteractive}\n onClick={as === 'button' ? onClick : undefined}\n blurDataURL={blurDataURL}\n />\n )\n\n if (as === 'link' && href) {\n return (\n <Link href={href} className={getMovieCardLinkClasses()}>\n {cardContent}\n </Link>\n )\n }\n\n return cardContent\n}\n\nexport default MovieCard\n"],"mappings":"AA0BI
|
|
1
|
+
{"version":3,"sources":["../../../src/next/MovieCard/MovieCard.tsx"],"sourcesContent":["import Link from 'next/link'\n\nimport { getMovieCardLinkClasses } from '../../MovieCard/MovieCard.utils'\n\nimport MovieCardContent from './MovieCardContent'\n\nimport type { NextMovieCardProps } from './MovieCard.types'\n\nfunction MovieCard({\n id,\n title,\n posterUrl,\n voteAverage,\n year,\n className,\n imageLoading = 'lazy',\n blurDataURL,\n as = 'card',\n ...rest\n}: Readonly<NextMovieCardProps>) {\n const href = 'href' in rest ? rest.href : undefined\n const onClick = 'onClick' in rest ? rest.onClick : undefined\n\n const isInteractive = as === 'link' || as === 'button'\n\n const cardContent = (\n <MovieCardContent\n id={id}\n title={title}\n posterUrl={posterUrl}\n voteAverage={voteAverage}\n year={year}\n className={className}\n imageLoading={imageLoading}\n isInteractive={isInteractive}\n onClick={as === 'button' ? onClick : undefined}\n blurDataURL={blurDataURL}\n />\n )\n\n if (as === 'link' && href) {\n return (\n <Link href={href} className={getMovieCardLinkClasses()}>\n {cardContent}\n </Link>\n )\n }\n\n return cardContent\n}\n\nexport default MovieCard\n"],"mappings":"AA0BI,cAAAA,MAAA,oBA1BJ,OAAOC,MAAU,YAEjB,OAAS,2BAAAC,MAA+B,kCAExC,OAAOC,MAAsB,qBAI7B,SAASC,EAAU,CACjB,GAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EACA,UAAAC,EACA,aAAAC,EAAe,OACf,YAAAC,EACA,GAAAC,EAAK,OACL,GAAGC,CACL,EAAiC,CAC/B,MAAMC,EAAO,SAAUD,EAAOA,EAAK,KAAO,OACpCE,EAAU,YAAaF,EAAOA,EAAK,QAAU,OAI7CG,EACJjB,EAACG,EAAA,CACC,GAAIE,EACJ,MAAOC,EACP,UAAWC,EACX,YAAaC,EACb,KAAMC,EACN,UAAWC,EACX,aAAcC,EACd,cAXkBE,IAAO,QAAUA,IAAO,SAY1C,QAASA,IAAO,SAAWG,EAAU,OACrC,YAAaJ,EACf,EAGF,OAAIC,IAAO,QAAUE,EAEjBf,EAACC,EAAA,CAAK,KAAMc,EAAM,UAAWb,EAAwB,EAClD,SAAAe,EACH,EAIGA,CACT,CAEA,IAAOC,EAAQd","names":["jsx","Link","getMovieCardLinkClasses","MovieCardContent","MovieCard","id","title","posterUrl","voteAverage","year","className","imageLoading","blurDataURL","as","rest","href","onClick","cardContent","MovieCard_default"]}
|
|
@@ -1,79 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { Card } from "../../Card";
|
|
3
|
-
import { getMovieCardClasses } from "../../MovieCard/MovieCard.utils";
|
|
4
|
-
import { Rating } from "../../Rating";
|
|
5
|
-
import { Typography } from "../../Typography";
|
|
6
|
-
import { NextImage } from "../Image";
|
|
7
|
-
function MovieCardContent({
|
|
8
|
-
id,
|
|
9
|
-
title,
|
|
10
|
-
posterUrl,
|
|
11
|
-
voteAverage,
|
|
12
|
-
year,
|
|
13
|
-
className,
|
|
14
|
-
imageLoading = "lazy",
|
|
15
|
-
isInteractive,
|
|
16
|
-
onClick,
|
|
17
|
-
blurDataURL
|
|
18
|
-
}) {
|
|
19
|
-
const src = `https://image.tmdb.org/t/p/w342${posterUrl}`;
|
|
20
|
-
return /* @__PURE__ */ jsxs(
|
|
21
|
-
Card,
|
|
22
|
-
{
|
|
23
|
-
variant: "ghost",
|
|
24
|
-
className: getMovieCardClasses(isInteractive, className),
|
|
25
|
-
onClick,
|
|
26
|
-
"data-testid": `movie-card-${String(id)}`,
|
|
27
|
-
children: [
|
|
28
|
-
/* @__PURE__ */ jsxs("div", { className: "ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200", children: [
|
|
29
|
-
/* @__PURE__ */ jsx(
|
|
30
|
-
NextImage,
|
|
31
|
-
{
|
|
32
|
-
src,
|
|
33
|
-
alt: title,
|
|
34
|
-
width: 150,
|
|
35
|
-
height: 225,
|
|
36
|
-
loading: imageLoading,
|
|
37
|
-
blurDataURL,
|
|
38
|
-
className: "ui:h-full ui:w-full"
|
|
39
|
-
}
|
|
40
|
-
),
|
|
41
|
-
/* @__PURE__ */ jsx("div", { className: "ui:absolute ui:bottom-2 ui:right-2 ui:flex ui:items-center ui:justify-center ui:rounded-full ui:bg-white/80 ui:p-1", children: /* @__PURE__ */ jsx(
|
|
42
|
-
Rating,
|
|
43
|
-
{
|
|
44
|
-
value: voteAverage,
|
|
45
|
-
size: "sm",
|
|
46
|
-
variant: "circle",
|
|
47
|
-
trackClassName: "ui:text-gray-200",
|
|
48
|
-
className: "ui:drop-shadow"
|
|
49
|
-
}
|
|
50
|
-
) })
|
|
51
|
-
] }),
|
|
52
|
-
/* @__PURE__ */ jsxs("div", { className: "ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1", children: [
|
|
53
|
-
/* @__PURE__ */ jsx(
|
|
54
|
-
Typography,
|
|
55
|
-
{
|
|
56
|
-
variant: "label",
|
|
57
|
-
as: "h3",
|
|
58
|
-
className: "ui:line-clamp-2",
|
|
59
|
-
title,
|
|
60
|
-
children: title
|
|
61
|
-
}
|
|
62
|
-
),
|
|
63
|
-
year && /* @__PURE__ */ jsx(
|
|
64
|
-
Typography,
|
|
65
|
-
{
|
|
66
|
-
variant: "caption-xs",
|
|
67
|
-
className: "ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
|
|
68
|
-
children: year
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
] })
|
|
72
|
-
]
|
|
73
|
-
}
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
export {
|
|
77
|
-
MovieCardContent as default
|
|
78
|
-
};
|
|
1
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Card as p}from"../../Card";import{getMovieCardClasses as f}from"../../MovieCard/MovieCard.utils";import{Rating as v}from"../../Rating";import{Typography as r}from"../../Typography";import{NextImage as h}from"../Image";function N({id:o,title:i,posterUrl:s,voteAverage:l,year:t,className:n,imageLoading:u="lazy",isInteractive:d,onClick:m,blurDataURL:g}){const c=`https://image.tmdb.org/t/p/w342${s}`;return a(p,{variant:"ghost",className:f(d,n),onClick:m,"data-testid":`movie-card-${String(o)}`,children:[a("div",{className:"ui:relative ui:aspect-[2/3] ui:w-full ui:overflow-hidden ui:rounded-md ui:bg-gray-200",children:[e(h,{src:c,alt:i,width:150,height:225,loading:u,blurDataURL:g,className:"ui:h-full ui:w-full"}),e("div",{className:"ui:absolute ui:bottom-2 ui:right-2 ui:flex ui:items-center ui:justify-center ui:rounded-full ui:bg-white/80 ui:p-1",children:e(v,{value:l,size:"sm",variant:"circle",trackClassName:"ui:text-gray-200",className:"ui:drop-shadow"})})]}),a("div",{className:"ui:mt-2 ui:flex ui:flex-col ui:gap-0.5 ui:px-1",children:[e(r,{variant:"label",as:"h3",className:"ui:line-clamp-2",title:i,children:i}),t&&e(r,{variant:"caption-xs",className:"ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",children:t})]})]})}export{N as default};
|
|
79
2
|
//# sourceMappingURL=MovieCardContent.js.map
|