mm

packages/ui-web/src/componnets/button/ButtonIcon.tsx

@@ -1,9 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Slot } from "../../utils/Slot";
 
-type ButtonIconProps = ComponentPropsWithRef<"span">;
-
-export const ButtonIcon = (props: ButtonIconProps) => {
+export const ButtonIcon = (props: any) => {
   const { children, ...rest } = props;
-  return <span {...rest}>{children}</span>;
+  return <Slot {...rest}>{children}</Slot>;
 };
 ButtonIcon.displayName = "ButtonIcon";

packages/ui-web/src/componnets/button/ButtonLoading.tsx

@@ -1,9 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Slot } from "../../utils/Slot";
 
-type ButtonLoadingProps = ComponentPropsWithRef<"span">;
-
-export const ButtonLoading = (props: ButtonLoadingProps) => {
+export const ButtonLoading = (props: any) => {
   const { children, ...rest } = props;
-  return <span {...rest}>{children}</span>;
+  return <Slot {...rest}>{children}</Slot>;
 };
 ButtonLoading.displayName = "ButtonLoading";

packages/ui-web/src/styles/base/root.css

@@ -396,6 +396,6 @@
   --padding-xl: calc(var(--spacing) * 2);
   --padding-2xl: calc(var(--spacing) * 2);
 
-  --drop-shadow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
+  --drop-shadow-md: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
     drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
 }

packages/ui-web/src/styles/recipe/inlineSizeRecipe.ts

@@ -0,0 +1,15 @@
+import { cvr } from "../utils/cvr";
+
+export const inlineSizeRecipe = cvr({
+  base: "flex flex-nowrap justify-center items-center",
+  variants: {
+    size: {
+      xs: "text-xs h-inline-xs gap-xs",
+      sm: "text-sm h-inline-sm gap-sm",
+      md: "text-md h-inline-md gap-md",
+      lg: "text-lg h-inline-lg gap-lg",
+      xl: "text-xl h-inline-xl gap-xl",
+      "2xl": "text-2xl h-inline-2xl gap-2xl",
+    },
+  },
+});

packages/ui-web/src/styles/recipe/itemSizeRecipe.ts

@@ -1,7 +1,7 @@
 import { cvr } from "../utils/cvr";
 
 export const itemSizeRecipe = cvr({
-  base: "relative select-none flex flex-nowrap justify-center items-center",
+  base: "relative select-none display-flex flex-nowrap justify-center items-center",
   variants: {
     size: {
       xs: "text-xs h-item-xs gap-xs px-xs",
@@ -29,6 +29,7 @@ export const itemSizeRecipe = cvr({
     { iconOnly: false, size: "xl", class: "px-xl" },
     { iconOnly: false, size: "2xl", class: "px-2xl" },
     { shape: "rounded", size: "xs", class: "rounded-sm" },
+    // ==================================================
     {
       shape: "rounded",
       size: "sm",
@@ -54,7 +55,7 @@ export const itemSizeRecipe = cvr({
       size: "2xl",
       class: "rounded-3xl",
     },
-    // --------------------------------------------------
+    // ==================================================
     {
       iconOnly: true,
       size: "xs",

packages/ui-web/src/styles/utility/size-insensitive/align-content.css

@@ -1,37 +1,37 @@
 @layer utility {
-  .align-content-normal {
+  .align-content--normal {
     align-content: normal;
   }
 
-  .align-content-center {
+  .align-content--center {
     align-content: center;
   }
 
-  .align-content-start {
+  .align-content--start {
     align-content: flex-start;
   }
 
-  .align-content-end {
+  .align-content--end {
     align-content: flex-end;
   }
 
-  .align-content-between {
+  .align-content--between {
     align-content: space-between;
   }
 
-  .align-content-around {
+  .align-content--around {
     align-content: space-around;
   }
 
-  .align-content-evenly {
+  .align-content--evenly {
     align-content: space-evenly;
   }
 
-  .align-content-baseline {
+  .align-content--baseline {
     align-content: baseline;
   }
 
-  .align-content-stretch {
+  .align-content--stretch {
     align-content: stretch;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/align-items.css

@@ -1,33 +1,33 @@
 @layer utility {
-  .items-start {
+  .items--start {
     align-items: flex-start;
   }
 
-  .items-end {
+  .items--end {
     align-items: flex-end;
   }
 
-  .items-end-safe {
+  .items-end--safe {
     align-items: safe flex-end;
   }
 
-  .items-center {
+  .items--center {
     align-items: center;
   }
 
-  .items-center-safe {
+  .items--center-safe {
     align-items: safe center;
   }
 
-  .items-baseline {
+  .items--baseline {
     align-items: baseline;
   }
 
-  .items-baseline-last {
+  .items--baseline-last {
     align-items: last baseline;
   }
 
-  .items-stretch {
+  .items--stretch {
     align-items: stretch;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/align-self.css

@@ -1,37 +1,37 @@
 @layer utility {
-  .align-self-auto {
+  .align-self--auto {
     align-self: auto;
   }
 
-  .align-self-start {
+  .align-self--start {
     align-self: flex-start;
   }
 
-  .align-self-end {
+  .align-self--end {
     align-self: flex-end;
   }
 
-  .align-self-end-safe {
+  .align-self--end-safe {
     align-self: safe flex-end;
   }
 
-  .align-self-center {
+  .align-self--center {
     align-self: center;
   }
 
-  .align-self-center-safe {
+  .align-self--center-safe {
     align-self: safe center;
   }
 
-  .align-self-stretch {
+  .align-self--stretch {
     align-self: stretch;
   }
 
-  .align-self-baseline {
+  .align-self--baseline {
     align-self: baseline;
   }
 
-  .align-self-baseline-last {
+  .align-self--baseline-last {
     align-self: last baseline;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/animation.css

@@ -1,5 +1,5 @@
 @layer utility {
-  .animate-fade-in-down {
+  .animate--fade-in-down {
     animation: var(--animate-fade-in-down);
 
     @keyframes fade-in-down {
@@ -13,7 +13,7 @@
       }
     }
   }
-  .animate-fade-out-down {
+  .animate--fade-out-down {
     animation: var(--animate-fade-out-down);
   }
 
@@ -27,7 +27,7 @@
       transform: translate3d(0, 100%, 0);
     }
   }
-  .animate-fade-in-up {
+  .animate--fade-in-up {
     animation: var(--animate-fade-in-up);
   }
 
@@ -41,7 +41,7 @@
       transform: translate3d(0, 0, 0);
     }
   }
-  .animate-fade-out-up {
+  .animate--fade-out-up {
     animation: var(--animate-fade-out-up);
   }
 
@@ -55,7 +55,7 @@
       transform: translate3d(0, -100%, 0);
     }
   }
-  .animate-spin {
+  .animate--spin {
     animation: var(--animate-spin);
 
     @keyframes spin {
@@ -64,7 +64,7 @@
       }
     }
   }
-  .animate-ping {
+  .animate--ping {
     animation: var(--animate-ping);
 
     @keyframes ping {
@@ -75,7 +75,7 @@
       }
     }
   }
-  .animate-pulse {
+  .animate--pulse {
     animation: var(--animate-pulse);
 
     @keyframes pulse {
@@ -84,7 +84,7 @@
       }
     }
   }
-  .animate-bounce {
+  .animate--bounce {
     animation: var(--animate-bounce); /* bounce 1s infinite */
 
     @keyframes bounce {
@@ -99,7 +99,7 @@
       }
     }
   }
-  .animate-none {
+  .animate--none {
     animation: none;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css

@@ -1,9 +1,9 @@
 @layer utility {
-  .box-decoration-clone {
+  .box-decoration--clone {
     box-decoration-break: clone;
   }
 
-  .box-decoration-slice {
+  .box-decoration--slice {
     box-decoration-break: slice;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/box-inside.css

@@ -1,17 +1,17 @@
 @layer utility {
-  .break-inside-auto {
+  .break-inside--auto {
     break-inside: auto;
   }
 
-  .break-inside-avoid {
+  .break-inside--avoid {
     break-inside: avoid;
   }
 
-  .break-inside-avoid-page {
+  .break-inside--avoid-page {
     break-inside: avoid-page;
   }
 
-  .break-inside-avoid-column {
+  .break-inside--avoid-column {
     break-inside: avoid-column;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/box-sizing.css

@@ -1,9 +1,9 @@
 @layer utility {
-  .box-sizing-border {
+  .box-sizing--border {
     box-sizing: border-box;
   }
 
-  .box-sizing-content {
+  .box-sizing--content {
     box-sizing: content-box;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/brand.css

@@ -1,5 +1,5 @@
 @layer utility {
-  .brand-info {
+  .brand--info {
     --brand-bg: var(--info-bg);
     --brand-bg-hover: var(--info-bg-hover);
     --brand-bg-active: var(--info-bg-active);
@@ -7,7 +7,7 @@
     --brand-bg-low-hover: var(--info-bg-low-hover);
     --brand-bg-low-active: var(--info-bg-low-active);
   }
-  .brand-danger {
+  .brand--danger {
     --brand-bg: var(--danger-bg);
     --brand-bg-hover: var(--danger-bg-hover);
     --brand-bg-active: var(--danger-bg-active);
@@ -15,7 +15,7 @@
     --brand-bg-low-hover: var(--danger-bg-low-hover);
     --brand-bg-low-active: var(--danger-bg-low-active);
   }
-  .brand-success {
+  .brand--success {
     --brand-bg: var(--success-bg);
     --brand-bg-hover: var(--success-bg-hover);
     --brand-bg-active: var(--success-bg-active);
@@ -23,7 +23,7 @@
     --brand-bg-low-hover: var(--success-bg-low-hover);
     --brand-bg-low-active: var(--success-bg-low-active);
   }
-  .brand-warning {
+  .brand--warning {
     --brand-bg: var(--warning-bg);
     --brand-bg-hover: var(--warning-bg-hover);
     --brand-bg-active: var(--warning-bg-active);
@@ -31,7 +31,7 @@
     --brand-bg-low-hover: var(--warning-bg-low-hover);
     --brand-bg-low-active: var(--warning-bg-low-active);
   }
-  .brand-default {
+  .brand--default {
     --brand-bg: var(--default-bg);
     --brand-bg-hover: var(--default-bg-hover);
     --brand-bg-active: var(--default-bg-active);

packages/ui-web/src/styles/utility/size-insensitive/break-after.css

@@ -1,33 +1,33 @@
 @layer utility {
-  .break-after-auto {
+  .break-after--auto {
     break-after: auto;
   }
 
-  .break-after-avoid {
+  .break-after--avoid {
     break-after: avoid;
   }
 
-  .break-after-all {
+  .break-after--all {
     break-after: all;
   }
 
-  .break-after-avoid-page {
+  .break-after--avoid-page {
     break-after: avoid-page;
   }
 
-  .break-after-page {
+  .break-after--page {
     break-after: page;
   }
 
-  .break-after-left {
+  .break-after--left {
     break-after: left;
   }
 
-  .break-after-right {
+  .break-after--right {
     break-after: right;
   }
 
-  .break-after-column {
+  .break-after--column {
     break-after: column;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/break-before.css

@@ -1,33 +1,33 @@
 @layer utility {
-  .break-before-auto {
+  .break-before--auto {
     break-before: auto;
   }
 
-  .break-before-avoid {
+  .break-before--avoid {
     break-before: avoid;
   }
 
-  .break-before-all {
+  .break-before--all {
     break-before: all;
   }
 
-  .break-before-avoid-page {
+  .break-before--avoid-page {
     break-before: avoid-page;
   }
 
-  .break-before-page {
+  .break-before--page {
     break-before: page;
   }
 
-  .break-before-left {
+  .break-before--left {
     break-before: left;
   }
 
-  .break-before-right {
+  .break-before--right {
     break-before: right;
   }
 
-  .break-before-column {
+  .break-before--column {
     break-before: column;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/cursor.css

@@ -1,111 +1,111 @@
 @layer utility {
   /* ===== 基础光标 ===== */
-  .cursor-auto {
+  .cursor--auto {
     cursor: auto;
   }
-  .cursor-default {
+  .cursor--default {
     cursor: default;
   }
-  .cursor-pointer {
+  .cursor--pointer {
     cursor: pointer;
   }
-  .cursor-wait {
+  .cursor--wait {
     cursor: wait;
   }
-  .cursor-text {
+  .cursor--text {
     cursor: text;
   }
-  .cursor-move {
+  .cursor--move {
     cursor: move;
   }
-  .cursor-help {
+  .cursor--help {
     cursor: help;
   }
-  .cursor-not-allowed {
+  .cursor--not-allowed {
     cursor: not-allowed;
   }
 
   /* ===== 拖拽 / 抓取 ===== */
-  .cursor-grab {
+  .cursor--grab {
     cursor: grab;
   }
-  .cursor-grabbing {
+  .cursor--grabbing {
     cursor: grabbing;
   }
 
   /* ===== 调整大小（通用 & 方向）===== */
-  .cursor-resize {
+  .cursor--resize {
     cursor: resize;
   }
-  .cursor-ew-resize {
+  .cursor--ew-resize {
     cursor: ew-resize;
   }
-  .cursor-ns-resize {
+  .cursor--ns-resize {
     cursor: ns-resize;
   }
-  .cursor-nesw-resize {
+  .cursor--nesw-resize {
     cursor: nesw-resize;
   }
-  .cursor-nwse-resize {
+  .cursor--nwse-resize {
     cursor: nwse-resize;
   }
-  .cursor-col-resize {
+  .cursor--col-resize {
     cursor: col-resize;
   }
-  .cursor-row-resize {
+  .cursor--row-resize {
     cursor: row-resize;
   }
 
-  .cursor-n-resize {
+  .cursor--n-resize {
     cursor: n-resize;
   }
-  .cursor-e-resize {
+  .cursor--e-resize {
     cursor: e-resize;
   }
-  .cursor-s-resize {
+  .cursor--s-resize {
     cursor: s-resize;
   }
-  .cursor-w-resize {
+  .cursor--w-resize {
     cursor: w-resize;
   }
-  .cursor-ne-resize {
+  .cursor--ne-resize {
     cursor: ne-resize;
   }
-  .cursor-nw-resize {
+  .cursor--nw-resize {
     cursor: nw-resize;
   }
-  .cursor-se-resize {
+  .cursor--se-resize {
     cursor: se-resize;
   }
-  .cursor-sw-resize {
+  .cursor--sw-resize {
     cursor: sw-resize;
   }
 
   /* ===== 视觉反馈 ===== */
-  .cursor-crosshair {
+  .cursor--crosshair {
     cursor: crosshair;
   }
-  .cursor-progress {
+  .cursor--progress {
     cursor: progress;
   }
-  .cursor-no-drop {
+  .cursor--no-drop {
     cursor: no-drop;
   }
-  .cursor-vertical-text {
+  .cursor--vertical-text {
     cursor: vertical-text;
   }
 
   /* ===== 现代 / 扩展光标 ===== */
-  .cursor-zoom-in {
+  .cursor--zoom-in {
     cursor: zoom-in;
   }
-  .cursor-zoom-out {
+  .cursor--zoom-out {
     cursor: zoom-out;
   }
-  .cursor-alias {
+  .cursor--alias {
     cursor: alias;
   }
-  .cursor-copy {
+  .cursor--copy {
     cursor: copy;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/display.css

@@ -1,90 +1,90 @@
 @layer utility {
   /* 基础 display */
-  .display-inline {
+  .display--inline {
     display: inline;
   }
 
-  .display-block {
+  .display--block {
     display: block;
   }
 
-  .display-inline-block {
+  .display--inline-block {
     display: inline-block;
   }
 
-  .display-flow-root {
+  .display--flow-root {
     display: flow-root;
   }
 
-  .display-contents {
+  .display--contents {
     display: contents;
   }
 
-  .display-none {
+  .display--none {
     display: none;
   }
 
   /* Flex */
-  .display-flex {
+  .display--flex {
     display: flex;
   }
 
-  .display-inline-flex {
+  .display--inline-flex {
     display: inline-flex;
   }
 
   /* Grid */
-  .display-grid {
+  .display--grid {
     display: grid;
   }
 
-  .display-inline-grid {
+  .display--inline-grid {
     display: inline-grid;
   }
 
   /* Table */
-  .display-table {
+  .display--table {
     display: table;
   }
 
-  .display-inline-table {
+  .display--inline-table {
     display: inline-table;
   }
 
-  .display-table-caption {
+  .display--table-caption {
     display: table-caption;
   }
 
-  .display-table-cell {
+  .display--table-cell {
     display: table-cell;
   }
 
-  .display-table-column {
+  .display--table-column {
     display: table-column;
   }
 
-  .display-table-column-group {
+  .display--table-column-group {
     display: table-column-group;
   }
 
-  .display-table-footer-group {
+  .display--table-footer-group {
     display: table-footer-group;
   }
 
-  .display-table-header-group {
+  .display--table-header-group {
     display: table-header-group;
   }
 
-  .display-table-row-group {
+  .display--table-row-group {
     display: table-row-group;
   }
 
-  .display-table-row {
+  .display--table-row {
     display: table-row;
   }
 
   /* List */
-  .display-list-item {
+  .display--list-item {
     display: list-item;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css

@@ -1,5 +1,5 @@
 @layer utility {
-  .drop-shadow {
-    filter: var(--drop-shadow);
+  .drop-shadow--md {
+    filter: var(--drop-shadow-md);
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css

@@ -1,14 +1,14 @@
 @layer utility {
-  .flex-direction-row {
+  .flex-direction--row {
     flex-direction: row;
   }
-  .flex-direction-row-reverse {
+  .flex-direction--row-reverse {
     flex-direction: row-reverse;
   }
-  .flex-direction-col {
+  .flex-direction--col {
     flex-direction: column;
   }
-  .flex-direction-col-reverse {
+  .flex-direction--col-reverse {
     flex-direction: column-reverse;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/flex-wrap.css

@@ -1,13 +1,13 @@
 @layer utility {
-  .flex-nowrap {
+  .flex--nowrap {
     flex-wrap: nowrap;
   }
 
-  .flex-wrap {
+  .flex--wrap {
     flex-wrap: wrap;
   }
 
-  .flex-wrap-reverse {
+  .flex--wrap-reverse {
     flex-wrap: wrap-reverse;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/font-family.css

@@ -1,11 +1,11 @@
 @layer utility {
-  .font-family-sans {
+  .font-family--sans {
     font-family: var(--font-sans);
   }
-  .font-family-serif {
+  .font-family--serif {
     font-family: var(--font-serif);
   }
-  .font-family-mono {
+  .font-family--mono {
     font-family: var(--font-mono);
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/justify-content.css

@@ -1,45 +1,45 @@
 @layer utility {
-  .justify-start {
+  .justify--start {
     justify-content: flex-start;
   }
 
-  .justify-end {
+  .justify--end {
     justify-content: flex-end;
   }
 
-  .justify-end-safe {
+  .justify--end-safe {
     justify-content: safe flex-end;
   }
 
-  .justify-center {
+  .justify--center {
     justify-content: center;
   }
 
-  .justify-center-safe {
+  .justify--center-safe {
     justify-content: safe center;
   }
 
-  .justify-between {
+  .justify--between {
     justify-content: space-between;
   }
 
-  .justify-around {
+  .justify--around {
     justify-content: space-around;
   }
 
-  .justify-evenly {
+  .justify--evenly {
     justify-content: space-evenly;
   }
 
-  .justify-stretch {
+  .justify--stretch {
     justify-content: stretch;
   }
 
-  .justify-baseline {
+  .justify--baseline {
     justify-content: baseline;
   }
 
-  .justify-normal {
+  .justify--normal {
     justify-content: normal;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/justify-items.css

@@ -1,29 +1,29 @@
 @layer utility {
-  .justify-items-start {
+  .justify-items--start {
     justify-items: start;
   }
 
-  .justify-items-end {
+  .justify-items--end {
     justify-items: end;
   }
 
-  .justify-items-end-safe {
+  .justify-items--end-safe {
     justify-items: safe end;
   }
 
-  .justify-items-center {
+  .justify-items--center {
     justify-items: center;
   }
 
-  .justify-items-center-safe {
+  .justify-items--center-safe {
     justify-items: safe center;
   }
 
-  .justify-items-stretch {
+  .justify-items--stretch {
     justify-items: stretch;
   }
 
-  .justify-items-normal {
+  .justify-items--normal {
     justify-items: normal;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/justify-self.css

@@ -1,29 +1,29 @@
 @layer utility {
-  .justify-self-auto {
+  .justify-self--auto {
     justify-self: auto;
   }
 
-  .justify-self-start {
+  .justify-self--start {
     justify-self: start;
   }
 
-  .justify-self-center {
+  .justify-self--center {
     justify-self: center;
   }
 
-  .justify-self-center-safe {
+  .justify-self--center-safe {
     justify-self: safe center;
   }
 
-  .justify-self-end {
+  .justify-self--end {
     justify-self: end;
   }
 
-  .justify-self-end-safe {
+  .justify-self--end-safe {
     justify-self: safe end;
   }
 
-  .justify-self-stretch {
+  .justify-self--stretch {
     justify-self: stretch;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/overflow.css

@@ -1,61 +1,61 @@
 @layer utility {
-  .overflow-auto {
+  .overflow--auto {
     overflow: auto;
   }
 
-  .overflow-hidden {
+  .overflow--hidden {
     overflow: hidden;
   }
 
-  .overflow-clip {
+  .overflow--clip {
     overflow: clip;
   }
 
-  .overflow-visible {
+  .overflow--visible {
     overflow: visible;
   }
 
-  .overflow-scroll {
+  .overflow--scroll {
     overflow: scroll;
   }
 
-  .overflow-x-auto {
+  .overflow--x--auto {
     overflow-x: auto;
   }
 
-  .overflow-y-auto {
+  .overflow--y--auto {
     overflow-y: auto;
   }
 
-  .overflow-x-hidden {
+  .overflow--x--hidden {
     overflow-x: hidden;
   }
 
-  .overflow-y-hidden {
+  .overflow--y--hidden {
     overflow-y: hidden;
   }
 
-  .overflow-x-clip {
+  .overflow--x--clip {
     overflow-x: clip;
   }
 
-  .overflow-y-clip {
+  .overflow--y--clip {
     overflow-y: clip;
   }
 
-  .overflow-x-visible {
+  .overflow--x--visible {
     overflow-x: visible;
   }
 
-  .overflow-y-visible {
+  .overflow--y--visible {
     overflow-y: visible;
   }
 
-  .overflow-x-scroll {
+  .overflow--x--scroll {
     overflow-x: scroll;
   }
 
-  .overflow-y-scroll {
+  .overflow--y--scroll {
     overflow-y: scroll;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css

@@ -1,37 +1,37 @@
 @layer utility {
-  .overscroll-auto {
+  .overscroll--auto {
     overscroll-behavior: auto;
   }
 
-  .overscroll-contain {
+  .overscroll--contain {
     overscroll-behavior: contain;
   }
 
-  .overscroll-none {
+  .overscroll--none {
     overscroll-behavior: none;
   }
 
-  .overscroll-x-auto {
+  .overscroll--x--auto {
     overscroll-behavior-x: auto;
   }
 
-  .overscroll-x-contain {
+  .overscroll--x--contain {
     overscroll-behavior-x: contain;
   }
 
-  .overscroll-x-none {
+  .overscroll--x--none {
     overscroll-behavior-x: none;
   }
 
-  .overscroll-y-auto {
+  .overscroll--y--auto {
     overscroll-behavior-y: auto;
   }
 
-  .overscroll-y-contain {
+  .overscroll--y--contain {
     overscroll-behavior-y: contain;
   }
 
-  .overscroll-y-none {
+  .overscroll--y--none {
     overscroll-behavior-y: none;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/position.css

@@ -1,21 +1,21 @@
 @layer utility {
-  .position-static {
+  .position--static {
     position: static;
   }
 
-  .position-fixed {
+  .position--fixed {
     position: fixed;
   }
 
-  .position-absolute {
+  .position--absolute {
     position: absolute;
   }
 
-  .position-relative {
+  .position--relative {
     position: relative;
   }
 
-  .position-sticky {
+  .position--sticky {
     position: sticky;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/screen-reader.css

@@ -10,7 +10,7 @@
     white-space: nowrap;
     border-width: 0;
   }
-  .sr-only-cancel {
+  .sr-only--cancel {
     position: static;
     width: auto;
     height: auto;

packages/ui-web/src/styles/utility/size-insensitive/theme.css

@@ -1,10 +1,10 @@
 @layer utility {
-  .theme-light {
+  .theme--light {
     --base-fg: var(--color-gray-950);
     --base-bg: var(--color-white);
   }
 
-  .theme-dark {
+  .theme--dark {
     --base-fg: var(--color-gray-50);
     --base-bg: var(--color-black);
   }

packages/ui-web/src/styles/utility/size-insensitive/user-select.css

@@ -1,14 +1,14 @@
 @layer utility {
-  .select-none {
+  .select--none {
     user-select: none;
   }
-  .select-text {
+  .select--text {
     user-select: text;
   }
-  .select-all {
+  .select--all {
     user-select: all;
   }
-  .select-auto {
+  .select--auto {
     user-select: auto;
   }
 }

packages/ui-web/src/styles/utility/size-insensitive/z-index.css

@@ -1,43 +1,43 @@
 @layer utility {
   /* 自动 & 零 */
-  .z-auto {
+  .z--auto {
     z-index: auto;
   }
-  .z-0 {
+  .z--0 {
     z-index: 0;
   }
 
   /* 正值 */
-  .z-10 {
+  .z--10 {
     z-index: 10;
   }
-  .z-20 {
+  .z--20 {
     z-index: 20;
   }
-  .z-30 {
+  .z--30 {
     z-index: 30;
   }
-  .z-40 {
+  .z--40 {
     z-index: 40;
   }
-  .z-50 {
+  .z--50 {
     z-index: 50;
   }
 
   /* 负值（negative） */
-  .z-n-10 {
+  .z--n--10 {
     z-index: -10;
   }
-  .z-n-20 {
+  .z--n--20 {
     z-index: -20;
   }
-  .z-n-30 {
+  .z--n--30 {
     z-index: -30;
   }
-  .z-n-40 {
+  .z--n--40 {
     z-index: -40;
   }
-  .z-n-50 {
+  .z--n--50 {
     z-index: -50;
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/border-radius.css

@@ -1,26 +1,26 @@
 @layer utility {
-  .rounded-full {
+  .rounded--full {
     border-radius: 9999px;
   }
-  .rounded-none {
+  .rounded--none {
     border-radius: 0;
   }
-  .rounded-xs {
+  .rounded--xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-sm {
+  .rounded--sm {
     border-radius: var(--radius-sm);
   }
-  .rounded-md {
+  .rounded--md {
     border-radius: var(--radius-md);
   }
-  .rounded-lg {
+  .rounded--lg {
     border-radius: var(--radius-lg);
   }
-  .rounded-xl {
+  .rounded--xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-2xl {
+  .rounded--2xl {
     border-radius: var(--radius-2xl);
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/font-size.css

@@ -1,35 +1,35 @@
 @layer utility {
-  .text-xs {
+  .text--xs {
     /* 12px 支持rem字体放大 */
     font-size: var(--font-size-xs);
     /* 不能超过 16px */
     line-height: var(--line-height-xs);
   }
-  .text-sm {
+  .text--sm {
     /* 14px 支持rem字体放大 */
     font-size: var(--font-size-sm);
     /* 不能超过 20px */
     line-height: var(--line-height-sm);
   }
-  .text-md {
+  .text--md {
     /* 16px 支持rem字体放大 */
     font-size: var(--font-size-md);
     /* 不能超过 24px */
     line-height: var(--line-height-md);
   }
-  .text-lg {
+  .text--lg {
     /* 18px 支持rem字体放大 */
     font-size: var(--font-size-lg);
     /* 不能超过 28px */
     line-height: var(--line-height-lg);
   }
-  .text-xl {
+  .text--xl {
     /* 24px 支持rem字体放大 */
     font-size: var(--font-size-2xl);
     /* 不能超过 32px */
     line-height: var(--line-height-2xl);
   }
-  .text-2xl {
+  .text--2xl {
     /* 30px 支持rem字体放大 */
     font-size: var(--font-size-2xl);
     /* 不能超过 36px */

packages/ui-web/src/styles/utility/size-sensitive/font-weight.css

@@ -1,20 +1,20 @@
 @layer utility {
-  .font-weight-light {
+  .font-weight--light {
     font-weight: 300;
   }
-  .font-weight-normal {
+  .font-weight--normal {
     font-weight: 400;
   }
-  .font-weight-extranormal {
+  .font-weight--extranormal {
     font-weight: 500;
   }
-  .font-weight-semibold {
+  .font-weight--semibold {
     font-weight: 600;
   }
-  .font-weight-bold {
+  .font-weight--bold {
     font-weight: 700;
   }
-  .font-weight-extrabold {
+  .font-weight--extrabold {
     font-weight: 700;
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/gap.css

@@ -1,23 +1,23 @@
 @layer utility {
-  .gap-xs {
+  .gap--xs {
     /* 2px */
     gap: calc(var(--spacing));
   }
-  .gap-sm {
+  .gap--sm {
     /* 4px */
     gap: calc(var(--spacing) * 2);
   }
-  .gap-md {
+  .gap--md {
     /* 6px */
     gap: calc(var(--spacing) * 3);
   }
-  .gap-lg {
+  .gap--lg {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-xl {
+  .gap--xl {
     gap: calc(var(--spacing) * 2.5);
   }
-  .gap-2xl {
+  .gap--2xl {
     gap: calc(var(--spacing) * 2.5);
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/height.css

@@ -1,47 +1,47 @@
 @layer utility {
-  .h-item-xs {
+  .h--item--xs {
     /* 24px minimum touch size for text line */
     height: var(--height-item-xs);
   }
-  .h-item-sm {
+  .h--item--sm {
     /* 28px save space for most used size */
     height: var(--height-item-sm);
   }
-  .h-item-md {
+  .h--item--md {
     /* 34px most used size */
     height: var(--height-item-md);
   }
-  .h-item-lg {
+  .h--item--lg {
     /* 44px maximum touch size without waste */
     height: var(--height-item-lg);
   }
-  .h-item-xl {
+  .h--item--xl {
     /* 56px section-header bar */
     height: var(--height-item-xl);
   }
-  .h-item-2xl {
+  .h--item--2xl {
     /* 64px navigation bar */
     height: var(--height-item-2xl);
   }
   /* -------------- */
-  .h-inline-xs {
+  .h--inline--xs {
     /* 16px */
     height: calc(var(--font-size-xs) * var(--line-height-xs));
   }
-  .h-inline-sm {
+  .h--inline--sm {
     /* 20px */
     height: calc(var(--font-size-sm) * var(--line-height-sm));
   }
-  .h-inline-md {
+  .h--inline--md {
     height: calc(var(--font-size-md) * var(--line-height-md));
   }
-  .h-inline-lg {
+  .h--inline--lg {
     height: calc(var(--font-size-lg) * var(--line-height-lg));
   }
-  .h-inline-xl {
+  .h--inline--xl {
     height: calc(var(--font-size-xl) * var(--line-height-xl));
   }
-  .h-inline-2xl {
+  .h--inline--2xl {
     height: calc(var(--font-size-2xl) * var(--line-height-2xl));
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/margin-block.css

@@ -1,67 +1,67 @@
 @layer utility {
-  .my-e-none {
+  .my--e--none {
     margin-block-end: 0;
   }
-  .my-e-xs {
+  .my--e--xs {
     margin-block-end: var(--margin-xs);
   }
-  .my-e-sm {
+  .my--e--sm {
     margin-block-end: var(--margin-sm);
   }
-  .my-e-md {
+  .my--e--md {
     margin-block-end: var(--margin-md);
   }
-  .my-e-lg {
+  .my--e--lg {
     margin-block-end: var(--margin-lg);
   }
-  .my-e-xl {
+  .my--e--xl {
     margin-block-end: var(--margin-xl);
   }
-  .my-e-2xl {
+  .my--e--2xl {
     margin-block-end: var(--margin-2xl);
   }
   /* ------------------ */
-  .my-s-none {
+  .my--s--none {
     margin-block-start: 0;
   }
-  .my-s-xs {
+  .my--s--xs {
     margin-block-start: var(--margin-xs);
   }
-  .my-s-sm {
+  .my--s--sm {
     margin-block-start: var(--margin-sm);
   }
-  .my-s-md {
+  .my--s--md {
     margin-block-start: var(--margin-md);
   }
-  .my-s-lg {
+  .my--s--lg {
     margin-block-start: var(--margin-lg);
   }
-  .my-s-xl {
+  .my--s--xl {
     margin-block-start: var(--margin-xl);
   }
-  .my-s-2xl {
+  .my--s--2xl {
     margin-block-start: var(--margin-2xl);
   }
   /* --------------------- */
-  .my-none {
+  .my--none {
     margin-block: 0;
   }
-  .my-xs {
+  .my--xs {
     margin-block: var(--margin-xs);
   }
-  .my-sm {
+  .my--sm {
     margin-block: var(--margin-sm);
   }
-  .my-md {
+  .my--md {
     margin-block: var(--margin-md);
   }
-  .my-lg {
+  .my--lg {
     margin-block: var(--margin-lg);
   }
-  .my-xl {
+  .my--xl {
     margin-block: var(--margin-xl);
   }
-  .my-2xl {
+  .my--2xl {
     margin-block: var(--margin-2xl);
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css

@@ -1,67 +1,67 @@
 @layer utility {
-  .mx-e-none {
+  .mx--e--none {
     margin-inline-end: 0;
   }
-  .mx-e-xs {
+  .mx--e--xs {
     margin-inline-end: var(--margin-xs);
   }
-  .mx-e-sm {
+  .mx--e--sm {
     margin-inline-end: var(--margin-sm);
   }
-  .mx-e-md {
+  .mx--e--md {
     margin-inline-end: var(--margin-md);
   }
-  .mx-e-lg {
+  .mx--e--lg {
     margin-inline-end: var(--margin-lg);
   }
-  .mx-e-xl {
+  .mx--e--xl {
     margin-inline-end: var(--margin-xl);
   }
-  .mx-e-2xl {
+  .mx--e--2xl {
     margin-inline-end: var(--margin-2xl);
   }
   /* ------------------ */
-  .mx-s-none {
+  .mx--s--none {
     margin-inline-start: 0;
   }
-  .mx-s-xs {
+  .mx--s--xs {
     margin-inline-start: var(--margin-xs);
   }
-  .mx-s-sm {
+  .mx--s--sm {
     margin-inline-start: var(--margin-sm);
   }
-  .mx-s-md {
+  .mx--s--md {
     margin-inline-start: var(--margin-md);
   }
-  .mx-s-lg {
+  .mx--s--lg {
     margin-inline-start: var(--margin-lg);
   }
-  .mx-s-xl {
+  .mx--s--xl {
     margin-inline-start: var(--margin-xl);
   }
-  .mx-s-2xl {
+  .mx--s--2xl {
     margin-inline-start: var(--margin-2xl);
   }
   /* --------------------- */
-  .mx-none {
+  .mx--none {
     margin-inline: 0;
   }
-  .mx-xs {
+  .mx--xs {
     margin-inline: var(--margin-xs);
   }
-  .mx-sm {
+  .mx--sm {
     margin-inline: var(--margin-sm);
   }
-  .mx-md {
+  .mx--md {
     margin-inline: var(--margin-md);
   }
-  .mx-lg {
+  .mx--lg {
     margin-inline: var(--margin-lg);
   }
-  .mx-xl {
+  .mx--xl {
     margin-inline: var(--margin-xl);
   }
-  .mx-2xl {
+  .mx--2xl {
     margin-inline: var(--margin-2xl);
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/padding-long.css

@@ -1,24 +1,24 @@
 @layer utility {
-  .px-long-xs {
+  .px--long--xs {
     /* 6px */
     padding-inline: var(--padding-long-xs);
   }
-  .px-long-sm {
+  .px--long--sm {
     /* 8px */
     padding-inline: var(--padding-long-sm);
   }
-  .px-long-md {
+  .px--long--md {
     /* 10px */
     padding-inline: var(--padding-long-md);
   }
-  .px-long-lg {
+  .px--long--lg {
     /* 16px */
     padding-inline: var(--padding-long-lg);
   }
-  .px-long-xl {
+  .px--long--xl {
     padding-inline: var(--padding-long-xl);
   }
-  .px-long-2xl {
+  .px--long--2xl {
     padding-inline: var(--padding-long-2xl);
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/padding-short.css

@@ -1,49 +1,49 @@
 @layer utility {
-  .px-none {
+  .px--none {
     padding-inline: 0px;
   }
-  .px-xs {
+  .px--xs {
     /* 4px, 24px - 16px = 8px */
     padding-inline: var(--padding-xs);
   }
-  .px-sm {
+  .px--sm {
     /* 4px, 28px - 20px = 8px */
     padding-inline: var(--padding-sm);
   }
-  .px-md {
+  .px--md {
     /* 10px */
     padding-inline: var(--padding-md);
   }
-  .px-lg {
+  .px--lg {
     /* 16px */
     padding-inline: var(--padding-lg);
   }
-  .px-xl {
+  .px--xl {
     padding-inline: var(--padding-xl);
   }
-  .px-2xl {
+  .px--2xl {
     padding-inline: var(--padding-2xl);
   }
   /* ------------------------ */
-  .py-none {
+  .py--none {
     padding-block: 0px;
   }
-  .py-xs {
+  .py--xs {
     padding-block: var(--padding-xs);
   }
-  .py-sm {
+  .py--sm {
     padding-block: var(--padding-sm);
   }
-  .py-md {
+  .py--md {
     padding-block: var(--padding-md);
   }
-  .py-lg {
+  .py--lg {
     padding-block: var(--padding-lg);
   }
-  .py-xl {
+  .py--xl {
     padding-block: var(--padding-xl);
   }
-  .py-2xl {
+  .py--2xl {
     padding-block: var(--padding-2xl);
   }
 }

packages/ui-web/src/styles/utility/size-sensitive/width.css

@@ -1,45 +1,45 @@
 @layer utility {
-  .w-item-xs {
+  .w--item--xs {
     /* 24px minimum touch size for text line */
     width: var(--height-item-xs);
   }
-  .w-item-sm {
+  .w--item--sm {
     /* 30px save space for most used size */
     width: var(--height-item-sm);
   }
-  .w-item-md {
+  .w--item--md {
     /* 34px most used size */
     width: var(--height-item-lg);
   }
-  .w-item-lg {
+  .w--item-lg {
     /* 44px maximum touch size without waste */
     width: var(--height-item-lg);
   }
-  .w-item-xl {
+  .w--item--xl {
     /* 56px section-header bar */
     width: var(--height-item-xl);
   }
-  .w-item-2xl {
+  .w--item--2xl {
     /* 64px navigation bar */
     width: var(--height-item-xl);
   }
   /* ---------------------------------------------------- */
-  .w-inline-xs {
+  .w--inline--xs {
     width: calc(var(--font-size-xs) * var(--line-height-xs));
   }
-  .w-inline-sm {
+  .w--inline--sm {
     width: calc(var(--font-size-sm) * var(--line-height-sm));
   }
-  .w-inline-md {
+  .w--inline--md {
     width: calc(var(--font-size-md) * var(--line-height-md));
   }
-  .w-inline-lg {
+  .w--inline--lg {
     width: calc(var(--font-size-lg) * var(--line-height-lg));
   }
-  .w-inline-xl {
+  .w--inline--xl {
     width: calc(var(--font-size-xl) * var(--line-height-xl));
   }
-  .w-inline-xl {
+  .w--inline--xl {
     width: calc(var(--font-size-2xl) * var(--line-height-2xl));
   }
 }

packages/ui-web/src/styles/utils/cpm.ts

@@ -1,61 +1,49 @@
-import { defaultPrefixList } from "./prefix-list";
-
-function matchLongestPrefix(cls: string, prefixList: string[]): string {
-  let bestPrefix: string | undefined;
-
-  for (const prefix of prefixList) {
-    const reg = new RegExp(`^${prefix}(?:-|$)`);
-    if (reg.test(cls) && (!bestPrefix || prefix.length > bestPrefix.length)) {
-      bestPrefix = prefix;
-    }
-  }
-
-  return bestPrefix ?? cls;
-}
-
-// 重载 1
-export function cpm(...classes: Array<string | string[]>): string;
-
-// 重载 2
-export function cpm(
-  options: { extendedPrefixList?: string[] },
-  ...classes: Array<string | string[]>
-): string;
-
-export function cpm(
-  arg1: { extendedPrefixList?: string[] } | string | string[],
-  ...rest: Array<string | string[]>
-): string {
+export function cpm(...classes: (string[] | string)[]) {
   const map = new Map<string, string>();
 
-  let options: { extendedPrefixList?: string[] } = {};
-  let classes: Array<string | string[]>;
+  function dealClass(cls: string) {
+    // 提取多段 prefix，以“--”为分隔符
+    const fragments = cls.split("--");
+    // 前缀后面剩下的部分
+    const suffix = fragments.pop() ?? "";
+    // ['1', '1--2', '1--2--3']
+    const stepwisePrefixList = fragments.map((_, index, array) => {
+      if (index === 0) return array[0];
+      // 截取子数组（注意不是子字符串）
+      return array.slice(0, index + 1).join("--");
+    });
 
-  if (typeof arg1 === "object" && !Array.isArray(arg1)) {
-    options = arg1 as { extendedPrefixList?: string[] };
-    classes = rest;
-  } else {
-    classes = [arg1, ...rest];
+    // 覆盖，短前缀
+    stepwisePrefixList.forEach((key) => {
+      map.delete(key);
+    });
+    // 覆盖延长前缀，overflow--x 会覆盖 overflow--x--l
+    // 不覆盖分支前缀，overflow--x 不会覆盖 overfl--y
+    for (const key of map.keys()) {
+      if (key.includes(stepwisePrefixList[-1])) {
+        // 包含 overflow--x 的全部删除
+        map.delete(key);
+      }
+    }
+    // 把本次值加进去
+    map.set(stepwisePrefixList[-1], suffix);
   }
 
-  const mergedPrefixList: string[] = [
-    ...new Set([...(options.extendedPrefixList ?? []), ...defaultPrefixList]),
-  ];
-
   classes.forEach((item) => {
-    if (Array.isArray(item)) {
-      item.forEach((i) => {
-        const bestPrefix = matchLongestPrefix(i, mergedPrefixList);
-        map.set(bestPrefix, i);
-      });
-      return;
-    }
-
+    // 如果是 string 直接处理
     if (typeof item === "string") {
-      const bestPrefix = matchLongestPrefix(item, mergedPrefixList);
-      map.set(bestPrefix, item);
+      dealClass(item);
+    } else {
+      // 否则肯定是 string[]
+      item.forEach((i) => {
+        dealClass(i);
+      });
     }
   });
 
-  return Object.values(map).join(" ");
+  const resultString = [...map]
+    .map(([key, value]) => `${key}--${value}`)
+    .join(" ");
+
+  return resultString;
 }

packages/ui-web/src/styles/utils/cvr.ts

@@ -1,6 +1,7 @@
+// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
+
 import { cpm } from "./cpm";
 
-// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
 // 但底层存储我们统一视为字符串处理
 type VariantValue = string | boolean;
 

packages/ui-web/src/styles/utils/prefix-list.ts

@@ -1,38 +0,0 @@
-export const defaultPrefixList = [
-  "align-content",
-  "items",
-  "align-self",
-  "animate",
-  "rounded",
-  "box-decoration",
-  "break-inside",
-  "box-sizing",
-  "brand",
-  "break-after",
-  "break-before",
-  "cursor",
-  "display",
-  "flex-direction",
-  "flex",
-  "font-family",
-  "font-weight",
-  "text",
-  "gap",
-  "h",
-  "justify",
-  "justify-items",
-  "justify-self",
-  "mx",
-  "my",
-  "px",
-  "py",
-  "overflow",
-  "overscroll",
-  "position",
-  "sr",
-  "theme",
-  "w",
-  "z",
-  "drop-shadow",
-  "select",
-];

packages/ui-web/src/utils/Slot.tsx

@@ -0,0 +1,14 @@
+import { cloneElement, isValidElement } from "react";
+import { mergeProps } from "./mergeProps";
+
+export const Slot = (props: any) => {
+  const { children, ...rest } = props;
+
+  if (!isValidElement(children)) {
+    throw new Error("Slot requires a single valid React element");
+  }
+
+  const mergedProps = mergeProps(children.props as Record<string, any>, rest);
+
+  return cloneElement(children, mergedProps);
+};

packages/ui-web/tsconfig.json

@@ -16,11 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
-    /* Linting */
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true
   },
   "include": ["src", "scripts", "vite.config.ts"]
 }