@lobehub/ui 5.30.0 → 5.30.2
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.
package/es/Alert/style.mjs
CHANGED
|
@@ -81,6 +81,9 @@ const styles = createStaticStyles(({ css, cssVar }) => {
|
|
|
81
81
|
height: 24px;
|
|
82
82
|
margin: 0;
|
|
83
83
|
}
|
|
84
|
+
`,
|
|
85
|
+
rootSingleLine: css`
|
|
86
|
+
align-items: center;
|
|
84
87
|
`,
|
|
85
88
|
rootNoTitleNoIconNoClosable: css`
|
|
86
89
|
gap: 8px;
|
|
@@ -287,7 +290,7 @@ const rootVariants = cva(styles.rootBase, {
|
|
|
287
290
|
true: styles.glass
|
|
288
291
|
},
|
|
289
292
|
hasTitle: {
|
|
290
|
-
false:
|
|
293
|
+
false: styles.rootSingleLine,
|
|
291
294
|
true: null
|
|
292
295
|
},
|
|
293
296
|
showIcon: {
|
package/es/Alert/style.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n banner: css`\n border: none !important;\n border-radius: 0 !important;\n `,\n borderless: css`\n padding: 0 !important;\n border: none !important;\n background: transparent !important;\n `,\n borderlessExtraHeaderNoTitle: css`\n margin-block-start: 8px;\n padding-inline: 0;\n `,\n borderlessExtraHeaderWithTitle: css`\n margin-block-start: 16px;\n padding-inline: 0;\n `,\n colorfulText: css`\n .${prefixCls}-alert-message,.${prefixCls}-alert-description {\n color: inherit;\n }\n `,\n expandText: css`\n padding-inline-end: 12px;\n\n &:hover {\n cursor: pointer;\n }\n `,\n extra: css`\n position: relative;\n\n overflow: hidden;\n\n max-width: 100%;\n border: 1px solid;\n border-block-start: none;\n border-end-start-radius: ${cssVar.borderRadiusLG};\n border-end-end-radius: ${cssVar.borderRadiusLG};\n `,\n extraHeader: css`\n border-block-start: 1px dashed;\n border-radius: 0;\n background: transparent !important;\n `,\n filled: css``,\n glass: lobeStaticStylish.blur,\n hasExtra: css`\n border-block-end: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n `,\n outlined: css`\n background: transparent !important;\n `,\n // Root variants based on closable, hasTitle, showIcon combinations\n rootBase: css`\n position: relative;\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n max-width: 100%;\n\n .${prefixCls}-alert-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n .${prefixCls}-alert-close-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n `,\n rootNoTitleNoIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleNoIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootWithTitleNoIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleNoIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n };\n});\n\nexport const extraVariants = cva(styles.extra, {\n defaultVariants: {\n variant: 'filled',\n },\n\n variants: {\n variant: {\n filled: styles.filled,\n outlined: styles.outlined,\n borderless: styles.borderless,\n },\n banner: {\n false: null,\n true: styles.banner,\n },\n },\n});\n\nexport const rootVariants = cva(styles.rootBase, {\n compoundVariants: [\n {\n class: styles.rootNoTitleNoIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleNoIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleWithIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootNoTitleWithIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleNoIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleNoIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleWithIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleWithIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: true,\n },\n ],\n defaultVariants: {\n closable: false,\n colorfulText: true,\n glass: false,\n hasTitle: false,\n showIcon: false,\n variant: 'filled',\n },\n\n variants: {\n closable: {\n false: null,\n true: null,\n },\n colorfulText: {\n false: null,\n true: styles.colorfulText,\n },\n glass: {\n false: null,\n true: styles.glass,\n },\n hasTitle: {\n false: null,\n true: null,\n },\n showIcon: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n hasExtra: {\n false: null,\n true: styles.hasExtra,\n },\n },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n compoundVariants: [\n {\n class: styles.borderlessExtraHeaderNoTitle,\n hasTitle: false,\n variant: 'borderless',\n },\n {\n class: styles.borderlessExtraHeaderWithTitle,\n hasTitle: true,\n variant: 'borderless',\n },\n ],\n defaultVariants: {\n hasTitle: false,\n variant: 'filled',\n },\n\n variants: {\n hasTitle: {\n false: null,\n true: null,\n },\n variant: {\n borderless: null,\n filled: null,\n outlined: null,\n },\n },\n});\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;;;;EAIX,YAAY,GAAG;;;;;EAKf,8BAA8B,GAAG;;;;EAIjC,gCAAgC,GAAG;;;;EAInC,cAAc,GAAG;SACZ,UAAU,kBAAkB,UAAU;;;;EAI3C,YAAY,GAAG;;;;;;;EAOf,OAAO,GAAG;;;;;;;;iCAQmB,OAAO,eAAe;+BACxB,OAAO,eAAe;;EAEjD,aAAa,GAAG;;;;;EAKhB,QAAQ,GAAG;EACX,OAAOA,cAAkB;EACzB,UAAU,GAAG;;;;;EAKb,UAAU,GAAG;;;EAIb,UAAU,GAAG;;;;;;;;;SASR,UAAU;;;;;;SAMV,UAAU;;;;;;;EAOf,6BAA6B,GAAG;;;;;SAK3B,UAAU;;;;;;;EAOf,+BAA+B,GAAG;;;;;SAK7B,UAAU;;;;;;;EAOf,+BAA+B,GAAG;;;;;SAK7B,UAAU;;;;;;;EAOf,iCAAiC,GAAG;;;;;SAK/B,UAAU;;;;;;;EAOf,+BAA+B,GAAG;;;;;SAK7B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,iCAAiC,GAAG;;;;;SAK/B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,iCAAiC,GAAG;;;;;SAK/B,UAAU;;;;;;SAMV,UAAU;;;;;;EAMf,mCAAmC,GAAG;;;;;SAKjC,UAAU;;;;;;SAMV,UAAU;;;;;;CAMjB;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI,OAAO,OAAO;CAC7C,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,UAAU;CAC/C,kBAAkB;EAChB;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;EACA;GACE,OAAO,OAAO;GACd,UAAU;GACV,UAAU;GACV,UAAU;EACZ;CACF;CACA,iBAAiB;EACf,UAAU;EACV,cAAc;EACd,OAAO;EACP,UAAU;EACV,UAAU;EACV,SAAS;CACX;CAEA,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,cAAc;GACZ,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;EACA,UAAU;GACR,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,sBAAsB,IAAI,OAAO,aAAa;CACzD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,UAAU;EACV,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,UAAU;EACV,SAAS;CACX,CACF;CACA,iBAAiB;EACf,UAAU;EACV,SAAS;CACX;CAEA,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY;GACZ,QAAQ;GACR,UAAU;EACZ;CACF;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Alert/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n banner: css`\n border: none !important;\n border-radius: 0 !important;\n `,\n borderless: css`\n padding: 0 !important;\n border: none !important;\n background: transparent !important;\n `,\n borderlessExtraHeaderNoTitle: css`\n margin-block-start: 8px;\n padding-inline: 0;\n `,\n borderlessExtraHeaderWithTitle: css`\n margin-block-start: 16px;\n padding-inline: 0;\n `,\n colorfulText: css`\n .${prefixCls}-alert-message,.${prefixCls}-alert-description {\n color: inherit;\n }\n `,\n expandText: css`\n padding-inline-end: 12px;\n\n &:hover {\n cursor: pointer;\n }\n `,\n extra: css`\n position: relative;\n\n overflow: hidden;\n\n max-width: 100%;\n border: 1px solid;\n border-block-start: none;\n border-end-start-radius: ${cssVar.borderRadiusLG};\n border-end-end-radius: ${cssVar.borderRadiusLG};\n `,\n extraHeader: css`\n border-block-start: 1px dashed;\n border-radius: 0;\n background: transparent !important;\n `,\n filled: css``,\n glass: lobeStaticStylish.blur,\n hasExtra: css`\n border-block-end: none;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n `,\n outlined: css`\n background: transparent !important;\n `,\n // Root variants based on closable, hasTitle, showIcon combinations\n rootBase: css`\n position: relative;\n\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n\n max-width: 100%;\n\n .${prefixCls}-alert-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n .${prefixCls}-alert-close-icon {\n display: flex;\n align-items: center;\n height: 24px;\n margin: 0;\n }\n `,\n rootSingleLine: css`\n align-items: center;\n `,\n rootNoTitleNoIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleNoIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 12px 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconNoClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootNoTitleWithIconWithClosable: css`\n gap: 8px;\n padding-block: 8px;\n padding-inline: 9px;\n\n .${prefixCls}-alert-title {\n font-weight: 400;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n `,\n rootWithTitleNoIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleNoIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 16px 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconNoClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px 16px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n rootWithTitleWithIconWithClosable: css`\n gap: 12px;\n padding-block: 16px;\n padding-inline: 12px;\n\n .${prefixCls}-alert-title {\n font-weight: 500;\n line-height: 24px;\n color: inherit;\n word-break: normal;\n }\n .${prefixCls}-alert-description {\n line-height: 1.5;\n word-break: normal;\n opacity: 0.75;\n }\n `,\n };\n});\n\nexport const extraVariants = cva(styles.extra, {\n defaultVariants: {\n variant: 'filled',\n },\n\n variants: {\n variant: {\n filled: styles.filled,\n outlined: styles.outlined,\n borderless: styles.borderless,\n },\n banner: {\n false: null,\n true: styles.banner,\n },\n },\n});\n\nexport const rootVariants = cva(styles.rootBase, {\n compoundVariants: [\n {\n class: styles.rootNoTitleNoIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleNoIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: false,\n },\n {\n class: styles.rootNoTitleWithIconNoClosable,\n closable: false,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootNoTitleWithIconWithClosable,\n closable: true,\n hasTitle: false,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleNoIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleNoIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: false,\n },\n {\n class: styles.rootWithTitleWithIconNoClosable,\n closable: false,\n hasTitle: true,\n showIcon: true,\n },\n {\n class: styles.rootWithTitleWithIconWithClosable,\n closable: true,\n hasTitle: true,\n showIcon: true,\n },\n ],\n defaultVariants: {\n closable: false,\n colorfulText: true,\n glass: false,\n hasTitle: false,\n showIcon: false,\n variant: 'filled',\n },\n\n variants: {\n closable: {\n false: null,\n true: null,\n },\n colorfulText: {\n false: null,\n true: styles.colorfulText,\n },\n glass: {\n false: null,\n true: styles.glass,\n },\n hasTitle: {\n false: styles.rootSingleLine,\n true: null,\n },\n showIcon: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n hasExtra: {\n false: null,\n true: styles.hasExtra,\n },\n },\n});\n\nexport const extraHeaderVariants = cva(styles.extraHeader, {\n compoundVariants: [\n {\n class: styles.borderlessExtraHeaderNoTitle,\n hasTitle: false,\n variant: 'borderless',\n },\n {\n class: styles.borderlessExtraHeaderWithTitle,\n hasTitle: true,\n variant: 'borderless',\n },\n ],\n defaultVariants: {\n hasTitle: false,\n variant: 'filled',\n },\n\n variants: {\n hasTitle: {\n false: null,\n true: null,\n },\n variant: {\n borderless: null,\n filled: null,\n outlined: null,\n },\n },\n});\n"],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ declare const SplitButtonMain: (props: ButtonProps) => import("react").JSX.Eleme
|
|
|
20
20
|
interface SplitButtonMenuProps extends Omit<DropdownMenuProps, 'children'> {
|
|
21
21
|
icon?: ReactNode;
|
|
22
22
|
}
|
|
23
|
-
declare const SplitButtonMenu: ({ icon, ...menuProps }: SplitButtonMenuProps) => import("react").JSX.Element;
|
|
23
|
+
declare const SplitButtonMenu: ({ icon, disabled, ...menuProps }: SplitButtonMenuProps) => import("react").JSX.Element;
|
|
24
24
|
type SplitButtonComponent = typeof SplitButton & {
|
|
25
25
|
Main: typeof SplitButtonMain;
|
|
26
26
|
Menu: typeof SplitButtonMenu;
|
|
@@ -7,7 +7,53 @@ import { createStaticStyles, cx } from "antd-style";
|
|
|
7
7
|
import { ChevronDownIcon } from "lucide-react";
|
|
8
8
|
//#region src/base-ui/Button/SplitButton.tsx
|
|
9
9
|
const SplitButtonContext = createContext({});
|
|
10
|
-
const styles = createStaticStyles(({ css }) => ({
|
|
10
|
+
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
11
|
+
interactionDisabled: css`
|
|
12
|
+
opacity: 0.5;
|
|
13
|
+
|
|
14
|
+
& > :where(button, a):disabled,
|
|
15
|
+
& > :where(button, a)[aria-disabled='true'] {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
`,
|
|
19
|
+
solid: css`
|
|
20
|
+
& > :where(button, a):last-of-type::before {
|
|
21
|
+
pointer-events: none;
|
|
22
|
+
content: '';
|
|
23
|
+
|
|
24
|
+
position: absolute;
|
|
25
|
+
inset-block: 0;
|
|
26
|
+
inset-inline-start: 0;
|
|
27
|
+
|
|
28
|
+
width: 1px;
|
|
29
|
+
|
|
30
|
+
opacity: 0.2;
|
|
31
|
+
background: currentcolor;
|
|
32
|
+
}
|
|
33
|
+
`,
|
|
34
|
+
solidDanger: css`
|
|
35
|
+
&:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
36
|
+
border-color: ${cssVar.colorErrorHover};
|
|
37
|
+
background: ${cssVar.colorErrorHover};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
41
|
+
border-color: ${cssVar.colorErrorActive};
|
|
42
|
+
background: ${cssVar.colorErrorActive};
|
|
43
|
+
}
|
|
44
|
+
`,
|
|
45
|
+
solidPrimary: css`
|
|
46
|
+
&:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
47
|
+
border-color: ${cssVar.colorPrimaryHover};
|
|
48
|
+
background: ${cssVar.colorPrimaryHover};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {
|
|
52
|
+
border-color: ${cssVar.colorPrimaryActive};
|
|
53
|
+
background: ${cssVar.colorPrimaryActive};
|
|
54
|
+
}
|
|
55
|
+
`,
|
|
56
|
+
splitButton: css`
|
|
11
57
|
display: inline-flex;
|
|
12
58
|
flex-direction: row;
|
|
13
59
|
|
|
@@ -21,7 +67,8 @@ const styles = createStaticStyles(({ css }) => ({ splitButton: css`
|
|
|
21
67
|
border-start-start-radius: 0;
|
|
22
68
|
border-end-start-radius: 0;
|
|
23
69
|
}
|
|
24
|
-
`
|
|
70
|
+
`
|
|
71
|
+
}));
|
|
25
72
|
const SplitButton = ({ children, className, style, danger, disabled, loading, size, type }) => {
|
|
26
73
|
const shared = useMemo(() => ({
|
|
27
74
|
danger,
|
|
@@ -39,8 +86,8 @@ const SplitButton = ({ children, className, style, danger, disabled, loading, si
|
|
|
39
86
|
return /* @__PURE__ */ jsx(SplitButtonContext, {
|
|
40
87
|
value: shared,
|
|
41
88
|
children: /* @__PURE__ */ jsx("div", {
|
|
42
|
-
className: cx(styles.splitButton, className),
|
|
43
89
|
style,
|
|
90
|
+
className: cx(styles.splitButton, type === "primary" && styles.solid, type === "primary" && (danger ? styles.solidDanger : styles.solidPrimary), (disabled || loading) && styles.interactionDisabled, className),
|
|
44
91
|
children
|
|
45
92
|
})
|
|
46
93
|
});
|
|
@@ -52,12 +99,15 @@ const SplitButtonMain = (props) => {
|
|
|
52
99
|
...props
|
|
53
100
|
});
|
|
54
101
|
};
|
|
55
|
-
const SplitButtonMenu = ({ icon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }), ...menuProps }) => {
|
|
102
|
+
const SplitButtonMenu = ({ icon = /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14 }), disabled, ...menuProps }) => {
|
|
56
103
|
const shared = use(SplitButtonContext);
|
|
104
|
+
const interactionDisabled = disabled || shared.disabled || shared.loading;
|
|
57
105
|
return /* @__PURE__ */ jsx(DropdownMenu, {
|
|
58
106
|
...menuProps,
|
|
107
|
+
disabled: interactionDisabled,
|
|
59
108
|
children: /* @__PURE__ */ jsx(Button, {
|
|
60
109
|
...shared,
|
|
110
|
+
disabled: interactionDisabled,
|
|
61
111
|
icon
|
|
62
112
|
})
|
|
63
113
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButton.mjs","names":[],"sources":["../../../src/base-ui/Button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { createContext, type CSSProperties, type ReactNode, use, useMemo } from 'react';\n\nimport { DropdownMenu, type DropdownMenuProps } from '@/base-ui/DropdownMenu';\n\nimport Button from './Button';\nimport type { ButtonProps } from './type';\n\ninterface SharedVisualProps {\n danger?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: ButtonProps['size'];\n type?: ButtonProps['type'];\n}\n\ninterface SplitButtonProps extends SharedVisualProps {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nconst SplitButtonContext = createContext<SharedVisualProps>({});\n\nconst styles = createStaticStyles(({ css }) => ({\n splitButton: css`\n display: inline-flex;\n flex-direction: row;\n\n & > :where(button, a):first-of-type {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n & > :where(button, a):last-of-type {\n margin-inline-start: -1px;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `,\n}));\n\nconst SplitButton = ({\n children,\n className,\n style,\n danger,\n disabled,\n loading,\n size,\n type,\n}: SplitButtonProps) => {\n const shared = useMemo<SharedVisualProps>(\n () => ({ danger, disabled, loading, size, type }),\n [danger, disabled, loading, size, type],\n );\n return (\n <SplitButtonContext value={shared}>\n <div
|
|
1
|
+
{"version":3,"file":"SplitButton.mjs","names":[],"sources":["../../../src/base-ui/Button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { createContext, type CSSProperties, type ReactNode, use, useMemo } from 'react';\n\nimport { DropdownMenu, type DropdownMenuProps } from '@/base-ui/DropdownMenu';\n\nimport Button from './Button';\nimport type { ButtonProps } from './type';\n\ninterface SharedVisualProps {\n danger?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: ButtonProps['size'];\n type?: ButtonProps['type'];\n}\n\ninterface SplitButtonProps extends SharedVisualProps {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nconst SplitButtonContext = createContext<SharedVisualProps>({});\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n interactionDisabled: css`\n opacity: 0.5;\n\n & > :where(button, a):disabled,\n & > :where(button, a)[aria-disabled='true'] {\n opacity: 1;\n }\n `,\n solid: css`\n & > :where(button, a):last-of-type::before {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n\n width: 1px;\n\n opacity: 0.2;\n background: currentcolor;\n }\n `,\n solidDanger: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n solidPrimary: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n splitButton: css`\n display: inline-flex;\n flex-direction: row;\n\n & > :where(button, a):first-of-type {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n & > :where(button, a):last-of-type {\n margin-inline-start: -1px;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `,\n}));\n\nconst SplitButton = ({\n children,\n className,\n style,\n danger,\n disabled,\n loading,\n size,\n type,\n}: SplitButtonProps) => {\n const shared = useMemo<SharedVisualProps>(\n () => ({ danger, disabled, loading, size, type }),\n [danger, disabled, loading, size, type],\n );\n return (\n <SplitButtonContext value={shared}>\n <div\n style={style}\n className={cx(\n styles.splitButton,\n type === 'primary' && styles.solid,\n type === 'primary' && (danger ? styles.solidDanger : styles.solidPrimary),\n (disabled || loading) && styles.interactionDisabled,\n className,\n )}\n >\n {children}\n </div>\n </SplitButtonContext>\n );\n};\n\nconst SplitButtonMain = (props: ButtonProps) => {\n const shared = use(SplitButtonContext);\n return <Button {...shared} {...props} />;\n};\n\ninterface SplitButtonMenuProps extends Omit<DropdownMenuProps, 'children'> {\n icon?: ReactNode;\n}\n\nconst SplitButtonMenu = ({\n icon = <ChevronDownIcon size={14} />,\n disabled,\n ...menuProps\n}: SplitButtonMenuProps) => {\n const shared = use(SplitButtonContext);\n const interactionDisabled = disabled || shared.disabled || shared.loading;\n\n return (\n <DropdownMenu {...menuProps} disabled={interactionDisabled}>\n <Button {...shared} disabled={interactionDisabled} icon={icon} />\n </DropdownMenu>\n );\n};\n\ntype SplitButtonComponent = typeof SplitButton & {\n Main: typeof SplitButtonMain;\n Menu: typeof SplitButtonMenu;\n};\n\n(SplitButton as SplitButtonComponent).Main = SplitButtonMain;\n(SplitButton as SplitButtonComponent).Menu = SplitButtonMenu;\n\nexport type { SplitButtonMenuProps, SplitButtonProps };\nexport default SplitButton as SplitButtonComponent;\n"],"mappings":";;;;;;;;AAyBA,MAAM,qBAAqB,cAAiC,CAAC,CAAC;AAE9D,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,qBAAqB,GAAG;;;;;;;;CAQxB,OAAO,GAAG;;;;;;;;;;;;;;;CAeV,aAAa,GAAG;;sBAEI,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAG1C,cAAc,GAAG;;sBAEG,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAG5C,aAAa,GAAG;;;;;;;;;;;;;;;AAelB,EAAE;AAEF,MAAM,eAAe,EACnB,UACA,WACA,OACA,QACA,UACA,SACA,MACA,WACsB;CACtB,MAAM,SAAS,eACN;EAAE;EAAQ;EAAU;EAAS;EAAM;CAAK,IAC/C;EAAC;EAAQ;EAAU;EAAS;EAAM;CAAI,CACxC;CACA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,OAAD;GACS;GACP,WAAW,GACT,OAAO,aACP,SAAS,aAAa,OAAO,OAC7B,SAAS,cAAc,SAAS,OAAO,cAAc,OAAO,gBAC3D,YAAY,YAAY,OAAO,qBAChC,SACF;GAEC;EACE,CAAA;CACa,CAAA;AAExB;AAEA,MAAM,mBAAmB,UAAuB;CAC9C,MAAM,SAAS,IAAI,kBAAkB;CACrC,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAQ,GAAI;CAAQ,CAAA;AACzC;AAMA,MAAM,mBAAmB,EACvB,OAAO,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA,GACnC,UACA,GAAG,gBACuB;CAC1B,MAAM,SAAS,IAAI,kBAAkB;CACrC,MAAM,sBAAsB,YAAY,OAAO,YAAY,OAAO;CAElE,OACE,oBAAC,cAAD;EAAc,GAAI;EAAW,UAAU;EACrC,UAAA,oBAAC,QAAD;GAAQ,GAAI;GAAQ,UAAU;GAA2B;EAAO,CAAA;CACpD,CAAA;AAElB;AAOA,YAAsC,OAAO;AAC7C,YAAsC,OAAO"}
|
|
@@ -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" | "
|
|
27
|
+
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|