@stackframe/stack-ui 2.6.16 → 2.6.17

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stackframe/stack-ui
 
+## 2.6.17
+
+### Patch Changes
+
+- Loading skeletons
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.17
+
 ## 2.6.16
 
 ### Patch Changes

package/dist/components/action-dialog.d.ts

@@ -22,5 +22,6 @@ export type ActionDialogProps = {
     }>;
     confirmText?: string;
     children?: React.ReactNode;
+    preventClose?: boolean;
 };
 export declare function ActionDialog(props: ActionDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/action-dialog.js

@@ -25,7 +25,7 @@ export function ActionDialog(props) {
         setOpenState(open);
         props.onOpenChange?.(open);
     };
-    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [props.trigger && _jsx(DialogTrigger, { asChild: true, children: props.trigger }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center", children: [_jsx(TitleIcon, { className: "h-4 w-4 mr-2" }), title] }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogBody, { className: "pb-2", children: [_jsx("div", { children: props.children }), props.confirmText && _jsx(Alert, { children: _jsxs(Label, { className: "flex gap-4 items-center", children: [_jsx(Checkbox, { id: confirmId, checked: confirmed, onCheckedChange: (v) => setConfirmed(!!v) }), props.confirmText] }) })] }), anyButton && _jsxs(DialogFooter, { className: "gap-2", children: [cancelButton && (_jsx(Button, { variant: "secondary", color: "neutral", onClick: async () => {
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [props.trigger && _jsx(DialogTrigger, { asChild: true, children: props.trigger }), _jsxs(DialogContent, { onInteractOutside: props.preventClose ? (e) => e.preventDefault() : undefined, className: props.preventClose ? "[&>button]:hidden" : "", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center", children: [_jsx(TitleIcon, { className: "h-4 w-4 mr-2" }), title] }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogBody, { className: "pb-2", children: [_jsx("div", { children: props.children }), props.confirmText && _jsx(Alert, { children: _jsxs(Label, { className: "flex gap-4 items-center", children: [_jsx(Checkbox, { id: confirmId, checked: confirmed, onCheckedChange: (v) => setConfirmed(!!v) }), props.confirmText] }) })] }), anyButton && _jsxs(DialogFooter, { className: "gap-2", children: [cancelButton && (_jsx(Button, { variant: "secondary", color: "neutral", onClick: async () => {
                                     if (await cancelButton.onClick?.() !== "prevent-close") {
                                         onOpenChange(false);
                                     }

package/dist/components/ui/skeleton.d.ts

@@ -1,5 +1,3 @@
 import React from "react";
-declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    deactivated?: boolean | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { Skeleton };

package/dist/components/ui/skeleton.js

@@ -1,48 +1,7 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../..";
-// TODO: add this to the generated global CSS
-const styleSheet = `
-@keyframes animation-light {
-0% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.8);
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn("animate-pulse rounded-md bg-primary/10", className), ...props }));
 }
-100% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.9);
-}
-
-@keyframes animation-dark {
-0% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.2);
-}
-100% {
-  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.1);
-}
-
-.stack-skeleton[data-stack-state="activated"],
-.stack-skeleton[data-stack-state="activated"] * {
-  pointer-events: none !important;
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  user-select: none !important;
-  cursor: default !important;
-}
-
-.stack-skeleton[data-stack-state="activated"] {
-  animation: animation-light 1s infinite alternate-reverse !important;
-}
-
-html[data-stack-theme='dark'] .stack-skeleton[data-stack-state="activated"] {
-  animation: animation-dark 1s infinite alternate-reverse !important;
-}
-
-html[data-stack-theme='dark'] .stack-skeleton[data-stack-state="activated"] {
-  animation: animation-dark 1s infinite alternate-reverse !important;
-}
-`;
-const Skeleton = React.forwardRef((props, ref) => {
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styleSheet }), _jsx("span", { ...props, ref: ref, "data-stack-state": props.deactivated ? "deactivated" : "activated", className: cn(props.className, "stack-skeleton") })] }));
-});
-Skeleton.displayName = "Skeleton";
 export { Skeleton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.6.16",
+  "version": "2.6.17",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -68,7 +68,7 @@
     "react-hook-form": "^7.51.4",
     "react-resizable-panels": "^2.0.19",
     "tailwind-merge": "^2.3.0",
-    "@stackframe/stack-shared": "2.6.16"
+    "@stackframe/stack-shared": "2.6.17"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",