@vite-mf-monorepo/ui 0.4.6 → 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/dist/styles.css +2 -0
- package/package.json +4 -4
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -1,62 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import { Icon } from "../Icon";
|
|
5
|
-
const sizeMap = {
|
|
6
|
-
xs: { container: "ui:h-6 ui:w-6", icon: 12, text: "ui:text-xs" },
|
|
7
|
-
sm: { container: "ui:h-8 ui:w-8", icon: 16, text: "ui:text-sm" },
|
|
8
|
-
md: { container: "ui:h-10 ui:w-10", icon: 20, text: "ui:text-base" },
|
|
9
|
-
lg: { container: "ui:h-12 ui:w-12", icon: 24, text: "ui:text-lg" },
|
|
10
|
-
xl: { container: "ui:h-16 ui:w-16", icon: 32, text: "ui:text-xl" },
|
|
11
|
-
"2xl": { container: "ui:h-24 ui:w-24", icon: 48, text: "ui:text-2xl" },
|
|
12
|
-
"3xl": { container: "ui:h-32 ui:w-32", icon: 64, text: "ui:text-3xl" }
|
|
13
|
-
};
|
|
14
|
-
function Avatar({
|
|
15
|
-
className,
|
|
16
|
-
src,
|
|
17
|
-
alt,
|
|
18
|
-
size = "md",
|
|
19
|
-
initials,
|
|
20
|
-
testId,
|
|
21
|
-
...rest
|
|
22
|
-
}) {
|
|
23
|
-
const [hasError, setHasError] = useState(false);
|
|
24
|
-
const { container, icon, text } = sizeMap[size];
|
|
25
|
-
const showImage = src && !hasError;
|
|
26
|
-
const showInitials = !showImage && initials;
|
|
27
|
-
const showFallback = !showImage && !initials;
|
|
28
|
-
const handleError = () => {
|
|
29
|
-
setHasError(true);
|
|
30
|
-
};
|
|
31
|
-
return /* @__PURE__ */ jsxs(
|
|
32
|
-
"div",
|
|
33
|
-
{
|
|
34
|
-
className: clsx(
|
|
35
|
-
"ui:relative ui:inline-flex ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-full",
|
|
36
|
-
"ui:bg-muted ui:text-muted-foreground",
|
|
37
|
-
container,
|
|
38
|
-
className
|
|
39
|
-
),
|
|
40
|
-
children: [
|
|
41
|
-
showImage && /* @__PURE__ */ jsx(
|
|
42
|
-
"img",
|
|
43
|
-
{
|
|
44
|
-
src,
|
|
45
|
-
alt,
|
|
46
|
-
onError: handleError,
|
|
47
|
-
className: "ui:h-full ui:w-full ui:object-cover",
|
|
48
|
-
"data-testid": testId,
|
|
49
|
-
...rest
|
|
50
|
-
}
|
|
51
|
-
),
|
|
52
|
-
showInitials && /* @__PURE__ */ jsx("span", { className: clsx("ui:font-medium ui:uppercase", text), children: initials.slice(0, 2) }),
|
|
53
|
-
showFallback && /* @__PURE__ */ jsx(Icon, { name: "User", size: icon })
|
|
54
|
-
]
|
|
55
|
-
}
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
var Avatar_default = Avatar;
|
|
59
|
-
export {
|
|
60
|
-
Avatar_default as default
|
|
61
|
-
};
|
|
1
|
+
import{jsx as i,jsxs as b}from"react/jsx-runtime";import r from"clsx";import{useState as w}from"react";import{Icon as v}from"../Icon";const z={xs:{container:"ui:h-6 ui:w-6",icon:12,text:"ui:text-xs"},sm:{container:"ui:h-8 ui:w-8",icon:16,text:"ui:text-sm"},md:{container:"ui:h-10 ui:w-10",icon:20,text:"ui:text-base"},lg:{container:"ui:h-12 ui:w-12",icon:24,text:"ui:text-lg"},xl:{container:"ui:h-16 ui:w-16",icon:32,text:"ui:text-xl"},"2xl":{container:"ui:h-24 ui:w-24",icon:48,text:"ui:text-2xl"},"3xl":{container:"ui:h-32 ui:w-32",icon:64,text:"ui:text-3xl"}};function A({className:o,src:n,alt:s,size:a="md",initials:t,testId:u,...c}){const[l,x]=w(!1),{container:m,icon:d,text:p}=z[a],e=n&&!l,f=!e&&t,g=!e&&!t,h=()=>{x(!0)};return b("div",{className:r("ui:relative ui:inline-flex ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-full","ui:bg-muted ui:text-muted-foreground",m,o),children:[e&&i("img",{src:n,alt:s,onError:h,className:"ui:h-full ui:w-full ui:object-cover","data-testid":u,...c}),f&&i("span",{className:r("ui:font-medium ui:uppercase",p),children:t.slice(0,2)}),g&&i(v,{name:"User",size:d})]})}var P=A;export{P as default};
|
|
62
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useState } from 'react'\n\nimport { Icon } from '../Icon'\n\nimport type { ComponentProps } from 'react'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n\nexport interface AvatarProps extends Omit<ComponentProps<'img'>, 'src'> {\n /** Image source URL */\n src?: string | null\n /** Alt text for the image */\n alt: string\n /** Size of the avatar */\n size?: AvatarSize\n /** Fallback initials to display when no image */\n initials?: string\n /** For testing purposes */\n testId?: string\n}\n\nconst sizeMap: Record<\n AvatarSize,\n { container: string; icon: number; text: string }\n> = {\n xs: { container: 'ui:h-6 ui:w-6', icon: 12, text: 'ui:text-xs' },\n sm: { container: 'ui:h-8 ui:w-8', icon: 16, text: 'ui:text-sm' },\n md: { container: 'ui:h-10 ui:w-10', icon: 20, text: 'ui:text-base' },\n lg: { container: 'ui:h-12 ui:w-12', icon: 24, text: 'ui:text-lg' },\n xl: { container: 'ui:h-16 ui:w-16', icon: 32, text: 'ui:text-xl' },\n '2xl': { container: 'ui:h-24 ui:w-24', icon: 48, text: 'ui:text-2xl' },\n '3xl': { container: 'ui:h-32 ui:w-32', icon: 64, text: 'ui:text-3xl' },\n}\n\nfunction Avatar({\n className,\n src,\n alt,\n size = 'md',\n initials,\n testId,\n ...rest\n}: Readonly<AvatarProps>) {\n const [hasError, setHasError] = useState(false)\n const { container, icon, text } = sizeMap[size]\n\n const showImage = src && !hasError\n const showInitials = !showImage && initials\n const showFallback = !showImage && !initials\n\n const handleError = () => {\n setHasError(true)\n }\n\n return (\n <div\n className={clsx(\n 'ui:relative ui:inline-flex ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-full',\n 'ui:bg-muted ui:text-muted-foreground',\n container,\n className\n )}\n >\n {showImage && (\n <img\n src={src}\n alt={alt}\n onError={handleError}\n className=\"ui:h-full ui:w-full ui:object-cover\"\n data-testid={testId}\n {...rest}\n />\n )}\n {showInitials && (\n <span className={clsx('ui:font-medium ui:uppercase', text)}>\n {initials.slice(0, 2)}\n </span>\n )}\n {showFallback && (\n <Icon name=\"User\" size={icon as 16 | 20 | 24 | 32 | 48 | 64} />\n )}\n </div>\n )\n}\n\nexport default Avatar\n"],"mappings":"AAwDI,
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar/Avatar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useState } from 'react'\n\nimport { Icon } from '../Icon'\n\nimport type { ComponentProps } from 'react'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'\n\nexport interface AvatarProps extends Omit<ComponentProps<'img'>, 'src'> {\n /** Image source URL */\n src?: string | null\n /** Alt text for the image */\n alt: string\n /** Size of the avatar */\n size?: AvatarSize\n /** Fallback initials to display when no image */\n initials?: string\n /** For testing purposes */\n testId?: string\n}\n\nconst sizeMap: Record<\n AvatarSize,\n { container: string; icon: number; text: string }\n> = {\n xs: { container: 'ui:h-6 ui:w-6', icon: 12, text: 'ui:text-xs' },\n sm: { container: 'ui:h-8 ui:w-8', icon: 16, text: 'ui:text-sm' },\n md: { container: 'ui:h-10 ui:w-10', icon: 20, text: 'ui:text-base' },\n lg: { container: 'ui:h-12 ui:w-12', icon: 24, text: 'ui:text-lg' },\n xl: { container: 'ui:h-16 ui:w-16', icon: 32, text: 'ui:text-xl' },\n '2xl': { container: 'ui:h-24 ui:w-24', icon: 48, text: 'ui:text-2xl' },\n '3xl': { container: 'ui:h-32 ui:w-32', icon: 64, text: 'ui:text-3xl' },\n}\n\nfunction Avatar({\n className,\n src,\n alt,\n size = 'md',\n initials,\n testId,\n ...rest\n}: Readonly<AvatarProps>) {\n const [hasError, setHasError] = useState(false)\n const { container, icon, text } = sizeMap[size]\n\n const showImage = src && !hasError\n const showInitials = !showImage && initials\n const showFallback = !showImage && !initials\n\n const handleError = () => {\n setHasError(true)\n }\n\n return (\n <div\n className={clsx(\n 'ui:relative ui:inline-flex ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-full',\n 'ui:bg-muted ui:text-muted-foreground',\n container,\n className\n )}\n >\n {showImage && (\n <img\n src={src}\n alt={alt}\n onError={handleError}\n className=\"ui:h-full ui:w-full ui:object-cover\"\n data-testid={testId}\n {...rest}\n />\n )}\n {showInitials && (\n <span className={clsx('ui:font-medium ui:uppercase', text)}>\n {initials.slice(0, 2)}\n </span>\n )}\n {showFallback && (\n <Icon name=\"User\" size={icon as 16 | 20 | 24 | 32 | 48 | 64} />\n )}\n </div>\n )\n}\n\nexport default Avatar\n"],"mappings":"AAwDI,OASI,OAAAA,EATJ,QAAAC,MAAA,oBAxDJ,OAAOC,MAAU,OACjB,OAAS,YAAAC,MAAgB,QAEzB,OAAS,QAAAC,MAAY,UAmBrB,MAAMC,EAGF,CACF,GAAI,CAAE,UAAW,gBAAiB,KAAM,GAAI,KAAM,YAAa,EAC/D,GAAI,CAAE,UAAW,gBAAiB,KAAM,GAAI,KAAM,YAAa,EAC/D,GAAI,CAAE,UAAW,kBAAmB,KAAM,GAAI,KAAM,cAAe,EACnE,GAAI,CAAE,UAAW,kBAAmB,KAAM,GAAI,KAAM,YAAa,EACjE,GAAI,CAAE,UAAW,kBAAmB,KAAM,GAAI,KAAM,YAAa,EACjE,MAAO,CAAE,UAAW,kBAAmB,KAAM,GAAI,KAAM,aAAc,EACrE,MAAO,CAAE,UAAW,kBAAmB,KAAM,GAAI,KAAM,aAAc,CACvE,EAEA,SAASC,EAAO,CACd,UAAAC,EACA,IAAAC,EACA,IAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,EAA0B,CACxB,KAAM,CAACC,EAAUC,CAAW,EAAIZ,EAAS,EAAK,EACxC,CAAE,UAAAa,EAAW,KAAAC,EAAM,KAAAC,CAAK,EAAIb,EAAQK,CAAI,EAExCS,EAAYX,GAAO,CAACM,EACpBM,EAAe,CAACD,GAAaR,EAC7BU,EAAe,CAACF,GAAa,CAACR,EAE9BW,EAAc,IAAM,CACxBP,EAAY,EAAI,CAClB,EAEA,OACEd,EAAC,OACC,UAAWC,EACT,kGACA,uCACAc,EACAT,CACF,EAEC,UAAAY,GACCnB,EAAC,OACC,IAAKQ,EACL,IAAKC,EACL,QAASa,EACT,UAAU,sCACV,cAAaV,EACZ,GAAGC,EACN,EAEDO,GACCpB,EAAC,QAAK,UAAWE,EAAK,8BAA+BgB,CAAI,EACtD,SAAAP,EAAS,MAAM,EAAG,CAAC,EACtB,EAEDU,GACCrB,EAACI,EAAA,CAAK,KAAK,OAAO,KAAMa,EAAqC,GAEjE,CAEJ,CAEA,IAAOM,EAAQjB","names":["jsx","jsxs","clsx","useState","Icon","sizeMap","Avatar","className","src","alt","size","initials","testId","rest","hasError","setHasError","container","icon","text","showImage","showInitials","showFallback","handleError","Avatar_default"]}
|
package/dist/Avatar/index.js
CHANGED
package/dist/Avatar/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Avatar/index.ts"],"sourcesContent":["export { default as Avatar } from './Avatar'\nexport type { AvatarProps, AvatarSize } from './Avatar'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar/index.ts"],"sourcesContent":["export { default as Avatar } from './Avatar'\nexport type { AvatarProps, AvatarSize } from './Avatar'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAAyB","names":["default"]}
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -1,48 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import { Icon } from "../Icon";
|
|
4
|
-
const sizeMap = {
|
|
5
|
-
sm: { padding: "ui:px-2 ui:py-0.5", text: "ui:text-xs", iconSize: 16 },
|
|
6
|
-
md: { padding: "ui:px-2.5 ui:py-0.5", text: "ui:text-sm", iconSize: 16 },
|
|
7
|
-
lg: { padding: "ui:px-3 ui:py-1", text: "ui:text-sm", iconSize: 16 }
|
|
8
|
-
};
|
|
9
|
-
function Badge({
|
|
10
|
-
children,
|
|
11
|
-
variant = "default",
|
|
12
|
-
size = "md",
|
|
13
|
-
icon,
|
|
14
|
-
textClassName,
|
|
15
|
-
className
|
|
16
|
-
}) {
|
|
17
|
-
const { padding, text, iconSize } = sizeMap[size];
|
|
18
|
-
return /* @__PURE__ */ jsxs(
|
|
19
|
-
"span",
|
|
20
|
-
{
|
|
21
|
-
className: clsx(
|
|
22
|
-
"ui:inline-flex ui:items-center ui:gap-1 ui:rounded-full ui:font-medium",
|
|
23
|
-
padding,
|
|
24
|
-
text,
|
|
25
|
-
{
|
|
26
|
-
"ui:bg-primary": variant === "default",
|
|
27
|
-
"ui:text-primary-foreground": variant === "default" && !textClassName,
|
|
28
|
-
"ui:bg-secondary": variant === "secondary",
|
|
29
|
-
"ui:text-secondary-foreground": variant === "secondary" && !textClassName,
|
|
30
|
-
"ui:border ui:border-input ui:bg-transparent": variant === "outline",
|
|
31
|
-
"ui:bg-destructive": variant === "destructive",
|
|
32
|
-
"ui:text-destructive-foreground": variant === "destructive" && !textClassName
|
|
33
|
-
},
|
|
34
|
-
textClassName,
|
|
35
|
-
className
|
|
36
|
-
),
|
|
37
|
-
children: [
|
|
38
|
-
icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize }),
|
|
39
|
-
children
|
|
40
|
-
]
|
|
41
|
-
}
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
var Badge_default = Badge;
|
|
45
|
-
export {
|
|
46
|
-
Badge_default as default
|
|
47
|
-
};
|
|
1
|
+
import{jsx as m,jsxs as x}from"react/jsx-runtime";import a from"clsx";import{Icon as c}from"../Icon";const s={sm:{padding:"ui:px-2 ui:py-0.5",text:"ui:text-xs",iconSize:16},md:{padding:"ui:px-2.5 ui:py-0.5",text:"ui:text-sm",iconSize:16},lg:{padding:"ui:px-3 ui:py-1",text:"ui:text-sm",iconSize:16}};function g({children:d,variant:e="default",size:o="md",icon:t,textClassName:i,className:r}){const{padding:n,text:u,iconSize:p}=s[o];return x("span",{className:a("ui:inline-flex ui:items-center ui:gap-1 ui:rounded-full ui:font-medium",n,u,{"ui:bg-primary":e==="default","ui:text-primary-foreground":e==="default"&&!i,"ui:bg-secondary":e==="secondary","ui:text-secondary-foreground":e==="secondary"&&!i,"ui:border ui:border-input ui:bg-transparent":e==="outline","ui:bg-destructive":e==="destructive","ui:text-destructive-foreground":e==="destructive"&&!i},i,r),children:[t&&m(c,{name:t,size:p}),d]})}var y=g;export{y as default};
|
|
48
2
|
//# sourceMappingURL=Badge.js.map
|
package/dist/Badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { Icon } from '../Icon'\n\nimport type { IconName } from '../Icon'\nimport type { ReactNode } from 'react'\n\nexport type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive'\nexport type BadgeSize = 'sm' | 'md' | 'lg'\n\nexport interface BadgeProps {\n /** Badge content */\n children: ReactNode\n /** Visual variant */\n variant?: BadgeVariant\n /** Size */\n size?: BadgeSize\n /** Optional icon (left) */\n icon?: IconName\n /** Custom text color class (overrides variant color) */\n textClassName?: string\n /** Additional class name */\n className?: string\n}\n\nconst sizeMap: Record<\n BadgeSize,\n { padding: string; text: string; iconSize: 16 }\n> = {\n sm: { padding: 'ui:px-2 ui:py-0.5', text: 'ui:text-xs', iconSize: 16 },\n md: { padding: 'ui:px-2.5 ui:py-0.5', text: 'ui:text-sm', iconSize: 16 },\n lg: { padding: 'ui:px-3 ui:py-1', text: 'ui:text-sm', iconSize: 16 },\n}\n\nfunction Badge({\n children,\n variant = 'default',\n size = 'md',\n icon,\n textClassName,\n className,\n}: Readonly<BadgeProps>) {\n const { padding, text, iconSize } = sizeMap[size]\n\n return (\n <span\n className={clsx(\n 'ui:inline-flex ui:items-center ui:gap-1 ui:rounded-full ui:font-medium',\n padding,\n text,\n {\n 'ui:bg-primary': variant === 'default',\n 'ui:text-primary-foreground': variant === 'default' && !textClassName,\n 'ui:bg-secondary': variant === 'secondary',\n 'ui:text-secondary-foreground':\n variant === 'secondary' && !textClassName,\n 'ui:border ui:border-input ui:bg-transparent': variant === 'outline',\n 'ui:bg-destructive': variant === 'destructive',\n 'ui:text-destructive-foreground':\n variant === 'destructive' && !textClassName,\n },\n textClassName,\n className\n )}\n >\n {icon && <Icon name={icon} size={iconSize} />}\n {children}\n </span>\n )\n}\n\nexport default Badge\n"],"mappings":"AA6CI,
|
|
1
|
+
{"version":3,"sources":["../../src/Badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { Icon } from '../Icon'\n\nimport type { IconName } from '../Icon'\nimport type { ReactNode } from 'react'\n\nexport type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive'\nexport type BadgeSize = 'sm' | 'md' | 'lg'\n\nexport interface BadgeProps {\n /** Badge content */\n children: ReactNode\n /** Visual variant */\n variant?: BadgeVariant\n /** Size */\n size?: BadgeSize\n /** Optional icon (left) */\n icon?: IconName\n /** Custom text color class (overrides variant color) */\n textClassName?: string\n /** Additional class name */\n className?: string\n}\n\nconst sizeMap: Record<\n BadgeSize,\n { padding: string; text: string; iconSize: 16 }\n> = {\n sm: { padding: 'ui:px-2 ui:py-0.5', text: 'ui:text-xs', iconSize: 16 },\n md: { padding: 'ui:px-2.5 ui:py-0.5', text: 'ui:text-sm', iconSize: 16 },\n lg: { padding: 'ui:px-3 ui:py-1', text: 'ui:text-sm', iconSize: 16 },\n}\n\nfunction Badge({\n children,\n variant = 'default',\n size = 'md',\n icon,\n textClassName,\n className,\n}: Readonly<BadgeProps>) {\n const { padding, text, iconSize } = sizeMap[size]\n\n return (\n <span\n className={clsx(\n 'ui:inline-flex ui:items-center ui:gap-1 ui:rounded-full ui:font-medium',\n padding,\n text,\n {\n 'ui:bg-primary': variant === 'default',\n 'ui:text-primary-foreground': variant === 'default' && !textClassName,\n 'ui:bg-secondary': variant === 'secondary',\n 'ui:text-secondary-foreground':\n variant === 'secondary' && !textClassName,\n 'ui:border ui:border-input ui:bg-transparent': variant === 'outline',\n 'ui:bg-destructive': variant === 'destructive',\n 'ui:text-destructive-foreground':\n variant === 'destructive' && !textClassName,\n },\n textClassName,\n className\n )}\n >\n {icon && <Icon name={icon} size={iconSize} />}\n {children}\n </span>\n )\n}\n\nexport default Badge\n"],"mappings":"AA6CI,OAoBW,OAAAA,EApBX,QAAAC,MAAA,oBA7CJ,OAAOC,MAAU,OAEjB,OAAS,QAAAC,MAAY,UAuBrB,MAAMC,EAGF,CACF,GAAI,CAAE,QAAS,oBAAqB,KAAM,aAAc,SAAU,EAAG,EACrE,GAAI,CAAE,QAAS,sBAAuB,KAAM,aAAc,SAAU,EAAG,EACvE,GAAI,CAAE,QAAS,kBAAmB,KAAM,aAAc,SAAU,EAAG,CACrE,EAEA,SAASC,EAAM,CACb,SAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,KAAAC,EACA,cAAAC,EACA,UAAAC,CACF,EAAyB,CACvB,KAAM,CAAE,QAAAC,EAAS,KAAAC,EAAM,SAAAC,CAAS,EAAIV,EAAQI,CAAI,EAEhD,OACEP,EAAC,QACC,UAAWC,EACT,yEACAU,EACAC,EACA,CACE,gBAAiBN,IAAY,UAC7B,6BAA8BA,IAAY,WAAa,CAACG,EACxD,kBAAmBH,IAAY,YAC/B,+BACEA,IAAY,aAAe,CAACG,EAC9B,8CAA+CH,IAAY,UAC3D,oBAAqBA,IAAY,cACjC,iCACEA,IAAY,eAAiB,CAACG,CAClC,EACAA,EACAC,CACF,EAEC,UAAAF,GAAQT,EAACG,EAAA,CAAK,KAAMM,EAAM,KAAMK,EAAU,EAC1CR,GACH,CAEJ,CAEA,IAAOS,EAAQV","names":["jsx","jsxs","clsx","Icon","sizeMap","Badge","children","variant","size","icon","textClassName","className","padding","text","iconSize","Badge_default"]}
|
package/dist/Badge/index.js
CHANGED
package/dist/Badge/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Badge/index.ts"],"sourcesContent":["export { default as Badge } from './Badge'\nexport type { BadgeProps, BadgeSize, BadgeVariant } from './Badge'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Badge/index.ts"],"sourcesContent":["export { default as Badge } from './Badge'\nexport type { BadgeProps, BadgeSize, BadgeVariant } from './Badge'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAAwB","names":["default"]}
|
|
@@ -1,44 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
const iconSizeMap = {
|
|
3
|
-
sm: 16,
|
|
4
|
-
md: 20,
|
|
5
|
-
lg: 24
|
|
6
|
-
};
|
|
7
|
-
function getButtonClasses({
|
|
8
|
-
variant = "primary",
|
|
9
|
-
size = "md",
|
|
10
|
-
iconPosition = "left",
|
|
11
|
-
className
|
|
12
|
-
}) {
|
|
13
|
-
return clsx(
|
|
14
|
-
"ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:gap-2 ui:font-roboto ui:font-medium ui:transition-colors",
|
|
15
|
-
"ui:rounded ui:border ui:border-transparent",
|
|
16
|
-
"ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2",
|
|
17
|
-
{
|
|
18
|
-
"ui:flex-row": iconPosition === "left",
|
|
19
|
-
"ui:flex-row-reverse": iconPosition === "right"
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
"ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90": variant === "primary",
|
|
23
|
-
"ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80": variant === "secondary",
|
|
24
|
-
"ui:bg-destructive ui:text-destructive-foreground ui:hover:bg-destructive/90": variant === "destructive",
|
|
25
|
-
"ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "outline",
|
|
26
|
-
"ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "ghost"
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
"ui:h-8 ui:px-3 ui:text-sm": size === "sm",
|
|
30
|
-
"ui:h-10 ui:px-4 ui:text-base": size === "md",
|
|
31
|
-
"ui:h-12 ui:px-6 ui:text-lg": size === "lg"
|
|
32
|
-
},
|
|
33
|
-
className
|
|
34
|
-
);
|
|
35
|
-
}
|
|
36
|
-
function getButtonDisabledClasses(classes) {
|
|
37
|
-
return clsx(classes, "ui:disabled:pointer-events-none ui:disabled:opacity-50");
|
|
38
|
-
}
|
|
39
|
-
export {
|
|
40
|
-
getButtonClasses,
|
|
41
|
-
getButtonDisabledClasses,
|
|
42
|
-
iconSizeMap
|
|
43
|
-
};
|
|
1
|
+
import r from"clsx";const n={sm:16,md:20,lg:24};function s({variant:e="primary",size:t="md",iconPosition:i="left",className:o}){return r("ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:gap-2 ui:font-roboto ui:font-medium ui:transition-colors","ui:rounded ui:border ui:border-transparent","ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2",{"ui:flex-row":i==="left","ui:flex-row-reverse":i==="right"},{"ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90":e==="primary","ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80":e==="secondary","ui:bg-destructive ui:text-destructive-foreground ui:hover:bg-destructive/90":e==="destructive","ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground":e==="outline","ui:hover:bg-accent ui:hover:text-accent-foreground":e==="ghost"},{"ui:h-8 ui:px-3 ui:text-sm":t==="sm","ui:h-10 ui:px-4 ui:text-base":t==="md","ui:h-12 ui:px-6 ui:text-lg":t==="lg"},o)}function c(e){return r(e,"ui:disabled:pointer-events-none ui:disabled:opacity-50")}export{s as getButtonClasses,c as getButtonDisabledClasses,n as iconSizeMap};
|
|
44
2
|
//# sourceMappingURL=Button.utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/Button.utils.ts"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { IconName } from '../Icon'\nimport type { ReactNode } from 'react'\n\nexport type ButtonVariant =\n | 'primary'\n | 'secondary'\n | 'destructive'\n | 'outline'\n | 'ghost'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport const iconSizeMap = {\n sm: 16,\n md: 20,\n lg: 24,\n} as const\n\nexport interface ButtonVisualInput {\n variant?: ButtonVariant\n size?: ButtonSize\n icon?: IconName\n iconPosition?: 'left' | 'right'\n className?: string\n children?: ReactNode\n}\n\nexport function getButtonClasses({\n variant = 'primary',\n size = 'md',\n iconPosition = 'left',\n className,\n}: ButtonVisualInput) {\n return clsx(\n 'ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:gap-2 ui:font-roboto ui:font-medium ui:transition-colors',\n 'ui:rounded ui:border ui:border-transparent',\n 'ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2',\n {\n 'ui:flex-row': iconPosition === 'left',\n 'ui:flex-row-reverse': iconPosition === 'right',\n },\n {\n 'ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90':\n variant === 'primary',\n 'ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80':\n variant === 'secondary',\n 'ui:bg-destructive ui:text-destructive-foreground ui:hover:bg-destructive/90':\n variant === 'destructive',\n 'ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground':\n variant === 'outline',\n 'ui:hover:bg-accent ui:hover:text-accent-foreground': variant === 'ghost',\n },\n {\n 'ui:h-8 ui:px-3 ui:text-sm': size === 'sm',\n 'ui:h-10 ui:px-4 ui:text-base': size === 'md',\n 'ui:h-12 ui:px-6 ui:text-lg': size === 'lg',\n },\n className\n )\n}\n\nexport function getButtonDisabledClasses(classes: string) {\n return clsx(classes, 'ui:disabled:pointer-events-none ui:disabled:opacity-50')\n}\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Button/Button.utils.ts"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { IconName } from '../Icon'\nimport type { ReactNode } from 'react'\n\nexport type ButtonVariant =\n | 'primary'\n | 'secondary'\n | 'destructive'\n | 'outline'\n | 'ghost'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\nexport const iconSizeMap = {\n sm: 16,\n md: 20,\n lg: 24,\n} as const\n\nexport interface ButtonVisualInput {\n variant?: ButtonVariant\n size?: ButtonSize\n icon?: IconName\n iconPosition?: 'left' | 'right'\n className?: string\n children?: ReactNode\n}\n\nexport function getButtonClasses({\n variant = 'primary',\n size = 'md',\n iconPosition = 'left',\n className,\n}: ButtonVisualInput) {\n return clsx(\n 'ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:gap-2 ui:font-roboto ui:font-medium ui:transition-colors',\n 'ui:rounded ui:border ui:border-transparent',\n 'ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2',\n {\n 'ui:flex-row': iconPosition === 'left',\n 'ui:flex-row-reverse': iconPosition === 'right',\n },\n {\n 'ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90':\n variant === 'primary',\n 'ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80':\n variant === 'secondary',\n 'ui:bg-destructive ui:text-destructive-foreground ui:hover:bg-destructive/90':\n variant === 'destructive',\n 'ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground':\n variant === 'outline',\n 'ui:hover:bg-accent ui:hover:text-accent-foreground': variant === 'ghost',\n },\n {\n 'ui:h-8 ui:px-3 ui:text-sm': size === 'sm',\n 'ui:h-10 ui:px-4 ui:text-base': size === 'md',\n 'ui:h-12 ui:px-6 ui:text-lg': size === 'lg',\n },\n className\n )\n}\n\nexport function getButtonDisabledClasses(classes: string) {\n return clsx(classes, 'ui:disabled:pointer-events-none ui:disabled:opacity-50')\n}\n"],"mappings":"AAAA,OAAOA,MAAU,OAaV,MAAMC,EAAc,CACzB,GAAI,GACJ,GAAI,GACJ,GAAI,EACN,EAWO,SAASC,EAAiB,CAC/B,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,aAAAC,EAAe,OACf,UAAAC,CACF,EAAsB,CACpB,OAAON,EACL,iIACA,6CACA,kFACA,CACE,cAAeK,IAAiB,OAChC,sBAAuBA,IAAiB,OAC1C,EACA,CACE,kEACEF,IAAY,UACd,wEACEA,IAAY,YACd,8EACEA,IAAY,cACd,sFACEA,IAAY,UACd,qDAAsDA,IAAY,OACpE,EACA,CACE,4BAA6BC,IAAS,KACtC,+BAAgCA,IAAS,KACzC,6BAA8BA,IAAS,IACzC,EACAE,CACF,CACF,CAEO,SAASC,EAAyBC,EAAiB,CACxD,OAAOR,EAAKQ,EAAS,wDAAwD,CAC/E","names":["clsx","iconSizeMap","getButtonClasses","variant","size","iconPosition","className","getButtonDisabledClasses","classes"]}
|
package/dist/Button/index.js
CHANGED
package/dist/Button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Button/index.ts"],"sourcesContent":["export { Button } from '../react-router/Button'\nexport type {\n ButtonProps,\n ButtonAsButton,\n ButtonAsLink,\n} from '../react-router/Button'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Button/index.ts"],"sourcesContent":["export { Button } from '../react-router/Button'\nexport type {\n ButtonProps,\n ButtonAsButton,\n ButtonAsLink,\n} from '../react-router/Button'\n"],"mappings":"AAAA,OAAS,UAAAA,MAAc","names":["Button"]}
|
package/dist/Card/Card.js
CHANGED
|
@@ -1,21 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
const variantStyles = {
|
|
4
|
-
default: "ui:rounded-md ui:p-4 ui:bg-card ui:text-card-foreground ui:shadow-md",
|
|
5
|
-
outline: "ui:rounded-md ui:p-4 ui:border ui:border-border ui:bg-transparent",
|
|
6
|
-
elevated: "ui:rounded-lg ui:p-6 ui:bg-card ui:text-card-foreground ui:shadow-lg",
|
|
7
|
-
ghost: "ui:rounded-md"
|
|
8
|
-
};
|
|
9
|
-
function Card({
|
|
10
|
-
className,
|
|
11
|
-
variant = "default",
|
|
12
|
-
children,
|
|
13
|
-
...rest
|
|
14
|
-
}) {
|
|
15
|
-
return /* @__PURE__ */ jsx("div", { className: clsx(variantStyles[variant], className), ...rest, children });
|
|
16
|
-
}
|
|
17
|
-
var Card_default = Card;
|
|
18
|
-
export {
|
|
19
|
-
Card_default as default
|
|
20
|
-
};
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import a from"clsx";const i={default:"ui:rounded-md ui:p-4 ui:bg-card ui:text-card-foreground ui:shadow-md",outline:"ui:rounded-md ui:p-4 ui:border ui:border-border ui:bg-transparent",elevated:"ui:rounded-lg ui:p-6 ui:bg-card ui:text-card-foreground ui:shadow-lg",ghost:"ui:rounded-md"};function u({className:r,variant:e="default",children:t,...d}){return o("div",{className:a(i[e],r),...d,children:t})}var l=u;export{l as default};
|
|
21
2
|
//# sourceMappingURL=Card.js.map
|
package/dist/Card/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type CardVariant = 'default' | 'outline' | 'elevated' | 'ghost'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n /** Visual variant of the card */\n variant?: CardVariant\n}\n\nconst variantStyles: Record<CardVariant, string> = {\n default:\n 'ui:rounded-md ui:p-4 ui:bg-card ui:text-card-foreground ui:shadow-md',\n outline: 'ui:rounded-md ui:p-4 ui:border ui:border-border ui:bg-transparent',\n elevated:\n 'ui:rounded-lg ui:p-6 ui:bg-card ui:text-card-foreground ui:shadow-lg',\n ghost: 'ui:rounded-md',\n}\n\nfunction Card({\n className,\n variant = 'default',\n children,\n ...rest\n}: Readonly<CardProps>) {\n return (\n <div className={clsx(variantStyles[variant], className)} {...rest}>\n {children}\n </div>\n )\n}\n\nexport default Card\n"],"mappings":"AA2BI
|
|
1
|
+
{"version":3,"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type CardVariant = 'default' | 'outline' | 'elevated' | 'ghost'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n /** Visual variant of the card */\n variant?: CardVariant\n}\n\nconst variantStyles: Record<CardVariant, string> = {\n default:\n 'ui:rounded-md ui:p-4 ui:bg-card ui:text-card-foreground ui:shadow-md',\n outline: 'ui:rounded-md ui:p-4 ui:border ui:border-border ui:bg-transparent',\n elevated:\n 'ui:rounded-lg ui:p-6 ui:bg-card ui:text-card-foreground ui:shadow-lg',\n ghost: 'ui:rounded-md',\n}\n\nfunction Card({\n className,\n variant = 'default',\n children,\n ...rest\n}: Readonly<CardProps>) {\n return (\n <div className={clsx(variantStyles[variant], className)} {...rest}>\n {children}\n </div>\n )\n}\n\nexport default Card\n"],"mappings":"AA2BI,cAAAA,MAAA,oBA3BJ,OAAOC,MAAU,OAWjB,MAAMC,EAA6C,CACjD,QACE,uEACF,QAAS,oEACT,SACE,uEACF,MAAO,eACT,EAEA,SAASC,EAAK,CACZ,UAAAC,EACA,QAAAC,EAAU,UACV,SAAAC,EACA,GAAGC,CACL,EAAwB,CACtB,OACEP,EAAC,OAAI,UAAWC,EAAKC,EAAcG,CAAO,EAAGD,CAAS,EAAI,GAAGG,EAC1D,SAAAD,EACH,CAEJ,CAEA,IAAOE,EAAQL","names":["jsx","clsx","variantStyles","Card","className","variant","children","rest","Card_default"]}
|
package/dist/Card/index.js
CHANGED
package/dist/Card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/index.ts"],"sourcesContent":["export { default as Card } from './Card'\nexport type { CardProps, CardVariant } from './Card'\n"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/Card/index.ts"],"sourcesContent":["export { default as Card } from './Card'\nexport type { CardProps, CardVariant } from './Card'\n"],"mappings":"AAAA,OAAoB,WAAXA,MAAuB","names":["default"]}
|
|
@@ -1,268 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import clsx from "clsx";
|
|
3
|
-
import {
|
|
4
|
-
useCallback,
|
|
5
|
-
useEffect,
|
|
6
|
-
useLayoutEffect,
|
|
7
|
-
useRef,
|
|
8
|
-
useState
|
|
9
|
-
} from "react";
|
|
10
|
-
import CarouselCounter from "./CarouselCounter";
|
|
11
|
-
import CarouselError from "./CarouselError";
|
|
12
|
-
import CarouselNavigation from "./CarouselNavigation";
|
|
13
|
-
import CarouselPagination from "./CarouselPagination";
|
|
14
|
-
function Carousel({
|
|
15
|
-
children,
|
|
16
|
-
variant = "standard",
|
|
17
|
-
showPagination = true,
|
|
18
|
-
showArrows = true,
|
|
19
|
-
arrowPosition = "sides",
|
|
20
|
-
gap = 16,
|
|
21
|
-
className,
|
|
22
|
-
heroControlsClassName,
|
|
23
|
-
errorMessage,
|
|
24
|
-
rounded = true,
|
|
25
|
-
initialIndex,
|
|
26
|
-
onPrev,
|
|
27
|
-
onNext,
|
|
28
|
-
disableAnimation = false,
|
|
29
|
-
disableScroll = false
|
|
30
|
-
}) {
|
|
31
|
-
const scrollRef = useRef(null);
|
|
32
|
-
const [totalPositions, setTotalPositions] = useState(1);
|
|
33
|
-
const [scrollIndex, setScrollIndex] = useState(initialIndex ?? 0);
|
|
34
|
-
const currentIndex = disableScroll ? initialIndex ?? 0 : scrollIndex;
|
|
35
|
-
const isHero = variant === "hero";
|
|
36
|
-
const isLightbox = variant === "lightbox";
|
|
37
|
-
const isFullWidth = isHero || isLightbox;
|
|
38
|
-
const calculatePositions = useCallback(() => {
|
|
39
|
-
const container = scrollRef.current;
|
|
40
|
-
if (!container) return;
|
|
41
|
-
const items = container.children;
|
|
42
|
-
if (isFullWidth) {
|
|
43
|
-
setTotalPositions(items.length);
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const firstItem = items[0];
|
|
47
|
-
if (!firstItem) {
|
|
48
|
-
setTotalPositions(1);
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
const itemWidth = firstItem.offsetWidth;
|
|
52
|
-
const maxScrollLeft = container.scrollWidth - container.offsetWidth;
|
|
53
|
-
if (maxScrollLeft <= 0) {
|
|
54
|
-
setTotalPositions(1);
|
|
55
|
-
} else if (itemWidth > 0) {
|
|
56
|
-
const positions = Math.round(maxScrollLeft / (itemWidth + gap)) + 1;
|
|
57
|
-
setTotalPositions(Math.max(1, positions));
|
|
58
|
-
}
|
|
59
|
-
}, [gap, isFullWidth]);
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
calculatePositions();
|
|
62
|
-
}, [children, calculatePositions]);
|
|
63
|
-
useEffect(() => {
|
|
64
|
-
const container = scrollRef.current;
|
|
65
|
-
if (!container) return;
|
|
66
|
-
const resizeObserver = new ResizeObserver(() => {
|
|
67
|
-
calculatePositions();
|
|
68
|
-
});
|
|
69
|
-
resizeObserver.observe(container);
|
|
70
|
-
return () => {
|
|
71
|
-
resizeObserver.disconnect();
|
|
72
|
-
};
|
|
73
|
-
}, [calculatePositions]);
|
|
74
|
-
const initialScrollRef = useRef({
|
|
75
|
-
index: initialIndex ?? 0,
|
|
76
|
-
isFullWidth,
|
|
77
|
-
gap
|
|
78
|
-
});
|
|
79
|
-
useLayoutEffect(() => {
|
|
80
|
-
const { index, isFullWidth: fw, gap: g } = initialScrollRef.current;
|
|
81
|
-
if (index <= 0) return;
|
|
82
|
-
const container = scrollRef.current;
|
|
83
|
-
if (!container) return;
|
|
84
|
-
const firstItem = container.children[0];
|
|
85
|
-
const itemWidth = fw ? container.offsetWidth : firstItem?.offsetWidth ?? 0;
|
|
86
|
-
container.style.scrollBehavior = "auto";
|
|
87
|
-
container.scrollLeft = index * (itemWidth + (fw ? 0 : g));
|
|
88
|
-
container.style.scrollBehavior = "";
|
|
89
|
-
}, []);
|
|
90
|
-
const handleScroll = useCallback(() => {
|
|
91
|
-
const container = scrollRef.current;
|
|
92
|
-
if (!container) return;
|
|
93
|
-
const scrollLeft = container.scrollLeft;
|
|
94
|
-
const firstItem = container.children[0];
|
|
95
|
-
const itemWidth = isFullWidth ? container.offsetWidth : firstItem?.offsetWidth ?? 0;
|
|
96
|
-
if (itemWidth > 0) {
|
|
97
|
-
const index = Math.round(scrollLeft / (itemWidth + gap));
|
|
98
|
-
setScrollIndex(Math.min(index, totalPositions - 1));
|
|
99
|
-
}
|
|
100
|
-
}, [gap, isFullWidth, totalPositions]);
|
|
101
|
-
useEffect(() => {
|
|
102
|
-
if (disableScroll) return;
|
|
103
|
-
const container = scrollRef.current;
|
|
104
|
-
if (!container) return;
|
|
105
|
-
container.addEventListener("scroll", handleScroll);
|
|
106
|
-
return () => {
|
|
107
|
-
container.removeEventListener("scroll", handleScroll);
|
|
108
|
-
};
|
|
109
|
-
}, [disableScroll, handleScroll]);
|
|
110
|
-
useEffect(() => {
|
|
111
|
-
if (!disableScroll) return;
|
|
112
|
-
const container = scrollRef.current;
|
|
113
|
-
if (!container) return;
|
|
114
|
-
const preventScroll = (e) => {
|
|
115
|
-
e.preventDefault();
|
|
116
|
-
};
|
|
117
|
-
container.addEventListener("wheel", preventScroll, { passive: false });
|
|
118
|
-
return () => {
|
|
119
|
-
container.removeEventListener("wheel", preventScroll);
|
|
120
|
-
};
|
|
121
|
-
}, [disableScroll]);
|
|
122
|
-
const scrollTo = useCallback(
|
|
123
|
-
(index) => {
|
|
124
|
-
const container = scrollRef.current;
|
|
125
|
-
if (!container) return;
|
|
126
|
-
const firstItem = container.children[0];
|
|
127
|
-
const itemWidth = isFullWidth ? container.offsetWidth : firstItem?.offsetWidth ?? 0;
|
|
128
|
-
const isLastPosition = index === totalPositions - 1;
|
|
129
|
-
const scrollLeft = isLastPosition ? container.scrollWidth - container.offsetWidth : index * (itemWidth + gap);
|
|
130
|
-
container.scrollTo({
|
|
131
|
-
left: scrollLeft,
|
|
132
|
-
behavior: disableAnimation ? "auto" : "smooth"
|
|
133
|
-
});
|
|
134
|
-
},
|
|
135
|
-
[gap, isFullWidth, totalPositions, disableAnimation]
|
|
136
|
-
);
|
|
137
|
-
const scrollPrev = useCallback(() => {
|
|
138
|
-
if (currentIndex > 0) {
|
|
139
|
-
scrollTo(currentIndex - 1);
|
|
140
|
-
}
|
|
141
|
-
}, [currentIndex, scrollTo]);
|
|
142
|
-
const scrollNext = useCallback(() => {
|
|
143
|
-
if (currentIndex < totalPositions - 1) {
|
|
144
|
-
scrollTo(currentIndex + 1);
|
|
145
|
-
}
|
|
146
|
-
}, [currentIndex, totalPositions, scrollTo]);
|
|
147
|
-
const handlePrev = onPrev ?? scrollPrev;
|
|
148
|
-
const handleNext = onNext ?? scrollNext;
|
|
149
|
-
const handlePrevRef = useRef(handlePrev);
|
|
150
|
-
const handleNextRef = useRef(handleNext);
|
|
151
|
-
useEffect(() => {
|
|
152
|
-
handlePrevRef.current = handlePrev;
|
|
153
|
-
handleNextRef.current = handleNext;
|
|
154
|
-
});
|
|
155
|
-
useEffect(() => {
|
|
156
|
-
const handleKeyDown = (e) => {
|
|
157
|
-
if (e.key === "ArrowLeft") handlePrevRef.current();
|
|
158
|
-
if (e.key === "ArrowRight") handleNextRef.current();
|
|
159
|
-
};
|
|
160
|
-
document.addEventListener("keydown", handleKeyDown);
|
|
161
|
-
return () => {
|
|
162
|
-
document.removeEventListener("keydown", handleKeyDown);
|
|
163
|
-
};
|
|
164
|
-
}, []);
|
|
165
|
-
if (errorMessage) {
|
|
166
|
-
return /* @__PURE__ */ jsx(CarouselError, { message: errorMessage });
|
|
167
|
-
}
|
|
168
|
-
const canScrollPrev = currentIndex > 0;
|
|
169
|
-
const canScrollNext = currentIndex < totalPositions - 1;
|
|
170
|
-
const showControls = totalPositions > 1;
|
|
171
|
-
return /* @__PURE__ */ jsxs("div", { className: clsx("ui:relative", isLightbox && "ui:h-full", className), children: [
|
|
172
|
-
/* @__PURE__ */ jsx(
|
|
173
|
-
"div",
|
|
174
|
-
{
|
|
175
|
-
ref: scrollRef,
|
|
176
|
-
className: clsx(
|
|
177
|
-
"ui:flex ui:overflow-x-auto ui:scroll-smooth ui:scrollbar-none",
|
|
178
|
-
isFullWidth && "ui:snap-x ui:snap-mandatory",
|
|
179
|
-
isLightbox && "ui:h-full",
|
|
180
|
-
rounded && "ui:rounded-lg ui:overflow-hidden"
|
|
181
|
-
),
|
|
182
|
-
style: { gap: `${String(gap)}px` },
|
|
183
|
-
children
|
|
184
|
-
}
|
|
185
|
-
),
|
|
186
|
-
showControls && showArrows && arrowPosition === "sides" && !isHero && !isLightbox && /* @__PURE__ */ jsx(
|
|
187
|
-
CarouselNavigation,
|
|
188
|
-
{
|
|
189
|
-
onPrev: handlePrev,
|
|
190
|
-
onNext: handleNext,
|
|
191
|
-
canPrev: canScrollPrev,
|
|
192
|
-
canNext: canScrollNext,
|
|
193
|
-
size: "md",
|
|
194
|
-
position: "sides"
|
|
195
|
-
}
|
|
196
|
-
),
|
|
197
|
-
showControls && isHero && (showPagination || showArrows) && /* @__PURE__ */ jsxs(
|
|
198
|
-
"div",
|
|
199
|
-
{
|
|
200
|
-
className: clsx(
|
|
201
|
-
"ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:w-full ui:z-10 ui:flex ui:items-end",
|
|
202
|
-
heroControlsClassName
|
|
203
|
-
),
|
|
204
|
-
children: [
|
|
205
|
-
/* @__PURE__ */ jsx("div", { className: "ui:flex-1" }),
|
|
206
|
-
showPagination && /* @__PURE__ */ jsx(
|
|
207
|
-
CarouselPagination,
|
|
208
|
-
{
|
|
209
|
-
total: totalPositions,
|
|
210
|
-
current: currentIndex,
|
|
211
|
-
light: true
|
|
212
|
-
}
|
|
213
|
-
),
|
|
214
|
-
/* @__PURE__ */ jsx("div", { className: "ui:flex-1 ui:flex ui:justify-end", children: showArrows && /* @__PURE__ */ jsx(
|
|
215
|
-
CarouselNavigation,
|
|
216
|
-
{
|
|
217
|
-
onPrev: handlePrev,
|
|
218
|
-
onNext: handleNext,
|
|
219
|
-
canPrev: canScrollPrev,
|
|
220
|
-
canNext: canScrollNext,
|
|
221
|
-
size: "sm"
|
|
222
|
-
}
|
|
223
|
-
) })
|
|
224
|
-
]
|
|
225
|
-
}
|
|
226
|
-
),
|
|
227
|
-
showControls && !isHero && !isLightbox && (showArrows && arrowPosition === "bottom-right" || showPagination) ? /* @__PURE__ */ jsxs(
|
|
228
|
-
"div",
|
|
229
|
-
{
|
|
230
|
-
className: clsx(
|
|
231
|
-
"ui:mt-4 ui:flex ui:items-center",
|
|
232
|
-
arrowPosition === "bottom-right" ? "ui:justify-end ui:gap-4" : "ui:justify-center"
|
|
233
|
-
),
|
|
234
|
-
children: [
|
|
235
|
-
showPagination && /* @__PURE__ */ jsx(CarouselPagination, { total: totalPositions, current: currentIndex }),
|
|
236
|
-
showArrows && arrowPosition === "bottom-right" && /* @__PURE__ */ jsx(
|
|
237
|
-
CarouselNavigation,
|
|
238
|
-
{
|
|
239
|
-
onPrev: handlePrev,
|
|
240
|
-
onNext: handleNext,
|
|
241
|
-
canPrev: canScrollPrev,
|
|
242
|
-
canNext: canScrollNext,
|
|
243
|
-
size: "sm"
|
|
244
|
-
}
|
|
245
|
-
)
|
|
246
|
-
]
|
|
247
|
-
}
|
|
248
|
-
) : null,
|
|
249
|
-
showControls && isLightbox && /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:top-4 ui:right-4 ui:z-10", children: /* @__PURE__ */ jsx(CarouselCounter, { current: currentIndex, total: totalPositions }) }),
|
|
250
|
-
showControls && isLightbox && showArrows && /* @__PURE__ */ jsx(
|
|
251
|
-
CarouselNavigation,
|
|
252
|
-
{
|
|
253
|
-
onPrev: handlePrev,
|
|
254
|
-
onNext: handleNext,
|
|
255
|
-
canPrev: canScrollPrev,
|
|
256
|
-
canNext: canScrollNext,
|
|
257
|
-
size: "md",
|
|
258
|
-
position: "sides-inset",
|
|
259
|
-
iconVariant: "ghost"
|
|
260
|
-
}
|
|
261
|
-
)
|
|
262
|
-
] });
|
|
263
|
-
}
|
|
264
|
-
var Carousel_default = Carousel;
|
|
265
|
-
export {
|
|
266
|
-
Carousel_default as default
|
|
267
|
-
};
|
|
1
|
+
import{jsx as o,jsxs as S}from"react/jsx-runtime";import M from"clsx";import{useCallback as b,useEffect as h,useLayoutEffect as Z,useRef as z,useState as F}from"react";import _ from"./CarouselCounter";import ee from"./CarouselError";import T from"./CarouselNavigation";import K from"./CarouselPagination";function te({children:k,variant:w="standard",showPagination:L=!0,showArrows:d=!0,arrowPosition:P="sides",gap:l=16,className:O,heroControlsClassName:$,errorMessage:D,rounded:q=!0,initialIndex:H,onPrev:A,onNext:G,disableAnimation:V=!1,disableScroll:x=!1}){const c=z(null),[r,y]=F(1),[J,Q]=F(H??0),i=x?H??0:J,W=w==="hero",a=w==="lightbox",u=W||a,g=b(()=>{const e=c.current;if(!e)return;const t=e.children;if(u){y(t.length);return}const s=t[0];if(!s){y(1);return}const n=s.offsetWidth,f=e.scrollWidth-e.offsetWidth;if(f<=0)y(1);else if(n>0){const p=Math.round(f/(n+l))+1;y(Math.max(1,p))}},[l,u]);h(()=>{g()},[k,g]),h(()=>{const e=c.current;if(!e)return;const t=new ResizeObserver(()=>{g()});return t.observe(e),()=>{t.disconnect()}},[g]);const U=z({index:H??0,isFullWidth:u,gap:l});Z(()=>{const{index:e,isFullWidth:t,gap:s}=U.current;if(e<=0)return;const n=c.current;if(!n)return;const f=n.children[0],p=t?n.offsetWidth:f?.offsetWidth??0;n.style.scrollBehavior="auto",n.scrollLeft=e*(p+(t?0:s)),n.style.scrollBehavior=""},[]);const I=b(()=>{const e=c.current;if(!e)return;const t=e.scrollLeft,s=e.children[0],n=u?e.offsetWidth:s?.offsetWidth??0;if(n>0){const f=Math.round(t/(n+l));Q(Math.min(f,r-1))}},[l,u,r]);h(()=>{if(x)return;const e=c.current;if(e)return e.addEventListener("scroll",I),()=>{e.removeEventListener("scroll",I)}},[x,I]),h(()=>{if(!x)return;const e=c.current;if(!e)return;const t=s=>{s.preventDefault()};return e.addEventListener("wheel",t,{passive:!1}),()=>{e.removeEventListener("wheel",t)}},[x]);const C=b(e=>{const t=c.current;if(!t)return;const s=t.children[0],n=u?t.offsetWidth:s?.offsetWidth??0,p=e===r-1?t.scrollWidth-t.offsetWidth:e*(n+l);t.scrollTo({left:p,behavior:V?"auto":"smooth"})},[l,u,r,V]),X=b(()=>{i>0&&C(i-1)},[i,C]),Y=b(()=>{i<r-1&&C(i+1)},[i,r,C]),m=A??X,v=G??Y,j=z(m),B=z(v);if(h(()=>{j.current=m,B.current=v}),h(()=>{const e=t=>{t.key==="ArrowLeft"&&j.current(),t.key==="ArrowRight"&&B.current()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[]),D)return o(ee,{message:D});const E=i>0,R=i<r-1,N=r>1;return S("div",{className:M("ui:relative",a&&"ui:h-full",O),children:[o("div",{ref:c,className:M("ui:flex ui:overflow-x-auto ui:scroll-smooth ui:scrollbar-none",u&&"ui:snap-x ui:snap-mandatory",a&&"ui:h-full",q&&"ui:rounded-lg ui:overflow-hidden"),style:{gap:`${String(l)}px`},children:k}),N&&d&&P==="sides"&&!W&&!a&&o(T,{onPrev:m,onNext:v,canPrev:E,canNext:R,size:"md",position:"sides"}),N&&W&&(L||d)&&S("div",{className:M("ui:absolute ui:bottom-4 ui:left-1/2 ui:-translate-x-1/2 ui:w-full ui:z-10 ui:flex ui:items-end",$),children:[o("div",{className:"ui:flex-1"}),L&&o(K,{total:r,current:i,light:!0}),o("div",{className:"ui:flex-1 ui:flex ui:justify-end",children:d&&o(T,{onPrev:m,onNext:v,canPrev:E,canNext:R,size:"sm"})})]}),N&&!W&&!a&&(d&&P==="bottom-right"||L)?S("div",{className:M("ui:mt-4 ui:flex ui:items-center",P==="bottom-right"?"ui:justify-end ui:gap-4":"ui:justify-center"),children:[L&&o(K,{total:r,current:i}),d&&P==="bottom-right"&&o(T,{onPrev:m,onNext:v,canPrev:E,canNext:R,size:"sm"})]}):null,N&&a&&o("div",{className:"ui:absolute ui:top-4 ui:right-4 ui:z-10",children:o(_,{current:i,total:r})}),N&&a&&d&&o(T,{onPrev:m,onNext:v,canPrev:E,canNext:R,size:"md",position:"sides-inset",iconVariant:"ghost"})]})}var ce=te;export{ce as default};
|
|
268
2
|
//# sourceMappingURL=Carousel.js.map
|