@vite-mf-monorepo/ui 0.4.5 → 0.4.7
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.d.ts +19 -0
- package/dist/Avatar/Avatar.js +62 -0
- package/dist/Avatar/Avatar.js.map +1 -0
- package/dist/Avatar/index.d.ts +3 -0
- package/dist/Avatar/index.js +5 -0
- package/dist/Avatar/index.js.map +1 -0
- package/dist/Badge/Badge.d.ts +23 -0
- package/dist/Badge/Badge.js +48 -0
- package/dist/Badge/Badge.js.map +1 -0
- package/dist/Badge/index.d.ts +4 -0
- package/dist/Badge/index.js +5 -0
- package/dist/Badge/index.js.map +1 -0
- package/dist/Button/Button.utils.d.ts +23 -0
- package/dist/{chunk-IUGKH376.js → Button/Button.utils.js} +8 -7
- package/dist/Button/Button.utils.js.map +1 -0
- package/dist/Button/index.d.ts +6 -26
- package/dist/Button/index.js +4 -5
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/Card.d.ts +11 -0
- package/dist/{chunk-RZU2FFBW.js → Card/Card.js} +7 -8
- package/dist/Card/Card.js.map +1 -0
- package/dist/Card/index.d.ts +3 -11
- package/dist/Card/index.js +4 -2
- package/dist/Card/index.js.map +1 -1
- package/dist/Carousel/Carousel.d.ts +65 -0
- package/dist/Carousel/Carousel.js +268 -0
- package/dist/Carousel/Carousel.js.map +1 -0
- package/dist/Carousel/CarouselCounter.d.ts +17 -0
- package/dist/Carousel/CarouselCounter.js +28 -0
- package/dist/Carousel/CarouselCounter.js.map +1 -0
- package/dist/Carousel/CarouselError.d.ts +8 -0
- package/dist/Carousel/CarouselError.js +18 -0
- package/dist/Carousel/CarouselError.js.map +1 -0
- package/dist/Carousel/CarouselItem.d.ts +16 -0
- package/dist/Carousel/CarouselItem.js +28 -0
- package/dist/Carousel/CarouselItem.js.map +1 -0
- package/dist/Carousel/CarouselLoading.d.ts +25 -0
- package/dist/Carousel/CarouselLoading.js +63 -0
- package/dist/Carousel/CarouselLoading.js.map +1 -0
- package/dist/Carousel/CarouselNavigation.d.ts +31 -0
- package/dist/Carousel/CarouselNavigation.js +97 -0
- package/dist/Carousel/CarouselNavigation.js.map +1 -0
- package/dist/Carousel/CarouselPagination.d.ts +20 -0
- package/dist/Carousel/CarouselPagination.js +29 -0
- package/dist/Carousel/CarouselPagination.js.map +1 -0
- package/dist/Carousel/index.d.ts +8 -0
- package/dist/Carousel/index.js +15 -0
- package/dist/Carousel/index.js.map +1 -0
- package/dist/HeroImage/HeroImage.d.ts +15 -0
- package/dist/HeroImage/HeroImage.js +47 -0
- package/dist/HeroImage/HeroImage.js.map +1 -0
- package/dist/HeroImage/index.d.ts +2 -0
- package/dist/HeroImage/index.js +5 -0
- package/dist/HeroImage/index.js.map +1 -0
- package/dist/Icon/Icon.d.ts +14 -0
- package/dist/Icon/Icon.js +204 -0
- package/dist/Icon/Icon.js.map +1 -0
- package/dist/Icon/index.d.ts +3 -14
- package/dist/Icon/index.js +4 -2
- package/dist/Icon/index.js.map +1 -1
- package/dist/IconButton/IconButton.d.ts +17 -0
- package/dist/IconButton/IconButton.js +44 -0
- package/dist/IconButton/IconButton.js.map +1 -0
- package/dist/IconButton/index.d.ts +4 -0
- package/dist/IconButton/index.js +5 -0
- package/dist/IconButton/index.js.map +1 -0
- package/dist/{MovieCard.utils-D8i4d7qA.d.ts → Image/Image.d.ts} +1 -28
- package/dist/Image/Image.js +125 -0
- package/dist/Image/Image.js.map +1 -0
- package/dist/Image/index.d.ts +3 -0
- package/dist/Image/index.js +5 -0
- package/dist/Image/index.js.map +1 -0
- package/dist/Modal/Modal.d.ts +20 -0
- package/dist/Modal/Modal.js +55 -0
- package/dist/Modal/Modal.js.map +1 -0
- package/dist/Modal/index.d.ts +3 -0
- package/dist/Modal/index.js +5 -0
- package/dist/Modal/index.js.map +1 -0
- package/dist/MovieCard/MovieCard.utils.d.ts +34 -0
- package/dist/MovieCard/MovieCard.utils.js +20 -0
- package/dist/MovieCard/MovieCard.utils.js.map +1 -0
- package/dist/MovieCard/MovieCardContent.d.ts +18 -0
- package/dist/MovieCard/MovieCardContent.js +75 -0
- package/dist/MovieCard/MovieCardContent.js.map +1 -0
- package/dist/MovieCard/index.d.ts +6 -0
- package/dist/MovieCard/index.js +5 -0
- package/dist/MovieCard/index.js.map +1 -0
- package/dist/Rating/CircleRating.d.ts +20 -0
- package/dist/Rating/CircleRating.js +75 -0
- package/dist/Rating/CircleRating.js.map +1 -0
- package/dist/Rating/Rating.d.ts +23 -0
- package/dist/Rating/Rating.js +41 -0
- package/dist/Rating/Rating.js.map +1 -0
- package/dist/Rating/StarsRating.d.ts +18 -0
- package/dist/Rating/StarsRating.js +47 -0
- package/dist/Rating/StarsRating.js.map +1 -0
- package/dist/Rating/index.d.ts +2 -0
- package/dist/Rating/index.js +5 -0
- package/dist/Rating/index.js.map +1 -0
- package/dist/Skeleton/Skeleton.d.ts +23 -0
- package/dist/{chunk-FJZK3PY6.js → Skeleton/Skeleton.js} +6 -7
- package/dist/Skeleton/Skeleton.js.map +1 -0
- package/dist/Skeleton/index.d.ts +3 -0
- package/dist/Skeleton/index.js +5 -0
- package/dist/Skeleton/index.js.map +1 -0
- package/dist/Spinner/Spinner.d.ts +8 -0
- package/dist/Spinner/Spinner.js +20 -0
- package/dist/Spinner/Spinner.js.map +1 -0
- package/dist/Spinner/index.d.ts +2 -0
- package/dist/Spinner/index.js +5 -0
- package/dist/Spinner/index.js.map +1 -0
- package/dist/Tabs/Tabs.d.ts +34 -0
- package/dist/Tabs/Tabs.js +47 -0
- package/dist/Tabs/Tabs.js.map +1 -0
- package/dist/Tabs/TabsContext.d.ts +21 -0
- package/dist/Tabs/TabsContext.js +16 -0
- package/dist/Tabs/TabsContext.js.map +1 -0
- package/dist/Tabs/TabsList.d.ts +7 -0
- package/dist/Tabs/TabsList.js +51 -0
- package/dist/Tabs/TabsList.js.map +1 -0
- package/dist/Tabs/TabsListContext.d.ts +16 -0
- package/dist/Tabs/TabsListContext.js +16 -0
- package/dist/Tabs/TabsListContext.js.map +1 -0
- package/dist/Tabs/TabsPanel.d.ts +17 -0
- package/dist/Tabs/TabsPanel.js +26 -0
- package/dist/Tabs/TabsPanel.js.map +1 -0
- package/dist/Tabs/TabsTrigger.d.ts +12 -0
- package/dist/Tabs/TabsTrigger.js +124 -0
- package/dist/Tabs/TabsTrigger.js.map +1 -0
- package/dist/Tabs/index.d.ts +6 -0
- package/dist/Tabs/index.js +5 -0
- package/dist/Tabs/index.js.map +1 -0
- package/dist/Talent/Talent.d.ts +19 -0
- package/dist/Talent/Talent.js +69 -0
- package/dist/Talent/Talent.js.map +1 -0
- package/dist/Talent/index.d.ts +4 -0
- package/dist/Talent/index.js +5 -0
- package/dist/Talent/index.js.map +1 -0
- package/dist/TrailerCard/TrailerCard.d.ts +15 -0
- package/dist/TrailerCard/TrailerCard.js +86 -0
- package/dist/TrailerCard/TrailerCard.js.map +1 -0
- package/dist/TrailerCard/index.d.ts +2 -0
- package/dist/TrailerCard/index.js +5 -0
- package/dist/TrailerCard/index.js.map +1 -0
- package/dist/Typography/Typography.d.ts +17 -0
- package/dist/Typography/Typography.js +55 -0
- package/dist/Typography/Typography.js.map +1 -0
- package/dist/Typography/index.d.ts +2 -0
- package/dist/Typography/index.js +5 -0
- package/dist/Typography/index.js.map +1 -0
- package/dist/index.d.ts +31 -372
- package/dist/index.js +50 -1099
- package/dist/index.js.map +1 -1
- package/dist/next/Button/Button.d.ts +9 -0
- package/dist/{chunk-ZTQU4GMY.js → next/Button/Button.js} +13 -10
- package/dist/next/Button/Button.js.map +1 -0
- package/dist/next/Button/Button.types.d.ts +26 -0
- package/dist/next/Button/Button.types.js +1 -0
- package/dist/next/Button/Button.types.js.map +1 -0
- package/dist/next/Button/index.d.ts +6 -0
- package/dist/next/Button/index.js +5 -0
- package/dist/next/Button/index.js.map +1 -0
- package/dist/next/HeroImage/HeroImage.d.ts +11 -0
- package/dist/next/HeroImage/HeroImage.js +44 -0
- package/dist/next/HeroImage/HeroImage.js.map +1 -0
- package/dist/next/HeroImage/index.d.ts +2 -0
- package/dist/next/HeroImage/index.js +5 -0
- package/dist/next/HeroImage/index.js.map +1 -0
- package/dist/next/Image/NextImage.d.ts +8 -0
- package/dist/next/Image/NextImage.js +84 -0
- package/dist/next/Image/NextImage.js.map +1 -0
- package/dist/next/Image/NextImage.types.d.ts +13 -0
- package/dist/next/Image/NextImage.types.js +1 -0
- package/dist/next/Image/NextImage.types.js.map +1 -0
- package/dist/next/Image/index.d.ts +5 -0
- package/dist/next/Image/index.js +5 -0
- package/dist/next/Image/index.js.map +1 -0
- package/dist/next/MovieCard/MovieCard.d.ts +9 -0
- package/dist/next/MovieCard/MovieCard.js +44 -0
- package/dist/next/MovieCard/MovieCard.js.map +1 -0
- package/dist/next/MovieCard/MovieCard.types.d.ts +15 -0
- package/dist/next/MovieCard/MovieCard.types.js +1 -0
- package/dist/next/MovieCard/MovieCard.types.js.map +1 -0
- package/dist/next/MovieCard/MovieCardContent.d.ts +19 -0
- package/dist/next/MovieCard/MovieCardContent.js +79 -0
- package/dist/next/MovieCard/MovieCardContent.js.map +1 -0
- package/dist/next/MovieCard/index.d.ts +6 -0
- package/dist/next/MovieCard/index.js +5 -0
- package/dist/next/MovieCard/index.js.map +1 -0
- package/dist/next/index.d.ts +14 -60
- package/dist/next/index.js +10 -270
- package/dist/next/index.js.map +1 -1
- package/dist/react-router/Button/Button.d.ts +9 -0
- package/dist/react-router/Button/Button.js +52 -0
- package/dist/react-router/Button/Button.js.map +1 -0
- package/dist/react-router/Button/Button.types.d.ts +24 -0
- package/dist/react-router/Button/Button.types.js +1 -0
- package/dist/react-router/Button/Button.types.js.map +1 -0
- package/dist/react-router/Button/index.d.ts +6 -0
- package/dist/react-router/Button/index.js +5 -0
- package/dist/react-router/Button/index.js.map +1 -0
- package/dist/react-router/MovieCard/MovieCard.d.ts +9 -0
- package/dist/react-router/MovieCard/MovieCard.js +42 -0
- package/dist/react-router/MovieCard/MovieCard.js.map +1 -0
- package/dist/react-router/MovieCard/MovieCard.types.d.ts +15 -0
- package/dist/react-router/MovieCard/MovieCard.types.js +1 -0
- package/dist/react-router/MovieCard/MovieCard.types.js.map +1 -0
- package/dist/react-router/MovieCard/index.d.ts +6 -0
- package/dist/react-router/MovieCard/index.js +5 -0
- package/dist/react-router/MovieCard/index.js.map +1 -0
- package/dist/react-router/index.d.ts +8 -17
- package/dist/react-router/index.js +6 -7
- package/dist/react-router/index.js.map +1 -1
- package/dist/styles.css +2 -0
- package/package.json +4 -4
- package/dist/chunk-6DP3KZQG.js +0 -214
- package/dist/chunk-6DP3KZQG.js.map +0 -1
- package/dist/chunk-6FBMTGXQ.js +0 -119
- package/dist/chunk-6FBMTGXQ.js.map +0 -1
- package/dist/chunk-7IAJQE27.js +0 -228
- package/dist/chunk-7IAJQE27.js.map +0 -1
- package/dist/chunk-DGJI4VNO.js +0 -3
- package/dist/chunk-DGJI4VNO.js.map +0 -1
- package/dist/chunk-FJZK3PY6.js.map +0 -1
- package/dist/chunk-IUGKH376.js.map +0 -1
- package/dist/chunk-RZU2FFBW.js.map +0 -1
- package/dist/chunk-ZTQU4GMY.js.map +0 -1
- package/dist/index.css +0 -1313
- package/dist/index.css.map +0 -1
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { IconButton } from "../IconButton";
|
|
4
|
+
function CarouselNavigation({
|
|
5
|
+
onPrev,
|
|
6
|
+
onNext,
|
|
7
|
+
canPrev,
|
|
8
|
+
canNext,
|
|
9
|
+
size = "sm",
|
|
10
|
+
position = "inline",
|
|
11
|
+
iconVariant = "secondary",
|
|
12
|
+
className
|
|
13
|
+
}) {
|
|
14
|
+
if (position === "sides") {
|
|
15
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16
|
+
/* @__PURE__ */ jsx("div", { className: "ui:absolute ui:left-0 ui:top-1/2 ui:-translate-x-1/2 ui:-translate-y-1/2", children: /* @__PURE__ */ jsx(
|
|
17
|
+
IconButton,
|
|
18
|
+
{
|
|
19
|
+
icon: "ChevronLeft",
|
|
20
|
+
variant: iconVariant,
|
|
21
|
+
size,
|
|
22
|
+
onClick: onPrev,
|
|
23
|
+
disabled: !canPrev,
|
|
24
|
+
"aria-label": "Previous"
|
|
25
|
+
}
|
|
26
|
+
) }),
|
|
27
|
+
/* @__PURE__ */ jsx("div", { className: "ui:absolute ui:right-0 ui:top-1/2 ui:-translate-y-1/2 ui:translate-x-1/2", children: /* @__PURE__ */ jsx(
|
|
28
|
+
IconButton,
|
|
29
|
+
{
|
|
30
|
+
icon: "ChevronRight",
|
|
31
|
+
variant: iconVariant,
|
|
32
|
+
size,
|
|
33
|
+
onClick: onNext,
|
|
34
|
+
disabled: !canNext,
|
|
35
|
+
"aria-label": "Next"
|
|
36
|
+
}
|
|
37
|
+
) })
|
|
38
|
+
] });
|
|
39
|
+
}
|
|
40
|
+
if (position === "sides-inset") {
|
|
41
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-10 ui:text-white", children: /* @__PURE__ */ jsx(
|
|
43
|
+
IconButton,
|
|
44
|
+
{
|
|
45
|
+
icon: "ChevronLeft",
|
|
46
|
+
variant: iconVariant,
|
|
47
|
+
size,
|
|
48
|
+
onClick: onPrev,
|
|
49
|
+
disabled: !canPrev,
|
|
50
|
+
"aria-label": "Previous",
|
|
51
|
+
className: "ui:bg-white/20 ui:hover:bg-white/55"
|
|
52
|
+
}
|
|
53
|
+
) }),
|
|
54
|
+
/* @__PURE__ */ jsx("div", { className: "ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-10 ui:text-white", children: /* @__PURE__ */ jsx(
|
|
55
|
+
IconButton,
|
|
56
|
+
{
|
|
57
|
+
icon: "ChevronRight",
|
|
58
|
+
variant: iconVariant,
|
|
59
|
+
size,
|
|
60
|
+
onClick: onNext,
|
|
61
|
+
disabled: !canNext,
|
|
62
|
+
"aria-label": "Next",
|
|
63
|
+
className: "ui:bg-white/20 ui:hover:bg-white/55"
|
|
64
|
+
}
|
|
65
|
+
) })
|
|
66
|
+
] });
|
|
67
|
+
}
|
|
68
|
+
return /* @__PURE__ */ jsxs("div", { className: clsx("ui:flex ui:gap-2", className), children: [
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
IconButton,
|
|
71
|
+
{
|
|
72
|
+
icon: "ChevronLeft",
|
|
73
|
+
variant: iconVariant,
|
|
74
|
+
size,
|
|
75
|
+
onClick: onPrev,
|
|
76
|
+
disabled: !canPrev,
|
|
77
|
+
"aria-label": "Previous"
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
/* @__PURE__ */ jsx(
|
|
81
|
+
IconButton,
|
|
82
|
+
{
|
|
83
|
+
icon: "ChevronRight",
|
|
84
|
+
variant: iconVariant,
|
|
85
|
+
size,
|
|
86
|
+
onClick: onNext,
|
|
87
|
+
disabled: !canNext,
|
|
88
|
+
"aria-label": "Next"
|
|
89
|
+
}
|
|
90
|
+
)
|
|
91
|
+
] });
|
|
92
|
+
}
|
|
93
|
+
var CarouselNavigation_default = CarouselNavigation;
|
|
94
|
+
export {
|
|
95
|
+
CarouselNavigation_default as default
|
|
96
|
+
};
|
|
97
|
+
//# sourceMappingURL=CarouselNavigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Carousel/CarouselNavigation.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { IconButton } from '../IconButton'\n\n/** Position mode for navigation buttons */\nexport type CarouselNavigationPosition = 'inline' | 'sides' | 'sides-inset'\n\nexport interface CarouselNavigationProps {\n /** Callback for previous button */\n onPrev: () => void\n /** Callback for next button */\n onNext: () => void\n /** Whether previous is disabled */\n canPrev: boolean\n /** Whether next is disabled */\n canNext: boolean\n /** Button size */\n size?: 'sm' | 'md'\n /** Position mode */\n position?: CarouselNavigationPosition\n /** Icon button visual variant — ghost for lightbox (white arrows on dark bg) */\n iconVariant?: 'secondary' | 'ghost'\n /** Additional class name */\n className?: string\n}\n\n/**\n * Navigation buttons for Carousel (previous/next).\n * - inline: side by side (for bottom-right layout)\n * - sides: absolute, centered on the carousel edges (overhangs container — standard carousel)\n * - sides-inset: absolute, inside the container with padding (lightbox, fullscreen contexts)\n */\nfunction CarouselNavigation({\n onPrev,\n onNext,\n canPrev,\n canNext,\n size = 'sm',\n position = 'inline',\n iconVariant = 'secondary',\n className,\n}: Readonly<CarouselNavigationProps>) {\n if (position === 'sides') {\n return (\n <>\n <div className=\"ui:absolute ui:left-0 ui:top-1/2 ui:-translate-x-1/2 ui:-translate-y-1/2\">\n <IconButton\n icon=\"ChevronLeft\"\n variant={iconVariant}\n size={size}\n onClick={onPrev}\n disabled={!canPrev}\n aria-label=\"Previous\"\n />\n </div>\n <div className=\"ui:absolute ui:right-0 ui:top-1/2 ui:-translate-y-1/2 ui:translate-x-1/2\">\n <IconButton\n icon=\"ChevronRight\"\n variant={iconVariant}\n size={size}\n onClick={onNext}\n disabled={!canNext}\n aria-label=\"Next\"\n />\n </div>\n </>\n )\n }\n\n if (position === 'sides-inset') {\n return (\n <>\n <div className=\"ui:absolute ui:left-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-10 ui:text-white\">\n <IconButton\n icon=\"ChevronLeft\"\n variant={iconVariant}\n size={size}\n onClick={onPrev}\n disabled={!canPrev}\n aria-label=\"Previous\"\n className=\"ui:bg-white/20 ui:hover:bg-white/55\"\n />\n </div>\n <div className=\"ui:absolute ui:right-4 ui:top-1/2 ui:-translate-y-1/2 ui:z-10 ui:text-white\">\n <IconButton\n icon=\"ChevronRight\"\n variant={iconVariant}\n size={size}\n onClick={onNext}\n disabled={!canNext}\n aria-label=\"Next\"\n className=\"ui:bg-white/20 ui:hover:bg-white/55\"\n />\n </div>\n </>\n )\n }\n\n return (\n <div className={clsx('ui:flex ui:gap-2', className)}>\n <IconButton\n icon=\"ChevronLeft\"\n variant={iconVariant}\n size={size}\n onClick={onPrev}\n disabled={!canPrev}\n aria-label=\"Previous\"\n />\n <IconButton\n icon=\"ChevronRight\"\n variant={iconVariant}\n size={size}\n onClick={onNext}\n disabled={!canNext}\n aria-label=\"Next\"\n />\n </div>\n )\n}\n\nexport default CarouselNavigation\n"],"mappings":"AA4CM,mBAEI,KAFJ;AA5CN,OAAO,UAAU;AAEjB,SAAS,kBAAkB;AA8B3B,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AACF,GAAsC;AACpC,MAAI,aAAa,SAAS;AACxB,WACE,iCACE;AAAA,0BAAC,SAAI,WAAU,4EACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAW;AAAA;AAAA,MACb,GACF;AAAA,MACA,oBAAC,SAAI,WAAU,4EACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAW;AAAA;AAAA,MACb,GACF;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,aAAa,eAAe;AAC9B,WACE,iCACE;AAAA,0BAAC,SAAI,WAAU,8EACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ,GACF;AAAA,MACA,oBAAC,SAAI,WAAU,+EACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT;AAAA,UACA,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ,GACF;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,KAAK,oBAAoB,SAAS,GAChD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QACX,cAAW;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QACX,cAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,IAAO,6BAAQ;","names":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
interface CarouselPaginationProps {
|
|
4
|
+
/** Total number of items */
|
|
5
|
+
total: number;
|
|
6
|
+
/** Current active index */
|
|
7
|
+
current: number;
|
|
8
|
+
/** Use light colors (for dark backgrounds) */
|
|
9
|
+
light?: boolean;
|
|
10
|
+
/** Additional class name */
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Pagination dots for Carousel.
|
|
15
|
+
* Active dot is displayed as a capsule (wider), inactive dots are circles.
|
|
16
|
+
* Supports light mode for dark backgrounds (white dots).
|
|
17
|
+
*/
|
|
18
|
+
declare function CarouselPagination({ total, current, light, className, }: Readonly<CarouselPaginationProps>): react_jsx_runtime.JSX.Element | null;
|
|
19
|
+
|
|
20
|
+
export { type CarouselPaginationProps, CarouselPagination as default };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
function CarouselPagination({
|
|
4
|
+
total,
|
|
5
|
+
current,
|
|
6
|
+
light = false,
|
|
7
|
+
className
|
|
8
|
+
}) {
|
|
9
|
+
if (total === 0) return null;
|
|
10
|
+
return /* @__PURE__ */ jsx("div", { className: clsx("ui:flex ui:items-center ui:gap-2", className), children: Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
"aria-hidden": "true",
|
|
14
|
+
className: clsx(
|
|
15
|
+
"ui:rounded-full ui:transition-all ui:duration-300",
|
|
16
|
+
index === current ? clsx("ui:h-2 ui:w-6", light ? "ui:bg-white" : "ui:bg-primary") : clsx(
|
|
17
|
+
"ui:h-2 ui:w-2",
|
|
18
|
+
light ? "ui:bg-white/50 hover:ui:bg-white/70" : "ui:bg-gray-400 hover:ui:bg-gray-500"
|
|
19
|
+
)
|
|
20
|
+
)
|
|
21
|
+
},
|
|
22
|
+
index
|
|
23
|
+
)) });
|
|
24
|
+
}
|
|
25
|
+
var CarouselPagination_default = CarouselPagination;
|
|
26
|
+
export {
|
|
27
|
+
CarouselPagination_default as default
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=CarouselPagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Carousel/CarouselPagination.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nexport interface CarouselPaginationProps {\n /** Total number of items */\n total: number\n /** Current active index */\n current: number\n /** Use light colors (for dark backgrounds) */\n light?: boolean\n /** Additional class name */\n className?: string\n}\n\n/**\n * Pagination dots for Carousel.\n * Active dot is displayed as a capsule (wider), inactive dots are circles.\n * Supports light mode for dark backgrounds (white dots).\n */\nfunction CarouselPagination({\n total,\n current,\n light = false,\n className,\n}: Readonly<CarouselPaginationProps>) {\n if (total === 0) return null\n\n return (\n <div className={clsx('ui:flex ui:items-center ui:gap-2', className)}>\n {Array.from({ length: total }).map((_, index) => (\n <div\n key={index}\n aria-hidden=\"true\"\n className={clsx(\n 'ui:rounded-full ui:transition-all ui:duration-300',\n index === current\n ? clsx('ui:h-2 ui:w-6', light ? 'ui:bg-white' : 'ui:bg-primary')\n : clsx(\n 'ui:h-2 ui:w-2',\n light\n ? 'ui:bg-white/50 hover:ui:bg-white/70'\n : 'ui:bg-gray-400 hover:ui:bg-gray-500'\n )\n )}\n />\n ))}\n </div>\n )\n}\n\nexport default CarouselPagination\n"],"mappings":"AA6BQ;AA7BR,OAAO,UAAU;AAkBjB,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AACF,GAAsC;AACpC,MAAI,UAAU,EAAG,QAAO;AAExB,SACE,oBAAC,SAAI,WAAW,KAAK,oCAAoC,SAAS,GAC/D,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,IAAC;AAAA;AAAA,MAEC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,UAAU,UACN,KAAK,iBAAiB,QAAQ,gBAAgB,eAAe,IAC7D;AAAA,UACE;AAAA,UACA,QACI,wCACA;AAAA,QACN;AAAA,MACN;AAAA;AAAA,IAZK;AAAA,EAaP,CACD,GACH;AAEJ;AAEA,IAAO,6BAAQ;","names":[]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { default as Carousel, CarouselArrowPosition, CarouselProps, CarouselVariant } from './Carousel.js';
|
|
2
|
+
export { default as CarouselItem, CarouselItemProps } from './CarouselItem.js';
|
|
3
|
+
export { default as CarouselNavigation, CarouselNavigationPosition, CarouselNavigationProps } from './CarouselNavigation.js';
|
|
4
|
+
export { default as CarouselPagination, CarouselPaginationProps } from './CarouselPagination.js';
|
|
5
|
+
export { default as CarouselCounter, CarouselCounterProps } from './CarouselCounter.js';
|
|
6
|
+
export { default as CarouselLoading, CarouselLoadingProps } from './CarouselLoading.js';
|
|
7
|
+
import 'react/jsx-runtime';
|
|
8
|
+
import 'react';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as default2 } from "./Carousel";
|
|
2
|
+
import { default as default3 } from "./CarouselItem";
|
|
3
|
+
import { default as default4 } from "./CarouselNavigation";
|
|
4
|
+
import { default as default5 } from "./CarouselPagination";
|
|
5
|
+
import { default as default6 } from "./CarouselCounter";
|
|
6
|
+
import { default as default7 } from "./CarouselLoading";
|
|
7
|
+
export {
|
|
8
|
+
default2 as Carousel,
|
|
9
|
+
default6 as CarouselCounter,
|
|
10
|
+
default3 as CarouselItem,
|
|
11
|
+
default7 as CarouselLoading,
|
|
12
|
+
default4 as CarouselNavigation,
|
|
13
|
+
default5 as CarouselPagination
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Carousel/index.ts"],"sourcesContent":["export { default as Carousel } from './Carousel'\nexport type {\n CarouselArrowPosition,\n CarouselProps,\n CarouselVariant,\n} from './Carousel'\n\nexport { default as CarouselItem } from './CarouselItem'\nexport type { CarouselItemProps } from './CarouselItem'\n\nexport { default as CarouselNavigation } from './CarouselNavigation'\nexport type {\n CarouselNavigationPosition,\n CarouselNavigationProps,\n} from './CarouselNavigation'\n\nexport { default as CarouselPagination } from './CarouselPagination'\nexport type { CarouselPaginationProps } from './CarouselPagination'\n\nexport { default as CarouselCounter } from './CarouselCounter'\nexport type { CarouselCounterProps } from './CarouselCounter'\n\nexport { default as CarouselLoading } from './CarouselLoading'\nexport type { CarouselLoadingProps } from './CarouselLoading'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA2B;AAOpC,SAAoB,WAAXA,gBAA+B;AAGxC,SAAoB,WAAXA,gBAAqC;AAM9C,SAAoB,WAAXA,gBAAqC;AAG9C,SAAoB,WAAXA,gBAAkC;AAG3C,SAAoB,WAAXA,gBAAkC;","names":["default"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
|
|
3
|
+
interface HeroImageProps {
|
|
4
|
+
/** Backdrop path from TMDB API */
|
|
5
|
+
backdropPath?: string | null;
|
|
6
|
+
/** Alt text for the image */
|
|
7
|
+
title?: string | null;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* HeroImage component for displaying optimized backdrop images with responsive sources
|
|
11
|
+
* and gradient overlay. Used in hero sections across the application.
|
|
12
|
+
*/
|
|
13
|
+
declare function HeroImage({ backdropPath, title }: Readonly<HeroImageProps>): react_jsx_runtime.JSX.Element;
|
|
14
|
+
|
|
15
|
+
export { type HeroImageProps, HeroImage as default };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { getOptimizedImageUrl } from "@vite-mf-monorepo/shared";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { Skeleton } from "../Skeleton";
|
|
5
|
+
function HeroImage({ backdropPath, title }) {
|
|
6
|
+
const [loading, setLoading] = useState(true);
|
|
7
|
+
const backdropPathMobile = backdropPath ? getOptimizedImageUrl(backdropPath, "w300", 60) : void 0;
|
|
8
|
+
const backdropPathTablet = backdropPath ? getOptimizedImageUrl(backdropPath, "w300", 60) : void 0;
|
|
9
|
+
const backdropPathDesktop = backdropPath ? getOptimizedImageUrl(backdropPath, "w780", 60) : void 0;
|
|
10
|
+
const backdropPathUltraWide = backdropPath ? getOptimizedImageUrl(backdropPath, "w1280", 60) : void 0;
|
|
11
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
12
|
+
loading && /* @__PURE__ */ jsx(
|
|
13
|
+
Skeleton,
|
|
14
|
+
{
|
|
15
|
+
"data-testid": "hero-image-skeleton",
|
|
16
|
+
variant: "rectangle",
|
|
17
|
+
width: "ui:relative ui:w-full ui:h-full ui:hero-height ui:z-0",
|
|
18
|
+
aspectRatio: "21/9",
|
|
19
|
+
rounded: false
|
|
20
|
+
}
|
|
21
|
+
),
|
|
22
|
+
/* @__PURE__ */ jsxs("picture", { children: [
|
|
23
|
+
backdropPathMobile && /* @__PURE__ */ jsx("source", { media: "(max-width: 639px)", srcSet: backdropPathMobile }),
|
|
24
|
+
backdropPathTablet && /* @__PURE__ */ jsx("source", { media: "(max-width: 1023px)", srcSet: backdropPathTablet }),
|
|
25
|
+
backdropPathDesktop && /* @__PURE__ */ jsx("source", { media: "(max-width: 1535px)", srcSet: backdropPathDesktop }),
|
|
26
|
+
backdropPathUltraWide && /* @__PURE__ */ jsx("source", { media: "(min-width: 1536px)", srcSet: backdropPathUltraWide }),
|
|
27
|
+
backdropPathMobile && /* @__PURE__ */ jsx(
|
|
28
|
+
"img",
|
|
29
|
+
{
|
|
30
|
+
src: backdropPathMobile,
|
|
31
|
+
fetchPriority: "high",
|
|
32
|
+
onLoad: () => {
|
|
33
|
+
setLoading(false);
|
|
34
|
+
},
|
|
35
|
+
alt: title ?? "Unknown",
|
|
36
|
+
className: "ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0"
|
|
37
|
+
}
|
|
38
|
+
)
|
|
39
|
+
] }),
|
|
40
|
+
/* @__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" })
|
|
41
|
+
] });
|
|
42
|
+
}
|
|
43
|
+
var HeroImage_default = HeroImage;
|
|
44
|
+
export {
|
|
45
|
+
HeroImage_default as default
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=HeroImage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/HeroImage/HeroImage.tsx"],"sourcesContent":["import { getOptimizedImageUrl } from '@vite-mf-monorepo/shared'\nimport { useState } from 'react'\n\nimport { Skeleton } from '../Skeleton'\n\nexport interface HeroImageProps {\n /** Backdrop path from TMDB API */\n backdropPath?: string | null\n /** Alt text for the image */\n title?: string | null\n}\n\n/**\n * HeroImage component for displaying optimized backdrop images with responsive sources\n * and gradient overlay. Used in hero sections across the application.\n */\nfunction HeroImage({ backdropPath, title }: Readonly<HeroImageProps>) {\n const [loading, setLoading] = useState(true)\n\n const backdropPathMobile = backdropPath\n ? getOptimizedImageUrl(backdropPath, 'w300', 60)\n : undefined\n\n const backdropPathTablet = backdropPath\n ? getOptimizedImageUrl(backdropPath, 'w300', 60)\n : undefined\n\n const backdropPathDesktop = backdropPath\n ? getOptimizedImageUrl(backdropPath, 'w780', 60)\n : undefined\n\n const backdropPathUltraWide = backdropPath\n ? getOptimizedImageUrl(backdropPath, 'w1280', 60)\n : undefined\n\n return (\n <>\n {loading && (\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 <picture>\n {backdropPathMobile && (\n <source media=\"(max-width: 639px)\" srcSet={backdropPathMobile} />\n )}\n {backdropPathTablet && (\n <source media=\"(max-width: 1023px)\" srcSet={backdropPathTablet} />\n )}\n {backdropPathDesktop && (\n <source media=\"(max-width: 1535px)\" srcSet={backdropPathDesktop} />\n )}\n {backdropPathUltraWide && (\n <source media=\"(min-width: 1536px)\" srcSet={backdropPathUltraWide} />\n )}\n {backdropPathMobile && (\n <img\n src={backdropPathMobile}\n fetchPriority=\"high\"\n onLoad={() => {\n setLoading(false)\n }}\n alt={title ?? 'Unknown'}\n className=\"ui:relative ui:h-full ui:w-full ui:object-cover ui:object-center ui:z-0\"\n />\n )}\n </picture>\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":"AAoCI,mBAEI,KAQF,YAVF;AApCJ,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAazB,SAAS,UAAU,EAAE,cAAc,MAAM,GAA6B;AACpE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,QAAM,qBAAqB,eACvB,qBAAqB,cAAc,QAAQ,EAAE,IAC7C;AAEJ,QAAM,qBAAqB,eACvB,qBAAqB,cAAc,QAAQ,EAAE,IAC7C;AAEJ,QAAM,sBAAsB,eACxB,qBAAqB,cAAc,QAAQ,EAAE,IAC7C;AAEJ,QAAM,wBAAwB,eAC1B,qBAAqB,cAAc,SAAS,EAAE,IAC9C;AAEJ,SACE,iCACG;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAS;AAAA;AAAA,IACX;AAAA,IAEF,qBAAC,aACE;AAAA,4BACC,oBAAC,YAAO,OAAM,sBAAqB,QAAQ,oBAAoB;AAAA,MAEhE,sBACC,oBAAC,YAAO,OAAM,uBAAsB,QAAQ,oBAAoB;AAAA,MAEjE,uBACC,oBAAC,YAAO,OAAM,uBAAsB,QAAQ,qBAAqB;AAAA,MAElE,yBACC,oBAAC,YAAO,OAAM,uBAAsB,QAAQ,uBAAuB;AAAA,MAEpE,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAc;AAAA,UACd,QAAQ,MAAM;AACZ,uBAAW,KAAK;AAAA,UAClB;AAAA,UACA,KAAK,SAAS;AAAA,UACd,WAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IAEA,oBAAC,SAAI,WAAU,kJAAiJ;AAAA,KAClK;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/HeroImage/index.ts"],"sourcesContent":["export { default as HeroImage } from './HeroImage'\nexport type { HeroImageProps } from './HeroImage'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA4B;","names":["default"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { SVGProps } from 'react';
|
|
3
|
+
|
|
4
|
+
type IconName = 'ArrowLeft' | 'ArrowRight' | 'ArrowTopRightOnSquare' | 'Bars3' | 'Bookmark' | 'Check' | 'Calendar' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'EllipsisVertical' | 'ExclamationCircle' | 'ExclamationTriangle' | 'Film' | 'Photo' | 'Heart' | 'InformationCircle' | 'Link' | 'MagnifyingGlass' | 'Minus' | 'Play' | 'PlayCircle' | 'Plus' | 'Share' | 'Star' | 'Tv' | 'User' | 'Users' | 'XMark';
|
|
5
|
+
type IconSize = 16 | 20 | 24 | 32 | 48 | 64;
|
|
6
|
+
interface IconProps extends SVGProps<SVGSVGElement> {
|
|
7
|
+
/** Icon name from the available subset */
|
|
8
|
+
name: IconName;
|
|
9
|
+
/** Icon size in pixels (16, 20, 24, 32, 48, 64) */
|
|
10
|
+
size?: IconSize;
|
|
11
|
+
}
|
|
12
|
+
declare function Icon({ name, size, className, ...rest }: Readonly<IconProps>): react_jsx_runtime.JSX.Element;
|
|
13
|
+
|
|
14
|
+
export { type IconName, type IconProps, type IconSize, Icon as default };
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import {
|
|
3
|
+
ArrowLeftIcon as ArrowLeftIcon16,
|
|
4
|
+
ArrowRightIcon as ArrowRightIcon16,
|
|
5
|
+
Bars3Icon as Bars3Icon16,
|
|
6
|
+
BookmarkIcon as BookmarkIcon16,
|
|
7
|
+
CalendarIcon as CalendarIcon16,
|
|
8
|
+
CheckIcon as CheckIcon16,
|
|
9
|
+
ChevronDownIcon as ChevronDownIcon16,
|
|
10
|
+
ChevronLeftIcon as ChevronLeftIcon16,
|
|
11
|
+
ChevronRightIcon as ChevronRightIcon16,
|
|
12
|
+
ChevronUpIcon as ChevronUpIcon16,
|
|
13
|
+
EllipsisVerticalIcon as EllipsisVerticalIcon16,
|
|
14
|
+
ExclamationCircleIcon as ExclamationCircleIcon16,
|
|
15
|
+
ExclamationTriangleIcon as ExclamationTriangleIcon16,
|
|
16
|
+
HeartIcon as HeartIcon16,
|
|
17
|
+
InformationCircleIcon as InformationCircleIcon16,
|
|
18
|
+
LinkIcon as LinkIcon16,
|
|
19
|
+
MagnifyingGlassIcon as MagnifyingGlassIcon16,
|
|
20
|
+
MinusIcon as MinusIcon16,
|
|
21
|
+
PlayIcon as PlayIcon16,
|
|
22
|
+
PlusIcon as PlusIcon16,
|
|
23
|
+
StarIcon as StarIcon16,
|
|
24
|
+
UserIcon as UserIcon16,
|
|
25
|
+
XMarkIcon as XMarkIcon16
|
|
26
|
+
} from "@heroicons/react/16/solid";
|
|
27
|
+
import {
|
|
28
|
+
ArrowLeftIcon as ArrowLeftIcon20,
|
|
29
|
+
ArrowRightIcon as ArrowRightIcon20,
|
|
30
|
+
ArrowTopRightOnSquareIcon as ArrowTopRightOnSquareIcon20,
|
|
31
|
+
Bars3Icon as Bars3Icon20,
|
|
32
|
+
BookmarkIcon as BookmarkIcon20,
|
|
33
|
+
CalendarIcon as CalendarIcon20,
|
|
34
|
+
CheckIcon as CheckIcon20,
|
|
35
|
+
ChevronDownIcon as ChevronDownIcon20,
|
|
36
|
+
ChevronLeftIcon as ChevronLeftIcon20,
|
|
37
|
+
ChevronRightIcon as ChevronRightIcon20,
|
|
38
|
+
ChevronUpIcon as ChevronUpIcon20,
|
|
39
|
+
EllipsisVerticalIcon as EllipsisVerticalIcon20,
|
|
40
|
+
ExclamationCircleIcon as ExclamationCircleIcon20,
|
|
41
|
+
ExclamationTriangleIcon as ExclamationTriangleIcon20,
|
|
42
|
+
FilmIcon as FilmIcon20,
|
|
43
|
+
HeartIcon as HeartIcon20,
|
|
44
|
+
InformationCircleIcon as InformationCircleIcon20,
|
|
45
|
+
LinkIcon as LinkIcon20,
|
|
46
|
+
MagnifyingGlassIcon as MagnifyingGlassIcon20,
|
|
47
|
+
MinusIcon as MinusIcon20,
|
|
48
|
+
PhotoIcon as PhotoIcon20,
|
|
49
|
+
PlayCircleIcon as PlayCircleIcon20,
|
|
50
|
+
PlayIcon as PlayIcon20,
|
|
51
|
+
PlusIcon as PlusIcon20,
|
|
52
|
+
ShareIcon as ShareIcon20,
|
|
53
|
+
StarIcon as StarIcon20,
|
|
54
|
+
TvIcon as TvIcon20,
|
|
55
|
+
UserIcon as UserIcon20,
|
|
56
|
+
UsersIcon as UsersIcon20,
|
|
57
|
+
XMarkIcon as XMarkIcon20
|
|
58
|
+
} from "@heroicons/react/20/solid";
|
|
59
|
+
import {
|
|
60
|
+
ArrowLeftIcon as ArrowLeftIcon24,
|
|
61
|
+
ArrowRightIcon as ArrowRightIcon24,
|
|
62
|
+
ArrowTopRightOnSquareIcon as ArrowTopRightOnSquareIcon24,
|
|
63
|
+
Bars3Icon as Bars3Icon24,
|
|
64
|
+
BookmarkIcon as BookmarkIcon24,
|
|
65
|
+
CalendarIcon as CalendarIcon24,
|
|
66
|
+
CheckIcon as CheckIcon24,
|
|
67
|
+
ChevronDownIcon as ChevronDownIcon24,
|
|
68
|
+
ChevronLeftIcon as ChevronLeftIcon24,
|
|
69
|
+
ChevronRightIcon as ChevronRightIcon24,
|
|
70
|
+
ChevronUpIcon as ChevronUpIcon24,
|
|
71
|
+
EllipsisVerticalIcon as EllipsisVerticalIcon24,
|
|
72
|
+
ExclamationCircleIcon as ExclamationCircleIcon24,
|
|
73
|
+
ExclamationTriangleIcon as ExclamationTriangleIcon24,
|
|
74
|
+
FilmIcon as FilmIcon24,
|
|
75
|
+
HeartIcon as HeartIcon24,
|
|
76
|
+
InformationCircleIcon as InformationCircleIcon24,
|
|
77
|
+
LinkIcon as LinkIcon24,
|
|
78
|
+
MagnifyingGlassIcon as MagnifyingGlassIcon24,
|
|
79
|
+
MinusIcon as MinusIcon24,
|
|
80
|
+
PhotoIcon as PhotoIcon24,
|
|
81
|
+
PlayCircleIcon as PlayCircleIcon24,
|
|
82
|
+
PlayIcon as PlayIcon24,
|
|
83
|
+
PlusIcon as PlusIcon24,
|
|
84
|
+
ShareIcon as ShareIcon24,
|
|
85
|
+
StarIcon as StarIcon24,
|
|
86
|
+
TvIcon as TvIcon24,
|
|
87
|
+
UserIcon as UserIcon24,
|
|
88
|
+
UsersIcon as UsersIcon24,
|
|
89
|
+
XMarkIcon as XMarkIcon24
|
|
90
|
+
} from "@heroicons/react/24/outline";
|
|
91
|
+
const iconMap24 = {
|
|
92
|
+
ArrowLeft: ArrowLeftIcon24,
|
|
93
|
+
ArrowRight: ArrowRightIcon24,
|
|
94
|
+
ArrowTopRightOnSquare: ArrowTopRightOnSquareIcon24,
|
|
95
|
+
Bars3: Bars3Icon24,
|
|
96
|
+
Bookmark: BookmarkIcon24,
|
|
97
|
+
Calendar: CalendarIcon24,
|
|
98
|
+
Check: CheckIcon24,
|
|
99
|
+
ChevronDown: ChevronDownIcon24,
|
|
100
|
+
ChevronLeft: ChevronLeftIcon24,
|
|
101
|
+
ChevronRight: ChevronRightIcon24,
|
|
102
|
+
ChevronUp: ChevronUpIcon24,
|
|
103
|
+
EllipsisVertical: EllipsisVerticalIcon24,
|
|
104
|
+
ExclamationCircle: ExclamationCircleIcon24,
|
|
105
|
+
ExclamationTriangle: ExclamationTriangleIcon24,
|
|
106
|
+
Film: FilmIcon24,
|
|
107
|
+
Photo: PhotoIcon24,
|
|
108
|
+
Heart: HeartIcon24,
|
|
109
|
+
InformationCircle: InformationCircleIcon24,
|
|
110
|
+
Link: LinkIcon24,
|
|
111
|
+
MagnifyingGlass: MagnifyingGlassIcon24,
|
|
112
|
+
Minus: MinusIcon24,
|
|
113
|
+
Play: PlayIcon24,
|
|
114
|
+
PlayCircle: PlayCircleIcon24,
|
|
115
|
+
Plus: PlusIcon24,
|
|
116
|
+
Share: ShareIcon24,
|
|
117
|
+
Star: StarIcon24,
|
|
118
|
+
Tv: TvIcon24,
|
|
119
|
+
User: UserIcon24,
|
|
120
|
+
Users: UsersIcon24,
|
|
121
|
+
XMark: XMarkIcon24
|
|
122
|
+
};
|
|
123
|
+
const iconMap20 = {
|
|
124
|
+
ArrowLeft: ArrowLeftIcon20,
|
|
125
|
+
ArrowRight: ArrowRightIcon20,
|
|
126
|
+
ArrowTopRightOnSquare: ArrowTopRightOnSquareIcon20,
|
|
127
|
+
Bars3: Bars3Icon20,
|
|
128
|
+
Bookmark: BookmarkIcon20,
|
|
129
|
+
Calendar: CalendarIcon20,
|
|
130
|
+
Check: CheckIcon20,
|
|
131
|
+
ChevronDown: ChevronDownIcon20,
|
|
132
|
+
ChevronLeft: ChevronLeftIcon20,
|
|
133
|
+
ChevronRight: ChevronRightIcon20,
|
|
134
|
+
ChevronUp: ChevronUpIcon20,
|
|
135
|
+
EllipsisVertical: EllipsisVerticalIcon20,
|
|
136
|
+
ExclamationCircle: ExclamationCircleIcon20,
|
|
137
|
+
ExclamationTriangle: ExclamationTriangleIcon20,
|
|
138
|
+
Film: FilmIcon20,
|
|
139
|
+
Photo: PhotoIcon20,
|
|
140
|
+
Heart: HeartIcon20,
|
|
141
|
+
InformationCircle: InformationCircleIcon20,
|
|
142
|
+
Link: LinkIcon20,
|
|
143
|
+
MagnifyingGlass: MagnifyingGlassIcon20,
|
|
144
|
+
Minus: MinusIcon20,
|
|
145
|
+
Play: PlayIcon20,
|
|
146
|
+
PlayCircle: PlayCircleIcon20,
|
|
147
|
+
Plus: PlusIcon20,
|
|
148
|
+
Share: ShareIcon20,
|
|
149
|
+
Star: StarIcon20,
|
|
150
|
+
Tv: TvIcon20,
|
|
151
|
+
User: UserIcon20,
|
|
152
|
+
Users: UsersIcon20,
|
|
153
|
+
XMark: XMarkIcon20
|
|
154
|
+
};
|
|
155
|
+
const iconMap16 = {
|
|
156
|
+
ArrowLeft: ArrowLeftIcon16,
|
|
157
|
+
ArrowRight: ArrowRightIcon16,
|
|
158
|
+
Bars3: Bars3Icon16,
|
|
159
|
+
Bookmark: BookmarkIcon16,
|
|
160
|
+
Calendar: CalendarIcon16,
|
|
161
|
+
Check: CheckIcon16,
|
|
162
|
+
ChevronDown: ChevronDownIcon16,
|
|
163
|
+
ChevronLeft: ChevronLeftIcon16,
|
|
164
|
+
ChevronRight: ChevronRightIcon16,
|
|
165
|
+
ChevronUp: ChevronUpIcon16,
|
|
166
|
+
EllipsisVertical: EllipsisVerticalIcon16,
|
|
167
|
+
ExclamationCircle: ExclamationCircleIcon16,
|
|
168
|
+
ExclamationTriangle: ExclamationTriangleIcon16,
|
|
169
|
+
Heart: HeartIcon16,
|
|
170
|
+
InformationCircle: InformationCircleIcon16,
|
|
171
|
+
Link: LinkIcon16,
|
|
172
|
+
MagnifyingGlass: MagnifyingGlassIcon16,
|
|
173
|
+
Minus: MinusIcon16,
|
|
174
|
+
Play: PlayIcon16,
|
|
175
|
+
Plus: PlusIcon16,
|
|
176
|
+
Star: StarIcon16,
|
|
177
|
+
User: UserIcon16,
|
|
178
|
+
XMark: XMarkIcon16
|
|
179
|
+
};
|
|
180
|
+
function Icon({ name, size = 24, className, ...rest }) {
|
|
181
|
+
let IconComponent;
|
|
182
|
+
if (size <= 16) {
|
|
183
|
+
IconComponent = iconMap16[name] ?? iconMap20[name];
|
|
184
|
+
} else if (size <= 20) {
|
|
185
|
+
IconComponent = iconMap20[name];
|
|
186
|
+
} else {
|
|
187
|
+
IconComponent = iconMap24[name];
|
|
188
|
+
}
|
|
189
|
+
return /* @__PURE__ */ jsx(
|
|
190
|
+
IconComponent,
|
|
191
|
+
{
|
|
192
|
+
className,
|
|
193
|
+
width: size,
|
|
194
|
+
height: size,
|
|
195
|
+
...rest,
|
|
196
|
+
"aria-hidden": true
|
|
197
|
+
}
|
|
198
|
+
);
|
|
199
|
+
}
|
|
200
|
+
var Icon_default = Icon;
|
|
201
|
+
export {
|
|
202
|
+
Icon_default as default
|
|
203
|
+
};
|
|
204
|
+
//# sourceMappingURL=Icon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["import {\n ArrowLeftIcon as ArrowLeftIcon16,\n ArrowRightIcon as ArrowRightIcon16,\n Bars3Icon as Bars3Icon16,\n BookmarkIcon as BookmarkIcon16,\n CalendarIcon as CalendarIcon16,\n CheckIcon as CheckIcon16,\n ChevronDownIcon as ChevronDownIcon16,\n ChevronLeftIcon as ChevronLeftIcon16,\n ChevronRightIcon as ChevronRightIcon16,\n ChevronUpIcon as ChevronUpIcon16,\n EllipsisVerticalIcon as EllipsisVerticalIcon16,\n ExclamationCircleIcon as ExclamationCircleIcon16,\n ExclamationTriangleIcon as ExclamationTriangleIcon16,\n HeartIcon as HeartIcon16,\n InformationCircleIcon as InformationCircleIcon16,\n LinkIcon as LinkIcon16,\n MagnifyingGlassIcon as MagnifyingGlassIcon16,\n MinusIcon as MinusIcon16,\n PlayIcon as PlayIcon16,\n PlusIcon as PlusIcon16,\n StarIcon as StarIcon16,\n UserIcon as UserIcon16,\n XMarkIcon as XMarkIcon16,\n} from '@heroicons/react/16/solid'\nimport {\n ArrowLeftIcon as ArrowLeftIcon20,\n ArrowRightIcon as ArrowRightIcon20,\n ArrowTopRightOnSquareIcon as ArrowTopRightOnSquareIcon20,\n Bars3Icon as Bars3Icon20,\n BookmarkIcon as BookmarkIcon20,\n CalendarIcon as CalendarIcon20,\n CheckIcon as CheckIcon20,\n ChevronDownIcon as ChevronDownIcon20,\n ChevronLeftIcon as ChevronLeftIcon20,\n ChevronRightIcon as ChevronRightIcon20,\n ChevronUpIcon as ChevronUpIcon20,\n EllipsisVerticalIcon as EllipsisVerticalIcon20,\n ExclamationCircleIcon as ExclamationCircleIcon20,\n ExclamationTriangleIcon as ExclamationTriangleIcon20,\n FilmIcon as FilmIcon20,\n HeartIcon as HeartIcon20,\n InformationCircleIcon as InformationCircleIcon20,\n LinkIcon as LinkIcon20,\n MagnifyingGlassIcon as MagnifyingGlassIcon20,\n MinusIcon as MinusIcon20,\n PhotoIcon as PhotoIcon20,\n PlayCircleIcon as PlayCircleIcon20,\n PlayIcon as PlayIcon20,\n PlusIcon as PlusIcon20,\n ShareIcon as ShareIcon20,\n StarIcon as StarIcon20,\n TvIcon as TvIcon20,\n UserIcon as UserIcon20,\n UsersIcon as UsersIcon20,\n XMarkIcon as XMarkIcon20,\n} from '@heroicons/react/20/solid'\nimport {\n ArrowLeftIcon as ArrowLeftIcon24,\n ArrowRightIcon as ArrowRightIcon24,\n ArrowTopRightOnSquareIcon as ArrowTopRightOnSquareIcon24,\n Bars3Icon as Bars3Icon24,\n BookmarkIcon as BookmarkIcon24,\n CalendarIcon as CalendarIcon24,\n CheckIcon as CheckIcon24,\n ChevronDownIcon as ChevronDownIcon24,\n ChevronLeftIcon as ChevronLeftIcon24,\n ChevronRightIcon as ChevronRightIcon24,\n ChevronUpIcon as ChevronUpIcon24,\n EllipsisVerticalIcon as EllipsisVerticalIcon24,\n ExclamationCircleIcon as ExclamationCircleIcon24,\n ExclamationTriangleIcon as ExclamationTriangleIcon24,\n FilmIcon as FilmIcon24,\n HeartIcon as HeartIcon24,\n InformationCircleIcon as InformationCircleIcon24,\n LinkIcon as LinkIcon24,\n MagnifyingGlassIcon as MagnifyingGlassIcon24,\n MinusIcon as MinusIcon24,\n PhotoIcon as PhotoIcon24,\n PlayCircleIcon as PlayCircleIcon24,\n PlayIcon as PlayIcon24,\n PlusIcon as PlusIcon24,\n ShareIcon as ShareIcon24,\n StarIcon as StarIcon24,\n TvIcon as TvIcon24,\n UserIcon as UserIcon24,\n UsersIcon as UsersIcon24,\n XMarkIcon as XMarkIcon24,\n} from '@heroicons/react/24/outline'\n\nimport type { ComponentType, SVGProps } from 'react'\n\ntype HeroIcon = ComponentType<SVGProps<SVGSVGElement>>\n\nconst iconMap24: Record<string, HeroIcon> = {\n ArrowLeft: ArrowLeftIcon24,\n ArrowRight: ArrowRightIcon24,\n ArrowTopRightOnSquare: ArrowTopRightOnSquareIcon24,\n Bars3: Bars3Icon24,\n Bookmark: BookmarkIcon24,\n Calendar: CalendarIcon24,\n Check: CheckIcon24,\n ChevronDown: ChevronDownIcon24,\n ChevronLeft: ChevronLeftIcon24,\n ChevronRight: ChevronRightIcon24,\n ChevronUp: ChevronUpIcon24,\n EllipsisVertical: EllipsisVerticalIcon24,\n ExclamationCircle: ExclamationCircleIcon24,\n ExclamationTriangle: ExclamationTriangleIcon24,\n Film: FilmIcon24,\n Photo: PhotoIcon24,\n Heart: HeartIcon24,\n InformationCircle: InformationCircleIcon24,\n Link: LinkIcon24,\n MagnifyingGlass: MagnifyingGlassIcon24,\n Minus: MinusIcon24,\n Play: PlayIcon24,\n PlayCircle: PlayCircleIcon24,\n Plus: PlusIcon24,\n Share: ShareIcon24,\n Star: StarIcon24,\n Tv: TvIcon24,\n User: UserIcon24,\n Users: UsersIcon24,\n XMark: XMarkIcon24,\n}\n\nconst iconMap20: Record<string, HeroIcon> = {\n ArrowLeft: ArrowLeftIcon20,\n ArrowRight: ArrowRightIcon20,\n ArrowTopRightOnSquare: ArrowTopRightOnSquareIcon20,\n Bars3: Bars3Icon20,\n Bookmark: BookmarkIcon20,\n Calendar: CalendarIcon20,\n Check: CheckIcon20,\n ChevronDown: ChevronDownIcon20,\n ChevronLeft: ChevronLeftIcon20,\n ChevronRight: ChevronRightIcon20,\n ChevronUp: ChevronUpIcon20,\n EllipsisVertical: EllipsisVerticalIcon20,\n ExclamationCircle: ExclamationCircleIcon20,\n ExclamationTriangle: ExclamationTriangleIcon20,\n Film: FilmIcon20,\n Photo: PhotoIcon20,\n Heart: HeartIcon20,\n InformationCircle: InformationCircleIcon20,\n Link: LinkIcon20,\n MagnifyingGlass: MagnifyingGlassIcon20,\n Minus: MinusIcon20,\n Play: PlayIcon20,\n PlayCircle: PlayCircleIcon20,\n Plus: PlusIcon20,\n Share: ShareIcon20,\n Star: StarIcon20,\n Tv: TvIcon20,\n User: UserIcon20,\n Users: UsersIcon20,\n XMark: XMarkIcon20,\n}\n\nconst iconMap16: Record<string, HeroIcon> = {\n ArrowLeft: ArrowLeftIcon16,\n ArrowRight: ArrowRightIcon16,\n Bars3: Bars3Icon16,\n Bookmark: BookmarkIcon16,\n Calendar: CalendarIcon16,\n Check: CheckIcon16,\n ChevronDown: ChevronDownIcon16,\n ChevronLeft: ChevronLeftIcon16,\n ChevronRight: ChevronRightIcon16,\n ChevronUp: ChevronUpIcon16,\n EllipsisVertical: EllipsisVerticalIcon16,\n ExclamationCircle: ExclamationCircleIcon16,\n ExclamationTriangle: ExclamationTriangleIcon16,\n Heart: HeartIcon16,\n InformationCircle: InformationCircleIcon16,\n Link: LinkIcon16,\n MagnifyingGlass: MagnifyingGlassIcon16,\n Minus: MinusIcon16,\n Play: PlayIcon16,\n Plus: PlusIcon16,\n Star: StarIcon16,\n User: UserIcon16,\n XMark: XMarkIcon16,\n}\n\nexport type IconName =\n | 'ArrowLeft'\n | 'ArrowRight'\n | 'ArrowTopRightOnSquare'\n | 'Bars3'\n | 'Bookmark'\n | 'Check'\n | 'Calendar'\n | 'ChevronDown'\n | 'ChevronLeft'\n | 'ChevronRight'\n | 'ChevronUp'\n | 'EllipsisVertical'\n | 'ExclamationCircle'\n | 'ExclamationTriangle'\n | 'Film'\n | 'Photo'\n | 'Heart'\n | 'InformationCircle'\n | 'Link'\n | 'MagnifyingGlass'\n | 'Minus'\n | 'Play'\n | 'PlayCircle'\n | 'Plus'\n | 'Share'\n | 'Star'\n | 'Tv'\n | 'User'\n | 'Users'\n | 'XMark'\n\nexport type IconSize = 16 | 20 | 24 | 32 | 48 | 64\n\nexport interface IconProps extends SVGProps<SVGSVGElement> {\n /** Icon name from the available subset */\n name: IconName\n /** Icon size in pixels (16, 20, 24, 32, 48, 64) */\n size?: IconSize\n}\n\nfunction Icon({ name, size = 24, className, ...rest }: Readonly<IconProps>) {\n let IconComponent: HeroIcon\n\n if (size <= 16) {\n IconComponent = iconMap16[name] ?? iconMap20[name]\n } else if (size <= 20) {\n IconComponent = iconMap20[name]\n } else {\n IconComponent = iconMap24[name]\n }\n\n return (\n <IconComponent\n className={className}\n width={size}\n height={size}\n {...rest}\n aria-hidden\n />\n )\n}\n\nexport default Icon\n"],"mappings":"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","names":[]}
|
package/dist/Icon/index.d.ts
CHANGED
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
type IconName = 'ArrowLeft' | 'ArrowRight' | 'ArrowTopRightOnSquare' | 'Bars3' | 'Bookmark' | 'Check' | 'Calendar' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'EllipsisVertical' | 'ExclamationCircle' | 'ExclamationTriangle' | 'Film' | 'Photo' | 'Heart' | 'InformationCircle' | 'Link' | 'MagnifyingGlass' | 'Minus' | 'Play' | 'PlayCircle' | 'Plus' | 'Share' | 'Star' | 'Tv' | 'User' | 'Users' | 'XMark';
|
|
5
|
-
type IconSize = 16 | 20 | 24 | 32 | 48 | 64;
|
|
6
|
-
interface IconProps extends SVGProps<SVGSVGElement> {
|
|
7
|
-
/** Icon name from the available subset */
|
|
8
|
-
name: IconName;
|
|
9
|
-
/** Icon size in pixels (16, 20, 24, 32, 48, 64) */
|
|
10
|
-
size?: IconSize;
|
|
11
|
-
}
|
|
12
|
-
declare function Icon({ name, size, className, ...rest }: Readonly<IconProps>): react_jsx_runtime.JSX.Element;
|
|
13
|
-
|
|
14
|
-
export { Icon, type IconName, type IconProps, type IconSize };
|
|
1
|
+
export { default as Icon, IconName, IconProps, IconSize } from './Icon.js';
|
|
2
|
+
import 'react/jsx-runtime';
|
|
3
|
+
import 'react';
|
package/dist/Icon/index.js
CHANGED
package/dist/Icon/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"
|
|
1
|
+
{"version":3,"sources":["../../src/Icon/index.ts"],"sourcesContent":["export { default as Icon } from './Icon'\nexport type { IconProps, IconName, IconSize } from './Icon'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAAuB;","names":["default"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { IconName } from '../Icon/Icon.js';
|
|
3
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
4
|
+
|
|
5
|
+
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
+
/** Icon name to display */
|
|
7
|
+
icon: IconName;
|
|
8
|
+
/** Visual variant of the button */
|
|
9
|
+
variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
|
|
10
|
+
/** Size of the button */
|
|
11
|
+
size?: 'sm' | 'md' | 'lg';
|
|
12
|
+
/** Accessible label for screen readers */
|
|
13
|
+
'aria-label': string;
|
|
14
|
+
}
|
|
15
|
+
declare function IconButton({ className, icon, variant, size, disabled, ...rest }: Readonly<IconButtonProps>): react_jsx_runtime.JSX.Element;
|
|
16
|
+
|
|
17
|
+
export { type IconButtonProps, IconButton as default };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { Icon } from "../Icon";
|
|
4
|
+
const sizeMap = {
|
|
5
|
+
sm: { button: "ui:h-8 ui:w-8", icon: 16 },
|
|
6
|
+
md: { button: "ui:h-10 ui:w-10", icon: 20 },
|
|
7
|
+
lg: { button: "ui:h-12 ui:w-12", icon: 24 }
|
|
8
|
+
};
|
|
9
|
+
function IconButton({
|
|
10
|
+
className,
|
|
11
|
+
icon,
|
|
12
|
+
variant = "ghost",
|
|
13
|
+
size = "md",
|
|
14
|
+
disabled,
|
|
15
|
+
...rest
|
|
16
|
+
}) {
|
|
17
|
+
const { button: buttonSize, icon: iconSize } = sizeMap[size];
|
|
18
|
+
return /* @__PURE__ */ jsx(
|
|
19
|
+
"button",
|
|
20
|
+
{
|
|
21
|
+
className: clsx(
|
|
22
|
+
"ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:rounded-full ui:transition-colors",
|
|
23
|
+
"ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2",
|
|
24
|
+
"ui:disabled:pointer-events-none ui:disabled:opacity-50",
|
|
25
|
+
{
|
|
26
|
+
"ui:bg-primary ui:text-primary-foreground ui:hover:bg-primary/90": variant === "primary",
|
|
27
|
+
"ui:bg-secondary ui:text-secondary-foreground ui:hover:bg-secondary/80": variant === "secondary",
|
|
28
|
+
"ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "ghost",
|
|
29
|
+
"ui:border ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground": variant === "outline"
|
|
30
|
+
},
|
|
31
|
+
buttonSize,
|
|
32
|
+
className
|
|
33
|
+
),
|
|
34
|
+
disabled,
|
|
35
|
+
...rest,
|
|
36
|
+
children: /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize })
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
var IconButton_default = IconButton;
|
|
41
|
+
export {
|
|
42
|
+
IconButton_default as default
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=IconButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/IconButton/IconButton.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { Icon } from '../Icon'\n\nimport type { IconName, IconSize } from '../Icon'\nimport type { ButtonHTMLAttributes } from 'react'\n\nexport interface IconButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Icon name to display */\n icon: IconName\n /** Visual variant of the button */\n variant?: 'primary' | 'secondary' | 'ghost' | 'outline'\n /** Size of the button */\n size?: 'sm' | 'md' | 'lg'\n /** Accessible label for screen readers */\n 'aria-label': string\n}\n\nconst sizeMap: Record<'sm' | 'md' | 'lg', { button: string; icon: IconSize }> =\n {\n sm: { button: 'ui:h-8 ui:w-8', icon: 16 },\n md: { button: 'ui:h-10 ui:w-10', icon: 20 },\n lg: { button: 'ui:h-12 ui:w-12', icon: 24 },\n }\n\nfunction IconButton({\n className,\n icon,\n variant = 'ghost',\n size = 'md',\n disabled,\n ...rest\n}: Readonly<IconButtonProps>) {\n const { button: buttonSize, icon: iconSize } = sizeMap[size]\n\n return (\n <button\n className={clsx(\n 'ui:inline-flex ui:items-center ui:justify-center ui:cursor-pointer ui:rounded-full ui:transition-colors',\n 'ui:focus:outline-none ui:focus:ring-2 ui:focus:ring-ring ui:focus:ring-offset-2',\n 'ui:disabled:pointer-events-none ui:disabled:opacity-50',\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:hover:bg-accent ui:hover:text-accent-foreground':\n variant === 'ghost',\n 'ui:border ui:border-input ui:bg-background ui:hover:bg-accent ui:hover:text-accent-foreground':\n variant === 'outline',\n },\n buttonSize,\n className\n )}\n disabled={disabled}\n {...rest}\n >\n <Icon name={icon} size={iconSize} />\n </button>\n )\n}\n\nexport default IconButton\n"],"mappings":"AA0DM;AA1DN,OAAO,UAAU;AAEjB,SAAS,YAAY;AAiBrB,MAAM,UACJ;AAAA,EACE,IAAI,EAAE,QAAQ,iBAAiB,MAAM,GAAG;AAAA,EACxC,IAAI,EAAE,QAAQ,mBAAmB,MAAM,GAAG;AAAA,EAC1C,IAAI,EAAE,QAAQ,mBAAmB,MAAM,GAAG;AAC5C;AAEF,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,EAAE,QAAQ,YAAY,MAAM,SAAS,IAAI,QAAQ,IAAI;AAE3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACE,mEACE,YAAY;AAAA,UACd,yEACE,YAAY;AAAA,UACd,sDACE,YAAY;AAAA,UACd,iGACE,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,QAAK,MAAM,MAAM,MAAM,UAAU;AAAA;AAAA,EACpC;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
|