@nithish_atum/atum 1.0.0 → 1.0.3

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,27 +17,1293 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.tsx
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Button: () => Button
+  Box: () => Box_default,
+  Button: () => Button_default,
+  Card: () => Card_default,
+  Checkbox: () => Checkbox_default,
+  DatePicker: () => DatePicker_default,
+  Divider: () => Divider_default,
+  Drawer: () => Drawer_default,
+  Flex: () => Flex_default,
+  Form: () => Form_default,
+  FormControl: () => FormControl_default,
+  Heading: () => Heading_default,
+  Input: () => Input_default,
+  Link: () => Link_default,
+  Modal: () => Modal_default,
+  Paragraph: () => Paragraph_default,
+  Radio: () => Radio_default,
+  Select: () => Select_default,
+  Switch: () => Switch_default,
+  Text: () => Text_default,
+  Textarea: () => Textarea_default
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button.tsx
+// src/components/Box.tsx
+var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = ({ variant = "solid", children, ...rest }) => {
-  const style = {
-    solid: { backgroundColor: "#000", color: "#fff" },
-    outline: { border: "1px solid #000", color: "#000", background: "none" },
-    ghost: { background: "transparent", color: "#000" }
+var baseStyle = import_styled_components.css`
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  height: fit-content;
+  padding: 1em 1em;
+  border: 1px solid lightgray;
+  justify-self: center;
+`;
+var variantStyles = {
+  default: import_styled_components.css`
+    transition: none;
+  `,
+  elevated: import_styled_components.css`
+    transition: box-shadow 300ms ease;
+    &:hover {
+      box-shadow: rgba(36, 40, 45, 0.2) 0px 8px 24px;
+    }
+  `
+};
+var justifyStyles = {
+  row: import_styled_components.css`
+    flex-direction: row;
+  `,
+  col: import_styled_components.css`
+    flex-direction: column;
+  `
+};
+var gapStyles = {
+  xs: import_styled_components.css`
+    gap: 0.5em;
+  `,
+  sm: import_styled_components.css`
+    gap: 1em;
+  `,
+  md: import_styled_components.css`
+    gap: 1.5em;
+  `,
+  lg: import_styled_components.css`
+    gap: 2.5em;
+  `
+};
+var CustomDiv = import_styled_components.default.div`
+  ${baseStyle}
+  ${({ $flex, $gap, $variant }) => import_styled_components.css`
+    ${justifyStyles[$flex]}
+    ${gapStyles[$gap]}
+    ${variantStyles[$variant]}
+  `}
+`;
+var Box = ({
+  flex = "row",
+  gap = "xs",
+  variant = "default",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomDiv, { $flex: flex, $gap: gap, $variant: variant, ...rest, children });
+};
+var Box_default = Box;
+
+// src/components/Button.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var baseStyle2 = import_styled_components2.css`
+  padding: 1em;
+  cursor: pointer;
+  font-weight: 600;
+  transistion: all 900ms;
+`;
+var variantStyles2 = {
+  primary_solid: import_styled_components2.css`
+    background-color: #2d8eff;
+    color: white;
+    border: 1px solid #2d8eff;
+    transition: all 0.6s ease;
+    // &:hover {
+    // color: #fff;
+    // border-right: none;
+    // border-left: none;
+    // border-top: 2px solid #fff;
+    // border-bottom: 2px solid #fff;
+    // background-color:rgba(144, 167, 194, 0);
+    // letter-spacing: 4px;
+//}
+  `,
+  primary_outline: import_styled_components2.css`
+    background-color: transparent;
+    color: #2d8eff;
+    border: 1px solid #2d8eff;
+  `,
+  primary_text: import_styled_components2.css`
+    background-color: transparent;
+    color: #2d8eff;
+    border: none;
+    transition: all 0.9s ease;
+    // &:hover{
+    //  background-color: #2d8eff;
+    //  color: #fff;
+    // }
+  `
+};
+var StyledButton = import_styled_components2.default.button`
+  ${baseStyle2}
+  ${({ $variant }) => variantStyles2[$variant]}
+`;
+var Button = ({
+  variant = "primary_solid",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledButton, { $variant: variant, ...rest, children });
+};
+var Button_default = Button;
+
+// src/components/Card.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var baseStyle3 = import_styled_components3.css`
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+  height: fit-content;
+  background-color: rgb(255, 255, 255);
+  padding: 1em 1em;
+  border-radius: 0.8em;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+  transition: all 0.9s ease;
+  &:hover {
+    box-shadow: rgba(36, 40, 45, 0.2) 0px 8px 24px;
+  }
+`;
+var justifyStyles2 = {
+  row: import_styled_components3.css`
+    flex-direction: row;
+  `,
+  col: import_styled_components3.css`
+    flex-direction: column;
+  `
+};
+var gapStyles2 = {
+  xs: import_styled_components3.css`
+    gap: 0.5em;
+  `,
+  sm: import_styled_components3.css`
+    gap: 1em;
+  `,
+  md: import_styled_components3.css`
+    gap: 1.5em;
+  `,
+  lg: import_styled_components3.css`
+    gap: 2.5em;
+  `
+};
+var CustomDiv2 = import_styled_components3.default.div`
+  ${baseStyle3}
+  ${({ $direction, $gap }) => import_styled_components3.css`
+    ${justifyStyles2[$direction]}
+    ${gapStyles2[$gap]}
+  `}
+`;
+var Card = ({
+  direction = "col",
+  gap = "xs",
+  Imagealt = "card-image",
+  Imageurl = "",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomDiv2, { $direction: direction, $gap: gap, ...rest, children: Imageurl.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+      width: "100%",
+      height: "200px",
+      backgroundImage: `url(${Imageurl})`,
+      backgroundPosition: "center",
+      backgroundSize: "cover",
+      borderRadius: "12px",
+      border: "1px solid #f1f1f1"
+    } }),
+    children
+  ] }) : children });
+};
+var Card_default = Card;
+
+// src/components/Checkbox.tsx
+var import_react = require("react");
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Wrapper = import_styled_components4.default.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+`;
+var HiddenInput = import_styled_components4.default.input.attrs({ type: "checkbox" })`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+var boxBase = import_styled_components4.css`
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+`;
+var Box2 = import_styled_components4.default.span`
+  ${boxBase}
+  background-color: ${({ $checked }) => $checked ? "#2d8eff" : "#fff"};
+  border-color: ${({ $checked }) => $checked ? "#2d8eff" : "#ccc"};
+  opacity: ${({ $disabled }) => $disabled ? 0.6 : 1};
+
+  ${Wrapper}:hover & {
+    border-color: #2d8eff;
+  }
+`;
+var CheckMark = import_styled_components4.default.span`
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 2px;
+`;
+var Checkbox = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  const inputRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Wrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      HiddenInput,
+      {
+        ref: inputRef,
+        checked,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box2, { $checked: checked || indeterminate, $disabled: disabled, children: (checked || indeterminate) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckMark, {}) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label })
+  ] });
+};
+var Checkbox_default = Checkbox;
+
+// src/components/DatePicker.tsx
+var import_react2 = require("react");
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_react_dom = require("react-dom");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var formatDate = (date) => date.toISOString().split("T")[0];
+var Wrapper2 = import_styled_components5.default.div`
+  position: relative;
+  width: 100%;
+`;
+var InputBox = import_styled_components5.default.div`
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  background: #fff;
+`;
+var Panel = import_styled_components5.default.div`
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  background: white;
+  border-radius: 8px;
+  padding: 0.75rem;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+`;
+var Header = import_styled_components5.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+`;
+var Grid = import_styled_components5.default.div`
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 4px;
+`;
+var Day = import_styled_components5.default.div`
+  text-align: center;
+  padding: 0.35rem 0;
+  border-radius: 4px;
+  cursor: pointer;
+  background: ${({ $selected }) => $selected ? "#2d8eff" : "transparent"};
+  color: ${({ $selected }) => $selected ? "#fff" : "inherit"};
+
+  &:hover {
+    background: #f0f0f0;
+  }
+`;
+var DatePicker = ({
+  value,
+  onChange,
+  placeholder = "Select date"
+}) => {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [current, setCurrent] = (0, import_react2.useState)(
+    value || /* @__PURE__ */ new Date()
+  );
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  const year = current.getFullYear();
+  const month = current.getMonth();
+  const daysInMonth = getDaysInMonth(year, month);
+  const days = Array.from({ length: daysInMonth }, (_, i) => {
+    const date = new Date(year, month, i + 1);
+    return date;
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Wrapper2, { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InputBox, { onClick: () => setOpen(!open), children: value ? formatDate(value) : placeholder }),
+    open && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Panel, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Header, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              onClick: () => setCurrent(
+                new Date(year, month - 1, 1)
+              ),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("strong", { children: [
+            current.toLocaleString("default", {
+              month: "long"
+            }),
+            " ",
+            year
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              onClick: () => setCurrent(
+                new Date(year, month + 1, 1)
+              ),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Grid, { children: days.map((d) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Day,
+          {
+            $selected: value ? isSameDay(d, value) : false,
+            onClick: () => {
+              onChange?.(d);
+              setOpen(false);
+            },
+            children: d.getDate()
+          },
+          d.toISOString()
+        )) })
+      ] }),
+      document.body
+    )
+  ] });
+};
+var DatePicker_default = DatePicker;
+
+// src/components/Divider.tsx
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var baseStyle4 = import_styled_components6.css`
+  background-color: rgba(0, 0, 0, 0.12);
+  flex-shrink: 0;
+`;
+var orientationStyles = {
+  horizontal: import_styled_components6.css`
+    width: 100%;
+    height: 1px;
+  `,
+  vertical: import_styled_components6.css`
+    height: 100%;
+    width: 1px;
+  `
+};
+var sizeStyles = {
+  thin: import_styled_components6.css`
+    opacity: 0.6;
+  `,
+  medium: import_styled_components6.css`
+    opacity: 1;
+  `
+};
+var gapStyles3 = {
+  xs: import_styled_components6.css`
+    margin: 0.5rem 0;
+  `,
+  sm: import_styled_components6.css`
+    margin: 1rem 0;
+  `,
+  md: import_styled_components6.css`
+    margin: 2rem 0;
+  `,
+  lg: import_styled_components6.css`
+    margin: 3rem 0;
+  `
+};
+var StyledDivider = import_styled_components6.default.div`
+  ${baseStyle4}
+  ${({ $orientation }) => orientationStyles[$orientation]}
+  ${({ $size }) => sizeStyles[$size]}
+  ${({ $gap, $orientation }) => $orientation === "horizontal" ? gapStyles3[$gap] : import_styled_components6.css`
+          margin: 0 ${gapStyles3[$gap].styles?.margin?.split(" ")[0] || "1rem"};
+        `}
+`;
+var Divider = ({
+  orientation = "horizontal",
+  size = "thin",
+  gap = "sm",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    StyledDivider,
+    {
+      role: "separator",
+      $orientation: orientation,
+      $size: size,
+      $gap: gap,
+      ...rest
+    }
+  );
+};
+var Divider_default = Divider;
+
+// src/components/Drawer.tsx
+var import_react3 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Overlay = import_styled_components7.default.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1000;
+`;
+var baseDrawer = import_styled_components7.css`
+  position: fixed;
+  background: #fff;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+`;
+var placementStyles = {
+  right: import_styled_components7.css`
+    top: 0;
+    right: 0;
+    height: 100%;
+  `,
+  left: import_styled_components7.css`
+    top: 0;
+    left: 0;
+    height: 100%;
+  `,
+  bottom: import_styled_components7.css`
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  `
+};
+var DrawerContainer = import_styled_components7.default.div`
+  ${baseDrawer}
+  ${({ $placement }) => placementStyles[$placement]}
+
+  ${({ $placement, $width }) => ($placement === "left" || $placement === "right") && import_styled_components7.css`
+      width: ${typeof $width === "number" ? `${$width}px` : $width || "360px"};
+    `}
+
+  ${({ $placement, $height }) => $placement === "bottom" && import_styled_components7.css`
+      height: ${typeof $height === "number" ? `${$height}px` : $height || "320px"};
+    `}
+`;
+var Header2 = import_styled_components7.default.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.75rem;
+  border-bottom: 1px solid #eee;
+`;
+var CloseButton = import_styled_components7.default.button`
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+`;
+var Drawer = ({
+  open,
+  onClose,
+  placement = "right",
+  width,
+  height,
+  children
+}) => {
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Overlay, { onClick: onClose }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        DrawerContainer,
+        {
+          $placement: placement,
+          $width: width,
+          $height: height,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Header2, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseButton, { onClick: onClose, children: "\xD7" }) }),
+            children
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var Drawer_default = Drawer;
+
+// src/components/Flex.tsx
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var baseStyle5 = import_styled_components8.css`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+var FlexDirectionStyle = {
+  row: import_styled_components8.css`
+    flex-direction: row;
+  `,
+  col: import_styled_components8.css`
+    flex-direction: column;
+  `
+};
+var JustifyStyle = {
+  center: import_styled_components8.css`
+    justify-content: center;
+  `,
+  between: import_styled_components8.css`
+    justify-content: space-between;
+  `,
+  around: import_styled_components8.css`
+    justify-content: space-around;
+  `,
+  start: import_styled_components8.css`
+    justify-content: flex-start;
+  `,
+  end: import_styled_components8.css`
+    justify-content: flex-end;
+  `,
+  even: import_styled_components8.css`
+    justify-content: space-evenly;
+  `
+};
+var AlignStyle = {
+  center: import_styled_components8.css`
+    align-items: center;
+  `,
+  between: import_styled_components8.css`
+    align-items: space-between;
+  `,
+  around: import_styled_components8.css`
+    align-items: space-around;
+  `,
+  start: import_styled_components8.css`
+    align-items: flex-start;
+  `,
+  end: import_styled_components8.css`
+    align-items: flex-end;
+  `,
+  even: import_styled_components8.css`
+    align-items: space-evenly;
+  `
+};
+var GapStyle = {
+  small: import_styled_components8.css`
+    gap: 1em;
+  `,
+  medium: import_styled_components8.css`
+    gap: 2em;
+  `,
+  large: import_styled_components8.css`
+    gap: 3em;
+  `
+};
+var StyledDiv = import_styled_components8.default.div`
+  ${baseStyle5}
+  ${({ $flexDirection, $gap, $justify, $align }) => import_styled_components8.css`
+    ${FlexDirectionStyle[$flexDirection]}
+    ${GapStyle[$gap]}
+    ${AlignStyle[$align]}
+    ${JustifyStyle[$justify]}
+  `}
+`;
+var Flex = ({
+  gap = "small",
+  justify = "center",
+  align = "center",
+  flexDirection = "col",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledDiv, { $gap: gap, $justify: justify, $align: align, $flexDirection: flexDirection, ...rest, children });
+};
+var Flex_default = Flex;
+
+// src/components/Form.tsx
+var import_styled_components9 = __toESM(require("styled-components"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var StyledForm = import_styled_components9.default.form`
+  width: 100%;
+`;
+var Form = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledForm, { ...rest, children });
+};
+var Form_default = Form;
+
+// src/components/FormControl.tsx
+var import_styled_components10 = __toESM(require("styled-components"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components10.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+`;
+var Label = import_styled_components10.default.label`
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: ${({ $error }) => $error ? "#e53935" : "inherit"};
+`;
+var RequiredMark = import_styled_components10.default.span`
+  color: #e53935;
+  margin-left: 0.25rem;
+`;
+var Helper = import_styled_components10.default.span`
+  font-size: 0.75rem;
+  color: #666;
+`;
+var ErrorText = import_styled_components10.default.span`
+  font-size: 0.75rem;
+  color: #e53935;
+`;
+var FormControl = ({
+  label,
+  error,
+  helperText,
+  required = false,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Wrapper3, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Label, { $error: !!error, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RequiredMark, { children: "*" })
+    ] }),
+    children,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ErrorText, { children: error }) : helperText && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Helper, { children: helperText })
+  ] });
+};
+var FormControl_default = FormControl;
+
+// src/components/Heading.tsx
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var levelStyles = {
+  1: import_styled_components11.css`font-size: 2rem;`,
+  2: import_styled_components11.css`font-size: 1.75rem;`,
+  3: import_styled_components11.css`font-size: 1.5rem;`,
+  4: import_styled_components11.css`font-size: 1.25rem;`,
+  5: import_styled_components11.css`font-size: 1.1rem;`,
+  6: import_styled_components11.css`font-size: 1rem;`
+};
+var Base = import_styled_components11.default.div`
+  margin: 0;
+  font-weight: 600;
+  ${({ $level }) => levelStyles[$level]}
+`;
+var Heading = ({
+  level = 1,
+  children,
+  ...rest
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Base,
+    {
+      as: Tag,
+      $level: level,
+      ...rest,
+      children
+    }
+  );
+};
+var Heading_default = Heading;
+
+// src/components/Input.tsx
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var sizeStyles2 = {
+  xs: import_styled_components12.css`padding: 0.25rem 0.5rem; font-size: 0.75rem;`,
+  sm: import_styled_components12.css`padding: 0.4rem 0.6rem; font-size: 0.875rem;`,
+  md: import_styled_components12.css`padding: 0.5rem 0.75rem; font-size: 1rem;`,
+  lg: import_styled_components12.css`padding: 0.65rem 0.9rem; font-size: 1.1rem;`
+};
+var StyledInput = import_styled_components12.default.input`
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid
+    ${({ $state }) => $state === "error" ? "#e53935" : "#ccc"};
+  outline: none;
+
+  ${({ $inputSize }) => sizeStyles2[$inputSize]}
+
+  &:focus {
+    border-color: #2d8eff;
+  }
+`;
+var Input = ({
+  inputSize = "md",
+  state = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    StyledInput,
+    {
+      $inputSize: inputSize,
+      $state: state,
+      ...rest
+    }
+  );
+};
+var Input_default = Input;
+
+// src/components/Link.tsx
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var baseStyle6 = import_styled_components13.css`
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+
+  &:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+`;
+var variantStyles3 = {
+  default: import_styled_components13.css`
+    opacity: 1;
+  `,
+  muted: import_styled_components13.css`
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  `
+};
+var StyledLink = import_styled_components13.default.a`
+  ${baseStyle6}
+  ${({ $variant }) => variantStyles3[$variant]}
+`;
+var Link = ({
+  variant = "default",
+  external = false,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    StyledLink,
+    {
+      $variant: variant,
+      target: external ? "_blank" : rest.target,
+      rel: external ? "noopener noreferrer" : rest.rel,
+      ...rest,
+      children
+    }
+  );
+};
+var Link_default = Link;
+
+// src/components/Modal.tsx
+var import_react4 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Overlay2 = import_styled_components14.default.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+var Content = import_styled_components14.default.div`
+  background: #fff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 500px;
+  padding: 1.5rem;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+`;
+var Modal = ({
+  open,
+  onClose,
+  children
+}) => {
+  (0, import_react4.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Overlay2, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Content, { onClick: (e) => e.stopPropagation(), children }) }),
+    document.body
+  );
+};
+var Modal_default = Modal;
+
+// src/components/Paragraph.tsx
+var import_styled_components15 = __toESM(require("styled-components"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var StyledParagraph = import_styled_components15.default.p`
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: inherit;
+`;
+var Paragraph = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledParagraph, { ...rest, children });
+};
+var Paragraph_default = Paragraph;
+
+// src/components/Radio.tsx
+var import_styled_components16 = __toESM(require("styled-components"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Wrapper4 = import_styled_components16.default.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+`;
+var HiddenInput2 = import_styled_components16.default.input.attrs({ type: "radio" })`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+var circleBase = import_styled_components16.css`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+`;
+var Circle = import_styled_components16.default.span`
+  ${circleBase}
+  border-color: ${({ $checked }) => $checked ? "#2d8eff" : "#ccc"};
+  opacity: ${({ $disabled }) => $disabled ? 0.6 : 1};
+
+  ${Wrapper4}:hover & {
+    border-color: #2d8eff;
+  }
+`;
+var Dot = import_styled_components16.default.span`
+  width: 8px;
+  height: 8px;
+  background: #2d8eff;
+  border-radius: 50%;
+`;
+var Radio = ({
+  checked = false,
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Wrapper4, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      HiddenInput2,
+      {
+        checked,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Circle, { $checked: checked, $disabled: disabled, children: checked && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Dot, {}) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: label })
+  ] });
+};
+var Radio_default = Radio;
+
+// src/components/Select.tsx
+var import_react5 = __toESM(require("react"));
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_react_dom4 = require("react-dom");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Option = () => null;
+Option.displayName = "SelectOption";
+var Trigger = import_styled_components17.default.div`
+  border: 1px solid
+    ${({ $state }) => $state === "error" ? "#e53935" : "#ccc"};
+  border-radius: 6px;
+  padding: ${({ $size }) => $size === "sm" ? "0.4rem 0.6rem" : $size === "lg" ? "0.7rem 0.9rem" : "0.55rem 0.75rem"};
+  cursor: pointer;
+  background: #fff;
+`;
+var Dropdown = import_styled_components17.default.div`
+  position: fixed;
+  min-width: 200px;
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+  padding: 0.25rem;
+  z-index: 1000;
+`;
+var Item = import_styled_components17.default.div`
+  padding: 0.4rem 0.6rem;
+  border-radius: 4px;
+  cursor: pointer;
+  background: ${({ $active }) => $active ? "#2d8eff" : "transparent"};
+  color: ${({ $active }) => $active ? "#fff" : "inherit"};
+
+  &:hover {
+    background: ${({ $active }) => $active ? "#2d8eff" : "#f5f5f5"};
+  }
+`;
+var Select = ({
+  value,
+  placeholder = "Select",
+  options,
+  onChange,
+  selectSize = "md",
+  state = "default",
+  children,
+  ...rest
+}) => {
+  const ref = (0, import_react5.useRef)(null);
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [pos, setPos] = (0, import_react5.useState)({ top: 0, left: 0 });
+  const childOptions = import_react5.default.Children.toArray(children).filter(
+    (child) => import_react5.default.isValidElement(child) && child.type === Option
+  ).map((child) => ({
+    value: child.props.value,
+    label: child.props.children
+  }));
+  const finalOptions = options ?? childOptions;
+  const selected = finalOptions.find((o) => o.value === value)?.label ?? placeholder;
+  const openDropdown = () => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setPos({
+      top: rect.bottom + 6,
+      left: rect.left
+    });
+    setOpen(true);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { style: style[variant], ...rest, children });
+  (0, import_react5.useEffect)(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Trigger,
+      {
+        ref,
+        onClick: openDropdown,
+        $size: selectSize,
+        $state: state,
+        ...rest,
+        children: selected
+      }
+    ),
+    open && (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Dropdown,
+        {
+          style: {
+            top: pos.top,
+            left: pos.left
+          },
+          children: finalOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            Item,
+            {
+              $active: opt.value === value,
+              onClick: () => {
+                onChange?.(opt.value);
+                setOpen(false);
+              },
+              children: opt.label
+            },
+            opt.value
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+Select.Option = Option;
+var Select_default = Select;
+
+// src/components/Switch.tsx
+var import_styled_components18 = __toESM(require("styled-components"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Wrapper5 = import_styled_components18.default.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+`;
+var HiddenInput3 = import_styled_components18.default.input.attrs({ type: "checkbox" })`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+var trackBase = import_styled_components18.css`
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background-color: #ccc;
+  position: relative;
+  transition: background-color 0.2s ease;
+`;
+var Track = import_styled_components18.default.span`
+  ${trackBase}
+  background-color: ${({ $checked }) => $checked ? "#2d8eff" : "#ccc"};
+  opacity: ${({ $disabled }) => $disabled ? 0.6 : 1};
+`;
+var Thumb = import_styled_components18.default.span`
+  width: 16px;
+  height: 16px;
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s ease;
+
+  transform: ${({ $checked }) => $checked ? "translateX(16px)" : "translateX(0)"};
+`;
+var Switch = ({
+  checked = false,
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Wrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      HiddenInput3,
+      {
+        checked,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Track, { $checked: checked, $disabled: disabled, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Thumb, { $checked: checked }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label })
+  ] });
+};
+var Switch_default = Switch;
+
+// src/components/Text.tsx
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var baseStyle7 = import_styled_components19.css`
+  font-size: 12px;
+`;
+var variantStyles4 = {
+  h1: import_styled_components19.css`
+    font-size: 2em;
+    font-weight: bold;
+  `,
+  h2: import_styled_components19.css`
+    font-size: 1.5em;
+    font-weight: bold;
+  `,
+  h3: import_styled_components19.css`
+    font-size: 1.17em;
+    font-weight: bold;
+  `,
+  h4: import_styled_components19.css`
+    font-size: 1em;
+    font-weight: bold;
+  `,
+  h5: import_styled_components19.css`
+    font-size: 0.83em;
+    font-weight: bold;
+  `,
+  h6: import_styled_components19.css`
+    font-size: 0.67em;
+    font-weight: bold;
+  `,
+  p: import_styled_components19.css`
+    font-size: 0.875em;
+  `
+};
+var StyledButton2 = import_styled_components19.default.span`
+  ${baseStyle7}
+  ${({ $variant }) => variantStyles4[$variant]}
+`;
+var Text = ({
+  fontVariant = "p",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledButton2, { $variant: fontVariant, ...rest, children });
+};
+var Text_default = Text;
+
+// src/components/Textarea.tsx
+var import_styled_components20 = __toESM(require("styled-components"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var baseStyle8 = import_styled_components20.css`
+  width: 100%;
+  font-family: inherit;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+  color: inherit;
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &:focus {
+    border-color: #2d8eff;
+    box-shadow: 0 0 0 2px rgba(45, 142, 255, 0.2);
+  }
+
+  &:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+`;
+var sizeStyles3 = {
+  sm: import_styled_components20.css`
+    padding: 0.4rem 0.6rem;
+    font-size: 0.875rem;
+    min-height: 80px;
+  `,
+  md: import_styled_components20.css`
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    min-height: 120px;
+  `,
+  lg: import_styled_components20.css`
+    padding: 0.65rem 0.9rem;
+    font-size: 1.125rem;
+    min-height: 160px;
+  `
+};
+var stateStyles = {
+  default: import_styled_components20.css``,
+  error: import_styled_components20.css`
+    border-color: #e53935;
+
+    &:focus {
+      border-color: #e53935;
+      box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.2);
+    }
+  `
+};
+var StyledTextarea = import_styled_components20.default.textarea`
+  ${baseStyle8}
+  ${({ $size }) => sizeStyles3[$size]}
+  ${({ $state }) => stateStyles[$state]}
+`;
+var Textarea = ({
+  size = "md",
+  state = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledTextarea, { $size: size, $state: state, ...rest });
 };
+var Textarea_default = Textarea;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  DatePicker,
+  Divider,
+  Drawer,
+  Flex,
+  Form,
+  FormControl,
+  Heading,
+  Input,
+  Link,
+  Modal,
+  Paragraph,
+  Radio,
+  Select,
+  Switch,
+  Text,
+  Textarea
 });
 //# sourceMappingURL=index.js.map