linkedunion-design-kit 1.5.2 → 1.5.3

package/dist/tailwind.config.js

@@ -1,192 +1,24 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var utils_1 = require("./utils");
-var Display_1 = require("./components/Typography/Display");
-var BackgroundColor_1 = require("./components/Color/BackgroundColor");
-var plugin_1 = __importDefault(require("tailwindcss/plugin"));
+import { colors } from "./src/utils/colors";
 var config = {
-    mode: "jit",
     content: [
         "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
         "./app/**/*.{js,ts,jsx,tsx,mdx}",
     ],
-    safelist: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], BackgroundColor_1.colorNames.flatMap(function (color) {
-        return BackgroundColor_1.shades.map(function (shade) { return "lu-bg-".concat(color, "-").concat(shade); });
-    }), true), utils_1.fontSizes.map(function (fontSize) { return ({ pattern: new RegExp(fontSize.key) }); }), true), utils_1.fontWeights.map(function (fontWeight) { return ({
-        pattern: new RegExp(fontWeight.key),
-    }); }), true), utils_1.lineHeights.map(function (lineHeight) { return ({
-        pattern: new RegExp(lineHeight.key),
-    }); }), true), utils_1.textAlignment.map(function (textAlign) { return ({
-        pattern: new RegExp(textAlign.key),
-    }); }), true), utils_1.textTransform.map(function (textTrans) { return ({
-        pattern: new RegExp(textTrans.key),
-    }); }), true), utils_1.textDecorations.map(function (textDec) { return ({ pattern: new RegExp(textDec.key) }); }), true), utils_1.textWraps.map(function (textWrap) { return ({ pattern: new RegExp(textWrap.key) }); }), true), utils_1.sizes.map(function (size) { return ({ pattern: new RegExp(size.key) }); }), true), utils_1.widths.map(function (width) { return ({ pattern: new RegExp(width.key) }); }), true), utils_1.heights.map(function (height) { return ({ pattern: new RegExp(height.key) }); }), true), utils_1.minWidths.map(function (minWidth) { return ({ pattern: new RegExp(minWidth.key) }); }), true), utils_1.minHeights.map(function (minHeight) { return ({ pattern: new RegExp(minHeight.key) }); }), true), utils_1.borderRadiusList.map(function (borderRadius) { return ({
-        pattern: new RegExp(borderRadius.key),
-    }); }), true), utils_1.borderWidthList.map(function (borderWidth) { return ({
-        pattern: new RegExp(borderWidth.key),
-    }); }), true), utils_1.iconSizeList.map(function (iconSize) { return ({ pattern: new RegExp(iconSize.key) }); }), true), utils_1.iconColorList.map(function (iconColor) { return ({
-        pattern: new RegExp(iconColor.key),
-    }); }), true), utils_1.buttonColorsList.map(function (btnColor) { return ({
-        pattern: new RegExp(btnColor.key),
-    }); }), true), utils_1.buttonSizeList.map(function (btnSize) { return ({ pattern: new RegExp(btnSize.key) }); }), true), utils_1.buttonIconSizeList.map(function (btnIconSize) { return ({
-        pattern: new RegExp(btnIconSize.key),
-    }); }), true), utils_1.buttonWithIconList.map(function (iconButton) { return ({
-        pattern: new RegExp(iconButton.key),
-    }); }), true), utils_1.portraitAspectRatioList.map(function (aspectRatio) { return ({
-        pattern: new RegExp(aspectRatio.key),
-    }); }), true), utils_1.landscapeAspectRatioList.map(function (aspectRatio) { return ({
-        pattern: new RegExp(aspectRatio.key),
-    }); }), true), utils_1.avatarSizesList.map(function (avatarSize) { return ({
-        pattern: new RegExp(avatarSize.key),
-    }); }), true), utils_1.avatarShapeList.map(function (avatarShape) { return ({
-        pattern: new RegExp(avatarShape.key),
-    }); }), true), utils_1.textColorList.map(function (textColor) { return ({
-        pattern: new RegExp(textColor.key),
-    }); }), true), utils_1.headingsList.map(function (heading) { return ({ pattern: new RegExp(heading.key) }); }), true), Object.keys(Display_1.Display_Classes).map(function (display) { return ({
-        pattern: new RegExp(display),
-    }); }), true),
     theme: {
+        colors: colors,
         extend: {
             backgroundImage: {
                 "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                 "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
             },
-            fontSize: utils_1.customFontSize,
-            fontWeight: utils_1.customFontWeight,
-            lineHeight: utils_1.customLineHeight,
-            textAlign: utils_1.customTextAlignment,
-            textTransform: utils_1.customTextTransform,
-            textDecoration: utils_1.customTextDecoration,
-            textWrap: utils_1.customTextWrap,
-            size: utils_1.customSize,
-            width: utils_1.customWidth,
-            height: utils_1.customHeight,
-            minWidth: utils_1.customMinWidth,
-            minHeight: utils_1.customMinHeight,
-            logoSize: utils_1.customLogoSize,
-            opacity: utils_1.customOpacity,
-            boxShadow: utils_1.customBoxShadow,
+            screens: {
+                xs: "480px",
+            },
+            boxShadow: {
+                "outline-primary": "0 0 0 0.25rem rgba(147, 197, 253, 0.5)",
+            },
         },
     },
-    plugins: [
-        (0, plugin_1.default)(function (_a) {
-            var addUtilities = _a.addUtilities, theme = _a.theme;
-            //Font Size plugin
-            var fontSizeUtilities = (0, utils_1.generateUtilities)("fontSize", theme);
-            addUtilities(fontSizeUtilities, ["responsive"]);
-            //Font Weight plugin
-            var fontWeightUtilities = (0, utils_1.generateUtilities)("fontWeight", theme);
-            addUtilities(fontWeightUtilities, ["responsive"]);
-            //Line Height plugin
-            var lineHeightUtilities = (0, utils_1.generateUtilities)("lineHeight", theme);
-            addUtilities(lineHeightUtilities, ["responsive"]);
-            //Text Alignment plugin
-            var textAlignmentUtilities = (0, utils_1.generateUtilities)("textAlign", theme);
-            addUtilities(textAlignmentUtilities, ["responsive"]);
-            //Text Transform plugin
-            var textTransformUtilities = (0, utils_1.generateUtilities)("textTransform", theme);
-            addUtilities(textTransformUtilities, ["responsive"]);
-            //Text Decoration plugin
-            var textDecorationUtilities = (0, utils_1.generateUtilities)("textDecoration", theme);
-            addUtilities(textDecorationUtilities, ["responsive"]);
-            //Text Wrap plugin
-            var textWrapUtilities = (0, utils_1.generateUtilities)("textWrap", theme);
-            addUtilities(textWrapUtilities, ["responsive"]);
-            //Size plugin
-            var sizeUtilities = Object.entries(utils_1.customSize).reduce(function (acc, _a) {
-                var key = _a[0], value = _a[1];
-                acc[".".concat(key)] = {
-                    width: value,
-                    height: value,
-                };
-                return acc;
-            }, {});
-            addUtilities(sizeUtilities, ["responsive"]);
-            //width plugin
-            var widthUtilities = Object.entries(utils_1.customWidth).reduce(function (acc, _a) {
-                var key = _a[0], value = _a[1];
-                acc[".".concat(key)] = {
-                    width: value,
-                };
-                return acc;
-            }, {});
-            addUtilities(widthUtilities, ["responsive"]);
-            //height plugin
-            var heightUtilities = Object.entries(utils_1.customHeight).reduce(function (acc, _a) {
-                var key = _a[0], value = _a[1];
-                acc[".".concat(key)] = {
-                    height: value,
-                };
-                return acc;
-            }, {});
-            addUtilities(heightUtilities, ["responsive"]);
-            //Min width Plugin
-            var minWidthUtilities = Object.entries(utils_1.customMinWidth).reduce(function (acc, _a) {
-                var key = _a[0], value = _a[1];
-                acc[".".concat(key)] = {
-                    minWidth: value,
-                };
-                return acc;
-            }, {});
-            addUtilities(minWidthUtilities, ["responsive"]);
-            //Min height Plugin
-            var minHeightUtilities = Object.entries(utils_1.customMinHeight).reduce(function (acc, _a) {
-                var key = _a[0], value = _a[1];
-                acc[".".concat(key)] = {
-                    minHeight: value,
-                };
-                return acc;
-            }, {});
-            addUtilities(minHeightUtilities, ["responsive"]);
-            // Add plugin border radius
-            addUtilities(utils_1.customBorderRadius, ["responsive"]);
-            // Add plugin border width
-            addUtilities(utils_1.customBorderWidth, ["responsive"]);
-            //plugin for icon size
-            addUtilities(utils_1.customIconSize, ["responsive", "hover"]);
-            //plugin for icon colors
-            addUtilities(utils_1.customIconColors, ["responsive"]);
-            //plugin for custom button colors
-            addUtilities(utils_1.customButtonColors, ["responsive"]);
-            //plugin for custom button size
-            addUtilities(utils_1.customButtonSize, ["responsive"]);
-            //plugin for custom button icon size
-            addUtilities(utils_1.customButtonIconSize, ["responsive"]);
-            //plugin for custom button with icon
-            addUtilities(utils_1.customIconButtonSize, ["responsive"]);
-            //plugin for outline button color
-            addUtilities(utils_1.customButtonOutlineColors, ["responsive"]);
-            //plugin for aspect ratio
-            addUtilities(utils_1.customAspectRatio, ["responsive"]);
-            //Plugin for avatar size
-            addUtilities(utils_1.customAvatarSize, ["responsive"]);
-            //plugin for avatar shape
-            addUtilities(utils_1.customizeAvatarShape, ["responsive"]);
-            //plugin for box shadow
-            var boxShadowUtilities = (0, utils_1.generateUtilities)("boxShadow", theme);
-            addUtilities(boxShadowUtilities, ["responsive"]);
-            //plugin for custom text colors
-            addUtilities(utils_1.customizeTextColors, ["responsive"]);
-            //plugin for custom headings
-            addUtilities(utils_1.customHeadings, ["responsive"]);
-            //plugin for custom Display
-            addUtilities(Display_1.customDisplay, ["responsive"]);
-            //plugin for custom background colors
-            addUtilities(BackgroundColor_1.customBackgroundColor, ["responsive"]);
-        }),
-    ],
 };
-exports.default = config;
+export default config;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "private": false,
   "files": [
     "dist",
-    "styles/global.css"
+    "src/styles/global.css"
   ],
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -13,7 +13,7 @@
   "scripts": {
     "dev": "next dev",
     "format": "prettier --write .",
-    "build": "postcss styles/globals.css -o dist/styles/global.css && tsc && tsc-alias && postcss \"components/**/*.css\" --base components --dir dist/components",
+    "build": "postcss src/styles/globals.css -o dist/styles/global.css && tsc && tsc-alias && postcss \"src/components/**/*.css\"  --base src --dir dist/src",
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
@@ -41,14 +41,28 @@
     "*.css"
   ],
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.2.3",
     "@storybook/testing-library": "^0.2.2",
+    "@tailwindcss/cli": "^4.1.3",
+    "@tailwindcss/postcss": "^4.1.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "eslint-plugin-testing-library": "^7.1.1",
+    "init": "^0.1.2",
+    "lucide-react": "^0.488.0",
     "next": "^15.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tsc-alias": "^1.8.10"
+    "react-dropzone": "^14.3.8",
+    "shadcn": "^2.4.0",
+    "tailwind-merge": "^3.2.0",
+    "tsc-alias": "^1.8.10",
+    "tw-animate-css": "^1.2.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -82,16 +96,14 @@
     "eslint-plugin-storybook": "^0.11.3",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
-    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^15.4.3",
     "matchmedia-polyfill": "^0.3.2",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "prettier": "^3.5.2",
     "storybook": "^8.4.3",
-    "tailwindcss": "^3",
+    "tailwindcss": "^4.1.3",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   }

package/dist/.next/types/app/page.d.ts

@@ -1,8 +0,0 @@
-export interface PageProps {
-    params?: any;
-    searchParams?: any;
-}
-export interface LayoutProps {
-    children?: React.ReactNode;
-    params?: any;
-}

package/dist/.next/types/app/page.js

@@ -1,57 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-// File: /Users/avialdosolutions/linkedunion-design-kit/linkedunion-design-kit/app/page.tsx
-var entry = __importStar(require("../../../app/page.js"));
-// Check that the entry is a valid entry
-checkFields();
-// Check the prop type of the entry function
-checkFields();
-// Check the arguments and return type of the generateMetadata function
-if ('generateMetadata' in entry) {
-    checkFields();
-    checkFields();
-}
-// Check the arguments and return type of the generateViewport function
-if ('generateViewport' in entry) {
-    checkFields();
-    checkFields();
-}
-// Check the arguments and return type of the generateStaticParams function
-if ('generateStaticParams' in entry) {
-    checkFields();
-    checkFields();
-}
-function checkFields() { }

package/dist/app/scripts.d.ts

@@ -1,2 +0,0 @@
-export declare const ensureValue: (value: string | undefined, fallbackValue: (() => void | string) | string) => string | (() => void | string);
-export declare const getColor: (color: string | undefined, fallbackColor: (() => void | string) | string) => string | (() => void | string);

package/dist/app/scripts.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColor = exports.ensureValue = void 0;
-var ensureValue = function (value, fallbackValue) {
-    if (!value) {
-        return fallbackValue;
-    }
-    else {
-        return value;
-    }
-};
-exports.ensureValue = ensureValue;
-var getColor = function (color, fallbackColor) {
-    return (0, exports.ensureValue)(color, fallbackColor);
-};
-exports.getColor = getColor;

package/dist/components/Avatar/Avatar.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var LUIcon_1 = __importDefault(require("../Icons/LUIcon"));
-var iconList_1 = require("../../utils/iconList");
-var utils_1 = require("../../utils");
-var Avatar = function (_a) {
-    var image = _a.image, _b = _a.icon, icon = _b === void 0 ? "user" : _b, shape = _a.shape, size = _a.size, className = _a.className;
-    var defaultIcon = iconList_1.iconList.find(function (item) { return item.key === (icon || "user"); });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "".concat(image ? "lu-bg-primary-200" : "lu-bg-gray-100", " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: (0, utils_1.avatarBackgroundSize)(size), "data-testid": "lu-avatar", children: image ? ((0, jsx_runtime_1.jsx)("img", { src: image, alt: "image", className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)(LUIcon_1.default, { size: size, icon: defaultIcon === null || defaultIcon === void 0 ? void 0 : defaultIcon.key, fill: "lu-neutral-icon-dark", className: "" })) }) }));
-};
-exports.default = Avatar;

package/dist/components/Avatar/Avatar.stories.js

@@ -1,52 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._Avatar = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var utils_1 = require("../../utils");
-var Avatar_1 = __importDefault(require("./Avatar"));
-exports.default = {
-    title: "Components/Avatar",
-    component: Avatar_1.default,
-};
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(Avatar_1.default, __assign({}, args)); };
-exports._Avatar = Template.bind({});
-exports._Avatar.args = {
-    image: "/images/avatar.png",
-    shape: "square",
-    size: "lu-avatar-massive",
-    className: "",
-    icon: "user",
-};
-exports._Avatar.argTypes = {
-    shape: {
-        control: {
-            type: "select",
-            labels: Object.fromEntries(utils_1.avatarShapeList.map(function (borderRadius) { return [
-                borderRadius.key,
-                borderRadius.label,
-            ]; })),
-        },
-        options: utils_1.avatarShapeList.map(function (borderRadius) { return borderRadius.key; }),
-    },
-    size: {
-        control: {
-            type: "select",
-            labels: Object.fromEntries(utils_1.avatarSizesList.map(function (size) { return [size.key, size.label]; })),
-        },
-        options: utils_1.avatarSizesList.map(function (size) { return size.key; }),
-    },
-};

package/dist/components/Avatar/Avatar.test.js

@@ -1,54 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-var Avatar_1 = __importDefault(require("./Avatar"));
-jest.mock("../Icons/LUIcon", function () { return ({
-    __esModule: true,
-    default: jest.fn(function () { return (0, jsx_runtime_1.jsx)("div", { "data-testid": "mock-luIcon", children: "user" }); }),
-}); });
-describe("Avatar Component", function () {
-    it("renders an image when image prop is provided", function () {
-        var testImage = "/images/avatar.png";
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, { image: testImage }));
-        var img = react_1.screen.getByRole("img");
-        expect(img).toHaveAttribute("src", testImage);
-        expect(img).toHaveAttribute("alt", "image");
-    });
-    it("renders default icon when no image is provided", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, {}));
-        var iconDiv = react_1.screen.getByTestId("mock-luIcon");
-        expect(iconDiv.textContent).toBe("user");
-    });
-    it("renders with default icon when no icon prop is provided and no image is present", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, {}));
-        var icon = react_1.screen.getByTestId("mock-luIcon");
-        expect(icon.textContent).toBe("user");
-    });
-    it("renders default icon when provided icon does not exist in the list", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, { icon: "" }));
-        var icon = react_1.screen.getByTestId("mock-luIcon");
-        expect(icon.textContent).toBe("user"); // Assuming 'user' is the fallback when the icon is not found
-    });
-    it("renders default icon when no icon and no image are provided", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, {}));
-        var icon = react_1.screen.getByTestId("mock-luIcon");
-        expect(icon).toBeInTheDocument(); // Ensure the icon is in the document
-        expect(icon.textContent).toBe("user"); // Check that the default icon is 'user'
-    });
-    it("applies both shape and size props to class when provided", function () {
-        var shape = "square";
-        var size = "lu-avatar-massive";
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(Avatar_1.default, { shape: shape, size: size }));
-        var avatarDiv = react_1.screen.getByTestId("lu-avatar");
-        // Check if the shape is part of the class
-        expect(avatarDiv.className).toContain(shape);
-        // Check for the correct style application
-        var styles = window.getComputedStyle(avatarDiv);
-        expect(styles.width).toBe("200px");
-        expect(styles.height).toBe("200px");
-    });
-});

package/dist/components/Border/BorderRadius/BorderRadius.d.ts

@@ -1,2 +0,0 @@
-import { BorderRadiusProps } from "@/types/interface";
-export declare const BorderRadius: ({ borderRadius }: BorderRadiusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Border/BorderRadius/BorderRadius.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderRadius = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var BorderRadiusTable_1 = require("./BorderRadiusTable");
-var BorderRadiusView_1 = require("./BorderRadiusView");
-var BorderRadius = function (_a) {
-    var borderRadius = _a.borderRadius;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(BorderRadiusTable_1.BorderRadiusTable, {}), (0, jsx_runtime_1.jsx)("div", { className: "lu-mt-150", children: (0, jsx_runtime_1.jsx)(BorderRadiusView_1.BorderRadiusView, { borderRadius: borderRadius }) })] }));
-};
-exports.BorderRadius = BorderRadius;

package/dist/components/Border/BorderRadius/BorderRadius.stories.d.ts

@@ -1,4 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta;
-export default _default;
-export declare const _BorderRadius: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;

package/dist/components/Border/BorderRadius/BorderRadius.stories.js

@@ -1,38 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports._BorderRadius = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var BorderRadius_1 = require("./BorderRadius");
-var utils_1 = require("../../../utils");
-exports.default = {
-    title: "Components/Border",
-    component: BorderRadius_1.BorderRadius,
-};
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(BorderRadius_1.BorderRadius, __assign({}, args)); };
-exports._BorderRadius = Template.bind({});
-exports._BorderRadius.args = {
-    borderRadius: "lu-border-rounded-xs",
-};
-exports._BorderRadius.argTypes = {
-    borderRadius: {
-        control: {
-            type: "select",
-            labels: Object.fromEntries(utils_1.borderRadiusList.map(function (borderRadius) { return [
-                borderRadius.key,
-                borderRadius.label,
-            ]; })),
-        },
-        options: utils_1.borderRadiusList.map(function (borderRadius) { return borderRadius.key; }),
-    },
-};

package/dist/components/Border/BorderRadius/BorderRadius.test.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-var BorderRadius_1 = require("./BorderRadius");
-describe("BorderRadius Component", function () {
-    it("renders BorderRadius component with table and border radius view", function () {
-        var borderRadius = "lu-border-rounded-xs"; // Example border radius token
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(BorderRadius_1.BorderRadius, { borderRadius: borderRadius }));
-        // Check if the main title 'Border Radius' is displayed
-        expect(react_1.screen.getByText("Border Radius")).toBeInTheDocument();
-        // Verify the BorderRadiusTable renders correctly
-        expect(react_1.screen.getByText("Alias Token Name")).toBeInTheDocument();
-        expect(react_1.screen.getByText("Base unit Multiplier of 8")).toBeInTheDocument();
-        expect(react_1.screen.getByText("Value(PX)(REM)")).toBeInTheDocument();
-        // Verify the 'lu-border-rounded-md' row data is in the table
-        expect(react_1.screen.getByText("lu-border-rounded-md")).toBeInTheDocument();
-        expect(react_1.screen.getByText("0.75x")).toBeInTheDocument();
-        expect(react_1.screen.getByText("6px = 0.375rem")).toBeInTheDocument();
-        // Check if BorderRadiusView is rendered with the correct border radius class
-        var borderRadiusElement = react_1.screen.getByTestId("border-radius");
-        expect(borderRadiusElement).toHaveClass("lu-border-rounded-xs");
-        expect(borderRadiusElement).toHaveClass("border-primary-600");
-    });
-});

package/dist/components/Border/BorderRadius/BorderRadiusTable.d.ts

@@ -1 +0,0 @@
-export declare const BorderRadiusTable: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Border/BorderRadius/BorderRadiusTable.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderRadiusTable = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var utils_1 = require("../../../utils");
-var BorderRadiusTable = function () {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("table", { className: "lu-width-100 lu-font-size-x-small lu-font-weight-medium", children: [(0, jsx_runtime_1.jsx)("thead", { className: "bg-primary-100", children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "".concat(utils_1.table_header_className), children: "Alias Token Name" }), (0, jsx_runtime_1.jsx)("th", { className: "".concat(utils_1.table_header_className), children: "Base unit Multiplier of 8" }), (0, jsx_runtime_1.jsx)("th", { className: "".concat(utils_1.table_header_className), children: "Value(PX)(REM)" })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-none" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "0x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "0px = 0rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-xs" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "0.25x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "2px = 0.125rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-sm" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "0.5x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "4px = 0.25rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-md" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "0.75x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "6px = 0.375rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-lg" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "1x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "8px = 0.5rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-xl" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "1.5x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "12px = 0.75rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-2xl" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "2x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "16px = 1rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-3xl" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "3x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "24px = 1.5rem" }) })] }), (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "lu-border-rounded-full" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "100x" }) }), (0, jsx_runtime_1.jsx)("td", { className: "".concat(utils_1.table_row_className), children: (0, jsx_runtime_1.jsx)("span", { className: "".concat(utils_1.table_data_className), children: "9999px" }) })] })] })] }) }));
-};
-exports.BorderRadiusTable = BorderRadiusTable;

package/dist/components/Border/BorderRadius/BorderRadiusView.d.ts

@@ -1,2 +0,0 @@
-import { BorderRadiusProps } from "@/types/interface";
-export declare const BorderRadiusView: ({ borderRadius }: BorderRadiusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Border/BorderRadius/BorderRadiusView.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderRadiusView = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var BorderRadiusView = function (_a) {
-    var borderRadius = _a.borderRadius;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "border-primary-600 lu-pd-200 lu-size-2500 lu-border-width-125 ".concat(borderRadius), "data-testid": "border-radius", children: (0, jsx_runtime_1.jsx)("p", { className: "lu-bg-neutral-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded lu-font-size-x-small", children: borderRadius }) }) }));
-};
-exports.BorderRadiusView = BorderRadiusView;

package/dist/components/Border/BorderWidth/BorderWidth.d.ts

@@ -1,2 +0,0 @@
-import { BorderWidthProps } from "@/types/interface";
-export declare const BorderWidth: ({ border }: BorderWidthProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Border/BorderWidth/BorderWidth.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderWidth = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var BorderWidthTable_1 = require("./BorderWidthTable");
-var ViewBorderWidth_1 = require("./ViewBorderWidth");
-var BorderWidth = function (_a) {
-    var border = _a.border;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "lu-font-size-large lu-font-weight-semibold lu-text-center lu-text-uppercase lu-text-decoration-underline lu-mb-100", children: "Border Width" }), (0, jsx_runtime_1.jsx)(BorderWidthTable_1.BorderWidthTable, {}), (0, jsx_runtime_1.jsx)("div", { className: "lu-mt-150", children: (0, jsx_runtime_1.jsx)(ViewBorderWidth_1.ViewBorderWidth, { border: border }) })] }));
-};
-exports.BorderWidth = BorderWidth;

package/dist/components/Border/BorderWidth/BorderWidth.stories.d.ts

@@ -1,4 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta;
-export default _default;
-export declare const _BorderWidth: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/react").Args>;