@bioturing/components 0.17.0 → 0.17.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.
|
@@ -3,18 +3,18 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as w } from "react";
|
|
4
4
|
import { useRender as N } from "@base-ui-components/react/use-render";
|
|
5
5
|
import './style.css';/* empty css */
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
6
|
+
import { Tooltip as S } from "../Tooltip/component.js";
|
|
7
|
+
import { Spin as T } from "../Spin/component.js";
|
|
8
8
|
import { useCls as $ } from "../utils/antdUtils.js";
|
|
9
9
|
import { clsx as k } from "../utils/cn.js";
|
|
10
10
|
const q = ({
|
|
11
11
|
label: s,
|
|
12
|
-
size:
|
|
13
|
-
negativeMargin:
|
|
14
|
-
children:
|
|
15
|
-
className:
|
|
16
|
-
tooltipProps:
|
|
17
|
-
as:
|
|
12
|
+
size: l = "medium",
|
|
13
|
+
negativeMargin: b = !0,
|
|
14
|
+
children: v,
|
|
15
|
+
className: f,
|
|
16
|
+
tooltipProps: x = {},
|
|
17
|
+
as: C,
|
|
18
18
|
href: o,
|
|
19
19
|
// Extract anchor-specific props
|
|
20
20
|
target: r,
|
|
@@ -23,17 +23,17 @@ const q = ({
|
|
|
23
23
|
hrefLang: p,
|
|
24
24
|
referrerPolicy: u,
|
|
25
25
|
loading: t,
|
|
26
|
-
render:
|
|
27
|
-
...
|
|
26
|
+
render: I,
|
|
27
|
+
...B
|
|
28
28
|
}, d) => {
|
|
29
|
-
const n = $(),
|
|
29
|
+
const n = $(), R = k(
|
|
30
30
|
n("icon-button"),
|
|
31
|
-
n(`icon-button-${
|
|
32
|
-
n(
|
|
33
|
-
|
|
34
|
-
), i =
|
|
31
|
+
n(`icon-button-${l}`),
|
|
32
|
+
n(b ? "icon-button-negative-margin" : ""),
|
|
33
|
+
f
|
|
34
|
+
), i = C || (o ? "a" : "button"), j = {
|
|
35
35
|
ref: d,
|
|
36
|
-
className:
|
|
36
|
+
className: R,
|
|
37
37
|
...i === "button" && { type: "button" },
|
|
38
38
|
...i === "a" ? {
|
|
39
39
|
...o && { href: o },
|
|
@@ -44,16 +44,17 @@ const q = ({
|
|
|
44
44
|
...u !== void 0 && { referrerPolicy: u }
|
|
45
45
|
} : {},
|
|
46
46
|
"data-loading": t,
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
children: t ? /* @__PURE__ */ m(T, {}) : v,
|
|
48
|
+
...B
|
|
49
|
+
}, a = N({
|
|
49
50
|
ref: d,
|
|
50
|
-
render:
|
|
51
|
-
props:
|
|
51
|
+
render: I || /* @__PURE__ */ m(i, {}),
|
|
52
|
+
props: j,
|
|
52
53
|
state: {
|
|
53
54
|
loading: t
|
|
54
55
|
}
|
|
55
56
|
});
|
|
56
|
-
return s ? /* @__PURE__ */ m(
|
|
57
|
+
return s ? /* @__PURE__ */ m(S, { title: s, arrow: !1, ...x, children: a }) : a;
|
|
57
58
|
}, J = w(q);
|
|
58
59
|
export {
|
|
59
60
|
J as IconButton
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.js","sources":["../../../src/components/IconButton/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type ComponentPropsWithoutRef,\n type ReactElement,\n type Ref,\n type AnchorHTMLAttributes,\n ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../Tooltip\";\nimport { useCls, clsx } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Spin } from \"../Spin\";\n\n// Base props without href/as handling\ntype IconButtonBaseProps = {\n /**\n * Label text or element to display within tooltip\n * @default undefined\n */\n label?: React.ReactNode;\n /**\n * Size of the icon button: small (1.25rem) or medium (1.5rem)\n * @default medium\n */\n size?: \"small\" | \"medium\";\n /**\n * Whether to apply negative margin for better visual alignment\n * @default true\n */\n negativeMargin?: boolean;\n /**\n * Whether to show loading state\n * @default false\n */\n loading?: boolean;\n /**\n * Props to pass to the Tooltip component when wrapping the button\n */\n tooltipProps?: TooltipProps;\n /**\n * Custom render function for the button\n */\n render?: useRender.RenderProp<{ loading: boolean }>;\n};\n\n// Extract anchor-specific props we want to automatically handle\ntype AnchorSpecificProps = Pick<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n \"target\" | \"rel\" | \"download\" | \"hrefLang\" | \"referrerPolicy\"\n>;\n\n// Props when href is provided - as defaults to 'a' and includes anchor-specific props\ntype WithHrefProps<E extends ElementType = \"a\"> = IconButtonBaseProps & {\n href: string;\n as?: E;\n} & AnchorSpecificProps;\n\n// Props when href is not provided - as defaults to 'button'\ntype WithoutHrefProps<E extends ElementType = \"button\"> =\n IconButtonBaseProps & {\n href?: undefined;\n as?: E;\n } & {\n [K in keyof AnchorSpecificProps]?: never;\n };\n\n// Combined props type with conditional behavior\ntype IconButtonOwnProps<E extends ElementType = ElementType> =\n | WithHrefProps<E>\n | WithoutHrefProps<E>;\n\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n IconButtonOwnProps<E> &\n Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;\n\n/**\n * A type-safe polymorphic component pattern\n */\ninterface PolymorphicComponentProps<E extends ElementType = \"button\"> {\n as?: E;\n href?: string;\n}\n\n/**\n * Type for wrapping the forwardRef implementation\n */\ntype IconButtonComponent = <E extends ElementType = \"button\">(\n props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReactElement;\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n {\n label,\n size = \"medium\",\n negativeMargin = true,\n children,\n className,\n tooltipProps = {},\n as,\n href,\n // Extract anchor-specific props\n target,\n rel,\n download,\n hrefLang,\n referrerPolicy,\n loading,\n render,\n ...rest\n }: IconButtonProps<E> & PolymorphicComponentProps<E>,\n ref: Ref<Element>\n) => {\n const cls = useCls();\n const buttonClasses = clsx(\n cls(\"icon-button\"),\n cls(`icon-button-${size}`),\n cls(negativeMargin ? \"icon-button-negative-margin\" : \"\"),\n className\n );\n\n // Use a type assertion for the component to avoid TypeScript errors\n const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n const elementProps = {\n ref,\n className: buttonClasses,\n ...(Component === \"button\" && { type: \"button\" }),\n ...(Component === \"a\"\n ? {\n ...(href && { href }),\n ...(target !== undefined && { target }),\n ...(rel !== undefined && { rel }),\n ...(download !== undefined && { download }),\n ...(hrefLang !== undefined && { hrefLang }),\n ...(referrerPolicy !== undefined && { referrerPolicy }),\n }\n : {}),\n \"data-loading\": loading,\n ...rest,\n };\n\n const element = useRender({\n ref,\n render: render ||
|
|
1
|
+
{"version":3,"file":"component.js","sources":["../../../src/components/IconButton/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n forwardRef,\n type ElementType,\n type ComponentPropsWithoutRef,\n type ReactElement,\n type Ref,\n type AnchorHTMLAttributes,\n ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../Tooltip\";\nimport { useCls, clsx } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Spin } from \"../Spin\";\n\n// Base props without href/as handling\ntype IconButtonBaseProps = {\n /**\n * Label text or element to display within tooltip\n * @default undefined\n */\n label?: React.ReactNode;\n /**\n * Size of the icon button: small (1.25rem) or medium (1.5rem)\n * @default medium\n */\n size?: \"small\" | \"medium\";\n /**\n * Whether to apply negative margin for better visual alignment\n * @default true\n */\n negativeMargin?: boolean;\n /**\n * Whether to show loading state\n * @default false\n */\n loading?: boolean;\n /**\n * Props to pass to the Tooltip component when wrapping the button\n */\n tooltipProps?: TooltipProps;\n /**\n * Custom render function for the button\n */\n render?: useRender.RenderProp<{ loading: boolean }>;\n};\n\n// Extract anchor-specific props we want to automatically handle\ntype AnchorSpecificProps = Pick<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n \"target\" | \"rel\" | \"download\" | \"hrefLang\" | \"referrerPolicy\"\n>;\n\n// Props when href is provided - as defaults to 'a' and includes anchor-specific props\ntype WithHrefProps<E extends ElementType = \"a\"> = IconButtonBaseProps & {\n href: string;\n as?: E;\n} & AnchorSpecificProps;\n\n// Props when href is not provided - as defaults to 'button'\ntype WithoutHrefProps<E extends ElementType = \"button\"> =\n IconButtonBaseProps & {\n href?: undefined;\n as?: E;\n } & {\n [K in keyof AnchorSpecificProps]?: never;\n };\n\n// Combined props type with conditional behavior\ntype IconButtonOwnProps<E extends ElementType = ElementType> =\n | WithHrefProps<E>\n | WithoutHrefProps<E>;\n\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n IconButtonOwnProps<E> &\n Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;\n\n/**\n * A type-safe polymorphic component pattern\n */\ninterface PolymorphicComponentProps<E extends ElementType = \"button\"> {\n as?: E;\n href?: string;\n}\n\n/**\n * Type for wrapping the forwardRef implementation\n */\ntype IconButtonComponent = <E extends ElementType = \"button\">(\n props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReactElement;\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n {\n label,\n size = \"medium\",\n negativeMargin = true,\n children,\n className,\n tooltipProps = {},\n as,\n href,\n // Extract anchor-specific props\n target,\n rel,\n download,\n hrefLang,\n referrerPolicy,\n loading,\n render,\n ...rest\n }: IconButtonProps<E> & PolymorphicComponentProps<E>,\n ref: Ref<Element>\n) => {\n const cls = useCls();\n const buttonClasses = clsx(\n cls(\"icon-button\"),\n cls(`icon-button-${size}`),\n cls(negativeMargin ? \"icon-button-negative-margin\" : \"\"),\n className\n );\n\n // Use a type assertion for the component to avoid TypeScript errors\n const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n const elementProps = {\n ref,\n className: buttonClasses,\n ...(Component === \"button\" && { type: \"button\" }),\n ...(Component === \"a\"\n ? {\n ...(href && { href }),\n ...(target !== undefined && { target }),\n ...(rel !== undefined && { rel }),\n ...(download !== undefined && { download }),\n ...(hrefLang !== undefined && { hrefLang }),\n ...(referrerPolicy !== undefined && { referrerPolicy }),\n }\n : {}),\n \"data-loading\": loading,\n children: loading ? <Spin /> : children,\n ...rest,\n };\n\n const element = useRender({\n ref,\n render: render || <Component />,\n props: elementProps,\n state: {\n loading,\n },\n });\n\n return label ? (\n <Tooltip title={label} arrow={false} {...tooltipProps}>\n {element}\n </Tooltip>\n ) : (\n element\n );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as IconButtonComponent;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","useRender","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAkGA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH,EAAI,aAAa;AAAA,IACjBA,EAAI,eAAehB,CAAI,EAAE;AAAA,IACzBgB,EAAIf,IAAiB,gCAAgC,EAAE;AAAA,IACvDE;AAAA,EACF,GAGMiB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKrB;AAAA,IAC/B,GAAGY;AAAA,EACL,GAEMU,IAAUC,EAAU;AAAA,IACxB,KAAAV;AAAA,IACA,QAAQF,KAAU,gBAAAS,EAACF,GAAU,CAAA,CAAA;AAAA,IAC7B,OAAOC;AAAA,IACP,OAAO;AAAA,MACL,SAAAT;AAAA,IAAA;AAAA,EACF,CACD;AAEM,SAAAb,IACJ,gBAAAuB,EAAAI,GAAA,EAAQ,OAAO3B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAoB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW9B,CAAc;"}
|