@vite-mf-monorepo/ui 0.4.9 → 0.4.11
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t}from"react/jsx-runtime";import
|
|
1
|
+
"use client";import{jsx as t}from"react/jsx-runtime";import s from"clsx";import I from"next/image";import{useCallback as c,useEffect as v,useRef as E,useState as N}from"react";import{Icon as S}from"../../Icon";function x({fallback:f,aspectRatio:m,blurDataURL:n,className:d,onLoad:a,onError:o,style:u,...p}){const[i,r]=N("loading"),l=E(null);v(()=>{const e=l.current?.querySelector("img");e?.complete&&e.naturalWidth>0&&r("loaded")},[]);const y=c(e=>{r("loaded"),typeof a=="function"&&a(e)},[a]),g=c(e=>{r("error"),typeof o=="function"&&o(e)},[o]),h=t("div",{className:"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:bg-muted",children:t(S,{name:"Photo",size:48,className:"ui:text-muted-foreground","aria-hidden":"true"})});return t("div",{className:s("ui:relative ui:overflow-hidden ui:bg-muted",d),style:m?{aspectRatio:m,...u}:u,"data-state":i,ref:l,children:i==="error"?f??h:t(I,{...p,className:s("ui:transition-opacity ui:duration-300",i==="loaded"?"ui:opacity-100":"ui:opacity-0"),onLoad:y,onError:g,placeholder:n?"blur":"empty",blurDataURL:n})})}var H=x;export{H as default};
|
|
2
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
|
|
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\n if (img?.complete && img.naturalWidth > 0) {\n setState('loaded')\n }\n }, [])\n\n const handleLoad = useCallback(\n (e: SyntheticEvent<HTMLImageElement>) => {\n setState('loaded')\n\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\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":"aA0DM,cAAAA,MAAA,oBAxDN,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,EAE/CC,GAAK,UAAYA,EAAI,aAAe,GACtCF,EAAS,QAAQ,CAErB,EAAG,CAAC,CAAC,EAEL,MAAMG,EAAalB,EAChB,GAAwC,CACvCe,EAAS,QAAQ,EAEb,OAAOL,GAAW,YACpBA,EAAO,CAAiC,CAE5C,EACA,CAACA,CAAM,CACT,EAEMS,EAAcnB,EACjB,GAAwC,CACvCe,EAAS,OAAO,EAEZ,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/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Button as t}from"./Button";import{HeroImage as p}from"./HeroImage";import{NextImage as a}from"./Image";import{MovieCard as s}from"./MovieCard";export{t as Button,p as HeroImage,s as MovieCard,a as NextImage};
|
|
1
|
+
"use client";import{Button as t}from"./Button";import{HeroImage as p}from"./HeroImage";import{NextImage as a}from"./Image";import{MovieCard as s}from"./MovieCard";export{t as Button,p as HeroImage,s as MovieCard,a as NextImage};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/next/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/next/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../src/next/index.ts"],"sourcesContent":["'use client'\n\nexport { Button } from './Button'\nexport type {\n NextButtonProps,\n NextButtonAsButton,\n NextButtonAsLink,\n} from './Button'\n\nexport { HeroImage } from './HeroImage'\nexport type { NextHeroImageProps } from './HeroImage'\n\nexport { NextImage } from './Image'\nexport type { NextImageProps } from './Image'\n\nexport { MovieCard } from './MovieCard'\nexport type {\n NextMovieCardProps,\n NextMovieCardAsLink,\n MovieCardBaseProps,\n MovieCardAsCard,\n MovieCardAsButton,\n} from './MovieCard'\n"],"mappings":"aAEA,OAAS,UAAAA,MAAc,WAOvB,OAAS,aAAAC,MAAiB,cAG1B,OAAS,aAAAC,MAAiB,UAG1B,OAAS,aAAAC,MAAiB","names":["Button","HeroImage","NextImage","MovieCard"]}
|