@seed-design/css 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/css",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/recipes/checkbox.css

@@ -11,107 +11,21 @@
 .seed-checkbox__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
-.seed-checkbox__control {
-    position: relative;
-    box-sizing: border-box;
-    flex-shrink: 0;
-}
-.seed-checkbox__icon {
-    display: none;
-    content: "";
-    position: absolute;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    text-align: center;
-    overflow: initial;
-}
 .seed-checkbox__label {
     color: var(--seed-color-fg-neutral);
 }
+.seed-checkbox__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
 .seed-checkbox__label--weight_default {
     font-weight: var(--seed-font-weight-regular);
 }
 .seed-checkbox__label--weight_stronger {
     font-weight: var(--seed-font-weight-bold);
 }
-.seed-checkbox__control--variant_square {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--seed-color-stroke-neutral-weak);
-}
-.seed-checkbox__control--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: var(--seed-color-bg-brand-solid);
-    border-width: 0;
-}
-.seed-checkbox__control--variant_square:is(:active, [data-active]) {
-    background: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-checkbox__control--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: var(--seed-color-bg-brand-solid-pressed);
-}
-.seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]) {
-    background: var(--seed-color-bg-disabled);
-    border-color: var(--seed-color-stroke-neutral-muted);
-}
-.seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
-    background: var(--seed-color-bg-disabled);
-}
-.seed-checkbox__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    display: block;
-    color: var(--seed-color-palette-static-white);
-}
-.seed-checkbox__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    display: block;
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__label--variant_square:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__control--variant_ghost {
-    background: none;
-}
-.seed-checkbox__control--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: none;
-}
-.seed-checkbox__control--variant_ghost:is(:active, [data-active]) {
-    background: var(--seed-color-bg-layer-default-pressed);
-}
-.seed-checkbox__control--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: var(--seed-color-palette-carrot-200);
-}
-.seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    background: none;
-}
-.seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
-    background: none;
-}
-.seed-checkbox__icon--variant_ghost {
-    display: block;
-    color: var(--seed-color-fg-placeholder);
-}
-.seed-checkbox__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    color: var(--seed-color-fg-brand);
-}
-.seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
-.seed-checkbox__label--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-color-fg-disabled);
-}
 .seed-checkbox__root--size_large {
     min-height: var(--seed-dimension-x9);
-}
-.seed-checkbox__control--size_large {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x6);
-    height: var(--seed-dimension-x6);
-    margin: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2) 0;
+    --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
 }
 .seed-checkbox__label--size_large {
     font-size: var(--seed-font-size-t5);
@@ -120,31 +34,10 @@
 }
 .seed-checkbox__root--size_medium {
     min-height: var(--seed-dimension-x8);
-}
-.seed-checkbox__control--size_medium {
-    border-radius: var(--seed-radius-r1);
-    width: var(--seed-dimension-x5);
-    height: var(--seed-dimension-x5);
-    margin: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2) 0;
+    --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
 }
 .seed-checkbox__label--size_medium {
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     margin-block-start: calc(16px - 0.59375rem);
-}
-.seed-checkbox__icon--size_medium-variant_ghost {
-    width: 14px;
-    height: 14px;
-}
-.seed-checkbox__icon--size_large-variant_ghost {
-    width: 18px;
-    height: 18px;
-}
-.seed-checkbox__icon--size_medium-variant_square {
-    width: 12px;
-    height: 12px;
-}
-.seed-checkbox__icon--size_large-variant_square {
-    width: 14px;
-    height: 14px;
 }

package/recipes/checkbox.d.ts

@@ -3,10 +3,6 @@ declare interface CheckboxVariant {
   * @default "default"
   */
   weight: "default" | "stronger";
-/**
-  * @default "square"
-  */
-  variant: "square" | "ghost";
 /**
   * @default "medium"
   */
@@ -19,7 +15,7 @@ declare type CheckboxVariantMap = {
 
 export declare type CheckboxVariantProps = Partial<CheckboxVariant>;
 
-export declare type CheckboxSlotName = "root" | "control" | "icon" | "label";
+export declare type CheckboxSlotName = "root" | "label";
 
 export declare const checkboxVariantMap: CheckboxVariantMap;
 

package/recipes/checkbox.mjs

@@ -6,14 +6,6 @@ const checkboxSlotNames = [
     "root",
     "seed-checkbox__root"
   ],
-  [
-    "control",
-    "seed-checkbox__control"
-  ],
-  [
-    "icon",
-    "seed-checkbox__icon"
-  ],
   [
     "label",
     "seed-checkbox__label"
@@ -22,38 +14,16 @@ const checkboxSlotNames = [
 
 const defaultVariant = {
   "size": "medium",
-  "variant": "square",
   "weight": "default"
 };
 
-const compoundVariants = [
-  {
-    "size": "medium",
-    "variant": "ghost"
-  },
-  {
-    "size": "large",
-    "variant": "ghost"
-  },
-  {
-    "size": "medium",
-    "variant": "square"
-  },
-  {
-    "size": "large",
-    "variant": "square"
-  }
-];
+const compoundVariants = [];
 
 export const checkboxVariantMap = {
   "weight": [
     "default",
     "stronger"
   ],
-  "variant": [
-    "square",
-    "ghost"
-  ],
   "size": [
     "large",
     "medium"

package/recipes/checkmark.css

@@ -0,0 +1,105 @@
+.seed-checkmark__root {
+    position: relative;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    margin-top: var(--checkmark-margin-top, 0);
+}
+.seed-checkmark__icon {
+    display: none;
+    content: "";
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    text-align: center;
+    overflow: initial;
+}
+.seed-checkmark__root--variant_square {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-weak);
+}
+.seed-checkmark__root--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: var(--seed-color-bg-brand-solid);
+    border-width: 0;
+}
+.seed-checkmark__root--variant_square:is(:active, [data-active]) {
+    background: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-checkmark__root--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: var(--seed-color-bg-brand-solid-pressed);
+}
+.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--seed-color-bg-disabled);
+    border-color: var(--seed-color-stroke-neutral-muted);
+}
+.seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
+    background: var(--seed-color-bg-disabled);
+}
+.seed-checkmark__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    display: block;
+    color: var(--seed-color-palette-static-white);
+}
+.seed-checkmark__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    display: block;
+    color: var(--seed-color-fg-disabled);
+}
+.seed-checkmark__root--variant_ghost {
+    background: none;
+}
+.seed-checkmark__root--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: none;
+}
+.seed-checkmark__root--variant_ghost:is(:active, [data-active]) {
+    background: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-checkmark__root--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: var(--seed-color-palette-carrot-200);
+}
+.seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    background: none;
+}
+.seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
+    background: none;
+}
+.seed-checkmark__icon--variant_ghost {
+    display: block;
+    color: var(--seed-color-fg-placeholder);
+}
+.seed-checkmark__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    color: var(--seed-color-fg-brand);
+}
+.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-checkmark__root--size_large {
+    border-radius: var(--seed-radius-r1);
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+}
+.seed-checkmark__root--size_medium {
+    border-radius: var(--seed-radius-r1);
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-checkmark__icon--size_medium-variant_ghost {
+    width: 14px;
+    height: 14px;
+}
+.seed-checkmark__icon--size_large-variant_ghost {
+    width: 18px;
+    height: 18px;
+}
+.seed-checkmark__icon--size_medium-variant_square {
+    width: 12px;
+    height: 12px;
+}
+.seed-checkmark__icon--size_large-variant_square {
+    width: 14px;
+    height: 14px;
+}

package/recipes/checkmark.d.ts

@@ -0,0 +1,28 @@
+declare interface CheckmarkVariant {
+  /**
+  * @default "square"
+  */
+  variant: "square" | "ghost";
+/**
+  * @default "medium"
+  */
+  size: "large" | "medium";
+}
+
+declare type CheckmarkVariantMap = {
+  [key in keyof CheckmarkVariant]: Array<CheckmarkVariant[key]>;
+};
+
+export declare type CheckmarkVariantProps = Partial<CheckmarkVariant>;
+
+export declare type CheckmarkSlotName = "root" | "icon";
+
+export declare const checkmarkVariantMap: CheckmarkVariantMap;
+
+export declare const checkmark: ((
+  props?: CheckmarkVariantProps,
+) => Record<CheckmarkSlotName, string>) & {
+  splitVariantProps: <T extends CheckmarkVariantProps>(
+    props: T,
+  ) => [CheckmarkVariantProps, Omit<T, keyof CheckmarkVariantProps>];
+}

package/recipes/checkmark.mjs

@@ -0,0 +1,65 @@
+import './checkmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const checkmarkSlotNames = [
+  [
+    "root",
+    "seed-checkmark__root"
+  ],
+  [
+    "icon",
+    "seed-checkmark__icon"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "variant": "square"
+};
+
+const compoundVariants = [
+  {
+    "size": "medium",
+    "variant": "ghost"
+  },
+  {
+    "size": "large",
+    "variant": "ghost"
+  },
+  {
+    "size": "medium",
+    "variant": "square"
+  },
+  {
+    "size": "large",
+    "variant": "square"
+  }
+];
+
+export const checkmarkVariantMap = {
+  "variant": [
+    "square",
+    "ghost"
+  ],
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const checkmarkVariantKeys = Object.keys(checkmarkVariantMap);
+
+export function checkmark(props) {
+  return Object.fromEntries(
+    checkmarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(checkmark, { splitVariantProps: (props) => splitVariantProps(props, checkmarkVariantMap) });
+
+// @recipe(seed): checkmark

package/recipes/chip-tabs.css

@@ -46,18 +46,31 @@
     white-space: nowrap;
     font-family: inherit;
     border-radius: var(--seed-radius-full);
-    padding: var(--seed-dimension-x2) var(--seed-dimension-x3_5);
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    font-weight: var(--seed-font-weight-medium);
+}
+.seed-chip-tabs__list--size_medium {
+    gap: 8px;
+}
+.seed-chip-tabs__trigger--size_medium {
     min-height: 36px;
     font-size: var(--seed-font-size-t4);
-    font-weight: var(--seed-font-weight-bold);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
 }
-.seed-chip-tabs__list--variant_neutralSolid {
-    gap: 0px;
+.seed-chip-tabs__list--size_large {
+    gap: 8px;
+}
+.seed-chip-tabs__trigger--size_large {
+    min-height: 40px;
+    font-size: var(--seed-font-size-t4);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
 }
 .seed-chip-tabs__trigger--variant_neutralSolid {
-    background-color: transparent;
+    background-color: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral);
-    font-weight: var(--seed-font-weight-bold);
 }
 .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
     background-color: var(--seed-color-bg-neutral-inverted);
@@ -77,18 +90,37 @@
     background-color: var(--seed-color-bg-disabled);
     color: var(--seed-color-fg-disabled);
 }
-.seed-chip-tabs__list--variant_brandSolid {
-    gap: 8px;
+.seed-chip-tabs__trigger--variant_neutralOutline {
+    background-color: transparent;
+    border: 1px solid var(--seed-color-stroke-neutral-muted);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-neutral-inverted);
+    border-color: transparent;
+    color: var(--seed-color-fg-neutral-inverted);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
+    background-color: var(--seed-color-bg-neutral-inverted-pressed);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+    color: var(--seed-color-fg-disabled);
+}
+.seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
+    background-color: var(--seed-color-bg-disabled);
+    color: var(--seed-color-fg-disabled);
 }
 .seed-chip-tabs__trigger--variant_brandSolid {
     background-color: var(--seed-color-bg-neutral-weak);
     color: var(--seed-color-fg-neutral-muted);
-    font-weight: var(--seed-font-weight-medium);
 }
 .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
     background-color: var(--seed-color-bg-brand-solid);
     color: var(--seed-color-palette-static-white);
-    font-weight: var(--seed-font-weight-bold);
 }
 .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
     background-color: var(--seed-color-bg-neutral-weak-pressed);

package/recipes/chip-tabs.d.ts

@@ -1,8 +1,12 @@
 declare interface ChipTabsVariant {
   /**
+  * @default "medium"
+  */
+  size: "medium" | "large";
+/**
   * @default "neutralSolid"
   */
-  variant: "neutralSolid" | "brandSolid";
+  variant: "neutralSolid" | "neutralOutline" | "brandSolid";
 /**
   * @default "hug"
   */

package/recipes/chip-tabs.mjs

@@ -29,6 +29,7 @@ const chipTabsSlotNames = [
 ];
 
 const defaultVariant = {
+  "size": "medium",
   "variant": "neutralSolid",
   "contentLayout": "hug",
   "stickyList": false
@@ -37,8 +38,13 @@ const defaultVariant = {
 const compoundVariants = [];
 
 export const chipTabsVariantMap = {
+  "size": [
+    "medium",
+    "large"
+  ],
   "variant": [
     "neutralSolid",
+    "neutralOutline",
     "brandSolid"
   ],
   "contentLayout": [

package/recipes/list-item.css

@@ -0,0 +1,102 @@
+.seed-list-item__root {
+    box-sizing: border-box;
+    border: none;
+    font-family: inherit;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: relative;
+    display: flex;
+    width: 100%;
+    z-index: 0;
+    padding-inline: var(--seed-dimension-spacing-x-global-gutter);
+    padding-block: var(--seed-dimension-x2_5);
+    --seed-box-align-items: center;
+    align-items: var(--seed-box-align-items);
+    transition-property: background-color;
+    transition-duration: var(--seed-duration-d3);
+    transition-timing-function: var(--seed-timing-function-easing);
+}
+.seed-list-item__prefix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    --seed-box-padding-right: var(--seed-dimension-x3);
+    padding-right: var(--seed-box-padding-right);
+    --seed-icon-size: 22px;
+    --seed-icon-color: var(--seed-color-fg-neutral);
+}
+.seed-list-item__prefix:is(:disabled, [disabled], [data-disabled]) {
+    --seed-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-list-item__suffix {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    --seed-box-position: initial;
+    position: var(--seed-box-position);
+    --seed-box-gap: var(--seed-dimension-x1);
+    gap: var(--seed-box-gap);
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-regular);
+    color: var(--seed-color-fg-neutral-subtle);
+    --seed-icon-size: 18px;
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-list-item__suffix:is(:disabled, [disabled], [data-disabled]) {
+    --seed-icon-color: var(--seed-color-fg-disabled);
+}
+.seed-list-item__content {
+    display: inline-flex;
+    box-sizing: border-box;
+    text-align: start;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-grow: 1;
+    --seed-box-gap: var(--seed-dimension-x0_5);
+    gap: var(--seed-box-gap);
+    --seed-box-padding-right: var(--seed-dimension-x2_5);
+    padding-right: var(--seed-box-padding-right);
+}
+.seed-list-item__content:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+}
+.seed-list-item__content:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    transition-property: background-color;
+    transition-duration: var(--seed-duration-d3);
+    transition-timing-function: var(--seed-timing-function-easing);
+}
+.seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
+    background-color: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
+    background-color: var(--seed-color-bg-layer-default-pressed);
+}
+.seed-list-item__title {
+    flex-shrink: 0;
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral);
+}
+.seed-list-item__title:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-list-item__detail {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular);
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-list-item__detail:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-neutral-subtle);
+}
+.seed-list-item__root--highlighted_true {
+    background-color: var(--seed-color-palette-carrot-100);
+}

package/recipes/list-item.d.ts

@@ -0,0 +1,24 @@
+declare interface ListItemVariant {
+  /**
+  * @default false
+  */
+  highlighted: boolean;
+}
+
+declare type ListItemVariantMap = {
+  [key in keyof ListItemVariant]: Array<ListItemVariant[key]>;
+};
+
+export declare type ListItemVariantProps = Partial<ListItemVariant>;
+
+export declare type ListItemSlotName = "root" | "content" | "title" | "detail" | "prefix" | "suffix";
+
+export declare const listItemVariantMap: ListItemVariantMap;
+
+export declare const listItem: ((
+  props?: ListItemVariantProps,
+) => Record<ListItemSlotName, string>) & {
+  splitVariantProps: <T extends ListItemVariantProps>(
+    props: T,
+  ) => [ListItemVariantProps, Omit<T, keyof ListItemVariantProps>];
+}