linkedunion-design-kit 1.5.4 → 1.5.6
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/app/page.js +1 -1
- package/dist/src/components/Avatar/Avatar.js +2 -2
- package/dist/src/components/Button/index.js +13 -13
- package/dist/src/components/Colors/color.test.js +3 -3
- package/dist/src/components/Icons/IconView.js +1 -1
- package/dist/src/components/Icons/LUIcon.stories.js +1 -1
- package/dist/src/components/Icons/SingleIcon.test.js +3 -2
- package/dist/src/components/Icons/type.d.ts +2 -3
- package/dist/src/components/MediaCard/Card.js +1 -1
- package/dist/src/components/MediaCard/ContactProfile/ContactProfile.js +5 -5
- package/dist/src/components/MediaCard/PostByCategory/PostByCategory.js +7 -7
- package/dist/src/components/ui/imageUploader.js +1 -1
- package/dist/src/components/ui/switch.js +4 -4
- package/dist/src/components/ui/typography.js +4 -4
- package/dist/src/utils/colors.d.ts +66 -66
- package/dist/src/utils/colors.js +68 -68
- package/dist/styles/global.css +1442 -330
- package/package.json +1 -1
package/dist/app/page.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Image from "next/image";
|
|
3
3
|
export default function Home() {
|
|
4
|
-
return (_jsxs("main", { className: "flex min-h-screen flex-col items-center justify-between p-24", children: [_jsxs("div", { className: "z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex", children: [_jsxs("p", { className: "fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-
|
|
4
|
+
return (_jsxs("main", { className: "flex min-h-screen flex-col items-center justify-between p-24", children: [_jsxs("div", { className: "z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex", children: [_jsxs("p", { className: "fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-gray-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30", children: ["Get started by editing\u00A0", _jsx("code", { className: "font-mono font-bold", children: "app/page.tsx" })] }), _jsx("div", { className: "fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none", children: _jsxs("a", { className: "pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0", href: "https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", target: "_blank", rel: "noopener noreferrer", children: ["By", " ", _jsx(Image, { src: "/vercel.svg", alt: "Vercel Logo", className: "dark:invert", width: 100, height: 24, priority: true })] }) })] }), _jsx("div", { className: "relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]", children: _jsx(Image, { className: "relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert", src: "/next.svg", alt: "Next.js Logo", width: 180, height: 37, priority: true }) }), _jsxs("div", { className: "mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left", children: [_jsxs("a", { href: "https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Docs", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Find in-depth information about Next.js features and API." })] }), _jsxs("a", { href: "https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Learn", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Learn about Next.js in an interactive course with\u00A0quizzes!" })] }), _jsxs("a", { href: "https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Templates", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Explore the Next.js 13 playground." })] }), _jsxs("a", { href: "https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app", className: "group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-gray-700 hover:dark:bg-gray-800/30", target: "_blank", rel: "noopener noreferrer", children: [_jsxs("h2", { className: "mb-3 text-2xl font-semibold", children: ["Deploy", " ", _jsx("span", { className: "inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none", children: "->" })] }), _jsx("p", { className: "m-0 max-w-[30ch] text-sm opacity-50", children: "Instantly deploy your Next.js site to a shareable URL with Vercel." })] })] })] }));
|
|
5
5
|
}
|
|
@@ -6,7 +6,7 @@ var Avatar = function (_a) {
|
|
|
6
6
|
var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, _c = _a.shape, shape = _c === void 0 ? "square" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className;
|
|
7
7
|
var sizeClasses = avatarSize[size];
|
|
8
8
|
var paddingClass = avatarPadding[size];
|
|
9
|
-
return (_jsx(_Fragment, { children: image ? (_jsx("div", { className: "relative overflow-hidden bg-
|
|
10
|
-
}) })) : (_jsx("div", { className: "bg-
|
|
9
|
+
return (_jsx(_Fragment, { children: image ? (_jsx("div", { className: "relative overflow-hidden bg-blue-200 ".concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses), "data-testid": "lu-avatar", children: _jsx(Image, { src: image, alt: "avatar", className: "object-cover w-full h-full", width: 0, height: 0, sizes: "100%" //Image takes 100% of the parent container
|
|
10
|
+
}) })) : (_jsx("div", { className: "bg-gray-100 ".concat(paddingClass, " ").concat(avatarShape[shape], " ").concat(className, " ").concat(sizeClasses), "data-testid": "lu-icon", children: _jsx(LUIcon, { "data-testid": "lu-icon", size: size, icon: icon, className: "text-gray-950 w-full h-full" }) })) }));
|
|
11
11
|
};
|
|
12
12
|
export default Avatar;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
export var buttonColors = {
|
|
2
|
-
primary: "text-
|
|
3
|
-
"primary-light": "text-
|
|
4
|
-
success: "text-
|
|
5
|
-
warning: "text-
|
|
6
|
-
danger: "text-
|
|
7
|
-
info: "text-
|
|
8
|
-
gray: "text-
|
|
9
|
-
"primary-outline": "text-
|
|
10
|
-
"success-outline": "text-
|
|
11
|
-
"warning-outline": "text-
|
|
12
|
-
"danger-outline": "text-
|
|
13
|
-
"info-outline": "text-
|
|
14
|
-
"gray-outline": "text-
|
|
2
|
+
primary: "text-blue-50 bg-blue-600 hover:bg-blue-700 focus:bg-blue-600 active:bg-blue-800",
|
|
3
|
+
"primary-light": "text-blue-600 bg-blue-100 hover:bg-blue-600 hover:text-blue-100",
|
|
4
|
+
success: "text-green-50 bg-green-600 hover:bg-green-700 focus:bg-green-600 active:bg-green-800",
|
|
5
|
+
warning: "text-yellow-950 bg-yellow-500 hover:bg-yellow-600 focus:bg-yellow-500 active:bg-yellow-700",
|
|
6
|
+
danger: "text-red-50 bg-red-600 hover:bg-red-700 focus:bg-red-600 active:bg-red-800",
|
|
7
|
+
info: "text-indigo-50 bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-600 active:bg-indigo-800",
|
|
8
|
+
gray: "text-gray-950 bg-gray-50 hover:bg-gray-100 focus:bg-gray-50 active:bg-gray-300",
|
|
9
|
+
"primary-outline": "text-blue-600 border-2 border-blue-600 bg-white hover:border-blue-700 hover:text-blue-700 focus:border-blue-600 focus:text-blue-600 active:border-blue-800 active:text-blue-800",
|
|
10
|
+
"success-outline": "text-green-600 border-2 border-green-600 bg-white hover:border-green-700 hover:text-green-700 focus:border-green-600 focus:text-green-600 active:border-green-800 active:text-green-800",
|
|
11
|
+
"warning-outline": "text-yellow-500 border-2 border-yellow-500 hover:border-yellow-600 hover:text-yellow-600 focus:border-yellow-500 focus:text-yellow-500 active:border-yellow-700 active:text-yellow-700",
|
|
12
|
+
"danger-outline": "text-red-600 border-2 border-red-600 bg-white hover:border-red-700 hover:text-red-700 focus:border-red-600 focus:text-red-600 active:border-red-800 active:text-red-800",
|
|
13
|
+
"info-outline": "text-indigo-600 border-2 border-indigo-600 bg-white hover:border-indigo-700 hover:text-indigo-700 focus:border-indigo-600 focus:text-indigo-600 active:border-indigo-800 active:text-indigo-800",
|
|
14
|
+
"gray-outline": "text-gray-50 border-2 border-gray-50 bg-white hover:border-gray-100 hover:text-gray-100 focus:border-gray-50 focus:text-gray-50 active:border-gray-300 active:text-gray-300",
|
|
15
15
|
};
|
|
16
16
|
export var buttonShapes = {
|
|
17
17
|
"rounded-none": "rounded-none",
|
|
@@ -10,10 +10,10 @@ describe("TextColor Component", function () {
|
|
|
10
10
|
expect(textElement).toHaveStyle({ color: colors.black });
|
|
11
11
|
});
|
|
12
12
|
it("renders with a specified color", function () {
|
|
13
|
-
render(_jsx(Color, { color: "
|
|
14
|
-
var textElement = screen.getByText("
|
|
13
|
+
render(_jsx(Color, { color: "blue-500" }));
|
|
14
|
+
var textElement = screen.getByText("blue-500");
|
|
15
15
|
expect(textElement).toBeInTheDocument();
|
|
16
|
-
expect(textElement).toHaveStyle({ color: colors["
|
|
16
|
+
expect(textElement).toHaveStyle({ color: colors["blue-500"] });
|
|
17
17
|
});
|
|
18
18
|
it("handles invalid color gracefully", function () {
|
|
19
19
|
render(_jsx(Color, { color: "invalid-color" }));
|
|
@@ -3,6 +3,6 @@ import { colors } from "../../utils/colors";
|
|
|
3
3
|
import { iconList } from "../../utils/iconList";
|
|
4
4
|
export var IconView = function () {
|
|
5
5
|
return (_jsx(_Fragment, { children: _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6", "data-testid": "icons-list", children: iconList.map(function (icon, index) {
|
|
6
|
-
return (_jsxs("div", { className: "flex flex-col items-center justify-center bg-
|
|
6
|
+
return (_jsxs("div", { className: "flex flex-col items-center justify-center bg-gray-100 rounded-lg p-4 shadow-md hover:bg-gray-200", "data-testid": "single-icon", children: [_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 32 32", fill: "none", className: "mb-2", role: "img", children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "icon-path-".concat(index), d: icon === null || icon === void 0 ? void 0 : icon.path, fill: colors["gray-950"] }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }), _jsx("p", { "data-testid": "icon-label-".concat(index), className: "text-xs font-normal ".concat(colors["gray-600"], " text-center"), children: icon === null || icon === void 0 ? void 0 : icon.label })] }, index));
|
|
7
7
|
}) }) }));
|
|
8
8
|
};
|
|
@@ -18,7 +18,7 @@ export default {
|
|
|
18
18
|
component: LUIcon,
|
|
19
19
|
tags: ["autodocs"],
|
|
20
20
|
};
|
|
21
|
-
var Template = function (args) { return (_jsx(LUIcon, __assign({ size: "xxs", className: "text-
|
|
21
|
+
var Template = function (args) { return (_jsx(LUIcon, __assign({ size: "xxs", className: "text-blue-500" }, args))); };
|
|
22
22
|
export var Icon = Template.bind({});
|
|
23
23
|
Icon.args = {
|
|
24
24
|
size: "xxs",
|
|
@@ -23,7 +23,8 @@ describe("LUIcon Component", function () {
|
|
|
23
23
|
render(_jsx(LUIcon, __assign({}, props)));
|
|
24
24
|
// Select the element
|
|
25
25
|
var singleIconElement = screen.getByTestId("lu-icon");
|
|
26
|
-
|
|
26
|
+
var computedClassName = iconSize[props.size];
|
|
27
|
+
expect(singleIconElement).toHaveClass(computedClassName);
|
|
27
28
|
// Assert that the fill class is applied correctly on the <path>
|
|
28
29
|
var pathElement = screen.getByTestId("lu-path");
|
|
29
30
|
expect(pathElement).toBeInTheDocument();
|
|
@@ -51,7 +52,7 @@ describe("LUIcon Component", function () {
|
|
|
51
52
|
};
|
|
52
53
|
render(_jsx(LUIcon, __assign({}, props)));
|
|
53
54
|
var singleIconElement = screen.getByTestId("lu-icon");
|
|
54
|
-
expect(singleIconElement).toHaveClass(iconSize[props.size]);
|
|
55
|
+
expect(singleIconElement).toHaveClass(iconSize[props.size] || "");
|
|
55
56
|
expect(singleIconElement).toHaveClass("custom-class");
|
|
56
57
|
});
|
|
57
58
|
it("renders correctly when selectedIcon is undefined", function () {
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { iconSize } from ".";
|
|
2
|
-
type iconSize = keyof typeof iconSize;
|
|
2
|
+
export type iconSize = keyof typeof iconSize;
|
|
3
3
|
export interface IconProps extends React.HTMLAttributes<HTMLOrSVGElement> {
|
|
4
|
-
size
|
|
4
|
+
size?: iconSize;
|
|
5
5
|
icon?: string;
|
|
6
6
|
className?: string;
|
|
7
7
|
}
|
|
8
|
-
export {};
|
|
@@ -23,7 +23,7 @@ var Card = function (_a) {
|
|
|
23
23
|
card_shadow_toggle: 1,
|
|
24
24
|
card_shadow_color: "rgba(52, 52, 52, 0.15)",
|
|
25
25
|
card_background_color: colors.white,
|
|
26
|
-
card_button_background_color: colors["
|
|
26
|
+
card_button_background_color: colors["gray-50"],
|
|
27
27
|
card_button_text_color: colors.black,
|
|
28
28
|
card_image_border_color: colors === null || colors === void 0 ? void 0 : colors.black,
|
|
29
29
|
card_image_border_radius: "0",
|
|
@@ -17,11 +17,11 @@ import { OrientationEnum } from "../../../utils/enums";
|
|
|
17
17
|
export var ContactProfile = function (props) {
|
|
18
18
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
19
19
|
return (_jsxs("div", { children: [props.layout === OrientationEnum.horizontal ? (_jsx(ContactProfileTheme1, __assign({}, props))) : (_jsx(_Fragment, { children: _jsx(ContactProfileTheme2, __assign({}, props)) })), _jsx("style", { jsx: true, global: true, children: "\n .card_ContactProfile_title_color_".concat(props.id, " {\n color: ").concat(((_a = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color) || (colors === null || colors === void 0 ? void 0 : colors.black), ";\n }\n .card_ContactProfile_designation_color_").concat(props.id, " {\n color: ").concat(((_b = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color) ||
|
|
20
|
-
colors["
|
|
20
|
+
colors["gray-500"], ";\n }\n .card_shadow_ContactProfile_").concat(props.id, " {\n box-shadow: ").concat(((_c = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1
|
|
21
21
|
? "0px 4px 12px 0px ".concat(((_d = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color) || "rgba(52, 52, 52, 0.15)") //TODO: change shadow with our color theme
|
|
22
22
|
: "0px 4px 12px 0px rgba(52, 52, 52, 0.15)", ";\n }\n .card_bg_ContactProfile_").concat(props.id, " {\n background-color: ").concat(((_e = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color) ||
|
|
23
|
-
colors.white, " !important;\n }\n .card_ContactProfile_btn_").concat(props.id, " {\n background-color: ").concat(((_f = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color) || colors["
|
|
24
|
-
colors["
|
|
25
|
-
colors["
|
|
26
|
-
colors["
|
|
23
|
+
colors.white, " !important;\n }\n .card_ContactProfile_btn_").concat(props.id, " {\n background-color: ").concat(((_f = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color) || colors["gray-50"], ";\n color: ").concat(((_g = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color) ||
|
|
24
|
+
colors["gray-950"], ";\n }\n .card_ContactProfile_btn_").concat(props.id, ":hover {\n background-color: ").concat(((_h = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_background_color) || colors["gray-50"], " !important;\n color: ").concat(((_j = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_text_color) ||
|
|
25
|
+
colors["gray-950"], " !important;\n fill: ").concat(((_k = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color) ||
|
|
26
|
+
colors["gray-950"], " !important;\n }\n ") })] }));
|
|
27
27
|
};
|
|
@@ -17,15 +17,15 @@ import { OrientationEnum } from "../../../utils/enums";
|
|
|
17
17
|
export var PostByCategory = function (props) {
|
|
18
18
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
19
19
|
return (_jsxs("div", { children: [props.layout === OrientationEnum.horizontal ? (_jsx(PostByCategoryTheme1, __assign({}, props))) : (_jsx(PostByCategoryTheme2, __assign({}, props))), _jsx("style", { jsx: true, global: true, children: "\n .card_PostByCategory_title_color_".concat(props.id, " {\n color: ").concat(((_a = props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color) || colors.black, ";\n }\n .card_PostByCategory_description_color_").concat(props.id, " {\n color: ").concat(((_b = props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color) ||
|
|
20
|
-
colors["
|
|
20
|
+
colors["gray-500"], ";\n }\n .card_shadow_PostByCategory_").concat(props.id, " {\n box-shadow: ").concat(((_c = props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1
|
|
21
21
|
? "0px 4px 12px 0px ".concat(((_d = props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color) || "rgba(52, 52, 52, 0.15)") //TODO: change shadow color with our color theme
|
|
22
22
|
: "0px 4px 12px 0px rgba(52, 52, 52, 0.15)", ";\n }\n .card_bg_PostByCategory_").concat(props.id, " {\n background-color: ").concat(((_e = props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color) ||
|
|
23
23
|
colors.white, " !important;\n }\n .card_PostByCategory_btn_").concat(props.id, " {\n background-color: ").concat(((_f = props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color) ||
|
|
24
|
-
colors["
|
|
25
|
-
colors["
|
|
26
|
-
colors["
|
|
27
|
-
colors["
|
|
28
|
-
colors["
|
|
29
|
-
colors["
|
|
24
|
+
colors["gray-50"], " !important;\n color: ").concat(((_g = props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color) ||
|
|
25
|
+
colors["gray-950"], " !important;\n fill: ").concat(((_h = props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_text_color) ||
|
|
26
|
+
colors["gray-950"], " !important;\n }\n .card_PostByCategory_btn_").concat(props.id, ":hover {\n background-color: ").concat(((_j = props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_background_color) ||
|
|
27
|
+
colors["gray-50"], " !important;\n color: ").concat(((_k = props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color) ||
|
|
28
|
+
colors["gray-950"], " !important;\n fill: ").concat(((_l = props.cardStyle) === null || _l === void 0 ? void 0 : _l.card_button_text_color) ||
|
|
29
|
+
colors["gray-950"], " !important;\n }\n .card_PostByCategory_theme2_image_").concat(props === null || props === void 0 ? void 0 : props.id, " {\n border-color: ").concat(((_m = props.cardStyle) === null || _m === void 0 ? void 0 : _m.card_image_border_color) ||
|
|
30
30
|
(colors === null || colors === void 0 ? void 0 : colors.black), " !important;\n border-radius: ").concat(((_o = props.cardStyle) === null || _o === void 0 ? void 0 : _o.card_image_border_radius) || "0", "%;\n border: ").concat(((_p = props.cardStyle) === null || _p === void 0 ? void 0 : _p.card_image_border) || "0", "px solid;\n }\n ") })] }));
|
|
31
31
|
};
|
|
@@ -63,6 +63,6 @@ var ImageUploader = function (_a) {
|
|
|
63
63
|
"image/*": acceptedTypes,
|
|
64
64
|
},
|
|
65
65
|
}), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
|
|
66
|
-
return (_jsxs("div", { className: cn("flex flex-col items-center", className), children: [_jsx("div", __assign({}, getRootProps(), { className: cn("!border !border-dashed !border-
|
|
66
|
+
return (_jsxs("div", { className: cn("flex flex-col items-center", className), children: [_jsx("div", __assign({}, getRootProps(), { className: cn("!border !border-dashed !border-gray-300 !rounded-lg cursor-pointer w-64 !p-2"), children: _jsxs("div", { className: "min-h-40 flex items-center justify-center bg-gray-100 !rounded-lg", children: [_jsx("input", __assign({}, getInputProps())), preview ? (_jsx("div", { className: "relative w-full h-40 !mx-auto overflow-hidden", children: _jsx(LuImage, { src: preview, alt: "Uploaded", className: "aspect-square object-contain", fill: true }) })) : (_jsxs("div", { className: "text-center text-sm text-muted-foreground", children: [_jsx(LUIcon, { icon: "upload", size: "lg", className: "!mx-auto !mb-4" }), _jsx(Typography, { variant: "b4", className: "!px-1", children: "Choose a file or drag & drop it here" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "JPEG, PNG, and SVG formats" })] }))] }) })), fileError && (_jsx("p", { className: "text-sm text-red-500 text-center mt-2", children: fileError })), required && !preview && !fileError && (_jsx("p", { className: "text-sm text-red-500 text-center", children: "Image is required." })), preview && (_jsx(Button, { variant: "link", onClick: removeFile, className: "!mt-2 text-sm text-gray-700", children: "Remove Image" }))] }));
|
|
67
67
|
};
|
|
68
68
|
export default ImageUploader;
|
|
@@ -30,10 +30,10 @@ export var size = {
|
|
|
30
30
|
lg: "h-6 w-14",
|
|
31
31
|
};
|
|
32
32
|
export var variant = {
|
|
33
|
-
default: "data-[state=checked]:bg-
|
|
34
|
-
primary: "data-[state=checked]:bg-
|
|
35
|
-
success: "data-[state=checked]:bg-
|
|
36
|
-
danger: "data-[state=checked]:bg-
|
|
33
|
+
default: "data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
|
|
34
|
+
primary: "data-[state=checked]:bg-blue-500 data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring",
|
|
35
|
+
success: "data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-input focus-visible:ring-green-500",
|
|
36
|
+
danger: "data-[state=checked]:bg-red-500 data-[state=unchecked]:bg-input focus-visible:ring-red-500",
|
|
37
37
|
};
|
|
38
38
|
var switchVariants = cva("peer inline-flex shrink-0 items-center !rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", {
|
|
39
39
|
variants: {
|
|
@@ -34,10 +34,10 @@ export var variant = {
|
|
|
34
34
|
d2: "text-8xl font-bold",
|
|
35
35
|
d3: "text-7xl font-bold",
|
|
36
36
|
d4: "text-6xl font-bold",
|
|
37
|
-
b1: "text-xl font-normal
|
|
38
|
-
b2: "text-lg font-normal
|
|
39
|
-
b3: "text-base font-normal
|
|
40
|
-
b4: "text-sm font-medium
|
|
37
|
+
b1: "text-xl font-normal m-0",
|
|
38
|
+
b2: "text-lg font-normal m-0",
|
|
39
|
+
b3: "text-base font-normal m-0",
|
|
40
|
+
b4: "text-sm font-medium m-0",
|
|
41
41
|
};
|
|
42
42
|
var typographyVariants = cva("!leading-normal", // Default base class
|
|
43
43
|
{
|
|
@@ -1,70 +1,70 @@
|
|
|
1
1
|
export declare const colors: {
|
|
2
2
|
white: string;
|
|
3
3
|
black: string;
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
4
|
+
"blue-50": string;
|
|
5
|
+
"blue-100": string;
|
|
6
|
+
"blue-200": string;
|
|
7
|
+
"blue-300": string;
|
|
8
|
+
"blue-400": string;
|
|
9
|
+
"blue-500": string;
|
|
10
|
+
"blue-600": string;
|
|
11
|
+
"blue-700": string;
|
|
12
|
+
"blue-800": string;
|
|
13
|
+
"blue-900": string;
|
|
14
|
+
"blue-950": string;
|
|
15
|
+
"gray-50": string;
|
|
16
|
+
"gray-100": string;
|
|
17
|
+
"gray-200": string;
|
|
18
|
+
"gray-300": string;
|
|
19
|
+
"gray-400": string;
|
|
20
|
+
"gray-500": string;
|
|
21
|
+
"gray-600": string;
|
|
22
|
+
"gray-700": string;
|
|
23
|
+
"gray-800": string;
|
|
24
|
+
"gray-900": string;
|
|
25
|
+
"gray-950": string;
|
|
26
|
+
"green-50": string;
|
|
27
|
+
"green-100": string;
|
|
28
|
+
"green-200": string;
|
|
29
|
+
"green-300": string;
|
|
30
|
+
"green-400": string;
|
|
31
|
+
"green-500": string;
|
|
32
|
+
"green-600": string;
|
|
33
|
+
"green-700": string;
|
|
34
|
+
"green-800": string;
|
|
35
|
+
"green-900": string;
|
|
36
|
+
"green-950": string;
|
|
37
|
+
"yellow-50": string;
|
|
38
|
+
"yellow-100": string;
|
|
39
|
+
"yellow-200": string;
|
|
40
|
+
"yellow-300": string;
|
|
41
|
+
"yellow-400": string;
|
|
42
|
+
"yellow-500": string;
|
|
43
|
+
"yellow-600": string;
|
|
44
|
+
"yellow-700": string;
|
|
45
|
+
"yellow-800": string;
|
|
46
|
+
"yellow-900": string;
|
|
47
|
+
"yellow-950": string;
|
|
48
|
+
"red-50": string;
|
|
49
|
+
"red-100": string;
|
|
50
|
+
"red-200": string;
|
|
51
|
+
"red-300": string;
|
|
52
|
+
"red-400": string;
|
|
53
|
+
"red-500": string;
|
|
54
|
+
"red-600": string;
|
|
55
|
+
"red-700": string;
|
|
56
|
+
"red-800": string;
|
|
57
|
+
"red-900": string;
|
|
58
|
+
"red-950": string;
|
|
59
|
+
"indigo-50": string;
|
|
60
|
+
"indigo-100": string;
|
|
61
|
+
"indigo-200": string;
|
|
62
|
+
"indigo-300": string;
|
|
63
|
+
"indigo-400": string;
|
|
64
|
+
"indigo-500": string;
|
|
65
|
+
"indigo-600": string;
|
|
66
|
+
"indigo-700": string;
|
|
67
|
+
"indigo-800": string;
|
|
68
|
+
"indigo-900": string;
|
|
69
|
+
"indigo-950": string;
|
|
70
70
|
};
|
package/dist/src/utils/colors.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
1
|
export var colors = {
|
|
2
|
-
white: "
|
|
3
|
-
black: "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
2
|
+
white: "#fefefe",
|
|
3
|
+
black: "#0f0f0f",
|
|
4
|
+
"blue-50": "#fbfcfe",
|
|
5
|
+
"blue-100": "#e2edf9",
|
|
6
|
+
"blue-200": "#b8d3ef",
|
|
7
|
+
"blue-300": "#8eb9e6",
|
|
8
|
+
"blue-400": "#649edd",
|
|
9
|
+
"blue-500": "#3a84d4",
|
|
10
|
+
"blue-600": "#276ab3",
|
|
11
|
+
"blue-700": "#1e528a",
|
|
12
|
+
"blue-800": "#153960",
|
|
13
|
+
"blue-900": "#0c2036",
|
|
14
|
+
"blue-950": "#03080d",
|
|
15
|
+
"gray-50": "#fafafa",
|
|
16
|
+
"gray-100": "#ecedee",
|
|
17
|
+
"gray-200": "#d2d3d5",
|
|
18
|
+
"gray-300": "#b7babd",
|
|
19
|
+
"gray-400": "#9da1a5",
|
|
20
|
+
"gray-500": "#82878c",
|
|
21
|
+
"gray-600": "#696e72",
|
|
22
|
+
"gray-700": "#515457",
|
|
23
|
+
"gray-800": "#383b3d",
|
|
24
|
+
"gray-900": "#202122",
|
|
25
|
+
"gray-950": "#070808",
|
|
26
|
+
"green-50": "#fcfdfc",
|
|
27
|
+
"green-100": "#ebf5f0",
|
|
28
|
+
"green-200": "#d1e7dd",
|
|
29
|
+
"green-300": "#a3cfbb",
|
|
30
|
+
"green-400": "#75b798",
|
|
31
|
+
"green-500": "#479f76",
|
|
32
|
+
"green-600": "#177d4d",
|
|
33
|
+
"green-700": "#146c43",
|
|
34
|
+
"green-800": "#0f5132",
|
|
35
|
+
"green-900": "#0a3622",
|
|
36
|
+
"green-950": "#051b11",
|
|
37
|
+
"yellow-50": "#fffdf5",
|
|
38
|
+
"yellow-100": "#fff9e5",
|
|
39
|
+
"yellow-200": "#fff4cc",
|
|
40
|
+
"yellow-300": "#ffe999",
|
|
41
|
+
"yellow-400": "#ffde66",
|
|
42
|
+
"yellow-500": "#ffd333",
|
|
43
|
+
"yellow-600": "#ffc700",
|
|
44
|
+
"yellow-700": "#dbac00",
|
|
45
|
+
"yellow-800": "#8a6c00",
|
|
46
|
+
"yellow-900": "#665000",
|
|
47
|
+
"yellow-950": "#473800",
|
|
48
|
+
"red-50": "#fffafa",
|
|
49
|
+
"red-100": "#fff0f1",
|
|
50
|
+
"red-200": "#fec6cb",
|
|
51
|
+
"red-300": "#fd9ea7",
|
|
52
|
+
"red-400": "#fc7784",
|
|
53
|
+
"red-500": "#fa4f5f",
|
|
54
|
+
"red-600": "#e0061b",
|
|
55
|
+
"red-700": "#b30515",
|
|
56
|
+
"red-800": "#73030e",
|
|
57
|
+
"red-900": "#460208",
|
|
58
|
+
"red-950": "#230104",
|
|
59
|
+
"indigo-50": "#fbfbfe",
|
|
60
|
+
"indigo-100": "#ece9fb",
|
|
61
|
+
"indigo-200": "#d5cff6",
|
|
62
|
+
"indigo-300": "#c3baf2",
|
|
63
|
+
"indigo-400": "#ada0ee",
|
|
64
|
+
"indigo-500": "#8976e6",
|
|
65
|
+
"indigo-600": "#6249de",
|
|
66
|
+
"indigo-700": "#4226cf",
|
|
67
|
+
"indigo-800": "#341ea4",
|
|
68
|
+
"indigo-900": "#261679",
|
|
69
|
+
"indigo-950": "#190e4e",
|
|
70
70
|
};
|