atomsystem 0.1.47 → 0.1.48

package/app/templates/Checkbox/Checkbox.tsx

@@ -0,0 +1,55 @@
+"use client";
+import clsx from "clsx";
+import "./checkbox.css";
+
+export const Checkbox = ({
+  text,
+  onChange,
+  disabled,
+  required,
+  defaultChecked,
+}: {
+  text?: string;
+  className?: string;
+  onChange?: () => void;
+  disabled?: boolean;
+  required?: boolean;
+  defaultChecked?: boolean;
+}) => {
+  return (
+    <label className="checkbox-container gap-1.5">
+      <input
+        type="checkbox"
+        className="appearance-none hidden"
+        onChange={onChange}
+        disabled={disabled}
+        required={required}
+        defaultChecked={defaultChecked}
+      />
+      <span className="checkbox-box">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4"
+          viewBox="0 0 20 20"
+          strokeWidth="1"
+        >
+          <path
+            fillRule="evenodd"
+            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </span>
+      {text ? (
+        <span
+          className={clsx(
+            "text-text-standard text-nowrap select-none",
+            { "!text-text-disabled": disabled }
+          )}
+        >
+          {text}
+        </span>
+      ) : null}
+    </label>
+  );
+};

package/app/templates/Checkbox/checkbox.css

@@ -0,0 +1,38 @@
+.checkbox-container{
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+}
+
+.checkbox-box {
+  width: var(--spacing-small);
+  height: var(--spacing-small);  
+  border: 1px solid var(--color-border-standard);
+  border-radius: var(--radius-common);
+  background: var(--color-bg-input-standard);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.checkbox-box svg {
+    color: transparent;
+    fill: transparent;
+}
+
+input:checked + .checkbox-box {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+input:checked + .checkbox-box svg {
+    color: var(--color-text-active);
+    fill: var(--color-text-active);
+}
+
+input:disabled + .checkbox-box {
+    background: var(--color-bg-input-disabled);
+    cursor: not-allowed;
+}

package/app/templates/Input/Input.tsx

@@ -0,0 +1,29 @@
+"use client";
+import React from "react";
+import "./input.css";
+
+export const Input = ({
+  type = "text",
+  placeholder = "값을 입력해주세요",
+  readOnly,
+  disabled,
+  required,
+}: {
+  type?: string;
+  className?: string;
+  placeholder?: string;
+  readOnly?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+}) => {
+  return (
+      <input
+        className="input"
+        type={type}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+      />
+  );
+};

package/app/templates/Input/input.css

@@ -0,0 +1,24 @@
+.input{
+    background: var(--color-bg-input-standard);
+    border: 1px solid var(--color-border-standard);   
+    color: var(--color-text-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    border-radius: var(--radius-common);
+    outline: none;
+    width: 100%;
+}
+
+.input::placeholder{
+    color: var(--color-text-placeholder);
+}
+
+.input:focus{
+    border: 1px solid var(--color-border-active);   
+}
+
+.input:disabled{
+    background: var(--color-bg-input-disabled);
+    border: 1px solid var(--color-border-standard);   
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+}

package/app/templates/Label/Label.tsx

@@ -0,0 +1,22 @@
+"use client";
+import clsx from "clsx";
+
+export const Label = ({
+    label,
+    required,
+}: {
+    label: string;
+    required?: boolean;
+}) => {
+    return (
+        <p className={"mb-1 text-text-standard"}>  
+            <span
+                className={clsx("", {
+                    "after:content-['*'] after:ml-1 after:text-danger": required,
+                })}
+            >
+                {label}
+            </span>
+        </p>
+    );
+};

package/app/templates/Radio/Radio.tsx

@@ -0,0 +1,45 @@
+"use client";
+import clsx from "clsx";
+import "./radio.css";
+
+export const Radio = ({
+  name,
+  value,
+  label,
+  className,
+  onChange,
+  defaultChecked,
+  checked,
+}: {
+  name: string;
+  value: string;
+  label?: string;
+  className?: string;
+  onChange?: () => void;
+  defaultChecked?: boolean;
+  checked?: boolean;
+}) => {
+  return (
+    <>
+      {label ? <p>{label}</p> : null}
+      <label className="flex items-center gap-1 cursor-pointer">
+        <input
+          type="radio"
+          className={clsx(
+            "relative appearance-none radio rounded-full ",
+            {
+              "checked:bg-primary after:w-2.5 after:h-2.5 after:bg-[var(--color-bg-input-standard)] after:content-[''] after:absolute after:rounded-full after:left-1 after:top-1":
+                true,
+            },
+            className
+          )}
+          name={name}
+          onChange={onChange}
+          defaultChecked={defaultChecked}
+          checked={checked}
+        />
+        <span>{value}</span>
+      </label>
+    </>
+  );
+};

package/app/templates/Radio/radio.css

@@ -0,0 +1,29 @@
+.radio{
+    position: relative;
+    width: var(--spacing-small);
+    height: var(--spacing-small);  
+    border: 1px solid var(--color-border-standard);
+    background: var(--color-bg-input-standard);
+    color: var(--color-bg-input-standard);
+    cursor: pointer;
+}
+
+.radio::after{
+    content:'';
+    position:absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--spacing-common-y);
+    height: var(--spacing-common-y);  
+    border-radius: var(--radius-circle);
+}
+
+.radio:checked::after{
+    background: var(--color-primary);
+}
+
+.radio:disabled {
+    background: var(--color-bg-input-disabled);
+    cursor: not-allowed;
+}

package/app/templates/{Form/Form.tsx → Select/Select.tsx}

@@ -1,289 +1,143 @@
-"use client";
-import clsx from "clsx";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-export const Label = ({
-    label,
-    required,
-}: {
-    label: string;
-    required?: boolean;
-}) => {
-    return (
-        <p className={"mb-1 text-text-standard"}>  
-            <span
-                className={clsx("", {
-                    "after:content-['*'] after:ml-1 after:text-danger": required,
-                })}
-            >
-                {label}
-            </span>
-        </p>
-    );
-};
-
-export const Input = ({
-  type = "text",
-  placeholder = "값을 입력해주세요",
-  readOnly,
-  disabled,
-  required,
-}: {
-  type?: string;
-  className?: string;
-  placeholder?: string;
-  readOnly?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-}) => {
-  return (
-      <input
-        className="input"
-        type={type}
-        placeholder={placeholder}
-        readOnly={readOnly}
-        disabled={disabled}
-        required={required}
-      />
-  );
-};
-
-export const Select = ({
-  options = [],
-  disabled,
-}: {
-  options: string[];
-  disabled?: boolean;
-}) => {
-  const [filterValue, setFilterValue] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-  const inputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLUListElement>(null);
-  const filteredOptions = options.filter((option) =>
-    option.toLowerCase().includes(filterValue.toLowerCase())
-  );
-
-  useLayoutEffect(() => {
-    if (isOpen && inputRef.current && dropdownRef.current) {
-      const rect = inputRef.current.getBoundingClientRect();
-      const dropdownRect = dropdownRef.current.getBoundingClientRect();
-
-      if (Math.abs(menuPosition.width - rect.width) > 0.5) {
-        setMenuPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left,
-          width: rect.width,
-        });
-        return;
-      }
-
-      let top = rect.bottom + window.scrollY;
-
-      if (rect.bottom + dropdownRect.height > window.innerHeight) {
-        top = rect.top + window.scrollY - dropdownRect.height;
-      }
-
-      setMenuPosition((prev) => {
-        if (
-          Math.abs(prev.top - top) < 0.5 &&
-          Math.abs(prev.left - rect.left) < 0.5
-        ) {
-          return prev;
-        }
-        return {
-          top,
-          left: rect.left,
-          width: rect.width,
-        };
-      });
-    }
-  }, [isOpen, filterValue, menuPosition.width]);
-
-  useEffect(() => {
-    // 마우스 벗어난 영역 클릭 시 드롭다운 닫기
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        inputRef.current &&
-        !inputRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div className="relative">
-      <label className="relative w-fit hidden md:block">
-        <input
-          ref={inputRef}
-          type="text"
-          value={filterValue}
-          placeholder="값을 선택해주세요..."
-          onChange={(e) => {
-            setFilterValue(e.target.value);
-          }}
-          onFocus={() => setIsOpen(true)}
-          className="select hidden sm:block"
-          disabled={disabled}
-        />
-        <div
-          className="absolute flex items-center right-0 top-0 h-full px-2"
-          draggable
-        >
-          <span className="material-symbols-outlined">
-            <span className="text-base input-text-value">arrow_drop_down</span>
-          </span>
-        </div>
-      </label>
-      {isOpen &&
-        createPortal(
-          <ul
-            ref={dropdownRef}
-            className="absolute w-full select-menu"
-            style={{
-              top: menuPosition.top,
-              left: menuPosition.left,
-              width: menuPosition.width,
-            }}
-          >
-            {filteredOptions.length > 0 ? (
-              filteredOptions.map((option, index) => (
-                <li
-                  key={index}
-                  className="select-menu-item"
-                  onClick={() => {
-                    setFilterValue(option);
-                    setIsOpen(false);
-                  }}
-                >
-                  {option}
-                </li>
-              ))
-            ) : (
-              <li className="select-menu-item">No results</li>
-            )}
-          </ul>,
-          document.body
-        )}
-      <select
-        className="select block sm:hidden"
-      >
-        {options.map((option, index) => {
-          return (
-            <option key={index} value={option}>
-              {option}
-            </option>
-          );
-        })}
-      </select>
-    </div>
-  );
-};
-
-export const Radio = ({
-  name,
-  value,
-  label,
-  className,
-  onChange,
-  defaultChecked,
-  checked,
-}: {
-  name: string;
-  value: string;
-  label?: string;
-  className?: string;
-  onChange?: () => void;
-  defaultChecked?: boolean;
-  checked?: boolean;
-}) => {
-  return (
-    <>
-      {label ? <p>{label}</p> : null}
-      <label className="flex items-center gap-1">
-        <input
-          type="radio"
-          className={clsx(
-            "relative appearance-none radio rounded-full ",
-            {
-              "checked:bg-primary after:w-2.5 after:h-2.5 after:bg-[var(--input-background-standard)] after:content-[''] after:absolute after:rounded-full after:left-1 after:top-1":
-                true,
-            },
-            { "focus:border-input-border-focus": true },
-            { "disabled:bg-input-background-disabled": true },
-            className
-          )}
-          name={name}
-          onChange={onChange}
-          defaultChecked={defaultChecked}
-          checked={checked}
-        />
-        <span>{value}</span>
-      </label>
-    </>
-  );
-};
-
-export const Checkbox = ({
-  text,
-  onChange,
-  disabled,
-  required,
-  defaultChecked,
-}: {
-  text?: string;
-  className?: string;
-  onChange?: () => void;
-  disabled?: boolean;
-  required?: boolean;
-  defaultChecked?: boolean;
-}) => {
-  return (
-    <>
-      <label className="checkbox gap-1.5">
-        <input
-          type="checkbox"
-          className="appearance-none hidden"
-          onChange={onChange}
-          disabled={disabled}
-          required={required}
-          defaultChecked={defaultChecked}
-        />
-        <span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="h-4 w-4"
-            viewBox="0 0 20 20"
-            strokeWidth="1"
-          >
-            <path
-              fillRule="evenodd"
-              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </span>
-        {text ? (
-          <span
-            className={clsx(
-              "text-text-standard text-nowrap select-none",
-              { "!text-text-disabled": disabled }
-            )}
-          >
-            {text}
-          </span>
-        ) : null}
-      </label>
-    </>
-  );
-};
+"use client";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import "./select.css";
+
+export const Select = ({
+  options = [],
+  disabled,
+}: {
+  options: string[];
+  disabled?: boolean;
+}) => {
+  const [filterValue, setFilterValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLUListElement>(null);
+  const filteredOptions = options.filter((option) =>
+    option.toLowerCase().includes(filterValue.toLowerCase())
+  );
+
+  useLayoutEffect(() => {
+    if (isOpen && inputRef.current && dropdownRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      const dropdownRect = dropdownRef.current.getBoundingClientRect();
+
+      if (Math.abs(menuPosition.width - rect.width) > 0.5) {
+        setMenuPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left,
+          width: rect.width,
+        });
+        return;
+      }
+
+      let top = rect.bottom + window.scrollY;
+
+      if (rect.bottom + dropdownRect.height > window.innerHeight) {
+        top = rect.top + window.scrollY - dropdownRect.height;
+      }
+
+      setMenuPosition((prev) => {
+        if (
+          Math.abs(prev.top - top) < 0.5 &&
+          Math.abs(prev.left - rect.left) < 0.5
+        ) {
+          return prev;
+        }
+        return {
+          top,
+          left: rect.left,
+          width: rect.width,
+        };
+      });
+    }
+  }, [isOpen, filterValue, menuPosition.width]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative">
+      <label className="relative w-fit hidden md:block">
+        <input
+          ref={inputRef}
+          type="text"
+          value={filterValue}
+          placeholder="값을 선택해주세요..."
+          onChange={(e) => {
+            setFilterValue(e.target.value);
+          }}
+          onFocus={() => setIsOpen(true)}
+          className="select hidden sm:block"
+          disabled={disabled}
+        />
+        <div
+          className="absolute flex items-center right-0 top-0 h-full px-2"
+        >
+          <span className="material-symbols-outlined">
+            <span className="text-base">arrow_drop_down</span>
+          </span>
+        </div>
+      </label>
+      {isOpen &&
+        createPortal(
+          <ul
+            ref={dropdownRef}
+            className="absolute w-full select-menu"
+            style={{
+              top: menuPosition.top,
+              left: menuPosition.left,
+              width: menuPosition.width,
+            }}
+          >
+            {filteredOptions.length > 0 ? (
+              filteredOptions.map((option, index) => (
+                <li
+                  key={index}
+                  className="select-menu-item"
+                  onClick={() => {
+                    setFilterValue(option);
+                    setIsOpen(false);
+                  }}
+                >
+                  {option}
+                </li>
+              ))
+            ) : (
+              <li className="select-menu-item">No results</li>
+            )}
+          </ul>,
+          document.body
+        )}
+      <select
+        className="select block sm:hidden"
+      >
+        {options.map((option, index) => {
+          return (
+            <option key={index} value={option}>
+              {option}
+            </option>
+          );
+        })}
+      </select>
+    </div>
+  );
+};

package/app/templates/Select/select.css

@@ -0,0 +1,47 @@
+.select{
+    background: var(--color-bg-input-standard);
+    border: 1px solid var(--color-border-standard);   
+    color: var(--color-text-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    border-radius: var(--radius-common);
+    width: 100%;
+    outline: none;
+    cursor: pointer;
+}
+.select:focus{
+    border: 1px solid var(--color-border-active);   
+}
+
+.select:disabled{
+    background: var(--color-bg-input-disabled);
+    border: 1px solid var(--color-border-standard);   
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+}
+
+.select-menu {
+    border: 1px solid var(--color-border-active);   
+    border-radius: var(--radius-common);
+    overflow:hidden;
+    z-index: 9999;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    background: var(--color-bg-input-standard);
+}
+
+.select-menu .select-menu-item {
+    background: var(--color-bg-input-standard);   
+    color: var(--color-text-standard);
+    padding: var(--spacing-common-y) var(--spacing-common-x);
+    cursor:pointer;
+    list-style: none;
+}
+
+.select-menu .select-menu-item:hover {
+    background: var(--color-bg-input-hover);
+}
+
+.select-menu .select-menu-item:active,
+.select-menu .select-menu-item:focus  {
+    background: var(--color-primary);
+    color: var(--color-text-active);
+}

package/app/templates/Theme/Theme.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Radio } from "../Form/Form";
+import { Radio } from "../Radio/Radio";
+
 import { themes } from "@/build/typescript/theme";
 import { Button } from "../Button/Button";
 import { ModalContent } from "../Modal/Modal";

package/dist/index.js

@@ -159,10 +159,14 @@ var init_component = __esm({
       "Table",
       "Modal",
       "TOC",
-      "Dropdown"
+      "Dropdown",
+      "Checkbox",
+      "Radio",
+      "Select",
+      "Label"
     ];
     dependenciesMap = {
-      Theme: ["Button", "Form", "Modal"]
+      Theme: ["Button", "Radio", "Modal"]
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.47",
+  "version": "0.1.48",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
@@ -15,7 +15,7 @@
     "css"
   ],
   "scripts": {
-    "dev": "node build/build-tokens.js && next dev",
+    "dev": "node build/build-tokens.js && next dev --webpack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

package/app/templates/Form/form.css

@@ -1,115 +0,0 @@
-
-.input{
-    background: var(--bg-input-standard);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    border-radius: var(--radius-common);
-}
-
-.input::placeholder{
-    color: var(--text-placeholder);
-}
-
-.input:focus{
-    border: 1px solid var(--border-active);   
-}
-
-.input:disabled{
-    background: var(--bg-input-disabled);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-disabled);
-}
-
-.select{
-    background: var(--bg-input-standard);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    border-radius: var(--radius-common);
-}
-.select:focus{
-    border: 1px solid var(--border-active);   
-}
-
-.select:disabled{
-    background: var(--bg-input-disabled);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-disabled);
-}
-
-.select-menu {
-    border: 1px solid var(--border-active);   
-    border-radius: var(--radius-common);
-    overflow:hidden;
-}
-
-.select-menu .select-menu-item {
-    background: var(--bg-input-standard);
-    border: 1px solid var(--border-standard);   
-    color: var(--text-standard);
-    padding: var(--spacing-common-y) var(--spacing-common-x);
-    cursor:pointer
-}
-
-.select-menu .select-menu-item:hover {
-    background: var(--bg-input-hover);
-}
-
-.select-menu .select-menu-item:active,
-.select-menu .select-menu-item:focus  {
-    background: var(--color-primary);
-    border: 1px solid var(--color-primary);   
-    color: var(--text-active);
-}
-
-.checkbox{
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: var(--spacing-small);
-  height: var(--spacing-small);  
-  border: 1px solid var(--border-standard);
-  border-radius: var(--radius-common);
-  background: var(--bg-input-standard);
-  color: var(--bg-input-standard);
-}
-
-.checkbox span svg{
-    color: var(--bg-input-standard);
-    fill: var(--bg-input-standard);
-}
-
-.checkbox:has(input:checked){
-    background: var(--color-primary);
-    border: 1px solid var(--color-primary);
-}
-
-.checkbox:has(input:checked) span svg{
-    color: var(--text-active);
-    fill: var(--text-active);
-}
-
-.radio{
-    position: relative;
-    width: var(--spacing-small);
-    height: var(--spacing-small);  
-    border: 1px solid var(--border-standard);
-    background: var(--bg-input-standard);
-    color: var(--bg-input-standard);
-}
-
-.radio::after{
-    content:'';
-    position:absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--spacing-common-y);
-    height: var(--spacing-common-y);  
-    border-radius: var(--radius-circle);
-}
-
-.radio:checked::after{
-    background: var(--color-primary);
-}