atomsystem 0.1.19 → 0.1.20

package/app/templates/Animations/Animation.tsx

@@ -0,0 +1,282 @@
+"use client";
+import { ReactNode, useEffect, useRef, useState } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
+import { useGSAP } from "@gsap/react";
+
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, useGSAP);
+
+export const UpAnimation = ({
+  children,
+  trigger,
+  toggleActions = "play none reverse none",
+  overflow = "overflow-hidden",
+  stagger,
+  className,
+  markers,
+  AnimationContainer,
+}: {
+  children: ReactNode;
+  trigger?: string | HTMLElement;
+  toggleActions?: string;
+  overflow?: string;
+  className?: string;
+  stagger?: boolean;
+  markers?: boolean;
+  AnimationContainer?: gsap.core.Animation | undefined;
+}) => {
+  const animationRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      if (!animationRef.current) return;
+
+      const target = stagger
+        ? animationRef.current.children
+        : animationRef.current;
+
+      gsap.set(target, { y: 500, opacity: 0 }); // 초기 상태 설정
+
+      gsap.fromTo(
+        target,
+        {
+          y: 500,
+          opacity: 0,
+        },
+        {
+          y: 0,
+          opacity: 1,
+          stagger: 0.2,
+          duration: 3,
+          ease: "power4.out",
+          scrollTrigger: {
+            trigger: trigger ? trigger : animationRef.current,
+            start: "top center",
+            end: "bottom bottom",
+            toggleActions: toggleActions,
+            markers: markers,
+            invalidateOnRefresh: true,
+            containerAnimation: AnimationContainer,
+          },
+        }
+      );
+    },
+    {
+      dependencies: [
+        trigger,
+        toggleActions,
+        markers,
+        stagger,
+        AnimationContainer,
+      ],
+    }
+  );
+
+  return stagger ? (
+    <div ref={animationRef} className={`${overflow} ${className}`}>
+      {children}
+    </div>
+  ) : (
+    <div className={`${overflow} ${className}`}>
+      <div ref={animationRef}>{children}</div>
+    </div>
+  );
+};
+
+export const MaskAnimation = ({
+  children,
+  trigger,
+  maskColor,
+  markers,
+}: {
+  children: ReactNode;
+  maskColor: string;
+  trigger?: string;
+  markers?: boolean;
+}) => {
+  const animationRef = useRef<HTMLDivElement>(null);
+  const [maskSize, setMaskSize] = useState<number>(0);
+
+  // 리사이즈 핸들러
+  const updateMaskSize = () => {
+    if (animationRef.current) {
+      setMaskSize(animationRef.current.offsetWidth);
+    }
+  };
+
+  useEffect(() => {
+    updateMaskSize(); // 초기 사이즈 설정
+
+    window.addEventListener("resize", updateMaskSize);
+    return () => {
+      window.removeEventListener("resize", updateMaskSize);
+    };
+  }, []);
+
+  useGSAP(
+    () => {
+      if (!animationRef.current) return;
+
+      setMaskSize(animationRef.current.offsetWidth);
+
+      gsap.fromTo(
+        animationRef.current,
+        {
+          left: 0,
+        },
+        {
+          left: -maskSize,
+          stagger: 0.2,
+          duration: 3,
+          ease: "power4.out",
+          scrollTrigger: {
+            trigger: trigger ? trigger : animationRef.current,
+            start: "top center",
+            end: "bottom bottom",
+            toggleActions: "play none none none",
+            markers: markers,
+            invalidateOnRefresh: true,
+          },
+        }
+      );
+    },
+    { dependencies: [maskSize, trigger] }
+  );
+
+  return (
+    <div className="relative overflow-hidden">
+      <div>{children}</div>
+      <div
+        ref={animationRef}
+        className={`absolute top-0 w-full h-full ${maskColor} z-20`}
+      ></div>
+    </div>
+  );
+};
+
+export const SlidAnimation = ({ children }: { children: React.ReactNode }) => {
+  const slideRef = useRef<HTMLDivElement>(null);
+  const [slideX, setSlideX] = useState(0);
+
+  useGSAP(
+    () => {
+      if (!slideRef.current) return;
+
+      if (!slideRef.current) return;
+      setSlideX(slideRef.current.offsetWidth / 2);
+
+      gsap.to(slideRef.current, {
+        x: -slideX,
+        duration: 40,
+        repeat: -1,
+        ease: "none",
+      });
+    },
+    { dependencies: [slideX], scope: slideRef }
+  );
+
+  return (
+    <div ref={slideRef} className="flex gap-0 flex-nowrap">
+      {children}
+      {children}
+    </div>
+  );
+};
+
+export const HorizonScroll = ({
+  children,
+  callbackTween,
+}: {
+  children: React.ReactNode;
+  callbackTween?: (tween: gsap.core.Tween) => void;
+}) => {
+  const horizonRef = useRef<HTMLDivElement>(null);
+  const horizonWrapperRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(() => {
+    if (!horizonWrapperRef.current) return;
+    if (!horizonRef.current) return;
+
+    const isLarge = window.matchMedia("(min-width: 640px)").matches;
+    if (!isLarge) return; // lg 미만이면 애니메이션 적용 안 함
+
+    const horizonWrapper = horizonWrapperRef.current;
+    const horizon = horizonRef.current;
+
+    const horizonTween = gsap.to(horizon, {
+      x: () => -1 * (horizonWrapper.scrollWidth - innerWidth),
+      ease: "none",
+      scrollTrigger: {
+        trigger: horizonWrapperRef.current,
+        pin: true,
+        start: "top top",
+        scrub: 1,
+        end: () => "+=" + (horizon.scrollWidth - innerWidth),
+        invalidateOnRefresh: true,
+        // markers: true,
+      },
+    });
+
+    if (callbackTween && isLarge && horizonTween) {
+      callbackTween(horizonTween);
+    }
+  }, [callbackTween]);
+
+  return (
+    <div
+      ref={horizonWrapperRef}
+      className="w-full h-full relative overflow-hidden"
+    >
+      <div
+        className="flex flex-col sm:flex-row flex-nowrap translate-x-0 w-full"
+        ref={horizonRef}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export const HorizonScrollNav = ({
+  sections,
+  listClass,
+}: {
+  sections: { id: string; title: string }[];
+  listClass?: string;
+}) => {
+  const scrollToSection = (id: string) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+
+    const index = sections.findIndex((section) => section.id === id);
+    if (index === -1) return;
+
+    const isLarge = window.matchMedia("(min-width: 640px)").matches;
+    const scrollPos = isLarge ? el.offsetLeft : el.offsetTop;
+
+    gsap.to(window, {
+      scrollTo: {
+        y: scrollPos,
+        autoKill: false,
+      },
+      duration: 1,
+    });
+  };
+  return (
+    <ul className={`${listClass}`}>
+      {sections.map((section, index) => {
+        return (
+          <li key={index}>
+            <button
+              className="cursor-pointer text-sm"
+              onClick={() => scrollToSection(section.id)}
+            >
+              {section.title}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/app/templates/Button/Button.tsx

@@ -6,11 +6,13 @@ export const Button = ({
   type,
   style,
   disabled,
+  onClick,
 }: {
   children: React.ReactNode;
   type: "primary" | "secondary" | "success" | "danger" | "gray";
   style?: React.CSSProperties;
   disabled?: boolean;
+  onClick?: () => void;
 }) => {
   return (
     <button
@@ -39,6 +41,7 @@ export const Button = ({
       )}
       style={style}
       disabled={disabled}
+      onClick={onClick}
     >
       {children}
     </button>

package/app/templates/Card/Card.tsx

@@ -19,7 +19,7 @@ export const Card = ({
   );
   return (
     <div
-      className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-fill-group border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded  border ${className} overflow-auto`}
+      className={`${type == "standard" ? "bg-[var(--background-card)] border-[var(--color-border)]" : type == "group" ? "bg-[var(--background-wrapper)] border-none" : ""} ${!hasCardContent ? "p-4" : ""} rounded  border ${className} overflow-auto`}
     >
       {children}
     </div>

package/app/templates/GlobalNav/GlobalNav.tsx

@@ -5,21 +5,21 @@ import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import clsx from "clsx";
 
-const GlobalNav = () => {
+const GlobalNav = ({
+  type = "sidebar",
+  navMenu,
+}: {
+  type?: "sidebar" | "topmenu" | "mobile";
+  navMenu: {
+    name: string;
+    path: string;
+    subItems?: { name: string; path: string }[];
+  }[];
+}) => {
   const [windowSize, setWindowSize] = useState<number>(); // 초기값 설정
-
-  const [toggleMenu, setToggleMenu] = useState<boolean>(false);
-
+  const [toggleMenu, setToggleMenu] = useState<boolean>(true);
   const pathname = usePathname();
-  const navMenu = [
-    { name: "시작하기", path: "/" },
-    { name: "설치하기", path: "/install" },
-    { name: "입력창", path: "/component/input" },
-    { name: "선택창", path: "/component/select" },
-    { name: "체크박스", path: "/component/checkbox" },
-    { name: "라디오", path: "/component/radio" },
-    { name: "버튼", path: "/component/button" },
-  ];
+  const [openSubMenu, setOpenSubMenu] = useState<Record<string, boolean>>({});
 
   // 윈도우 사이즈 추적
   useEffect(() => {
@@ -35,21 +35,28 @@ const GlobalNav = () => {
   // 초기 토글 값 설정
   useEffect(() => {
     if (window.innerWidth > 768) {
-      setToggleMenu(true);
     } else {
       setToggleMenu(false);
     }
-
-    // console.log(
-    //   `one Time Work!: ${toggleMenu}, windowSize:${window.innerWidth}`
-    // );
   }, []);
 
+  const toggleSubMenu = (menuName: string) => {
+    setOpenSubMenu((prev) => ({
+      ...prev,
+      [menuName]: !prev[menuName],
+    }));
+  };
+
   return (
     <>
       <nav
-        className={`fixed top-0 md:relative w-full max-w-80 h-full bg-[var(--background-card)] text-text-standard z-20 left-0 ${toggleMenu ? "block" : "hidden"}`}
+        className={clsx(
+          `fixed top-0 md:relative w-full  bg-[var(--background-card)] text-text-standard z-20 left-0 ${toggleMenu ? "block" : "hidden"}`,
+          { "h-full max-w-80": type == "sidebar" },
+          { "h-auto flex flex-row items-center": type == "topmenu" }
+        )}
       >
+        {/* brand */}
         <div className="brand">
           <div className="flex items-center justify-between">
             <Link href={"/"}>
@@ -61,41 +68,106 @@ const GlobalNav = () => {
                 draggable="false"
               ></Image>
             </Link>
-            <button className="p-4">
-              <span
-                className="material-symbols-outlined"
-                onClick={() => setToggleMenu(false)}
-                style={{ fontSize: "16px" }}
-              >
-                close
-              </span>
-            </button>
+            {type == "sidebar" ? (
+              <button className="p-4 cursor-pointer">
+                <span
+                  className="material-symbols-outlined text-[var(--text-standard)]"
+                  onClick={() => setToggleMenu(false)}
+                  style={{ fontSize: "16px" }}
+                >
+                  close
+                </span>
+              </button>
+            ) : null}
           </div>
         </div>
 
-        <ul>
+        {/* List */}
+        <ul
+          className={clsx("", {
+            "flex flex-row": type == "topmenu",
+          })}
+        >
           {navMenu.map((menu) => {
             return (
-              <li key={menu.name}>
-                <Link
-                  href={menu.path}
-                  className={clsx("px-4 py-2 block", {
-                    "text-primary": menu.path == pathname,
-                  })}
-                >
-                  {menu.name}
-                </Link>
+              <li className="relative group" key={menu.name}>
+                <div className={clsx("flex justify-between items-center pr-4")}>
+                  <Link
+                    href={menu.path}
+                    className={clsx(
+                      "px-4 py-2 block text-[var(--text-standard)]",
+                      {
+                        "text-primary":
+                          menu.path == pathname ||
+                          menu.subItems?.some((sub) => sub.path === pathname),
+                      }
+                    )}
+                  >
+                    {menu.name}
+                  </Link>
+                  {menu.subItems && type == "sidebar" ? (
+                    <button
+                      className="cursor-pointer"
+                      onClick={() => toggleSubMenu(menu.name)}
+                    >
+                      <span
+                        className={clsx(
+                          "material-symbols-outlined text-[var(--text-sub)] transition-transform",
+                          {
+                            "rotate-90": openSubMenu[menu.name],
+                          }
+                        )}
+                        style={{ fontSize: "16px" }}
+                      >
+                        keyboard_arrow_right
+                      </span>
+                    </button>
+                  ) : null}
+                </div>
+                {menu.subItems ? (
+                  <ul
+                    className={clsx(
+                      "block",
+                      {
+                        "hidden absolute top-[42px] group-hover:block hover:block bg-[var(--background-card)]":
+                          type == "topmenu",
+                      },
+                      {
+                        hidden: !openSubMenu[menu.name] && type == "sidebar",
+                      }
+                    )}
+                  >
+                    {menu.subItems.map((submenu) => {
+                      return (
+                        <li key={submenu.name}>
+                          <Link
+                            className={clsx(
+                              "px-4 py-2 block text-[var(--text-standard)]",
+                              {
+                                "text-primary": submenu.path == pathname,
+                              },
+                              { "pl-12 ": type == "sidebar" }
+                            )}
+                            href={submenu.path}
+                          >
+                            {submenu.name}
+                          </Link>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                ) : null}
               </li>
             );
           })}
         </ul>
       </nav>
       <button
-        className={`fixed shadow-md rounded-full bg-[var(--background-card)] w-12 h-12 top-6 left-6 z-10 ${toggleMenu ? "hidden" : "block"} `}
+        className={`fixed shadow-md rounded-full bg-[var(--background-card)] w-12 h-12 top-6 left-6 z-10 cursor-pointer ${toggleMenu ? "hidden" : "block"} `}
+        onClick={() => setToggleMenu(true)}
       >
         <span
-          className="material-symbols-outlined"
-          onClick={() => setToggleMenu(true)}
+          className="material-symbols-outlined text-[var(--text-standard)]"
           style={{ fontSize: "16px" }}
         >
           menu

package/app/templates/Pagination/Pagination.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+
+const Pagination = ({
+  pageRange,
+  pageViewRange,
+  totalCount,
+  pageTotal,
+  currentPage,
+  onPageChange,
+}: {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  /**  페이지당 데이터 개수 정보를 받습니다. */
+  pageViewRange: number;
+  /**  페이지네이션을 보여줄 최대 개수정보를 받습니다. */
+  pageRange: number;
+  /** totlaCount로 받아 계산하거나 전체 페이지네이션의 토탈 정보를 받습니다. */
+  totalCount: number;
+  /** totlaCount로 받아 계산하거나 전체 페이지네이션의 토탈 정보를 받습니다. */
+  pageTotal?: number;
+}) => {
+  const totalPages = pageTotal
+    ? pageTotal
+    : totalCount
+    ? Math.ceil(totalCount / pageViewRange)
+    : 0;
+  const [pageStart, setPageStart] = useState(1);
+  const scrollTop = () => {
+    setTimeout(() => {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }, 0);
+  };
+
+  return (
+    <div className="text-[#999] flex border-[#666] border-b">
+      <button
+        disabled={pageStart === 1}
+        onClick={() => {
+          scrollTop();
+          const newStart = Math.max(1, pageStart - pageRange);
+          setPageStart(newStart);
+          onPageChange(newStart);
+        }}
+        className="px-2 py-8 cursor-pointer disabled:opacity-40"
+      >
+        <span className="material-symbols-outlined">keyboard_arrow_left</span>
+      </button>
+      <ul className="grid grid-cols-5 w-full">
+        {[...Array(pageRange)].map((_, i) => {
+          const page = pageStart + i;
+
+          const isFirstIndex = i === 0;
+          const isLastIndex = i === pageRange - 1;
+          const isLastPageInRange = page === totalPages;
+
+          if (page > totalPages) return null;
+
+          return (
+            <li
+              key={page}
+              onClick={() => {
+                onPageChange(page);
+
+                // 첫 번째 인덱스 클릭 시 이전 범위로
+                if (isFirstIndex && pageStart > 1) {
+                  setPageStart(Math.max(1, pageStart - pageRange + 1));
+                }
+
+                // 마지막 인덱스 클릭 시 다음 범위로
+                if (isLastIndex && !isLastPageInRange) {
+                  setPageStart(pageStart + pageRange - 1);
+                }
+                scrollTop();
+              }}
+              className={` w-full text-center py-8 cursor-pointer ${
+                currentPage === page ? "text-primary" : ""
+              }`}
+            >
+              {page}
+            </li>
+          );
+        })}
+      </ul>
+      <button
+        disabled={pageStart + pageRange > totalPages}
+        onClick={() => {
+          scrollTop();
+          const newStart = pageStart + pageRange;
+          if (newStart <= totalPages) {
+            setPageStart(newStart);
+            onPageChange(newStart);
+          }
+        }}
+        className="px-2 py-8 cursor-pointer disabled:opacity-40"
+      >
+        <span className="material-symbols-outlined">keyboard_arrow_right</span>
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

package/app/templates/Tab/Tab.tsx

@@ -6,23 +6,47 @@ import { useGSAP } from "@gsap/react";
 
 const Tab = ({
   tabs,
-  tabClass,
-  tabNavItemClass,
-  tabNavItemActiveClass,
+  tabClass = "w-full bg-[var(--background-wrapper)] border-b border-[var(--color-border)] relative z-0 h-[57px]",
+  tabNavItemClass = "p-4",
+  tabNavItemActiveClass = "bg-[var(--background-card)] border border-[var(--color-border)] border-b-[var(--background-card)] relative z-10",
   tabContents,
-  tabContentClass,
-  tabContentItem,
+  tabContentClass = "p-4 border border-t-0  border-[var(--color-border)] -mt-[1px]",
+  tabContentItem = "text-[var(--text-standard)]",
   expectionValue,
   expectionLayout,
 }: {
-  tabs: Array<{ id: string; target: string[]; tabItem: React.ReactNode }>;
+  /**탭 네비게이션을 정의내립니다.
+   */
+  tabs: Array<{
+    /** id는 탭 메뉴의 고유 값입니다. 고유 값을 통해 Active 상태 값을 관리합니다.*/
+    id: string;
+    /** target은 배열로 제공되며, 타겟의 배열과 동일한 내용을 tabContent로 적용됩니다.*/
+    target: string[];
+    /** 탭 메뉴의 ReactNode 내용을 받습니다.*/
+    tabItem: React.ReactNode;
+  }>;
+  /** 탭 메뉴의 tailwinds css 스타일 지정을 위한 class를 받습니다.*/
   tabClass?: string;
+  /** 탭 메뉴의 각각의 tailwinds css 스타일 지정을 위한 class를 받습니다.*/
   tabNavItemClass?: string;
+  /** 탭 메뉴의 활성화 상태의 tailwinds css 스타일 지정을 위한 class를 받습니다.*/
   tabNavItemActiveClass?: string;
-  tabContents: Array<{ id: string; tag: string; content: React.ReactNode }>;
+  /** 탭 메뉴의 콘텐츠 값을 정의내립니다.*/
+  tabContents: Array<{
+    /** 고유 ID 값입니다.*/
+    id: string;
+    /** 태그 값으로 tabs target에서 선택된 내용만 화면에 제공됩니다.*/
+    tag: string;
+    /** 탭 메뉴의 콘텐츠 ReactNode 정보를 받습니다.*/
+    content: React.ReactNode;
+  }>;
+  /** 탭 메뉴의 콘텐츠 레이아웃을 위한한 tailwinds css 스타일 지정을 위한 class를 받습니다. */
   tabContentClass?: string;
+  /** 탭 메뉴의 콘텐츠의 각 개별 요소를 위한 tailwinds css 스타일 지정을 위한 class를 받습니다. */
   tabContentItem?: string;
+  /** 예외 레이아웃을 사용할 콘텐츠의 tag값을 입력받습니다. */
   expectionValue?: string;
+  /** 예외 레이아웃에 사용하기 위한 tailwinds css 스타일 지정을 위한 class를 받습니다. */
   expectionLayout?: string;
 }) => {
   const [activeContent, setActiveContent] = useState(tabs[0].target);

package/app/templates/Table/Table.tsx

@@ -0,0 +1,63 @@
+/** 테이블에 표시할 데이터 배열. 각 객체는 하나의 행을 나타냅니다.
+ * 객체의 키는 테이블 헤더가 되고, 값은 해당 셀의 내용이 됩니다.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Table = ({ tableData }: { tableData: Record<string, any>[] }) => {
+  // tableData가 제공되지 않았거나 비어있는 경우, 데이터 없음 메시지를 표시합니다.
+  if (!tableData || tableData.length === 0) {
+    return (
+      <div className="p-4 text-center">
+        <p className="text-[var(--text-standard)]">표시할 데이터가 없습니다.</p>
+      </div>
+    );
+  }
+
+  const headers = Object.keys(tableData[0]);
+
+  return (
+    <div className="overflow-auto w-full">
+      <table className="min-w-full border border-[var(--color-border)] rounded]">
+        <thead className="bg-[var(--table-header-background)]">
+          <tr>
+            {/* 헤더 배열을 순회하며 각 헤더에 대한 <th>태그를 생성합니다. */}
+            {headers.map((header, index) => {
+              return (
+                <th
+                  key={index}
+                  className="px-6 py-3 text-center text-[var(--table-header-text)] tracking-wider border-b border-[var(--color-border)]"
+                >
+                  {header}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        {/* 테이블 바디 부분 */}
+        <tbody className={`divide-y divide-[var(--color-border)] `}>
+          {/* tableData 배열을 순회하며 각 데이터 객체(행)에 대한 <tr> 태그를 생성합니다. */}
+          {tableData.map((row, rowIndex) => {
+            return (
+              <tr
+                key={rowIndex}
+                className={` ${rowIndex % 2 === 0 ? `bg-[var(--table-body-background)]` : `bg-[var(--table-body-background-even)]`}`}
+              >
+                {/* 각 행 내에서 헤더 배열을 다시 순회하며 해당 헤더에 맞는 셀(<td>)을 생성합니다. */}
+                {headers.map((header, colIndex) => (
+                  <td
+                    key={colIndex} // 고유한 키를 제공합니다.
+                    className={`px-4 py-2 text-[var(--text-body-text)] border-b border-[var(--color-border)]`}
+                  >
+                    {/* 현재 행 객체(row)에서 해당 헤더(키)에 해당하는 값을 가져와 셀에 표시합니다. */}
+                    {row[header]}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;

package/app/templates/Toast/Toast.tsx

@@ -97,7 +97,7 @@ const ToastItem = ({
   return (
     <div
       ref={elRef}
-      className="bg-white/20 border border-primary rounded text-white p-4 shadow-md min-w-[250px]"
+      className="bg-[var(--background-card)] border border-[var(--color-border)] rounded text-white p-4 shadow-md min-w-[250px]"
     >
       <p>{message.message}</p>
       {message.desc ? <p className="text-sm">{message.desc}</p> : null}

package/cli/add.js

@@ -21,6 +21,10 @@ const components = [
   "GlobalNav",
   "Input",
   "Theme",
+  "Tab",
+  "Toast",
+  "Pagination",
+  "Table",
 ]; // 여기 추가할 컴포넌트 목록
 
 // 명령어에서 컴포넌트 이름 가져오기

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "atomsystem",
-  "version": "0.1.19",
-  "type": "module",
-  "homepage": "https://system.atomground.com",
-  "bin": {
-    "atomsystem-init": "cli/init.js",
-    "atomsystem-add": "cli/add.js"
-  },
-  "files": [
-    "token.json",
-    "tokens",
-    "tailwind.config.ts",
-    "app/templates"
-  ],
-  "scripts": {
-    "dev": "node build/build-tokens.js && next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "token-build": "node build/build-tokens.js"
-  },
-  "peerDependencies": {
-    "@tokens-studio/sd-transforms": "^1.2.8",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sd-tailwindcss-transformer": "^2.0.0",
-    "style-dictionary": "^4.2.0"
-  },
-  "dependencies": {
-    "@gsap/react": "^2.1.2",
-    "@next/third-parties": "^15.0.3",
-    "@tailwindcss/postcss": "^4.0.17",
-    "@tokens-studio/sd-transforms": "^1.2.8",
-    "clsx": "^2.1.1",
-    "gsap": "^3.12.7",
-    "highlight.js": "^11.11.1",
-    "inquirer": "^12.4.2",
-    "next": "^15.2.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sd-tailwindcss-transformer": "^2.0.0",
-    "style-dictionary": "^4.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@vitest/browser": "^3.1.1",
-    "@vitest/coverage-v8": "^3.1.1",
-    "eslint": "^8",
-    "eslint-config-next": "15.0.3",
-    "playwright": "^1.51.1",
-    "postcss": "^8.5.3",
-    "tailwindcss": "^4.0.17",
-    "typescript": "^5",
-    "vitest": "^3.1.1"
-  }
-}
+{
+  "name": "atomsystem",
+  "version": "0.1.20",
+  "type": "module",
+  "homepage": "https://system.atomground.com",
+  "bin": {
+    "atomsystem-init": "cli/init.js",
+    "atomsystem-add": "cli/add.js"
+  },
+  "files": [
+    "token.json",
+    "tokens",
+    "tailwind.config.ts",
+    "app/templates"
+  ],
+  "scripts": {
+    "dev": "node build/build-tokens.js && next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "token-build": "node build/build-tokens.js"
+  },
+  "peerDependencies": {
+    "@tokens-studio/sd-transforms": "^1.2.8",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sd-tailwindcss-transformer": "^2.0.0",
+    "style-dictionary": "^4.2.0"
+  },
+  "dependencies": {
+    "@gsap/react": "^2.1.2",
+    "@next/third-parties": "^15.0.3",
+    "@tailwindcss/postcss": "^4.0.17",
+    "@tokens-studio/sd-transforms": "^1.2.8",
+    "clsx": "^2.1.1",
+    "gsap": "^3.12.7",
+    "highlight.js": "^11.11.1",
+    "inquirer": "^12.4.2",
+    "next": "^15.2.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sd-tailwindcss-transformer": "^2.0.0",
+    "style-dictionary": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "playwright": "^1.51.1",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.17",
+    "typescript": "^5",
+    "vitest": "^3.1.1"
+  }
+}

package/token.json

@@ -214,5 +214,41 @@
         }
       }
     }
+  },
+  "table": {
+    "header": {
+      "background": {
+        "value": {
+          "light": "#444",
+          "dark": "#444"
+        }
+      },
+      "text": {
+        "value": {
+          "light": "#e6e6e6",
+          "dark": "#e6e6e6"
+        }
+      }
+    },
+    "body": {
+      "background": {
+        "value": {
+          "light": "#fafafa",
+          "dark": "#111"
+        }
+      },
+      "background-even": {
+        "value": {
+          "light": "#e6e6e6",
+          "dark": "#222"
+        }
+      },
+      "text": {
+        "value": {
+          "light": "#333",
+          "dark": "#e6e6e6"
+        }
+      }
+    }
   }
 }