singularity-components 0.1.140 → 0.1.151

package/dist/components/primitives/text/text-time.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/text/text-time.tsx"],"sourcesContent":["import { cn } from \"../../../utils\";\nimport {\n  type TextElementProps,\n  TextElement,\n  textElementVariantsProps,\n} from \"./internal/text-element\";\nimport type { OmitClassProperty } from \"@/lib/types\";\n\nexport const TextTime = ({\n  children,\n  size,\n  foreground,\n  fontweight,\n  className,\n  ...props\n}: OmitClassProperty<TextElementProps, \"as\">) => {\n  return (\n    <TextElement\n      as=\"time\"\n      className={cn(\n        textElementVariantsProps({\n          size,\n          foreground,\n          fontweight,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TextElement>\n  );\n};\n"],"mappings":"AAiBI;AAjBJ,SAAS,UAAU;AACnB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGA,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiD;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAW;AAAA,QACT,yBAAyB;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/text/text-time.tsx"],"sourcesContent":["import { cn } from \"../../../utils\";\nimport {\n  type TextElementProps,\n  TextElement,\n  textElementVariantsProps,\n} from \"./internal/text-element\";\nimport type { OmitClassProperty } from \"../../../lib/types\";\n\nexport const TextTime = ({\n  children,\n  size,\n  foreground,\n  fontweight,\n  className,\n  ...props\n}: OmitClassProperty<TextElementProps, \"as\">) => {\n  return (\n    <TextElement\n      as=\"time\"\n      className={cn(\n        textElementVariantsProps({\n          size,\n          foreground,\n          fontweight,\n        }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TextElement>\n  );\n};\n"],"mappings":"AAiBI;AAjBJ,SAAS,UAAU;AACnB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGA,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiD;AAC/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAW;AAAA,QACT,yBAAyB;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/primitives/ui-image.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useIsClient } from "../../lib";
 import {
   DefaultImage,
   useImage
@@ -10,11 +10,8 @@ function UiImage({
   showServerSideDefaultImageComponent,
   ...props
 }) {
-  const [isClient, setIsClient] = useState(false);
+  const isClient = useIsClient();
   const ImageComponent = useImage();
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
   if (!isClient) {
     if (showServerSideDefaultImageComponent) {
       return /* @__PURE__ */ jsx(

package/dist/components/primitives/ui-image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/primitives/ui-image.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\nimport {\r\n  DefaultImage,\r\n  useImage,\r\n  type BaseImageProps,\r\n} from \"../providers/ImageContext\";\r\nimport { Skeleton } from \"./skeleton/skeleton\";\r\n\r\ntype Props = {\r\n  showServerSideDefaultImageComponent?: boolean;\r\n} & BaseImageProps;\r\n\r\nexport function UiImage({\r\n  showServerSideDefaultImageComponent,\r\n  ...props\r\n}: Props) {\r\n  const [isClient, setIsClient] = useState(false);\r\n  const ImageComponent = useImage();\r\n\r\n  useEffect(() => {\r\n    setIsClient(true);\r\n  }, []);\r\n\r\n  if (!isClient) {\r\n    if (showServerSideDefaultImageComponent) {\r\n      return (\r\n        <DefaultImage\r\n          src={props.src}\r\n          alt={props.alt}\r\n          className={props.className}\r\n        />\r\n      );\r\n    } else {\r\n      return <Skeleton />;\r\n    }\r\n  }\r\n\r\n  return <ImageComponent {...props} />;\r\n}\r\n"],"mappings":";AA2BQ;AA1BR,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB;AAMlB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,iBAAiB,SAAS;AAEhC,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,UAAU;AACb,QAAI,qCAAqC;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,KAAK,MAAM;AAAA,UACX,WAAW,MAAM;AAAA;AAAA,MACnB;AAAA,IAEJ,OAAO;AACL,aAAO,oBAAC,YAAS;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,oBAAC,kBAAgB,GAAG,OAAO;AACpC;","names":[]}
+{"version":3,"sources":["../../../src/components/primitives/ui-image.tsx"],"sourcesContent":["\"use client\";\r\nimport { useIsClient } from \"../../lib\";\r\nimport {\r\n  DefaultImage,\r\n  useImage,\r\n  type BaseImageProps,\r\n} from \"../providers/ImageContext\";\r\nimport { Skeleton } from \"./skeleton/skeleton\";\r\n\r\ntype Props = {\r\n  showServerSideDefaultImageComponent?: boolean;\r\n} & BaseImageProps;\r\n\r\nexport function UiImage({\r\n  showServerSideDefaultImageComponent,\r\n  ...props\r\n}: Props) {\r\n  const isClient = useIsClient();\r\n\r\n  const ImageComponent = useImage();\r\n\r\n  if (!isClient) {\r\n    if (showServerSideDefaultImageComponent) {\r\n      return (\r\n        <DefaultImage\r\n          src={props.src}\r\n          alt={props.alt}\r\n          className={props.className}\r\n        />\r\n      );\r\n    } else {\r\n      return <Skeleton />;\r\n    }\r\n  }\r\n\r\n  return <ImageComponent {...props} />;\r\n}\r\n"],"mappings":";AAwBQ;AAvBR,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB;AAMlB,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,WAAW,YAAY;AAE7B,QAAM,iBAAiB,SAAS;AAEhC,MAAI,CAAC,UAAU;AACb,QAAI,qCAAqC;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,MAAM;AAAA,UACX,KAAK,MAAM;AAAA,UACX,WAAW,MAAM;AAAA;AAAA,MACnB;AAAA,IAEJ,OAAO;AACL,aAAO,oBAAC,YAAS;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,oBAAC,kBAAgB,GAAG,OAAO;AACpC;","names":[]}

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

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

package/dist/components/primitives/ui-link.js

@@ -1,20 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
-import {
-  DefaultLink,
-  useLink
-} from "../providers/LinkContext";
-const UiLink = (props) => {
-  const [isClient, setIsClient] = useState(false);
+import { useIsClient } from "../../lib";
+import { useLink, DefaultLink } from "../providers";
+const UiLink = ({ variant, textSize, buttonSize, ...props }) => {
+  const isClient = useIsClient();
   const LinkComponent = useLink();
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
   if (!isClient) {
     return /* @__PURE__ */ jsx(DefaultLink, { href: props.href, className: props.className, children: props.children });
   }
-  return /* @__PURE__ */ jsx(LinkComponent, { ...props, children: props.children });
+  return /* @__PURE__ */ jsx(LinkComponent, { className: props.className, ...props, children: props.children });
 };
 export {
   UiLink

package/dist/components/primitives/ui-link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/primitives/ui-link.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport {\r\n  DefaultLink,\r\n  useLink,\r\n  type BaseLinkProps,\r\n} from \"../providers/LinkContext\";\r\n\r\nexport const UiLink: React.FC<BaseLinkProps> = (props) => {\r\n  const [isClient, setIsClient] = useState(false);\r\n  const LinkComponent = useLink();\r\n\r\n  useEffect(() => {\r\n    setIsClient(true);\r\n  }, []);\r\n\r\n  if (!isClient) {\r\n    return (\r\n      <DefaultLink href={props.href} className={props.className}>\r\n        {props.children}\r\n      </DefaultLink>\r\n    );\r\n  }\r\n\r\n  return <LinkComponent {...props}>{props.children}</LinkComponent>;\r\n};\r\n"],"mappings":";AAkBM;AAjBN,OAAO,SAAS,WAAW,gBAAgB;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEA,MAAM,SAAkC,CAAC,UAAU;AACxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,gBAAgB,QAAQ;AAE9B,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,eAAY,MAAM,MAAM,MAAM,WAAW,MAAM,WAC7C,gBAAM,UACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAe,GAAG,OAAQ,gBAAM,UAAS;AACnD;","names":[]}
+{"version":3,"sources":["../../../src/components/primitives/ui-link.tsx"],"sourcesContent":["\"use client\";\r\nimport { useIsClient } from \"../../lib\";\r\nimport { type BaseLinkProps, useLink, DefaultLink } from \"../providers\";\r\n\r\ntype Props = BaseLinkProps;\r\n\r\nexport const UiLink = ({ variant, textSize, buttonSize, ...props }: Props) => {\r\n  const isClient = useIsClient();\r\n  const LinkComponent = useLink();\r\n\r\n  if (!isClient) {\r\n    return (\r\n      <DefaultLink href={props.href} className={props.className}>\r\n        {props.children}\r\n      </DefaultLink>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <LinkComponent className={props.className} {...props}>\r\n      {props.children}\r\n    </LinkComponent>\r\n  );\r\n};\r\n"],"mappings":";AAYM;AAXN,SAAS,mBAAmB;AAC5B,SAA6B,SAAS,mBAAmB;AAIlD,MAAM,SAAS,CAAC,EAAE,SAAS,UAAU,YAAY,GAAG,MAAM,MAAa;AAC5E,QAAM,WAAW,YAAY;AAC7B,QAAM,gBAAgB,QAAQ;AAE9B,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,eAAY,MAAM,MAAM,MAAM,WAAW,MAAM,WAC7C,gBAAM,UACT;AAAA,EAEJ;AAEA,SACE,oBAAC,iBAAc,WAAW,MAAM,WAAY,GAAG,OAC5C,gBAAM,UACT;AAEJ;","names":[]}

package/dist/components/sections/body/body.d.ts

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

package/dist/components/sections/body/body.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../utils";
+function Body({
+  children,
+  as: Component = "body",
+  className,
+  ...rest
+}) {
+  const childArray = React.Children.toArray(children);
+  const header = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Header
+  );
+  const content = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Content
+  );
+  const footer = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Footer
+  );
+  const gridRows = cn(
+    "sg:grid",
+    header && footer && "sg:grid-rows-[auto_1fr_auto]",
+    header && !footer && "sg:grid-rows-[auto_1fr]",
+    !header && footer && "sg:grid-rows-[1fr_auto]",
+    !header && !footer && "sg:grid-rows-[1fr]",
+    className
+  );
+  return /* @__PURE__ */ jsxs(Component, { className: gridRows, ...rest, children: [
+    header,
+    content,
+    footer
+  ] });
+}
+function Header({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, children });
+}
+function Content({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, children });
+}
+function Footer({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, children });
+}
+Body.Header = Header;
+Body.Content = Content;
+Body.Footer = Footer;
+export {
+  Body
+};
+//# sourceMappingURL=body.js.map

package/dist/components/sections/body/body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/sections/body/body.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../../utils\";\nimport type { PropsWithChildren } from \"react\";\n\ntype Prop = {\n  children?: React.ReactNode;\n  as?: \"body\" | \"div\";\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction Body({\n  children,\n  as: Component = \"body\",\n  className,\n  ...rest\n}: PropsWithChildren<Prop>) {\n  const childArray = React.Children.toArray(children);\n\n  const header = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Header,\n  );\n  const content = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Content,\n  );\n  const footer = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Footer,\n  );\n\n  const gridRows = cn(\n    \"sg:grid\",\n    header && footer && \"sg:grid-rows-[auto_1fr_auto]\",\n    header && !footer && \"sg:grid-rows-[auto_1fr]\",\n    !header && footer && \"sg:grid-rows-[1fr_auto]\",\n    !header && !footer && \"sg:grid-rows-[1fr]\",\n    className,\n  );\n\n  return (\n    <Component className={gridRows} {...rest}>\n      {header}\n      {content}\n      {footer}\n    </Component>\n  );\n}\n\ntype ChildProp = {\n  children?: React.ReactNode;\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction Header({ children, ...props }: ChildProp) {\n  return <div {...props}>{children}</div>;\n}\n\nfunction Content({ children, ...props }: ChildProp) {\n  return <div {...props}>{children}</div>;\n}\n\nfunction Footer({ children, ...props }: ChildProp) {\n  return <div {...props}>{children}</div>;\n}\n\nBody.Header = Header;\nBody.Content = Content;\nBody.Footer = Footer;\n\nexport { Body };\n"],"mappings":"AAqCI,SAaK,KAbL;AArCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAQnB,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,IAAI,YAAY;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAElD,QAAM,SAAS,WAAW;AAAA,IACxB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AACA,QAAM,UAAU,WAAW;AAAA,IACzB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AACA,QAAM,SAAS,WAAW;AAAA,IACxB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AAEA,QAAM,WAAW;AAAA,IACf;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,UAAU,CAAC,UAAU;AAAA,IACrB,CAAC,UAAU,UAAU;AAAA,IACrB,CAAC,UAAU,CAAC,UAAU;AAAA,IACtB;AAAA,EACF;AAEA,SACE,qBAAC,aAAU,WAAW,UAAW,GAAG,MACjC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,KACH;AAEJ;AAMA,SAAS,OAAO,EAAE,UAAU,GAAG,MAAM,GAAc;AACjD,SAAO,oBAAC,SAAK,GAAG,OAAQ,UAAS;AACnC;AAEA,SAAS,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAc;AAClD,SAAO,oBAAC,SAAK,GAAG,OAAQ,UAAS;AACnC;AAEA,SAAS,OAAO,EAAE,UAAU,GAAG,MAAM,GAAc;AACjD,SAAO,oBAAC,SAAK,GAAG,OAAQ,UAAS;AACnC;AAEA,KAAK,SAAS;AACd,KAAK,UAAU;AACf,KAAK,SAAS;","names":[]}

package/dist/components/sections/footer/footer.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type FooterLink = {
+    label: string;
+    to: string;
+};
+type Props = {
+    links?: FooterLink[];
+};
+declare function Footer({ links }: Props): react_jsx_runtime.JSX.Element;
+
+export { Footer as default };

package/dist/components/sections/footer/footer.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Layout,
+  Link,
+  Stack,
+  TextDiv,
+  TextHeading,
+  TextParagraph,
+  TextSpan
+} from "../../primitives";
+function Footer({ links }) {
+  return /* @__PURE__ */ jsx(Layout, { as: "footer", className: "sg:border-t sg:mt-auto sg:py-12", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "sg:grid sg:grid-cols-1 sg:md:grid-cols-3 sg:gap-8", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+        /* @__PURE__ */ jsxs(TextSpan, { size: "xl", fontweight: "bold", foreground: "primary", children: [
+          "filion",
+          /* @__PURE__ */ jsx(TextSpan, { size: "xl", fontweight: "bold", foreground: "secondary", children: "." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          TextParagraph,
+          {
+            foreground: "muted-foreground",
+            size: "sm",
+            className: "max-w-xs",
+            children: "A curated space for thoughtful writing about design, culture, and the art of living well."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h4", children: "Navigate" }),
+        links && /* @__PURE__ */ jsx(
+          "nav",
+          {
+            className: "sg:flex sg:flex-col sg:gap-2",
+            "aria-label": "Footer navigation",
+            children: links.map((link) => /* @__PURE__ */ jsx(Link, { href: link.to, variant: "footer", size: "sm", children: link.label }, link.to))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(TextHeading, { variant: "h4", children: "About" }),
+        /* @__PURE__ */ jsx(TextParagraph, { foreground: "muted-foreground", size: "sm", children: "Built with React, Tailwind CSS, and shadcn/ui. This blog uses a warm, editorial design system with terracotta and gold accents." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TextDiv,
+      {
+        className: "sg:mt-8 sg:pt-6 sg:border-t sg:text-center",
+        foreground: "muted-foreground",
+        size: "xs",
+        children: "filion."
+      }
+    )
+  ] }) });
+}
+export {
+  Footer as default
+};
+//# sourceMappingURL=footer.js.map

package/dist/components/sections/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/sections/footer/footer.tsx"],"sourcesContent":["import {\r\n  Layout,\r\n  Link,\r\n  Stack,\r\n  TextDiv,\r\n  TextHeading,\r\n  TextParagraph,\r\n  TextSpan,\r\n} from \"../../primitives\";\r\n\r\ntype FooterLink = {\r\n  label: string;\r\n  to: string;\r\n};\r\n\r\ntype Props = {\r\n  links?: FooterLink[];\r\n};\r\n\r\nexport default function Footer({ links }: Props) {\r\n  return (\r\n    <Layout as=\"footer\" className=\"sg:border-t sg:mt-auto sg:py-12\">\r\n      <Layout.Col1 hideDiv>\r\n        <div className=\"sg:grid sg:grid-cols-1 sg:md:grid-cols-3 sg:gap-8\">\r\n          {/* Brand */}\r\n          <Stack gap={3}>\r\n            <TextSpan size=\"xl\" fontweight=\"bold\" foreground=\"primary\">\r\n              filion\r\n              <TextSpan size=\"xl\" fontweight=\"bold\" foreground=\"secondary\">\r\n                .\r\n              </TextSpan>\r\n            </TextSpan>\r\n            <TextParagraph\r\n              foreground=\"muted-foreground\"\r\n              size=\"sm\"\r\n              className=\"max-w-xs\"\r\n            >\r\n              A curated space for thoughtful writing about design, culture, and\r\n              the art of living well.\r\n            </TextParagraph>\r\n          </Stack>\r\n\r\n          {/* Links */}\r\n          <div>\r\n            <TextHeading variant=\"h4\">Navigate</TextHeading>\r\n\r\n            {links && (\r\n              <nav\r\n                className=\"sg:flex sg:flex-col sg:gap-2\"\r\n                aria-label=\"Footer navigation\"\r\n              >\r\n                {links.map((link) => (\r\n                  <Link key={link.to} href={link.to} variant=\"footer\" size=\"sm\">\r\n                    {link.label}\r\n                  </Link>\r\n                ))}\r\n              </nav>\r\n            )}\r\n          </div>\r\n\r\n          {/* Info */}\r\n          <div>\r\n            <TextHeading variant=\"h4\">About</TextHeading>\r\n            <TextParagraph foreground=\"muted-foreground\" size=\"sm\">\r\n              Built with React, Tailwind CSS, and shadcn/ui. This blog uses a\r\n              warm, editorial design system with terracotta and gold accents.\r\n            </TextParagraph>\r\n          </div>\r\n        </div>\r\n        <TextDiv\r\n          className=\"sg:mt-8 sg:pt-6 sg:border-t sg:text-center\"\r\n          foreground=\"muted-foreground\"\r\n          size=\"xs\"\r\n        >\r\n          filion.\r\n        </TextDiv>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n"],"mappings":"AA0BY,SAEE,KAFF;AA1BZ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWQ,SAAR,OAAwB,EAAE,MAAM,GAAU;AAC/C,SACE,oBAAC,UAAO,IAAG,UAAS,WAAU,mCAC5B,+BAAC,OAAO,MAAP,EAAY,SAAO,MAClB;AAAA,yBAAC,SAAI,WAAU,qDAEb;AAAA,2BAAC,SAAM,KAAK,GACV;AAAA,6BAAC,YAAS,MAAK,MAAK,YAAW,QAAO,YAAW,WAAU;AAAA;AAAA,UAEzD,oBAAC,YAAS,MAAK,MAAK,YAAW,QAAO,YAAW,aAAY,eAE7D;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,MAAK;AAAA,YACL,WAAU;AAAA,YACX;AAAA;AAAA,QAGD;AAAA,SACF;AAAA,MAGA,qBAAC,SACC;AAAA,4BAAC,eAAY,SAAQ,MAAK,sBAAQ;AAAA,QAEjC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAW;AAAA,YAEV,gBAAM,IAAI,CAAC,SACV,oBAAC,QAAmB,MAAM,KAAK,IAAI,SAAQ,UAAS,MAAK,MACtD,eAAK,SADG,KAAK,EAEhB,CACD;AAAA;AAAA,QACH;AAAA,SAEJ;AAAA,MAGA,qBAAC,SACC;AAAA,4BAAC,eAAY,SAAQ,MAAK,mBAAK;AAAA,QAC/B,oBAAC,iBAAc,YAAW,oBAAmB,MAAK,MAAK,6IAGvD;AAAA,SACF;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,MAAK;AAAA,QACN;AAAA;AAAA,IAED;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/sections/hero/hero.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {};
+declare function Hero({}: Props): react_jsx_runtime.JSX.Element;
+
+export { Hero as default };

package/dist/components/sections/hero/hero.js

@@ -0,0 +1,271 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Layout,
+  LinkButton,
+  Stack,
+  TextHeading,
+  TextParagraph,
+  TextSpan
+} from "../../primitives";
+import { useCallback, useMemo, useRef, useState } from "react";
+function generateSparkles(count) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    left: Math.random() * 100,
+    top: Math.random() * 100,
+    size: Math.random() * 4 + 2,
+    delay: Math.random() * 5,
+    duration: Math.random() * 2 + 1.5
+  }));
+}
+function Hero({}) {
+  const heroRef = useRef(null);
+  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
+  const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });
+  const sparkles = useMemo(() => generateSparkles(40), []);
+  const [bursts, setBursts] = useState([]);
+  const burstIdRef = useRef(0);
+  const handleMouseMove = useCallback((e) => {
+    const rect = heroRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setMouse({
+      x: (e.clientX - rect.left) / rect.width,
+      y: (e.clientY - rect.top) / rect.height
+    });
+    setMousePixel({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+  }, []);
+  const handleClick = useCallback((e) => {
+    const rect = heroRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    const count = 18;
+    const newBursts = Array.from(
+      { length: count },
+      (_, i) => ({
+        id: burstIdRef.current++,
+        x: cx,
+        y: cy,
+        angle: 360 / count * i + Math.random() * 20 - 10,
+        speed: Math.random() * 120 + 60,
+        hue: Math.random() * 360,
+        size: Math.random() * 5 + 3
+      })
+    );
+    setBursts((prev) => [...prev, ...newBursts]);
+    setTimeout(() => {
+      setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));
+    }, 800);
+  }, []);
+  return /* @__PURE__ */ jsx(Layout, { type: "full", children: /* @__PURE__ */ jsx(Layout.Col1, { hideDiv: true, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: heroRef,
+      onMouseMove: handleMouseMove,
+      onClick: handleClick,
+      className: "sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  style: {
+                    background: "hsl(330, 90%, 55%)",
+                    transform: `translate(${mouse.x * 70 - 35}%, ${mouse.y * 60 - 50}%)`,
+                    top: "-10%",
+                    right: "-5%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  style: {
+                    background: "hsl(220, 95%, 55%)",
+                    transform: `translate(${mouse.x * -60 + 30}%, ${mouse.y * 50 - 25}%)`,
+                    top: "20%",
+                    left: "-8%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  style: {
+                    background: "hsl(25, 95%, 55%)",
+                    transform: `translate(${mouse.x * 55 - 28}%, ${mouse.y * -55 + 28}%)`,
+                    bottom: "-5%",
+                    right: "15%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  style: {
+                    background: "hsl(145, 80%, 45%)",
+                    transform: `translate(${mouse.x * 80 - 40}%, ${mouse.y * 80 - 40}%)`,
+                    top: "5%",
+                    left: "20%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  style: {
+                    background: "hsl(270, 85%, 55%)",
+                    transform: `translate(${mouse.x * -45 + 22}%, ${mouse.y * 65 - 32}%)`,
+                    bottom: "10%",
+                    left: "30%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  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",
+                  style: {
+                    background: "hsl(50, 95%, 55%)",
+                    transform: `translate(${mouse.x * 90 - 45}%, ${mouse.y * -70 + 35}%)`,
+                    top: "40%",
+                    right: "5%"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none",
+            "aria-hidden": "true",
+            children: sparkles.map((s) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "sg:absolute sg:rounded-full",
+                style: {
+                  left: `${s.left}%`,
+                  top: `${s.top}%`,
+                  width: s.size,
+                  height: s.size,
+                  background: `hsl(${s.id * 47 % 360}, 90%, 70%)`,
+                  boxShadow: `0 0 ${s.size * 2}px hsl(${s.id * 47 % 360}, 90%, 70%)`,
+                  animation: `sparkle ${s.duration}s ${s.delay}s ease-in-out infinite`,
+                  transform: `translate(${(mouse.x - 0.5) * s.size * 8}px, ${(mouse.y - 0.5) * s.size * 8}px)`,
+                  transition: "transform 0.3s ease-out"
+                }
+              },
+              s.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:pointer-events-none",
+            style: {
+              left: mousePixel.x - 150,
+              top: mousePixel.y - 150,
+              width: 300,
+              height: 300,
+              background: "radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 60%)",
+              transition: "left 0.1s ease-out, top 0.1s ease-out"
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:pointer-events-none sg:overflow-hidden",
+            "aria-hidden": "true",
+            children: bursts.map((b) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "sg:absolute sg:rounded-full",
+                style: {
+                  left: b.x,
+                  top: b.y,
+                  width: b.size,
+                  height: b.size,
+                  background: `hsl(${b.hue}, 90%, 65%)`,
+                  boxShadow: `0 0 ${b.size * 3}px hsl(${b.hue}, 90%, 65%)`,
+                  animation: `burst 0.7s ease-out forwards`,
+                  "--burst-x": `${Math.cos(b.angle * Math.PI / 180) * b.speed}px`,
+                  "--burst-y": `${Math.sin(b.angle * Math.PI / 180) * b.speed}px`
+                }
+              },
+              b.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:opacity-[0.02] sg:dark:opacity-[0.04] sg:pointer-events-none",
+            style: {
+              backgroundImage: `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")`
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-20 sg:md:py-32", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
+          /* @__PURE__ */ jsxs(TextHeading, { variant: "h1", children: [
+            "Stories worth",
+            " ",
+            /* @__PURE__ */ jsx(TextSpan, { size: "4xl", foreground: "primary", children: "savoring" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            TextParagraph,
+            {
+              size: "lg",
+              foreground: "muted-foreground",
+              className: "sg:mt-6 sg:max-w-xl",
+              children: "A curated journal exploring design, culture, and the quiet art of living with intention."
+            }
+          ),
+          /* @__PURE__ */ jsxs(Stack, { gap: 3, direction: "row", className: "sg:mt-8", children: [
+            /* @__PURE__ */ jsx(LinkButton, { buttonSize: "lg", href: "#", className: "sg:z-1", children: "Browse all posts" }),
+            /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                variant: "secondary",
+                buttonSize: "lg",
+                href: "#",
+                className: "sg:z-1",
+                children: "Our design system"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            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",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  Hero as default
+};
+//# sourceMappingURL=hero.js.map

package/dist/components/sections/hero/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/sections/hero/hero.tsx"],"sourcesContent":["\"use client\";\r\nimport {\r\n  Layout,\r\n  LinkButton,\r\n  Stack,\r\n  TextHeading,\r\n  TextParagraph,\r\n  TextSpan,\r\n} from \"../../primitives\";\r\nimport { useCallback, useMemo, useRef, useState } from \"react\";\r\n\r\nfunction generateSparkles(count: number) {\r\n  return Array.from({ length: count }, (_, i) => ({\r\n    id: i,\r\n    left: Math.random() * 100,\r\n    top: Math.random() * 100,\r\n    size: Math.random() * 4 + 2,\r\n    delay: Math.random() * 5,\r\n    duration: Math.random() * 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\ntype Props = {};\r\n\r\nexport default function Hero({}: Props) {\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=\"full\">\r\n      <Layout.Col1 hideDiv>\r\n        <section\r\n          ref={heroRef}\r\n          onMouseMove={handleMouseMove}\r\n          onClick={handleClick}\r\n          className=\"sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair\"\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              <TextHeading variant=\"h1\">\r\n                Stories worth{\" \"}\r\n                <TextSpan size=\"4xl\" foreground=\"primary\">\r\n                  savoring\r\n                </TextSpan>\r\n              </TextHeading>\r\n\r\n              <TextParagraph\r\n                size=\"lg\"\r\n                foreground=\"muted-foreground\"\r\n                className=\"sg:mt-6 sg:max-w-xl\"\r\n              >\r\n                A curated journal exploring design, culture, and the quiet art\r\n                of living with intention.\r\n              </TextParagraph>\r\n\r\n              <Stack gap={3} direction=\"row\" className=\"sg:mt-8\">\r\n                <LinkButton buttonSize=\"lg\" href=\"#\" className=\"sg:z-1\">\r\n                  Browse all posts\r\n                </LinkButton>\r\n                <LinkButton\r\n                  variant=\"secondary\"\r\n                  buttonSize=\"lg\"\r\n                  href=\"#\"\r\n                  className=\"sg:z-1\"\r\n                >\r\n                  Our design system\r\n                </LinkButton>\r\n              </Stack>\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/sections/index.d.ts

@@ -0,0 +1,3 @@
+export { Body } from './body/body.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/components/sections/index.js

@@ -0,0 +1,4 @@
+export * from "./body/body";
+export * from "./footer/footer";
+export * from "./hero/hero";
+//# sourceMappingURL=index.js.map

package/dist/components/sections/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sections/index.ts"],"sourcesContent":["export * from \"./body/body\";\r\nexport * from \"./footer/footer\";\r\nexport * from \"./hero/hero\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/templates/blogpost/blogpost.d.ts

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