@likelion-design/ui 0.1.5 → 0.1.7

package/README.md

@@ -23,31 +23,37 @@ import "@likelion-design/ui/styles.css";
 
 ### 2. 컴포넌트 사용
 
+#### 전체 가져오기
+
 ```tsx
 import { ActionButton, IconButton } from "@likelion-design/ui";
+import "@likelion-design/ui/styles.css";
+```
+
+#### 개별 컴포넌트 가져오기 (Tree-shaking 최적화)
+
+특정 컴포넌트와 그에 필요한 스타일만 선택적으로 불러올 수 있습니다:
+
+```tsx
+import { ActionButton } from "@likelion-design/ui/Button";
+import "@likelion-design/ui/dist/Button.css";
+```
+
+### 3. Tailwind CSS 통합 (선택 사항)
 
-function App() {
-  return (
-    <div>
-      <ActionButton
-        size="medium"
-        variant="primary"
-        onClick={() => console.log("clicked")}
-      >
-        Click me
-      </ActionButton>
-
-      <IconButton
-        size="large"
-        variant="primary"
-        icon={<YourIcon />}
-        aria-label="좋아요"
-      />
-    </div>
-  );
-}
+라이브러리의 디자인 토큰(색상 등)을 프로젝트의 Tailwind 설정에 통합하여 사용할 수 있습니다.
+
+`tailwind.config.js`:
+
+```javascript
+module.exports = {
+  presets: [require("@likelion-design/ui/tailwind-preset")],
+  // ...
+};
 ```
 
+이제 `text-semantic-fg-primary` 또는 `bg-primary-500`과 같은 클래스를 프로젝트 어디에서나 사용할 수 있습니다.
+
 ## 컴포넌트
 
 ### ActionButton

package/dist/Button.css

@@ -0,0 +1,415 @@
+/* src/stories/button.module.css */
+.storybook-button {
+  display: inline-block;
+  cursor: pointer;
+  border: 0;
+  border-radius: 3em;
+  font-weight: 700;
+  line-height: 1;
+  font-family:
+    "Nunito Sans",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+.storybook-button--primary {
+  background-color: #555ab9;
+  color: white;
+}
+.storybook-button--secondary {
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+  background-color: transparent;
+  color: #333;
+}
+.storybook-button--small {
+  padding: 10px 16px;
+  font-size: 12px;
+}
+.storybook-button--medium {
+  padding: 11px 20px;
+  font-size: 14px;
+}
+.storybook-button--large {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+.action-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family:
+    "Pretendard",
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    sans-serif;
+  font-weight: 600;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: fit-content;
+  white-space: nowrap;
+}
+.action-button--xlarge {
+  height: 56px;
+  padding: 0 24px;
+  font-size: 17px;
+  min-width: 34px;
+}
+.action-button--large {
+  height: 48px;
+  padding: 0 24px;
+  font-size: 17px;
+  min-width: 34px;
+}
+.action-button--medium {
+  height: 36px;
+  padding: 0 20px;
+  font-size: 15px;
+  min-width: 34px;
+}
+.action-button--small {
+  height: 28px;
+  padding: 0 16px;
+  font-size: 13px;
+  min-width: 30px;
+}
+.action-button--primary.action-button--solid {
+  background-color: var(--color-semantic-bg-primary);
+  color: var(--color-semantic-fg-inverted);
+}
+.action-button--primary.action-button--solid:hover:not(:disabled),
+.action-button--primary.action-button--solid.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-primary-hovered);
+}
+.action-button--primary.action-button--solid:disabled,
+.action-button--primary.action-button--solid.action-button--disabled {
+  background-color: var(--color-semantic-bg-normal-disabled);
+  color: var(--color-semantic-fg-disabled);
+  cursor: not-allowed;
+}
+.action-button--primary.action-button--outline {
+  background-color: transparent;
+  color: var(--color-semantic-fg-primary);
+  border: 1px solid var(--color-semantic-border-normal);
+}
+.action-button--primary.action-button--outline:hover:not(:disabled),
+.action-button--primary.action-button--outline.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+.action-button--primary.action-button--outline:disabled,
+.action-button--primary.action-button--outline.action-button--disabled {
+  color: var(--color-semantic-fg-disabled);
+  border-color: var(--color-semantic-border-weak);
+  background-color: var(--color-semantic-bg-white);
+  cursor: not-allowed;
+}
+.action-button--primary.action-button--ghost {
+  background-color: transparent;
+  color: var(--color-semantic-fg-primary);
+}
+.action-button--primary.action-button--ghost:hover:not(:disabled),
+.action-button--primary.action-button--ghost.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-primary-weak);
+}
+.action-button--primary.action-button--ghost:disabled,
+.action-button--primary.action-button--ghost.action-button--disabled {
+  color: var(--color-semantic-fg-disabled);
+  background-color: var(--color-semantic-bg-white);
+  cursor: not-allowed;
+}
+.action-button--neutral.action-button--solid {
+  background-color: var(--color-semantic-bg-inverted);
+  color: var(--color-semantic-fg-white);
+}
+.action-button--neutral.action-button--solid:hover:not(:disabled),
+.action-button--neutral.action-button--solid.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-inverted);
+}
+.action-button--neutral.action-button--solid:disabled,
+.action-button--neutral.action-button--solid.action-button--disabled {
+  background-color: var(--color-semantic-bg-normal-disabled);
+  color: var(--color-semantic-fg-disabled);
+  cursor: not-allowed;
+}
+.action-button--neutral.action-button--outline {
+  background-color: transparent;
+  color: var(--color-semantic-fg-normal);
+  border: 1px solid var(--color-semantic-border-normal);
+}
+.action-button--neutral.action-button--outline:hover:not(:disabled),
+.action-button--neutral.action-button--outline.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+.action-button--neutral.action-button--outline:disabled,
+.action-button--neutral.action-button--outline.action-button--disabled {
+  color: var(--color-semantic-fg-disabled);
+  border-color: var(--color-semantic-border-weak);
+  background-color: var(--color-semantic-bg-white);
+  cursor: not-allowed;
+}
+.action-button--neutral.action-button--ghost {
+  background-color: transparent;
+  color: var(--color-semantic-fg-normal);
+}
+.action-button--neutral.action-button--ghost:hover:not(:disabled),
+.action-button--neutral.action-button--ghost.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+.action-button--neutral.action-button--ghost:disabled,
+.action-button--neutral.action-button--ghost.action-button--disabled {
+  color: var(--color-semantic-fg-disabled);
+  cursor: not-allowed;
+}
+.action-button--secondary.action-button--solid {
+  background-color: var(--color-semantic-bg-normal);
+  color: var(--color-semantic-fg-normal);
+}
+.action-button--secondary.action-button--solid:hover:not(:disabled),
+.action-button--secondary.action-button--solid.action-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+.action-button--secondary.action-button--solid:disabled,
+.action-button--secondary.action-button--solid.action-button--disabled {
+  background-color: var(--color-semantic-bg-normal-disabled);
+  color: var(--color-semantic-fg-disabled);
+  cursor: not-allowed;
+}
+.action-button--loading {
+  position: relative;
+  pointer-events: none;
+}
+.action-button--loading .action-button__content {
+  opacity: 0;
+}
+.action-button__content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.action-button__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.action-button__spinner-svg {
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.action-button__spinner-circle {
+  opacity: 1;
+}
+.action-button--primary.action-button--solid.action-button--loading {
+  background-color: var(--color-semantic-bg-primary-hovered);
+  color: var(--color-semantic-fg-inverted);
+}
+.action-button--primary.action-button--outline.action-button--loading {
+  background-color: var(--color-semantic-bg-normal-hovered);
+  color: var(--color-semantic-fg-primary);
+}
+.action-button--primary.action-button--ghost.action-button--loading {
+  background-color: var(--color-semantic-bg-primary-weak);
+  color: var(--color-semantic-fg-primary);
+}
+.action-button--neutral.action-button--solid.action-button--loading {
+  background-color: var(--color-semantic-bg-inverted);
+  color: var(--color-semantic-fg-white);
+}
+.action-button--neutral.action-button--outline.action-button--loading {
+  background-color: var(--color-semantic-bg-normal-hovered);
+  color: var(--color-semantic-fg-normal);
+}
+.action-button--neutral.action-button--ghost.action-button--loading {
+  background-color: var(--color-semantic-bg-normal-hovered);
+  color: var(--color-semantic-fg-normal);
+}
+.action-button--secondary.action-button--solid.action-button--loading {
+  background-color: var(--color-semantic-bg-normal-hovered);
+  color: var(--color-semantic-fg-normal);
+}
+.action-button__prefix-icon,
+.action-button__suffix-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.action-button--small .action-button__prefix-icon,
+.action-button--small .action-button__suffix-icon {
+  width: 16px;
+  height: 16px;
+}
+.action-button--medium .action-button__prefix-icon,
+.action-button--medium .action-button__suffix-icon {
+  width: 18px;
+  height: 18px;
+}
+.action-button--large .action-button__prefix-icon,
+.action-button--large .action-button__suffix-icon {
+  width: 20px;
+  height: 20px;
+}
+.action-button--xlarge .action-button__prefix-icon,
+.action-button--xlarge .action-button__suffix-icon {
+  width: 24px;
+  height: 24px;
+}
+.action-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family:
+    "Pretendard",
+    -apple-system,
+    BlinkMacSystemFont,
+    system-ui,
+    sans-serif;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+  flex-shrink: 0;
+}
+.icon-button--xlarge {
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+}
+.icon-button--large {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+}
+.icon-button--medium {
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+}
+.icon-button--small {
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+}
+.icon-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.icon-button--xlarge .icon-button__icon,
+.icon-button--large .icon-button__icon {
+  width: 24px;
+  height: 24px;
+}
+.icon-button--medium .icon-button__icon {
+  width: 20px;
+  height: 20px;
+}
+.icon-button--small .icon-button__icon {
+  width: 16px;
+  height: 16px;
+}
+.icon-button--primary.icon-button--solid {
+  background-color: var(--color-semantic-bg-primary);
+  color: var(--color-semantic-fg-inverted);
+}
+.icon-button--primary.icon-button--solid:hover:not(:disabled),
+.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-primary-hovered);
+}
+.icon-button--primary.icon-button--solid:disabled,
+.icon-button--primary.icon-button--solid.icon-button--disabled {
+  background-color: var(--color-semantic-bg-normal-disabled);
+  color: var(--color-semantic-fg-disabled);
+  cursor: not-allowed;
+}
+.icon-button--primary.icon-button--outline {
+  background-color: transparent;
+  color: var(--color-semantic-fg-primary);
+  border: 1px solid var(--color-semantic-border-normal);
+}
+.icon-button--primary.icon-button--outline:hover:not(:disabled),
+.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+.icon-button--primary.icon-button--outline:disabled,
+.icon-button--primary.icon-button--outline.icon-button--disabled {
+  color: var(--color-semantic-fg-disabled);
+  border-color: var(--color-semantic-border-weak);
+  background-color: var(--color-semantic-bg-white);
+  cursor: not-allowed;
+}
+.icon-button--primary.icon-button--weak {
+  background-color: var(--color-semantic-bg-week-primary);
+  color: var(--color-semantic-fg-primary);
+}
+.icon-button--primary.icon-button--weak:hover:not(:disabled),
+.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-week-primary-hovered);
+}
+.icon-button--neutral.icon-button--solid {
+  background-color: var(--color-semantic-bg-inverted);
+  color: var(--color-semantic-fg-white);
+}
+.icon-button--neutral.icon-button--solid:hover:not(:disabled),
+.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-inverted);
+}
+.icon-button--neutral.icon-button--solid:disabled,
+.icon-button--neutral.icon-button--solid.icon-button--disabled {
+  background-color: var(--color-semantic-bg-normal-disabled);
+  color: var(--color-semantic-fg-disabled);
+  cursor: not-allowed;
+}
+.icon-button--neutral.icon-button--outline {
+  background-color: transparent;
+  color: var(--color-semantic-fg-normal);
+  border: 1px solid var(--color-semantic-border-normal);
+}
+.icon-button--neutral.icon-button--outline:hover:not(:disabled),
+.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-normal-hovered);
+}
+.icon-button--neutral.icon-button--outline:disabled,
+.icon-button--neutral.icon-button--outline.icon-button--disabled {
+  color: var(--color-semantic-fg-disabled);
+  border-color: var(--color-semantic-border-weak);
+  background-color: var(--color-semantic-bg-white);
+  cursor: not-allowed;
+}
+.icon-button--neutral.icon-button--weak {
+  background-color: var(--color-semantic-bg-week-neutral-dark);
+  color: var(--color-semantic-fg-normal);
+}
+.icon-button--neutral.icon-button--weak:hover:not(:disabled),
+.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {
+  background-color: var(--color-semantic-bg-week-neutral-dark-hovered);
+}
+.icon-button--neutral.icon-button--weak.dark {
+  color: var(--color-semantic-fg-white);
+}
+.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),
+.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+/*# sourceMappingURL=Button.css.map */

package/dist/Button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stories/button.module.css"],"sourcesContent":["/* 기존 스타일 유지 */\n.storybook-button {\n  display: inline-block;\n  cursor: pointer;\n  border: 0;\n  border-radius: 3em;\n  font-weight: 700;\n  line-height: 1;\n  font-family: \"Nunito Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n.storybook-button--primary {\n  background-color: #555ab9;\n  color: white;\n}\n.storybook-button--secondary {\n  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n  background-color: transparent;\n  color: #333;\n}\n.storybook-button--small {\n  padding: 10px 16px;\n  font-size: 12px;\n}\n.storybook-button--medium {\n  padding: 11px 20px;\n  font-size: 14px;\n}\n.storybook-button--large {\n  padding: 12px 24px;\n  font-size: 16px;\n}\n\n/* ActionButton 스타일 */\n.action-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  font-weight: 600;\n  border-radius: 8px;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  min-width: fit-content;\n  white-space: nowrap;\n}\n\n/* Size 스타일 */\n.action-button--xlarge {\n  height: 56px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--large {\n  height: 48px;\n  padding: 0 24px;\n  font-size: 17px;\n  min-width: 34px;\n}\n\n.action-button--medium {\n  height: 36px;\n  padding: 0 20px;\n  font-size: 15px;\n  min-width: 34px;\n}\n\n.action-button--small {\n  height: 28px;\n  padding: 0 16px;\n  font-size: 13px;\n  min-width: 30px;\n}\n\n/* Primary Solid 스타일 */\n.action-button--primary.action-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--solid:hover:not(:disabled),\n.action-button--primary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.action-button--primary.action-button--solid:disabled,\n.action-button--primary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.action-button--primary.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--primary.action-button--outline:hover:not(:disabled),\n.action-button--primary.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--primary.action-button--outline:disabled,\n.action-button--primary.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Ghost 스타일 */\n.action-button--primary.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost:hover:not(:disabled),\n.action-button--primary.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-primary-weak);\n}\n\n.action-button--primary.action-button--ghost:disabled,\n.action-button--primary.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Solid 스타일 */\n.action-button--neutral.action-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--solid:hover:not(:disabled),\n.action-button--neutral.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.action-button--neutral.action-button--solid:disabled,\n.action-button--neutral.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.action-button--neutral.action-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.action-button--neutral.action-button--outline:hover:not(:disabled),\n.action-button--neutral.action-button--outline.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--outline:disabled,\n.action-button--neutral.action-button--outline.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Ghost 스타일 */\n.action-button--neutral.action-button--ghost {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost:hover:not(:disabled),\n.action-button--neutral.action-button--ghost.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--neutral.action-button--ghost:disabled,\n.action-button--neutral.action-button--ghost.action-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Secondary Solid 스타일 */\n.action-button--secondary.action-button--solid {\n  background-color: var(--color-semantic-bg-normal);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid:hover:not(:disabled),\n.action-button--secondary.action-button--solid.action-button--hovered:not(\n    :disabled\n  ) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.action-button--secondary.action-button--solid:disabled,\n.action-button--secondary.action-button--solid.action-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Loading 상태 */\n.action-button--loading {\n  position: relative;\n  pointer-events: none;\n}\n\n.action-button--loading .action-button__content {\n  opacity: 0;\n}\n\n.action-button__content {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-button__spinner {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.action-button__spinner-svg {\n  width: 20px;\n  height: 20px;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.action-button__spinner-circle {\n  opacity: 1;\n}\n\n/* 로딩 상태일 때 hovered와 동일한 스타일 적용 */\n.action-button--primary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-hovered);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.action-button--primary.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--primary.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-primary-weak);\n  color: var(--color-semantic-fg-primary);\n}\n\n.action-button--neutral.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.action-button--neutral.action-button--outline.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--neutral.action-button--ghost.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n.action-button--secondary.action-button--solid.action-button--loading {\n  background-color: var(--color-semantic-bg-normal-hovered);\n  color: var(--color-semantic-fg-normal);\n}\n\n/* 아이콘 스타일 */\n.action-button__prefix-icon,\n.action-button__suffix-icon {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.action-button--small .action-button__prefix-icon,\n.action-button--small .action-button__suffix-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.action-button--medium .action-button__prefix-icon,\n.action-button--medium .action-button__suffix-icon {\n  width: 18px;\n  height: 18px;\n}\n\n.action-button--large .action-button__prefix-icon,\n.action-button--large .action-button__suffix-icon {\n  width: 20px;\n  height: 20px;\n}\n\n.action-button--xlarge .action-button__prefix-icon,\n.action-button--xlarge .action-button__suffix-icon {\n  width: 24px;\n  height: 24px;\n}\n\n.action-button__label {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* IconButton 스타일 */\n.icon-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: \"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui,\n    sans-serif;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  padding: 0;\n  flex-shrink: 0;\n}\n\n/* Size 스타일 */\n.icon-button--xlarge {\n  width: 56px;\n  height: 56px;\n  border-radius: 8px;\n}\n\n.icon-button--large {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n}\n\n.icon-button--medium {\n  width: 36px;\n  height: 36px;\n  border-radius: 4px;\n}\n\n.icon-button--small {\n  width: 28px;\n  height: 28px;\n  border-radius: 4px;\n}\n\n/* Icon 크기 */\n.icon-button__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.icon-button--xlarge .icon-button__icon,\n.icon-button--large .icon-button__icon {\n  width: 24px;\n  height: 24px;\n}\n\n.icon-button--medium .icon-button__icon {\n  width: 20px;\n  height: 20px;\n}\n\n.icon-button--small .icon-button__icon {\n  width: 16px;\n  height: 16px;\n}\n\n/* Primary Solid 스타일 */\n.icon-button--primary.icon-button--solid {\n  background-color: var(--color-semantic-bg-primary);\n  color: var(--color-semantic-fg-inverted);\n}\n\n.icon-button--primary.icon-button--solid:hover:not(:disabled),\n.icon-button--primary.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-primary-hovered);\n}\n\n.icon-button--primary.icon-button--solid:disabled,\n.icon-button--primary.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Primary Outline 스타일 */\n.icon-button--primary.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-primary);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--primary.icon-button--outline:hover:not(:disabled),\n.icon-button--primary.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--primary.icon-button--outline:disabled,\n.icon-button--primary.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Primary Weak 스타일 */\n.icon-button--primary.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-primary);\n  color: var(--color-semantic-fg-primary);\n}\n\n.icon-button--primary.icon-button--weak:hover:not(:disabled),\n.icon-button--primary.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-primary-hovered);\n}\n\n/* Neutral Solid 스타일 */\n.icon-button--neutral.icon-button--solid {\n  background-color: var(--color-semantic-bg-inverted);\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--solid:hover:not(:disabled),\n.icon-button--neutral.icon-button--solid.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-inverted);\n}\n\n.icon-button--neutral.icon-button--solid:disabled,\n.icon-button--neutral.icon-button--solid.icon-button--disabled {\n  background-color: var(--color-semantic-bg-normal-disabled);\n  color: var(--color-semantic-fg-disabled);\n  cursor: not-allowed;\n}\n\n/* Neutral Outline 스타일 */\n.icon-button--neutral.icon-button--outline {\n  background-color: transparent;\n  color: var(--color-semantic-fg-normal);\n  border: 1px solid var(--color-semantic-border-normal);\n}\n\n.icon-button--neutral.icon-button--outline:hover:not(:disabled),\n.icon-button--neutral.icon-button--outline.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-normal-hovered);\n}\n\n.icon-button--neutral.icon-button--outline:disabled,\n.icon-button--neutral.icon-button--outline.icon-button--disabled {\n  color: var(--color-semantic-fg-disabled);\n  border-color: var(--color-semantic-border-weak);\n  background-color: var(--color-semantic-bg-white);\n  cursor: not-allowed;\n}\n\n/* Neutral Weak 스타일 */\n.icon-button--neutral.icon-button--weak {\n  background-color: var(--color-semantic-bg-week-neutral-dark);\n  color: var(--color-semantic-fg-normal);\n}\n\n.icon-button--neutral.icon-button--weak:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.icon-button--hovered:not(:disabled) {\n  background-color: var(--color-semantic-bg-week-neutral-dark-hovered);\n}\n\n/* Weak 타입은 disabled 상태를 가지지 않음 - 어두운 배경일 때 */\n.icon-button--neutral.icon-button--weak.dark {\n  color: var(--color-semantic-fg-white);\n}\n\n.icon-button--neutral.icon-button--weak.dark:hover:not(:disabled),\n.icon-button--neutral.icon-button--weak.dark.icon-button--hovered:not(\n    :disabled\n  ) {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n"],"mappings":"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","names":[]}

package/dist/Button.d.mts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonSize = "xlarge" | "large" | "medium" | "small";
+type ButtonVariant = "primary" | "neutral" | "secondary";
+type ButtonShape = "solid" | "outline" | "ghost";
+type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
+type IconButtonSize = "xlarge" | "large" | "medium" | "small";
+type IconButtonVariant = "primary" | "neutral";
+type IconButtonType = "solid" | "outline" | "weak";
+type IconButtonState = "enabled" | "hovered" | "disabled";
+interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 버튼 크기 */
+    size?: ButtonSize;
+    /** 버튼 타입 (primary, neutral, secondary) */
+    variant?: ButtonVariant;
+    /** 버튼 모양 (solid, outline, ghost) */
+    shape?: ButtonShape;
+    /** 버튼 상태 */
+    state?: ButtonState;
+    /** 버튼 텍스트 */
+    children: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 로딩 상태일 때 표시할 스피너 */
+    loading?: boolean;
+}
+/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
+declare const ActionButton: ({ size, variant, shape, state, children, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: "small" | "medium" | "large";
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 크기 */
+    size?: IconButtonSize;
+    /** 버튼 타입 (primary 또는 neutral) */
+    variant?: IconButtonVariant;
+    /** 버튼 모양 (solid, outline, weak) */
+    iconType?: IconButtonType;
+    /** 버튼 상태 */
+    state?: IconButtonState;
+    /** 아이콘 (Heroicons 또는 React 컴포넌트) */
+    icon: React.ReactNode;
+    /** 아이콘에 대한 접근성 라벨 */
+    "aria-label": string;
+}
+/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
+declare const IconButton: ({ size, variant, iconType, state, icon, className, disabled, type, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, type IconButtonVariant };

package/dist/Button.d.ts

@@ -0,0 +1,63 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ButtonSize = "xlarge" | "large" | "medium" | "small";
+type ButtonVariant = "primary" | "neutral" | "secondary";
+type ButtonShape = "solid" | "outline" | "ghost";
+type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
+type IconButtonSize = "xlarge" | "large" | "medium" | "small";
+type IconButtonVariant = "primary" | "neutral";
+type IconButtonType = "solid" | "outline" | "weak";
+type IconButtonState = "enabled" | "hovered" | "disabled";
+interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    /** 버튼 크기 */
+    size?: ButtonSize;
+    /** 버튼 타입 (primary, neutral, secondary) */
+    variant?: ButtonVariant;
+    /** 버튼 모양 (solid, outline, ghost) */
+    shape?: ButtonShape;
+    /** 버튼 상태 */
+    state?: ButtonState;
+    /** 버튼 텍스트 */
+    children: React.ReactNode;
+    /** Prefix 아이콘 */
+    prefixIcon?: React.ReactNode;
+    /** Suffix 아이콘 */
+    suffixIcon?: React.ReactNode;
+    /** 로딩 상태일 때 표시할 스피너 */
+    loading?: boolean;
+}
+/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
+declare const ActionButton: ({ size, variant, shape, state, children, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: "small" | "medium" | "large";
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 크기 */
+    size?: IconButtonSize;
+    /** 버튼 타입 (primary 또는 neutral) */
+    variant?: IconButtonVariant;
+    /** 버튼 모양 (solid, outline, weak) */
+    iconType?: IconButtonType;
+    /** 버튼 상태 */
+    state?: IconButtonState;
+    /** 아이콘 (Heroicons 또는 React 컴포넌트) */
+    icon: React.ReactNode;
+    /** 아이콘에 대한 접근성 라벨 */
+    "aria-label": string;
+}
+/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
+declare const IconButton: ({ size, variant, iconType, state, icon, className, disabled, type, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, type IconButtonVariant };