@lobehub/ui 5.57.0 → 5.57.1
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.
|
@@ -17,6 +17,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
17
17
|
}
|
|
18
18
|
`,
|
|
19
19
|
solid: css`
|
|
20
|
+
/* solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled) */
|
|
21
|
+
& > :where(button, a):last-of-type {
|
|
22
|
+
margin-inline-start: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
20
25
|
& > :where(button, a):last-of-type::before {
|
|
21
26
|
pointer-events: none;
|
|
22
27
|
content: '';
|
|
@@ -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, 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
|
|
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 /* solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled) */\n & > :where(button, a):last-of-type {\n margin-inline-start: 0;\n }\n\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;;;;;;;;;;;;;;;;;;;;CAoBV,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"}
|
|
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
|
|
|
42
42
|
mark?: boolean | null | undefined;
|
|
43
43
|
shiny?: boolean | null | undefined;
|
|
44
44
|
strong?: boolean | null | undefined;
|
|
45
|
-
type?: "danger" | "
|
|
45
|
+
type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|