@stackframe/stack-ui 2.8.20 → 2.8.22

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @stackframe/stack-ui
 
+## 2.8.22
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.22
+
+## 2.8.21
+
+### Patch Changes
+
+- Updated dependencies
+  - @stackframe/stack-shared@2.8.21
+
 ## 2.8.20
 
 ### Patch Changes

package/dist/components/browser-frame/index.d.ts

@@ -2,7 +2,9 @@ import React from "react";
 export type Props = {
     url?: string;
     padding?: string;
+    transparentBackground?: boolean;
     children: React.ReactNode;
+    className?: string;
 };
-export declare const BrowserFrame: ({ url, padding, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BrowserFrame: ({ url, padding, transparentBackground, children, className }: Props) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/browser-frame/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/browser-frame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,+BAAgC,KAAK,4CAwB7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/browser-frame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,iEAAkE,KAAK,4CAwC/F,CAAC"}

package/dist/components/browser-frame/index.js

@@ -1,2 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BrowserFrame = ({ url, padding, children }) => (_jsxs("div", { className: "rounded-xl overflow-hidden shadow-2xl", children: [_jsxs("div", { className: "bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border", children: [_jsx("div", { className: "w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0" }), url && (_jsx("div", { className: "text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis", "aria-hidden": true, children: url })), _jsxs("div", { className: "w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0", children: [_jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" })] })] }), _jsx("div", { className: `flex flex-col p-4 bg-white dark:bg-black rounded-b-md ${padding ? padding : ""}`, children: children })] }));
+export const BrowserFrame = ({ url, padding, transparentBackground, children, className }) => (_jsxs("div", { className: `rounded-xl overflow-hidden shadow-2xl ${className}`, children: [_jsxs("div", { className: "bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border", children: [_jsx("div", { className: "w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0" }), url && (_jsx("div", { className: "text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis", "aria-hidden": true, children: url })), _jsxs("div", { className: "w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0", children: [_jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" })] })] }), _jsx("div", { className: `flex grow flex-col p-4 rounded-b-md ${padding ? padding : ""} ${transparentBackground
+                ? ""
+                : "bg-white dark:bg-black"}`, style: transparentBackground ? {
+                backgroundImage: `
+          linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
+          linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
+          linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
+          linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)
+        `,
+                backgroundSize: '20px 20px',
+                backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'
+            } : {}, children: children })] }));

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

@@ -0,0 +1,37 @@
+import * as ResizablePrimitive from "react-resizable-panels";
+declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
+declare const ResizablePanel: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLDivElement | HTMLObjectElement | HTMLLinkElement | HTMLFormElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLSpanElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+    className?: string | undefined;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string | undefined;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: ResizablePrimitive.PanelOnCollapse | undefined;
+    onExpand?: ResizablePrimitive.PanelOnExpand | undefined;
+    onResize?: ResizablePrimitive.PanelOnResize | undefined;
+    order?: number | undefined;
+    style?: object | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+declare const ResizableHandle: ({ withHandle, className, ...props }: Omit<import("react").HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onFocus" | "onBlur"> & {
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    hitAreaMargins?: ResizablePrimitive.PointerHitAreaMargins | undefined;
+    id?: string | null | undefined;
+    onBlur?: (() => void) | undefined;
+    onDragging?: ResizablePrimitive.PanelResizeHandleOnDragging | undefined;
+    onFocus?: (() => void) | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    withHandle?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+//# sourceMappingURL=resizable.d.ts.map

package/dist/components/ui/resizable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAK7D,QAAA,MAAM,mBAAmB,4BAGtB,MAAM,cAAc,CAAC,OAAO,mBAAmB,UAAU,CAAC,4CAQ5D,CAAC;AAEF,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;4EAA2B,CAAC;AAEhD,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;6CAoBpB,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/ui/resizable.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { cn } from "../../lib/utils";
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+const ResizablePanelGroup = ({ className, ...props }) => (_jsx(ResizablePrimitive.PanelGroup, { className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className), ...props }));
+const ResizablePanel = ResizablePrimitive.Panel;
+const ResizableHandle = ({ withHandle, className, ...props }) => (_jsx(ResizablePrimitive.PanelResizeHandle, { className: cn("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className), ...props, children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: _jsx(DragHandleDots2Icon, { className: "h-2.5 w-2.5" }) })) }));
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

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

@@ -11,7 +11,7 @@ declare const SheetOverlay: React.FC<Omit<SheetPrimitive.DialogOverlayProps & Re
 declare const SheetContent: React.FC<{
     hasCloseButton?: boolean | undefined;
 } & Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 }>;

package/dist/index.d.ts

@@ -49,5 +49,6 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/tooltip";
 export * from "./components/ui/typography";
 export * from "./components/ui/use-toast";
+export * from "./components/ui/resizable";
 export { cn } from "./lib/utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,UAAU,MAAM,0BAA0B,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,UAAU,MAAM,0BAA0B,CAAC;AACvD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -49,4 +49,5 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/tooltip";
 export * from "./components/ui/typography";
 export * from "./components/ui/use-toast";
+export * from "./components/ui/resizable";
 export { cn } from "./lib/utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.8.20",
+  "version": "2.8.22",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
@@ -76,7 +76,7 @@
     "react-hook-form": "^7.53.1",
     "react-resizable-panels": "^2.1.6",
     "tailwind-merge": "^2.5.4",
-    "@stackframe/stack-shared": "2.8.20"
+    "@stackframe/stack-shared": "2.8.22"
   },
   "devDependencies": {
     "@types/react": "^18.2.12",