@aortl/admin-react 0.1.0 → 0.2.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/Dialog.d.ts +73 -0
- package/dist/Dialog.d.ts.map +1 -0
- package/dist/admin.css +131 -0
- package/dist/admin.scoped.css +131 -0
- package/dist/index.cjs +126 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +130 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/Dialog.d.ts
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { ComponentProps, ReactNode } from 'react';
|
|
2
|
+
import { IconProp } from './icon';
|
|
3
|
+
export type DialogSize = "sm" | "md" | "lg";
|
|
4
|
+
export type DialogClosedBy = "any" | "closerequest" | "none";
|
|
5
|
+
export interface DialogContainerProps extends Omit<ComponentProps<"dialog">, "open"> {
|
|
6
|
+
/** Controlled open state. Omit for uncontrolled (e.g. driven by Invoker Commands). */
|
|
7
|
+
open?: boolean;
|
|
8
|
+
/** Fires when the dialog closes (Esc, backdrop, close button, form method="dialog"). */
|
|
9
|
+
onOpenChange?: (open: boolean) => void;
|
|
10
|
+
/** Width preset. Default: `"md"`. */
|
|
11
|
+
size?: DialogSize;
|
|
12
|
+
/**
|
|
13
|
+
* Native `closedby` attribute. `"any"` allows Esc + backdrop click,
|
|
14
|
+
* `"closerequest"` only Esc, `"none"` neither. Default: `"any"`.
|
|
15
|
+
*/
|
|
16
|
+
closedby?: DialogClosedBy;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* The bare `<dialog>` primitive — no opinions about header, body, or footer.
|
|
20
|
+
* Use this when the default `<Dialog>` layout doesn't fit (custom header,
|
|
21
|
+
* media block, multi-step content).
|
|
22
|
+
*/
|
|
23
|
+
declare function DialogContainer({ open, onOpenChange, size, closedby, className, children, ...rest }: DialogContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export type DialogHeaderProps = ComponentProps<"div">;
|
|
25
|
+
declare function DialogHeader({ className, ...rest }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export interface DialogTitleProps extends ComponentProps<"h2"> {
|
|
27
|
+
/** Leading icon. */
|
|
28
|
+
icon?: IconProp;
|
|
29
|
+
}
|
|
30
|
+
declare function DialogTitle({ icon, className, children, ...rest }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export type DialogDescriptionProps = ComponentProps<"p">;
|
|
32
|
+
declare function DialogDescription({ className, ...rest }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export type DialogBodyProps = ComponentProps<"div">;
|
|
34
|
+
declare function DialogBody({ className, ...rest }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export type DialogFooterProps = ComponentProps<"div">;
|
|
36
|
+
declare function DialogFooter({ className, ...rest }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export interface DialogCloseButtonProps extends ComponentProps<"button"> {
|
|
38
|
+
/** Override the default X icon. */
|
|
39
|
+
icon?: IconProp;
|
|
40
|
+
}
|
|
41
|
+
declare function DialogCloseButton({ icon, className, children, onClick, type, "aria-label": ariaLabel, ...rest }: DialogCloseButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export interface DialogProps extends Omit<DialogContainerProps, "title" | "children"> {
|
|
43
|
+
/** Leading icon for the title row. */
|
|
44
|
+
icon?: IconProp;
|
|
45
|
+
/** Renders as `<Dialog.Title>`. */
|
|
46
|
+
title?: ReactNode;
|
|
47
|
+
/** Renders as `<Dialog.Description>`. */
|
|
48
|
+
description?: ReactNode;
|
|
49
|
+
/** Renders as `<Dialog.Footer>`. */
|
|
50
|
+
actions?: ReactNode;
|
|
51
|
+
/** Show the X close button in the header. Default: `true`. */
|
|
52
|
+
dismissible?: boolean;
|
|
53
|
+
/** aria-label for the close button. Default: `"Close"`. */
|
|
54
|
+
closeLabel?: string;
|
|
55
|
+
children?: ReactNode;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Standard modal: a `<dialog>` with an opinionated header / body / footer
|
|
59
|
+
* layout driven by shorthand props. For anything outside that shape, use
|
|
60
|
+
* `<Dialog.Container>` and compose by hand.
|
|
61
|
+
*/
|
|
62
|
+
declare function DialogRoot({ icon, title, description, actions, dismissible, closeLabel, children, ...containerProps }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
export declare const Dialog: typeof DialogRoot & {
|
|
64
|
+
Container: typeof DialogContainer;
|
|
65
|
+
Header: typeof DialogHeader;
|
|
66
|
+
Title: typeof DialogTitle;
|
|
67
|
+
Description: typeof DialogDescription;
|
|
68
|
+
Body: typeof DialogBody;
|
|
69
|
+
Footer: typeof DialogFooter;
|
|
70
|
+
CloseButton: typeof DialogCloseButton;
|
|
71
|
+
};
|
|
72
|
+
export {};
|
|
73
|
+
//# sourceMappingURL=Dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.tsx"],"names":[],"mappings":"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"}
|
package/dist/admin.css
CHANGED
|
@@ -1908,6 +1908,137 @@
|
|
|
1908
1908
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1909
1909
|
}
|
|
1910
1910
|
}
|
|
1911
|
+
@layer components {
|
|
1912
|
+
.dialog {
|
|
1913
|
+
margin: auto;
|
|
1914
|
+
flex-direction: column;
|
|
1915
|
+
overflow: hidden;
|
|
1916
|
+
border-radius: var(--radius-xl);
|
|
1917
|
+
border-style: var(--tw-border-style);
|
|
1918
|
+
border-width: 1px;
|
|
1919
|
+
border-color: var(--color-border);
|
|
1920
|
+
background-color: var(--color-surface);
|
|
1921
|
+
padding: calc(var(--spacing) * 0);
|
|
1922
|
+
color: var(--color-text);
|
|
1923
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1924
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1925
|
+
width: calc(100% - 2rem);
|
|
1926
|
+
max-width: 32rem;
|
|
1927
|
+
max-height: calc(100dvh - 2rem);
|
|
1928
|
+
opacity: 1;
|
|
1929
|
+
transform: translateY(0) scale(1);
|
|
1930
|
+
transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
|
|
1931
|
+
}
|
|
1932
|
+
.dialog[open] {
|
|
1933
|
+
display: flex;
|
|
1934
|
+
}
|
|
1935
|
+
.dialog::backdrop {
|
|
1936
|
+
background: rgb(0 0 0 / 0.4);
|
|
1937
|
+
transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
|
|
1938
|
+
}
|
|
1939
|
+
@starting-style {
|
|
1940
|
+
.dialog[open] {
|
|
1941
|
+
opacity: 0;
|
|
1942
|
+
transform: translateY(-0.5rem) scale(0.98);
|
|
1943
|
+
}
|
|
1944
|
+
.dialog[open]::backdrop {
|
|
1945
|
+
background: rgb(0 0 0 / 0);
|
|
1946
|
+
}
|
|
1947
|
+
}
|
|
1948
|
+
.dialog-sm {
|
|
1949
|
+
max-width: 24rem;
|
|
1950
|
+
}
|
|
1951
|
+
.dialog-lg {
|
|
1952
|
+
max-width: 48rem;
|
|
1953
|
+
}
|
|
1954
|
+
.dialog-header {
|
|
1955
|
+
display: flex;
|
|
1956
|
+
align-items: flex-start;
|
|
1957
|
+
gap: calc(var(--spacing) * 3);
|
|
1958
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
1959
|
+
padding-top: calc(var(--spacing) * 5);
|
|
1960
|
+
padding-bottom: calc(var(--spacing) * 3);
|
|
1961
|
+
}
|
|
1962
|
+
.dialog-title {
|
|
1963
|
+
margin: calc(var(--spacing) * 0);
|
|
1964
|
+
display: flex;
|
|
1965
|
+
flex: 1;
|
|
1966
|
+
align-items: center;
|
|
1967
|
+
gap: calc(var(--spacing) * 2);
|
|
1968
|
+
font-size: var(--text-lg);
|
|
1969
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
1970
|
+
--tw-leading: var(--leading-tight);
|
|
1971
|
+
line-height: var(--leading-tight);
|
|
1972
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
1973
|
+
font-weight: var(--font-weight-semibold);
|
|
1974
|
+
}
|
|
1975
|
+
.dialog-description {
|
|
1976
|
+
margin-top: calc(var(--spacing) * -2);
|
|
1977
|
+
margin-bottom: calc(var(--spacing) * 3);
|
|
1978
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
1979
|
+
font-size: var(--text-sm);
|
|
1980
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
1981
|
+
color: var(--color-text-muted);
|
|
1982
|
+
}
|
|
1983
|
+
.dialog-body {
|
|
1984
|
+
display: flex;
|
|
1985
|
+
flex-direction: column;
|
|
1986
|
+
gap: calc(var(--spacing) * 3);
|
|
1987
|
+
overflow-y: auto;
|
|
1988
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
1989
|
+
padding-block: calc(var(--spacing) * 3);
|
|
1990
|
+
}
|
|
1991
|
+
.dialog-footer {
|
|
1992
|
+
display: flex;
|
|
1993
|
+
flex-wrap: wrap;
|
|
1994
|
+
align-items: center;
|
|
1995
|
+
justify-content: flex-end;
|
|
1996
|
+
gap: calc(var(--spacing) * 2);
|
|
1997
|
+
border-top-style: var(--tw-border-style);
|
|
1998
|
+
border-top-width: 1px;
|
|
1999
|
+
border-color: var(--color-border);
|
|
2000
|
+
background-color: var(--color-surface-muted);
|
|
2001
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
2002
|
+
padding-block: calc(var(--spacing) * 3);
|
|
2003
|
+
}
|
|
2004
|
+
.dialog-close {
|
|
2005
|
+
display: inline-flex;
|
|
2006
|
+
width: calc(var(--spacing) * 7);
|
|
2007
|
+
height: calc(var(--spacing) * 7);
|
|
2008
|
+
flex-shrink: 0;
|
|
2009
|
+
cursor: pointer;
|
|
2010
|
+
align-items: center;
|
|
2011
|
+
justify-content: center;
|
|
2012
|
+
border-radius: var(--radius-md);
|
|
2013
|
+
background-color: transparent;
|
|
2014
|
+
color: var(--color-text-muted);
|
|
2015
|
+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
2016
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
2017
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
2018
|
+
--tw-duration: 150ms;
|
|
2019
|
+
transition-duration: 150ms;
|
|
2020
|
+
&:hover {
|
|
2021
|
+
@media (hover: hover) {
|
|
2022
|
+
background-color: var(--color-surface-strong);
|
|
2023
|
+
}
|
|
2024
|
+
}
|
|
2025
|
+
&:hover {
|
|
2026
|
+
@media (hover: hover) {
|
|
2027
|
+
color: var(--color-text);
|
|
2028
|
+
}
|
|
2029
|
+
}
|
|
2030
|
+
&:focus-visible {
|
|
2031
|
+
outline-style: var(--tw-outline-style);
|
|
2032
|
+
outline-width: 2px;
|
|
2033
|
+
}
|
|
2034
|
+
&:focus-visible {
|
|
2035
|
+
outline-offset: 2px;
|
|
2036
|
+
}
|
|
2037
|
+
&:focus-visible {
|
|
2038
|
+
outline-color: var(--color-primary);
|
|
2039
|
+
}
|
|
2040
|
+
}
|
|
2041
|
+
}
|
|
1911
2042
|
@layer components {
|
|
1912
2043
|
.field {
|
|
1913
2044
|
display: flex;
|
package/dist/admin.scoped.css
CHANGED
|
@@ -2036,6 +2036,137 @@
|
|
|
2036
2036
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2037
2037
|
}
|
|
2038
2038
|
}
|
|
2039
|
+
@layer components {
|
|
2040
|
+
.dialog {
|
|
2041
|
+
margin: auto;
|
|
2042
|
+
flex-direction: column;
|
|
2043
|
+
overflow: hidden;
|
|
2044
|
+
border-radius: var(--radius-xl);
|
|
2045
|
+
border-style: var(--tw-border-style);
|
|
2046
|
+
border-width: 1px;
|
|
2047
|
+
border-color: var(--color-border);
|
|
2048
|
+
background-color: var(--color-surface);
|
|
2049
|
+
padding: calc(var(--spacing) * 0);
|
|
2050
|
+
color: var(--color-text);
|
|
2051
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
2052
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2053
|
+
width: calc(100% - 2rem);
|
|
2054
|
+
max-width: 32rem;
|
|
2055
|
+
max-height: calc(100dvh - 2rem);
|
|
2056
|
+
opacity: 1;
|
|
2057
|
+
transform: translateY(0) scale(1);
|
|
2058
|
+
transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
|
|
2059
|
+
}
|
|
2060
|
+
.dialog[open] {
|
|
2061
|
+
display: flex;
|
|
2062
|
+
}
|
|
2063
|
+
.dialog::backdrop {
|
|
2064
|
+
background: rgb(0 0 0 / 0.4);
|
|
2065
|
+
transition: display 150ms allow-discrete, overlay 150ms allow-discrete, background 150ms ease-out;
|
|
2066
|
+
}
|
|
2067
|
+
@starting-style {
|
|
2068
|
+
.dialog[open] {
|
|
2069
|
+
opacity: 0;
|
|
2070
|
+
transform: translateY(-0.5rem) scale(0.98);
|
|
2071
|
+
}
|
|
2072
|
+
.dialog[open]::backdrop {
|
|
2073
|
+
background: rgb(0 0 0 / 0);
|
|
2074
|
+
}
|
|
2075
|
+
}
|
|
2076
|
+
.dialog-sm {
|
|
2077
|
+
max-width: 24rem;
|
|
2078
|
+
}
|
|
2079
|
+
.dialog-lg {
|
|
2080
|
+
max-width: 48rem;
|
|
2081
|
+
}
|
|
2082
|
+
.dialog-header {
|
|
2083
|
+
display: flex;
|
|
2084
|
+
align-items: flex-start;
|
|
2085
|
+
gap: calc(var(--spacing) * 3);
|
|
2086
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
2087
|
+
padding-top: calc(var(--spacing) * 5);
|
|
2088
|
+
padding-bottom: calc(var(--spacing) * 3);
|
|
2089
|
+
}
|
|
2090
|
+
.dialog-title {
|
|
2091
|
+
margin: calc(var(--spacing) * 0);
|
|
2092
|
+
display: flex;
|
|
2093
|
+
flex: 1;
|
|
2094
|
+
align-items: center;
|
|
2095
|
+
gap: calc(var(--spacing) * 2);
|
|
2096
|
+
font-size: var(--text-lg);
|
|
2097
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
2098
|
+
--tw-leading: var(--leading-tight);
|
|
2099
|
+
line-height: var(--leading-tight);
|
|
2100
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
2101
|
+
font-weight: var(--font-weight-semibold);
|
|
2102
|
+
}
|
|
2103
|
+
.dialog-description {
|
|
2104
|
+
margin-top: calc(var(--spacing) * -2);
|
|
2105
|
+
margin-bottom: calc(var(--spacing) * 3);
|
|
2106
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
2107
|
+
font-size: var(--text-sm);
|
|
2108
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
2109
|
+
color: var(--color-text-muted);
|
|
2110
|
+
}
|
|
2111
|
+
.dialog-body {
|
|
2112
|
+
display: flex;
|
|
2113
|
+
flex-direction: column;
|
|
2114
|
+
gap: calc(var(--spacing) * 3);
|
|
2115
|
+
overflow-y: auto;
|
|
2116
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
2117
|
+
padding-block: calc(var(--spacing) * 3);
|
|
2118
|
+
}
|
|
2119
|
+
.dialog-footer {
|
|
2120
|
+
display: flex;
|
|
2121
|
+
flex-wrap: wrap;
|
|
2122
|
+
align-items: center;
|
|
2123
|
+
justify-content: flex-end;
|
|
2124
|
+
gap: calc(var(--spacing) * 2);
|
|
2125
|
+
border-top-style: var(--tw-border-style);
|
|
2126
|
+
border-top-width: 1px;
|
|
2127
|
+
border-color: var(--color-border);
|
|
2128
|
+
background-color: var(--color-surface-muted);
|
|
2129
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
2130
|
+
padding-block: calc(var(--spacing) * 3);
|
|
2131
|
+
}
|
|
2132
|
+
.dialog-close {
|
|
2133
|
+
display: inline-flex;
|
|
2134
|
+
width: calc(var(--spacing) * 7);
|
|
2135
|
+
height: calc(var(--spacing) * 7);
|
|
2136
|
+
flex-shrink: 0;
|
|
2137
|
+
cursor: pointer;
|
|
2138
|
+
align-items: center;
|
|
2139
|
+
justify-content: center;
|
|
2140
|
+
border-radius: var(--radius-md);
|
|
2141
|
+
background-color: transparent;
|
|
2142
|
+
color: var(--color-text-muted);
|
|
2143
|
+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
2144
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
2145
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
2146
|
+
--tw-duration: 150ms;
|
|
2147
|
+
transition-duration: 150ms;
|
|
2148
|
+
&:hover {
|
|
2149
|
+
@media (hover: hover) {
|
|
2150
|
+
background-color: var(--color-surface-strong);
|
|
2151
|
+
}
|
|
2152
|
+
}
|
|
2153
|
+
&:hover {
|
|
2154
|
+
@media (hover: hover) {
|
|
2155
|
+
color: var(--color-text);
|
|
2156
|
+
}
|
|
2157
|
+
}
|
|
2158
|
+
&:focus-visible {
|
|
2159
|
+
outline-style: var(--tw-outline-style);
|
|
2160
|
+
outline-width: 2px;
|
|
2161
|
+
}
|
|
2162
|
+
&:focus-visible {
|
|
2163
|
+
outline-offset: 2px;
|
|
2164
|
+
}
|
|
2165
|
+
&:focus-visible {
|
|
2166
|
+
outline-color: var(--color-primary);
|
|
2167
|
+
}
|
|
2168
|
+
}
|
|
2169
|
+
}
|
|
2039
2170
|
@layer components {
|
|
2040
2171
|
.field {
|
|
2041
2172
|
display: flex;
|
package/dist/index.cjs
CHANGED
|
@@ -712,6 +712,131 @@ var Card = Object.assign(CardRoot, {
|
|
|
712
712
|
Actions: CardActions
|
|
713
713
|
});
|
|
714
714
|
//#endregion
|
|
715
|
+
//#region src/Dialog.tsx
|
|
716
|
+
var DialogContext = (0, react.createContext)(null);
|
|
717
|
+
function DefaultCloseIcon() {
|
|
718
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
|
|
719
|
+
width: "16",
|
|
720
|
+
height: "16",
|
|
721
|
+
viewBox: "0 0 24 24",
|
|
722
|
+
fill: "none",
|
|
723
|
+
stroke: "currentColor",
|
|
724
|
+
strokeWidth: "2",
|
|
725
|
+
strokeLinecap: "round",
|
|
726
|
+
strokeLinejoin: "round",
|
|
727
|
+
"aria-hidden": "true",
|
|
728
|
+
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
|
|
729
|
+
});
|
|
730
|
+
}
|
|
731
|
+
/**
|
|
732
|
+
* The bare `<dialog>` primitive — no opinions about header, body, or footer.
|
|
733
|
+
* Use this when the default `<Dialog>` layout doesn't fit (custom header,
|
|
734
|
+
* media block, multi-step content).
|
|
735
|
+
*/
|
|
736
|
+
function DialogContainer({ open, onOpenChange, size = "md", closedby = "any", className, children, ...rest }) {
|
|
737
|
+
const ref = (0, react.useRef)(null);
|
|
738
|
+
const onOpenChangeRef = (0, react.useRef)(onOpenChange);
|
|
739
|
+
onOpenChangeRef.current = onOpenChange;
|
|
740
|
+
(0, react.useEffect)(() => {
|
|
741
|
+
const el = ref.current;
|
|
742
|
+
if (!el || open === void 0) return;
|
|
743
|
+
if (open && !el.open) el.showModal();
|
|
744
|
+
else if (!open && el.open) el.close();
|
|
745
|
+
}, [open]);
|
|
746
|
+
(0, react.useEffect)(() => {
|
|
747
|
+
const el = ref.current;
|
|
748
|
+
if (!el) return;
|
|
749
|
+
const handleClose = () => onOpenChangeRef.current?.(false);
|
|
750
|
+
el.addEventListener("close", handleClose);
|
|
751
|
+
return () => el.removeEventListener("close", handleClose);
|
|
752
|
+
}, []);
|
|
753
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContext.Provider, {
|
|
754
|
+
value: { close: () => ref.current?.close() },
|
|
755
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dialog", {
|
|
756
|
+
ref,
|
|
757
|
+
className: (0, clsx.clsx)("dialog", size !== "md" && `dialog-${size}`, className),
|
|
758
|
+
closedby,
|
|
759
|
+
...rest,
|
|
760
|
+
children
|
|
761
|
+
})
|
|
762
|
+
});
|
|
763
|
+
}
|
|
764
|
+
function DialogHeader({ className, ...rest }) {
|
|
765
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
766
|
+
className: (0, clsx.clsx)("dialog-header", className),
|
|
767
|
+
...rest
|
|
768
|
+
});
|
|
769
|
+
}
|
|
770
|
+
function DialogTitle({ icon, className, children, ...rest }) {
|
|
771
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h2", {
|
|
772
|
+
className: (0, clsx.clsx)("dialog-title", className),
|
|
773
|
+
...rest,
|
|
774
|
+
children: [renderIcon(icon), children]
|
|
775
|
+
});
|
|
776
|
+
}
|
|
777
|
+
function DialogDescription({ className, ...rest }) {
|
|
778
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
779
|
+
className: (0, clsx.clsx)("dialog-description", className),
|
|
780
|
+
...rest
|
|
781
|
+
});
|
|
782
|
+
}
|
|
783
|
+
function DialogBody({ className, ...rest }) {
|
|
784
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
785
|
+
className: (0, clsx.clsx)("dialog-body", className),
|
|
786
|
+
...rest
|
|
787
|
+
});
|
|
788
|
+
}
|
|
789
|
+
function DialogFooter({ className, ...rest }) {
|
|
790
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
791
|
+
className: (0, clsx.clsx)("dialog-footer", className),
|
|
792
|
+
...rest
|
|
793
|
+
});
|
|
794
|
+
}
|
|
795
|
+
function DialogCloseButton({ icon, className, children, onClick, type = "button", "aria-label": ariaLabel = "Close", ...rest }) {
|
|
796
|
+
const ctx = (0, react.useContext)(DialogContext);
|
|
797
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
798
|
+
type,
|
|
799
|
+
className: (0, clsx.clsx)("dialog-close", className),
|
|
800
|
+
"aria-label": ariaLabel,
|
|
801
|
+
onClick: (event) => {
|
|
802
|
+
onClick?.(event);
|
|
803
|
+
if (!event.defaultPrevented) ctx?.close();
|
|
804
|
+
},
|
|
805
|
+
...rest,
|
|
806
|
+
children: children ?? (icon !== void 0 ? renderIcon(icon) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultCloseIcon, {}))
|
|
807
|
+
});
|
|
808
|
+
}
|
|
809
|
+
/**
|
|
810
|
+
* Standard modal: a `<dialog>` with an opinionated header / body / footer
|
|
811
|
+
* layout driven by shorthand props. For anything outside that shape, use
|
|
812
|
+
* `<Dialog.Container>` and compose by hand.
|
|
813
|
+
*/
|
|
814
|
+
function DialogRoot({ icon, title, description, actions, dismissible = true, closeLabel = "Close", children, ...containerProps }) {
|
|
815
|
+
const hasTitle = title !== void 0 || icon !== void 0;
|
|
816
|
+
const showHeader = hasTitle || dismissible;
|
|
817
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContainer, {
|
|
818
|
+
...containerProps,
|
|
819
|
+
children: [
|
|
820
|
+
showHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogHeader, { children: [hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, {
|
|
821
|
+
icon,
|
|
822
|
+
children: title
|
|
823
|
+
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "flex-1" }), dismissible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogCloseButton, { "aria-label": closeLabel }) : null] }) : null,
|
|
824
|
+
description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, { children: description }) : null,
|
|
825
|
+
children !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBody, { children }) : null,
|
|
826
|
+
actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFooter, { children: actions }) : null
|
|
827
|
+
]
|
|
828
|
+
});
|
|
829
|
+
}
|
|
830
|
+
var Dialog = Object.assign(DialogRoot, {
|
|
831
|
+
Container: DialogContainer,
|
|
832
|
+
Header: DialogHeader,
|
|
833
|
+
Title: DialogTitle,
|
|
834
|
+
Description: DialogDescription,
|
|
835
|
+
Body: DialogBody,
|
|
836
|
+
Footer: DialogFooter,
|
|
837
|
+
CloseButton: DialogCloseButton
|
|
838
|
+
});
|
|
839
|
+
//#endregion
|
|
715
840
|
//#region src/Field.tsx
|
|
716
841
|
function FieldRoot({ className, ...rest }) {
|
|
717
842
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_field.Field.Root, {
|
|
@@ -1180,6 +1305,7 @@ exports.Button = Button;
|
|
|
1180
1305
|
exports.ButtonGroup = ButtonGroup;
|
|
1181
1306
|
exports.Card = Card;
|
|
1182
1307
|
exports.Checkbox = Checkbox;
|
|
1308
|
+
exports.Dialog = Dialog;
|
|
1183
1309
|
exports.Field = Field;
|
|
1184
1310
|
exports.FileInput = FileInput;
|
|
1185
1311
|
exports.Footer = Footer;
|