@seed-design/css 1.2.16 → 2.0.0

package/recipes/menu-item.layered.mjs

@@ -0,0 +1,57 @@
+import './menu-item.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuItemSlotNames = [
+  [
+    "root",
+    "seed-menu-item__root"
+  ],
+  [
+    "body",
+    "seed-menu-item__body"
+  ],
+  [
+    "label",
+    "seed-menu-item__label"
+  ],
+  [
+    "description",
+    "seed-menu-item__description"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const menuItemVariantMap = {
+  "size": [
+    "medium",
+    "small",
+    "responsive"
+  ],
+  "tone": [
+    "neutral",
+    "critical"
+  ]
+};
+
+export const menuItemVariantKeys = Object.keys(menuItemVariantMap);
+
+export function menuItem(props) {
+  return Object.fromEntries(
+    menuItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menuItem, { splitVariantProps: (props) => splitVariantProps(props, menuItemVariantMap) });
+
+// @recipe(seed): menu-item

package/recipes/menu-item.mjs

@@ -0,0 +1,57 @@
+import './menu-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuItemSlotNames = [
+  [
+    "root",
+    "seed-menu-item__root"
+  ],
+  [
+    "body",
+    "seed-menu-item__body"
+  ],
+  [
+    "label",
+    "seed-menu-item__label"
+  ],
+  [
+    "description",
+    "seed-menu-item__description"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const menuItemVariantMap = {
+  "size": [
+    "medium",
+    "small",
+    "responsive"
+  ],
+  "tone": [
+    "neutral",
+    "critical"
+  ]
+};
+
+export const menuItemVariantKeys = Object.keys(menuItemVariantMap);
+
+export function menuItem(props) {
+  return Object.fromEntries(
+    menuItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menuItem, { splitVariantProps: (props) => splitVariantProps(props, menuItemVariantMap) });
+
+// @recipe(seed): menu-item

package/recipes/menu-sheet-item.d.ts

@@ -1,9 +1,15 @@
 declare interface MenuSheetItemVariant {
   /**
+  * - `neutral`: 일반적인 작업을 수행하는 기본 아이템입니다.
+  * - `critical`: 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
+  *
   * @default "neutral"
   */
   tone: "neutral" | "critical";
 /**
+  * - `left`: 라벨을 왼쪽 정렬합니다.
+  * - `center`: 라벨을 중앙 정렬합니다.
+  *
   * @default "left"
   */
   labelAlign: "left" | "center";

package/recipes/menu-sheet.css

@@ -32,11 +32,29 @@
     background: var(--seed-color-bg-layer-floating);
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    padding-top: var(--seed-dimension-x4);
+    padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
     padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);
 }
+.seed-menu-sheet__content:is(:focus, [data-focus]) {
+    outline: none;
+}
+.seed-menu-sheet__content[data-drawer] {
+    touch-action: none;
+    will-change: transform;
+    --menu-sheet-header-padding-top: var(--seed-dimension-x6);
+}
+.seed-menu-sheet__content[data-drawer]::after {
+    top: 100%;
+    height: 200vh;
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: inherit;
+    z-index: -1;
+}
 .seed-menu-sheet__header {
     display: flex;
     flex-direction: column;

package/recipes/menu-sheet.layered.css

@@ -24,7 +24,7 @@
     background: var(--seed-color-bg-layer-floating);
     padding-left: var(--seed-dimension-spacing-x-global-gutter);
     padding-right: var(--seed-dimension-spacing-x-global-gutter);
-    padding-top: var(--seed-dimension-x4);
+    padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
     padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
     border-top-left-radius: var(--seed-radius-r5);
     border-top-right-radius: var(--seed-radius-r5);
@@ -35,6 +35,27 @@
     position: relative;
   }
 
+  .seed-menu-sheet__content:is(:focus, [data-focus]) {
+    outline: none;
+  }
+
+  .seed-menu-sheet__content[data-drawer] {
+    touch-action: none;
+    will-change: transform;
+    --menu-sheet-header-padding-top: var(--seed-dimension-x6);
+  }
+
+  .seed-menu-sheet__content[data-drawer]:after {
+    content: "";
+    background: inherit;
+    z-index: -1;
+    height: 200vh;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+  }
+
   .seed-menu-sheet__header {
     text-align: center;
     align-items: center;

package/recipes/menu.css

@@ -0,0 +1,119 @@
+.seed-menu__positioner {
+    --menu-z-index: 99999;
+    z-index: calc(var(--menu-z-index) + var(--z-index-offset, 0));
+    outline: none;
+}
+.seed-menu__content {
+    border-radius: var(--seed-radius-r5);
+    background: var(--seed-color-bg-layer-floating);
+    box-shadow: var(--seed-shadow-s3);
+    transform-origin: var(--seed-menu-transform-origin);
+    overflow: hidden;
+}
+.seed-menu__content:is([data-state="open"], [data-open]) {
+    animation: seed-enter;
+    animation-timing-function: var(--seed-timing-function-enter);
+    animation-duration: var(--seed-duration-d3);
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 0.95;
+}
+.seed-menu__content:not(:is([data-state="open"], [data-open])) {
+    animation: seed-exit;
+    animation-timing-function: var(--seed-timing-function-exit);
+    animation-duration: var(--seed-duration-d2);
+    animation-fill-mode: forwards;
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: 0.95;
+}
+.seed-menu__content[data-instant] {
+    animation-duration: 0s;
+}
+.seed-menu__content:is([hidden], [data-hidden]) {
+    display: none !important;
+}
+.seed-menu__content:is(:focus, [data-focus]) {
+    outline: none;
+}
+.seed-menu__scrollArea {
+    overflow-y: auto;
+    max-height: min(480px, var(--seed-menu-available-height, 480px));
+    box-sizing: border-box;
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--seed-dimension-x2);
+}
+.seed-menu__group {
+    display: flex;
+    flex-direction: column;
+}
+.seed-menu__group + .seed-menu__group::before {
+    content: "";
+    display: block;
+    margin-left: var(--seed-dimension-x4);
+    margin-right: var(--seed-dimension-x4);
+    margin-bottom: var(--seed-dimension-x2);
+    height: 1px;
+    flex-shrink: 0;
+    background-color: var(--seed-color-stroke-neutral-muted);
+}
+.seed-menu__groupLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-menu__content--size_medium {
+    width: var(--seed-menu-reference-width, 240px);
+}
+.seed-menu__groupLabel--size_medium {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+}
+.seed-menu__content--size_small {
+    width: var(--seed-menu-reference-width, 200px);
+}
+.seed-menu__groupLabel--size_small {
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular);
+}
+.seed-menu__content--size_responsive {
+    width: var(--seed-menu-reference-width, 240px);
+}
+@media (min-width: 1280px) {
+    .seed-menu__content--size_responsive {
+        width: var(--seed-menu-reference-width, 200px);
+    }
+}
+.seed-menu__groupLabel--size_responsive {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+}
+@media (min-width: 1280px) {
+    .seed-menu__groupLabel--size_responsive {
+        padding-top: var(--seed-dimension-x2);
+        padding-bottom: var(--seed-dimension-x2);
+        padding-left: var(--seed-dimension-x4);
+        padding-right: var(--seed-dimension-x4);
+        font-size: var(--seed-font-size-t3);
+        line-height: var(--seed-line-height-t3);
+        font-weight: var(--seed-font-weight-regular);
+    }
+}

package/recipes/menu.d.ts

@@ -0,0 +1,28 @@
+declare interface MenuVariant {
+  /**
+  * - `medium`: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+  * - `small`: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+  * - `responsive`: 뷰포트 너비에 따라 적용되는 사이즈가 달라집니다. Breakpoint `lg` 미만에서는 `medium`, `lg` 이상에서는 `small`로 적용됩니다.
+  *
+  * @default "medium"
+  */
+  size: "medium" | "small" | "responsive";
+}
+
+declare type MenuVariantMap = {
+  [key in keyof MenuVariant]: Array<MenuVariant[key]>;
+};
+
+export declare type MenuVariantProps = Partial<MenuVariant>;
+
+export declare type MenuSlotName = "positioner" | "content" | "scrollArea" | "group" | "groupLabel";
+
+export declare const menuVariantMap: MenuVariantMap;
+
+export declare const menu: ((
+  props?: MenuVariantProps,
+) => Record<MenuSlotName, string>) & {
+  splitVariantProps: <T extends MenuVariantProps>(
+    props: T,
+  ) => [MenuVariantProps, Omit<T, keyof MenuVariantProps>];
+}

package/recipes/menu.layered.css

@@ -0,0 +1,139 @@
+@layer seed-components {
+  .seed-menu__positioner {
+    --menu-z-index: 99999;
+    z-index: calc(var(--menu-z-index) + var(--z-index-offset, 0));
+    outline: none;
+  }
+
+  .seed-menu__content {
+    border-radius: var(--seed-radius-r5);
+    background: var(--seed-color-bg-layer-floating);
+    box-shadow: var(--seed-shadow-s3);
+    transform-origin: var(--seed-menu-transform-origin);
+    overflow: hidden;
+  }
+
+  .seed-menu__content:is([data-state="open"], [data-open]) {
+    animation: seed-enter;
+    animation-timing-function: var(--seed-timing-function-enter);
+    animation-duration: var(--seed-duration-d3);
+    --seed-enter-translate-x: 0;
+    --seed-enter-translate-y: 0;
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: .95;
+  }
+
+  .seed-menu__content:not(:is([data-state="open"], [data-open])) {
+    animation: seed-exit;
+    animation-timing-function: var(--seed-timing-function-exit);
+    animation-duration: var(--seed-duration-d2);
+    --seed-exit-translate-x: 0;
+    --seed-exit-translate-y: 0;
+    --seed-exit-opacity: 0;
+    --seed-exit-scale: .95;
+    animation-fill-mode: forwards;
+  }
+
+  .seed-menu__content[data-instant] {
+    animation-duration: 0s;
+  }
+
+  .seed-menu__content:is([hidden], [data-hidden]) {
+    display: none !important;
+  }
+
+  .seed-menu__content:is(:focus, [data-focus]) {
+    outline: none;
+  }
+
+  .seed-menu__scrollArea {
+    max-height: min(480px, var(--seed-menu-available-height, 480px));
+    box-sizing: border-box;
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x2);
+    flex-direction: column;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .seed-menu__group {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .seed-menu__group + .seed-menu__group:before {
+    content: "";
+    margin-left: var(--seed-dimension-x4);
+    margin-right: var(--seed-dimension-x4);
+    margin-bottom: var(--seed-dimension-x2);
+    background-color: var(--seed-color-stroke-neutral-muted);
+    flex-shrink: 0;
+    height: 1px;
+    display: block;
+  }
+
+  .seed-menu__groupLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+  }
+
+  .seed-menu__content--size_medium {
+    width: var(--seed-menu-reference-width, 240px);
+  }
+
+  .seed-menu__groupLabel--size_medium {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  .seed-menu__content--size_small {
+    width: var(--seed-menu-reference-width, 200px);
+  }
+
+  .seed-menu__groupLabel--size_small {
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-menu__content--size_responsive {
+    width: var(--seed-menu-reference-width, 240px);
+  }
+
+  @media (width >= 1280px) {
+    .seed-menu__content--size_responsive {
+      width: var(--seed-menu-reference-width, 200px);
+    }
+  }
+
+  .seed-menu__groupLabel--size_responsive {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium);
+  }
+
+  @media (width >= 1280px) {
+    .seed-menu__groupLabel--size_responsive {
+      padding-top: var(--seed-dimension-x2);
+      padding-bottom: var(--seed-dimension-x2);
+      padding-left: var(--seed-dimension-x4);
+      padding-right: var(--seed-dimension-x4);
+      font-size: var(--seed-font-size-t3);
+      line-height: var(--seed-line-height-t3);
+      font-weight: var(--seed-font-weight-regular);
+    }
+  }
+}

package/recipes/menu.layered.mjs

@@ -0,0 +1,56 @@
+import './menu.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuSlotNames = [
+  [
+    "positioner",
+    "seed-menu__positioner"
+  ],
+  [
+    "content",
+    "seed-menu__content"
+  ],
+  [
+    "scrollArea",
+    "seed-menu__scrollArea"
+  ],
+  [
+    "group",
+    "seed-menu__group"
+  ],
+  [
+    "groupLabel",
+    "seed-menu__groupLabel"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const menuVariantMap = {
+  "size": [
+    "medium",
+    "small",
+    "responsive"
+  ]
+};
+
+export const menuVariantKeys = Object.keys(menuVariantMap);
+
+export function menu(props) {
+  return Object.fromEntries(
+    menuSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menu, { splitVariantProps: (props) => splitVariantProps(props, menuVariantMap) });
+
+// @recipe(seed): menu

package/recipes/menu.mjs

@@ -0,0 +1,56 @@
+import './menu.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuSlotNames = [
+  [
+    "positioner",
+    "seed-menu__positioner"
+  ],
+  [
+    "content",
+    "seed-menu__content"
+  ],
+  [
+    "scrollArea",
+    "seed-menu__scrollArea"
+  ],
+  [
+    "group",
+    "seed-menu__group"
+  ],
+  [
+    "groupLabel",
+    "seed-menu__groupLabel"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const menuVariantMap = {
+  "size": [
+    "medium",
+    "small",
+    "responsive"
+  ]
+};
+
+export const menuVariantKeys = Object.keys(menuVariantMap);
+
+export function menu(props) {
+  return Object.fromEntries(
+    menuSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menu, { splitVariantProps: (props) => splitVariantProps(props, menuVariantMap) });
+
+// @recipe(seed): menu

package/recipes/notification-badge.d.ts

@@ -1,5 +1,8 @@
 declare interface NotificationBadgeVariant {
   /**
+  * - `small`: 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요하거나 공간이 제한된 경우에 적합합니다. 내부 라벨은 지원하지 않습니다.
+  * - `large`: 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 세부 정보가 중요하고 충분한 공간이 있을 때 사용합니다. 내부 라벨을 반드시 포함해야 합니다.
+  *
   * @default "large"
   */
   size: "small" | "large";

package/recipes/page-banner.d.ts

@@ -1,9 +1,14 @@
 declare interface PageBannerVariant {
   /**
+  * - `weak`: 배경색이 연한 스타일입니다.
+  * - `solid`: 배경색이 진한 스타일입니다.
+  *
   * @default "weak"
   */
   variant: "weak" | "solid";
 /**
+  * - `magic`: AI 기능을 나타냅니다. variant=solid와 조합하여 사용하지 않습니다.
+  *
   * @default "neutral"
   */
   tone: "neutral" | "informative" | "positive" | "warning" | "critical" | "magic";

package/recipes/progress-circle.d.ts

@@ -1,9 +1,16 @@
 declare interface ProgressCircleVariant {
   /**
+  * - `neutral`: 가장 보편적으로 사용되며 스타일보다는 로딩 상태의 인식이 더 중요한 경우 사용합니다.
+  * - `brand`: 사용자 경험의 초기 단계에서 브랜드 컬러를 통해 주요 전환점을 강조할 때 사용합니다.
+  * - `staticWhite`: 화면 전체를 어둡게 덮는 오버레이(Overlay) 위에 로딩 상태를 표시할 때 사용합니다.
+  *
   * @default "neutral"
   */
   tone: "neutral" | "brand" | "staticWhite" | "inherit";
 /**
+  * - `24`: 특정 요소 안에서 사용하는 경우 사용합니다.
+  * - `40`: 주로 전체 페이지 로딩에 사용합니다.
+  *
   * @default 40
   */
   size: "24" | "40" | "inherit";

package/recipes/{selectBoxCheckmark.css → select-box-checkmark.css}

@@ -1,11 +1,11 @@
-.seed-selectBoxCheckmark__root {
+.seed-select-box-checkmark__root {
     position: relative;
     box-sizing: border-box;
     flex: none;
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
 }
-.seed-selectBoxCheckmark__icon {
+.seed-select-box-checkmark__icon {
     display: block;
     position: absolute;
     margin: auto;
@@ -21,18 +21,18 @@
     transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
 }
 @media (hover: hover) and (pointer: fine) {
-    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+    .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         color: var(--seed-color-fg-neutral-subtle);
     }
 }
 @media not all and (hover: hover) and (pointer: fine) {
-    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
         color: var(--seed-color-fg-neutral-subtle);
     }
 }
-.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
+.seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
     color: var(--seed-color-fg-neutral);
 }
-.seed-selectBoxCheckmark__icon:is(:disabled, [disabled], [data-disabled]) {
+.seed-select-box-checkmark__icon:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-color-fg-disabled);
 }