@seed-design/css 1.2.16 → 2.1.0

package/recipes/accordion.mjs

@@ -0,0 +1,94 @@
+import './accordion.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const accordionSlotNames = [
+  [
+    "root",
+    "seed-accordion__root"
+  ],
+  [
+    "item",
+    "seed-accordion__item"
+  ],
+  [
+    "header",
+    "seed-accordion__header"
+  ],
+  [
+    "trigger",
+    "seed-accordion__trigger"
+  ],
+  [
+    "prefix",
+    "seed-accordion__prefix"
+  ],
+  [
+    "body",
+    "seed-accordion__body"
+  ],
+  [
+    "title",
+    "seed-accordion__title"
+  ],
+  [
+    "description",
+    "seed-accordion__description"
+  ],
+  [
+    "suffixIcon",
+    "seed-accordion__suffixIcon"
+  ],
+  [
+    "content",
+    "seed-accordion__content"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "inline",
+  "size": "medium"
+};
+
+const compoundVariants = [
+  {
+    "variant": "separated",
+    "size": "medium"
+  },
+  {
+    "variant": "separated",
+    "size": "large"
+  },
+  {
+    "variant": "separated",
+    "size": "responsive"
+  }
+];
+
+export const accordionVariantMap = {
+  "variant": [
+    "inline",
+    "separated"
+  ],
+  "size": [
+    "medium",
+    "large",
+    "responsive"
+  ]
+};
+
+export const accordionVariantKeys = Object.keys(accordionVariantMap);
+
+export function accordion(props) {
+  return Object.fromEntries(
+    accordionSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(accordion, { splitVariantProps: (props) => splitVariantProps(props, accordionVariantMap) });
+
+// @recipe(seed): accordion

package/recipes/action-button.css

@@ -26,10 +26,30 @@
     padding-bottom: var(--seed-box-padding-bottom);
     padding-left: var(--seed-box-padding-left);
     padding-right: var(--seed-box-padding-right);
-    --seed-box-bleed-bottom: 0px;
-    --seed-box-bleed-top: 0px;
-    --seed-box-bleed-left: 0px;
-    --seed-box-bleed-right: 0px;
+    --seed-box-bleed-bottom-base: 0px;
+    --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
+    --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
+    --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
+    --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
+    --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
+    --seed-box-bleed-top-base: 0px;
+    --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
+    --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
+    --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
+    --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
+    --seed-box-bleed-top: var(--seed-box-bleed-top-base);
+    --seed-box-bleed-left-base: 0px;
+    --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
+    --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
+    --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
+    --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
+    --seed-box-bleed-left: var(--seed-box-bleed-left-base);
+    --seed-box-bleed-right-base: 0px;
+    --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
+    --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
+    --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
+    --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
+    --seed-box-bleed-right: var(--seed-box-bleed-right-base);
     margin-top: calc(var(--seed-box-bleed-top) * -1);
     margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
     margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -368,4 +388,36 @@
     --seed-box-padding-right: var(--seed-dimension-x3_5);
     --seed-box-padding-top: var(--seed-dimension-x3_5);
     --seed-box-padding-bottom: var(--seed-dimension-x3_5);
+}
+@media (min-width: 480px) {
+    .seed-action-button {
+        --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
+        --seed-box-bleed-top: var(--seed-box-bleed-top-sm);
+        --seed-box-bleed-left: var(--seed-box-bleed-left-sm);
+        --seed-box-bleed-right: var(--seed-box-bleed-right-sm);
+    }
+}
+@media (min-width: 768px) {
+    .seed-action-button {
+        --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
+        --seed-box-bleed-top: var(--seed-box-bleed-top-md);
+        --seed-box-bleed-left: var(--seed-box-bleed-left-md);
+        --seed-box-bleed-right: var(--seed-box-bleed-right-md);
+    }
+}
+@media (min-width: 1280px) {
+    .seed-action-button {
+        --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
+        --seed-box-bleed-top: var(--seed-box-bleed-top-lg);
+        --seed-box-bleed-left: var(--seed-box-bleed-left-lg);
+        --seed-box-bleed-right: var(--seed-box-bleed-right-lg);
+    }
+}
+@media (min-width: 1440px) {
+    .seed-action-button {
+        --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
+        --seed-box-bleed-top: var(--seed-box-bleed-top-xl);
+        --seed-box-bleed-left: var(--seed-box-bleed-left-xl);
+        --seed-box-bleed-right: var(--seed-box-bleed-right-xl);
+    }
 }

package/recipes/action-button.d.ts

@@ -1,13 +1,29 @@
 declare interface ActionButtonVariant {
   /**
+  * - `brandSolid`: 브랜드의 핵심 가치를 전달하며, 사용자 간 연결이 일어나는 서비스의 주요 기능에 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
+  * - `neutralSolid`: 대부분의 화면에서 CTA로 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
+  * - `neutralWeak`: CTA를 제외한 대부분의 액션에 사용됩니다.
+  * - `criticalSolid`: 삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다.
+  * - `brandOutline`: variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=neutralOutline과 조합하여 사용하는 것을 권장합니다.
+  * - `neutralOutline`: variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=brandOutline과 조합하여 사용하는 것을 권장합니다.
+  * - `ghost`: 배경 없이 텍스트와 아이콘만 표시됩니다. 모두 동일한 색상을 사용하는 조건에서 icon, prefix icon, suffix icon, label에 정의된 color를 변경할 수 있으며, label의 fontWeight를 `$font-weight.regular` 또는 `$font-weight.medium`으로 변경하여 주목도를 조절할 수 있습니다.
+  *
   * @default "brandSolid"
   */
   variant: "brandSolid" | "neutralSolid" | "neutralWeak" | "criticalSolid" | "brandOutline" | "neutralOutline" | "ghost";
 /**
+  * - `xsmall`: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
+  * - `small`: 화면 중앙에서 범용적으로 사용됩니다.
+  * - `medium`: 화면 중앙에서 범용적으로 사용됩니다.
+  * - `large`: 주로 CTA 역할로 사용됩니다.
+  *
   * @default "medium"
   */
   size: "xsmall" | "small" | "medium" | "large";
 /**
+  * - `withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
+  * - `iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
+  *
   * @default "withText"
   */
   layout: "withText" | "iconOnly";

package/recipes/action-button.layered.css

@@ -20,10 +20,30 @@
     padding-bottom: var(--seed-box-padding-bottom);
     padding-left: var(--seed-box-padding-left);
     padding-right: var(--seed-box-padding-right);
-    --seed-box-bleed-bottom: 0px;
-    --seed-box-bleed-top: 0px;
-    --seed-box-bleed-left: 0px;
-    --seed-box-bleed-right: 0px;
+    --seed-box-bleed-bottom-base: 0px;
+    --seed-box-bleed-bottom-sm: var(--seed-box-bleed-bottom-base);
+    --seed-box-bleed-bottom-md: var(--seed-box-bleed-bottom-sm);
+    --seed-box-bleed-bottom-lg: var(--seed-box-bleed-bottom-md);
+    --seed-box-bleed-bottom-xl: var(--seed-box-bleed-bottom-lg);
+    --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-base);
+    --seed-box-bleed-top-base: 0px;
+    --seed-box-bleed-top-sm: var(--seed-box-bleed-top-base);
+    --seed-box-bleed-top-md: var(--seed-box-bleed-top-sm);
+    --seed-box-bleed-top-lg: var(--seed-box-bleed-top-md);
+    --seed-box-bleed-top-xl: var(--seed-box-bleed-top-lg);
+    --seed-box-bleed-top: var(--seed-box-bleed-top-base);
+    --seed-box-bleed-left-base: 0px;
+    --seed-box-bleed-left-sm: var(--seed-box-bleed-left-base);
+    --seed-box-bleed-left-md: var(--seed-box-bleed-left-sm);
+    --seed-box-bleed-left-lg: var(--seed-box-bleed-left-md);
+    --seed-box-bleed-left-xl: var(--seed-box-bleed-left-lg);
+    --seed-box-bleed-left: var(--seed-box-bleed-left-base);
+    --seed-box-bleed-right-base: 0px;
+    --seed-box-bleed-right-sm: var(--seed-box-bleed-right-base);
+    --seed-box-bleed-right-md: var(--seed-box-bleed-right-sm);
+    --seed-box-bleed-right-lg: var(--seed-box-bleed-right-md);
+    --seed-box-bleed-right-xl: var(--seed-box-bleed-right-lg);
+    --seed-box-bleed-right: var(--seed-box-bleed-right-base);
     margin-top: calc(var(--seed-box-bleed-top) * -1);
     margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
     margin-left: calc(var(--seed-box-bleed-left) * -1);
@@ -418,4 +438,40 @@
     --seed-box-padding-top: var(--seed-dimension-x3_5);
     --seed-box-padding-bottom: var(--seed-dimension-x3_5);
   }
+
+  @media (width >= 480px) {
+    .seed-action-button {
+      --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm);
+      --seed-box-bleed-top: var(--seed-box-bleed-top-sm);
+      --seed-box-bleed-left: var(--seed-box-bleed-left-sm);
+      --seed-box-bleed-right: var(--seed-box-bleed-right-sm);
+    }
+  }
+
+  @media (width >= 768px) {
+    .seed-action-button {
+      --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-md);
+      --seed-box-bleed-top: var(--seed-box-bleed-top-md);
+      --seed-box-bleed-left: var(--seed-box-bleed-left-md);
+      --seed-box-bleed-right: var(--seed-box-bleed-right-md);
+    }
+  }
+
+  @media (width >= 1280px) {
+    .seed-action-button {
+      --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-lg);
+      --seed-box-bleed-top: var(--seed-box-bleed-top-lg);
+      --seed-box-bleed-left: var(--seed-box-bleed-left-lg);
+      --seed-box-bleed-right: var(--seed-box-bleed-right-lg);
+    }
+  }
+
+  @media (width >= 1440px) {
+    .seed-action-button {
+      --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-xl);
+      --seed-box-bleed-top: var(--seed-box-bleed-top-xl);
+      --seed-box-bleed-left: var(--seed-box-bleed-left-xl);
+      --seed-box-bleed-right: var(--seed-box-bleed-right-xl);
+    }
+  }
 }

package/recipes/app-bar.css

@@ -102,7 +102,4 @@
 }
 .seed-app-bar__icon--tone_transparent {
     color: var(--seed-icon-color, var(--seed-color-palette-static-white));
-}
-.seed-app-bar__background--divider_true {
-    box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
 }

package/recipes/app-bar.d.ts

@@ -11,10 +11,6 @@ declare interface AppBarVariant {
   * @default "layer"
   */
   tone: "layer" | "transparent";
-/**
-  * @default false
-  */
-  divider: boolean;
 }
 
 declare type AppBarVariantMap = {

package/recipes/app-bar.layered.css

@@ -122,8 +122,4 @@
   .seed-app-bar__icon--tone_transparent {
     color: var(--seed-icon-color, var(--seed-color-palette-static-white));
   }
-
-  .seed-app-bar__background--divider_true {
-    box-shadow: inset 0px calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-subtle);
-  }
 }

package/recipes/app-bar.layered.mjs

@@ -35,8 +35,7 @@ const appBarSlotNames = [
 const defaultVariant = {
   "theme": "cupertino",
   "transitionStyle": "slideFromRightIOS",
-  "tone": "layer",
-  "divider": false
+  "tone": "layer"
 };
 
 const compoundVariants = [];
@@ -54,9 +53,6 @@ export const appBarVariantMap = {
   "tone": [
     "layer",
     "transparent"
-  ],
-  "divider": [
-    true
   ]
 };
 

package/recipes/app-bar.mjs

@@ -35,8 +35,7 @@ const appBarSlotNames = [
 const defaultVariant = {
   "theme": "cupertino",
   "transitionStyle": "slideFromRightIOS",
-  "tone": "layer",
-  "divider": false
+  "tone": "layer"
 };
 
 const compoundVariants = [];
@@ -54,9 +53,6 @@ export const appBarVariantMap = {
   "tone": [
     "layer",
     "transparent"
-  ],
-  "divider": [
-    true
   ]
 };
 

package/recipes/app-screen.css

@@ -29,6 +29,9 @@
 .seed-app-screen__layer::-webkit-scrollbar {
     display: none;
 }
+.seed-app-screen__layer:focus {
+    outline: none;
+}
 .seed-app-screen__layer {
     background-color: var(--seed-color-bg-layer-default);
 }

package/recipes/app-screen.layered.css

@@ -34,6 +34,10 @@
     display: none;
   }
 
+  .seed-app-screen__layer:focus {
+    outline: none;
+  }
+
   .seed-app-screen__layer {
     background-color: var(--seed-color-bg-layer-default);
   }

package/recipes/attachment-input-item.css

@@ -0,0 +1,275 @@
+.seed-attachment-input-item__root {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--seed-dimension-x2_5);
+    height: 80px;
+    border-radius: var(--seed-radius-r3);
+    --remove-button-mask-size: var(--seed-dimension-x6);
+    --remove-button-mask-offset: var(--seed-dimension-x1_5);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-attachment-input-item__root:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+}
+.seed-attachment-input-item__root::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    -webkit-mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
+    -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+    -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-composite: source-out;
+    mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
+    mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+    mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
+    mask-repeat: no-repeat;
+    mask-composite: subtract;
+    transform: translateZ(0);
+}
+.seed-attachment-input-item__root[role='button']:not([aria-grabbed=true]):not([data-readonly]) {
+    cursor: grab;
+}
+.seed-attachment-input-item__root[aria-grabbed=true] {
+    --remove-button-mask-size: 0px;
+    --remove-button-mask-offset: 0px;
+}
+.seed-attachment-input-item__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+    -webkit-mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
+    -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+    -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-composite: source-out;
+    mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
+    mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+    mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
+    mask-repeat: no-repeat;
+    mask-composite: subtract;
+    transform: translateZ(0);
+}
+.seed-attachment-input-item__thumbnail {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--seed-dimension-x12);
+    height: var(--seed-dimension-x12);
+    background-color: var(--seed-color-bg-neutral-weak);
+    border-radius: var(--seed-radius-r2);
+    flex-shrink: 0;
+    --seed-icon-size: var(--seed-dimension-x6);
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-attachment-input-item__metadata {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-grow: 1;
+}
+.seed-attachment-input-item__name {
+    overflow: hidden;
+    word-break: break-all;
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-attachment-input-item__size {
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-regular);
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-attachment-input-item__backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    -webkit-mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
+    -webkit-mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+    -webkit-mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-composite: source-out;
+    mask-image: linear-gradient(black, black), url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="12" fill="white"/></svg>');
+    mask-size: 100% 100%, var(--remove-button-mask-size) var(--remove-button-mask-size);
+    mask-position: 0 0, right calc(0px - var(--remove-button-mask-offset)) top calc(0px - var(--remove-button-mask-offset));
+    mask-repeat: no-repeat;
+    mask-composite: subtract;
+    transform: translateZ(0);
+}
+.seed-attachment-input-item__actionButton {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: none;
+    padding: 0;
+    font: inherit;
+    background: transparent;
+    cursor: pointer;
+    border-radius: inherit;
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-attachment-input-item__actionButton {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-medium);
+    gap: var(--seed-dimension-x1);
+    --seed-icon-size: var(--seed-dimension-x6);
+}
+.seed-attachment-input-item__removeButton {
+    position: absolute;
+    top: calc(var(--seed-dimension-x1) * -1);
+    right: calc(var(--seed-dimension-x1) * -1);
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    padding: 0;
+    background-color: var(--seed-color-bg-layer-default);
+    border-radius: var(--seed-radius-full);
+    cursor: pointer;
+    transition: background-color 0.2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-attachment-input-item__removeButton {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+    --seed-icon-size: var(--seed-dimension-x2_5);
+    --seed-icon-color: var(--seed-color-fg-neutral);
+}
+@media (hover: hover) and (pointer: fine) {
+    .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+        background-color: var(--seed-color-bg-layer-default-pressed);
+    }
+}
+@media not all and (hover: hover) and (pointer: fine) {
+    .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+        background-color: var(--seed-color-bg-layer-default-pressed);
+    }
+}
+.seed-attachment-input-item__removeButton:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+    --seed-icon-color: var(--seed-color-fg-disabled);
+}
+[aria-grabbed=true] .seed-attachment-input-item__removeButton {
+    display: none;
+}
+.seed-attachment-input-item__root--type_general {
+    width: 160px;
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+}
+.seed-attachment-input-item__root--type_general::before {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+}
+.seed-attachment-input-item__thumbnail--type_general[data-has-overlay] {
+    display: none;
+}
+.seed-attachment-input-item__thumbnail--type_general:is([data-readonly]) {
+    --seed-icon-color: var(--seed-color-fg-disabled);
+}
+[aria-grabbed=true] .seed-attachment-input-item__thumbnail--type_general {
+    --seed-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-attachment-input-item__metadata--type_general[data-has-overlay] {
+    display: none;
+}
+.seed-attachment-input-item__name--type_general:is([data-readonly]) {
+    color: var(--seed-color-fg-disabled);
+}
+[aria-grabbed=true] .seed-attachment-input-item__name--type_general {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-attachment-input-item__size--type_general:is([data-readonly]) {
+    color: var(--seed-color-fg-disabled);
+}
+[aria-grabbed=true] .seed-attachment-input-item__size--type_general {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-attachment-input-item__actionButton--type_general {
+    color: var(--seed-color-fg-neutral-subtle);
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-attachment-input-item__root--type_image {
+    width: 80px;
+    transition: opacity 0.2s;
+}
+.seed-attachment-input-item__root--type_image::before {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
+}
+.seed-attachment-input-item__root--type_image:is([data-readonly]) {
+    opacity: 0.5;
+}
+.seed-attachment-input-item__root--type_image[aria-grabbed=true] {
+    opacity: 0.5;
+}
+.seed-attachment-input-item__thumbnail--type_image {
+    display: none;
+}
+.seed-attachment-input-item__metadata--type_image {
+    display: none;
+}
+.seed-attachment-input-item__badge--type_image {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--seed-dimension-x6);
+    padding-left: var(--seed-dimension-x1);
+    padding-right: var(--seed-dimension-x1);
+    background-color: var(--seed-color-bg-overlay);
+    border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3);
+}
+.seed-attachment-input-item__badgeLabel--type_image {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-palette-static-white);
+}
+.seed-attachment-input-item__backdrop--type_image {
+    background: var(--seed-color-bg-overlay);
+}
+.seed-attachment-input-item__actionButton--type_image {
+    color: var(--seed-color-palette-static-white);
+    --seed-icon-color: var(--seed-color-palette-static-white);
+}

package/recipes/attachment-input-item.d.ts

@@ -0,0 +1,24 @@
+declare interface AttachmentInputItemVariant {
+  /**
+  * @default "general"
+  */
+  type: "general" | "image";
+}
+
+declare type AttachmentInputItemVariantMap = {
+  [key in keyof AttachmentInputItemVariant]: Array<AttachmentInputItemVariant[key]>;
+};
+
+export declare type AttachmentInputItemVariantProps = Partial<AttachmentInputItemVariant>;
+
+export declare type AttachmentInputItemSlotName = "root" | "image" | "thumbnail" | "metadata" | "name" | "size" | "badge" | "badgeLabel" | "backdrop" | "actionButton" | "removeButton";
+
+export declare const attachmentInputItemVariantMap: AttachmentInputItemVariantMap;
+
+export declare const attachmentInputItem: ((
+  props?: AttachmentInputItemVariantProps,
+) => Record<AttachmentInputItemSlotName, string>) & {
+  splitVariantProps: <T extends AttachmentInputItemVariantProps>(
+    props: T,
+  ) => [AttachmentInputItemVariantProps, Omit<T, keyof AttachmentInputItemVariantProps>];
+}