@lobehub/ui 5.33.2 → 5.33.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/es/base-ui/Input/style.d.mts +1 -1
  2. package/es/base-ui/Toast/style.mjs +16 -19
  3. package/es/base-ui/Toast/style.mjs.map +1 -1
  4. package/es/eslint/index.mjs +5 -1
  5. package/es/eslint/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/es/base-ui/Input/style.d.mts CHANGED
@@ -24,7 +24,7 @@ declare const styles: {
24
24
  declare const rootVariants: (props?: ({
25
25
  shadow?: boolean | null | undefined;
26
26
  size?: "large" | "middle" | "small" | null | undefined;
27
- variant?: "filled" | "outlined" | "borderless" | null | undefined;
27
+ variant?: "filled" | "borderless" | "outlined" | null | undefined;
28
28
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
29
29
  //#endregion
30
30
  export { rootVariants, styles };
package/es/base-ui/Toast/style.mjs CHANGED
@@ -186,19 +186,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
186
186
  height: var(--toast-collapsed-height);
187
187
  padding-block: 12px;
188
188
  padding-inline: 16px;
189
- border-radius: ${cssVar.borderRadiusLG};
189
+ border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});
190
190
 
191
191
  color: ${cssVar.colorText};
192
192
 
193
193
  background: ${cssVar.colorBgElevated};
194
194
  background-clip: padding-box;
195
195
  box-shadow:
196
- 0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
197
- 0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
198
- 0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
199
- 0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
200
- 0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),
201
- 0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);
196
+ 0 0 0 1px ${cssVar.colorBorderSecondary},
197
+ 0 4px 12px rgb(0 0 0 / 10%),
198
+ 0 16px 32px -8px rgb(0 0 0 / 12%);
202
199
 
203
200
  transition:
204
201
  transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
@@ -317,39 +314,39 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
317
314
  z-index: 100000;
318
315
 
319
316
  width: 360px;
320
- max-width: calc(100vw - 32px);
317
+ max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
321
318
 
322
319
  outline: 0;
323
320
 
324
321
  @media (width <= 480px) {
325
- width: calc(100vw - 32px);
322
+ width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);
326
323
  }
327
324
  `,
328
325
  viewportBottom: css`
329
- inset-block-end: 16px;
326
+ inset-block-end: var(--toast-viewport-offset-y, 16px);
330
327
  inset-inline-start: 50%;
331
328
  transform: translateX(-50%);
332
329
  `,
333
330
  viewportBottomLeft: css`
334
- inset-block-end: 16px;
335
- inset-inline-start: 16px;
331
+ inset-block-end: var(--toast-viewport-offset-y, 16px);
332
+ inset-inline-start: var(--toast-viewport-offset-x, 16px);
336
333
  `,
337
334
  viewportBottomRight: css`
338
- inset-block-end: 16px;
339
- inset-inline-end: 16px;
335
+ inset-block-end: var(--toast-viewport-offset-y, 16px);
336
+ inset-inline-end: var(--toast-viewport-offset-x, 16px);
340
337
  `,
341
338
  viewportTop: css`
342
- inset-block-start: 16px;
339
+ inset-block-start: var(--toast-viewport-offset-y, 16px);
343
340
  inset-inline-start: 50%;
344
341
  transform: translateX(-50%);
345
342
  `,
346
343
  viewportTopLeft: css`
347
- inset-block-start: 16px;
348
- inset-inline-start: 16px;
344
+ inset-block-start: var(--toast-viewport-offset-y, 16px);
345
+ inset-inline-start: var(--toast-viewport-offset-x, 16px);
349
346
  `,
350
347
  viewportTopRight: css`
351
- inset-block-start: 16px;
352
- inset-inline-end: 16px;
348
+ inset-block-start: var(--toast-viewport-offset-y, 16px);
349
+ inset-inline-end: var(--toast-viewport-offset-x, 16px);
353
350
  `
354
351
  }));
355
352
  const viewportVariants = cva(styles.viewport, {
package/es/base-ui/Toast/style.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n action: css`\n cursor: pointer;\n\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n height: 28px;\n padding-inline: 12px;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n\n transition:\n background 0.2s,\n color 0.2s;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n actionDanger: css`\n color: ${cssVar.colorBgLayout};\n background: ${cssVar.colorError};\n\n &:hover {\n background: ${cssVar.colorErrorHover};\n }\n\n &:active {\n background: ${cssVar.colorErrorActive};\n }\n\n &:focus-visible {\n outline-color: ${cssVar.colorErrorBorder};\n }\n `,\n\n actionGhost: css`\n border: 1px solid ${cssVar.colorBorder};\n color: ${cssVar.colorText};\n background: transparent;\n\n &:hover {\n border-color: ${cssVar.colorPrimary};\n color: ${cssVar.colorPrimary};\n }\n\n &:active {\n border-color: ${cssVar.colorPrimaryActive};\n color: ${cssVar.colorPrimaryActive};\n }\n `,\n\n actionPrimary: css`\n color: ${cssVar.colorBgLayout};\n background: ${cssVar.colorPrimary};\n\n &:hover {\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active {\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n actionSecondary: css`\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFill};\n }\n `,\n\n actionText: css`\n color: ${cssVar.colorPrimary};\n background: transparent;\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n actions: css`\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n gap: 8px;\n align-items: center;\n align-self: flex-end;\n justify-content: flex-end;\n\n margin-block-start: 8px;\n `,\n\n close: css`\n cursor: pointer;\n\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 20px;\n height: 20px;\n margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextSecondary};\n\n background: transparent;\n\n transition: all 0.2s;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n content: css`\n overflow: hidden;\n transition: opacity 0.2s;\n\n &[data-behind] {\n pointer-events: none;\n opacity: 0;\n }\n\n &[data-expanded] {\n pointer-events: auto;\n opacity: 1;\n }\n `,\n\n contentArea: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n `,\n\n description: css`\n margin: 0;\n font-size: 13px;\n line-height: 1.5;\n color: ${cssVar.colorTextSecondary};\n `,\n\n descriptionStandalone: css`\n color: ${cssVar.colorText};\n `,\n\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n `,\n\n root: css`\n --toast-gap: 12px;\n --toast-peek: 12px;\n --toast-scale: calc(1 - var(--toast-index) * 0.05);\n --toast-shrink: calc(1 - var(--toast-scale));\n --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n cursor: default;\n user-select: none;\n\n position: absolute;\n z-index: calc(1000 - var(--toast-index));\n inset-inline: 0;\n\n box-sizing: border-box;\n width: 100%;\n height: var(--toast-collapsed-height);\n padding-block: 12px;\n padding-inline: 16px;\n border-radius: ${cssVar.borderRadiusLG};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n background-clip: padding-box;\n box-shadow:\n 0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n 0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n 0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n 0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n 0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n 0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n transition:\n transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n opacity 0.4s,\n height 0.15s;\n\n /* Fill gap between stacked toasts to prevent hover flicker */\n &::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n }\n\n &[data-limited] {\n opacity: 0;\n }\n\n &[data-swiping] {\n transition: none;\n }\n `,\n\n // Bottom positions - stack upward\n rootBottom: css`\n inset-block: auto 0;\n transform-origin: bottom center;\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n (var(--toast-shrink) * var(--toast-collapsed-height))\n )\n )\n scale(var(--toast-scale));\n\n &::after {\n inset-block-start: 100%;\n }\n\n &[data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n var(--toast-gap) * -1\n )\n )\n scale(1);\n height: var(--toast-height);\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(150%);\n opacity: 0;\n }\n `,\n\n // Top positions - stack downward\n rootTop: css`\n inset-block: 0 auto;\n transform-origin: top center;\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n (var(--toast-shrink) * var(--toast-collapsed-height))\n )\n )\n scale(var(--toast-scale));\n\n &::after {\n inset-block-end: 100%;\n }\n\n &[data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n var(--toast-gap)\n )\n )\n scale(1);\n height: var(--toast-height);\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(-150%);\n opacity: 0;\n }\n `,\n\n title: css`\n margin: 0;\n\n font-size: 14px;\n font-weight: 500;\n line-height: 1.5;\n color: ${cssVar.colorText};\n `,\n\n titleRow: css`\n display: flex;\n gap: 8px;\n align-items: flex-start;\n `,\n\n toastBody: css`\n display: flex;\n gap: 12px;\n align-items: flex-start;\n `,\n\n toastBodyCenter: css`\n display: flex;\n gap: 12px;\n align-items: flex-start;\n `,\n\n viewport: css`\n position: fixed;\n z-index: 100000;\n\n width: 360px;\n max-width: calc(100vw - 32px);\n\n outline: 0;\n\n @media (width <= 480px) {\n width: calc(100vw - 32px);\n }\n `,\n\n viewportBottom: css`\n inset-block-end: 16px;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n `,\n\n viewportBottomLeft: css`\n inset-block-end: 16px;\n inset-inline-start: 16px;\n `,\n\n viewportBottomRight: css`\n inset-block-end: 16px;\n inset-inline-end: 16px;\n `,\n\n viewportTop: css`\n inset-block-start: 16px;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n `,\n\n viewportTopLeft: css`\n inset-block-start: 16px;\n inset-inline-start: 16px;\n `,\n\n viewportTopRight: css`\n inset-block-start: 16px;\n inset-inline-end: 16px;\n `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n defaultVariants: {\n position: 'bottom-right',\n },\n variants: {\n position: {\n 'bottom': styles.viewportBottom,\n 'bottom-left': styles.viewportBottomLeft,\n 'bottom-right': styles.viewportBottomRight,\n 'top': styles.viewportTop,\n 'top-left': styles.viewportTopLeft,\n 'top-right': styles.viewportTopRight,\n },\n },\n});\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: {\n position: 'bottom-right',\n },\n variants: {\n position: {\n 'bottom': styles.rootBottom,\n 'bottom-left': styles.rootBottom,\n 'bottom-right': styles.rootBottom,\n 'top': styles.rootTop,\n 'top-left': styles.rootTop,\n 'top-right': styles.rootTop,\n },\n },\n});\n\nexport const actionVariants = cva(styles.action, {\n defaultVariants: {\n variant: 'primary',\n },\n variants: {\n variant: {\n danger: styles.actionDanger,\n ghost: styles.actionGhost,\n primary: styles.actionPrimary,\n secondary: styles.actionSecondary,\n text: styles.actionText,\n },\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n action: css`\n cursor: pointer;\n\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n height: 28px;\n padding-inline: 12px;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n\n transition:\n background 0.2s,\n color 0.2s;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: 1px;\n }\n `,\n\n actionDanger: css`\n color: ${cssVar.colorBgLayout};\n background: ${cssVar.colorError};\n\n &:hover {\n background: ${cssVar.colorErrorHover};\n }\n\n &:active {\n background: ${cssVar.colorErrorActive};\n }\n\n &:focus-visible {\n outline-color: ${cssVar.colorErrorBorder};\n }\n `,\n\n actionGhost: css`\n border: 1px solid ${cssVar.colorBorder};\n color: ${cssVar.colorText};\n background: transparent;\n\n &:hover {\n border-color: ${cssVar.colorPrimary};\n color: ${cssVar.colorPrimary};\n }\n\n &:active {\n border-color: ${cssVar.colorPrimaryActive};\n color: ${cssVar.colorPrimaryActive};\n }\n `,\n\n actionPrimary: css`\n color: ${cssVar.colorBgLayout};\n background: ${cssVar.colorPrimary};\n\n &:hover {\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:active {\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n\n actionSecondary: css`\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFill};\n }\n `,\n\n actionText: css`\n color: ${cssVar.colorPrimary};\n background: transparent;\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n actions: css`\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n gap: 8px;\n align-items: center;\n align-self: flex-end;\n justify-content: flex-end;\n\n margin-block-start: 8px;\n `,\n\n close: css`\n cursor: pointer;\n\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 20px;\n height: 20px;\n margin-inline-start: auto;\n padding: 0;\n border: none;\n border-radius: ${cssVar.borderRadiusSM};\n\n color: ${cssVar.colorTextSecondary};\n\n background: transparent;\n\n transition: all 0.2s;\n\n &:hover {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n `,\n\n content: css`\n overflow: hidden;\n transition: opacity 0.2s;\n\n &[data-behind] {\n pointer-events: none;\n opacity: 0;\n }\n\n &[data-expanded] {\n pointer-events: auto;\n opacity: 1;\n }\n `,\n\n contentArea: css`\n display: flex;\n flex: 1;\n flex-direction: column;\n min-width: 0;\n `,\n\n description: css`\n margin: 0;\n font-size: 13px;\n line-height: 1.5;\n color: ${cssVar.colorTextSecondary};\n `,\n\n descriptionStandalone: css`\n color: ${cssVar.colorText};\n `,\n\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n `,\n\n root: css`\n --toast-gap: 12px;\n --toast-peek: 12px;\n --toast-scale: calc(1 - var(--toast-index) * 0.05);\n --toast-shrink: calc(1 - var(--toast-scale));\n --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n cursor: default;\n user-select: none;\n\n position: absolute;\n z-index: calc(1000 - var(--toast-index));\n inset-inline: 0;\n\n box-sizing: border-box;\n width: 100%;\n height: var(--toast-collapsed-height);\n padding-block: 12px;\n padding-inline: 16px;\n border-radius: var(--toast-border-radius, ${cssVar.borderRadiusLG});\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n background-clip: padding-box;\n box-shadow:\n 0 0 0 1px ${cssVar.colorBorderSecondary},\n 0 4px 12px rgb(0 0 0 / 10%),\n 0 16px 32px -8px rgb(0 0 0 / 12%);\n\n transition:\n transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n opacity 0.4s,\n height 0.15s;\n\n /* Fill gap between stacked toasts to prevent hover flicker */\n &::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n }\n\n &[data-limited] {\n opacity: 0;\n }\n\n &[data-swiping] {\n transition: none;\n }\n `,\n\n // Bottom positions - stack upward\n rootBottom: css`\n inset-block: auto 0;\n transform-origin: bottom center;\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n (var(--toast-shrink) * var(--toast-collapsed-height))\n )\n )\n scale(var(--toast-scale));\n\n &::after {\n inset-block-start: 100%;\n }\n\n &[data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n var(--toast-gap) * -1\n )\n )\n scale(1);\n height: var(--toast-height);\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(150%);\n opacity: 0;\n }\n `,\n\n // Top positions - stack downward\n rootTop: css`\n inset-block: 0 auto;\n transform-origin: top center;\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n (var(--toast-shrink) * var(--toast-collapsed-height))\n )\n )\n scale(var(--toast-scale));\n\n &::after {\n inset-block-end: 100%;\n }\n\n &[data-expanded] {\n transform: translateX(var(--toast-swipe-movement-x))\n translateY(\n calc(\n var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n var(--toast-gap)\n )\n )\n scale(1);\n height: var(--toast-height);\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translateY(-150%);\n opacity: 0;\n }\n `,\n\n title: css`\n margin: 0;\n\n font-size: 14px;\n font-weight: 500;\n line-height: 1.5;\n color: ${cssVar.colorText};\n `,\n\n titleRow: css`\n display: flex;\n gap: 8px;\n align-items: flex-start;\n `,\n\n toastBody: css`\n display: flex;\n gap: 12px;\n align-items: flex-start;\n `,\n\n toastBodyCenter: css`\n display: flex;\n gap: 12px;\n align-items: flex-start;\n `,\n\n viewport: css`\n position: fixed;\n z-index: 100000;\n\n width: 360px;\n max-width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n\n outline: 0;\n\n @media (width <= 480px) {\n width: calc(100vw - var(--toast-viewport-offset-x, 16px) * 2);\n }\n `,\n\n viewportBottom: css`\n inset-block-end: var(--toast-viewport-offset-y, 16px);\n inset-inline-start: 50%;\n transform: translateX(-50%);\n `,\n\n viewportBottomLeft: css`\n inset-block-end: var(--toast-viewport-offset-y, 16px);\n inset-inline-start: var(--toast-viewport-offset-x, 16px);\n `,\n\n viewportBottomRight: css`\n inset-block-end: var(--toast-viewport-offset-y, 16px);\n inset-inline-end: var(--toast-viewport-offset-x, 16px);\n `,\n\n viewportTop: css`\n inset-block-start: var(--toast-viewport-offset-y, 16px);\n inset-inline-start: 50%;\n transform: translateX(-50%);\n `,\n\n viewportTopLeft: css`\n inset-block-start: var(--toast-viewport-offset-y, 16px);\n inset-inline-start: var(--toast-viewport-offset-x, 16px);\n `,\n\n viewportTopRight: css`\n inset-block-start: var(--toast-viewport-offset-y, 16px);\n inset-inline-end: var(--toast-viewport-offset-x, 16px);\n `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n defaultVariants: {\n position: 'bottom-right',\n },\n variants: {\n position: {\n 'bottom': styles.viewportBottom,\n 'bottom-left': styles.viewportBottomLeft,\n 'bottom-right': styles.viewportBottomRight,\n 'top': styles.viewportTop,\n 'top-left': styles.viewportTopLeft,\n 'top-right': styles.viewportTopRight,\n },\n },\n});\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: {\n position: 'bottom-right',\n },\n variants: {\n position: {\n 'bottom': styles.rootBottom,\n 'bottom-left': styles.rootBottom,\n 'bottom-right': styles.rootBottom,\n 'top': styles.rootTop,\n 'top-left': styles.rootTop,\n 'top-right': styles.rootTop,\n },\n },\n});\n\nexport const actionVariants = cva(styles.action, {\n defaultVariants: {\n variant: 'primary',\n },\n variants: {\n variant: {\n danger: styles.actionDanger,\n ghost: styles.actionGhost,\n primary: styles.actionPrimary,\n secondary: styles.actionSecondary,\n text: styles.actionText,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;;;;qBAWQ,OAAO,eAAe;;;;;;;;;;;2BAWhB,OAAO,mBAAmB;;;;CAKnD,cAAc,GAAG;aACN,OAAO,cAAc;kBAChB,OAAO,WAAW;;;oBAGhB,OAAO,gBAAgB;;;;oBAIvB,OAAO,iBAAiB;;;;uBAIrB,OAAO,iBAAiB;;;CAI7C,aAAa,GAAG;wBACM,OAAO,YAAY;aAC9B,OAAO,UAAU;;;;sBAIR,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,mBAAmB;eACjC,OAAO,mBAAmB;;;CAIvC,eAAe,GAAG;aACP,OAAO,cAAc;kBAChB,OAAO,aAAa;;;oBAGlB,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,iBAAiB,GAAG;aACT,OAAO,UAAU;kBACZ,OAAO,mBAAmB;;;oBAGxB,OAAO,kBAAkB;;;;oBAIzB,OAAO,UAAU;;;CAInC,YAAY,GAAG;aACJ,OAAO,aAAa;;;;oBAIb,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;CAYZ,OAAO,GAAG;;;;;;;;;;;;;qBAaS,OAAO,eAAe;;aAE9B,OAAO,mBAAmB;;;;;;;eAOxB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;CAI5C,SAAS,GAAG;;;;;;;;;;;;;;CAeZ,aAAa,GAAG;;;;;;CAOhB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;CAGrC,uBAAuB,GAAG;aACf,OAAO,UAAU;;CAG5B,MAAM,GAAG;;;;;;CAOT,MAAM,GAAG;;;;;;;;;;;;;;;;;;;gDAmBqC,OAAO,eAAe;;aAEzD,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;kBAGvB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,UAAU,GAAG;;;;;CAMb,WAAW,GAAG;;;;;CAMd,iBAAiB,GAAG;;;;;CAMpB,UAAU,GAAG;;;;;;;;;;;;;CAcb,gBAAgB,GAAG;;;;;CAMnB,oBAAoB,GAAG;;;;CAKvB,qBAAqB,GAAG;;;;CAKxB,aAAa,GAAG;;;;;CAMhB,iBAAiB,GAAG;;;;CAKpB,kBAAkB,GAAG;;;;AAIvB,EAAE;AAEF,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,eACZ;CACA,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;CACtB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EACF;AACF,CAAC"}
package/es/eslint/index.mjs CHANGED
@@ -1,7 +1,9 @@
1
1
  //#region src/eslint/index.ts
2
2
  const DEPRECATED_UI_COMPONENTS = [
3
+ "ActionIcon",
3
4
  "Alert",
4
5
  "AutoComplete",
6
+ "Avatar",
5
7
  "Button",
6
8
  "Checkbox",
7
9
  "CheckboxGroup",
@@ -13,7 +15,9 @@ const DEPRECATED_UI_COMPONENTS = [
13
15
  "Select",
14
16
  "Slider",
15
17
  "SliderWithInput",
16
- "Tabs"
18
+ "Tabs",
19
+ "Tag",
20
+ "Text"
17
21
  ];
18
22
  const restrictedImports = { rules: { "no-restricted-imports": ["error", {
19
23
  paths: [
package/es/eslint/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n 'Alert',\n 'AutoComplete',\n 'Button',\n 'Checkbox',\n 'CheckboxGroup',\n 'Drawer',\n 'Modal',\n 'Radio',\n 'RadioGroup',\n 'Segmented',\n 'Select',\n 'Slider',\n 'SliderWithInput',\n 'Tabs',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n 'antd/es/alert',\n 'antd/es/alert/*',\n 'antd/es/auto-complete',\n 'antd/es/auto-complete/*',\n 'antd/es/checkbox',\n 'antd/es/checkbox/*',\n 'antd/es/radio',\n 'antd/es/radio/*',\n 'antd/es/slider',\n 'antd/es/slider/*',\n 'antd/lib/alert',\n 'antd/lib/alert/*',\n 'antd/lib/auto-complete',\n 'antd/lib/auto-complete/*',\n 'antd/lib/checkbox',\n 'antd/lib/checkbox/*',\n 'antd/lib/radio',\n 'antd/lib/radio/*',\n 'antd/lib/slider',\n 'antd/lib/slider/*',\n];\n\nexport const restrictedImports = {\n rules: {\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: '@lobehub/ui',\n },\n {\n importNames: ['createStyles'],\n message:\n '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n name: 'antd-style',\n },\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: 'antd',\n },\n ],\n patterns: [\n {\n group: DEPRECATED_ANTD_COMPONENT_PATHS,\n message:\n 'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n },\n ],\n },\n ],\n },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAyBA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GAhDjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EA6BiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../../src/eslint/index.ts"],"sourcesContent":["const DEPRECATED_UI_COMPONENTS = [\n 'ActionIcon',\n 'Alert',\n 'AutoComplete',\n 'Avatar',\n 'Button',\n 'Checkbox',\n 'CheckboxGroup',\n 'Drawer',\n 'Modal',\n 'Radio',\n 'RadioGroup',\n 'Segmented',\n 'Select',\n 'Slider',\n 'SliderWithInput',\n 'Tabs',\n 'Tag',\n 'Text',\n];\n\nconst DEPRECATED_ANTD_COMPONENT_PATHS = [\n 'antd/es/alert',\n 'antd/es/alert/*',\n 'antd/es/auto-complete',\n 'antd/es/auto-complete/*',\n 'antd/es/checkbox',\n 'antd/es/checkbox/*',\n 'antd/es/radio',\n 'antd/es/radio/*',\n 'antd/es/slider',\n 'antd/es/slider/*',\n 'antd/lib/alert',\n 'antd/lib/alert/*',\n 'antd/lib/auto-complete',\n 'antd/lib/auto-complete/*',\n 'antd/lib/checkbox',\n 'antd/lib/checkbox/*',\n 'antd/lib/radio',\n 'antd/lib/radio/*',\n 'antd/lib/slider',\n 'antd/lib/slider/*',\n];\n\nexport const restrictedImports = {\n rules: {\n 'no-restricted-imports': [\n 'error',\n {\n paths: [\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message:\n 'The antd-based wrapper is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: '@lobehub/ui',\n },\n {\n importNames: ['createStyles'],\n message:\n '`createStyles` is banned in this project. Use `createStaticStyles` from \"antd-style\" instead.',\n name: 'antd-style',\n },\n {\n importNames: DEPRECATED_UI_COMPONENTS,\n message: 'Direct antd import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n name: 'antd',\n },\n ],\n patterns: [\n {\n group: DEPRECATED_ANTD_COMPONENT_PATHS,\n message:\n 'Direct antd component import is deprecated. Import from \"@lobehub/ui/base-ui\" instead.',\n },\n ],\n },\n ],\n },\n};\n\nexport default [restrictedImports];\n"],"mappings":";AAAA,MAAM,2BAA2B;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAyBA,MAAa,oBAAoB,EAC/B,OAAO,EACL,yBAAyB,CACvB,SACA;CACE,OAAO;EACL;GACE,aAAa;GACb,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa,CAAC,cAAc;GAC5B,SACE;GACF,MAAM;EACR;EACA;GACE,aAAa;GACb,SAAS;GACT,MAAM;EACR;CACF;CACA,UAAU,CACR;EACE,OAAO;GAhDjB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EA6BiB;EACP,SACE;CACJ,CACF;AACF,CACF,EACF,EACF;AAEA,IAAA,iBAAe,CAAC,iBAAiB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "5.33.2",
3
+ "version": "5.33.3",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",