linkedunion-design-kit 1.6.8 → 1.7.0

package/dist/src/components/MediaCard/PostByCategory/PostByCategoryTheme1.test.jsx

@@ -0,0 +1,87 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { PostByCategoryTheme1 } from "./PostByCategoryTheme1";
+import userEvent from "@testing-library/user-event";
+describe("PostByCategoryTheme1 Component", function () {
+    var mockProps = {
+        id: 1,
+        heading: "John Doe",
+        body: "Software Engineer",
+        image: "https://via.placeholder.com/150",
+        btnLabel: "View Profile",
+        href: "/profile",
+        className: "custom-class",
+    };
+    it("Render the post by category theme1 with correct body and heading text", function () {
+        render(<PostByCategoryTheme1 {...mockProps}/>);
+        var headingElement = screen.getByText(mockProps.heading);
+        var bodyElement = screen.getByText(mockProps.body);
+        expect(headingElement).toBeInTheDocument();
+        expect(bodyElement).toBeInTheDocument();
+    });
+    it("renders the button with correct label and icon", function () {
+        render(<PostByCategoryTheme1 {...mockProps}/>);
+        var buttonElement = screen.getByRole("button", {
+            name: mockProps.btnLabel,
+        });
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveTextContent(mockProps.btnLabel);
+    });
+    it("renders the link with the correct href", function () {
+        render(<PostByCategoryTheme1 {...mockProps}/>);
+        var linkElement = screen.getByRole("link");
+        expect(linkElement).toHaveAttribute("href", mockProps.href);
+    });
+    it("triggers navigation when the button is clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, linkElement;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(<PostByCategoryTheme1 {...mockProps}/>);
+                    user = userEvent.setup();
+                    linkElement = screen.getByRole("link");
+                    return [4 /*yield*/, user.click(linkElement)];
+                case 1:
+                    _a.sent();
+                    expect(linkElement).toHaveAttribute("href", mockProps.href);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/src/components/MediaCard/PostByCategory/PostByCategoryTheme2.jsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import LuImage from "../../../components/Images/LuImage";
+import { Button } from "../../../components/Button/Button";
+export var PostByCategoryTheme2 = function (props) {
+    return (<div data-testid="postByCategory-theme2" className={"p-8 card_bg_PostByCategory_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_PostByCategory_").concat(props.id, " flex flex-col items-center w-full")}>
+      <div className="w-full max-w-[240px] overflow-hidden aspect-square">
+        <LuImage src={props.image} width={240} height={240} className={"w-full h-full object-cover card_PostByCategory_theme2_image_".concat(props === null || props === void 0 ? void 0 : props.id)} alt="Post By Category"/>
+      </div>
+      <div className={"flex flex-col items-center flex-grow m-5 text-center h-[100px]"}>
+        <div className={"text-default card_PostByCategory_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1")}>
+          {props.heading}
+        </div>
+        <p className={"card_PostByCategory_description_color_".concat(props.id, " text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-sm:mt-[7px]")}>
+          {props.body}
+        </p>
+      </div>
+      <Link href={props.href} passHref className="w-full no-underline">
+        <Button endIcon={"angle-right"} size="lg" className={"rounded justify-between w-full card_PostByCategory_btn_".concat(props.id)}>
+          {props.btnLabel}
+        </Button>
+      </Link>
+    </div>);
+};

package/dist/src/components/MediaCard/PostByCategory/PostByCategoryTheme2.test.jsx

@@ -0,0 +1,87 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { PostByCategoryTheme2 } from "./PostByCategoryTheme2";
+import userEvent from "@testing-library/user-event";
+describe("PostByCategoryTheme2 Component", function () {
+    var mockProps = {
+        id: 1,
+        heading: "John Doe",
+        body: "Software Engineer",
+        image: "https://via.placeholder.com/150",
+        btnLabel: "View Profile",
+        href: "/profile",
+        className: "custom-class",
+    };
+    it("Render the post by category theme2 with correct body and heading text", function () {
+        render(<PostByCategoryTheme2 {...mockProps}/>);
+        var headingElement = screen.getByText(mockProps.heading);
+        var bodyElement = screen.getByText(mockProps.body);
+        expect(headingElement).toBeInTheDocument();
+        expect(bodyElement).toBeInTheDocument();
+    });
+    it("renders the button with correct label and icon", function () {
+        render(<PostByCategoryTheme2 {...mockProps}/>);
+        var buttonElement = screen.getByRole("button", {
+            name: mockProps.btnLabel,
+        });
+        expect(buttonElement).toBeInTheDocument();
+        expect(buttonElement).toHaveTextContent(mockProps.btnLabel);
+    });
+    it("renders the link with the correct href", function () {
+        render(<PostByCategoryTheme2 {...mockProps}/>);
+        var linkElement = screen.getByRole("link");
+        expect(linkElement).toHaveAttribute("href", mockProps.href);
+    });
+    it("triggers navigation when the button is clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, linkElement;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(<PostByCategoryTheme2 {...mockProps}/>);
+                    user = userEvent.setup();
+                    linkElement = screen.getByRole("link");
+                    return [4 /*yield*/, user.click(linkElement)];
+                case 1:
+                    _a.sent();
+                    expect(linkElement).toHaveAttribute("href", mockProps.href);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.d.ts

@@ -0,0 +1,3 @@
+import { CardInterface } from "../type";
+declare const VerticalCard: ({ item, footer_logo, href, btnLabel, editor, mediaPosition, mediaShape, }: CardInterface) => import("react/jsx-runtime").JSX.Element;
+export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LuImage from "../../../components/Images/LuImage";
+import Link from "next/link";
+import { getCardImageSrc } from "..";
+import { Heading } from "../../../components/Typography/Heading/heading";
+import { Body } from "../../../components/Typography/Body/body";
+import { Button } from "../../../components/Button/Button";
+var VerticalCard = function (_a) {
+    var item = _a.item, footer_logo = _a.footer_logo, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "top" : _d, _e = _a.mediaShape, mediaShape = _e === void 0 ? "square" : _e;
+    var imageSrc = getCardImageSrc(item === null || item === void 0 ? void 0 : item.image, footer_logo);
+    return (_jsxs("div", { className: "p-8 bg-white rounded-xl inline-flex flex-col gap-5 max-w-[480px]  items-center   shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", "  items-center gap-5 text-center "), children: [_jsx(LuImage, { src: imageSrc, width: 240, height: 240, className: "w-full h-full ".concat(mediaShape === "square" ? "aspect-5/4 " : "aspect-square rounded-full max-w-[160px]", "  object-cover ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs(Heading, { variant: "h5-700", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: [" ", item === null || item === void 0 ? void 0 : item.title] }), _jsx(Body, { variant: "body-md", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] })] }), _jsx(Link, { href: href, passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "md", shape: "rounded-full", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel }) })] }));
+};
+export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.jsx

@@ -0,0 +1,30 @@
+import LuImage from "../../../components/Images/LuImage";
+import Link from "next/link";
+import { getCardImageSrc } from "..";
+import { Heading } from "../../../components/Typography/Heading/heading";
+import { Body } from "../../../components/Typography/Body/body";
+import { Button } from "../../../components/Button/Button";
+var VerticalCard = function (_a) {
+    var item = _a.item, footer_logo = _a.footer_logo, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "top" : _d, _e = _a.mediaShape, mediaShape = _e === void 0 ? "square" : _e;
+    var imageSrc = getCardImageSrc(item === null || item === void 0 ? void 0 : item.image, footer_logo);
+    return (<div className={"p-8 bg-white rounded-xl inline-flex flex-col gap-5 max-w-[480px]  items-center   shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card)}>
+      <div className={"flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", "  items-center gap-5 text-center ")}>
+        <LuImage src={imageSrc} width={240} height={240} className={"w-full h-full ".concat(mediaShape === "square" ? "aspect-5/4 " : "aspect-square rounded-full max-w-[160px]", "  object-cover ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage)} alt="Image"/>
+        <div className="flex flex-col gap-1">
+          <Heading variant="h5-700" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle)}>
+            {" "}
+            {item === null || item === void 0 ? void 0 : item.title}
+          </Heading>
+          <Body variant="body-md" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardText)}>
+            {item === null || item === void 0 ? void 0 : item.description}
+          </Body>
+        </div>
+      </div>
+      <Link href={href} passHref>
+        <Button endIcon={"angle-right"} size="md" shape="rounded-full" className={"".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn)}>
+          {btnLabel}
+        </Button>
+      </Link>
+    </div>);
+};
+export default VerticalCard;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { CardInterface } from "../../../components/Card/type";
+declare const _default: Meta;
+export default _default;
+export declare const _VerticalCard: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.js

@@ -0,0 +1,40 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import VerticalCard from "./VerticalCard";
+import Card from "../../../components/Card/card";
+import { Dummy_Para, Dummy_Title } from "../../../utils/constants";
+export default {
+    title: "Components/VerticalCard",
+    component: VerticalCard,
+};
+var Template = function (args) { return _jsx(Card, __assign({}, args)); };
+export var _VerticalCard = Template.bind({});
+_VerticalCard.args = {
+    item: {
+        image: "/images/demo-image.jpg",
+        title: Dummy_Title,
+        description: Dummy_Para,
+    },
+    type: "postByCategory",
+    image: "/images/demo-image.jpg",
+    href: "https://www.google.com/",
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+    orientation: "horizontal",
+};

package/dist/src/components/MediaCard/VerticalCard/VerticalCard.stories.jsx

@@ -0,0 +1,65 @@
+import VerticalCard from "./VerticalCard";
+import Card from "../../../components/Card/card";
+import { Dummy_Para, Dummy_Title } from "../../../utils/constants";
+export default {
+    title: "Components/VerticalCard",
+    component: VerticalCard,
+};
+var Template = function (args) { return <Card {...args}/>; };
+export var _VerticalCard = Template.bind({});
+_VerticalCard.args = {
+    item: {
+        image: "/images/demo-image.jpg",
+        title: Dummy_Title,
+        description: Dummy_Para,
+    },
+    type: "postByCategory",
+    image: "/images/demo-image.jpg",
+    href: "https://www.google.com/",
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+    orientation: "horizontal",
+};
+// _Card.args = {
+//   type: SectionTypeEnum.postByCategoriesTheme,
+//   image: "/images/demo-image.jpg",
+//   heading: "Heading Text",
+//   body: "The quick brown fox jumps over the lazy dog.",
+//   layout: OrientationEnum.horizontal,
+//   btnLabel: "View More",
+//   href: "https://www.google.com/",
+//   cardStyle: {
+//     card_title_color: "",
+//     card_description_color: "",
+//     card_shadow_toggle: 0,
+//     card_shadow_color: "",
+//     card_background_color: "",
+//     card_button_background_color: "",
+//     card_button_text_color: "",
+//     card_image_border_color: "",
+//     card_image_border_radius: "",
+//     card_image_border: "",
+//   },
+//   id: 1,
+// };
+// _Card.argTypes = {
+//   layout: {
+//     control: { type: "select" },
+//     options: [OrientationEnum.horizontal, OrientationEnum.vertical],
+//   },
+//   type: {
+//     control: {
+//       type: "select",
+//       labels: Object.fromEntries(
+//         sectionTypeList.map((type) => [type.key, type.label]),
+//       ),
+//     },
+//     options: sectionTypeList.map((type) => type.key),
+//   },
+// };

package/dist/src/components/MediaCard/index.d.ts

@@ -6,3 +6,4 @@ export declare enum SectionTypeEnum {
     galleryTheme = "gallery",
     albumTheme = "album"
 }
+export declare function getCardImageSrc(image?: string, footer_logo?: string, fallback?: string): string;

package/dist/src/components/MediaCard/index.js

@@ -7,3 +7,7 @@ export var SectionTypeEnum;
     SectionTypeEnum["galleryTheme"] = "gallery";
     SectionTypeEnum["albumTheme"] = "album";
 })(SectionTypeEnum || (SectionTypeEnum = {}));
+export function getCardImageSrc(image, footer_logo, fallback) {
+    if (fallback === void 0) { fallback = "/images/no-image.svg"; }
+    return (image === null || image === void 0 ? void 0 : image.trim()) ? image : footer_logo || fallback;
+}

package/dist/src/components/MediaCard/type.d.ts

@@ -23,4 +23,25 @@ export interface CardProps {
     };
     id?: number;
 }
+export interface EditorInterface {
+    cardImage?: string;
+    card?: string;
+    cardTitle?: string;
+    cardText?: string;
+    cardBtn?: string;
+}
+export interface CardDataProps {
+    image?: string;
+    title?: string;
+    description?: string;
+}
+export interface CardInterface {
+    mediaPosition?: "top" | "middle";
+    mediaShape?: "circle" | "square";
+    item?: CardDataProps;
+    footer_logo?: string;
+    href?: string;
+    btnLabel?: string;
+    editor?: EditorInterface;
+}
 export {};

package/dist/src/components/RadioButton/RadioButton.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RadioButton } from "./radio-button";
+declare const meta: Meta<typeof RadioButton>;
+export default meta;
+type Story = StoryObj<typeof RadioButton>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;
+export declare const Checked: Story;

package/dist/src/components/RadioButton/RadioButton.stories.js

@@ -0,0 +1,43 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioButton } from "./radio-button";
+import { Label } from "../Label/Label";
+var meta = {
+    title: "Components/RadioButton",
+    component: RadioButton,
+    tags: ["autodocs"],
+    args: {
+        id: "radio-example",
+        name: "example",
+        value: "option1",
+    },
+};
+export default meta;
+//Basic Radio (no label)
+export var Default = {
+    args: {
+        checked: true,
+    },
+};
+//With Label wrapping the radio
+export var WithLabel = {
+    render: function (args) { return (_jsxs(Label, { htmlFor: "radio-with-label", children: [_jsx(RadioButton, __assign({}, args, { id: "radio-with-label" })), "Upload a Video"] })); },
+};
+//Disabled
+export var Disabled = {
+    render: function (args) { return (_jsxs(Label, { htmlFor: "radio-disabled", children: [_jsx(RadioButton, __assign({}, args, { id: "radio-disabled", disabled: true })), "Disabled Option"] })); },
+};
+//Checked by default
+export var Checked = {
+    render: function (args) { return (_jsxs(Label, { htmlFor: "radio-checked", children: [_jsx(RadioButton, __assign({}, args, { id: "radio-checked", checked: true })), "Pre-selected"] })); },
+};

package/dist/src/components/RadioButton/RadioButton.stories.jsx

@@ -0,0 +1,40 @@
+import { RadioButton } from "./radio-button";
+import { Label } from "../Label/Label";
+var meta = {
+    title: "Components/RadioButton",
+    component: RadioButton,
+    tags: ["autodocs"],
+    args: {
+        id: "radio-example",
+        name: "example",
+        value: "option1",
+    },
+};
+export default meta;
+//Basic Radio (no label)
+export var Default = {
+    args: {
+        checked: true,
+    },
+};
+//With Label wrapping the radio
+export var WithLabel = {
+    render: function (args) { return (<Label htmlFor="radio-with-label">
+      <RadioButton {...args} id="radio-with-label"/>
+      Upload a Video
+    </Label>); },
+};
+//Disabled
+export var Disabled = {
+    render: function (args) { return (<Label htmlFor="radio-disabled">
+      <RadioButton {...args} id="radio-disabled" disabled/>
+      Disabled Option
+    </Label>); },
+};
+//Checked by default
+export var Checked = {
+    render: function (args) { return (<Label htmlFor="radio-checked">
+      <RadioButton {...args} id="radio-checked" checked/>
+      Pre-selected
+    </Label>); },
+};

package/dist/src/components/RadioButton/radio-button.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const RadioButton: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+export { RadioButton };

package/dist/src/components/RadioButton/radio-button.js

@@ -0,0 +1,41 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+var RadioButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("input", __assign({ ref: ref, type: "radio", className: cn(
+        // Size and shape
+        "size-4 shrink-0 rounded-full border", 
+        // Unchecked state
+        "border-gray-400", 
+        // Checked state
+        "checked:border-blue-600 checked:bg-blue-600", 
+        // Smooth transition
+        "transition-all duration-150 ease-in-out", 
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50", className) }, props)));
+});
+RadioButton.displayName = "RadioButton";
+export { RadioButton };

package/dist/src/components/RadioButton/radio-button.jsx

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// components/ui/radio-button.tsx
+import * as React from "react";
+import { cn } from "../../lib/utils";
+var RadioButton = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<input ref={ref} type="radio" className={cn(
+        // Size and shape
+        "size-4 shrink-0 rounded-full border", 
+        // Unchecked state
+        "border-gray-400", 
+        // Checked state
+        "checked:border-blue-600 checked:bg-blue-600", 
+        // Smooth transition
+        "transition-all duration-150 ease-in-out", 
+        // Disabled state
+        "disabled:cursor-not-allowed disabled:opacity-50", className)} {...props}/>);
+});
+RadioButton.displayName = "RadioButton";
+export { RadioButton };