@stackframe/stack 2.1.3 → 2.2.0

package/dist/components-core/label.d.ts

@@ -1,6 +1,4 @@
 import React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-export type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root>;
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-export default Label;
-//# sourceMappingURL=label.d.ts.map
+export { Label };

package/dist/components-core/label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components-core/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAexD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,MAAM,KAAK,yJAYV,CAAC;AAGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components-core/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAexD,QAAA,MAAM,KAAK,yJAYV,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components-core/label.js

@@ -19,4 +19,4 @@ const Label = React.forwardRef((props, ref) => {
     return _jsx(Primitive, { color: colorMode === 'dark' ? SECONDARY_FONT_COLORS.dark : SECONDARY_FONT_COLORS.light, ref: ref, ...props });
 });
 Label.displayName = LabelPrimitive.Root.displayName;
-export default Label;
+export { Label };

package/dist/components-core/link.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="node" />
 import { Url } from "url";
 import React from "react";
-export type LinkProps = {
+type LinkProps = {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     href: Url | string;
 } & Omit<React.HTMLProps<HTMLLinkElement>, 'size' | 'href'>;
-export default function Link({ size, href, style, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=link.d.ts.map
+export declare function Link({ size, href, style, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components-core/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components-core/link.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,EAAE,GAAG,GAAG,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAS,EACT,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAG,SAAS,2CAmBZ"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components-core/link.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,IAAI,EAAE,GAAG,GAAG,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAE3D,wBAAgB,IAAI,CAAC,EACnB,IAAS,EACT,IAAI,EACJ,KAAK,EACL,GAAG,KAAK,EACT,EAAG,SAAS,2CAmBZ"}

package/dist/components-core/link.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import NextLink from "next/link";
-import { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS } from "../utils/constants";
+import { FONT_FAMILY, FONT_SIZES, LINE_HEIGHTS, LINK_COLORS } from "../utils/constants";
 import { useDesign } from "..";
-export default function Link({ size = 'md', href, style, ...props }) {
+export function Link({ size = 'md', href, style, ...props }) {
     const { colorMode } = useDesign();
     return (_jsx(NextLink, { href: href, style: {
             fontSize: FONT_SIZES[size],
             lineHeight: LINE_HEIGHTS[size],
             fontFamily: FONT_FAMILY,
-            color: colorMode === 'dark' ? '#3B82F6' : '#2563EB',
+            color: LINK_COLORS[colorMode],
             textDecoration: 'underline',
             margin: 0,
             padding: 0,

package/dist/components-core/loading-indicator.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const LoadingIndicator: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color: string;
+    size?: number | undefined;
+}>>;
+export default LoadingIndicator;

package/dist/components-core/loading-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components-core/loading-indicator.tsx"],"names":[],"mappings":";AAQA,QAAA,MAAM,gBAAgB;WAAuB,MAAM;;GAUlD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components-core/loading-indicator.js

@@ -0,0 +1,18 @@
+import styled, { keyframes } from 'styled-components';
+const l7 = keyframes `
+  33% { background-size: calc(100%/3) 0%, calc(100%/3) 100%, calc(100%/3) 100%; }
+  50% { background-size: calc(100%/3) 100%, calc(100%/3) 0%, calc(100%/3) 100%; }
+  66% { background-size: calc(100%/3) 100%, calc(100%/3) 100%, calc(100%/3) 0%; }
+`;
+const LoadingIndicator = styled.div `
+  width: ${props => props.size || 36}px;
+  aspect-ratio: 4;
+  --_g: no-repeat radial-gradient(circle closest-side, ${props => props.color} 90%, #0000);
+  background: 
+    var(--_g) 0% 50%, 
+    var(--_g) 50% 50%, 
+    var(--_g) 100% 50%;
+  background-size: calc(100%/3) 100%;
+  animation: ${l7} 1s infinite linear;
+`;
+export default LoadingIndicator;

package/dist/components-core/popover.d.ts

@@ -0,0 +1,6 @@
+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>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components-core/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components-core/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAEtC,QAAA,MAAM,cAAc,gHAA2B,CAAC;AAiBhD,QAAA,MAAM,cAAc,gKAkBlB,CAAC;AAGH,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/dist/components-core/popover.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import styled, { css } from 'styled-components';
+import { useDesign } from '..';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const StyledContent = styled(PopoverPrimitive.Content) `
+  z-index: 50;
+  width: 18rem;
+  border-radius: 0.375rem;
+  border: 1px solid ${({ $borderColor }) => $borderColor};
+  background-color: ${({ $bgColor }) => $bgColor};
+  padding: 1rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  outline: none;
+  ${({ className }) => className && css `${className}`};
+`;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
+    const { colors } = useDesign();
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(StyledContent, { "$borderColor": colors.neutralColor, "$bgColor": colors.backgroundColor, ref: ref, align: align, sideOffset: sideOffset, className: className, ...props }) }));
+});
+PopoverContent.displayName = 'PopoverContent';
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components-core/separator.d.ts

@@ -0,0 +1,4 @@
+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-core/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components-core/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAiBhE,QAAA,MAAM,SAAS,6JAab,CAAC;AAIH,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components-core/separator.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import styled from 'styled-components';
+import { useDesign } from '..';
+const StyledSeparator = styled(SeparatorPrimitive.Root) `
+  flex-shrink: 0;
+  background-color: ${props => props.$color};
+  
+  ${(props) => props.$orientation === 'horizontal'
+    ? 'height: 1px; width: 100%;'
+    : 'height: 100%; width: 1px;'}
+`;
+const Separator = React.forwardRef(({ orientation = 'horizontal', decorative = true, ...props }, ref) => {
+    const { colors } = useDesign();
+    return _jsx(StyledSeparator, { ref: ref, decorative: decorative, "$orientation": orientation, "$color": colors.neutralColor, ...props });
+});
+Separator.displayName = 'Separator';
+export { Separator };

package/dist/components-core/text.d.ts

@@ -1,9 +1,8 @@
 import React from "react";
-export type TextProps = {
+type TextProps = {
     variant?: 'primary' | 'secondary' | 'warning' | 'success';
     as?: 'p' | 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 } & Omit<React.HTMLProps<HTMLParagraphElement>, 'size'>;
 declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export default Text;
-//# sourceMappingURL=text.d.ts.map
+export { Text };

package/dist/components-core/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components-core/text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;IAC1D,EAAE,CAAC,EAAE,GAAG,GAAG,IAAI,GAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACzC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,CAAA;AAEvD,QAAA,MAAM,IAAI,qGA8CR,CAAC;AAGH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components-core/text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,SAAS,GAAG;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;IAC1D,EAAE,CAAC,EAAE,GAAG,GAAG,IAAI,GAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACzC,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,CAAA;AAEvD,QAAA,MAAM,IAAI,qGA8CR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components-core/text.js

@@ -16,11 +16,11 @@ const Text = React.forwardRef(({ variant = 'primary', size = 'md', as = 'p', sty
             break;
         }
         case 'warning': {
-            textColor = '#ff4500';
+            textColor = '#b33b1d';
             break;
         }
         case 'success': {
-            textColor = '#32cd32';
+            textColor = '#3da63d';
             break;
         }
     }
@@ -39,4 +39,4 @@ const Text = React.forwardRef(({ variant = 'primary', size = 'md', as = 'p', sty
     }, props.children);
 });
 Text.displayName = 'Typography';
-export default Text;
+export { Text };

package/dist/components-core-joy/button.d.ts

@@ -1,3 +1,2 @@
-import { ButtonProps } from "../components-core";
-export default function Button({ variant, color, size, loading, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=button.d.ts.map
+import React from "react";
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("../components-core/button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components-core-joy/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAmB,EACnB,KAAK,EACL,IAAW,EACX,OAAe,EACf,GAAG,KAAK,EACT,EAAG,WAAW,2CAmCd"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,MAAM,oPA+CjB,CAAC"}

package/dist/components-core-joy/button.js

@@ -1,19 +1,21 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { Button as JoyButton } from '@mui/joy';
 import Color from "color";
-export default function Button({ variant = "primary", color, size = "md", loading = false, ...props }) {
+export const Button = React.forwardRef(({ variant = "primary", color, size = "md", loading = false, ...props }, ref) => {
     const muiVariant = {
         primary: "primary",
         secondary: "neutral",
         warning: "danger",
+        link: "primary",
     }[variant] || "primary";
-    const { children, action, ref, ...validProps } = props;
+    const { children, action, ref: _, ...validProps } = props;
     const c = Color(color);
     const changeColor = (value) => {
         return c.hsl(c.hue(), c.saturationl(), c.lightness() + (c.isDark() ? value : -value)).toString();
     };
-    return _jsx(JoyButton, { color: muiVariant, sx: color ? {
+    return _jsx(JoyButton, { color: muiVariant, variant: variant === 'link' ? 'plain' : 'solid', sx: color ? {
             backgroundColor: color,
             color: c.isDark() ? 'white' : 'black',
             '&:hover': {
@@ -22,5 +24,6 @@ export default function Button({ variant = "primary", color, size = "md", loadin
             '&:active': {
                 backgroundColor: changeColor(20)
             },
+            'textDecoration': variant === 'link' ? 'underline' : 'none',
         } : {}, size: size, loading: loading, ...validProps, children: children });
-}
+});

package/dist/components-core-joy/divider.d.ts

@@ -1,3 +1,3 @@
-import { DividerProps } from "../components-core";
-export default function Divider(props: DividerProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLHRElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=divider.d.ts.map

package/dist/components-core-joy/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/divider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAG,YAAY,2CAGnD"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/divider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,mRASpB,CAAC"}

package/dist/components-core-joy/divider.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Divider as JoyDivider } from '@mui/joy';
-export default function Divider(props) {
-    const { orientation, ref, ...validProps } = props;
-    return _jsx(JoyDivider, { ...validProps, orientation: orientation });
-}
+import React from "react";
+import { Separator as JoySeparator } from '@mui/joy';
+export const Separator = React.forwardRef(({ orientation, ref: _, ...validProps }, ref) => {
+    return _jsx(JoySeparator, { ...validProps, orientation: orientation });
+});

package/dist/components-core-joy/input.d.ts

@@ -1,3 +1,2 @@
-import { InputProps } from "../components-core";
-export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=input.d.ts.map
+import React from 'react';
+export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components-core-joy/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAG,UAAU,2CAG/C"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,KAAK,8RAUhB,CAAC"}

package/dist/components-core-joy/input.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Input as JoyInput } from '@mui/joy';
-export default function Input(props) {
-    const { color, size, ref, ...validProps } = props;
+export const Input = React.forwardRef(({ color, size, ref: _, ...validProps }, ref) => {
     return _jsx(JoyInput, { ...validProps });
-}
+});

package/dist/components-core-joy/separator.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLHRElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components-core-joy/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,SAAS,mRASpB,CAAC"}

package/dist/components-core-joy/separator.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Divider as JoySeparator } from '@mui/joy';
+export const Separator = React.forwardRef(({ orientation, ref: _, ...validProps }, ref) => {
+    return _jsx(JoySeparator, { ...validProps, orientation: orientation });
+});

package/dist/components-core-joy/text.d.ts

@@ -1,3 +1,6 @@
-import { TextProps } from "../components-core";
-export default function Text(props: TextProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=text.d.ts.map
+import React from 'react';
+export declare const Text: React.ForwardRefExoticComponent<Omit<Omit<Omit<{
+    variant?: "primary" | "secondary" | "warning" | "success" | undefined;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+} & Omit<React.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components-core-joy/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAG,SAAS,2CAyB7C"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components-core-joy/text.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,IAAI;;;;oNA4Bf,CAAC"}

package/dist/components-core-joy/text.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { Typography as JoyText } from '@mui/joy';
-export default function Text(props) {
-    const { color, size, as, variant, ref, ...validProps } = props;
+export const Text = React.forwardRef((props, ref) => {
+    const { color, size, as, variant, ref: _, ...validProps } = props;
     const muiLevel = {
         h1: 'h1',
         h2: 'h2',
@@ -25,4 +26,4 @@ export default function Text(props) {
         warning: 'danger',
     }[variant || 'primary'];
     return _jsx(JoyText, { level: muiLevel, color: muiColor, ...validProps });
-}
+});

package/dist/components-page/account-settings.d.ts

@@ -0,0 +1,3 @@
+export default function AccountSettings({ fullPage }: {
+    fullPage?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components-page/account-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-settings.d.ts","sourceRoot":"","sources":["../../src/components-page/account-settings.tsx"],"names":[],"mappings":"AAiMA,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAc,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,2CA6BjF"}

package/dist/components-page/account-settings.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PasswordField, useUser } from '..';
+import RedirectMessageCard from '../components/redirect-message-card';
+import { Text, Label, Input, Button, Card, CardHeader, CardContent, CardFooter, Container } from "../components-core";
+import UserAvatar from '../components/user-avatar';
+import { useState } from 'react';
+import FormWarningText from '../components/form-warning';
+import { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';
+function SettingSection(props) {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(Text, { size: 'xl', as: 'h2', children: props.title }), _jsx(Text, { variant: 'secondary', children: props.desc })] }), props.children && _jsx(CardContent, { children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '1.5rem' }, children: props.children }) }), props.buttonText && _jsx(CardFooter, { children: _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', width: '100%' }, children: _jsx(Button, { disabled: props.buttonDisabled, onClick: props.onButtonClick, variant: props.buttonVariant, children: props.buttonText }) }) })] }));
+}
+function ProfileSection() {
+    const user = useUser();
+    const [userInfo, setUserInfo] = useState({ displayName: user?.displayName || '' });
+    const [changed, setChanged] = useState(false);
+    return (_jsxs(SettingSection, { title: 'Profile', desc: 'Your profile information', buttonDisabled: !changed, buttonText: 'Save', onButtonClick: async () => {
+            await user?.update(userInfo);
+            setChanged(false);
+        }, children: [_jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'center' }, children: [_jsx(UserAvatar, { size: 60 }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Text, { size: 'lg', children: user?.displayName }), _jsx(Text, { variant: 'secondary', size: 'sm', children: user?.primaryEmail })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { htmlFor: 'display-name', children: "Display Name" }), _jsx(Input, { id: 'display-name', value: userInfo.displayName, onChange: (e) => {
+                            setUserInfo((i) => ({ ...i, displayName: e.target.value }));
+                            setChanged(true);
+                        } })] })] }));
+}
+function EmailVerificationSection() {
+    const user = useUser();
+    const [emailSent, setEmailSent] = useState(false);
+    return (_jsx(SettingSection, { title: 'Email Verification', desc: 'We want to make sure that you own the email address', buttonDisabled: emailSent, buttonText: !user?.primaryEmailVerified ?
+            emailSent ?
+                'Email sent!' :
+                'Send Email'
+            : undefined, onButtonClick: async () => {
+            await user?.sendVerificationEmail();
+            setEmailSent(true);
+        }, children: user?.primaryEmailVerified ?
+            _jsx(Text, { variant: 'success', children: "Your email has been verified" }) :
+            _jsx(Text, { variant: 'warning', children: "Your email has not been verified" }) }));
+}
+function PasswordSection() {
+    const user = useUser();
+    const [oldPassword, setOldPassword] = useState('');
+    const [oldPasswordError, setOldPasswordError] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [newPasswordError, setNewPasswordError] = useState('');
+    if (user?.authMethod !== 'credential') {
+        return null;
+    }
+    return (_jsxs(SettingSection, { title: 'Password', desc: 'Change your password', buttonDisabled: !oldPassword || !newPassword, buttonText: 'Save', onButtonClick: async () => {
+            if (oldPassword && newPassword) {
+                const errorMessage = getPasswordError(newPassword);
+                if (errorMessage) {
+                    setNewPasswordError(errorMessage.message);
+                }
+                else {
+                    const errorCode = await user?.updatePassword({ oldPassword, newPassword });
+                    if (errorCode) {
+                        setOldPasswordError('Incorrect password');
+                    }
+                    else {
+                        setOldPassword('');
+                        setNewPassword('');
+                    }
+                }
+            }
+            else if (oldPassword && !newPassword) {
+                setNewPasswordError('Please enter a new password');
+            }
+            else if (newPassword && !oldPassword) {
+                setOldPasswordError('Please enter your old password');
+            }
+        }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { htmlFor: 'old-password', children: "Old Password" }), _jsx(PasswordField, { id: 'old-password', value: oldPassword, onChange: (e) => {
+                            setOldPassword(e.target.value);
+                            setOldPasswordError('');
+                        } }), _jsx(FormWarningText, { text: oldPasswordError })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(Label, { htmlFor: 'new-password', children: "New Password" }), _jsx(PasswordField, { id: 'new-password', value: newPassword, onChange: (e) => {
+                            setNewPassword(e.target.value);
+                            setNewPasswordError('');
+                        } }), _jsx(FormWarningText, { text: newPasswordError })] })] }));
+}
+function SignOutSection() {
+    const user = useUser();
+    return (_jsx(SettingSection, { title: 'Sign out', desc: 'Sign out of your account on this device', buttonVariant: 'secondary', buttonText: 'Sign Out', onButtonClick: () => user?.signOut() }));
+}
+export default function AccountSettings({ fullPage = false }) {
+    const user = useUser();
+    if (!user) {
+        return _jsx(RedirectMessageCard, { type: 'signedOut', fullPage: fullPage });
+    }
+    const inner = (_jsxs("div", { style: { padding: fullPage ? '1rem' : 0, display: 'flex', flexDirection: 'column', gap: '1.5rem' }, children: [_jsxs("div", { children: [_jsx(Text, { size: "xl", as: 'h2', style: { marginBottom: '0.5rem', fontWeight: '700' }, children: "Account Settings" }), _jsx(Text, { variant: 'secondary', children: "Manage your account" })] }), _jsx(ProfileSection, {}), _jsx(EmailVerificationSection, {}), _jsx(PasswordSection, {}), _jsx(SignOutSection, {})] }));
+    if (fullPage) {
+        return (_jsx(Container, { size: 'sm', children: inner }));
+    }
+    else {
+        return inner;
+    }
+}

package/dist/components-page/email-verification.d.ts

@@ -1,5 +1,4 @@
 export default function EmailVerification({ searchParams: { code, }, fullPage, }: {
     searchParams?: Record<string, string>;
     fullPage?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=email-verification.d.ts.map
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components-page/email-verification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"email-verification.d.ts","sourceRoot":"","sources":["../../src/components-page/email-verification.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,YAAY,EAAE,EACZ,IAAS,GACL,EACN,QAAgB,GACjB,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,kDAkCA"}
+{"version":3,"file":"email-verification.d.ts","sourceRoot":"","sources":["../../src/components-page/email-verification.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,YAAY,EAAE,EACZ,IAAS,GACL,EACN,QAAgB,GACjB,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAgCA"}

package/dist/components-page/email-verification.js

@@ -4,7 +4,7 @@ import { use } from "react";
 import { useStackApp } from "..";
 import MessageCard from "../components/message-card";
 import RedirectMessageCard from "../components/redirect-message-card";
-import { EmailVerificationLinkExpiredErrorCode, EmailVerificationLinkInvalidErrorCode, EmailVerificationLinkUsedErrorCode } from "@stackframe/stack-shared/dist/utils/types";
+import { KnownErrors } from "@stackframe/stack-shared";
 export default function EmailVerification({ searchParams: { code = "", } = {}, fullPage = false, }) {
     const stackApp = useStackApp();
     const invalidJsx = (_jsx(MessageCard, { title: "Invalid Verification Link", fullPage: fullPage, children: _jsx("p", { children: "Please check if you have the correct link. If you continue to have issues, please contact support." }) }));
@@ -12,18 +12,18 @@ export default function EmailVerification({ searchParams: { code = "", } = {}, f
     if (!code) {
         return invalidJsx;
     }
-    const errorCode = use(stackApp.verifyEmail(code));
-    switch (errorCode) {
-        case EmailVerificationLinkInvalidErrorCode: {
-            return invalidJsx;
-        }
-        case EmailVerificationLinkExpiredErrorCode: {
-            return expiredJsx;
-        }
-        case EmailVerificationLinkUsedErrorCode:
-        case undefined: {
-            return _jsx(RedirectMessageCard, { type: 'emailVerified', fullPage: fullPage });
-        }
+    const error = use(stackApp.verifyEmail(code));
+    if (error instanceof KnownErrors.EmailVerificationCodeNotFound) {
+        return invalidJsx;
+    }
+    else if (error instanceof KnownErrors.EmailVerificationCodeExpired) {
+        return expiredJsx;
+    }
+    else if (error instanceof KnownErrors.EmailVerificationCodeAlreadyUsed) {
+        // everything fine, continue
+    }
+    else if (error) {
+        throw error;
     }
-    return null;
+    return _jsx(RedirectMessageCard, { type: 'emailVerified', fullPage: fullPage });
 }

package/dist/components-page/forgot-password.d.ts

@@ -1,4 +1,3 @@
 export default function ForgotPassword({ fullPage }: {
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=forgot-password.d.ts.map

package/dist/components-page/oauth-callback.d.ts

@@ -1,2 +1 @@
 export default function OAuthCallback(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=oauth-callback.d.ts.map

package/dist/components-page/password-reset.d.ts

@@ -2,4 +2,3 @@ export default function PasswordReset({ searchParams, fullPage, }: {
     searchParams?: Record<string, string>;
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=password-reset.d.ts.map

package/dist/components-page/password-reset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"password-reset.d.ts","sourceRoot":"","sources":["../../src/components-page/password-reset.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,YAAY,EACZ,QAAgB,GACjB,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CA0CA"}
+{"version":3,"file":"password-reset.d.ts","sourceRoot":"","sources":["../../src/components-page/password-reset.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,YAAY,EACZ,QAAgB,GACjB,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAuCA"}

package/dist/components-page/password-reset.js

@@ -4,9 +4,9 @@ import MessageCard from "../components/message-card";
 import { useStackApp } from "..";
 import { use } from "react";
 import PasswordResetInner from "../components/password-reset-inner";
-import { PasswordResetLinkExpiredErrorCode, PasswordResetLinkInvalidErrorCode, PasswordResetLinkUsedErrorCode } from "@stackframe/stack-shared/dist/utils/types";
 import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
 import { Text } from "../components-core";
+import { KnownErrors } from "@stackframe/stack-shared";
 const cachedVerifyPasswordResetCode = cacheFunction(async (stackApp, code) => {
     return await stackApp.verifyPasswordResetCode(code);
 });
@@ -19,19 +19,18 @@ export default function PasswordReset({ searchParams, fullPage = false, }) {
     if (!code) {
         return invalidJsx;
     }
-    const errorCode = use(cachedVerifyPasswordResetCode(stackApp, code));
-    switch (errorCode) {
-        case PasswordResetLinkInvalidErrorCode: {
-            return invalidJsx;
-        }
-        case PasswordResetLinkExpiredErrorCode: {
-            return expiredJsx;
-        }
-        case PasswordResetLinkUsedErrorCode: {
-            return usedJsx;
-        }
-        case undefined: {
-            return _jsx(PasswordResetInner, { code: code, fullPage: fullPage });
-        }
+    const error = use(cachedVerifyPasswordResetCode(stackApp, code));
+    if (error instanceof KnownErrors.PasswordResetCodeNotFound) {
+        return invalidJsx;
+    }
+    else if (error instanceof KnownErrors.PasswordResetCodeExpired) {
+        return expiredJsx;
+    }
+    else if (error instanceof KnownErrors.PasswordResetCodeAlreadyUsed) {
+        return usedJsx;
+    }
+    else if (error) {
+        throw error;
     }
+    return _jsx(PasswordResetInner, { code: code, fullPage: fullPage });
 }

package/dist/components-page/sign-in.d.ts

@@ -1,4 +1,3 @@
 export default function SignIn({ fullPage }: {
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=sign-in.d.ts.map