@vite-mf-monorepo/ui 0.4.21 → 0.4.22
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/Carousel/CarouselError.js +1 -1
- package/dist/Carousel/CarouselError.js.map +1 -1
- package/dist/Carousel/CarouselLoading.js +1 -1
- package/dist/Carousel/CarouselLoading.js.map +1 -1
- package/dist/Skeleton/Skeleton.js +1 -1
- package/dist/Skeleton/Skeleton.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Icon as t}from"../Icon";function a({message:i="Failed to load data"}){return r("div",{className:"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center","data-testid":"carousel-error",children:[e(t,{name:"ExclamationTriangle",size:48,className:"ui:text-red-500"}),r("div",{className:"ui:flex ui:flex-col ui:gap-1",children:[e("p",{className:"ui:text-sm ui:font-semibold ui:text-red-900",children:"Failed to fetch data"}),e("p",{className:"ui:text-sm ui:text-red-700",children:i})]})]})}var u=a;export{u as default};
|
|
2
2
|
//# sourceMappingURL=CarouselError.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Carousel/CarouselError.tsx"],"sourcesContent":["import { Icon } from '../Icon'\n\nexport interface CarouselErrorProps {\n message?: string\n}\n\nfunction CarouselError({\n message = 'Failed to load data',\n}: Readonly<CarouselErrorProps>) {\n return (\n <div
|
|
1
|
+
{"version":3,"sources":["../../src/Carousel/CarouselError.tsx"],"sourcesContent":["import { Icon } from '../Icon'\n\nexport interface CarouselErrorProps {\n message?: string\n}\n\nfunction CarouselError({\n message = 'Failed to load data',\n}: Readonly<CarouselErrorProps>) {\n return (\n <div\n className=\"ui:flex ui:flex-col ui:items-center ui:justify-center ui:gap-3 ui:rounded-lg ui:border ui:border-red-200 ui:bg-red-50 ui:p-8 ui:text-center\"\n data-testid=\"carousel-error\"\n >\n <Icon name=\"ExclamationTriangle\" size={48} className=\"ui:text-red-500\" />\n <div className=\"ui:flex ui:flex-col ui:gap-1\">\n <p className=\"ui:text-sm ui:font-semibold ui:text-red-900\">\n Failed to fetch data\n </p>\n <p className=\"ui:text-sm ui:text-red-700\">{message}</p>\n </div>\n </div>\n )\n}\n\nexport default CarouselError\n"],"mappings":"AAcM,cAAAA,EACA,QAAAC,MADA,oBAdN,OAAS,QAAAC,MAAY,UAMrB,SAASC,EAAc,CACrB,QAAAC,EAAU,qBACZ,EAAiC,CAC/B,OACEH,EAAC,OACC,UAAU,8IACV,cAAY,iBAEZ,UAAAD,EAACE,EAAA,CAAK,KAAK,sBAAsB,KAAM,GAAI,UAAU,kBAAkB,EACvED,EAAC,OAAI,UAAU,+BACb,UAAAD,EAAC,KAAE,UAAU,8CAA8C,gCAE3D,EACAA,EAAC,KAAE,UAAU,6BAA8B,SAAAI,EAAQ,GACrD,GACF,CAEJ,CAEA,IAAOC,EAAQF","names":["jsx","jsxs","Icon","CarouselError","message","CarouselError_default"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as i,jsxs as u}from"react/jsx-runtime";import l from"../Skeleton/Skeleton";function h({count:
|
|
1
|
+
import{jsx as i,jsxs as u}from"react/jsx-runtime";import l from"../Skeleton/Skeleton";function h({count:a=6,cardWidth:e=150,cardHeight:n=225,showTitle:t=!0,showSubtitle:o=!0,rounded:d=!0}){return i("div",{className:"ui:overflow-x-auto ui:flex ui:gap-4","data-testid":"carousel-loading",children:Array.from({length:a}).map((g,r)=>u("div",{style:{width:e,minWidth:e,maxWidth:e},children:[i("div",{style:{width:e,height:n},children:i(l,{variant:"rectangle",width:"ui:w-full",height:"ui:h-full",rounded:d})}),(t||o)&&u("div",{style:{marginTop:8,display:"flex",flexDirection:"column",gap:8},children:[t&&i("div",{style:{width:e,height:16},children:i(l,{variant:"line",width:"ui:w-full",height:"ui:h-full"})}),o&&i("div",{style:{width:e*.75,height:12},children:i(l,{variant:"line",width:"ui:w-full",height:"ui:h-full"})})]})]},r))})}var f=h;export{f as default};
|
|
2
2
|
//# sourceMappingURL=CarouselLoading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Carousel/CarouselLoading.tsx"],"sourcesContent":["import Skeleton from '../Skeleton/Skeleton'\n\nexport interface CarouselLoadingProps {\n /** Number of skeleton cards to display */\n count?: number\n /** Width of each card in pixels */\n cardWidth?: number\n /** Height of each card in pixels */\n cardHeight?: number\n /** Show skeleton for title */\n showTitle?: boolean\n /** Show skeleton for subtitle/date */\n showSubtitle?: boolean\n /** Apply rounded corners to skeleton */\n rounded?: boolean\n}\n\n/**\n * CarouselLoading - Loading state for carousel with skeleton cards\n *\n * Displays a horizontal scrollable list of skeleton placeholders\n * matching the structure of MovieCard components.\n */\nfunction CarouselLoading({\n count = 6,\n cardWidth = 150,\n cardHeight = 225,\n showTitle = true,\n showSubtitle = true,\n rounded = true,\n}: Readonly<CarouselLoadingProps>) {\n return (\n <div
|
|
1
|
+
{"version":3,"sources":["../../src/Carousel/CarouselLoading.tsx"],"sourcesContent":["import Skeleton from '../Skeleton/Skeleton'\n\nexport interface CarouselLoadingProps {\n /** Number of skeleton cards to display */\n count?: number\n /** Width of each card in pixels */\n cardWidth?: number\n /** Height of each card in pixels */\n cardHeight?: number\n /** Show skeleton for title */\n showTitle?: boolean\n /** Show skeleton for subtitle/date */\n showSubtitle?: boolean\n /** Apply rounded corners to skeleton */\n rounded?: boolean\n}\n\n/**\n * CarouselLoading - Loading state for carousel with skeleton cards\n *\n * Displays a horizontal scrollable list of skeleton placeholders\n * matching the structure of MovieCard components.\n */\nfunction CarouselLoading({\n count = 6,\n cardWidth = 150,\n cardHeight = 225,\n showTitle = true,\n showSubtitle = true,\n rounded = true,\n}: Readonly<CarouselLoadingProps>) {\n return (\n <div\n className=\"ui:overflow-x-auto ui:flex ui:gap-4\"\n data-testid=\"carousel-loading\"\n >\n {Array.from({ length: count }).map((_, i) => (\n <div\n key={i}\n style={{ width: cardWidth, minWidth: cardWidth, maxWidth: cardWidth }}\n >\n <div style={{ width: cardWidth, height: cardHeight }}>\n <Skeleton\n variant=\"rectangle\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n rounded={rounded}\n />\n </div>\n {(showTitle || showSubtitle) && (\n <div\n style={{\n marginTop: 8,\n display: 'flex',\n flexDirection: 'column',\n gap: 8,\n }}\n >\n {showTitle && (\n <div style={{ width: cardWidth, height: 16 }}>\n <Skeleton\n variant=\"line\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n />\n </div>\n )}\n {showSubtitle && (\n <div style={{ width: cardWidth * 0.75, height: 12 }}>\n <Skeleton\n variant=\"line\"\n width=\"ui:w-full\"\n height=\"ui:h-full\"\n />\n </div>\n )}\n </div>\n )}\n </div>\n ))}\n </div>\n )\n}\n\nexport default CarouselLoading\n"],"mappings":"AA0CY,cAAAA,EAQA,QAAAC,MARA,oBA1CZ,OAAOC,MAAc,uBAuBrB,SAASC,EAAgB,CACvB,MAAAC,EAAQ,EACR,UAAAC,EAAY,IACZ,WAAAC,EAAa,IACb,UAAAC,EAAY,GACZ,aAAAC,EAAe,GACf,QAAAC,EAAU,EACZ,EAAmC,CACjC,OACET,EAAC,OACC,UAAU,sCACV,cAAY,mBAEX,eAAM,KAAK,CAAE,OAAQI,CAAM,CAAC,EAAE,IAAI,CAACM,EAAGC,IACrCV,EAAC,OAEC,MAAO,CAAE,MAAOI,EAAW,SAAUA,EAAW,SAAUA,CAAU,EAEpE,UAAAL,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAW,OAAQC,CAAW,EACjD,SAAAN,EAACE,EAAA,CACC,QAAQ,YACR,MAAM,YACN,OAAO,YACP,QAASO,EACX,EACF,GACEF,GAAaC,IACbP,EAAC,OACC,MAAO,CACL,UAAW,EACX,QAAS,OACT,cAAe,SACf,IAAK,CACP,EAEC,UAAAM,GACCP,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAW,OAAQ,EAAG,EACzC,SAAAL,EAACE,EAAA,CACC,QAAQ,OACR,MAAM,YACN,OAAO,YACT,EACF,EAEDM,GACCR,EAAC,OAAI,MAAO,CAAE,MAAOK,EAAY,IAAM,OAAQ,EAAG,EAChD,SAAAL,EAACE,EAAA,CACC,QAAQ,OACR,MAAM,YACN,OAAO,YACT,EACF,GAEJ,IAtCGS,CAwCP,CACD,EACH,CAEJ,CAEA,IAAOC,EAAQT","names":["jsx","jsxs","Skeleton","CarouselLoading","count","cardWidth","cardHeight","showTitle","showSubtitle","rounded","_","i","CarouselLoading_default"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as s}from"react/jsx-runtime";import d from"clsx";function u({variant:e="rectangle",width:
|
|
1
|
+
import{jsx as s}from"react/jsx-runtime";import d from"clsx";function u({variant:e="rectangle",width:o,height:r,aspectRatio:t,rounded:n=!0,className:i,...l}){return s("div",{className:d("ui:relative ui:overflow-hidden ui:bg-muted","ui-skeleton-shimmer",{"ui:rounded-lg":e==="rectangle"&&n,"ui:rounded-full":e==="circle","ui:rounded":e==="line"&&n},o,r,i),"data-testid":"skeleton",style:t?{aspectRatio:t}:void 0,...l})}var p=u;export{p as default};
|
|
2
2
|
//# sourceMappingURL=Skeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n /** Shape variant */\n variant?: 'rectangle' | 'circle' | 'line'\n /** Width (Tailwind class or custom value) */\n width?: string\n /** Height (Tailwind class or custom value) */\n height?: string\n /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n aspectRatio?: string\n /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n variant = 'rectangle',\n width,\n height,\n aspectRatio,\n rounded = true,\n className,\n ...rest\n}: Readonly<SkeletonProps>) {\n return (\n <div\n className={clsx(\n 'ui:relative ui:overflow-hidden ui:bg-muted',\n 'ui-skeleton-shimmer',\n {\n 'ui:rounded-lg': variant === 'rectangle' && rounded,\n 'ui:rounded-full': variant === 'circle',\n 'ui:rounded': variant === 'line' && rounded,\n },\n width,\n height,\n className\n )}\n style={aspectRatio ? { aspectRatio } : undefined}\n {...rest}\n />\n )\n}\n\nexport default Skeleton\n"],"mappings":"AAgCI,cAAAA,MAAA,oBAhCJ,OAAOC,MAAU,OAsBjB,SAASC,EAAS,CAChB,QAAAC,EAAU,YACV,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,GAAGC,CACL,EAA4B,CAC1B,OACET,EAAC,OACC,UAAWC,EACT,6CACA,sBACA,CACE,gBAAiBE,IAAY,aAAeI,EAC5C,kBAAmBJ,IAAY,SAC/B,aAAcA,IAAY,QAAUI,CACtC,EACAH,EACAC,EACAG,CACF,EACA,MAAOF,EAAc,CAAE,YAAAA,CAAY,EAAI,OACtC,GAAGG,EACN,CAEJ,CAEA,IAAOC,EAAQR","names":["jsx","clsx","Skeleton","variant","width","height","aspectRatio","rounded","className","rest","Skeleton_default"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { ComponentProps } from 'react'\n\nexport interface SkeletonProps extends ComponentProps<'div'> {\n /** Shape variant */\n variant?: 'rectangle' | 'circle' | 'line'\n /** Width (Tailwind class or custom value) */\n width?: string\n /** Height (Tailwind class or custom value) */\n height?: string\n /** Aspect ratio (e.g., \"2/3\", \"16/9\", \"1/1\") */\n aspectRatio?: string\n /** Apply rounded corners (default: true for rectangle/line, always true for circle) */\n rounded?: boolean\n}\n\n/**\n * Skeleton - Atomic loading placeholder component\n *\n * Composable primitive for building loading states with shimmer effect.\n */\nfunction Skeleton({\n variant = 'rectangle',\n width,\n height,\n aspectRatio,\n rounded = true,\n className,\n ...rest\n}: Readonly<SkeletonProps>) {\n return (\n <div\n className={clsx(\n 'ui:relative ui:overflow-hidden ui:bg-muted',\n 'ui-skeleton-shimmer',\n {\n 'ui:rounded-lg': variant === 'rectangle' && rounded,\n 'ui:rounded-full': variant === 'circle',\n 'ui:rounded': variant === 'line' && rounded,\n },\n width,\n height,\n className\n )}\n data-testid=\"skeleton\"\n style={aspectRatio ? { aspectRatio } : undefined}\n {...rest}\n />\n )\n}\n\nexport default Skeleton\n"],"mappings":"AAgCI,cAAAA,MAAA,oBAhCJ,OAAOC,MAAU,OAsBjB,SAASC,EAAS,CAChB,QAAAC,EAAU,YACV,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,GAAGC,CACL,EAA4B,CAC1B,OACET,EAAC,OACC,UAAWC,EACT,6CACA,sBACA,CACE,gBAAiBE,IAAY,aAAeI,EAC5C,kBAAmBJ,IAAY,SAC/B,aAAcA,IAAY,QAAUI,CACtC,EACAH,EACAC,EACAG,CACF,EACA,cAAY,WACZ,MAAOF,EAAc,CAAE,YAAAA,CAAY,EAAI,OACtC,GAAGG,EACN,CAEJ,CAEA,IAAOC,EAAQR","names":["jsx","clsx","Skeleton","variant","width","height","aspectRatio","rounded","className","rest","Skeleton_default"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vite-mf-monorepo/ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.22",
|
|
4
4
|
"description": "Design system components for vite-mf-monorepo",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"publishConfig": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"dependencies": {
|
|
80
80
|
"@heroicons/react": "^2.2.0",
|
|
81
81
|
"clsx": "2.1.1",
|
|
82
|
-
"@vite-mf-monorepo/shared": "0.0.
|
|
82
|
+
"@vite-mf-monorepo/shared": "0.0.6"
|
|
83
83
|
},
|
|
84
84
|
"scripts": {
|
|
85
85
|
"build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
|