@nithish_atum/atum 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -1,14 +1,78 @@
-// src/components/Button.tsx
+// src/components/Box.tsx
 import styled, { css } from "styled-components";
 import { jsx } from "react/jsx-runtime";
 var baseStyle = 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: css`
+    transition: none;
+  `,
+  elevated: css`
+    transition: box-shadow 300ms ease;
+    &:hover {
+      box-shadow: rgba(36, 40, 45, 0.2) 0px 8px 24px;
+    }
+  `
+};
+var justifyStyles = {
+  row: css`
+    flex-direction: row;
+  `,
+  col: css`
+    flex-direction: column;
+  `
+};
+var gapStyles = {
+  xs: css`
+    gap: 0.5em;
+  `,
+  sm: css`
+    gap: 1em;
+  `,
+  md: css`
+    gap: 1.5em;
+  `,
+  lg: css`
+    gap: 2.5em;
+  `
+};
+var CustomDiv = styled.div`
+  ${baseStyle}
+  ${({ $flex, $gap, $variant }) => css`
+    ${justifyStyles[$flex]}
+    ${gapStyles[$gap]}
+    ${variantStyles[$variant]}
+  `}
+`;
+var Box = ({
+  flex = "row",
+  gap = "xs",
+  variant = "default",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(CustomDiv, { $flex: flex, $gap: gap, $variant: variant, ...rest, children });
+};
+var Box_default = Box;
+
+// src/components/Button.tsx
+import styled2, { css as css2 } from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var baseStyle2 = css2`
   padding: 1em;
   cursor: pointer;
   font-weight: 600;
   transistion: all 900ms;
 `;
-var variantStyles = {
-  primary_solid: css`
+var variantStyles2 = {
+  primary_solid: css2`
     background-color: #2d8eff;
     color: white;
     border: 1px solid #2d8eff;
@@ -23,12 +87,12 @@ var variantStyles = {
     // letter-spacing: 4px;
 //}
   `,
-  primary_outline: css`
+  primary_outline: css2`
     background-color: transparent;
     color: #2d8eff;
     border: 1px solid #2d8eff;
   `,
-  primary_text: css`
+  primary_text: css2`
     background-color: transparent;
     color: #2d8eff;
     border: none;
@@ -39,8 +103,1155 @@ var variantStyles = {
     // }
   `
 };
-var StyledButton = styled.button`
-  ${baseStyle}
-  ${({ $variant }) => variantStyles[$variant]}
+var StyledButton = styled2.button`
+  ${baseStyle2}
+  ${({ $variant }) => variantStyles2[$variant]}
+`;
+var Button = ({
+  variant = "primary_solid",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx2(StyledButton, { $variant: variant, ...rest, children });
+};
+var Button_default = Button;
+
+// src/components/Card.tsx
+import styled3, { css as css3 } from "styled-components";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var baseStyle3 = css3`
+  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: css3`
+    flex-direction: row;
+  `,
+  col: css3`
+    flex-direction: column;
+  `
+};
+var gapStyles2 = {
+  xs: css3`
+    gap: 0.5em;
+  `,
+  sm: css3`
+    gap: 1em;
+  `,
+  md: css3`
+    gap: 1.5em;
+  `,
+  lg: css3`
+    gap: 2.5em;
+  `
+};
+var CustomDiv2 = styled3.div`
+  ${baseStyle3}
+  ${({ $direction, $gap }) => css3`
+    ${justifyStyles2[$direction]}
+    ${gapStyles2[$gap]}
+  `}
+`;
+var Card = ({
+  direction = "col",
+  gap = "xs",
+  Imagealt = "card-image",
+  Imageurl = "",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx3(CustomDiv2, { $direction: direction, $gap: gap, ...rest, children: Imageurl.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3("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
+import { useEffect, useRef } from "react";
+import styled4, { css as css4 } from "styled-components";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Wrapper = styled4.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+`;
+var HiddenInput = styled4.input.attrs({ type: "checkbox" })`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+var boxBase = css4`
+  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 = styled4.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 = styled4.span`
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 2px;
+`;
+var Checkbox = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs2(Wrapper, { children: [
+    /* @__PURE__ */ jsx4(
+      HiddenInput,
+      {
+        ref: inputRef,
+        checked,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx4(Box2, { $checked: checked || indeterminate, $disabled: disabled, children: (checked || indeterminate) && /* @__PURE__ */ jsx4(CheckMark, {}) }),
+    label && /* @__PURE__ */ jsx4("span", { children: label })
+  ] });
+};
+var Checkbox_default = Checkbox;
+
+// src/components/DatePicker.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import styled5 from "styled-components";
+import { createPortal } from "react-dom";
+import { jsx as jsx5, jsxs as jsxs3 } from "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 = styled5.div`
+  position: relative;
+  width: 100%;
+`;
+var InputBox = styled5.div`
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  background: #fff;
 `;
+var Panel = styled5.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 = styled5.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+`;
+var Grid = styled5.div`
+  display: grid;
+  grid-template-columns: repeat(7, 32px);
+  gap: 4px;
+`;
+var Day = styled5.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] = useState(false);
+  const [current, setCurrent] = useState(
+    value || /* @__PURE__ */ new Date()
+  );
+  const ref = useRef2(null);
+  useEffect2(() => {
+    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__ */ jsxs3(Wrapper2, { ref, children: [
+    /* @__PURE__ */ jsx5(InputBox, { onClick: () => setOpen(!open), children: value ? formatDate(value) : placeholder }),
+    open && createPortal(
+      /* @__PURE__ */ jsxs3(Panel, { children: [
+        /* @__PURE__ */ jsxs3(Header, { children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => setCurrent(
+                new Date(year, month - 1, 1)
+              ),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ jsxs3("strong", { children: [
+            current.toLocaleString("default", {
+              month: "long"
+            }),
+            " ",
+            year
+          ] }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => setCurrent(
+                new Date(year, month + 1, 1)
+              ),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(Grid, { children: days.map((d) => /* @__PURE__ */ jsx5(
+          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
+import styled6, { css as css5 } from "styled-components";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var baseStyle4 = css5`
+  background-color: rgba(0, 0, 0, 0.12);
+  flex-shrink: 0;
+`;
+var orientationStyles = {
+  horizontal: css5`
+    width: 100%;
+    height: 1px;
+  `,
+  vertical: css5`
+    height: 100%;
+    width: 1px;
+  `
+};
+var sizeStyles = {
+  thin: css5`
+    opacity: 0.6;
+  `,
+  medium: css5`
+    opacity: 1;
+  `
+};
+var gapStyles3 = {
+  xs: css5`
+    margin: 0.5rem 0;
+  `,
+  sm: css5`
+    margin: 1rem 0;
+  `,
+  md: css5`
+    margin: 2rem 0;
+  `,
+  lg: css5`
+    margin: 3rem 0;
+  `
+};
+var StyledDivider = styled6.div`
+  ${baseStyle4}
+  ${({ $orientation }) => orientationStyles[$orientation]}
+  ${({ $size }) => sizeStyles[$size]}
+  ${({ $gap, $orientation }) => $orientation === "horizontal" ? gapStyles3[$gap] : css5`
+          margin: 0 ${gapStyles3[$gap].styles?.margin?.split(" ")[0] || "1rem"};
+        `}
+`;
+var Divider = ({
+  orientation = "horizontal",
+  size = "thin",
+  gap = "sm",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx6(
+    StyledDivider,
+    {
+      role: "separator",
+      $orientation: orientation,
+      $size: size,
+      $gap: gap,
+      ...rest
+    }
+  );
+};
+var Divider_default = Divider;
+
+// src/components/Drawer.tsx
+import { useEffect as useEffect3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import styled7, { css as css6 } from "styled-components";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var Overlay = styled7.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1000;
+`;
+var baseDrawer = css6`
+  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: css6`
+    top: 0;
+    right: 0;
+    height: 100%;
+  `,
+  left: css6`
+    top: 0;
+    left: 0;
+    height: 100%;
+  `,
+  bottom: css6`
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  `
+};
+var DrawerContainer = styled7.div`
+  ${baseDrawer}
+  ${({ $placement }) => placementStyles[$placement]}
+
+  ${({ $placement, $width }) => ($placement === "left" || $placement === "right") && css6`
+      width: ${typeof $width === "number" ? `${$width}px` : $width || "360px"};
+    `}
+
+  ${({ $placement, $height }) => $placement === "bottom" && css6`
+      height: ${typeof $height === "number" ? `${$height}px` : $height || "320px"};
+    `}
+`;
+var Header2 = styled7.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.75rem;
+  border-bottom: 1px solid #eee;
+`;
+var CloseButton = styled7.button`
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  cursor: pointer;
+`;
+var Drawer = ({
+  open,
+  onClose,
+  placement = "right",
+  width,
+  height,
+  children
+}) => {
+  useEffect3(() => {
+    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 createPortal2(
+    /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx7(Overlay, { onClick: onClose }),
+      /* @__PURE__ */ jsxs4(
+        DrawerContainer,
+        {
+          $placement: placement,
+          $width: width,
+          $height: height,
+          children: [
+            /* @__PURE__ */ jsx7(Header2, { children: /* @__PURE__ */ jsx7(CloseButton, { onClick: onClose, children: "\xD7" }) }),
+            children
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var Drawer_default = Drawer;
+
+// src/components/Flex.tsx
+import styled8, { css as css7 } from "styled-components";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var baseStyle5 = css7`
+  width: 100%;
+  height: 100%;
+  display: flex;
+`;
+var FlexDirectionStyle = {
+  row: css7`
+    flex-direction: row;
+  `,
+  col: css7`
+    flex-direction: column;
+  `
+};
+var JustifyStyle = {
+  center: css7`
+    justify-content: center;
+  `,
+  between: css7`
+    justify-content: space-between;
+  `,
+  around: css7`
+    justify-content: space-around;
+  `,
+  start: css7`
+    justify-content: flex-start;
+  `,
+  end: css7`
+    justify-content: flex-end;
+  `,
+  even: css7`
+    justify-content: space-evenly;
+  `
+};
+var AlignStyle = {
+  center: css7`
+    align-items: center;
+  `,
+  between: css7`
+    align-items: space-between;
+  `,
+  around: css7`
+    align-items: space-around;
+  `,
+  start: css7`
+    align-items: flex-start;
+  `,
+  end: css7`
+    align-items: flex-end;
+  `,
+  even: css7`
+    align-items: space-evenly;
+  `
+};
+var GapStyle = {
+  small: css7`
+    gap: 1em;
+  `,
+  medium: css7`
+    gap: 2em;
+  `,
+  large: css7`
+    gap: 3em;
+  `
+};
+var StyledDiv = styled8.div`
+  ${baseStyle5}
+  ${({ $flexDirection, $gap, $justify, $align }) => css7`
+    ${FlexDirectionStyle[$flexDirection]}
+    ${GapStyle[$gap]}
+    ${AlignStyle[$align]}
+    ${JustifyStyle[$justify]}
+  `}
+`;
+var Flex = ({
+  gap = "small",
+  justify = "center",
+  align = "center",
+  flexDirection = "col",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx8(StyledDiv, { $gap: gap, $justify: justify, $align: align, $flexDirection: flexDirection, ...rest, children });
+};
+var Flex_default = Flex;
+
+// src/components/Form.tsx
+import styled9 from "styled-components";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var StyledForm = styled9.form`
+  width: 100%;
+`;
+var Form = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx9(StyledForm, { ...rest, children });
+};
+var Form_default = Form;
+
+// src/components/FormControl.tsx
+import styled10 from "styled-components";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var Wrapper3 = styled10.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+`;
+var Label = styled10.label`
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: ${({ $error }) => $error ? "#e53935" : "inherit"};
+`;
+var RequiredMark = styled10.span`
+  color: #e53935;
+  margin-left: 0.25rem;
+`;
+var Helper = styled10.span`
+  font-size: 0.75rem;
+  color: #666;
+`;
+var ErrorText = styled10.span`
+  font-size: 0.75rem;
+  color: #e53935;
+`;
+var FormControl = ({
+  label,
+  error,
+  helperText,
+  required = false,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs5(Wrapper3, { children: [
+    label && /* @__PURE__ */ jsxs5(Label, { $error: !!error, children: [
+      label,
+      required && /* @__PURE__ */ jsx10(RequiredMark, { children: "*" })
+    ] }),
+    children,
+    error ? /* @__PURE__ */ jsx10(ErrorText, { children: error }) : helperText && /* @__PURE__ */ jsx10(Helper, { children: helperText })
+  ] });
+};
+var FormControl_default = FormControl;
+
+// src/components/Heading.tsx
+import styled11, { css as css9 } from "styled-components";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var levelStyles = {
+  1: css9`font-size: 2rem;`,
+  2: css9`font-size: 1.75rem;`,
+  3: css9`font-size: 1.5rem;`,
+  4: css9`font-size: 1.25rem;`,
+  5: css9`font-size: 1.1rem;`,
+  6: css9`font-size: 1rem;`
+};
+var Base = styled11.div`
+  margin: 0;
+  font-weight: 600;
+  ${({ $level }) => levelStyles[$level]}
+`;
+var Heading = ({
+  level = 1,
+  children,
+  ...rest
+}) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx11(
+    Base,
+    {
+      as: Tag,
+      $level: level,
+      ...rest,
+      children
+    }
+  );
+};
+var Heading_default = Heading;
+
+// src/components/Input.tsx
+import styled12, { css as css10 } from "styled-components";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var sizeStyles2 = {
+  xs: css10`padding: 0.25rem 0.5rem; font-size: 0.75rem;`,
+  sm: css10`padding: 0.4rem 0.6rem; font-size: 0.875rem;`,
+  md: css10`padding: 0.5rem 0.75rem; font-size: 1rem;`,
+  lg: css10`padding: 0.65rem 0.9rem; font-size: 1.1rem;`
+};
+var StyledInput = styled12.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__ */ jsx12(
+    StyledInput,
+    {
+      $inputSize: inputSize,
+      $state: state,
+      ...rest
+    }
+  );
+};
+var Input_default = Input;
+
+// src/components/Link.tsx
+import styled13, { css as css11 } from "styled-components";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var baseStyle6 = css11`
+  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: css11`
+    opacity: 1;
+  `,
+  muted: css11`
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  `
+};
+var StyledLink = styled13.a`
+  ${baseStyle6}
+  ${({ $variant }) => variantStyles3[$variant]}
+`;
+var Link = ({
+  variant = "default",
+  external = false,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx13(
+    StyledLink,
+    {
+      $variant: variant,
+      target: external ? "_blank" : rest.target,
+      rel: external ? "noopener noreferrer" : rest.rel,
+      ...rest,
+      children
+    }
+  );
+};
+var Link_default = Link;
+
+// src/components/Modal.tsx
+import { useEffect as useEffect4 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import styled14 from "styled-components";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Overlay2 = styled14.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 = styled14.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
+}) => {
+  useEffect4(() => {
+    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 createPortal3(
+    /* @__PURE__ */ jsx14(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsx14(Content, { onClick: (e) => e.stopPropagation(), children }) }),
+    document.body
+  );
+};
+var Modal_default = Modal;
+
+// src/components/Paragraph.tsx
+import styled15 from "styled-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var StyledParagraph = styled15.p`
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: inherit;
+`;
+var Paragraph = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx15(StyledParagraph, { ...rest, children });
+};
+var Paragraph_default = Paragraph;
+
+// src/components/Radio.tsx
+import styled16, { css as css12 } from "styled-components";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var Wrapper4 = styled16.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+`;
+var HiddenInput2 = styled16.input.attrs({ type: "radio" })`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+var circleBase = css12`
+  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 = styled16.span`
+  ${circleBase}
+  border-color: ${({ $checked }) => $checked ? "#2d8eff" : "#ccc"};
+  opacity: ${({ $disabled }) => $disabled ? 0.6 : 1};
+
+  ${Wrapper4}:hover & {
+    border-color: #2d8eff;
+  }
+`;
+var Dot = styled16.span`
+  width: 8px;
+  height: 8px;
+  background: #2d8eff;
+  border-radius: 50%;
+`;
+var Radio = ({
+  checked = false,
+  disabled = false,
+  label,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs6(Wrapper4, { children: [
+    /* @__PURE__ */ jsx16(
+      HiddenInput2,
+      {
+        checked,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx16(Circle, { $checked: checked, $disabled: disabled, children: checked && /* @__PURE__ */ jsx16(Dot, {}) }),
+    label && /* @__PURE__ */ jsx16("span", { children: label })
+  ] });
+};
+var Radio_default = Radio;
+
+// src/components/Select.tsx
+import React5, {
+  useEffect as useEffect5,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+import styled17 from "styled-components";
+import { createPortal as createPortal4 } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+var Option = () => null;
+Option.displayName = "SelectOption";
+var Trigger = styled17.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 = styled17.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 = styled17.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 = useRef3(null);
+  const [open, setOpen] = useState2(false);
+  const [pos, setPos] = useState2({ top: 0, left: 0 });
+  const childOptions = React5.Children.toArray(children).filter(
+    (child) => React5.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);
+  };
+  useEffect5(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx17(
+      Trigger,
+      {
+        ref,
+        onClick: openDropdown,
+        $size: selectSize,
+        $state: state,
+        ...rest,
+        children: selected
+      }
+    ),
+    open && createPortal4(
+      /* @__PURE__ */ jsx17(
+        Dropdown,
+        {
+          style: {
+            top: pos.top,
+            left: pos.left
+          },
+          children: finalOptions.map((opt) => /* @__PURE__ */ jsx17(
+            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
+import styled18, { css as css13 } from "styled-components";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var Wrapper5 = styled18.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+`;
+var HiddenInput3 = styled18.input.attrs({ type: "checkbox" })`
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+`;
+var trackBase = css13`
+  width: 36px;
+  height: 20px;
+  border-radius: 999px;
+  background-color: #ccc;
+  position: relative;
+  transition: background-color 0.2s ease;
+`;
+var Track = styled18.span`
+  ${trackBase}
+  background-color: ${({ $checked }) => $checked ? "#2d8eff" : "#ccc"};
+  opacity: ${({ $disabled }) => $disabled ? 0.6 : 1};
+`;
+var Thumb = styled18.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__ */ jsxs8(Wrapper5, { children: [
+    /* @__PURE__ */ jsx18(
+      HiddenInput3,
+      {
+        checked,
+        disabled,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx18(Track, { $checked: checked, $disabled: disabled, children: /* @__PURE__ */ jsx18(Thumb, { $checked: checked }) }),
+    label && /* @__PURE__ */ jsx18("span", { children: label })
+  ] });
+};
+var Switch_default = Switch;
+
+// src/components/Text.tsx
+import styled19, { css as css14 } from "styled-components";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var baseStyle7 = css14`
+  font-size: 12px;
+`;
+var variantStyles4 = {
+  h1: css14`
+    font-size: 2em;
+    font-weight: bold;
+  `,
+  h2: css14`
+    font-size: 1.5em;
+    font-weight: bold;
+  `,
+  h3: css14`
+    font-size: 1.17em;
+    font-weight: bold;
+  `,
+  h4: css14`
+    font-size: 1em;
+    font-weight: bold;
+  `,
+  h5: css14`
+    font-size: 0.83em;
+    font-weight: bold;
+  `,
+  h6: css14`
+    font-size: 0.67em;
+    font-weight: bold;
+  `,
+  p: css14`
+    font-size: 0.875em;
+  `
+};
+var StyledButton2 = styled19.span`
+  ${baseStyle7}
+  ${({ $variant }) => variantStyles4[$variant]}
+`;
+var Text = ({
+  fontVariant = "p",
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx19(StyledButton2, { $variant: fontVariant, ...rest, children });
+};
+var Text_default = Text;
+
+// src/components/Textarea.tsx
+import styled20, { css as css15 } from "styled-components";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var baseStyle8 = css15`
+  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: css15`
+    padding: 0.4rem 0.6rem;
+    font-size: 0.875rem;
+    min-height: 80px;
+  `,
+  md: css15`
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    min-height: 120px;
+  `,
+  lg: css15`
+    padding: 0.65rem 0.9rem;
+    font-size: 1.125rem;
+    min-height: 160px;
+  `
+};
+var stateStyles = {
+  default: css15``,
+  error: css15`
+    border-color: #e53935;
+
+    &:focus {
+      border-color: #e53935;
+      box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.2);
+    }
+  `
+};
+var StyledTextarea = styled20.textarea`
+  ${baseStyle8}
+  ${({ $size }) => sizeStyles3[$size]}
+  ${({ $state }) => stateStyles[$state]}
+`;
+var Textarea = ({
+  size = "md",
+  state = "default",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx20(StyledTextarea, { $size: size, $state: state, ...rest });
+};
+var Textarea_default = Textarea;
+export {
+  Box_default as Box,
+  Button_default as Button,
+  Card_default as Card,
+  Checkbox_default as Checkbox,
+  DatePicker_default as DatePicker,
+  Divider_default as Divider,
+  Drawer_default as Drawer,
+  Flex_default as Flex,
+  Form_default as Form,
+  FormControl_default as FormControl,
+  Heading_default as Heading,
+  Input_default as Input,
+  Link_default as Link,
+  Modal_default as Modal,
+  Paragraph_default as Paragraph,
+  Radio_default as Radio,
+  Select_default as Select,
+  Switch_default as Switch,
+  Text_default as Text,
+  Textarea_default as Textarea
+};
 //# sourceMappingURL=index.mjs.map