@rovula/ui 0.0.32 → 0.0.34

package/dist/cjs/types/components/Dialog/Dialog.d.ts

@@ -5,7 +5,10 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    showCloseButton?: boolean | undefined;
+    closeButtonClassName?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 declare const DialogHeader: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/Dialog/Dialog.js

@@ -25,8 +25,8 @@ const DialogOverlay = React.forwardRef((_a, ref) => {
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef((_a, ref) => {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props, { children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground", children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    var { className, children, showCloseButton = false, closeButtonClassName } = _a, props = __rest(_a, ["className", "children", "showCloseButton", "closeButtonClassName"]);
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base-popup bg-base-popup p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { className: cn("absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground", closeButtonClassName), children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = (_a) => {

package/dist/esm/bundle.css

@@ -1426,6 +1426,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--background) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-base-bg{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-bg) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-base-bg2{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-bg2) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1434,6 +1438,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-bg3) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-base-guideline-stroke{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-guideline-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-base-popup{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1442,10 +1450,22 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-base-popup-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-base-popup-highlight{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-base-stroke{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-base-workspace-stroke{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-workspace-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-black{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1690,10 +1710,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
-.bg-grey{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-grey-default) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-grey-10{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1758,10 +1774,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-90) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-grey-foreground{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-grey-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-grey-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1786,10 +1798,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-grey-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-grey2{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-grey2-default) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-grey2-100{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey2-grey2-100) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1830,10 +1838,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey2-grey2-900) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-grey2-foreground{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--grey2-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-grey2-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-grey2-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2058,6 +2062,18 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-primary-text-outline{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-primary-text-pressed{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-primary-text-solid{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-primary-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-primary-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2178,6 +2194,18 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-secondary-text-outline{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-secondary-text-pressed{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-secondary-text-solid{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-secondary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-secondary-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-secondary-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2210,6 +2238,54 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-success{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-success-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-100{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-100) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-200{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-200) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-300{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-300) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-400{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-400) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-50{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-50) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-500{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-500) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-600{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-600) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-700{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-700) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-800{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-800) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-900{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-success-900) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-success-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--success-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-success-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-success-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2238,6 +2314,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--surface) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-tertiary{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-tertiary-10{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--tertiary-ramps-tertiary-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2306,6 +2386,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-tertiary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-tertiary-foreground{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--tertiary-foreground) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-tertiary-hover{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-tertiary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2322,6 +2406,18 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-tertiary-stroke) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-tertiary-text-outline{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-text-outline) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-tertiary-text-pressed{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-text-pressed) calc(100% * var(--tw-bg-opacity)), transparent);
+}
+.bg-tertiary-text-solid{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-tertiary-text-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-tertiary-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-tertiary-12) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2346,6 +2442,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-tertiary-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-text-black{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--text-black) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-text-dark{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3027,6 +3127,10 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--base-color-popup-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.text-black{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .text-button-error-flat-default{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-default-text) calc(100% * var(--tw-text-opacity)), transparent);