@cytario/design 1.6.1 → 1.8.0
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/dist/index.d.ts +611 -58
- package/dist/index.js +2361 -32
- package/dist/index.js.map +1 -0
- package/package.json +10 -5
- package/src/tokens/variables-dark.css +148 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +0 -11
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts.map +0 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -9
- package/dist/components/Breadcrumbs/index.d.ts +0 -3
- package/dist/components/Breadcrumbs/index.d.ts.map +0 -1
- package/dist/components/Breadcrumbs/index.js +0 -1
- package/dist/components/Button/Button.d.ts +0 -18
- package/dist/components/Button/Button.d.ts.map +0 -1
- package/dist/components/Button/Button.js +0 -51
- package/dist/components/Button/index.d.ts +0 -3
- package/dist/components/Button/index.d.ts.map +0 -1
- package/dist/components/Button/index.js +0 -1
- package/dist/components/ButtonLink/ButtonLink.d.ts +0 -35
- package/dist/components/ButtonLink/ButtonLink.d.ts.map +0 -1
- package/dist/components/ButtonLink/ButtonLink.js +0 -47
- package/dist/components/ButtonLink/index.d.ts +0 -3
- package/dist/components/ButtonLink/index.d.ts.map +0 -1
- package/dist/components/ButtonLink/index.js +0 -1
- package/dist/components/Checkbox/Checkbox.d.ts +0 -8
- package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
- package/dist/components/Checkbox/Checkbox.js +0 -19
- package/dist/components/Checkbox/index.d.ts +0 -3
- package/dist/components/Checkbox/index.d.ts.map +0 -1
- package/dist/components/Checkbox/index.js +0 -1
- package/dist/components/Dialog/Dialog.d.ts +0 -11
- package/dist/components/Dialog/Dialog.d.ts.map +0 -1
- package/dist/components/Dialog/Dialog.js +0 -31
- package/dist/components/Dialog/index.d.ts +0 -3
- package/dist/components/Dialog/index.d.ts.map +0 -1
- package/dist/components/Dialog/index.js +0 -1
- package/dist/components/EmptyState/EmptyState.d.ts +0 -11
- package/dist/components/EmptyState/EmptyState.d.ts.map +0 -1
- package/dist/components/EmptyState/EmptyState.js +0 -10
- package/dist/components/EmptyState/index.d.ts +0 -3
- package/dist/components/EmptyState/index.d.ts.map +0 -1
- package/dist/components/EmptyState/index.js +0 -1
- package/dist/components/Field/Field.d.ts +0 -13
- package/dist/components/Field/Field.d.ts.map +0 -1
- package/dist/components/Field/Field.js +0 -15
- package/dist/components/Field/index.d.ts +0 -3
- package/dist/components/Field/index.d.ts.map +0 -1
- package/dist/components/Field/index.js +0 -1
- package/dist/components/Fieldset/Fieldset.d.ts +0 -8
- package/dist/components/Fieldset/Fieldset.d.ts.map +0 -1
- package/dist/components/Fieldset/Fieldset.js +0 -15
- package/dist/components/Fieldset/index.d.ts +0 -3
- package/dist/components/Fieldset/index.d.ts.map +0 -1
- package/dist/components/Fieldset/index.js +0 -1
- package/dist/components/Heading/Heading.d.ts +0 -19
- package/dist/components/Heading/Heading.d.ts.map +0 -1
- package/dist/components/Heading/Heading.js +0 -39
- package/dist/components/Heading/index.d.ts +0 -3
- package/dist/components/Heading/index.d.ts.map +0 -1
- package/dist/components/Heading/index.js +0 -1
- package/dist/components/Icon/Icon.d.ts +0 -15
- package/dist/components/Icon/Icon.d.ts.map +0 -1
- package/dist/components/Icon/Icon.js +0 -11
- package/dist/components/Icon/index.d.ts +0 -3
- package/dist/components/Icon/index.d.ts.map +0 -1
- package/dist/components/Icon/index.js +0 -1
- package/dist/components/IconButton/IconButton.d.ts +0 -23
- package/dist/components/IconButton/IconButton.d.ts.map +0 -1
- package/dist/components/IconButton/IconButton.js +0 -59
- package/dist/components/IconButton/index.d.ts +0 -3
- package/dist/components/IconButton/index.d.ts.map +0 -1
- package/dist/components/IconButton/index.js +0 -1
- package/dist/components/Input/Input.d.ts +0 -23
- package/dist/components/Input/Input.d.ts.map +0 -1
- package/dist/components/Input/Input.js +0 -97
- package/dist/components/Input/index.d.ts +0 -3
- package/dist/components/Input/index.d.ts.map +0 -1
- package/dist/components/Input/index.js +0 -1
- package/dist/components/InputAddon/InputAddon.d.ts +0 -7
- package/dist/components/InputAddon/InputAddon.d.ts.map +0 -1
- package/dist/components/InputAddon/InputAddon.js +0 -35
- package/dist/components/InputAddon/index.d.ts +0 -3
- package/dist/components/InputAddon/index.d.ts.map +0 -1
- package/dist/components/InputAddon/index.js +0 -1
- package/dist/components/InputGroup/InputGroup.d.ts +0 -7
- package/dist/components/InputGroup/InputGroup.d.ts.map +0 -1
- package/dist/components/InputGroup/InputGroup.js +0 -16
- package/dist/components/InputGroup/InputGroupContext.d.ts +0 -9
- package/dist/components/InputGroup/InputGroupContext.d.ts.map +0 -1
- package/dist/components/InputGroup/InputGroupContext.js +0 -8
- package/dist/components/InputGroup/index.d.ts +0 -5
- package/dist/components/InputGroup/index.d.ts.map +0 -1
- package/dist/components/InputGroup/index.js +0 -2
- package/dist/components/Label/Label.d.ts +0 -7
- package/dist/components/Label/Label.d.ts.map +0 -1
- package/dist/components/Label/Label.js +0 -12
- package/dist/components/Label/index.d.ts +0 -3
- package/dist/components/Label/index.d.ts.map +0 -1
- package/dist/components/Label/index.js +0 -1
- package/dist/components/Link/Link.d.ts +0 -10
- package/dist/components/Link/Link.d.ts.map +0 -1
- package/dist/components/Link/Link.js +0 -22
- package/dist/components/Link/index.d.ts +0 -3
- package/dist/components/Link/index.d.ts.map +0 -1
- package/dist/components/Link/index.js +0 -1
- package/dist/components/Menu/Menu.d.ts +0 -24
- package/dist/components/Menu/Menu.d.ts.map +0 -1
- package/dist/components/Menu/Menu.js +0 -29
- package/dist/components/Menu/index.d.ts +0 -3
- package/dist/components/Menu/index.d.ts.map +0 -1
- package/dist/components/Menu/index.js +0 -1
- package/dist/components/Popover/Popover.d.ts +0 -44
- package/dist/components/Popover/Popover.d.ts.map +0 -1
- package/dist/components/Popover/Popover.js +0 -46
- package/dist/components/Popover/index.d.ts +0 -3
- package/dist/components/Popover/index.d.ts.map +0 -1
- package/dist/components/Popover/index.js +0 -1
- package/dist/components/Radio/Radio.d.ts +0 -18
- package/dist/components/Radio/Radio.d.ts.map +0 -1
- package/dist/components/Radio/Radio.js +0 -43
- package/dist/components/Radio/index.d.ts +0 -3
- package/dist/components/Radio/index.d.ts.map +0 -1
- package/dist/components/Radio/index.js +0 -1
- package/dist/components/Select/Select.d.ts +0 -17
- package/dist/components/Select/Select.d.ts.map +0 -1
- package/dist/components/Select/Select.js +0 -42
- package/dist/components/Select/index.d.ts +0 -3
- package/dist/components/Select/index.d.ts.map +0 -1
- package/dist/components/Select/index.js +0 -1
- package/dist/components/Spinner/Spinner.d.ts +0 -10
- package/dist/components/Spinner/Spinner.d.ts.map +0 -1
- package/dist/components/Spinner/Spinner.js +0 -12
- package/dist/components/Spinner/index.d.ts +0 -3
- package/dist/components/Spinner/index.d.ts.map +0 -1
- package/dist/components/Spinner/index.js +0 -1
- package/dist/components/Switch/Switch.d.ts +0 -12
- package/dist/components/Switch/Switch.d.ts.map +0 -1
- package/dist/components/Switch/Switch.js +0 -34
- package/dist/components/Switch/index.d.ts +0 -3
- package/dist/components/Switch/index.d.ts.map +0 -1
- package/dist/components/Switch/index.js +0 -1
- package/dist/components/Table/Table.d.ts +0 -13
- package/dist/components/Table/Table.d.ts.map +0 -1
- package/dist/components/Table/Table.js +0 -61
- package/dist/components/Table/index.d.ts +0 -3
- package/dist/components/Table/index.d.ts.map +0 -1
- package/dist/components/Table/index.js +0 -1
- package/dist/components/Tabs/Tabs.d.ts +0 -32
- package/dist/components/Tabs/Tabs.d.ts.map +0 -1
- package/dist/components/Tabs/Tabs.js +0 -100
- package/dist/components/Tabs/index.d.ts +0 -3
- package/dist/components/Tabs/index.d.ts.map +0 -1
- package/dist/components/Tabs/index.js +0 -1
- package/dist/components/Toast/Toast.d.ts +0 -33
- package/dist/components/Toast/Toast.d.ts.map +0 -1
- package/dist/components/Toast/Toast.js +0 -102
- package/dist/components/Toast/index.d.ts +0 -3
- package/dist/components/Toast/index.d.ts.map +0 -1
- package/dist/components/Toast/index.js +0 -1
- package/dist/components/ToggleButton/ToggleButton.d.ts +0 -13
- package/dist/components/ToggleButton/ToggleButton.d.ts.map +0 -1
- package/dist/components/ToggleButton/ToggleButton.js +0 -42
- package/dist/components/ToggleButton/index.d.ts +0 -3
- package/dist/components/ToggleButton/index.d.ts.map +0 -1
- package/dist/components/ToggleButton/index.js +0 -1
- package/dist/components/Tooltip/Tooltip.d.ts +0 -15
- package/dist/components/Tooltip/Tooltip.d.ts.map +0 -1
- package/dist/components/Tooltip/Tooltip.js +0 -20
- package/dist/components/Tooltip/index.d.ts +0 -3
- package/dist/components/Tooltip/index.d.ts.map +0 -1
- package/dist/components/Tooltip/index.js +0 -1
- package/dist/components/_shared/styles.d.ts +0 -5
- package/dist/components/_shared/styles.d.ts.map +0 -1
- package/dist/components/_shared/styles.js +0 -43
- package/dist/index.d.ts.map +0 -1
- package/dist/test-setup.d.ts +0 -2
- package/dist/test-setup.d.ts.map +0 -1
- package/dist/test-setup.js +0 -1
- package/dist/tokens/tokens.d.ts +0 -144
- package/dist/tokens/tokens.d.ts.map +0 -1
- package/dist/tokens/tokens.js +0 -143
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Button as AriaButton, } from "react-aria-components";
|
|
3
|
-
import { variantStyles } from "../_shared/styles";
|
|
4
|
-
import { Icon } from "../Icon";
|
|
5
|
-
import { Spinner } from "../Spinner";
|
|
6
|
-
import { Tooltip } from "../Tooltip";
|
|
7
|
-
import { useInputGroup } from "../InputGroup/InputGroupContext";
|
|
8
|
-
const squareSizeStyles = {
|
|
9
|
-
sm: "h-8 w-8",
|
|
10
|
-
md: "h-10 w-10",
|
|
11
|
-
lg: "h-12 w-12",
|
|
12
|
-
};
|
|
13
|
-
const iconSizeMap = {
|
|
14
|
-
sm: "sm",
|
|
15
|
-
md: "sm",
|
|
16
|
-
lg: "md",
|
|
17
|
-
};
|
|
18
|
-
function groupRadiusClass(position) {
|
|
19
|
-
switch (position) {
|
|
20
|
-
case "start":
|
|
21
|
-
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
22
|
-
case "middle":
|
|
23
|
-
return "rounded-none";
|
|
24
|
-
case "end":
|
|
25
|
-
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
26
|
-
default:
|
|
27
|
-
return "rounded-[var(--border-radius-md)]";
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
export function IconButton({ icon, "aria-label": ariaLabel, variant = "ghost", size = "md", showTooltip = true, tooltipPlacement = "top", isLoading = false, isDisabled, className, ...props }) {
|
|
31
|
-
const { inGroup, position } = useInputGroup();
|
|
32
|
-
const radiusClass = inGroup
|
|
33
|
-
? groupRadiusClass(position)
|
|
34
|
-
: "rounded-[var(--border-radius-md)]";
|
|
35
|
-
const marginClass = inGroup && position !== "start" && position !== "standalone"
|
|
36
|
-
? "-ml-px"
|
|
37
|
-
: "";
|
|
38
|
-
const focusRing = inGroup
|
|
39
|
-
? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10"
|
|
40
|
-
: "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
|
|
41
|
-
const button = (_jsx(AriaButton, { ...props, "aria-label": ariaLabel, isDisabled: isDisabled || isLoading, className: [
|
|
42
|
-
"inline-flex items-center justify-center shrink-0",
|
|
43
|
-
radiusClass,
|
|
44
|
-
"outline-none transition-colors",
|
|
45
|
-
focusRing,
|
|
46
|
-
"disabled:opacity-50 disabled:pointer-events-none",
|
|
47
|
-
isLoading ? "pointer-events-none" : "",
|
|
48
|
-
variantStyles[variant],
|
|
49
|
-
squareSizeStyles[size],
|
|
50
|
-
marginClass,
|
|
51
|
-
className,
|
|
52
|
-
]
|
|
53
|
-
.filter(Boolean)
|
|
54
|
-
.join(" "), children: isLoading ? (_jsx(Spinner, { size: iconSizeMap[size] })) : (_jsx(Icon, { icon: icon, size: iconSizeMap[size] })) }));
|
|
55
|
-
if (showTooltip) {
|
|
56
|
-
return (_jsx(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: button }));
|
|
57
|
-
}
|
|
58
|
-
return button;
|
|
59
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { IconButton } from "./IconButton";
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { type TextFieldProps } from "react-aria-components";
|
|
2
|
-
export interface InputProps extends Omit<TextFieldProps, "children" | "className"> {
|
|
3
|
-
/** Label text displayed above the input. Omit for raw input mode. */
|
|
4
|
-
label?: string;
|
|
5
|
-
/** Placeholder text shown when the input is empty */
|
|
6
|
-
placeholder?: string;
|
|
7
|
-
/** Help text shown below the input */
|
|
8
|
-
description?: string;
|
|
9
|
-
/** Error message shown below the input (triggers error styling) */
|
|
10
|
-
errorMessage?: string;
|
|
11
|
-
/** HTML input type */
|
|
12
|
-
type?: "text" | "email" | "password" | "number";
|
|
13
|
-
/** Controls padding and font size */
|
|
14
|
-
size?: "sm" | "md" | "lg";
|
|
15
|
-
/** Text prefix shown inside the input on the left (e.g., "$", "https://") */
|
|
16
|
-
prefix?: string;
|
|
17
|
-
/** Text alignment within the input */
|
|
18
|
-
align?: "left" | "center" | "right";
|
|
19
|
-
/** Additional CSS class for the outer wrapper */
|
|
20
|
-
className?: string;
|
|
21
|
-
}
|
|
22
|
-
export declare function Input({ label, placeholder, description, errorMessage, type, size, prefix, align, isDisabled, isRequired, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAqB/B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,WAAW,CAAC;IACtD,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IAChD,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,IAAa,EACb,IAAW,EACX,MAAM,EACN,KAAc,EACd,UAAU,EACV,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAkIZ"}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { TextField, Label, Input as AriaInput, Text, } from "react-aria-components";
|
|
3
|
-
import { useInputGroup } from "../InputGroup/InputGroupContext";
|
|
4
|
-
const sizeClasses = {
|
|
5
|
-
sm: "px-3 py-1.5 text-sm",
|
|
6
|
-
md: "px-4 py-2 text-base",
|
|
7
|
-
lg: "px-4 py-3 text-lg",
|
|
8
|
-
};
|
|
9
|
-
const prefixSizeClasses = {
|
|
10
|
-
sm: "px-3 text-sm",
|
|
11
|
-
md: "px-3 text-base",
|
|
12
|
-
lg: "px-4 text-lg",
|
|
13
|
-
};
|
|
14
|
-
const alignClasses = {
|
|
15
|
-
left: "text-left",
|
|
16
|
-
center: "text-center",
|
|
17
|
-
right: "text-right",
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Returns Tailwind border-radius classes for the border-bearing element
|
|
21
|
-
* based on InputGroup position context.
|
|
22
|
-
*/
|
|
23
|
-
function groupRadiusClasses(position) {
|
|
24
|
-
switch (position) {
|
|
25
|
-
case "start":
|
|
26
|
-
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
27
|
-
case "middle":
|
|
28
|
-
return "rounded-none";
|
|
29
|
-
case "end":
|
|
30
|
-
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
31
|
-
default:
|
|
32
|
-
return "rounded-[var(--border-radius-md)]";
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
export function Input({ label, placeholder, description, errorMessage, type = "text", size = "md", prefix, align = "left", isDisabled, isRequired, className, ...props }) {
|
|
36
|
-
const isInvalid = !!errorMessage;
|
|
37
|
-
const { inGroup, position } = useInputGroup();
|
|
38
|
-
const borderColor = isInvalid
|
|
39
|
-
? "border-[var(--color-border-danger)]"
|
|
40
|
-
: "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]";
|
|
41
|
-
const radiusClass = inGroup
|
|
42
|
-
? groupRadiusClasses(position)
|
|
43
|
-
: "rounded-[var(--border-radius-md)]";
|
|
44
|
-
/** When not first in a group, overlap left border with previous sibling */
|
|
45
|
-
const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
|
|
46
|
-
return (_jsxs(TextField, { ...props, type: type, isDisabled: isDisabled, isRequired: isRequired, isInvalid: isInvalid, className: [
|
|
47
|
-
"flex flex-col gap-[var(--spacing-1)]",
|
|
48
|
-
inGroup ? "min-w-0 flex-1" : "",
|
|
49
|
-
marginClass,
|
|
50
|
-
className,
|
|
51
|
-
]
|
|
52
|
-
.filter(Boolean)
|
|
53
|
-
.join(" "), children: [label && (_jsxs(Label, { className: [
|
|
54
|
-
"text-[length:var(--font-size-sm)]",
|
|
55
|
-
"font-[number:var(--font-weight-medium)]",
|
|
56
|
-
"text-[var(--color-text-primary)]",
|
|
57
|
-
].join(" "), children: [label, isRequired && (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-[var(--color-text-danger)]", children: "*" }))] })), prefix ? (_jsxs("div", { className: [
|
|
58
|
-
"flex items-center overflow-hidden",
|
|
59
|
-
radiusClass,
|
|
60
|
-
"border",
|
|
61
|
-
"bg-[var(--color-surface-default)]",
|
|
62
|
-
"outline-none transition-colors",
|
|
63
|
-
borderColor,
|
|
64
|
-
"focus-within:ring-2 focus-within:ring-[var(--color-border-focus)] focus-within:border-[var(--color-border-focus)]",
|
|
65
|
-
inGroup ? "focus-within:z-10" : "",
|
|
66
|
-
isDisabled ? "opacity-50 pointer-events-none" : "",
|
|
67
|
-
]
|
|
68
|
-
.filter(Boolean)
|
|
69
|
-
.join(" "), children: [_jsx("span", { className: [
|
|
70
|
-
"self-stretch flex items-center shrink-0 select-none",
|
|
71
|
-
"bg-[var(--color-surface-subtle)]",
|
|
72
|
-
"border-r border-r-[var(--color-border-default)]",
|
|
73
|
-
"text-[var(--color-text-secondary)]",
|
|
74
|
-
prefixSizeClasses[size],
|
|
75
|
-
].join(" "), children: prefix }), _jsx(AriaInput, { placeholder: placeholder, className: [
|
|
76
|
-
"w-full bg-transparent",
|
|
77
|
-
sizeClasses[size],
|
|
78
|
-
alignClasses[align],
|
|
79
|
-
"text-[var(--color-text-primary)]",
|
|
80
|
-
"placeholder:text-[var(--color-text-tertiary)]",
|
|
81
|
-
"outline-none border-none",
|
|
82
|
-
].join(" ") })] })) : (_jsx(AriaInput, { placeholder: placeholder, className: [
|
|
83
|
-
"w-full",
|
|
84
|
-
sizeClasses[size],
|
|
85
|
-
alignClasses[align],
|
|
86
|
-
radiusClass,
|
|
87
|
-
"border",
|
|
88
|
-
"text-[var(--color-text-primary)]",
|
|
89
|
-
"bg-[var(--color-surface-default)]",
|
|
90
|
-
"placeholder:text-[var(--color-text-tertiary)]",
|
|
91
|
-
"outline-none transition-colors",
|
|
92
|
-
borderColor,
|
|
93
|
-
"focus:ring-2 focus:ring-[var(--color-border-focus)] focus:border-[var(--color-border-focus)]",
|
|
94
|
-
inGroup ? "focus:z-10" : "",
|
|
95
|
-
"disabled:opacity-50 disabled:pointer-events-none",
|
|
96
|
-
].join(" ") })), description && !isInvalid && (_jsx(Text, { slot: "description", className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description })), isInvalid && (_jsx(Text, { slot: "errorMessage", className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage }))] }));
|
|
97
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Input } from "./Input";
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import type React from "react";
|
|
2
|
-
export interface InputAddonProps {
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
className?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare function InputAddon({ children, className }: InputAddonProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
//# sourceMappingURL=InputAddon.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputAddon.d.ts","sourceRoot":"","sources":["../../../src/components/InputAddon/InputAddon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CA8BlE"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useInputGroup } from "../InputGroup/InputGroupContext";
|
|
3
|
-
function groupRadiusClass(position) {
|
|
4
|
-
switch (position) {
|
|
5
|
-
case "start":
|
|
6
|
-
return "rounded-l-[var(--border-radius-md)] rounded-r-none";
|
|
7
|
-
case "middle":
|
|
8
|
-
return "rounded-none";
|
|
9
|
-
case "end":
|
|
10
|
-
return "rounded-r-[var(--border-radius-md)] rounded-l-none";
|
|
11
|
-
default:
|
|
12
|
-
return "rounded-[var(--border-radius-md)]";
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
export function InputAddon({ children, className }) {
|
|
16
|
-
const { inGroup, position } = useInputGroup();
|
|
17
|
-
const radiusClass = inGroup
|
|
18
|
-
? groupRadiusClass(position)
|
|
19
|
-
: "rounded-[var(--border-radius-md)]";
|
|
20
|
-
const marginClass = inGroup && position !== "start" && position !== "standalone"
|
|
21
|
-
? "-ml-px"
|
|
22
|
-
: "";
|
|
23
|
-
return (_jsx("div", { className: [
|
|
24
|
-
"flex items-center self-stretch shrink-0 select-none",
|
|
25
|
-
"px-3 py-2 text-base",
|
|
26
|
-
"bg-[var(--color-surface-subtle)]",
|
|
27
|
-
"text-[var(--color-text-secondary)]",
|
|
28
|
-
"border border-[var(--color-border-default)]",
|
|
29
|
-
radiusClass,
|
|
30
|
-
marginClass,
|
|
31
|
-
className,
|
|
32
|
-
]
|
|
33
|
-
.filter(Boolean)
|
|
34
|
-
.join(" "), children: children }));
|
|
35
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputAddon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { InputAddon } from "./InputAddon";
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
export interface InputGroupProps {
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
className?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare function InputGroup({ children, className }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
//# sourceMappingURL=InputGroup.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CA8BlE"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { InputGroupContext } from "./InputGroupContext";
|
|
4
|
-
export function InputGroup({ children, className }) {
|
|
5
|
-
const childArray = React.Children.toArray(children).filter(React.isValidElement);
|
|
6
|
-
return (_jsx("div", { className: ["flex items-stretch", className].filter(Boolean).join(" "), children: childArray.map((child, index) => {
|
|
7
|
-
const position = childArray.length === 1
|
|
8
|
-
? "standalone"
|
|
9
|
-
: index === 0
|
|
10
|
-
? "start"
|
|
11
|
-
: index === childArray.length - 1
|
|
12
|
-
? "end"
|
|
13
|
-
: "middle";
|
|
14
|
-
return (_jsx(InputGroupContext.Provider, { value: { inGroup: true, position }, children: child }, index));
|
|
15
|
-
}) }));
|
|
16
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export type GroupPosition = "start" | "middle" | "end" | "standalone";
|
|
2
|
-
interface InputGroupContextValue {
|
|
3
|
-
inGroup: boolean;
|
|
4
|
-
position: GroupPosition;
|
|
5
|
-
}
|
|
6
|
-
export declare const InputGroupContext: import("react").Context<InputGroupContextValue>;
|
|
7
|
-
export declare function useInputGroup(): InputGroupContextValue;
|
|
8
|
-
export {};
|
|
9
|
-
//# sourceMappingURL=InputGroupContext.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroupContext.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/InputGroupContext.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,YAAY,CAAC;AAEtE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,iDAG5B,CAAC;AAEH,wBAAgB,aAAa,2BAE5B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACvE,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type LabelProps as AriaLabelProps } from "react-aria-components";
|
|
2
|
-
export interface LabelProps extends Omit<AriaLabelProps, "className"> {
|
|
3
|
-
isRequired?: boolean;
|
|
4
|
-
className?: string;
|
|
5
|
-
}
|
|
6
|
-
export declare function Label({ isRequired, children, className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
//# sourceMappingURL=Label.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,UAAU,IAAI,cAAc,EAClC,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAwB9E"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Label as AriaLabel, } from "react-aria-components";
|
|
3
|
-
export function Label({ isRequired, children, className, ...props }) {
|
|
4
|
-
return (_jsxs(AriaLabel, { ...props, className: [
|
|
5
|
-
"text-[length:var(--font-size-sm)]",
|
|
6
|
-
"font-[number:var(--font-weight-medium)]",
|
|
7
|
-
"text-[var(--color-text-primary)]",
|
|
8
|
-
className,
|
|
9
|
-
]
|
|
10
|
-
.filter(Boolean)
|
|
11
|
-
.join(" "), children: [children, isRequired && (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-[var(--color-text-danger)]", children: "*" }))] }));
|
|
12
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Label } from "./Label";
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type LinkProps as AriaLinkProps } from "react-aria-components";
|
|
2
|
-
export type LinkVariant = "default" | "subtle";
|
|
3
|
-
export interface LinkProps extends Omit<AriaLinkProps, "className"> {
|
|
4
|
-
/** Visual style variant */
|
|
5
|
-
variant?: LinkVariant;
|
|
6
|
-
/** Additional CSS classes */
|
|
7
|
-
className?: string;
|
|
8
|
-
}
|
|
9
|
-
export declare function Link({ variant, className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,IAAI,aAAa,EAChC,MAAM,uBAAuB,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC;IACjE,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CAcX"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Link as AriaLink, } from "react-aria-components";
|
|
3
|
-
const variantStyles = {
|
|
4
|
-
default: [
|
|
5
|
-
"text-[var(--color-teal-700)] underline",
|
|
6
|
-
"hover:text-[var(--color-teal-800)]",
|
|
7
|
-
].join(" "),
|
|
8
|
-
subtle: [
|
|
9
|
-
"text-[var(--color-text-secondary)] no-underline",
|
|
10
|
-
"hover:underline hover:text-[var(--color-text-primary)]",
|
|
11
|
-
].join(" "),
|
|
12
|
-
};
|
|
13
|
-
export function Link({ variant = "default", className, ...props }) {
|
|
14
|
-
return (_jsx(AriaLink, { ...props, className: [
|
|
15
|
-
"outline-none transition-colors",
|
|
16
|
-
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
|
|
17
|
-
variantStyles[variant],
|
|
18
|
-
className,
|
|
19
|
-
]
|
|
20
|
-
.filter(Boolean)
|
|
21
|
-
.join(" ") }));
|
|
22
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Link } from "./Link";
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import type React from "react";
|
|
2
|
-
import type { LucideIcon } from "lucide-react";
|
|
3
|
-
export interface MenuItemData {
|
|
4
|
-
id: string;
|
|
5
|
-
label: string;
|
|
6
|
-
icon?: LucideIcon;
|
|
7
|
-
onAction?: () => void;
|
|
8
|
-
/** When set, renders the menu item as a navigational link */
|
|
9
|
-
href?: string;
|
|
10
|
-
/** Link target, e.g. "_blank" for external links */
|
|
11
|
-
target?: string;
|
|
12
|
-
isDisabled?: boolean;
|
|
13
|
-
isDanger?: boolean;
|
|
14
|
-
}
|
|
15
|
-
export interface MenuProps {
|
|
16
|
-
/** Items to render in the menu */
|
|
17
|
-
items: MenuItemData[];
|
|
18
|
-
/** Trigger element (typically a Button or IconButton) */
|
|
19
|
-
children: React.ReactNode;
|
|
20
|
-
/** Additional CSS classes for the menu popover */
|
|
21
|
-
className?: string;
|
|
22
|
-
}
|
|
23
|
-
export declare function Menu({ items, children, className }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
//# sourceMappingURL=Menu.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS/C,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,kCAAkC;IAClC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,SAAS,2CAmD7D"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { MenuTrigger, Menu as AriaMenu, MenuItem as AriaMenuItem, Popover, } from "react-aria-components";
|
|
3
|
-
import { Icon } from "../Icon";
|
|
4
|
-
export function Menu({ items, children, className }) {
|
|
5
|
-
return (_jsxs(MenuTrigger, { children: [children, _jsx(Popover, { className: [
|
|
6
|
-
"bg-[var(--color-surface-primary)] rounded-[var(--border-radius-md)]",
|
|
7
|
-
"shadow-lg border border-[var(--color-border-default)]",
|
|
8
|
-
"py-1 min-w-48",
|
|
9
|
-
"entering:animate-in entering:fade-in entering:zoom-in-95",
|
|
10
|
-
"exiting:animate-out exiting:fade-out exiting:zoom-out-95",
|
|
11
|
-
className,
|
|
12
|
-
]
|
|
13
|
-
.filter(Boolean)
|
|
14
|
-
.join(" "), children: _jsx(AriaMenu, { items: items, onAction: (key) => {
|
|
15
|
-
const item = items.find((i) => i.id === key);
|
|
16
|
-
item?.onAction?.();
|
|
17
|
-
}, className: "outline-none", children: (item) => (_jsxs(AriaMenuItem, { id: item.id, href: item.href, target: item.target, isDisabled: item.isDisabled, className: [
|
|
18
|
-
"flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
|
|
19
|
-
"transition-colors",
|
|
20
|
-
"focus:bg-[var(--color-neutral-100)]",
|
|
21
|
-
"hover:bg-[var(--color-neutral-100)]",
|
|
22
|
-
"disabled:opacity-50 disabled:pointer-events-none",
|
|
23
|
-
item.isDanger
|
|
24
|
-
? "text-[var(--color-text-danger)]"
|
|
25
|
-
: "text-[var(--color-text-primary)]",
|
|
26
|
-
]
|
|
27
|
-
.filter(Boolean)
|
|
28
|
-
.join(" "), children: [item.icon && _jsx(Icon, { icon: item.icon, size: "sm" }), item.label] })) }) })] }));
|
|
29
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Menu } from "./Menu";
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type React from "react";
|
|
2
|
-
import { type PopoverProps as AriaPopoverProps } from "react-aria-components";
|
|
3
|
-
export interface PopoverProps {
|
|
4
|
-
/** Controls open state (uncontrolled by default via DialogTrigger) */
|
|
5
|
-
isOpen?: boolean;
|
|
6
|
-
/** Called when open state changes */
|
|
7
|
-
onOpenChange?: (isOpen: boolean) => void;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
export interface PopoverTriggerProps {
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
/** Additional CSS classes for the trigger wrapper */
|
|
13
|
-
className?: string;
|
|
14
|
-
}
|
|
15
|
-
export interface PopoverContentProps {
|
|
16
|
-
/** Placement relative to the trigger element */
|
|
17
|
-
placement?: AriaPopoverProps["placement"];
|
|
18
|
-
/** Offset from the trigger in pixels */
|
|
19
|
-
offset?: number;
|
|
20
|
-
/** Additional CSS classes */
|
|
21
|
-
className?: string;
|
|
22
|
-
/** Content to render inside the popover. Can be a render function receiving { close }. */
|
|
23
|
-
children: React.ReactNode | ((opts: {
|
|
24
|
-
close: () => void;
|
|
25
|
-
}) => React.ReactNode);
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Popover root -- wraps React Aria's DialogTrigger.
|
|
29
|
-
*/
|
|
30
|
-
export declare function Popover({ children, isOpen, onOpenChange }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
-
/**
|
|
32
|
-
* PopoverTrigger -- wraps the child in a React Aria Button so it
|
|
33
|
-
* participates in DialogTrigger's open/close handling.
|
|
34
|
-
*
|
|
35
|
-
* Renders as an unstyled inline element. Pass your visual trigger
|
|
36
|
-
* (text, icon, swatch) as children.
|
|
37
|
-
*/
|
|
38
|
-
export declare function PopoverTrigger({ children, className }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
39
|
-
/**
|
|
40
|
-
* PopoverContent -- the floating panel anchored to the trigger.
|
|
41
|
-
* Built on React Aria's Popover + Dialog for accessible focus management.
|
|
42
|
-
*/
|
|
43
|
-
export declare function PopoverContent({ placement, offset: offsetPx, className, children, }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
-
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,KAAK,YAAY,IAAI,gBAAgB,EACtC,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,gDAAgD;IAChD,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACxD;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,YAAY,2CAMvE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAc1E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAoB,EACpB,MAAM,EAAE,QAAY,EACpB,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CA+BrB"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { DialogTrigger, Popover as AriaPopover, Dialog as AriaDialog, Button as AriaButton, } from "react-aria-components";
|
|
3
|
-
/**
|
|
4
|
-
* Popover root -- wraps React Aria's DialogTrigger.
|
|
5
|
-
*/
|
|
6
|
-
export function Popover({ children, isOpen, onOpenChange }) {
|
|
7
|
-
return (_jsx(DialogTrigger, { isOpen: isOpen, onOpenChange: onOpenChange, children: children }));
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* PopoverTrigger -- wraps the child in a React Aria Button so it
|
|
11
|
-
* participates in DialogTrigger's open/close handling.
|
|
12
|
-
*
|
|
13
|
-
* Renders as an unstyled inline element. Pass your visual trigger
|
|
14
|
-
* (text, icon, swatch) as children.
|
|
15
|
-
*/
|
|
16
|
-
export function PopoverTrigger({ children, className }) {
|
|
17
|
-
return (_jsx(AriaButton, { className: [
|
|
18
|
-
"inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer",
|
|
19
|
-
"focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:rounded-[var(--border-radius-sm)]",
|
|
20
|
-
className,
|
|
21
|
-
]
|
|
22
|
-
.filter(Boolean)
|
|
23
|
-
.join(" "), children: children }));
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* PopoverContent -- the floating panel anchored to the trigger.
|
|
27
|
-
* Built on React Aria's Popover + Dialog for accessible focus management.
|
|
28
|
-
*/
|
|
29
|
-
export function PopoverContent({ placement = "bottom", offset: offsetPx = 8, className, children, }) {
|
|
30
|
-
return (_jsx(AriaPopover, { placement: placement, offset: offsetPx, className: [
|
|
31
|
-
"z-50",
|
|
32
|
-
"bg-[var(--color-surface-default)] border border-[var(--color-border-default)]",
|
|
33
|
-
"rounded-[var(--border-radius-md)] shadow-lg",
|
|
34
|
-
"entering:animate-in entering:fade-in entering:duration-150",
|
|
35
|
-
"exiting:animate-out exiting:fade-out exiting:duration-100",
|
|
36
|
-
"entering:placement-top:slide-in-from-bottom-1",
|
|
37
|
-
"entering:placement-bottom:slide-in-from-top-1",
|
|
38
|
-
"entering:placement-left:slide-in-from-right-1",
|
|
39
|
-
"entering:placement-right:slide-in-from-left-1",
|
|
40
|
-
className,
|
|
41
|
-
]
|
|
42
|
-
.filter(Boolean)
|
|
43
|
-
.join(" "), children: _jsx(AriaDialog, { className: "outline-none", children: ({ close }) => (_jsx(_Fragment, { children: typeof children === "function"
|
|
44
|
-
? children({ close })
|
|
45
|
-
: children })) }) }));
|
|
46
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACpE,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,WAAW,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Popover, PopoverTrigger, PopoverContent } from "./Popover";
|