npm - singularity-components - Versions diffs - 0.1.193 → 0.1.195 - Mend

singularity-components 0.1.193 → 0.1.195

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/components/primitives/text/text-code.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -21,6 +21,6 @@ declare const textCodeVariantsProps: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TextCodeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textCodeVariantsProps> {
 }
-declare const TextCode: ({ children, size, className, ...props }: TextCodeProps) => react_jsx_runtime.JSX.Element;
+declare const TextCode: ({ children, size, className, ...props }: TextCodeProps) => React$1.JSX.Element;
 export { TextCode, type TextCodeProps, textCodeVariants, textCodeVariantsProps };

package/dist/components/primitives/text/text-div.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { OmitClassProperty } from '../../../lib/types.js';
 import { TextElementProps } from './internal/text-element.js';
 import 'class-variance-authority/types';
-import 'react';
 import 'class-variance-authority';
-declare const TextDiv: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => react_jsx_runtime.JSX.Element;
+declare const TextDiv: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => React.JSX.Element;
 export { TextDiv };

package/dist/components/primitives/text/text-span.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { OmitClassProperty } from '../../../lib/types.js';
 import { TextElementProps } from './internal/text-element.js';
 import 'class-variance-authority/types';
-import 'react';
 import 'class-variance-authority';
-declare const TextSpan: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => react_jsx_runtime.JSX.Element;
+declare const TextSpan: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => React.JSX.Element;
 export { TextSpan };

package/dist/components/primitives/text/text-time.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { TextElementProps } from './internal/text-element.js';
 import { OmitClassProperty } from '../../../lib/types.js';
 import 'class-variance-authority/types';
-import 'react';
 import 'class-variance-authority';
-declare const TextTime: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => react_jsx_runtime.JSX.Element;
+declare const TextTime: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => React.JSX.Element;
 export { TextTime };

package/dist/components/primitives/text/text.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { OmitClassProperty } from '../../../lib/types.js';
 import { TextElementProps } from './internal/text-element.js';
-import 'react';
 import 'class-variance-authority';
 declare const textVariants: {
@@ -11,6 +10,6 @@ declare const textVariants: {
 declare const textVariantsProps: (props?: ({
     variant?: null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Text: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => react_jsx_runtime.JSX.Element;
+declare const Text: ({ children, size, foreground, fontweight, className, ...props }: OmitClassProperty<TextElementProps, "as">) => React.JSX.Element;
 export { Text, textVariants, textVariantsProps };

package/dist/components/primitives/ui-image/ui-image.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { BaseImageProps } from '../../providers/ImageContext.js';
-import 'react';
 type Props = {
     showServerSideDefaultImageComponent?: boolean;
 } & BaseImageProps;
-declare function UiImage({ showServerSideDefaultImageComponent, ...props }: Props): react_jsx_runtime.JSX.Element;
+declare function UiImage({ showServerSideDefaultImageComponent, ...props }: Props): React.JSX.Element;
 export { UiImage };

package/dist/components/primitives/ui-link/ui-link.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { BaseLinkProps } from '../../providers/LinkContext.js';
-import 'react';
 type Props = BaseLinkProps;
-declare const UiLink: ({ ...props }: Props) => react_jsx_runtime.JSX.Element;
+declare const UiLink: ({ ...props }: Props) => React.JSX.Element;
 export { UiLink };

package/dist/components/providers/SingularityContext.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ import React__default, { ReactNode } from 'react';
 import { ImageComponentType } from './ImageContext.js';
 import { LinkComponentType } from './LinkContext.js';
 import { Theme } from './theme-provider.js';
-import 'react/jsx-runtime';
 interface SingularityProviderProps {
     ImageComponent?: ImageComponentType;

package/dist/components/providers/auth-provider.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 import { ReactNode } from 'react';
 interface AuthContextType {
@@ -9,7 +9,7 @@ interface AuthContextType {
 }
 declare function AuthProvider({ children }: {
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): React.JSX.Element;
 declare const useAuth: () => AuthContextType;
 export { AuthProvider, useAuth };

package/dist/components/providers/index.d.ts CHANGED Viewed

@@ -4,4 +4,3 @@ export { SingularityProvider } from './SingularityContext.js';
 export { AuthProvider, useAuth } from './auth-provider.js';
 export { Theme, ThemeProvider, ThemeProviderProps, ThemeProviderState, useTheme } from './theme-provider.js';
 import 'react';
-import 'react/jsx-runtime';

package/dist/components/providers/theme-provider.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 type Theme = "dark" | "light" | "system";
@@ -18,7 +17,7 @@ type ThemeProviderState = {
  * Supports "light", "dark", and "system" modes.
  * Default is "system" with a fallback to "dark".
  */
-declare function ThemeProvider({ children, defaultTheme, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children, defaultTheme, ...props }: ThemeProviderProps): React.JSX.Element;
 /**
  * Hook to access the current theme and setTheme function.
  */

package/dist/components/templates/container/container.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
@@ -6,11 +5,11 @@ type Prop = {
     children?: React.ReactNode;
     as?: "body" | "div";
 } & React.HTMLAttributes<HTMLElement>;
-declare function Container({ children, as: Component, className, ...rest }: PropsWithChildren<Prop>): react_jsx_runtime.JSX.Element;
+declare function Container({ children, as: Component, className, ...rest }: PropsWithChildren<Prop>): React.JSX.Element;
 declare namespace Container {
-    var Header: ({ children, as: Component, ...props }: ChildProp) => react_jsx_runtime.JSX.Element;
-    var Content: ({ children, as: Component, ...props }: ChildProp) => react_jsx_runtime.JSX.Element;
-    var Footer: ({ children, as: Component, ...props }: ChildProp) => react_jsx_runtime.JSX.Element;
+    var Header: ({ children, as: Component, ...props }: ChildProp) => React.JSX.Element;
+    var Content: ({ children, as: Component, ...props }: ChildProp) => React.JSX.Element;
+    var Footer: ({ children, as: Component, ...props }: ChildProp) => React.JSX.Element;
 }
 type ChildProp = {
     children?: React.ReactNode;

package/dist/components/templates/footer/footer.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
-declare function Footer(): react_jsx_runtime.JSX.Element;
+declare function Footer(): React.JSX.Element;
 export { Footer };

package/dist/components/templates/form/form.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
-declare function Form(): react_jsx_runtime.JSX.Element;
+declare function Form(): React.JSX.Element;
 export { Form as default };

package/dist/components/templates/hero/hero.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
 interface HeroProps {
     title?: React.ReactNode;
@@ -13,6 +13,6 @@ interface HeroProps {
         href: string;
     };
 }
-declare function Hero({ title, titleAccent, description, primaryCTA, secondaryCTA, }: HeroProps): react_jsx_runtime.JSX.Element;
+declare function Hero({ title, titleAccent, description, primaryCTA, secondaryCTA, }: HeroProps): React$1.JSX.Element;
 export { Hero as default };

package/dist/components/templates/hero/hero.js CHANGED Viewed

@@ -266,7 +266,7 @@ function Hero({
             primaryCTA && /* @__PURE__ */ jsx(
               LinkButton,
               {
-                buttonSize: "lg",
+                size: "lg",
                 to: primaryCTA.href,
                 className: "sg:z-1",
                 children: primaryCTA.label
@@ -276,7 +276,7 @@ function Hero({
               LinkButton,
               {
                 variant: "secondary",
-                buttonSize: "lg",
+                size: "lg",
                 to: secondaryCTA.href,
                 className: "sg:z-1",
                 children: secondaryCTA.label

package/dist/components/templates/hero/hero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/templates/hero/hero.tsx"],"sourcesContent":["\"use client\";\r\nimport {\r\n Layout,\r\n LinkButton,\r\n Stack,\r\n Heading,\r\n Text,\r\n TextSpan,\r\n} from \"../../primitives/index\";\r\nimport { useCallback, useMemo, useRef, useState } from \"react\";\r\n\r\nfunction seededRandom(seed: number) {\r\n const x = Math.sin(seed * 9999) * 10000;\r\n return x - Math.floor(x);\r\n}\r\n\r\nfunction round(num: number, decimals = 4) {\r\n return Number(num.toFixed(decimals));\r\n}\r\n\r\nfunction generateSparkles(count: number) {\r\n return Array.from({ length: count }, (_, i) => ({\r\n id: i,\r\n left: round(seededRandom(i) * 100),\r\n top: round(seededRandom(i + 1) * 100),\r\n size: round(seededRandom(i + 2) * 4 + 2),\r\n delay: round(seededRandom(i + 3) * 5),\r\n duration: round(seededRandom(i + 4) * 2 + 1.5),\r\n }));\r\n}\r\n\r\ninterface BurstParticle {\r\n id: number;\r\n x: number;\r\n y: number;\r\n angle: number;\r\n speed: number;\r\n hue: number;\r\n size: number;\r\n}\r\n\r\ninterface HeroProps {\r\n title?: React.ReactNode;\r\n titleAccent?: string;\r\n description?: string;\r\n primaryCTA?: { label: string; href: string };\r\n secondaryCTA?: { label: string; href: string };\r\n}\r\n\r\nexport default function Hero({\r\n title,\r\n titleAccent,\r\n description,\r\n primaryCTA,\r\n secondaryCTA,\r\n}: HeroProps) {\r\n const heroRef = useRef<HTMLElement>(null);\r\n const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });\r\n const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });\r\n const sparkles = useMemo(() => generateSparkles(40), []);\r\n const [bursts, setBursts] = useState<BurstParticle[]>([]);\r\n const burstIdRef = useRef(0);\r\n\r\n const handleMouseMove = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n const rect = heroRef.current?.getBoundingClientRect();\r\n if (!rect) return;\r\n setMouse({\r\n x: (e.clientX - rect.left) / rect.width,\r\n y: (e.clientY - rect.top) / rect.height,\r\n });\r\n setMousePixel({\r\n x: e.clientX - rect.left,\r\n y: e.clientY - rect.top,\r\n });\r\n }, []);\r\n\r\n const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n const rect = heroRef.current?.getBoundingClientRect();\r\n if (!rect) return;\r\n const cx = e.clientX - rect.left;\r\n const cy = e.clientY - rect.top;\r\n const count = 18;\r\n\r\n const newBursts: BurstParticle[] = Array.from(\r\n { length: count },\r\n (_, i) => ({\r\n id: burstIdRef.current++,\r\n x: cx,\r\n y: cy,\r\n angle: (360 / count) * i + Math.random() * 20 - 10,\r\n speed: Math.random() * 120 + 60,\r\n hue: Math.random() * 360,\r\n size: Math.random() * 5 + 3,\r\n }),\r\n );\r\n\r\n setBursts((prev) => [...prev, ...newBursts]);\r\n setTimeout(() => {\r\n setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));\r\n }, 800);\r\n }, []);\r\n\r\n return (\r\n <Layout type=\"container\">\r\n <Layout.Col1 hideDiv>\r\n <section\r\n ref={heroRef}\r\n onMouseMove={handleMouseMove}\r\n onClick={handleClick}\r\n onKeyDown={(e) => {\r\n if (e.key === \"Enter\" \|\| e.key === \" \") {\r\n e.preventDefault();\r\n handleClick(e as any);\r\n }\r\n }}\r\n role=\"button\"\r\n tabIndex={0}\r\n data-testid=\"hero-section\"\r\n className=\"sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2\"\r\n >\r\n {/* Colorful gradient blobs — follow mouse /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n aria-hidden=\"true\"\r\n >\r\n {/ Hot pink / magenta /}\r\n <div\r\n className=\"sg:absolute sg:h-175 sg:w-175 sg:rounded-full sg:opacity-35 sg:blur-[90px] sg:transition-transform sg:duration-500 sg:ease-out\"\r\n style={{\r\n background: \"hsl(330, 90%, 55%)\",\r\n transform: `translate(${mouse.x 70 - 35}%, ${mouse.y * 60 - 50}%)`,\r\n top: \"-10%\",\r\n right: \"-5%\",\r\n }}\r\n />\r\n {/* Electric blue /}\r\n <div\r\n className=\"sg:absolute sg:h-150 sg:w-150 sg:rounded-full sg:opacity-30 sg:blur-[80px] sg:transition-transform sg:duration-700 sg:ease-out\"\r\n style={{\r\n background: \"hsl(220, 95%, 55%)\",\r\n transform: `translate(${mouse.x -60 + 30}%, ${mouse.y * 50 - 25}%)`,\r\n top: \"20%\",\r\n left: \"-8%\",\r\n }}\r\n />\r\n {/* Vivid orange /}\r\n <div\r\n className=\"sg:absolute sg:h-137.5 sg:w-137.5 sg:rounded-full sg:opacity-30 sg:blur-[70px] sg:transition-transform sg:duration-900 sg:ease-out\"\r\n style={{\r\n background: \"hsl(25, 95%, 55%)\",\r\n transform: `translate(${mouse.x 55 - 28}%, ${mouse.y * -55 + 28}%)`,\r\n bottom: \"-5%\",\r\n right: \"15%\",\r\n }}\r\n />\r\n {/* Lime / green /}\r\n <div\r\n className=\"sg:absolute sg:h-100 sg:w-100 sg:rounded-full sg:opacity-25 sg:blur-[60px] sg:transition-transform sg:duration-400 sg:ease-out\"\r\n style={{\r\n background: \"hsl(145, 80%, 45%)\",\r\n transform: `translate(${mouse.x 80 - 40}%, ${mouse.y * 80 - 40}%)`,\r\n top: \"5%\",\r\n left: \"20%\",\r\n }}\r\n />\r\n {/* Purple / violet /}\r\n <div\r\n className=\"sg:absolute sg:h-125 sg:w-125 sg:rounded-full sg:opacity-25 sg:blur-[75px] sg:transition-transform sg:duration-600 sg:ease-out\"\r\n style={{\r\n background: \"hsl(270, 85%, 55%)\",\r\n transform: `translate(${mouse.x -45 + 22}%, ${mouse.y * 65 - 32}%)`,\r\n bottom: \"10%\",\r\n left: \"30%\",\r\n }}\r\n />\r\n {/* Yellow / gold accent /}\r\n <div\r\n className=\"sg:absolute sg:h-87.5 sg:w-87.5 sg:rounded-full sg:opacity-20 sg:blur-[50px] sg:transition-transform sg:duration-350 sg:ease-out\"\r\n style={{\r\n background: \"hsl(50, 95%, 55%)\",\r\n transform: `translate(${mouse.x 90 - 45}%, ${mouse.y * -70 + 35}%)`,\r\n top: \"40%\",\r\n right: \"5%\",\r\n }}\r\n />\r\n </div>\r\n\r\n {/* Sparkle / glitter particles /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n aria-hidden=\"true\"\r\n >\r\n {sparkles.map((s) => (\r\n <div\r\n key={s.id}\r\n className=\"sg:absolute sg:rounded-full\"\r\n style={{\r\n left: `${s.left}%`,\r\n top: `${s.top}%`,\r\n width: s.size,\r\n height: s.size,\r\n background: `hsl(${(s.id 47) % 360}, 90%, 70%)`,\r\n boxShadow: `0 0 ${s.size * 2}px hsl(${(s.id * 47) % 360}, 90%, 70%)`,\r\n animation: `sparkle ${s.duration}s ${s.delay}s ease-in-out infinite`,\r\n transform: `translate(${(mouse.x - 0.5) * s.size * 8}px, ${(mouse.y - 0.5) * s.size * 8}px)`,\r\n transition: \"transform 0.3s ease-out\",\r\n }}\r\n />\r\n ))}\r\n </div>\r\n\r\n {/* Cursor spotlight /}\r\n <div\r\n className=\"sg:absolute sg:pointer-events-none\"\r\n style={{\r\n left: mousePixel.x - 150,\r\n top: mousePixel.y - 150,\r\n width: 300,\r\n height: 300,\r\n background:\r\n \"radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 60%)\",\r\n transition: \"left 0.1s ease-out, top 0.1s ease-out\",\r\n }}\r\n aria-hidden=\"true\"\r\n />\r\n\r\n {/ Click burst particles /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:pointer-events-none sg:overflow-hidden\"\r\n aria-hidden=\"true\"\r\n >\r\n {bursts.map((b) => (\r\n <div\r\n key={b.id}\r\n className=\"sg:absolute sg:rounded-full\"\r\n style={\r\n {\r\n left: b.x,\r\n top: b.y,\r\n width: b.size,\r\n height: b.size,\r\n background: `hsl(${b.hue}, 90%, 65%)`,\r\n boxShadow: `0 0 ${b.size 3}px hsl(${b.hue}, 90%, 65%)`,\r\n animation: `burst 0.7s ease-out forwards`,\r\n \"--burst-x\": `${Math.cos((b.angle * Math.PI) / 180) * b.speed}px`,\r\n \"--burst-y\": `${Math.sin((b.angle * Math.PI) / 180) * b.speed}px`,\r\n } as React.CSSProperties\r\n }\r\n />\r\n ))}\r\n </div>\r\n\r\n {/* Subtle grain texture overlay /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:opacity-[0.02] sg:dark:opacity-[0.04] sg:pointer-events-none\"\r\n style={{\r\n backgroundImage:\r\n \"url(\\\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\\\")\",\r\n }}\r\n aria-hidden=\"true\"\r\n />\r\n\r\n <Layout type=\"col\" className=\"sg:py-20 sg:md:py-32\">\r\n <Layout.Col1 hideDiv>\r\n {(title \|\| titleAccent) && (\r\n <Heading variant=\"h1\">\r\n {title}{\" \"}\r\n {titleAccent && (\r\n <TextSpan size=\"4xl\" foreground=\"primary\">\r\n {titleAccent}\r\n </TextSpan>\r\n )}\r\n </Heading>\r\n )}\r\n\r\n {description && (\r\n <Text\r\n size=\"lg\"\r\n foreground=\"muted-foreground\"\r\n className=\"sg:mt-6 sg:max-w-xl\"\r\n >\r\n {description}\r\n </Text>\r\n )}\r\n\r\n {(primaryCTA \|\| secondaryCTA) && (\r\n <Stack gap={3} direction=\"row\" wrap=\"wrap\" className=\"sg:mt-8\">\r\n {primaryCTA && (\r\n <LinkButton\r\n buttonSize=\"lg\"\r\n to={primaryCTA.href}\r\n className=\"sg:z-1\"\r\n >\r\n {primaryCTA.label}\r\n </LinkButton>\r\n )}\r\n {secondaryCTA && (\r\n <LinkButton\r\n variant=\"secondary\"\r\n buttonSize=\"lg\"\r\n to={secondaryCTA.href}\r\n className=\"sg:z-1\"\r\n >\r\n {secondaryCTA.label}\r\n </LinkButton>\r\n )}\r\n </Stack>\r\n )}\r\n </Layout.Col1>\r\n </Layout>\r\n\r\n {/ Bottom fade to background */}\r\n <div\r\n className=\"sg:absolute sg:bottom-0 sg:left-0 sg:right-0 sg:h-32 sg:bg-linear-to-t sg:from-background sg:to-transparent sg:pointer-events-none\"\r\n aria-hidden=\"true\"\r\n />\r\n </section>\r\n </Layout.Col1>\r\n </Layout>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/components/templates/hero/hero.tsx"],"sourcesContent":["\"use client\";\r\nimport {\r\n Layout,\r\n LinkButton,\r\n Stack,\r\n Heading,\r\n Text,\r\n TextSpan,\r\n} from \"../../primitives/index\";\r\nimport { useCallback, useMemo, useRef, useState } from \"react\";\r\n\r\nfunction seededRandom(seed: number) {\r\n const x = Math.sin(seed * 9999) * 10000;\r\n return x - Math.floor(x);\r\n}\r\n\r\nfunction round(num: number, decimals = 4) {\r\n return Number(num.toFixed(decimals));\r\n}\r\n\r\nfunction generateSparkles(count: number) {\r\n return Array.from({ length: count }, (_, i) => ({\r\n id: i,\r\n left: round(seededRandom(i) * 100),\r\n top: round(seededRandom(i + 1) * 100),\r\n size: round(seededRandom(i + 2) * 4 + 2),\r\n delay: round(seededRandom(i + 3) * 5),\r\n duration: round(seededRandom(i + 4) * 2 + 1.5),\r\n }));\r\n}\r\n\r\ninterface BurstParticle {\r\n id: number;\r\n x: number;\r\n y: number;\r\n angle: number;\r\n speed: number;\r\n hue: number;\r\n size: number;\r\n}\r\n\r\ninterface HeroProps {\r\n title?: React.ReactNode;\r\n titleAccent?: string;\r\n description?: string;\r\n primaryCTA?: { label: string; href: string };\r\n secondaryCTA?: { label: string; href: string };\r\n}\r\n\r\nexport default function Hero({\r\n title,\r\n titleAccent,\r\n description,\r\n primaryCTA,\r\n secondaryCTA,\r\n}: HeroProps) {\r\n const heroRef = useRef<HTMLElement>(null);\r\n const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });\r\n const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });\r\n const sparkles = useMemo(() => generateSparkles(40), []);\r\n const [bursts, setBursts] = useState<BurstParticle[]>([]);\r\n const burstIdRef = useRef(0);\r\n\r\n const handleMouseMove = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n const rect = heroRef.current?.getBoundingClientRect();\r\n if (!rect) return;\r\n setMouse({\r\n x: (e.clientX - rect.left) / rect.width,\r\n y: (e.clientY - rect.top) / rect.height,\r\n });\r\n setMousePixel({\r\n x: e.clientX - rect.left,\r\n y: e.clientY - rect.top,\r\n });\r\n }, []);\r\n\r\n const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n const rect = heroRef.current?.getBoundingClientRect();\r\n if (!rect) return;\r\n const cx = e.clientX - rect.left;\r\n const cy = e.clientY - rect.top;\r\n const count = 18;\r\n\r\n const newBursts: BurstParticle[] = Array.from(\r\n { length: count },\r\n (_, i) => ({\r\n id: burstIdRef.current++,\r\n x: cx,\r\n y: cy,\r\n angle: (360 / count) * i + Math.random() * 20 - 10,\r\n speed: Math.random() * 120 + 60,\r\n hue: Math.random() * 360,\r\n size: Math.random() * 5 + 3,\r\n }),\r\n );\r\n\r\n setBursts((prev) => [...prev, ...newBursts]);\r\n setTimeout(() => {\r\n setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));\r\n }, 800);\r\n }, []);\r\n\r\n return (\r\n <Layout type=\"container\">\r\n <Layout.Col1 hideDiv>\r\n <section\r\n ref={heroRef}\r\n onMouseMove={handleMouseMove}\r\n onClick={handleClick}\r\n onKeyDown={(e) => {\r\n if (e.key === \"Enter\" \|\| e.key === \" \") {\r\n e.preventDefault();\r\n handleClick(e as any);\r\n }\r\n }}\r\n role=\"button\"\r\n tabIndex={0}\r\n data-testid=\"hero-section\"\r\n className=\"sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2\"\r\n >\r\n {/* Colorful gradient blobs — follow mouse /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n aria-hidden=\"true\"\r\n >\r\n {/ Hot pink / magenta /}\r\n <div\r\n className=\"sg:absolute sg:h-175 sg:w-175 sg:rounded-full sg:opacity-35 sg:blur-[90px] sg:transition-transform sg:duration-500 sg:ease-out\"\r\n style={{\r\n background: \"hsl(330, 90%, 55%)\",\r\n transform: `translate(${mouse.x 70 - 35}%, ${mouse.y * 60 - 50}%)`,\r\n top: \"-10%\",\r\n right: \"-5%\",\r\n }}\r\n />\r\n {/* Electric blue /}\r\n <div\r\n className=\"sg:absolute sg:h-150 sg:w-150 sg:rounded-full sg:opacity-30 sg:blur-[80px] sg:transition-transform sg:duration-700 sg:ease-out\"\r\n style={{\r\n background: \"hsl(220, 95%, 55%)\",\r\n transform: `translate(${mouse.x -60 + 30}%, ${mouse.y * 50 - 25}%)`,\r\n top: \"20%\",\r\n left: \"-8%\",\r\n }}\r\n />\r\n {/* Vivid orange /}\r\n <div\r\n className=\"sg:absolute sg:h-137.5 sg:w-137.5 sg:rounded-full sg:opacity-30 sg:blur-[70px] sg:transition-transform sg:duration-900 sg:ease-out\"\r\n style={{\r\n background: \"hsl(25, 95%, 55%)\",\r\n transform: `translate(${mouse.x 55 - 28}%, ${mouse.y * -55 + 28}%)`,\r\n bottom: \"-5%\",\r\n right: \"15%\",\r\n }}\r\n />\r\n {/* Lime / green /}\r\n <div\r\n className=\"sg:absolute sg:h-100 sg:w-100 sg:rounded-full sg:opacity-25 sg:blur-[60px] sg:transition-transform sg:duration-400 sg:ease-out\"\r\n style={{\r\n background: \"hsl(145, 80%, 45%)\",\r\n transform: `translate(${mouse.x 80 - 40}%, ${mouse.y * 80 - 40}%)`,\r\n top: \"5%\",\r\n left: \"20%\",\r\n }}\r\n />\r\n {/* Purple / violet /}\r\n <div\r\n className=\"sg:absolute sg:h-125 sg:w-125 sg:rounded-full sg:opacity-25 sg:blur-[75px] sg:transition-transform sg:duration-600 sg:ease-out\"\r\n style={{\r\n background: \"hsl(270, 85%, 55%)\",\r\n transform: `translate(${mouse.x -45 + 22}%, ${mouse.y * 65 - 32}%)`,\r\n bottom: \"10%\",\r\n left: \"30%\",\r\n }}\r\n />\r\n {/* Yellow / gold accent /}\r\n <div\r\n className=\"sg:absolute sg:h-87.5 sg:w-87.5 sg:rounded-full sg:opacity-20 sg:blur-[50px] sg:transition-transform sg:duration-350 sg:ease-out\"\r\n style={{\r\n background: \"hsl(50, 95%, 55%)\",\r\n transform: `translate(${mouse.x 90 - 45}%, ${mouse.y * -70 + 35}%)`,\r\n top: \"40%\",\r\n right: \"5%\",\r\n }}\r\n />\r\n </div>\r\n\r\n {/* Sparkle / glitter particles /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n aria-hidden=\"true\"\r\n >\r\n {sparkles.map((s) => (\r\n <div\r\n key={s.id}\r\n className=\"sg:absolute sg:rounded-full\"\r\n style={{\r\n left: `${s.left}%`,\r\n top: `${s.top}%`,\r\n width: s.size,\r\n height: s.size,\r\n background: `hsl(${(s.id 47) % 360}, 90%, 70%)`,\r\n boxShadow: `0 0 ${s.size * 2}px hsl(${(s.id * 47) % 360}, 90%, 70%)`,\r\n animation: `sparkle ${s.duration}s ${s.delay}s ease-in-out infinite`,\r\n transform: `translate(${(mouse.x - 0.5) * s.size * 8}px, ${(mouse.y - 0.5) * s.size * 8}px)`,\r\n transition: \"transform 0.3s ease-out\",\r\n }}\r\n />\r\n ))}\r\n </div>\r\n\r\n {/* Cursor spotlight /}\r\n <div\r\n className=\"sg:absolute sg:pointer-events-none\"\r\n style={{\r\n left: mousePixel.x - 150,\r\n top: mousePixel.y - 150,\r\n width: 300,\r\n height: 300,\r\n background:\r\n \"radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 60%)\",\r\n transition: \"left 0.1s ease-out, top 0.1s ease-out\",\r\n }}\r\n aria-hidden=\"true\"\r\n />\r\n\r\n {/ Click burst particles /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:pointer-events-none sg:overflow-hidden\"\r\n aria-hidden=\"true\"\r\n >\r\n {bursts.map((b) => (\r\n <div\r\n key={b.id}\r\n className=\"sg:absolute sg:rounded-full\"\r\n style={\r\n {\r\n left: b.x,\r\n top: b.y,\r\n width: b.size,\r\n height: b.size,\r\n background: `hsl(${b.hue}, 90%, 65%)`,\r\n boxShadow: `0 0 ${b.size 3}px hsl(${b.hue}, 90%, 65%)`,\r\n animation: `burst 0.7s ease-out forwards`,\r\n \"--burst-x\": `${Math.cos((b.angle * Math.PI) / 180) * b.speed}px`,\r\n \"--burst-y\": `${Math.sin((b.angle * Math.PI) / 180) * b.speed}px`,\r\n } as React.CSSProperties\r\n }\r\n />\r\n ))}\r\n </div>\r\n\r\n {/* Subtle grain texture overlay /}\r\n <div\r\n className=\"sg:absolute sg:inset-0 sg:opacity-[0.02] sg:dark:opacity-[0.04] sg:pointer-events-none\"\r\n style={{\r\n backgroundImage:\r\n \"url(\\\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\\\")\",\r\n }}\r\n aria-hidden=\"true\"\r\n />\r\n\r\n <Layout type=\"col\" className=\"sg:py-20 sg:md:py-32\">\r\n <Layout.Col1 hideDiv>\r\n {(title \|\| titleAccent) && (\r\n <Heading variant=\"h1\">\r\n {title}{\" \"}\r\n {titleAccent && (\r\n <TextSpan size=\"4xl\" foreground=\"primary\">\r\n {titleAccent}\r\n </TextSpan>\r\n )}\r\n </Heading>\r\n )}\r\n\r\n {description && (\r\n <Text\r\n size=\"lg\"\r\n foreground=\"muted-foreground\"\r\n className=\"sg:mt-6 sg:max-w-xl\"\r\n >\r\n {description}\r\n </Text>\r\n )}\r\n\r\n {(primaryCTA \|\| secondaryCTA) && (\r\n <Stack gap={3} direction=\"row\" wrap=\"wrap\" className=\"sg:mt-8\">\r\n {primaryCTA && (\r\n <LinkButton\r\n size=\"lg\"\r\n to={primaryCTA.href}\r\n className=\"sg:z-1\"\r\n >\r\n {primaryCTA.label}\r\n </LinkButton>\r\n )}\r\n {secondaryCTA && (\r\n <LinkButton\r\n variant=\"secondary\"\r\n size=\"lg\"\r\n to={secondaryCTA.href}\r\n className=\"sg:z-1\"\r\n >\r\n {secondaryCTA.label}\r\n </LinkButton>\r\n )}\r\n </Stack>\r\n )}\r\n </Layout.Col1>\r\n </Layout>\r\n\r\n {/ Bottom fade to background */}\r\n <div\r\n className=\"sg:absolute sg:bottom-0 sg:left-0 sg:right-0 sg:h-32 sg:bg-linear-to-t sg:from-background sg:to-transparent sg:pointer-events-none\"\r\n aria-hidden=\"true\"\r\n />\r\n </section>\r\n </Layout.Col1>\r\n </Layout>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/templates/index.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 export { Container } from './container/container.js';
 export { Footer } from './footer/footer.js';
 export { Header, HeaderProps, NavLink } from './navigation/header.js';
-import 'react/jsx-runtime';
 import 'react';

package/dist/components/templates/navigation/header.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 interface NavLink {
@@ -14,6 +13,6 @@ interface HeaderProps {
     loginLabel?: string;
     extrasLabel?: string;
 }
-declare function Header({ navLinks, extrasLinks, logo, currentPath, loginPath, loginLabel, extrasLabel, }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header({ navLinks, extrasLinks, logo, currentPath, loginPath, loginLabel, extrasLabel, }: HeaderProps): React.JSX.Element;
 export { Header, type HeaderProps, type NavLink };

package/dist/components/templates/navigation/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 export { Header, HeaderProps, NavLink } from './header.js';
-import 'react/jsx-runtime';
 import 'react';

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/blocks/cards/card.js';
+export { Login, LoginCredentials, LoginProps } from './components/blocks/login/login.js';
 export { PostListWithFilters } from './components/blocks/post-list/post-list-with-filters.js';
 export { AdminPage, AdminPageProps } from './components/pages/admin/admin-page.js';
 export { BlogPost } from './components/pages/blogpost/blogpost.js';
@@ -32,7 +33,7 @@ export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
 export { Skeleton } from './components/primitives/skeleton/skeleton.js';
 export { Toaster } from './components/primitives/sonner/sonner.js';
 export { Spinner } from './components/primitives/spinner/spinner.js';
-export { Stack, StackProps, stackVariants } from './components/primitives/stack/stack.js';
+export { Stack, StackProps, stackVariantOptions, stackVariants } from './components/primitives/stack/stack.js';
 export { Heading, HeadingProps, headingVariants, headingVariantsProps } from './components/primitives/text/heading.js';
 export { TextCode, TextCodeProps, textCodeVariants, textCodeVariantsProps } from './components/primitives/text/text-code.js';
 export { TextDiv } from './components/primitives/text/text-div.js';
@@ -50,7 +51,6 @@ export { Container } from './components/templates/container/container.js';
 export { Footer } from './components/templates/footer/footer.js';
 export { Header, HeaderProps, NavLink } from './components/templates/navigation/header.js';
 export { toast } from 'sonner';
-import 'react/jsx-runtime';
 import 'react';
 import './data/posts.js';
 import '@base-ui/react/accordion';

package/dist/main.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root {
   --sg-black: oklch(0.25 0 0);
@@ -84,6 +84,7 @@
   :root,
   :host {
     --sg-spacing: 0.25rem;
+    --sg-container-xs: 20rem;
     --sg-container-sm: 24rem;
     --sg-container-md: 28rem;
     --sg-container-lg: 32rem;
@@ -354,13 +355,13 @@
     position: sticky;
   }
   .sg\:inset-0 {
-    inset: calc(var(--sg-spacing) * 0);
+    inset: 0;
   }
   .sg\:inset-x-0 {
-    inset-inline: calc(var(--sg-spacing) * 0);
+    inset-inline: 0;
   }
   .sg\:inset-y-0 {
-    inset-block: calc(var(--sg-spacing) * 0);
+    inset-block: 0;
   }
   .sg\:end-3 {
     inset-inline-end: calc(var(--sg-spacing) * 3);
@@ -369,7 +370,7 @@
     top: calc(var(--sg-spacing) * -1.5);
   }
   .sg\:top-0 {
-    top: calc(var(--sg-spacing) * 0);
+    top: 0;
   }
   .sg\:top-1\/2 {
     top: calc(1 / 2 * 100%);
@@ -387,16 +388,16 @@
     right: calc(var(--sg-spacing) * -1.5);
   }
   .sg\:right-0 {
-    right: calc(var(--sg-spacing) * 0);
+    right: 0;
   }
   .sg\:right-4 {
     right: calc(var(--sg-spacing) * 4);
   }
   .sg\:bottom-0 {
-    bottom: calc(var(--sg-spacing) * 0);
+    bottom: 0;
   }
   .sg\:left-0 {
-    left: calc(var(--sg-spacing) * 0);
+    left: 0;
   }
   .sg\:left-2 {
     left: calc(var(--sg-spacing) * 2);
@@ -456,7 +457,7 @@
     margin-block: calc(var(--sg-spacing) * -2);
   }
   .sg\:my-1 {
-    margin-block: calc(var(--sg-spacing) * 1);
+    margin-block: var(--sg-spacing);
   }
   .sg\:my-4 {
     margin-block: calc(var(--sg-spacing) * 4);
@@ -465,7 +466,7 @@
     margin-top: calc(var(--sg-spacing) * 0.5);
   }
   .sg\:mt-1 {
-    margin-top: calc(var(--sg-spacing) * 1);
+    margin-top: var(--sg-spacing);
   }
   .sg\:mt-1\.5 {
     margin-top: calc(var(--sg-spacing) * 1.5);
@@ -501,13 +502,13 @@
     margin-top: auto;
   }
   .sg\:mr-1 {
-    margin-right: calc(var(--sg-spacing) * 1);
+    margin-right: var(--sg-spacing);
   }
   .sg\:mr-2 {
     margin-right: calc(var(--sg-spacing) * 2);
   }
   .sg\:mb-1 {
-    margin-bottom: calc(var(--sg-spacing) * 1);
+    margin-bottom: var(--sg-spacing);
   }
   .sg\:mb-2 {
     margin-bottom: calc(var(--sg-spacing) * 2);
@@ -531,7 +532,7 @@
     margin-bottom: calc(var(--sg-spacing) * 12);
   }
   .sg\:ml-1 {
-    margin-left: calc(var(--sg-spacing) * 1);
+    margin-left: var(--sg-spacing);
   }
   .sg\:ml-4 {
     margin-left: calc(var(--sg-spacing) * 4);
@@ -623,7 +624,7 @@
     height: var(--accordion-panel-height);
   }
   .sg\:h-1 {
-    height: calc(var(--sg-spacing) * 1);
+    height: var(--sg-spacing);
   }
   .sg\:h-2 {
     height: calc(var(--sg-spacing) * 2);
@@ -658,6 +659,9 @@
   .sg\:h-32 {
     height: calc(var(--sg-spacing) * 32);
   }
+  .sg\:h-48 {
+    height: calc(var(--sg-spacing) * 48);
+  }
   .sg\:h-56 {
     height: calc(var(--sg-spacing) * 56);
   }
@@ -695,7 +699,10 @@
     max-height: var(--available-height);
   }
   .sg\:min-h-0 {
-    min-height: calc(var(--sg-spacing) * 0);
+    min-height: 0;
+  }
+  .sg\:min-h-\[24rem\] {
+    min-height: 24rem;
   }
   .sg\:min-h-\[60vh\] {
     min-height: 60vh;
@@ -713,7 +720,7 @@
     width: var(--anchor-width);
   }
   .sg\:w-1 {
-    width: calc(var(--sg-spacing) * 1);
+    width: var(--sg-spacing);
   }
   .sg\:w-1\/2 {
     width: calc(1 / 2 * 100%);
@@ -820,8 +827,11 @@
   .sg\:max-w-xl {
     max-width: var(--sg-container-xl);
   }
+  .sg\:max-w-xs {
+    max-width: var(--sg-container-xs);
+  }
   .sg\:min-w-0 {
-    min-width: calc(var(--sg-spacing) * 0);
+    min-width: 0;
   }
   .sg\:min-w-6 {
     min-width: calc(var(--sg-spacing) * 6);
@@ -951,7 +961,7 @@
     gap: calc(var(--sg-spacing) * 0.5);
   }
   .sg\:gap-1 {
-    gap: calc(var(--sg-spacing) * 1);
+    gap: var(--sg-spacing);
   }
   .sg\:gap-1\.5 {
     gap: calc(var(--sg-spacing) * 1.5);
@@ -1004,8 +1014,8 @@
   .sg\:space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--sg-spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--sg-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--sg-spacing) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--sg-spacing) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .sg\:space-y-1\.5 {
@@ -1270,7 +1280,7 @@
     object-fit: cover;
   }
   .sg\:p-1 {
-    padding: calc(var(--sg-spacing) * 1);
+    padding: var(--sg-spacing);
   }
   .sg\:p-2 {
     padding: calc(var(--sg-spacing) * 2);
@@ -1306,7 +1316,7 @@
     padding-block: calc(var(--sg-spacing) * 0.5);
   }
   .sg\:py-1 {
-    padding-block: calc(var(--sg-spacing) * 1);
+    padding-block: var(--sg-spacing);
   }
   .sg\:py-1\.5 {
     padding-block: calc(var(--sg-spacing) * 1.5);
@@ -1339,7 +1349,7 @@
     padding-block: calc(var(--sg-spacing) * 32);
   }
   .sg\:pt-0 {
-    padding-top: calc(var(--sg-spacing) * 0);
+    padding-top: 0;
   }
   .sg\:pt-2 {
     padding-top: calc(var(--sg-spacing) * 2);
@@ -1350,11 +1360,14 @@
   .sg\:pt-4 {
     padding-top: calc(var(--sg-spacing) * 4);
   }
+  .sg\:pt-6 {
+    padding-top: calc(var(--sg-spacing) * 6);
+  }
   .sg\:pt-8 {
     padding-top: calc(var(--sg-spacing) * 8);
   }
   .sg\:pr-1 {
-    padding-right: calc(var(--sg-spacing) * 1);
+    padding-right: var(--sg-spacing);
   }
   .sg\:pr-2 {
     padding-right: calc(var(--sg-spacing) * 2);
@@ -1561,6 +1574,9 @@
   .sg\:italic {
     font-style: italic;
   }
+  .sg\:underline {
+    text-decoration-line: underline;
+  }
   .sg\:decoration-primary\/40 {
     text-decoration-color: var(--sg-primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2050,7 +2066,7 @@
   }
   .sg\:last\:mt-0 {
     &:last-child {
-      margin-top: calc(var(--sg-spacing) * 0);
+      margin-top: 0;
     }
   }
   .sg\:hover\:border-primary {
@@ -2368,7 +2384,7 @@
   }
   .sg\:has-\[\>img\:first-child\]\:pt-0 {
     &:has(> img:first-child) {
-      padding-top: calc(var(--sg-spacing) * 0);
+      padding-top: 0;
     }
   }
   .sg\:has-\[\>svg\]\:grid-cols-\[auto_1fr\] {
@@ -2414,7 +2430,7 @@
   }
   .sg\:data-ending-style\:h-0 {
     &[data-ending-style] {
-      height: calc(var(--sg-spacing) * 0);
+      height: 0;
     }
   }
   .sg\:data-open\:bg-muted\/50 {
@@ -2448,7 +2464,7 @@
   }
   .sg\:data-starting-style\:h-0 {
     &[data-starting-style] {
-      height: calc(var(--sg-spacing) * 0);
+      height: 0;
     }
   }
   .sg\:data-\[align-trigger\=true\]\:animate-none {
@@ -2742,17 +2758,17 @@
   }
   .sg\:min-\[442px\]\:px-0 {
     @media (width >= 442px) {
-      padding-inline: calc(var(--sg-spacing) * 0);
+      padding-inline: 0;
     }
   }
   .sg\:min-\[800px\]\:px-0 {
     @media (width >= 800px) {
-      padding-inline: calc(var(--sg-spacing) * 0);
+      padding-inline: 0;
     }
   }
   .sg\:min-\[1056px\]\:px-0 {
     @media (width >= 1056px) {
-      padding-inline: calc(var(--sg-spacing) * 0);
+      padding-inline: 0;
     }
   }
   .sg\:sm\:max-w-sm {
@@ -3170,9 +3186,11 @@
   }
   html {
     color-scheme: dark light;
+    scrollbar-gutter: stable;
+    interpolate-size: allow-keywords;
   }
   body {
-    min-height: 100vh;
+    min-block-size: 100svh;
   }
   picture,
   svg,