@stackframe/stack-ui 2.5.2 → 2.5.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stackframe/stack-ui
 
+## 2.5.4
+
+### Patch Changes
+
+- Backend rework
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.4
+
+## 2.5.3
+
+### Patch Changes
+
+- Bugfixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.3
+
 ## 2.5.2
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/accordion.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "default" | "destructive" | "success" | null | undefined;

package/dist/components/ui/alert.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", {

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;

package/dist/components/ui/avatar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../../lib/utils";
 const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), ...props })));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
     variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;

package/dist/components/ui/badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React.ReactNode;
 } & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/breadcrumb.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;

package/dist/components/ui/button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { DayPicker } from "react-day-picker";
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const ClickableCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { cn } from "../../lib/utils";
 const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow-sm", className), ...props })));
 Card.displayName = "Card";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;

package/dist/components/ui/command.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 import { cn } from "../../lib/utils";

package/dist/components/ui/container.js

@@ -1,19 +1,19 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import styled from 'styled-components';
-const OuterContainer = styled.div `
-  display: flex;
-  justify-content: center;
-  width: 100%;
-`;
-const InnerContainer = styled.div `
-  width: 100%;
-  @media (min-width: ${props => props.$breakpoint}px) {
-    width: ${props => props.$breakpoint}px;
-  }
-`;
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { cn } from '../..';
 const Container = React.forwardRef(({ size, ...props }, ref) => {
-    return (_jsx(OuterContainer, { children: _jsx(InnerContainer, { "$breakpoint": size, ...props, ref: ref, children: props.children }) }));
+    const styleId = useId().replaceAll(':', '-');
+    const styleSheet = `
+  .stack-inner-container-${styleId} {
+    max-width: 100%;
+  }
+  @media (min-width: ${size}px) {
+    .stack-inner-container-${styleId} {
+      width: ${size}px;
+    }
+  }
+  `;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styleSheet }), _jsx("div", { className: "flex justify-center w-full", children: _jsx("div", { ...props, ref: ref, className: cn(props.className, `stack-inner-container-${styleId}`), children: props.children }) })] }));
 });
 export { Container };

package/dist/components/ui/context-menu.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
 declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/context-menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon, } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/dropdown-menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon, } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;

package/dist/components/ui/form.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Controller, FormProvider, useFormContext, } from "react-hook-form";
 import { cn } from "../../lib/utils";
@@ -19,10 +19,11 @@ const useFormField = () => {
     }
     const fieldState = getFieldState(fieldContext.name, formState);
     const { id } = itemContext;
+    const formItemId = React.useId();
     return {
         id,
         name: fieldContext.name,
-        formItemId: `${id}-form-item`,
+        formItemId: `${formItemId}-form-item`,
         formDescriptionId: `${id}-form-item-description`,
         formMessageId: `${id}-form-item-message`,
         ...fieldState,

package/dist/components/ui/hover-card.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
 declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/ui/hover-card.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import { cn } from "../../lib/utils";
 const HoverCard = HoverCardPrimitive.Root;

package/dist/components/ui/input-otp.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string | undefined;
     onChange?: ((newValue: string) => unknown) | undefined;

package/dist/components/ui/input-otp.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { DashIcon } from "@radix-ui/react-icons";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/ui/input.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { cn } from "../../lib/utils";
 const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     return (_jsx("input", { type: type, className: cn("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { type VariantProps } from "class-variance-authority";
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/ui/label.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 declare const MenubarMenu: {
     (props: MenubarPrimitive.ScopedProps<MenubarPrimitive.MenubarMenuProps>): JSX.Element;

package/dist/components/ui/menubar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { CheckIcon, ChevronRightIcon, DotFilledIcon, } from "@radix-ui/react-icons";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { cn } from "../../lib/utils";

package/dist/components/ui/navigation-menu.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;

package/dist/components/ui/navigation-menu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/popover.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../../lib/utils";
 const Popover = PopoverPrimitive.Root;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

package/dist/components/ui/progress.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../../lib/utils";
 const Progress = React.forwardRef(({ className, value, ...props }, ref) => (_jsx(ProgressPrimitive.Root, { ref: ref, className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));

package/dist/components/ui/radio-group.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/radio-group.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { CheckIcon } from "@radix-ui/react-icons";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cn } from "../../lib/utils";

package/dist/components/ui/scroll-area.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/scroll-area.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../lib/utils";
 const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] })));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/select.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, } from "@radix-ui/react-icons";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Separator };

package/dist/components/ui/separator.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "../../lib/utils";
 const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { type VariantProps } from "class-variance-authority";
 declare const Sheet: React.FC<SheetPrimitive.DialogProps>;

package/dist/components/ui/sheet.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { cva } from "class-variance-authority";

package/dist/components/ui/skeleton.js

@@ -1,38 +1,48 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import styled, { keyframes } from 'styled-components';
-const getFilterString = (brightness1, brightness2) => {
-    return `
-    0% {
-      filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness1});
-    }
-    100% {
-      filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(${brightness2});
-    }
-  `;
-};
-const animationLight = keyframes `${getFilterString(0.8, 0.9)}`;
-const animationDark = keyframes `${getFilterString(0.2, 0.1)}`;
-const Primitive = styled("span") `
-  &[data-stack-state="activated"], &[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;
-  }
+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);
+}
+100% {
+  filter: grayscale(1) contrast(0) brightness(0) invert(1) brightness(0.9);
+}
 
-  &[data-stack-state="activated"] {
-    animation: ${animationLight} 1s infinite alternate-reverse !important;
-  }
+@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);
+}
 
-  html[data-stack-theme='dark'] &[data-stack-state="activated"] {
-    animation: ${animationDark} 1s infinite alternate-reverse !important;
-  }
+.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 _jsx(Primitive, { ref: ref, "data-stack-state": props.deactivated ? "deactivated" : "activated", ...props });
+    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/dist/components/ui/slider.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Slider };

package/dist/components/ui/slider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../../lib/utils";
 const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border border-primary/50 bg-background shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })] })));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 interface OriginalSwitchProps extends React.ComponentProps<typeof SwitchPrimitives.Root> {
 }

package/dist/components/ui/switch.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "../../lib/utils";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/ui/table.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { cn } from "../../lib/utils";
 const Table = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })));
 Table.displayName = "Table";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/tabs.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "../../lib/utils";
 const Tabs = TabsPrimitive.Root;

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/ui/textarea.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { cn } from "../../lib/utils";
 const Textarea = React.forwardRef(({ className, ...props }, ref) => {
     return (_jsx("textarea", { className: cn("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { type VariantProps } from "class-variance-authority";
 declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;

package/dist/components/ui/toast.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva } from "class-variance-authority";

package/dist/components/ui/toggle-group.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { VariantProps } from "class-variance-authority";
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({

package/dist/components/ui/toggle-group.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { cn } from "../../lib/utils";
 import { toggleVariants } from "./toggle";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({

package/dist/components/ui/toggle.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 declare const TooltipProvider: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipProviderProps & React.RefAttributes<void>>;
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;

package/dist/components/ui/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../../lib/utils";
 const TooltipProvider = React.forwardRef((props, ref) => (_jsx(TooltipPrimitive.Provider, { delayDuration: 0, ...props })));

package/dist/components/ui/use-toast.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import type { ToastActionElement, ToastProps } from "./toast";
 type ToasterToast = ToastProps & {
     id: string;

package/dist/components/ui/use-toast.js

@@ -1,6 +1,6 @@
 "use client";
 // Inspired by react-hot-toast library
-import * as React from "react";
+import React from "react";
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
 const actionTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -62,10 +62,11 @@
     "input-otp": "^1.2.4",
     "lucide-react": "^0.378.0",
     "react-day-picker": "^8.10.1",
+    "date-fns": "^3.6.0",
     "react-hook-form": "^7.51.4",
     "react-resizable-panels": "^2.0.19",
     "tailwind-merge": "^2.3.0",
-    "@stackframe/stack-shared": "2.5.2"
+    "@stackframe/stack-shared": "2.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",