atomsystem 0.1.46 → 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

@@ -1,16 +1,186 @@
 #!/usr/bin/env node
-import {
-  addComponent,
-  components,
-  logger
-} from "./chunk-US4VD4EW.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var init_esm_shims = __esm({
+  "node_modules/tsup/assets/esm_shims.js"() {
+    "use strict";
+  }
+});
+
+// src/utils/logger.ts
+import chalk from "chalk";
+var logger;
+var init_logger = __esm({
+  "src/utils/logger.ts"() {
+    "use strict";
+    init_esm_shims();
+    logger = {
+      error(...args) {
+        console.error(chalk.red(...args));
+      },
+      warn(...args) {
+        console.warn(chalk.yellow(...args));
+      },
+      info(...args) {
+        console.info(chalk.cyan(...args));
+      },
+      success(...args) {
+        console.log(chalk.green(...args));
+      },
+      log(...args) {
+        console.log(...args);
+      },
+      break() {
+        console.log("");
+      }
+    };
+  }
+});
+
+// src/utils/component.ts
+var component_exports = {};
+__export(component_exports, {
+  addComponent: () => addComponent,
+  baseDir: () => baseDir,
+  components: () => components,
+  dependenciesMap: () => dependenciesMap,
+  templateDir: () => templateDir,
+  updateGlobalsCss: () => updateGlobalsCss
+});
+import fs from "fs";
+import path2 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+function getBaseDir() {
+  const isBuilt = path2.basename(__dirname2) === "dist" || fs.existsSync(path2.join(__dirname2, "index.js"));
+  if (isBuilt) {
+    return path2.join(__dirname2, "..");
+  }
+  if (path2.basename(__dirname2) === "utils" || path2.basename(__dirname2) === "commands") {
+    return path2.join(__dirname2, "..", "..");
+  }
+  return path2.join(__dirname2, "..", "..");
+}
+function addComponent(comp, cwd, addedComponents) {
+  if (addedComponents.has(comp)) return;
+  addedComponents.add(comp);
+  const componentSourceDir = path2.join(templateDir, comp);
+  const componentPath = path2.join(componentSourceDir, `${comp}.tsx`);
+  const targetDir = path2.join(cwd, "app", "components", comp);
+  const targetPath = path2.join(targetDir, `${comp}.tsx`);
+  const cssFileName = `${comp}.css`.toLowerCase();
+  const sourceCssPath = path2.join(componentSourceDir, cssFileName);
+  const targetCssPath = path2.join(targetDir, cssFileName);
+  if (fs.existsSync(componentPath)) {
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+      logger.info(`\uB514\uB809\uD1A0\uB9AC \uC0DD\uC131: ${targetDir}`);
+    }
+    fs.copyFileSync(componentPath, targetPath);
+    logger.success(`\u2705 ${comp} \uCEF4\uD3EC\uB10C\uD2B8(TSX)\uAC00 \uCD94\uAC00\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${targetPath}`);
+    if (fs.existsSync(sourceCssPath)) {
+      fs.copyFileSync(sourceCssPath, targetCssPath);
+      logger.success(`\u2705 ${comp} \uCEF4\uD3EC\uB10C\uD2B8(CSS)\uAC00 \uCD94\uAC00\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${targetCssPath}`);
+      updateGlobalsCss(comp, cssFileName, cwd);
+    }
+    if (dependenciesMap[comp]) {
+      logger.info(`\u23F3 ${comp}\uC758 \uC758\uC874\uC131 \uCEF4\uD3EC\uB10C\uD2B8 \uD655\uC778 \uC911...`);
+      for (const dep of dependenciesMap[comp]) {
+        addComponent(dep, cwd, addedComponents);
+      }
+    }
+  } else {
+    logger.error(`\u274C ${comp} \uCEF4\uD3EC\uB10C\uD2B8\uAC00 atomsystem\uC5D0 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4: ${comp}`);
+  }
+}
+function updateGlobalsCss(comp, cssFileName, cwd) {
+  const globalsPath = path2.join(cwd, "app", "globals.css");
+  const importLine = `@import "./components/${comp}/${cssFileName}";`;
+  const componentSectionMarker = "/* Component Styles */";
+  if (fs.existsSync(globalsPath)) {
+    let content = fs.readFileSync(globalsPath, "utf8");
+    if (!content.includes(importLine)) {
+      if (content.includes(componentSectionMarker)) {
+        const markerIndex = content.indexOf(componentSectionMarker);
+        const afterMarker = content.slice(markerIndex);
+        const lastImportIndex = afterMarker.lastIndexOf("@import");
+        if (lastImportIndex !== -1) {
+          const endOfLastImport = markerIndex + lastImportIndex + afterMarker.slice(lastImportIndex).indexOf("\n") + 1;
+          content = content.slice(0, endOfLastImport) + importLine + "\n" + content.slice(endOfLastImport);
+        } else {
+          content = content.slice(0, markerIndex + componentSectionMarker.length) + "\n" + importLine + "\n" + content.slice(markerIndex + componentSectionMarker.length);
+        }
+      } else {
+        content = content.trimEnd() + "\n\n" + componentSectionMarker + "\n" + importLine + "\n";
+      }
+      fs.writeFileSync(globalsPath, content, "utf8");
+      logger.success(`\u2705 globals.css\uC5D0 ${comp} @import\uB97C \uCD94\uAC00\uD588\uC2B5\uB2C8\uB2E4.`);
+    }
+  } else {
+    logger.warn(`\u26A0\uFE0F  globals.css\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC218\uB3D9\uC73C\uB85C \uCD94\uAC00\uD574 \uC8FC\uC138\uC694:
+   ${importLine}`);
+  }
+}
+var __filename2, __dirname2, baseDir, templateDir, components, dependenciesMap;
+var init_component = __esm({
+  "src/utils/component.ts"() {
+    "use strict";
+    init_esm_shims();
+    init_logger();
+    __filename2 = fileURLToPath2(import.meta.url);
+    __dirname2 = path2.dirname(__filename2);
+    baseDir = getBaseDir();
+    templateDir = path2.join(baseDir, "app", "templates");
+    logger.info(`\u{1F50D} Debug: baseDir=${baseDir}`);
+    logger.info(`\u{1F50D} Debug: templateDir=${templateDir}`);
+    components = [
+      "Button",
+      "Badge",
+      "Card",
+      "Collapse",
+      "CodeBlock",
+      "Navigation",
+      "Sidebar",
+      "Input",
+      "Theme",
+      "Tab",
+      "Toast",
+      "Pagination",
+      "Table",
+      "Modal",
+      "TOC",
+      "Dropdown",
+      "Checkbox",
+      "Radio",
+      "Select",
+      "Label"
+    ];
+    dependenciesMap = {
+      Theme: ["Button", "Radio", "Modal"]
+    };
+  }
+});
 
 // src/index.ts
+init_esm_shims();
 import { Command as Command3 } from "commander";
 
 // src/commands/add.ts
+init_esm_shims();
+init_logger();
+init_component();
 import { Command } from "commander";
-import path from "path";
+import path3 from "path";
 import prompts from "prompts";
 import { z } from "zod";
 var addOptionsSchema = z.object({
@@ -23,7 +193,7 @@ var add = new Command().name("add").description("\uD504\uB85C\uC81D\uD2B8\uC5D0
     const options = addOptionsSchema.parse({
       components: componentsArg,
       ...opts,
-      cwd: path.resolve(opts.cwd)
+      cwd: path3.resolve(opts.cwd)
     });
     let selectedComponents = options.components || [];
     if (options.all) {
@@ -53,17 +223,20 @@ var add = new Command().name("add").description("\uD504\uB85C\uC81D\uD2B8\uC5D0
 });
 
 // src/commands/init.ts
+init_esm_shims();
+init_logger();
+init_component();
 import { Command as Command2 } from "commander";
-import fs from "fs";
-import path2 from "path";
+import fs2 from "fs";
+import path4 from "path";
 import { exec } from "child_process";
 import { promisify } from "util";
 import ora from "ora";
 import prompts2 from "prompts";
-import { fileURLToPath } from "url";
+import { fileURLToPath as fileURLToPath3 } from "url";
 import { z as z2 } from "zod";
-var __filename2 = fileURLToPath(import.meta.url);
-var __dirname2 = path2.dirname(__filename2);
+var __filename3 = fileURLToPath3(import.meta.url);
+var __dirname3 = path4.dirname(__filename3);
 var execPromise = promisify(exec);
 var initOptionsSchema = z2.object({
   cwd: z2.string(),
@@ -73,11 +246,11 @@ var init = new Command2().name("init").description("\uD504\uB85C\uC81D\uD2B8\uB9
   try {
     const options = initOptionsSchema.parse({
       ...opts,
-      cwd: path2.resolve(opts.cwd)
+      cwd: path4.resolve(opts.cwd)
     });
     const projectRoot = options.cwd;
-    const packageJsonPath = path2.join(projectRoot, "package.json");
-    if (!fs.existsSync(packageJsonPath)) {
+    const packageJsonPath = path4.join(projectRoot, "package.json");
+    if (!fs2.existsSync(packageJsonPath)) {
       logger.error("\u274C \uC624\uB958: \uD604\uC7AC \uB514\uB809\uD1A0\uB9AC\uC5D0\uC11C package.json\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
       logger.info("'npm init'\uC744 \uBA3C\uC800 \uC2E4\uD589\uD55C \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.");
       process.exit(1);
@@ -120,7 +293,7 @@ var init = new Command2().name("init").description("\uD504\uB85C\uC81D\uD2B8\uB9
         return;
       }
       try {
-        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+        const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf8"));
         packageJson.type = "module";
         packageJson.scripts = {
           ...packageJson.scripts,
@@ -130,17 +303,17 @@ var init = new Command2().name("init").description("\uD504\uB85C\uC81D\uD2B8\uB9
           "lint": "next lint",
           "token-build": "node build/build-tokens.js"
         };
-        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+        fs2.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
         logger.success("\u2705 package.json \uC2A4\uD06C\uB9BD\uD2B8 \uC5C5\uB370\uC774\uD2B8 \uC644\uB8CC.");
       } catch (err) {
         logger.error("\u274C package.json \uC5C5\uB370\uC774\uD2B8 \uC624\uB958:", err);
         return;
       }
-      const appDir = path2.join(projectRoot, "app");
-      if (!fs.existsSync(appDir)) fs.mkdirSync(appDir, { recursive: true });
+      const appDir = path4.join(projectRoot, "app");
+      if (!fs2.existsSync(appDir)) fs2.mkdirSync(appDir, { recursive: true });
       const files = [
         {
-          path: path2.join(appDir, "layout.tsx"),
+          path: path4.join(appDir, "layout.tsx"),
           content: `import { ThemeProvider } from "./components/Theme/Theme";
 import "./globals.css";
 
@@ -157,13 +330,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }`
         },
         {
-          path: path2.join(appDir, "globals.css"),
+          path: path4.join(appDir, "globals.css"),
           content: `@import "tailwindcss";
 @import "../build/css/_variables.css";
 @import "../css/text.css";`
         },
         {
-          path: path2.join(appDir, "page.tsx"),
+          path: path4.join(appDir, "page.tsx"),
           content: `import { ThemeSelector } from "./components/Theme/Theme";
 import { Button } from "./components/Button/Button";
 import { Card, CardHeader, CardContent, CardFooter } from "./components/Card/Card";
@@ -203,7 +376,7 @@ export default function Page() {
 }`
         },
         {
-          path: path2.join(projectRoot, "tsconfig.json"),
+          path: path4.join(projectRoot, "tsconfig.json"),
           content: JSON.stringify({
             compilerOptions: {
               target: "ES2017",
@@ -229,25 +402,25 @@ export default function Page() {
           }, null, 2)
         },
         {
-          path: path2.join(projectRoot, "next.config.ts"),
+          path: path4.join(projectRoot, "next.config.ts"),
           content: `import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = { reactStrictMode: false };
 export default nextConfig;`
         },
         {
-          path: path2.join(projectRoot, "postcss.config.mjs"),
+          path: path4.join(projectRoot, "postcss.config.mjs"),
           content: `/** @type {import('postcss-load-config').Config} */
 const config = { plugins: { "@tailwindcss/postcss": {} } };
 export default config;`
         }
       ];
       for (const file of files) {
-        fs.writeFileSync(file.path, file.content);
+        fs2.writeFileSync(file.path, file.content);
         logger.info(`\u2705 \uD30C\uC77C \uC0DD\uC131: ${file.path}`);
       }
-      const buildTokensPath = path2.join(projectRoot, "build", "build-tokens.js");
-      if (fs.existsSync(buildTokensPath)) {
+      const buildTokensPath = path4.join(projectRoot, "build", "build-tokens.js");
+      if (fs2.existsSync(buildTokensPath)) {
         const spin = ora("\uB514\uC790\uC778 \uD1A0\uD070 \uBE4C\uB4DC \uC911...").start();
         try {
           await execPromise(`node "${buildTokensPath}"`, { cwd: projectRoot });
@@ -258,14 +431,14 @@ export default config;`
         }
       }
     }
-    const { baseDir: pkgRoot } = await import("./component-SFV77SNH.js");
+    const { baseDir: pkgRoot } = await Promise.resolve().then(() => (init_component(), component_exports));
     logger.info(`\u{1F50D} Debug: pkgRoot=${pkgRoot}`);
-    const tokenFile = path2.join(pkgRoot, "tokens", "tokens.json");
-    const buildFile = path2.join(pkgRoot, "build", "build-tokens.js");
-    const textCssFile = path2.join(pkgRoot, "css", "text.css");
-    copyFile(tokenFile, path2.join(projectRoot, "tokens", "tokens.json"));
-    copyFile(buildFile, path2.join(projectRoot, "build", "build-tokens.js"));
-    copyFile(textCssFile, path2.join(projectRoot, "css", "text.css"));
+    const tokenFile = path4.join(pkgRoot, "tokens", "tokens.json");
+    const buildFile = path4.join(pkgRoot, "build", "build-tokens.js");
+    const textCssFile = path4.join(pkgRoot, "css", "text.css");
+    copyFile(tokenFile, path4.join(projectRoot, "tokens", "tokens.json"));
+    copyFile(buildFile, path4.join(projectRoot, "build", "build-tokens.js"));
+    copyFile(textCssFile, path4.join(projectRoot, "css", "text.css"));
     const addedComponents = /* @__PURE__ */ new Set();
     logger.info("\u23F3 \uAE30\uBCF8 \uB370\uBAA8 \uCEF4\uD3EC\uB10C\uD2B8 \uC124\uCE58 \uC911...");
     addComponent("Button", projectRoot, addedComponents);
@@ -278,10 +451,10 @@ export default config;`
   }
 });
 function copyFile(src, dest) {
-  const dir = path2.dirname(dest);
-  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-  if (fs.existsSync(src)) {
-    fs.copyFileSync(src, dest);
+  const dir = path4.dirname(dest);
+  if (!fs2.existsSync(dir)) fs2.mkdirSync(dir, { recursive: true });
+  if (fs2.existsSync(src)) {
+    fs2.copyFileSync(src, dest);
     logger.info(`\u2705 \uBCF5\uC0AC \uC644\uB8CC: ${src} -> ${dest}`);
   } else {
     logger.warn(`\u26A0\uFE0F  \uD30C\uC77C\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC5B4 \uBCF5\uC0AC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4: ${src}`);
@@ -291,12 +464,12 @@ function copyFile(src, dest) {
 // src/index.ts
 import { readFileSync } from "fs";
 import { join } from "path";
-import { fileURLToPath as fileURLToPath2 } from "url";
+import { fileURLToPath as fileURLToPath4 } from "url";
 import { dirname } from "path";
-var __filename3 = fileURLToPath2(import.meta.url);
-var __dirname3 = dirname(__filename3);
+var __filename4 = fileURLToPath4(import.meta.url);
+var __dirname4 = dirname(__filename4);
 async function main() {
-  const packageJsonPath = join(__dirname3, "..", "package.json");
+  const packageJsonPath = join(__dirname4, "..", "package.json");
   const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
   const program = new Command3().name("atomsystem").description("Atom Ground Design System CLI").version(packageJson.version);
   program.addCommand(add);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
@@ -15,12 +15,12 @@
     "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",
     "token-build": "node build/build-tokens.js",
-    "cli:build": "tsup src/index.ts --format esm --clean --shims --target node20",
+    "cli:build": "tsup src/index.ts --format esm --clean --shims --target node20 --no-splitting",
     "cli:dev": "tsx src/index.ts"
   },
   "peerDependencies": {

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);
-}