@grantbii/design-system 1.0.48 → 1.0.49

package/core/atoms/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+type CheckboxProps = {
+    label: string;
+    labelBefore?: boolean;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare const Checkbox: ({ id, label, labelBefore, ...checkboxProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/core/atoms/Checkbox.js

@@ -0,0 +1,18 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LabelInput } from "./shared";
+const Checkbox = (_a) => {
+    var { id, label, labelBefore = false } = _a, checkboxProps = __rest(_a, ["id", "label", "labelBefore"]);
+    return (_jsxs(LabelInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", Object.assign({}, checkboxProps, { id: `${id}-checkbox`, type: "checkbox" })), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
+};
+export default Checkbox;

package/core/atoms/RadioButton.d.ts

@@ -2,5 +2,5 @@ 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;
+declare const RadioButton: ({ id, label, ...radioButtonProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default RadioButton;

package/core/atoms/RadioButton.js

@@ -10,13 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
+import { LabelInput } from "./shared";
 const RadioButton = (_a) => {
-    var { label, id } = _a, radioButtonProps = __rest(_a, ["label", "id"]);
-    return (_jsxs(BaseRadioButton, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
+    var { id, label } = _a, radioButtonProps = __rest(_a, ["id", "label"]);
+    return (_jsxs(LabelInput, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
 };
 export default RadioButton;
-const BaseRadioButton = styled.div `
-  display: flex;
-  gap: 8px;
-`;

package/core/atoms/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
+export { default as Checkbox } from "./Checkbox";
 export { default as LinkButton } from "./LinkButton";
 export { default as RadioButton } from "./RadioButton";
 export { default as Textarea } from "./Textarea";

package/core/atoms/index.js

@@ -1,6 +1,7 @@
 export { default as Badge } from "./Badge";
 export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
+export { default as Checkbox } from "./Checkbox";
 export { default as LinkButton } from "./LinkButton";
 export { default as RadioButton } from "./RadioButton";
 export { default as Textarea } from "./Textarea";

package/core/atoms/shared.d.ts

@@ -3,3 +3,4 @@ export declare const BaseButton: import("styled-components/dist/types").IStyledC
     $backgroundColor?: string;
     $color?: string;
 }>> & string;
+export declare const LabelInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/atoms/shared.js

@@ -17,3 +17,8 @@ export const BaseButton = styled.div `
   color: ${({ $color = Colors.typography.whiteHigh }) => $color};
   background-color: ${({ $underline = false, $backgroundColor = Colors.main.grantbiiBlue, }) => ($underline ? "transparent" : $backgroundColor)};
 `;
+export const LabelInput = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;

package/core/molecules/RadioButtons.js

@@ -22,5 +22,6 @@ const RadioButtons = ({ name, options }) => {
 export default RadioButtons;
 const RadioGroup = styled.div `
   display: flex;
+  align-items: center;
   gap: 12px;
 `;

package/package.json

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

package/stories/atoms/Checkbox.stories.d.ts

@@ -0,0 +1,7 @@
+import { Checkbox } from "@/.";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LabelBefore: Story;
+export declare const LabelAfter: Story;

package/stories/atoms/Checkbox.stories.js

@@ -0,0 +1,23 @@
+import { Checkbox } from "@/.";
+const meta = {
+    title: "Atoms/Checkbox",
+    component: Checkbox,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const label = "Grantbii is the best";
+export const LabelBefore = {
+    args: {
+        label,
+        labelBefore: true,
+    },
+};
+export const LabelAfter = {
+    args: {
+        label,
+        labelBefore: false,
+    },
+};