✨new(list): added new list component.

packages/assets/css/src/scss/_components/_list/_elements/_elements.scss

@@ -0,0 +1 @@
+@forward "./list-container";

packages/assets/css/src/scss/_components/_list/_elements/_list-container.scss

@@ -0,0 +1,169 @@
+@use "sass:math";
+@use "../../../_utils/utils" as *;
+
+/// Build Container
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-container($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		@include block($block) {
+			margin: 0;
+			display: flex;
+			flex-direction: column;
+			gap: $spacing-md;
+
+			@include element(item) {
+				position: relative;
+				display: flex;
+				gap: $spacing-md;
+				margin: 0;
+
+				p {
+					margin: 0;
+				}
+
+				&:before {
+					content: "";
+					position: absolute;
+					top: 0;
+					left: 0;
+					bottom: -#{$spacing-2xs};
+					width: $spacing-sm;
+					background-color: transparent;
+				}
+
+				@include modifier(action) {
+					cursor: pointer;
+				}
+
+				@include modifier(hover) {
+					background: $color-extended-neutral-95;
+				}
+
+				@include modifier(focus) {
+					outline: $spacing-xs solid $color-primary-50;
+					outline-offset: -#{$spacing-xs};
+				}
+
+				@include modifier(pro) {
+					background: $color-extended-neutral-95;
+					pointer-events: none;
+				}
+
+				@include modifier("pro-tag") {
+					display: flex;
+					align-items: center;
+					margin-left: auto;
+				}
+
+				@include modifier(neutral) {
+					&:before {
+						background-color: $color-extended-neutral-50;
+					}
+				}
+
+				@include modifier(info) {
+					&:before {
+						background-color: $color-primary-50;
+					}
+				}
+
+				@include modifier(warning) {
+					&:before {
+						background-color: $color-extended-warning-50;
+					}
+				}
+
+				@include modifier(success) {
+					&:before {
+						background-color: $color-extended-success-50;
+					}
+				}
+
+				@include modifier(critical) {
+					&:before {
+						background-color: $color-extended-error-50;
+					}
+				}
+
+				@include modifier(disabled) {
+					pointer-events: none;
+					color: $color-extended-neutral-70;
+				}
+			}
+
+			@include modifier(unordered, ordered) {
+				list-style: none;
+			}
+
+			@include modifier(overflow) {
+				overflow: hidden;
+			}
+
+			@include modifier(unstyled) {
+				list-style: revert;
+
+				@include modifies-element(item) {
+					display: list-item;
+				}
+			}
+
+			@include modifier(border) {
+				border-radius: $border-radius-xl;
+
+				@include modifies-element(item) {
+					&:first-child {
+						border-top-left-radius: inherit;
+						border-top-right-radius: inherit;
+					}
+					&:last-child {
+						border-bottom-left-radius: inherit;
+						border-bottom-right-radius: inherit;
+					}
+				}
+			}
+
+			@include modifier(border, flush) {
+				gap: 0;
+				border: $border-width-sm solid $color-extended-neutral-80;
+
+				@include modifies-element(item) {
+					padding: 20px $spacing-2xl;
+					border-bottom: $border-width-sm solid $color-extended-neutral-80;
+
+					&:last-child {
+						border-bottom: none;
+					}
+				}
+			}
+
+			@include modifier(flush) {
+				border-left: 0;
+				border-right: 0;
+			}
+		}
+	}
+
+	// DIR: Right to left.
+	// THEME: None.
+	@include sui-class($rtl: true, $theme: null) {
+		@include block($block) {
+			@include element(item) {
+				&:before {
+					left: unset;
+					right: 0;
+				}
+
+				@include modifier("pro-tag") {
+					margin-left: 0;
+					margin-right: auto;
+				}
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_list/_list.scss

@@ -0,0 +1,3 @@
+@use "./_elements/elements" as sui-list--element;
+
+@include sui-list--element.build-container(list);

packages/assets/css/src/scss/blocks/sui-components.scss

@@ -57,3 +57,4 @@
 @forward "../_components/_basic-box/basic-box";
 @forward "../_components/_popover/popover";
 @forward "../_components/_drawer/drawer";
+@forward "../_components/_list/list";

packages/docs/src/components/code/code.scss

@@ -1,44 +1,51 @@
 // Block.
 .sbdocs .csb-code {
-  display: inline-block;
-  padding: 4px 6px;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  font-family: ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New", monospace !important;
+	display: inline-block;
+	padding: 4px 6px;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	font-family: ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono",
+		"Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New",
+		monospace !important;
 
-  // Modifier(s).
-  &.csb-code {
+	// Modifier(s).
+	&.csb-code {
+		// THEME: Light (Default).
+		&--theme-light {
+			background: #e9eaee;
+			color: #1f2852;
+		}
 
-    // THEME: Light (Default).
-    &--theme-light {
-      background: #E9EAEE;
-      color: #1F2852;
-    }
+		// THEME: Dark.
+		&--theme-dark {
+			background: #1f2852;
+			color: #ffffff;
+		}
 
-    // THEME: Dark.
-    &--theme-dark {
-      background: #1F2852;
-      color: #FFFFFF;
-    }
+		// THEME: Ghost.
+		&--theme-ghost {
+			padding: 0;
+			background: transparent;
+			color: #1f2852;
+			line-height: 24px;
+		}
 
-    // THEME: Ghost.
-    &--theme-ghost {
-      padding: 0;
-      background: transparent;
-      color: #1F2852;
-      line-height: 24px;
-    }
+		// THEME: Red.
+		&--theme-red {
+			background: transparent;
+			color: #b71d00;
+		}
 
-    // SIZE: Small.
-    &--sm {
-      padding: 0 5px;
-      line-height: 20px;
-    }
-  }
+		// SIZE: Small.
+		&--sm {
+			padding: 0 5px;
+			line-height: 20px;
+		}
+	}
 
-  &--block {
-    display: block;
-    word-break: break-all;
-  }
+	&--block {
+		display: block;
+		word-break: break-all;
+	}
 }

packages/docs/src/components/code/code.tsx

@@ -16,7 +16,7 @@ import "./code.scss"
 
 interface CodeProps {
 	small?: boolean
-	theme?: "dark" | "ghost" | "light"
+	theme?: "dark" | "ghost" | "light" | "red"
 	fullWidth?: boolean
 	children: React.ReactNode
 	className?: string

packages/ui/list/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @wpmudev/sui-link
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial release
+- Updated dependencies
+  - @wpmudev/[email protected]
+  - @wpmudev/[email protected]
+  - @wpmudev/[email protected]
+  - @wpmudev/[email protected]
+  - @wpmudev/[email protected]