cortena-ui 1.17.0 → 1.18.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.
|
@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
//#region src/components/badge.d.ts
|
|
5
5
|
declare const badgeVariants: (props?: ({
|
|
6
|
-
variant?: "default" | "success" | "
|
|
6
|
+
variant?: "default" | "success" | "warn" | "destructive" | "danger" | "info" | "warning" | "neutral" | "secondary" | "outline" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
export interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
|
|
9
9
|
declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
|
|
@@ -50,7 +50,7 @@ function DialogContent({ className, children, keepMounted, container, ...props }
|
|
|
50
50
|
container,
|
|
51
51
|
children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(Dialog.Popup, {
|
|
52
52
|
"data-slot": "dialog-content",
|
|
53
|
-
className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none", "rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]", "bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]", "open:animate-in open:fade-in-0 open:zoom-in-95", "closed:animate-out closed:fade-out-0 closed:zoom-out-95", "duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]", className),
|
|
53
|
+
className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none", "max-h-[calc(100dvh-2rem)] grid-rows-[auto_minmax(0,1fr)_auto]", "rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]", "bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]", "open:animate-in open:fade-in-0 open:zoom-in-95", "closed:animate-out closed:fade-out-0 closed:zoom-out-95", "duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]", className),
|
|
54
54
|
...props,
|
|
55
55
|
children
|
|
56
56
|
})]
|
|
@@ -66,7 +66,7 @@ function DialogHeader({ className, ...props }) {
|
|
|
66
66
|
function DialogBody({ className, ...props }) {
|
|
67
67
|
return /* @__PURE__ */ jsx("div", {
|
|
68
68
|
"data-slot": "dialog-body",
|
|
69
|
-
className: cn("px-5 pb-5 pt-1", className),
|
|
69
|
+
className: cn("min-h-0 overflow-y-auto px-5 pb-5 pt-1", className),
|
|
70
70
|
...props
|
|
71
71
|
});
|
|
72
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Dialog.\n *\n * `DialogContent` composes Base UI's Portal + Backdrop + Popup so consumers\n * keep writing `<DialogContent>…</DialogContent>`. The Radix `Overlay` part is\n * exported as `DialogOverlay` (a styled Backdrop) for anyone composing by hand.\n *\n * Radix users: `asChild` becomes `render={...}`; `onOpenChange` receives\n * `(open, eventDetails)` rather than just `open`; the popup is only\n * dismissable via pointer when `modal` is true (the default), and\n * `disablePointerDismissal` replaces `onPointerDownOutside` preventDefault.\n */\nfunction Dialog(props: DialogPrimitive.Root.Props) {\n return <DialogPrimitive.Root {...props} />;\n}\n\nfunction DialogTrigger(props: DialogPrimitive.Trigger.Props) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal(props: DialogPrimitive.Portal.Props) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose(props: DialogPrimitive.Close.Props) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n \"fixed inset-0 z-50 backdrop-blur-[2px]\",\n \"bg-[color-mix(in_oklab,var(--ds-ink-950)_70%,transparent)]\",\n \"open:animate-in open:fade-in-0 closed:animate-out closed:fade-out-0\",\n \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport interface DialogContentProps extends DialogPrimitive.Popup.Props {\n /** Keep the dialog mounted in the DOM while hidden. */\n keepMounted?: boolean;\n /** Where to portal the dialog; defaults to `<body>`. */\n container?: DialogPrimitive.Portal.Props[\"container\"];\n}\n\nfunction DialogContent({ className, children, keepMounted, container, ...props }: DialogContentProps) {\n return (\n <DialogPortal keepMounted={keepMounted} container={container}>\n <DialogOverlay />\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none\",\n \"rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]\",\n \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n \"open:animate-in open:fade-in-0 open:zoom-in-95\",\n \"closed:animate-out closed:fade-out-0 closed:zoom-out-95\",\n \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n className,\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Popup>\n </DialogPortal>\n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-1.5 px-5 pb-1 pt-5 text-left\", className)}\n {...props}\n />\n );\n}\n\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n return <div data-slot=\"dialog-body\" className={cn(\"px-5 pb-5 pt-1\", className)} {...props}
|
|
1
|
+
{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Dialog.\n *\n * `DialogContent` composes Base UI's Portal + Backdrop + Popup so consumers\n * keep writing `<DialogContent>…</DialogContent>`. The Radix `Overlay` part is\n * exported as `DialogOverlay` (a styled Backdrop) for anyone composing by hand.\n *\n * Radix users: `asChild` becomes `render={...}`; `onOpenChange` receives\n * `(open, eventDetails)` rather than just `open`; the popup is only\n * dismissable via pointer when `modal` is true (the default), and\n * `disablePointerDismissal` replaces `onPointerDownOutside` preventDefault.\n */\nfunction Dialog(props: DialogPrimitive.Root.Props) {\n return <DialogPrimitive.Root {...props} />;\n}\n\nfunction DialogTrigger(props: DialogPrimitive.Trigger.Props) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal(props: DialogPrimitive.Portal.Props) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose(props: DialogPrimitive.Close.Props) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {\n return (\n <DialogPrimitive.Backdrop\n data-slot=\"dialog-overlay\"\n className={cn(\n \"fixed inset-0 z-50 backdrop-blur-[2px]\",\n \"bg-[color-mix(in_oklab,var(--ds-ink-950)_70%,transparent)]\",\n \"open:animate-in open:fade-in-0 closed:animate-out closed:fade-out-0\",\n \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport interface DialogContentProps extends DialogPrimitive.Popup.Props {\n /** Keep the dialog mounted in the DOM while hidden. */\n keepMounted?: boolean;\n /** Where to portal the dialog; defaults to `<body>`. */\n container?: DialogPrimitive.Portal.Props[\"container\"];\n}\n\nfunction DialogContent({ className, children, keepMounted, container, ...props }: DialogContentProps) {\n return (\n <DialogPortal keepMounted={keepMounted} container={container}>\n <DialogOverlay />\n <DialogPrimitive.Popup\n data-slot=\"dialog-content\"\n className={cn(\n \"fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none\",\n /*\n * The footer stays reachable however tall the body gets.\n *\n * RESOLVYA-71: entering an invalid email in a create-organisation\n * dialog added one line of validation text, the dialog grew from its\n * centre in both directions, and the Create and Cancel buttons went\n * off the bottom of the screen. `overflow-hidden` above meant there\n * was no scrolling to them either — the dialog could be neither\n * submitted nor dismissed except with Escape, which a person who has\n * just been told their email is wrong has no reason to try.\n *\n * Three classes, and all three are load bearing. The max-height\n * stops the popup growing past the viewport (`dvh`, not `vh`, so a\n * mobile browser's collapsing toolbar does not take the footer with\n * it). `grid-rows-[auto_minmax(0,1fr)_auto]` gives the body the only\n * flexible row, so the header and footer keep their height and the\n * body yields — `minmax(0,...)` rather than `1fr` because a grid\n * row's automatic minimum is its content, which is what let the\n * content push the footer out in the first place. `DialogBody` then\n * scrolls.\n */\n \"max-h-[calc(100dvh-2rem)] grid-rows-[auto_minmax(0,1fr)_auto]\",\n \"rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]\",\n \"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]\",\n \"open:animate-in open:fade-in-0 open:zoom-in-95\",\n \"closed:animate-out closed:fade-out-0 closed:zoom-out-95\",\n \"duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]\",\n className,\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Popup>\n </DialogPortal>\n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\"flex flex-col gap-1.5 px-5 pb-1 pt-5 text-left\", className)}\n {...props}\n />\n );\n}\n\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n /*\n * The scrolling part, and the only one (RESOLVYA-71).\n *\n * `min-h-0` is not decoration: a grid item's default minimum is its own\n * content, so without it this div refuses to be shorter than what is inside\n * it and `overflow-y-auto` never has anything to do. The pair is what keeps\n * a long form, a validation message or a 2,000-row import preview inside the\n * dialog instead of pushing its buttons off the screen.\n */\n return (\n <div data-slot=\"dialog-body\" className={cn(\"min-h-0 overflow-y-auto px-5 pb-5 pt-1\", className)} {...props} />\n );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"flex flex-col-reverse gap-2 border-t border-[var(--ds-border-subtle)] bg-[var(--ds-card)] px-5 py-3.5 sm:flex-row sm:justify-end\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn(\n \"text-[length:var(--ds-text-body-md)] font-semibold leading-none tracking-[-0.01em] text-[color:var(--ds-foreground)]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\n \"text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogBody,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAASA,SAAO,OAAmC;CACjD,OAAO,oBAACC,OAAgB,MAAjB,EAAsB,GAAI,MAAQ,CAAA;AAC3C;AAEA,SAAS,cAAc,OAAsC;CAC3D,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,OAAqC;CACzD,OAAO,oBAACA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YAAY,OAAoC;CACvD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAyC;CAC9E,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,0CACA,8DACA,uEACA,gEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AASA,SAAS,cAAc,EAAE,WAAW,UAAU,aAAa,WAAW,GAAG,SAA6B;CACpG,OACE,qBAAC,cAAD;EAA2B;EAAwB;EAAnD,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAW,GACT,wHAsBA,iEACA,kEACA,iGACA,kDACA,2DACA,gEACA,SACF;GACA,GAAI;GAEH;EACoB,CAAA,CACX;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kDAAkD,SAAS;EACzE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CAUxE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,0CAA0C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEjH;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GACT,wHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAA4C;CACrF,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -21,7 +21,7 @@ import { Toast } from "@base-ui/react/toast";
|
|
|
21
21
|
* `toastManager` to `Toaster` when you need to fire toasts outside React.
|
|
22
22
|
*/
|
|
23
23
|
declare const toastVariants: (props?: ({
|
|
24
|
-
variant?: "default" | "success" | "
|
|
24
|
+
variant?: "default" | "success" | "destructive" | "warning" | null | undefined;
|
|
25
25
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
26
26
|
/** The Base UI toast manager: `{ toasts, add, close, update, promise }`. */
|
|
27
27
|
declare const useToast: typeof Toast.useToastManager;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cortena-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.18.0",
|
|
4
4
|
"description": "Cortena UI — the shared React component library for cortenaweb and every Cortena extension. shadcn over Base UI, styled entirely from cortena-design tokens.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -63,6 +63,28 @@ function DialogContent({ className, children, keepMounted, container, ...props }
|
|
|
63
63
|
data-slot="dialog-content"
|
|
64
64
|
className={cn(
|
|
65
65
|
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-[440px] -translate-x-1/2 -translate-y-1/2 overflow-hidden outline-none",
|
|
66
|
+
/*
|
|
67
|
+
* The footer stays reachable however tall the body gets.
|
|
68
|
+
*
|
|
69
|
+
* RESOLVYA-71: entering an invalid email in a create-organisation
|
|
70
|
+
* dialog added one line of validation text, the dialog grew from its
|
|
71
|
+
* centre in both directions, and the Create and Cancel buttons went
|
|
72
|
+
* off the bottom of the screen. `overflow-hidden` above meant there
|
|
73
|
+
* was no scrolling to them either — the dialog could be neither
|
|
74
|
+
* submitted nor dismissed except with Escape, which a person who has
|
|
75
|
+
* just been told their email is wrong has no reason to try.
|
|
76
|
+
*
|
|
77
|
+
* Three classes, and all three are load bearing. The max-height
|
|
78
|
+
* stops the popup growing past the viewport (`dvh`, not `vh`, so a
|
|
79
|
+
* mobile browser's collapsing toolbar does not take the footer with
|
|
80
|
+
* it). `grid-rows-[auto_minmax(0,1fr)_auto]` gives the body the only
|
|
81
|
+
* flexible row, so the header and footer keep their height and the
|
|
82
|
+
* body yields — `minmax(0,...)` rather than `1fr` because a grid
|
|
83
|
+
* row's automatic minimum is its content, which is what let the
|
|
84
|
+
* content push the footer out in the first place. `DialogBody` then
|
|
85
|
+
* scrolls.
|
|
86
|
+
*/
|
|
87
|
+
"max-h-[calc(100dvh-2rem)] grid-rows-[auto_minmax(0,1fr)_auto]",
|
|
66
88
|
"rounded-[var(--ds-radius-xl)] border border-[var(--ds-border)]",
|
|
67
89
|
"bg-[var(--ds-popover)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-lg)]",
|
|
68
90
|
"open:animate-in open:fade-in-0 open:zoom-in-95",
|
|
@@ -89,7 +111,18 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
89
111
|
}
|
|
90
112
|
|
|
91
113
|
function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
|
|
92
|
-
|
|
114
|
+
/*
|
|
115
|
+
* The scrolling part, and the only one (RESOLVYA-71).
|
|
116
|
+
*
|
|
117
|
+
* `min-h-0` is not decoration: a grid item's default minimum is its own
|
|
118
|
+
* content, so without it this div refuses to be shorter than what is inside
|
|
119
|
+
* it and `overflow-y-auto` never has anything to do. The pair is what keeps
|
|
120
|
+
* a long form, a validation message or a 2,000-row import preview inside the
|
|
121
|
+
* dialog instead of pushing its buttons off the screen.
|
|
122
|
+
*/
|
|
123
|
+
return (
|
|
124
|
+
<div data-slot="dialog-body" className={cn("min-h-0 overflow-y-auto px-5 pb-5 pt-1", className)} {...props} />
|
|
125
|
+
);
|
|
93
126
|
}
|
|
94
127
|
|
|
95
128
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|