@grantbii/design-system 1.0.40 → 1.0.42

package/core/atoms/RadioButton.d.ts

@@ -0,0 +1,6 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+type RadioButtonProps = {
+    label: string;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare const RadioButton: ({ label, id, ...radioButtonProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButton;

package/core/atoms/RadioButton.js

@@ -0,0 +1,22 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+const RadioButton = (_a) => {
+    var { label, id } = _a, radioButtonProps = __rest(_a, ["label", "id"]);
+    return (_jsxs(BaseRadioButton, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: id, type: "radio" })), _jsx("label", { htmlFor: id, children: label })] }));
+};
+export default RadioButton;
+const BaseRadioButton = styled.div `
+  display: flex;
+  gap: 8px;
+`;

package/core/atoms/index.d.ts

@@ -2,3 +2,4 @@ export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as LinkButton } from "./LinkButton";
+export { default as RadioButton } from "./RadioButton";

package/core/atoms/index.js

@@ -2,3 +2,4 @@ export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as LinkButton } from "./LinkButton";
+export { default as RadioButton } from "./RadioButton";

package/core/foundations/index.d.ts

@@ -2,3 +2,4 @@ export * as Icons from "@phosphor-icons/react";
 export * as Flags from "country-flag-icons/react/3x2";
 export * as Breakpoints from "./breakpoints";
 export * as Colors from "./colors";
+export type * from "./types";

package/core/foundations/types.d.ts

@@ -0,0 +1,4 @@
+export type Option = {
+    label: string;
+    value: string;
+};

package/core/foundations/types.js

@@ -0,0 +1 @@
+export {};

package/core/molecules/Modal.js

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import styled from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
-const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { children: content }) }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
+const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { children: content }) }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
 export default Modal;
 export const useModal = () => {
     const [showModal, setShowModal] = useState(false);
@@ -30,7 +30,7 @@ export const useModal = () => {
 const Overlay = styled.div `
   background-color: ${Colors.semantic.overlay};
 
-  z-index: ${Number.MAX_SAFE_INTEGER};
+  z-index: ${({ $isFullScreen }) => $isFullScreen ? Number.MAX_SAFE_INTEGER - 1 : Number.MAX_SAFE_INTEGER};
   position: fixed;
   top: 0px;
   left: 0px;

package/core/molecules/RadioButtons.d.ts

@@ -0,0 +1,9 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { Option } from "../foundations";
+type RadioOption = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+type RadioButtonProps = {
+    name: string;
+    options: RadioOption[];
+};
+declare const RadioButtons: ({ name, options }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButtons;

package/core/molecules/RadioButtons.js

@@ -0,0 +1,26 @@
+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 { createElement as _createElement } from "react";
+import styled from "styled-components";
+import { RadioButton } from "../atoms";
+const RadioButtons = ({ name, options }) => {
+    return (_jsx(RadioGroup, { children: options.map((_a) => {
+            var { value } = _a, props = __rest(_a, ["value"]);
+            return (_createElement(RadioButton, Object.assign({}, props, { key: `${value}-radio-button`, id: `${value}-radio-button`, value: value, name: name })));
+        }) }));
+};
+export default RadioButtons;
+const RadioGroup = styled.div `
+  display: flex;
+  gap: 12px;
+`;

package/core/molecules/index.d.ts

@@ -1 +1,2 @@
 export { default as Modal, useModal } from "./Modal";
+export { default as RadioButtons } from "./RadioButtons";

package/core/molecules/index.js

@@ -1 +1,2 @@
 export { default as Modal, useModal } from "./Modal";
+export { default as RadioButtons } from "./RadioButtons";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/atoms/Badge.stories.d.ts

@@ -1,6 +1,5 @@
 import { Badge } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Badge>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/atoms/BrandLogo.stories.d.ts

@@ -1,6 +1,5 @@
 import { BrandLogo } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof BrandLogo>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/atoms/Button.stories.d.ts

@@ -1,6 +1,5 @@
 import { Button } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/atoms/LinkButton.stories.d.ts

@@ -1,6 +1,5 @@
 import { LinkButton } from "@/.";
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof LinkButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/molecules/Modal.stories.d.ts

@@ -1,5 +1,4 @@
-import type { StoryObj } from "@storybook/nextjs-vite";
-import { Meta } from "@storybook/nextjs-vite";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { ReactNode } from "react";
 type ModalExampleProps = {
     header?: ReactNode;

package/stories/molecules/RadioButtons.stories.d.ts

@@ -0,0 +1,6 @@
+import { RadioButtons } from "@/core/molecules";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof RadioButtons>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TextOnly: Story;

package/stories/molecules/RadioButtons.stories.js

@@ -0,0 +1,27 @@
+import { RadioButtons } from "@/core/molecules";
+const meta = {
+    title: "Molecules/Radio Buttons",
+    component: RadioButtons,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const TextOnly = {
+    args: {
+        name: "location ",
+        options: [
+            {
+                label: "Singapore",
+                value: "Singapore",
+                onChange: () => alert("Selected Singapore!"),
+            },
+            {
+                label: "Hong Kong",
+                value: "Hong Kong",
+                onChange: () => alert("Selected Hong Kong!"),
+            },
+        ],
+    },
+};