@taicode/common-web 1.1.3 → 1.1.5
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/output/catalyst/alert.d.ts +5 -5
- package/output/catalyst/alert.d.ts.map +1 -1
- package/output/catalyst/alert.js +46 -0
- package/output/catalyst/auth-layout.d.ts +1 -1
- package/output/catalyst/auth-layout.d.ts.map +1 -1
- package/output/catalyst/auth-layout.js +4 -0
- package/output/catalyst/avatar.d.ts +1 -1
- package/output/catalyst/avatar.d.ts.map +1 -1
- package/output/catalyst/{avatar.jsx → avatar.js} +5 -20
- package/output/catalyst/badge.d.ts +1 -1
- package/output/catalyst/badge.d.ts.map +1 -1
- package/output/catalyst/{badge.jsx → badge.js} +4 -11
- package/output/catalyst/button.d.ts +1 -1
- package/output/catalyst/button.d.ts.map +1 -1
- package/output/catalyst/{button.jsx → button.js} +4 -10
- package/output/catalyst/checkbox.d.ts +3 -3
- package/output/catalyst/checkbox.d.ts.map +1 -1
- package/output/catalyst/{checkbox.jsx → checkbox.js} +6 -14
- package/output/catalyst/combobox.d.ts +4 -4
- package/output/catalyst/combobox.d.ts.map +1 -1
- package/output/catalyst/combobox.js +101 -0
- package/output/catalyst/description-list.d.ts +3 -3
- package/output/catalyst/description-list.d.ts.map +1 -1
- package/output/catalyst/{description-list.jsx → description-list.js} +4 -3
- package/output/catalyst/dialog.d.ts +5 -5
- package/output/catalyst/dialog.d.ts.map +1 -1
- package/output/catalyst/dialog.js +46 -0
- package/output/catalyst/divider.d.ts +1 -1
- package/output/catalyst/divider.d.ts.map +1 -1
- package/output/catalyst/{divider.jsx → divider.js} +2 -1
- package/output/catalyst/dropdown.d.ts +11 -11
- package/output/catalyst/dropdown.d.ts.map +1 -1
- package/output/catalyst/{dropdown.jsx → dropdown.js} +15 -18
- package/output/catalyst/fieldset.d.ts +7 -7
- package/output/catalyst/fieldset.d.ts.map +1 -1
- package/output/catalyst/fieldset.js +42 -0
- package/output/catalyst/heading.d.ts +2 -2
- package/output/catalyst/heading.d.ts.map +1 -1
- package/output/catalyst/{heading.jsx → heading.js} +3 -2
- package/output/catalyst/input.d.ts +1 -1
- package/output/catalyst/input.d.ts.map +1 -1
- package/output/catalyst/input.js +70 -0
- package/output/catalyst/{link.jsx → link.js} +3 -4
- package/output/catalyst/listbox.d.ts +4 -4
- package/output/catalyst/listbox.d.ts.map +1 -1
- package/output/catalyst/listbox.js +99 -0
- package/output/catalyst/navbar.d.ts +5 -5
- package/output/catalyst/navbar.d.ts.map +1 -1
- package/output/catalyst/{navbar.jsx → navbar.js} +8 -16
- package/output/catalyst/pagination.d.ts +6 -6
- package/output/catalyst/pagination.d.ts.map +1 -1
- package/output/catalyst/pagination.js +35 -0
- package/output/catalyst/radio.d.ts +3 -3
- package/output/catalyst/radio.d.ts.map +1 -1
- package/output/catalyst/{radio.jsx → radio.js} +8 -11
- package/output/catalyst/select.js +52 -0
- package/output/catalyst/sidebar-layout.d.ts +1 -1
- package/output/catalyst/sidebar-layout.d.ts.map +1 -1
- package/output/catalyst/sidebar-layout.js +18 -0
- package/output/catalyst/sidebar.d.ts +9 -9
- package/output/catalyst/sidebar.d.ts.map +1 -1
- package/output/catalyst/{sidebar.jsx → sidebar.js} +12 -20
- package/output/catalyst/stacked-layout.d.ts +1 -1
- package/output/catalyst/stacked-layout.d.ts.map +1 -1
- package/output/catalyst/stacked-layout.js +18 -0
- package/output/catalyst/switch.d.ts +3 -3
- package/output/catalyst/switch.d.ts.map +1 -1
- package/output/catalyst/{switch.jsx → switch.js} +19 -20
- package/output/catalyst/table.d.ts +6 -6
- package/output/catalyst/table.d.ts.map +1 -1
- package/output/catalyst/table.js +56 -0
- package/output/catalyst/text.d.ts +4 -4
- package/output/catalyst/text.d.ts.map +1 -1
- package/output/catalyst/{text.jsx → text.js} +5 -4
- package/output/catalyst/{textarea.jsx → textarea.js} +21 -22
- package/output/service/{service.test.jsx → service.test.js} +6 -15
- package/package.json +6 -1
- package/output/catalyst/alert.jsx +0 -55
- package/output/catalyst/auth-layout.jsx +0 -7
- package/output/catalyst/combobox.jsx +0 -120
- package/output/catalyst/dialog.jsx +0 -55
- package/output/catalyst/fieldset.jsx +0 -41
- package/output/catalyst/input.jsx +0 -73
- package/output/catalyst/listbox.jsx +0 -120
- package/output/catalyst/pagination.jsx +0 -52
- package/output/catalyst/select.jsx +0 -59
- package/output/catalyst/sidebar-layout.jsx +0 -58
- package/output/catalyst/stacked-layout.jsx +0 -55
- package/output/catalyst/table.jsx +0 -68
- package/output/helpers/cache-api/cache-api.d.ts +0 -13
- package/output/helpers/cache-api/cache-api.d.ts.map +0 -1
- package/output/helpers/cache-api/cache-api.js +0 -114
- package/output/helpers/cache-api/cache-api.test.d.ts +0 -2
- package/output/helpers/cache-api/cache-api.test.d.ts.map +0 -1
- package/output/helpers/cache-api/cache-api.test.js +0 -348
- package/output/helpers/cache-api/index.d.ts +0 -2
- package/output/helpers/cache-api/index.d.ts.map +0 -1
- package/output/helpers/cache-api/index.js +0 -1
- package/output/helpers/service/index.d.ts +0 -1
- package/output/helpers/service/index.d.ts.map +0 -1
- package/output/helpers/service/index.js +0 -1
- package/output/helpers/service/service.d.ts +0 -5
- package/output/helpers/service/service.d.ts.map +0 -1
- package/output/helpers/service/service.js +0 -2
- package/output/helpers/side-cache/index.d.ts +0 -2
- package/output/helpers/side-cache/index.d.ts.map +0 -1
- package/output/helpers/side-cache/index.js +0 -1
- package/output/helpers/side-cache/side-cache.d.ts +0 -10
- package/output/helpers/side-cache/side-cache.d.ts.map +0 -1
- package/output/helpers/side-cache/side-cache.js +0 -137
- package/output/helpers/side-cache/side-cache.test.d.ts +0 -2
- package/output/helpers/side-cache/side-cache.test.d.ts.map +0 -1
- package/output/helpers/side-cache/side-cache.test.js +0 -179
- package/output/helpers/use-observer/index.d.ts +0 -2
- package/output/helpers/use-observer/index.d.ts.map +0 -1
- package/output/helpers/use-observer/index.js +0 -1
- package/output/helpers/use-observer/use-observer.d.ts +0 -3
- package/output/helpers/use-observer/use-observer.d.ts.map +0 -1
- package/output/helpers/use-observer/use-observer.js +0 -16
- package/output/helpers/use-observer/use-observer.test.d.ts +0 -2
- package/output/helpers/use-observer/use-observer.test.d.ts.map +0 -1
- package/output/use-observer/use-observer.test.jsx +0 -134
- /package/output/{helpers/use-observer/use-observer.test.jsx → use-observer/use-observer.test.js} +0 -0
|
@@ -16,14 +16,14 @@ export declare function Alert({ size, className, children, ...props }: {
|
|
|
16
16
|
size?: keyof typeof sizes;
|
|
17
17
|
className?: string;
|
|
18
18
|
children: React.ReactNode;
|
|
19
|
-
} & Omit<Headless.DialogProps, 'as' | 'className'>):
|
|
19
|
+
} & Omit<Headless.DialogProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
export declare function AlertTitle({ className, ...props }: {
|
|
21
21
|
className?: string;
|
|
22
|
-
} & Omit<Headless.DialogTitleProps, 'as' | 'className'>):
|
|
22
|
+
} & Omit<Headless.DialogTitleProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export declare function AlertDescription({ className, ...props }: {
|
|
24
24
|
className?: string;
|
|
25
|
-
} & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>):
|
|
26
|
-
export declare function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>):
|
|
27
|
-
export declare function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>):
|
|
25
|
+
} & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
export {};
|
|
29
29
|
//# sourceMappingURL=alert.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../source/catalyst/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,KAAK;;;;;;;;;;CAUV,CAAA;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CACpF,QAAQ,CAAC,WAAW,EACpB,IAAI,GAAG,WAAW,CACnB,
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../source/catalyst/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,KAAK;;;;;;;;;;CAUV,CAAA;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CACpF,QAAQ,CAAC,WAAW,EACpB,IAAI,GAAG,WAAW,CACnB,2CAyBA;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,2CAU9E;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC,2CAQ3F;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAEvF;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAU1F"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import * as Headless from '@headlessui/react';
|
|
14
|
+
import clsx from 'clsx';
|
|
15
|
+
import { Text } from './text';
|
|
16
|
+
const sizes = {
|
|
17
|
+
xs: 'sm:max-w-xs',
|
|
18
|
+
sm: 'sm:max-w-sm',
|
|
19
|
+
md: 'sm:max-w-md',
|
|
20
|
+
lg: 'sm:max-w-lg',
|
|
21
|
+
xl: 'sm:max-w-xl',
|
|
22
|
+
'2xl': 'sm:max-w-2xl',
|
|
23
|
+
'3xl': 'sm:max-w-3xl',
|
|
24
|
+
'4xl': 'sm:max-w-4xl',
|
|
25
|
+
'5xl': 'sm:max-w-5xl',
|
|
26
|
+
};
|
|
27
|
+
export function Alert(_a) {
|
|
28
|
+
var { size = 'md', className, children } = _a, props = __rest(_a, ["size", "className", "children"]);
|
|
29
|
+
return (_jsxs(Headless.Dialog, Object.assign({}, props, { children: [_jsx(Headless.DialogBackdrop, { transition: true, className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" }), _jsx("div", { className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0", children: _jsx("div", { className: "grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4", children: _jsx(Headless.DialogPanel, { transition: true, className: clsx(className, sizes[size], 'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline', 'transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in'), children: children }) }) })] })));
|
|
30
|
+
}
|
|
31
|
+
export function AlertTitle(_a) {
|
|
32
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
33
|
+
return (_jsx(Headless.DialogTitle, Object.assign({}, props, { className: clsx(className, 'text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white') })));
|
|
34
|
+
}
|
|
35
|
+
export function AlertDescription(_a) {
|
|
36
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
37
|
+
return (_jsx(Headless.Description, Object.assign({ as: Text }, props, { className: clsx(className, 'mt-2 text-center text-pretty sm:text-left') })));
|
|
38
|
+
}
|
|
39
|
+
export function AlertBody(_a) {
|
|
40
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
41
|
+
return _jsx("div", Object.assign({}, props, { className: clsx(className, 'mt-4') }));
|
|
42
|
+
}
|
|
43
|
+
export function AlertActions(_a) {
|
|
44
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
45
|
+
return (_jsx("div", Object.assign({}, props, { className: clsx(className, 'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto') })));
|
|
46
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auth-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/auth-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"auth-layout.d.ts","sourceRoot":"","sources":["../../source/catalyst/auth-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAQrE"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export function AuthLayout({ children }) {
|
|
3
|
+
return (_jsx("main", { className: "flex min-h-dvh flex-col p-2", children: _jsx("div", { className: "flex grow items-center justify-center p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10", children: children }) }));
|
|
4
|
+
}
|
|
@@ -7,7 +7,7 @@ type AvatarProps = {
|
|
|
7
7
|
alt?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
};
|
|
10
|
-
export declare function Avatar({ src, square, initials, alt, className, ...props }: AvatarProps & React.ComponentPropsWithoutRef<'span'>):
|
|
10
|
+
export declare function Avatar({ src, square, initials, alt, className, ...props }: AvatarProps & React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare const AvatarButton: React.ForwardRefExoticComponent<(AvatarProps & (Omit<Headless.ButtonProps<"button">, "className" | "as"> | Omit<Omit<{
|
|
12
12
|
href: string;
|
|
13
13
|
} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "className">)) & React.RefAttributes<HTMLElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../source/catalyst/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAU,EACV,MAAc,EACd,QAAQ,EACR,GAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../source/catalyst/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,GAAU,EACV,MAAc,EACd,QAAQ,EACR,GAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CA6BtD;AAED,eAAO,MAAM,YAAY;;+MA+BvB,CAAA"}
|
|
@@ -9,37 +9,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
13
|
import * as Headless from '@headlessui/react';
|
|
13
14
|
import clsx from 'clsx';
|
|
14
|
-
import
|
|
15
|
+
import { forwardRef } from 'react';
|
|
15
16
|
import { TouchTarget } from './button';
|
|
16
17
|
import { Link } from './link';
|
|
17
18
|
export function Avatar(_a) {
|
|
18
19
|
var { src = null, square = false, initials, alt = '', className } = _a, props = __rest(_a, ["src", "square", "initials", "alt", "className"]);
|
|
19
|
-
return (
|
|
20
|
+
return (_jsxs("span", Object.assign({ "data-slot": "avatar" }, props, { className: clsx(className,
|
|
20
21
|
// Basic layout
|
|
21
22
|
'inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1', 'outline -outline-offset-1 outline-black/10 dark:outline-white/10',
|
|
22
23
|
// Border radius
|
|
23
|
-
square ? 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)' : 'rounded-full *:rounded-full')}
|
|
24
|
-
{initials && (<svg className="size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none" viewBox="0 0 100 100" aria-hidden={alt ? undefined : 'true'}>
|
|
25
|
-
{alt && <title>{alt}</title>}
|
|
26
|
-
<text x="50%" y="50%" alignmentBaseline="middle" dominantBaseline="middle" textAnchor="middle" dy=".125em">
|
|
27
|
-
{initials}
|
|
28
|
-
</text>
|
|
29
|
-
</svg>)}
|
|
30
|
-
{src && <img className="size-full" src={src} alt={alt}/>}
|
|
31
|
-
</span>);
|
|
24
|
+
square ? 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)' : 'rounded-full *:rounded-full'), children: [initials && (_jsxs("svg", { className: "size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none", viewBox: "0 0 100 100", "aria-hidden": alt ? undefined : 'true', children: [alt && _jsx("title", { children: alt }), _jsx("text", { x: "50%", y: "50%", alignmentBaseline: "middle", dominantBaseline: "middle", textAnchor: "middle", dy: ".125em", children: initials })] })), src && _jsx("img", { className: "size-full", src: src, alt: alt })] })));
|
|
32
25
|
}
|
|
33
26
|
export const AvatarButton = forwardRef(function AvatarButton(_a, ref) {
|
|
34
27
|
var { src, square = false, initials, alt, className } = _a, props = __rest(_a, ["src", "square", "initials", "alt", "className"]);
|
|
35
28
|
let classes = clsx(className, square ? 'rounded-[20%]' : 'rounded-full', 'relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500');
|
|
36
|
-
return 'href' in props ? (
|
|
37
|
-
<TouchTarget>
|
|
38
|
-
<Avatar src={src} square={square} initials={initials} alt={alt}/>
|
|
39
|
-
</TouchTarget>
|
|
40
|
-
</Link>) : (<Headless.Button {...props} className={classes} ref={ref}>
|
|
41
|
-
<TouchTarget>
|
|
42
|
-
<Avatar src={src} square={square} initials={initials} alt={alt}/>
|
|
43
|
-
</TouchTarget>
|
|
44
|
-
</Headless.Button>);
|
|
29
|
+
return 'href' in props ? (_jsx(Link, Object.assign({}, props, { className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Avatar, { src: src, square: square, initials: initials, alt: alt }) }) }))) : (_jsx(Headless.Button, Object.assign({}, props, { className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Avatar, { src: src, square: square, initials: initials, alt: alt }) }) })));
|
|
45
30
|
});
|
|
@@ -23,7 +23,7 @@ declare const colors: {
|
|
|
23
23
|
type BadgeProps = {
|
|
24
24
|
color?: keyof typeof colors;
|
|
25
25
|
};
|
|
26
|
-
export declare function Badge({ color, className, ...props }: BadgeProps & React.ComponentPropsWithoutRef<'span'>):
|
|
26
|
+
export declare function Badge({ color, className, ...props }: BadgeProps & React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
27
27
|
export declare const BadgeButton: React.ForwardRefExoticComponent<(BadgeProps & ({
|
|
28
28
|
className?: string;
|
|
29
29
|
children: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../source/catalyst/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CA4BX,CAAA;AAED,KAAK,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAA;CAAE,CAAA;AAEjD,wBAAgB,KAAK,CAAC,EAAE,KAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../source/catalyst/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CA4BX,CAAA;AAED,KAAK,UAAU,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAA;CAAE,CAAA;AAEjD,wBAAgB,KAAK,CAAC,EAAE,KAAc,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAWjH;AAED,eAAO,MAAM,WAAW;gBAMQ,MAAM;cAAY,KAAK,CAAC,SAAS;;;gNAwB/D,CAAA"}
|
|
@@ -9,9 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
13
|
import * as Headless from '@headlessui/react';
|
|
13
14
|
import clsx from 'clsx';
|
|
14
|
-
import
|
|
15
|
+
import { forwardRef } from 'react';
|
|
15
16
|
import { TouchTarget } from './button';
|
|
16
17
|
import { Link } from './link';
|
|
17
18
|
const colors = {
|
|
@@ -36,18 +37,10 @@ const colors = {
|
|
|
36
37
|
};
|
|
37
38
|
export function Badge(_a) {
|
|
38
39
|
var { color = 'zinc', className } = _a, props = __rest(_a, ["color", "className"]);
|
|
39
|
-
return (
|
|
40
|
+
return (_jsx("span", Object.assign({}, props, { className: clsx(className, 'inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline', colors[color]) })));
|
|
40
41
|
}
|
|
41
42
|
export const BadgeButton = forwardRef(function BadgeButton(_a, ref) {
|
|
42
43
|
var { color = 'zinc', className, children } = _a, props = __rest(_a, ["color", "className", "children"]);
|
|
43
44
|
let classes = clsx(className, 'group relative inline-flex rounded-md focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500');
|
|
44
|
-
return 'href' in props ? (
|
|
45
|
-
<TouchTarget>
|
|
46
|
-
<Badge color={color}>{children}</Badge>
|
|
47
|
-
</TouchTarget>
|
|
48
|
-
</Link>) : (<Headless.Button {...props} className={classes} ref={ref}>
|
|
49
|
-
<TouchTarget>
|
|
50
|
-
<Badge color={color}>{children}</Badge>
|
|
51
|
-
</TouchTarget>
|
|
52
|
-
</Headless.Button>);
|
|
45
|
+
return 'href' in props ? (_jsx(Link, Object.assign({}, props, { className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Badge, { color: color, children: children }) }) }))) : (_jsx(Headless.Button, Object.assign({}, props, { className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Badge, { color: color, children: children }) }) })));
|
|
53
46
|
});
|
|
@@ -54,6 +54,6 @@ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React
|
|
|
54
54
|
*/
|
|
55
55
|
export declare function TouchTarget({ children }: {
|
|
56
56
|
children: React.ReactNode;
|
|
57
|
-
}):
|
|
57
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
58
58
|
export {};
|
|
59
59
|
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../source/catalyst/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJX,CAAA;AAED,KAAK,WAAW,GAAG,CACf;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACtE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,IAAI,CAAA;CAAE,CAClD,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,CAClD,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CACjE,CAAA;AAEH,eAAO,MAAM,MAAM,iFAmBjB,CAAA;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../source/catalyst/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJX,CAAA;AAED,KAAK,WAAW,GAAG,CACf;IAAE,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GACtE;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAC/C;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,IAAI,CAAA;CAAE,CAClD,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,CAClD,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,GAAG,WAAW,CAAC,GAC9C,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CACjE,CAAA;AAEH,eAAO,MAAM,MAAM,iFAmBjB,CAAA;AAEF;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAUtE"}
|
|
@@ -9,9 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
13
|
import * as Headless from '@headlessui/react';
|
|
13
14
|
import clsx from 'clsx';
|
|
14
|
-
import
|
|
15
|
+
import { forwardRef } from 'react';
|
|
15
16
|
import { Link } from './link';
|
|
16
17
|
const styles = {
|
|
17
18
|
base: [
|
|
@@ -170,18 +171,11 @@ const styles = {
|
|
|
170
171
|
export const Button = forwardRef(function Button(_a, ref) {
|
|
171
172
|
var { color, outline, plain, className, children } = _a, props = __rest(_a, ["color", "outline", "plain", "className", "children"]);
|
|
172
173
|
let classes = clsx(className, styles.base, outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color !== null && color !== void 0 ? color : 'dark/zinc']));
|
|
173
|
-
return 'href' in props ? (
|
|
174
|
-
<TouchTarget>{children}</TouchTarget>
|
|
175
|
-
</Link>) : (<Headless.Button {...props} className={clsx(classes, 'cursor-default')} ref={ref}>
|
|
176
|
-
<TouchTarget>{children}</TouchTarget>
|
|
177
|
-
</Headless.Button>);
|
|
174
|
+
return 'href' in props ? (_jsx(Link, Object.assign({}, props, { className: classes, ref: ref, children: _jsx(TouchTarget, { children: children }) }))) : (_jsx(Headless.Button, Object.assign({}, props, { className: clsx(classes, 'cursor-default'), ref: ref, children: _jsx(TouchTarget, { children: children }) })));
|
|
178
175
|
});
|
|
179
176
|
/**
|
|
180
177
|
* Expand the hit area to at least 44×44px on touch devices
|
|
181
178
|
*/
|
|
182
179
|
export function TouchTarget({ children }) {
|
|
183
|
-
return (
|
|
184
|
-
<span className="absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 pointer-fine:hidden" aria-hidden="true"/>
|
|
185
|
-
{children}
|
|
186
|
-
</>);
|
|
180
|
+
return (_jsxs(_Fragment, { children: [_jsx("span", { className: "absolute top-1/2 left-1/2 size-[max(100%,2.75rem)] -translate-x-1/2 -translate-y-1/2 pointer-fine:hidden", "aria-hidden": "true" }), children] }));
|
|
187
181
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as Headless from '@headlessui/react';
|
|
2
2
|
import type React from 'react';
|
|
3
|
-
export declare function CheckboxGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>):
|
|
3
|
+
export declare function CheckboxGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare function CheckboxField({ className, ...props }: {
|
|
5
5
|
className?: string;
|
|
6
|
-
} & Omit<Headless.FieldProps, 'as' | 'className'>):
|
|
6
|
+
} & Omit<Headless.FieldProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
declare const colors: {
|
|
8
8
|
'dark/zinc': string[];
|
|
9
9
|
'dark/white': string[];
|
|
@@ -32,6 +32,6 @@ type Color = keyof typeof colors;
|
|
|
32
32
|
export declare function Checkbox({ color, className, ...props }: {
|
|
33
33
|
color?: Color;
|
|
34
34
|
className?: string;
|
|
35
|
-
} & Omit<Headless.CheckboxProps, 'as' | 'className'>):
|
|
35
|
+
} & Omit<Headless.CheckboxProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
36
36
|
export {};
|
|
37
37
|
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../source/catalyst/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../source/catalyst/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAc3F;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,WAAW,CAAC,2CAoBxE;AA8BD,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAuCX,CAAA;AAED,KAAK,KAAK,GAAG,MAAM,OAAO,MAAM,CAAA;AAEhC,wBAAgB,QAAQ,CAAC,EACvB,KAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,CAAC,2CAiCnD"}
|
|
@@ -9,19 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
13
|
import * as Headless from '@headlessui/react';
|
|
13
14
|
import clsx from 'clsx';
|
|
14
15
|
export function CheckboxGroup(_a) {
|
|
15
16
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
16
|
-
return (
|
|
17
|
+
return (_jsx("div", Object.assign({ "data-slot": "control" }, props, { className: clsx(className,
|
|
17
18
|
// Basic groups
|
|
18
19
|
'space-y-3',
|
|
19
20
|
// With descriptions
|
|
20
|
-
'has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium')}
|
|
21
|
+
'has-data-[slot=description]:space-y-6 has-data-[slot=description]:**:data-[slot=label]:font-medium') })));
|
|
21
22
|
}
|
|
22
23
|
export function CheckboxField(_a) {
|
|
23
24
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
24
|
-
return (
|
|
25
|
+
return (_jsx(Headless.Field, Object.assign({ "data-slot": "field" }, props, { className: clsx(className,
|
|
25
26
|
// Base layout
|
|
26
27
|
'grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
|
|
27
28
|
// Control layout
|
|
@@ -31,7 +32,7 @@ export function CheckboxField(_a) {
|
|
|
31
32
|
// Description layout
|
|
32
33
|
'*:data-[slot=description]:col-start-2 *:data-[slot=description]:row-start-2',
|
|
33
34
|
// With description
|
|
34
|
-
'has-data-[slot=description]:**:data-[slot=label]:font-medium')}
|
|
35
|
+
'has-data-[slot=description]:**:data-[slot=label]:font-medium') })));
|
|
35
36
|
}
|
|
36
37
|
const base = [
|
|
37
38
|
// Basic layout
|
|
@@ -92,14 +93,5 @@ const colors = {
|
|
|
92
93
|
};
|
|
93
94
|
export function Checkbox(_a) {
|
|
94
95
|
var { color = 'dark/zinc', className } = _a, props = __rest(_a, ["color", "className"]);
|
|
95
|
-
return (
|
|
96
|
-
<span className={clsx([base, colors[color]])}>
|
|
97
|
-
<svg className="size-4 stroke-(--checkbox-check) opacity-0 group-data-checked:opacity-100 sm:h-3.5 sm:w-3.5" viewBox="0 0 14 14" fill="none">
|
|
98
|
-
{/* Checkmark icon */}
|
|
99
|
-
<path className="opacity-100 group-data-indeterminate:opacity-0" d="M3 8L6 11L11 3.5" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
|
|
100
|
-
{/* Indeterminate icon */}
|
|
101
|
-
<path className="opacity-0 group-data-indeterminate:opacity-100" d="M3 7H11" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"/>
|
|
102
|
-
</svg>
|
|
103
|
-
</span>
|
|
104
|
-
</Headless.Checkbox>);
|
|
96
|
+
return (_jsx(Headless.Checkbox, Object.assign({ "data-slot": "control" }, props, { className: clsx(className, 'group inline-flex focus:outline-hidden'), children: _jsx("span", { className: clsx([base, colors[color]]), children: _jsxs("svg", { className: "size-4 stroke-(--checkbox-check) opacity-0 group-data-checked:opacity-100 sm:h-3.5 sm:w-3.5", viewBox: "0 0 14 14", fill: "none", children: [_jsx("path", { className: "opacity-100 group-data-indeterminate:opacity-0", d: "M3 8L6 11L11 3.5", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { className: "opacity-0 group-data-indeterminate:opacity-100", d: "M3 7H11", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }) })));
|
|
105
97
|
}
|
|
@@ -10,11 +10,11 @@ export declare function Combobox<T>({ options, displayValue, filter, anchor, cla
|
|
|
10
10
|
children: (value: NonNullable<T>) => React.ReactElement;
|
|
11
11
|
} & Omit<Headless.ComboboxProps<T, false>, 'as' | 'multiple' | 'children'> & {
|
|
12
12
|
anchor?: 'top' | 'bottom';
|
|
13
|
-
}): import("react").JSX.Element;
|
|
13
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export declare function ComboboxOption<T>({ children, className, ...props }: {
|
|
15
15
|
className?: string;
|
|
16
16
|
children?: React.ReactNode;
|
|
17
|
-
} & Omit<Headless.ComboboxOptionProps<'div', T>, 'as' | 'className'>): import("react").JSX.Element;
|
|
18
|
-
export declare function ComboboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react").JSX.Element;
|
|
19
|
-
export declare function ComboboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react").JSX.Element;
|
|
17
|
+
} & Omit<Headless.ComboboxOptionProps<'div', T>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function ComboboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function ComboboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
//# sourceMappingURL=combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../source/catalyst/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAI7C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,OAAO,EACP,YAAY,EACZ,MAAM,EACN,MAAiB,EACjB,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,GAAG,SAAS,CAAA;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,CAAA;CACxD,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../source/catalyst/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAI7C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,OAAO,EACP,YAAY,EACZ,MAAM,EACN,MAAiB,EACjB,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,YAAY,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,GAAG,SAAS,CAAA;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAAY,CAAA;CACxD,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CA+FzG;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC1D,QAAQ,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC,CAAC,EACtC,IAAI,GAAG,WAAW,CACnB,2CAuCA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAE5F;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,2CAY5G"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
import * as Headless from '@headlessui/react';
|
|
15
|
+
import clsx from 'clsx';
|
|
16
|
+
import { useState } from 'react';
|
|
17
|
+
export function Combobox(_a) {
|
|
18
|
+
var { options, displayValue, filter, anchor = 'bottom', className, placeholder, autoFocus, 'aria-label': ariaLabel, children } = _a, props = __rest(_a, ["options", "displayValue", "filter", "anchor", "className", "placeholder", "autoFocus", 'aria-label', "children"]);
|
|
19
|
+
const [query, setQuery] = useState('');
|
|
20
|
+
const filteredOptions = query === ''
|
|
21
|
+
? options
|
|
22
|
+
: options.filter((option) => { var _a; return filter ? filter(option, query) : (_a = displayValue(option)) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query.toLowerCase()); });
|
|
23
|
+
return (_jsxs(Headless.Combobox, Object.assign({}, props, { multiple: false, virtual: { options: filteredOptions }, onClose: () => setQuery(''), children: [_jsxs("span", { "data-slot": "control", className: clsx([
|
|
24
|
+
className,
|
|
25
|
+
// Basic layout
|
|
26
|
+
'relative block w-full',
|
|
27
|
+
// Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
|
|
28
|
+
'before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm',
|
|
29
|
+
// Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
|
|
30
|
+
'dark:before:hidden',
|
|
31
|
+
// Focus ring
|
|
32
|
+
'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500',
|
|
33
|
+
// Disabled state
|
|
34
|
+
'has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none',
|
|
35
|
+
// Invalid state
|
|
36
|
+
'has-data-invalid:before:shadow-red-500/10',
|
|
37
|
+
]), children: [_jsx(Headless.ComboboxInput, { autoFocus: autoFocus, "data-slot": "control", "aria-label": ariaLabel, displayValue: (option) => { var _a; return (_a = displayValue(option)) !== null && _a !== void 0 ? _a : ''; }, onChange: (event) => setQuery(event.target.value), placeholder: placeholder, className: clsx([
|
|
38
|
+
className,
|
|
39
|
+
// Basic layout
|
|
40
|
+
'relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)]',
|
|
41
|
+
// Horizontal padding
|
|
42
|
+
'pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)]',
|
|
43
|
+
// Typography
|
|
44
|
+
'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
|
|
45
|
+
// Border
|
|
46
|
+
'border border-zinc-950/10 data-hover:border-zinc-950/20 dark:border-white/10 dark:data-hover:border-white/20',
|
|
47
|
+
// Background color
|
|
48
|
+
'bg-transparent dark:bg-white/5',
|
|
49
|
+
// Hide default focus styles
|
|
50
|
+
'focus:outline-hidden',
|
|
51
|
+
// Invalid state
|
|
52
|
+
'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500',
|
|
53
|
+
// Disabled state
|
|
54
|
+
'data-disabled:border-zinc-950/20 dark:data-disabled:border-white/15 dark:data-disabled:bg-white/2.5 dark:data-hover:data-disabled:border-white/15',
|
|
55
|
+
// System icons
|
|
56
|
+
'dark:scheme-dark',
|
|
57
|
+
]) }), _jsx(Headless.ComboboxButton, { className: "group absolute inset-y-0 right-0 flex items-center px-2", children: _jsxs("svg", { className: "size-5 stroke-zinc-500 group-data-disabled:stroke-zinc-600 group-data-hover:stroke-zinc-700 sm:size-4 dark:stroke-zinc-400 dark:group-data-hover:stroke-zinc-300 forced-colors:stroke-[CanvasText]", viewBox: "0 0 16 16", "aria-hidden": "true", fill: "none", children: [_jsx("path", { d: "M5.75 10.75L8 13L10.25 10.75", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.25 5.25L8 3L5.75 5.25", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) })] }), _jsx(Headless.ComboboxOptions, { transition: true, anchor: anchor, className: clsx(
|
|
58
|
+
// Anchor positioning
|
|
59
|
+
'[--anchor-gap:--spacing(2)] [--anchor-padding:--spacing(4)] sm:data-[anchor~=start]:[--anchor-offset:-4px]',
|
|
60
|
+
// Base styles,
|
|
61
|
+
'isolate min-w-[calc(var(--input-width)+8px)] scroll-py-1 rounded-xl p-1 select-none empty:invisible',
|
|
62
|
+
// Invisible border that is only visible in `forced-colors` mode for accessibility purposes
|
|
63
|
+
'outline outline-transparent focus:outline-hidden',
|
|
64
|
+
// Handle scrolling when menu won't fit in viewport
|
|
65
|
+
'overflow-y-scroll overscroll-contain',
|
|
66
|
+
// Popover background
|
|
67
|
+
'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
|
|
68
|
+
// Shadows
|
|
69
|
+
'shadow-lg ring-1 ring-zinc-950/10 dark:ring-white/10 dark:ring-inset',
|
|
70
|
+
// Transitions
|
|
71
|
+
'transition-opacity duration-100 ease-in data-closed:data-leave:opacity-0 data-transition:pointer-events-none'), children: ({ option }) => children(option) })] })));
|
|
72
|
+
}
|
|
73
|
+
export function ComboboxOption(_a) {
|
|
74
|
+
var { children, className } = _a, props = __rest(_a, ["children", "className"]);
|
|
75
|
+
let sharedClasses = clsx(
|
|
76
|
+
// Base
|
|
77
|
+
'flex min-w-0 items-center',
|
|
78
|
+
// Icons
|
|
79
|
+
'*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 sm:*:data-[slot=icon]:size-4', '*:data-[slot=icon]:text-zinc-500 group-data-focus/option:*:data-[slot=icon]:text-white dark:*:data-[slot=icon]:text-zinc-400', 'forced-colors:*:data-[slot=icon]:text-[CanvasText] forced-colors:group-data-focus/option:*:data-[slot=icon]:text-[Canvas]',
|
|
80
|
+
// Avatars
|
|
81
|
+
'*:data-[slot=avatar]:-mx-0.5 *:data-[slot=avatar]:size-6 sm:*:data-[slot=avatar]:size-5');
|
|
82
|
+
return (_jsxs(Headless.ComboboxOption, Object.assign({}, props, { className: clsx(
|
|
83
|
+
// Basic layout
|
|
84
|
+
'group/option grid w-full cursor-default grid-cols-[1fr_--spacing(5)] items-baseline gap-x-2 rounded-lg py-2.5 pr-2 pl-3.5 sm:grid-cols-[1fr_--spacing(4)] sm:py-1.5 sm:pr-2 sm:pl-3',
|
|
85
|
+
// Typography
|
|
86
|
+
'text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
|
|
87
|
+
// Focus
|
|
88
|
+
'outline-hidden data-focus:bg-blue-500 data-focus:text-white',
|
|
89
|
+
// Forced colors mode
|
|
90
|
+
'forced-color-adjust-none forced-colors:data-focus:bg-[Highlight] forced-colors:data-focus:text-[HighlightText]',
|
|
91
|
+
// Disabled
|
|
92
|
+
'data-disabled:opacity-50'), children: [_jsx("span", { className: clsx(className, sharedClasses), children: children }), _jsx("svg", { className: "relative col-start-2 hidden size-5 self-center stroke-current group-data-selected/option:inline sm:size-4", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8.5l3 3L12 4", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })] })));
|
|
93
|
+
}
|
|
94
|
+
export function ComboboxLabel(_a) {
|
|
95
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
96
|
+
return _jsx("span", Object.assign({}, props, { className: clsx(className, 'ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0') }));
|
|
97
|
+
}
|
|
98
|
+
export function ComboboxDescription(_a) {
|
|
99
|
+
var { className, children } = _a, props = __rest(_a, ["className", "children"]);
|
|
100
|
+
return (_jsx("span", Object.assign({}, props, { className: clsx(className, 'flex flex-1 overflow-hidden text-zinc-500 group-data-focus/option:text-white before:w-2 before:min-w-0 before:shrink dark:text-zinc-400'), children: _jsx("span", { className: "flex-1 truncate", children: children }) })));
|
|
101
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function DescriptionList({ className, ...props }: React.ComponentPropsWithoutRef<'dl'>): import("react").JSX.Element;
|
|
2
|
-
export declare function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): import("react").JSX.Element;
|
|
3
|
-
export declare function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): import("react").JSX.Element;
|
|
1
|
+
export declare function DescriptionList({ className, ...props }: React.ComponentPropsWithoutRef<'dl'>): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function DescriptionTerm({ className, ...props }: React.ComponentPropsWithoutRef<'dt'>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function DescriptionDetails({ className, ...props }: React.ComponentPropsWithoutRef<'dd'>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
//# sourceMappingURL=description-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["../../source/catalyst/description-list.tsx"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC
|
|
1
|
+
{"version":3,"file":"description-list.d.ts","sourceRoot":"","sources":["../../source/catalyst/description-list.tsx"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAU5F;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAU5F;AAED,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,2CAU/F"}
|
|
@@ -9,16 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
13
|
import clsx from 'clsx';
|
|
13
14
|
export function DescriptionList(_a) {
|
|
14
15
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
15
|
-
return (
|
|
16
|
+
return (_jsx("dl", Object.assign({}, props, { className: clsx(className, 'grid grid-cols-1 text-base/6 sm:grid-cols-[min(50%,--spacing(80))_auto] sm:text-sm/6') })));
|
|
16
17
|
}
|
|
17
18
|
export function DescriptionTerm(_a) {
|
|
18
19
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
19
|
-
return (
|
|
20
|
+
return (_jsx("dt", Object.assign({}, props, { className: clsx(className, 'col-start-1 border-t border-zinc-950/5 pt-3 text-zinc-500 first:border-none sm:border-t sm:border-zinc-950/5 sm:py-3 dark:border-white/5 dark:text-zinc-400 sm:dark:border-white/5') })));
|
|
20
21
|
}
|
|
21
22
|
export function DescriptionDetails(_a) {
|
|
22
23
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
23
|
-
return (
|
|
24
|
+
return (_jsx("dd", Object.assign({}, props, { className: clsx(className, 'pt-1 pb-3 text-zinc-950 sm:border-t sm:border-zinc-950/5 sm:py-3 sm:nth-2:border-none dark:text-white dark:sm:border-white/5') })));
|
|
24
25
|
}
|
|
@@ -16,14 +16,14 @@ export declare function Dialog({ size, className, children, ...props }: {
|
|
|
16
16
|
size?: keyof typeof sizes;
|
|
17
17
|
className?: string;
|
|
18
18
|
children: React.ReactNode;
|
|
19
|
-
} & Omit<Headless.DialogProps, 'as' | 'className'>):
|
|
19
|
+
} & Omit<Headless.DialogProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
export declare function DialogTitle({ className, ...props }: {
|
|
21
21
|
className?: string;
|
|
22
|
-
} & Omit<Headless.DialogTitleProps, 'as' | 'className'>):
|
|
22
|
+
} & Omit<Headless.DialogTitleProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export declare function DialogDescription({ className, ...props }: {
|
|
24
24
|
className?: string;
|
|
25
|
-
} & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>):
|
|
26
|
-
export declare function DialogBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>):
|
|
27
|
-
export declare function DialogActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>):
|
|
25
|
+
} & Omit<Headless.DescriptionProps<typeof Text>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function DialogBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function DialogActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
export {};
|
|
29
29
|
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../source/catalyst/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,KAAK;;;;;;;;;;CAUV,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CACpF,QAAQ,CAAC,WAAW,EACpB,IAAI,GAAG,WAAW,CACnB,
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../source/catalyst/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,KAAK;;;;;;;;;;CAUV,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CACpF,QAAQ,CAAC,WAAW,EACpB,IAAI,GAAG,WAAW,CACnB,2CAyBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,EAAE,IAAI,GAAG,WAAW,CAAC,2CAO9E;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,WAAW,CAAC,2CAE3F;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAExF;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAU3F"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import * as Headless from '@headlessui/react';
|
|
14
|
+
import clsx from 'clsx';
|
|
15
|
+
import { Text } from './text';
|
|
16
|
+
const sizes = {
|
|
17
|
+
xs: 'sm:max-w-xs',
|
|
18
|
+
sm: 'sm:max-w-sm',
|
|
19
|
+
md: 'sm:max-w-md',
|
|
20
|
+
lg: 'sm:max-w-lg',
|
|
21
|
+
xl: 'sm:max-w-xl',
|
|
22
|
+
'2xl': 'sm:max-w-2xl',
|
|
23
|
+
'3xl': 'sm:max-w-3xl',
|
|
24
|
+
'4xl': 'sm:max-w-4xl',
|
|
25
|
+
'5xl': 'sm:max-w-5xl',
|
|
26
|
+
};
|
|
27
|
+
export function Dialog(_a) {
|
|
28
|
+
var { size = 'lg', className, children } = _a, props = __rest(_a, ["size", "className", "children"]);
|
|
29
|
+
return (_jsxs(Headless.Dialog, Object.assign({}, props, { children: [_jsx(Headless.DialogBackdrop, { transition: true, className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" }), _jsx("div", { className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0", children: _jsx("div", { className: "grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4", children: _jsx(Headless.DialogPanel, { transition: true, className: clsx(className, sizes[size], 'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-(--gutter) shadow-lg ring-1 ring-zinc-950/10 [--gutter:--spacing(8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline', 'transition duration-100 will-change-transform data-closed:translate-y-12 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:data-closed:translate-y-0 sm:data-closed:data-enter:scale-95'), children: children }) }) })] })));
|
|
30
|
+
}
|
|
31
|
+
export function DialogTitle(_a) {
|
|
32
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
33
|
+
return (_jsx(Headless.DialogTitle, Object.assign({}, props, { className: clsx(className, 'text-lg/6 font-semibold text-balance text-zinc-950 sm:text-base/6 dark:text-white') })));
|
|
34
|
+
}
|
|
35
|
+
export function DialogDescription(_a) {
|
|
36
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
37
|
+
return _jsx(Headless.Description, Object.assign({ as: Text }, props, { className: clsx(className, 'mt-2 text-pretty') }));
|
|
38
|
+
}
|
|
39
|
+
export function DialogBody(_a) {
|
|
40
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
41
|
+
return _jsx("div", Object.assign({}, props, { className: clsx(className, 'mt-6') }));
|
|
42
|
+
}
|
|
43
|
+
export function DialogActions(_a) {
|
|
44
|
+
var { className } = _a, props = __rest(_a, ["className"]);
|
|
45
|
+
return (_jsx("div", Object.assign({}, props, { className: clsx(className, 'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto') })));
|
|
46
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare function Divider({ soft, className, ...props }: {
|
|
2
2
|
soft?: boolean;
|
|
3
|
-
} & React.ComponentPropsWithoutRef<'hr'>): import("react").JSX.Element;
|
|
3
|
+
} & React.ComponentPropsWithoutRef<'hr'>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
//# sourceMappingURL=divider.d.ts.map
|