singularity-components 0.1.195 → 0.1.197

package/dist/components/blocks/loading/loading-skeletons.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "../../primitives/skeleton/skeleton.js";
+function PostCardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "sg:rounded-lg sg:border sg:bg-card sg:overflow-hidden", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "sg:w-full sg:h-48" }),
+    /* @__PURE__ */ jsxs("div", { className: "sg:p-5 sg:space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-5 sg:w-16 sg:rounded-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-5 sg:w-20 sg:rounded-full" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-6 sg:w-3/4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-2/3" }),
+      /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:items-center sg:gap-2 sg:pt-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-4 sg:rounded-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-24" })
+      ] })
+    ] })
+  ] });
+}
+function PostListSkeleton({ count = 6 }) {
+  return /* @__PURE__ */ jsx("div", { className: "sg:grid sg:grid-cols-1 sm:sg:grid-cols-2 lg:sg:grid-cols-3 sg:gap-6", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(PostCardSkeleton, {}, i)) });
+}
+function PostListRowSkeleton({ count = 4 }) {
+  return /* @__PURE__ */ jsx("div", { className: "sg:flex sg:flex-col sg:gap-4", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "sg:flex sg:gap-4 sg:rounded-lg sg:border sg:bg-card sg:p-4",
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:w-24 sg:h-24 sg:rounded-md sg:shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "sg:flex-1 sg:space-y-2 sg:py-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-5 sg:w-3/4" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-full" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-3 sg:w-1/3" })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
+function CommentSkeleton({ count = 3 }) {
+  return /* @__PURE__ */ jsx("div", { className: "sg:space-y-4", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "sg:rounded-lg sg:bg-accent sg:p-4 sg:space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:items-center sg:gap-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-20" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-3 sg:w-16" })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-full" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-2/3" })
+  ] }, i)) });
+}
+function SinglePostSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "sg:w-full sg:h-64 md:sg:h-96" }),
+    /* @__PURE__ */ jsxs("div", { className: "sg:container sg:max-w-3xl sg:py-12 sg:space-y-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-32" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-3 sg:w-48" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-10 sg:w-3/4" }),
+      /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:gap-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-6 sg:w-20 sg:rounded-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-6 sg:w-24 sg:rounded-full" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-5 sg:w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-5 sg:w-5/6" }),
+      /* @__PURE__ */ jsxs("div", { className: "sg:space-y-3 sg:pt-8", children: [
+        Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-full" }, i)),
+        /* @__PURE__ */ jsx(Skeleton, { className: "sg:h-4 sg:w-2/3" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  CommentSkeleton,
+  PostCardSkeleton,
+  PostListRowSkeleton,
+  PostListSkeleton,
+  SinglePostSkeleton
+};
+//# sourceMappingURL=loading-skeletons.js.map

package/dist/components/blocks/loading/loading-skeletons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/loading/loading-skeletons.tsx"],"sourcesContent":["import { Skeleton } from \"../../primitives/skeleton/skeleton\";\r\n\r\nexport function PostCardSkeleton() {\r\n\treturn (\r\n\t\t<div className=\"sg:rounded-lg sg:border sg:bg-card sg:overflow-hidden\">\r\n\t\t\t<Skeleton className=\"sg:w-full sg:h-48\" />\r\n\t\t\t<div className=\"sg:p-5 sg:space-y-3\">\r\n\t\t\t\t<div className=\"sg:flex sg:gap-2\">\r\n\t\t\t\t\t<Skeleton className=\"sg:h-5 sg:w-16 sg:rounded-full\" />\r\n\t\t\t\t\t<Skeleton className=\"sg:h-5 sg:w-20 sg:rounded-full\" />\r\n\t\t\t\t</div>\r\n\t\t\t\t<Skeleton className=\"sg:h-6 sg:w-3/4\" />\r\n\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-full\" />\r\n\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-2/3\" />\r\n\t\t\t\t<div className=\"sg:flex sg:items-center sg:gap-2 sg:pt-2\">\r\n\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-4 sg:rounded-full\" />\r\n\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-24\" />\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport function PostListSkeleton({ count = 6 }: { count?: number }) {\r\n\treturn (\r\n\t\t<div className=\"sg:grid sg:grid-cols-1 sm:sg:grid-cols-2 lg:sg:grid-cols-3 sg:gap-6\">\r\n\t\t\t{Array.from({ length: count }).map((_, i) => (\r\n\t\t\t\t<PostCardSkeleton key={i} />\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport function PostListRowSkeleton({ count = 4 }: { count?: number }) {\r\n\treturn (\r\n\t\t<div className=\"sg:flex sg:flex-col sg:gap-4\">\r\n\t\t\t{Array.from({ length: count }).map((_, i) => (\r\n\t\t\t\t<div\r\n\t\t\t\t\tkey={i}\r\n\t\t\t\t\tclassName=\"sg:flex sg:gap-4 sg:rounded-lg sg:border sg:bg-card sg:p-4\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<Skeleton className=\"sg:w-24 sg:h-24 sg:rounded-md sg:shrink-0\" />\r\n\t\t\t\t\t<div className=\"sg:flex-1 sg:space-y-2 sg:py-1\">\r\n\t\t\t\t\t\t<Skeleton className=\"sg:h-5 sg:w-3/4\" />\r\n\t\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-full\" />\r\n\t\t\t\t\t\t<Skeleton className=\"sg:h-3 sg:w-1/3\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport function CommentSkeleton({ count = 3 }: { count?: number }) {\r\n\treturn (\r\n\t\t<div className=\"sg:space-y-4\">\r\n\t\t\t{Array.from({ length: count }).map((_, i) => (\r\n\t\t\t\t<div key={i} className=\"sg:rounded-lg sg:bg-accent sg:p-4 sg:space-y-2\">\r\n\t\t\t\t\t<div className=\"sg:flex sg:items-center sg:gap-2\">\r\n\t\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-20\" />\r\n\t\t\t\t\t\t<Skeleton className=\"sg:h-3 sg:w-16\" />\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-full\" />\r\n\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-2/3\" />\r\n\t\t\t\t</div>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport function SinglePostSkeleton() {\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<Skeleton className=\"sg:w-full sg:h-64 md:sg:h-96\" />\r\n\t\t\t<div className=\"sg:container sg:max-w-3xl sg:py-12 sg:space-y-4\">\r\n\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-32\" />\r\n\t\t\t\t<Skeleton className=\"sg:h-3 sg:w-48\" />\r\n\t\t\t\t<Skeleton className=\"sg:h-10 sg:w-3/4\" />\r\n\t\t\t\t<div className=\"sg:flex sg:gap-2\">\r\n\t\t\t\t\t<Skeleton className=\"sg:h-6 sg:w-20 sg:rounded-full\" />\r\n\t\t\t\t\t<Skeleton className=\"sg:h-6 sg:w-24 sg:rounded-full\" />\r\n\t\t\t\t</div>\r\n\t\t\t\t<Skeleton className=\"sg:h-5 sg:w-full\" />\r\n\t\t\t\t<Skeleton className=\"sg:h-5 sg:w-5/6\" />\r\n\t\t\t\t<div className=\"sg:space-y-3 sg:pt-8\">\r\n\t\t\t\t\t{Array.from({ length: 6 }).map((_, i) => (\r\n\t\t\t\t\t\t<Skeleton key={i} className=\"sg:h-4 sg:w-full\" />\r\n\t\t\t\t\t))}\r\n\t\t\t\t\t<Skeleton className=\"sg:h-4 sg:w-2/3\" />\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"AAKG,cAEC,YAFD;AALH,SAAS,gBAAgB;AAElB,SAAS,mBAAmB;AAClC,SACC,qBAAC,SAAI,WAAU,yDACd;AAAA,wBAAC,YAAS,WAAU,qBAAoB;AAAA,IACxC,qBAAC,SAAI,WAAU,uBACd;AAAA,2BAAC,SAAI,WAAU,oBACd;AAAA,4BAAC,YAAS,WAAU,kCAAiC;AAAA,QACrD,oBAAC,YAAS,WAAU,kCAAiC;AAAA,SACtD;AAAA,MACA,oBAAC,YAAS,WAAU,mBAAkB;AAAA,MACtC,oBAAC,YAAS,WAAU,oBAAmB;AAAA,MACvC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,MACtC,qBAAC,SAAI,WAAU,4CACd;AAAA,4BAAC,YAAS,WAAU,iCAAgC;AAAA,QACpD,oBAAC,YAAS,WAAU,kBAAiB;AAAA,SACtC;AAAA,OACD;AAAA,KACD;AAEF;AAEO,SAAS,iBAAiB,EAAE,QAAQ,EAAE,GAAuB;AACnE,SACC,oBAAC,SAAI,WAAU,uEACb,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACtC,oBAAC,sBAAsB,CAAG,CAC1B,GACF;AAEF;AAEO,SAAS,oBAAoB,EAAE,QAAQ,EAAE,GAAuB;AACtE,SACC,oBAAC,SAAI,WAAU,gCACb,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACtC;AAAA,IAAC;AAAA;AAAA,MAEA,WAAU;AAAA,MAEV;AAAA,4BAAC,YAAS,WAAU,6CAA4C;AAAA,QAChE,qBAAC,SAAI,WAAU,kCACd;AAAA,8BAAC,YAAS,WAAU,mBAAkB;AAAA,UACtC,oBAAC,YAAS,WAAU,oBAAmB;AAAA,UACvC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,WACvC;AAAA;AAAA;AAAA,IARK;AAAA,EASN,CACA,GACF;AAEF;AAEO,SAAS,gBAAgB,EAAE,QAAQ,EAAE,GAAuB;AAClE,SACC,oBAAC,SAAI,WAAU,gBACb,gBAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,MACtC,qBAAC,SAAY,WAAU,kDACtB;AAAA,yBAAC,SAAI,WAAU,oCACd;AAAA,0BAAC,YAAS,WAAU,kBAAiB;AAAA,MACrC,oBAAC,YAAS,WAAU,kBAAiB;AAAA,OACtC;AAAA,IACA,oBAAC,YAAS,WAAU,oBAAmB;AAAA,IACvC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,OAN7B,CAOV,CACA,GACF;AAEF;AAEO,SAAS,qBAAqB;AACpC,SACC,qBAAC,SACA;AAAA,wBAAC,YAAS,WAAU,gCAA+B;AAAA,IACnD,qBAAC,SAAI,WAAU,mDACd;AAAA,0BAAC,YAAS,WAAU,kBAAiB;AAAA,MACrC,oBAAC,YAAS,WAAU,kBAAiB;AAAA,MACrC,oBAAC,YAAS,WAAU,oBAAmB;AAAA,MACvC,qBAAC,SAAI,WAAU,oBACd;AAAA,4BAAC,YAAS,WAAU,kCAAiC;AAAA,QACrD,oBAAC,YAAS,WAAU,kCAAiC;AAAA,SACtD;AAAA,MACA,oBAAC,YAAS,WAAU,oBAAmB;AAAA,MACvC,oBAAC,YAAS,WAAU,mBAAkB;AAAA,MACtC,qBAAC,SAAI,WAAU,wBACb;AAAA,cAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAClC,oBAAC,YAAiB,WAAU,sBAAb,CAAgC,CAC/C;AAAA,QACD,oBAAC,YAAS,WAAU,mBAAkB;AAAA,SACvC;AAAA,OACD;AAAA,KACD;AAEF;","names":[]}

package/dist/components/blocks/login/login.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { useForm } from "@tanstack/react-form";
+import { useId } from "react";
+import { TanStackInputField } from "../../../lib/forms/tanstack-field.js";
 import { Button } from "../../primitives/buttons/button.js";
-import { Input } from "../../primitives/forms/input.js";
-import { Label } from "../../primitives/label/label.js";
+import { FieldGroup } from "../../primitives/forms/field.js";
+import { Form, FormActions } from "../../primitives/forms/form.js";
 import { Heading, Link, Text } from "../../primitives/index.js";
 import { cn } from "../../../utils/index.js";
 function Login({
@@ -25,56 +27,83 @@ function Login({
   autoFocus = false
 }) {
   const id = useId();
-  const usernameId = `${id}-username`;
-  const passwordId = `${id}-password`;
   const titleId = `${id}-title`;
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    await onSubmit?.({ username, password });
-  };
+  const form = useForm({
+    defaultValues: {
+      username: "",
+      password: ""
+    },
+    onSubmit: async ({ value }) => {
+      await onSubmit?.(value);
+    }
+  });
   return /* @__PURE__ */ jsxs("div", { className: cn("sg:w-full sg:max-w-sm sg:space-y-6", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "sg:text-center", children: [
       /* @__PURE__ */ jsx(Heading, { variant: titleVariant, id: titleId, children: title }),
       description && /* @__PURE__ */ jsx(Text, { className: "sg:mt-2", foreground: "muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "sg:space-y-4", "aria-labelledby": titleId, children: [
-      /* @__PURE__ */ jsxs("div", { className: "sg:space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: usernameId, children: usernameLabel }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: usernameId,
-            type: usernameType,
-            placeholder: usernamePlaceholder,
-            value: username,
-            onChange: (event) => setUsername(event.target.value),
-            required: true,
-            autoFocus,
-            disabled: loading,
-            autoComplete: "username"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "sg:space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: passwordId, children: passwordLabel }),
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            id: passwordId,
-            type: "password",
-            placeholder: passwordPlaceholder,
-            value: password,
-            onChange: (event) => setPassword(event.target.value),
-            required: true,
-            disabled: loading,
-            autoComplete: "current-password"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", className: "sg:w-full", disabled: loading, children: loading ? loadingLabel : submitLabel })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Form,
+      {
+        className: "sg:gap-4",
+        "aria-labelledby": titleId,
+        onSubmit: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          void form.handleSubmit();
+        },
+        children: [
+          /* @__PURE__ */ jsxs(FieldGroup, { children: [
+            /* @__PURE__ */ jsx(
+              TanStackInputField,
+              {
+                formApi: form,
+                name: "username",
+                label: usernameLabel,
+                type: usernameType,
+                placeholder: usernamePlaceholder,
+                autoFocus,
+                disabled: loading,
+                autoComplete: "username",
+                validators: {
+                  onChange: ({ value }) => value.trim() ? void 0 : `${usernameLabel} is required.`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TanStackInputField,
+              {
+                formApi: form,
+                name: "password",
+                label: passwordLabel,
+                type: "password",
+                placeholder: passwordPlaceholder,
+                disabled: loading,
+                autoComplete: "current-password",
+                validators: {
+                  onChange: ({ value }) => value.trim() ? void 0 : `${passwordLabel} is required.`
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(
+            form.Subscribe,
+            {
+              selector: (state) => [state.canSubmit, state.isSubmitting],
+              children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "submit",
+                  className: "sg:w-full",
+                  disabled: loading || !canSubmit || isSubmitting,
+                  children: loading || isSubmitting ? loadingLabel : submitLabel
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    ),
     signUpLabel && signUpHref && /* @__PURE__ */ jsxs(
       Text,
       {

package/dist/components/blocks/login/login.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/blocks/login/login.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useId, useState } from \"react\";\r\nimport { Button } from \"../../primitives/buttons/button\";\r\nimport { Input } from \"../../primitives/forms/input\";\r\nimport { Label } from \"../../primitives/label/label\";\r\nimport { Heading, Link, Text } from \"../../primitives/index\";\r\nimport { cn } from \"../../../utils/index\";\r\n\r\nexport type LoginCredentials = {\r\n  username: string;\r\n  password: string;\r\n};\r\n\r\nexport type LoginProps = {\r\n  /**\r\n   * Form heading text.\r\n   */\r\n  title?: string;\r\n  /**\r\n   * Supporting text shown below the heading.\r\n   */\r\n  description?: string;\r\n  /**\r\n   * Label for the username or email field.\r\n   */\r\n  usernameLabel?: string;\r\n  /**\r\n   * Input type for the identifier field.\r\n   */\r\n  usernameType?: \"text\" | \"email\";\r\n  /**\r\n   * Placeholder for the identifier field.\r\n   */\r\n  usernamePlaceholder?: string;\r\n  /**\r\n   * Label for the password field.\r\n   */\r\n  passwordLabel?: string;\r\n  /**\r\n   * Placeholder for the password field.\r\n   */\r\n  passwordPlaceholder?: string;\r\n  /**\r\n   * Submit button label when not loading.\r\n   */\r\n  submitLabel?: string;\r\n  /**\r\n   * Submit button label while loading.\r\n   */\r\n  loadingLabel?: string;\r\n  /**\r\n   * Disables the form and shows the loading label on submit.\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * Label for the optional sign-up link.\r\n   */\r\n  signUpLabel?: string;\r\n  /**\r\n   * Destination for the optional sign-up link.\r\n   */\r\n  signUpHref?: string;\r\n  /**\r\n   * Heading level for the title.\r\n   */\r\n  titleVariant?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n  /**\r\n   * Called when the form is submitted with valid credentials.\r\n   */\r\n  onSubmit?: (credentials: LoginCredentials) => void | Promise<void>;\r\n  /**\r\n   * Additional classes for the root wrapper.\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Focuses the identifier field on mount.\r\n   */\r\n  autoFocus?: boolean;\r\n};\r\n\r\n/**\r\n * Reusable login form with username/email and password fields.\r\n */\r\nexport function Login({\r\n  title = \"Log in\",\r\n  description,\r\n  usernameLabel = \"Username\",\r\n  usernameType = \"text\",\r\n  usernamePlaceholder = \"johndoe\",\r\n  passwordLabel = \"Password\",\r\n  passwordPlaceholder = \"••••••••\",\r\n  submitLabel = \"Log in\",\r\n  loadingLabel = \"Logging in...\",\r\n  loading = false,\r\n  signUpLabel,\r\n  signUpHref,\r\n  titleVariant = \"h1\",\r\n  onSubmit,\r\n  className,\r\n  autoFocus = false,\r\n}: LoginProps) {\r\n  const id = useId();\r\n  const usernameId = `${id}-username`;\r\n  const passwordId = `${id}-password`;\r\n  const titleId = `${id}-title`;\r\n  const [username, setUsername] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n\r\n  const handleSubmit = async (event: React.FormEvent) => {\r\n    event.preventDefault();\r\n    await onSubmit?.({ username, password });\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"sg:w-full sg:max-w-sm sg:space-y-6\", className)}>\r\n      <div className=\"sg:text-center\">\r\n        <Heading variant={titleVariant} id={titleId}>\r\n          {title}\r\n        </Heading>\r\n        {description && (\r\n          <Text className=\"sg:mt-2\" foreground=\"muted-foreground\">\r\n            {description}\r\n          </Text>\r\n        )}\r\n      </div>\r\n\r\n      <form onSubmit={handleSubmit} className=\"sg:space-y-4\" aria-labelledby={titleId}>\r\n        <div className=\"sg:space-y-2\">\r\n          <Label htmlFor={usernameId}>{usernameLabel}</Label>\r\n          <Input\r\n            id={usernameId}\r\n            type={usernameType}\r\n            placeholder={usernamePlaceholder}\r\n            value={username}\r\n            onChange={(event) => setUsername(event.target.value)}\r\n            required\r\n            autoFocus={autoFocus}\r\n            disabled={loading}\r\n            autoComplete=\"username\"\r\n          />\r\n        </div>\r\n        <div className=\"sg:space-y-2\">\r\n          <Label htmlFor={passwordId}>{passwordLabel}</Label>\r\n          <Input\r\n            id={passwordId}\r\n            type=\"password\"\r\n            placeholder={passwordPlaceholder}\r\n            value={password}\r\n            onChange={(event) => setPassword(event.target.value)}\r\n            required\r\n            disabled={loading}\r\n            autoComplete=\"current-password\"\r\n          />\r\n        </div>\r\n        <Button type=\"submit\" className=\"sg:w-full\" disabled={loading}>\r\n          {loading ? loadingLabel : submitLabel}\r\n        </Button>\r\n      </form>\r\n\r\n      {signUpLabel && signUpHref && (\r\n        <Text\r\n          size=\"sm\"\r\n          foreground=\"muted-foreground\"\r\n          className=\"sg:text-center\"\r\n        >\r\n          Don&apos;t have an account? <Link to={signUpHref}>{signUpLabel}</Link>\r\n        </Text>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAoHM,SACE,KADF;AAlHN,SAAS,OAAO,gBAAgB;AAChC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,SAAS,MAAM,YAAY;AACpC,SAAS,UAAU;AA6EZ,SAAS,MAAM;AAAA,EACpB,QAAQ;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAe;AACb,QAAM,KAAK,MAAM;AACjB,QAAM,aAAa,GAAG,EAAE;AACxB,QAAM,aAAa,GAAG,EAAE;AACxB,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAE3C,QAAM,eAAe,OAAO,UAA2B;AACrD,UAAM,eAAe;AACrB,UAAM,WAAW,EAAE,UAAU,SAAS,CAAC;AAAA,EACzC;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,sCAAsC,SAAS,GAChE;AAAA,yBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,WAAQ,SAAS,cAAc,IAAI,SACjC,iBACH;AAAA,MACC,eACC,oBAAC,QAAK,WAAU,WAAU,YAAW,oBAClC,uBACH;AAAA,OAEJ;AAAA,IAEA,qBAAC,UAAK,UAAU,cAAc,WAAU,gBAAe,mBAAiB,SACtE;AAAA,2BAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,SAAM,SAAS,YAAa,yBAAc;AAAA,QAC3C;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAM;AAAA,YACN,aAAa;AAAA,YACb,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA,YACnD,UAAQ;AAAA,YACR;AAAA,YACA,UAAU;AAAA,YACV,cAAa;AAAA;AAAA,QACf;AAAA,SACF;AAAA,MACA,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,SAAM,SAAS,YAAa,yBAAc;AAAA,QAC3C;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL,aAAa;AAAA,YACb,OAAO;AAAA,YACP,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA,YACnD,UAAQ;AAAA,YACR,UAAU;AAAA,YACV,cAAa;AAAA;AAAA,QACf;AAAA,SACF;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,WAAU,aAAY,UAAU,SACnD,oBAAU,eAAe,aAC5B;AAAA,OACF;AAAA,IAEC,eAAe,cACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAW;AAAA,QACX,WAAU;AAAA,QACX;AAAA;AAAA,UAC6B,oBAAC,QAAK,IAAI,YAAa,uBAAY;AAAA;AAAA;AAAA,IACjE;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/blocks/login/login.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useForm } from \"@tanstack/react-form\";\r\nimport { useId } from \"react\";\r\nimport { TanStackInputField } from \"../../../lib/forms/tanstack-field\";\r\nimport { Button } from \"../../primitives/buttons/button\";\r\nimport { FieldGroup } from \"../../primitives/forms/field\";\r\nimport { Form, FormActions } from \"../../primitives/forms/form\";\r\nimport { Heading, Link, Text } from \"../../primitives/index\";\r\nimport { cn } from \"../../../utils/index\";\r\n\r\nexport type LoginCredentials = {\r\n  username: string;\r\n  password: string;\r\n};\r\n\r\nexport type LoginProps = {\r\n  /**\r\n   * Form heading text.\r\n   */\r\n  title?: string;\r\n  /**\r\n   * Supporting text shown below the heading.\r\n   */\r\n  description?: string;\r\n  /**\r\n   * Label for the username or email field.\r\n   */\r\n  usernameLabel?: string;\r\n  /**\r\n   * Input type for the identifier field.\r\n   */\r\n  usernameType?: \"text\" | \"email\";\r\n  /**\r\n   * Placeholder for the identifier field.\r\n   */\r\n  usernamePlaceholder?: string;\r\n  /**\r\n   * Label for the password field.\r\n   */\r\n  passwordLabel?: string;\r\n  /**\r\n   * Placeholder for the password field.\r\n   */\r\n  passwordPlaceholder?: string;\r\n  /**\r\n   * Submit button label when not loading.\r\n   */\r\n  submitLabel?: string;\r\n  /**\r\n   * Submit button label while loading.\r\n   */\r\n  loadingLabel?: string;\r\n  /**\r\n   * Disables the form and shows the loading label on submit.\r\n   */\r\n  loading?: boolean;\r\n  /**\r\n   * Label for the optional sign-up link.\r\n   */\r\n  signUpLabel?: string;\r\n  /**\r\n   * Destination for the optional sign-up link.\r\n   */\r\n  signUpHref?: string;\r\n  /**\r\n   * Heading level for the title.\r\n   */\r\n  titleVariant?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n  /**\r\n   * Called when the form is submitted with valid credentials.\r\n   */\r\n  onSubmit?: (credentials: LoginCredentials) => void | Promise<void>;\r\n  /**\r\n   * Additional classes for the root wrapper.\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Focuses the identifier field on mount.\r\n   */\r\n  autoFocus?: boolean;\r\n};\r\n\r\n/**\r\n * Reusable login form with username/email and password fields.\r\n */\r\nexport function Login({\r\n  title = \"Log in\",\r\n  description,\r\n  usernameLabel = \"Username\",\r\n  usernameType = \"text\",\r\n  usernamePlaceholder = \"johndoe\",\r\n  passwordLabel = \"Password\",\r\n  passwordPlaceholder = \"••••••••\",\r\n  submitLabel = \"Log in\",\r\n  loadingLabel = \"Logging in...\",\r\n  loading = false,\r\n  signUpLabel,\r\n  signUpHref,\r\n  titleVariant = \"h1\",\r\n  onSubmit,\r\n  className,\r\n  autoFocus = false,\r\n}: LoginProps) {\r\n  const id = useId();\r\n  const titleId = `${id}-title`;\r\n\r\n  const form = useForm({\r\n    defaultValues: {\r\n      username: \"\",\r\n      password: \"\",\r\n    } satisfies LoginCredentials,\r\n    onSubmit: async ({ value }) => {\r\n      await onSubmit?.(value);\r\n    },\r\n  });\r\n\r\n  return (\r\n    <div className={cn(\"sg:w-full sg:max-w-sm sg:space-y-6\", className)}>\r\n      <div className=\"sg:text-center\">\r\n        <Heading variant={titleVariant} id={titleId}>\r\n          {title}\r\n        </Heading>\r\n        {description && (\r\n          <Text className=\"sg:mt-2\" foreground=\"muted-foreground\">\r\n            {description}\r\n          </Text>\r\n        )}\r\n      </div>\r\n\r\n      <Form\r\n        className=\"sg:gap-4\"\r\n        aria-labelledby={titleId}\r\n        onSubmit={(event) => {\r\n          event.preventDefault();\r\n          event.stopPropagation();\r\n          void form.handleSubmit();\r\n        }}\r\n      >\r\n        <FieldGroup>\r\n          <TanStackInputField\r\n            formApi={form}\r\n            name=\"username\"\r\n            label={usernameLabel}\r\n            type={usernameType}\r\n            placeholder={usernamePlaceholder}\r\n            autoFocus={autoFocus}\r\n            disabled={loading}\r\n            autoComplete=\"username\"\r\n            validators={{\r\n              onChange: ({ value }: { value: string }) =>\r\n                value.trim() ? undefined : `${usernameLabel} is required.`,\r\n            }}\r\n          />\r\n          <TanStackInputField\r\n            formApi={form}\r\n            name=\"password\"\r\n            label={passwordLabel}\r\n            type=\"password\"\r\n            placeholder={passwordPlaceholder}\r\n            disabled={loading}\r\n            autoComplete=\"current-password\"\r\n            validators={{\r\n              onChange: ({ value }: { value: string }) =>\r\n                value.trim() ? undefined : `${passwordLabel} is required.`,\r\n            }}\r\n          />\r\n        </FieldGroup>\r\n        <FormActions>\r\n          <form.Subscribe\r\n            selector={(state) => [state.canSubmit, state.isSubmitting]}\r\n          >\r\n            {([canSubmit, isSubmitting]) => (\r\n              <Button\r\n                type=\"submit\"\r\n                className=\"sg:w-full\"\r\n                disabled={loading || !canSubmit || isSubmitting}\r\n              >\r\n                {loading || isSubmitting ? loadingLabel : submitLabel}\r\n              </Button>\r\n            )}\r\n          </form.Subscribe>\r\n        </FormActions>\r\n      </Form>\r\n\r\n      {signUpLabel && signUpHref && (\r\n        <Text\r\n          size=\"sm\"\r\n          foreground=\"muted-foreground\"\r\n          className=\"sg:text-center\"\r\n        >\r\n          Don&apos;t have an account? <Link to={signUpHref}>{signUpLabel}</Link>\r\n        </Text>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAuHM,SACE,KADF;AArHN,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,MAAM,mBAAmB;AAClC,SAAS,SAAS,MAAM,YAAY;AACpC,SAAS,UAAU;AA6EZ,SAAS,MAAM;AAAA,EACpB,QAAQ;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAAe;AACb,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,GAAG,EAAE;AAErB,QAAM,OAAO,QAAQ;AAAA,IACnB,eAAe;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,IACZ;AAAA,IACA,UAAU,OAAO,EAAE,MAAM,MAAM;AAC7B,YAAM,WAAW,KAAK;AAAA,IACxB;AAAA,EACF,CAAC;AAED,SACE,qBAAC,SAAI,WAAW,GAAG,sCAAsC,SAAS,GAChE;AAAA,yBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,WAAQ,SAAS,cAAc,IAAI,SACjC,iBACH;AAAA,MACC,eACC,oBAAC,QAAK,WAAU,WAAU,YAAW,oBAClC,uBACH;AAAA,OAEJ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,mBAAiB;AAAA,QACjB,UAAU,CAAC,UAAU;AACnB,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AACtB,eAAK,KAAK,aAAa;AAAA,QACzB;AAAA,QAEA;AAAA,+BAAC,cACC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,MAAM;AAAA,gBACN,aAAa;AAAA,gBACb;AAAA,gBACA,UAAU;AAAA,gBACV,cAAa;AAAA,gBACb,YAAY;AAAA,kBACV,UAAU,CAAC,EAAE,MAAM,MACjB,MAAM,KAAK,IAAI,SAAY,GAAG,aAAa;AAAA,gBAC/C;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,MAAK;AAAA,gBACL,aAAa;AAAA,gBACb,UAAU;AAAA,gBACV,cAAa;AAAA,gBACb,YAAY;AAAA,kBACV,UAAU,CAAC,EAAE,MAAM,MACjB,MAAM,KAAK,IAAI,SAAY,GAAG,aAAa;AAAA,gBAC/C;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UACA,oBAAC,eACC;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,UAAU,CAAC,UAAU,CAAC,MAAM,WAAW,MAAM,YAAY;AAAA,cAExD,WAAC,CAAC,WAAW,YAAY,MACxB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,UAAU,WAAW,CAAC,aAAa;AAAA,kBAElC,qBAAW,eAAe,eAAe;AAAA;AAAA,cAC5C;AAAA;AAAA,UAEJ,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,eAAe,cACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAW;AAAA,QACX,WAAU;AAAA,QACX;AAAA;AAAA,UAC6B,oBAAC,QAAK,IAAI,YAAa,uBAAY;AAAA;AAAA;AAAA,IACjE;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/blocks/marketing/page-hero.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { icons } from 'lucide-react';
+
+type Props = {
+    icon?: keyof typeof icons;
+    title: string;
+    description?: string;
+    className?: string;
+};
+/** Centered hero strip with icon, title, and optional description. */
+declare function PageHero({ icon, title, description, className }: Props): React.JSX.Element;
+
+export { PageHero };

package/dist/components/blocks/marketing/page-hero.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, Heading, Text } from "../../primitives/index.js";
+import { cn } from "../../../utils/index.js";
+function PageHero({ icon, title, description, className }) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn(
+        "sg:bg-primary/5 sg:border-b sg:border-border",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "sg:container sg:py-16 md:sg:py-20 sg:max-w-3xl sg:mx-auto sg:text-center", children: [
+        icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon,
+            className: "sg:h-10 sg:w-10 sg:text-primary sg:mx-auto sg:mb-4"
+          }
+        ),
+        /* @__PURE__ */ jsx(Heading, { variant: "h1", className: "sg:mb-3", children: title }),
+        description && /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "lg",
+            foreground: "muted-foreground",
+            className: "sg:max-w-xl sg:mx-auto sg:leading-relaxed",
+            children: description
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  PageHero
+};
+//# sourceMappingURL=page-hero.js.map

package/dist/components/blocks/marketing/page-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/marketing/page-hero.tsx"],"sourcesContent":["import type { icons } from \"lucide-react\";\r\nimport { Icon, Heading, Text } from \"../../primitives/index\";\r\nimport { cn } from \"../../../utils/index\";\r\n\r\ntype Props = {\r\n\ticon?: keyof typeof icons;\r\n\ttitle: string;\r\n\tdescription?: string;\r\n\tclassName?: string;\r\n};\r\n\r\n/** Centered hero strip with icon, title, and optional description. */\r\nexport function PageHero({ icon, title, description, className }: Props) {\r\n\treturn (\r\n\t\t<section\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"sg:bg-primary/5 sg:border-b sg:border-border\",\r\n\t\t\t\tclassName,\r\n\t\t\t)}\r\n\t\t>\r\n\t\t\t<div className=\"sg:container sg:py-16 md:sg:py-20 sg:max-w-3xl sg:mx-auto sg:text-center\">\r\n\t\t\t\t{icon && (\r\n\t\t\t\t\t<Icon\r\n\t\t\t\t\t\ticon={icon}\r\n\t\t\t\t\t\tclassName=\"sg:h-10 sg:w-10 sg:text-primary sg:mx-auto sg:mb-4\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\t\t\t\t<Heading variant=\"h1\" className=\"sg:mb-3\">\r\n\t\t\t\t\t{title}\r\n\t\t\t\t</Heading>\r\n\t\t\t\t{description && (\r\n\t\t\t\t\t<Text\r\n\t\t\t\t\t\tsize=\"lg\"\r\n\t\t\t\t\t\tforeground=\"muted-foreground\"\r\n\t\t\t\t\t\tclassName=\"sg:max-w-xl sg:mx-auto sg:leading-relaxed\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{description}\r\n\t\t\t\t\t</Text>\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t</section>\r\n\t);\r\n}\r\n"],"mappings":"AAoBG,SAEE,KAFF;AAnBH,SAAS,MAAM,SAAS,YAAY;AACpC,SAAS,UAAU;AAUZ,SAAS,SAAS,EAAE,MAAM,OAAO,aAAa,UAAU,GAAU;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MAEA,+BAAC,SAAI,WAAU,4EACb;AAAA,gBACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,WAAU;AAAA;AAAA,QACX;AAAA,QAED,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAC9B,iBACF;AAAA,QACC,eACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,WAAU;AAAA,YAET;AAAA;AAAA,QACF;AAAA,SAEF;AAAA;AAAA,EACD;AAEF;","names":[]}

package/dist/components/blocks/marketing/stats-grid.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { icons } from 'lucide-react';
+
+type StatItem = {
+    label: string;
+    value: string;
+    icon?: keyof typeof icons;
+};
+type Props = {
+    items: StatItem[];
+    className?: string;
+};
+/** Grid of stat cards with icon, value, and label. */
+declare function StatsGrid({ items, className }: Props): React.JSX.Element;
+
+export { type StatItem, StatsGrid };

package/dist/components/blocks/marketing/stats-grid.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent } from "../cards/card.js";
+import { Icon, Heading, Text } from "../../primitives/index.js";
+import { cn } from "../../../utils/index.js";
+function StatsGrid({ items, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sg:grid sg:grid-cols-2 md:sg:grid-cols-4 sg:gap-4",
+        className
+      ),
+      children: items.map((stat) => /* @__PURE__ */ jsx(Card, { className: "sg:text-center", children: /* @__PURE__ */ jsxs(CardContent, { className: "sg:pt-6 sg:pb-4", children: [
+        stat.icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: stat.icon,
+            className: "sg:h-6 sg:w-6 sg:text-primary sg:mx-auto sg:mb-2"
+          }
+        ),
+        /* @__PURE__ */ jsx(Heading, { variant: "h3", className: "sg:text-3xl", children: stat.value }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", foreground: "muted-foreground", className: "sg:mt-1", children: stat.label })
+      ] }) }, stat.label))
+    }
+  );
+}
+export {
+  StatsGrid
+};
+//# sourceMappingURL=stats-grid.js.map

package/dist/components/blocks/marketing/stats-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/marketing/stats-grid.tsx"],"sourcesContent":["import type { icons } from \"lucide-react\";\r\nimport { Card, CardContent } from \"../cards/card\";\r\nimport { Icon, Heading, Text } from \"../../primitives/index\";\r\nimport { cn } from \"../../../utils/index\";\r\n\r\nexport type StatItem = {\r\n\tlabel: string;\r\n\tvalue: string;\r\n\ticon?: keyof typeof icons;\r\n};\r\n\r\ntype Props = {\r\n\titems: StatItem[];\r\n\tclassName?: string;\r\n};\r\n\r\n/** Grid of stat cards with icon, value, and label. */\r\nexport function StatsGrid({ items, className }: Props) {\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"sg:grid sg:grid-cols-2 md:sg:grid-cols-4 sg:gap-4\",\r\n\t\t\t\tclassName,\r\n\t\t\t)}\r\n\t\t>\r\n\t\t\t{items.map((stat) => (\r\n\t\t\t\t<Card key={stat.label} className=\"sg:text-center\">\r\n\t\t\t\t\t<CardContent className=\"sg:pt-6 sg:pb-4\">\r\n\t\t\t\t\t\t{stat.icon && (\r\n\t\t\t\t\t\t\t<Icon\r\n\t\t\t\t\t\t\t\ticon={stat.icon}\r\n\t\t\t\t\t\t\t\tclassName=\"sg:h-6 sg:w-6 sg:text-primary sg:mx-auto sg:mb-2\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t<Heading variant=\"h3\" className=\"sg:text-3xl\">\r\n\t\t\t\t\t\t\t{stat.value}\r\n\t\t\t\t\t\t</Heading>\r\n\t\t\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\" className=\"sg:mt-1\">\r\n\t\t\t\t\t\t\t{stat.label}\r\n\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t</CardContent>\r\n\t\t\t\t</Card>\r\n\t\t\t))}\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"AA2BK,SAEE,KAFF;AA1BL,SAAS,MAAM,mBAAmB;AAClC,SAAS,MAAM,SAAS,YAAY;AACpC,SAAS,UAAU;AAcZ,SAAS,UAAU,EAAE,OAAO,UAAU,GAAU;AACtD,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MAEC,gBAAM,IAAI,CAAC,SACX,oBAAC,QAAsB,WAAU,kBAChC,+BAAC,eAAY,WAAU,mBACrB;AAAA,aAAK,QACL;AAAA,UAAC;AAAA;AAAA,YACA,MAAM,KAAK;AAAA,YACX,WAAU;AAAA;AAAA,QACX;AAAA,QAED,oBAAC,WAAQ,SAAQ,MAAK,WAAU,eAC9B,eAAK,OACP;AAAA,QACA,oBAAC,QAAK,MAAK,MAAK,YAAW,oBAAmB,WAAU,WACtD,eAAK,OACP;AAAA,SACD,KAdU,KAAK,KAehB,CACA;AAAA;AAAA,EACF;AAEF;","names":[]}

package/dist/components/blocks/marketing/timeline.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type TimelineItem = {
+    year: string;
+    title: string;
+    description: string;
+};
+type Props = {
+    items: TimelineItem[];
+    title?: string;
+    description?: string;
+    className?: string;
+};
+/** Vertical timeline with year, title, and description entries. */
+declare function Timeline({ items, title, description, className, }: Props): React.JSX.Element;
+
+export { Timeline, type TimelineItem };

package/dist/components/blocks/marketing/timeline.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading, Text } from "../../primitives/index.js";
+function Timeline({
+  items,
+  title = "Our Journey",
+  description,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(Heading, { variant: "h2", className: "sg:mb-2", children: title }),
+    description && /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", className: "sg:mb-10", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "sg:relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "sg:absolute sg:left-4 md:sg:left-6 sg:top-0 sg:bottom-0 sg:w-px sg:bg-border",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "sg:space-y-10", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "sg:relative sg:pl-12 md:sg:pl-16", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:left-2.5 md:sg:left-4.5 sg:top-1 sg:h-3 sg:w-3 sg:rounded-full sg:bg-primary sg:ring-4 sg:ring-background",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "xs",
+            foreground: "muted-foreground",
+            className: "sg:font-mono sg:uppercase sg:tracking-wider",
+            children: item.year
+          }
+        ),
+        /* @__PURE__ */ jsx(Heading, { variant: "h4", className: "sg:mt-0.5", children: item.title }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", foreground: "muted-foreground", className: "sg:mt-1", children: item.description })
+      ] }, i)) })
+    ] })
+  ] });
+}
+export {
+  Timeline
+};
+//# sourceMappingURL=timeline.js.map

package/dist/components/blocks/marketing/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/marketing/timeline.tsx"],"sourcesContent":["import { Heading, Text } from \"../../primitives/index\";\r\n\r\nexport type TimelineItem = {\r\n\tyear: string;\r\n\ttitle: string;\r\n\tdescription: string;\r\n};\r\n\r\ntype Props = {\r\n\titems: TimelineItem[];\r\n\ttitle?: string;\r\n\tdescription?: string;\r\n\tclassName?: string;\r\n};\r\n\r\n/** Vertical timeline with year, title, and description entries. */\r\nexport function Timeline({\r\n\titems,\r\n\ttitle = \"Our Journey\",\r\n\tdescription,\r\n\tclassName,\r\n}: Props) {\r\n\treturn (\r\n\t\t<div className={className}>\r\n\t\t\t<Heading variant=\"h2\" className=\"sg:mb-2\">\r\n\t\t\t\t{title}\r\n\t\t\t</Heading>\r\n\t\t\t{description && (\r\n\t\t\t\t<Text foreground=\"muted-foreground\" className=\"sg:mb-10\">\r\n\t\t\t\t\t{description}\r\n\t\t\t\t</Text>\r\n\t\t\t)}\r\n\t\t\t<div className=\"sg:relative\">\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName=\"sg:absolute sg:left-4 md:sg:left-6 sg:top-0 sg:bottom-0 sg:w-px sg:bg-border\"\r\n\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t/>\r\n\t\t\t\t<div className=\"sg:space-y-10\">\r\n\t\t\t\t\t{items.map((item, i) => (\r\n\t\t\t\t\t\t<div key={i} className=\"sg:relative sg:pl-12 md:sg:pl-16\">\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclassName=\"sg:absolute sg:left-2.5 md:sg:left-4.5 sg:top-1 sg:h-3 sg:w-3 sg:rounded-full sg:bg-primary sg:ring-4 sg:ring-background\"\r\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t<Text\r\n\t\t\t\t\t\t\t\tsize=\"xs\"\r\n\t\t\t\t\t\t\t\tforeground=\"muted-foreground\"\r\n\t\t\t\t\t\t\t\tclassName=\"sg:font-mono sg:uppercase sg:tracking-wider\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{item.year}\r\n\t\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t\t\t<Heading variant=\"h4\" className=\"sg:mt-0.5\">\r\n\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t</Heading>\r\n\t\t\t\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\" className=\"sg:mt-1\">\r\n\t\t\t\t\t\t\t\t{item.description}\r\n\t\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"AAwBG,cAeG,YAfH;AAxBH,SAAS,SAAS,YAAY;AAgBvB,SAAS,SAAS;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACD,GAAU;AACT,SACC,qBAAC,SAAI,WACJ;AAAA,wBAAC,WAAQ,SAAQ,MAAK,WAAU,WAC9B,iBACF;AAAA,IACC,eACA,oBAAC,QAAK,YAAW,oBAAmB,WAAU,YAC5C,uBACF;AAAA,IAED,qBAAC,SAAI,WAAU,eACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,eAAY;AAAA;AAAA,MACb;AAAA,MACA,oBAAC,SAAI,WAAU,iBACb,gBAAM,IAAI,CAAC,MAAM,MACjB,qBAAC,SAAY,WAAU,oCACtB;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,eAAY;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,WAAU;AAAA,YAET,eAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,WAAQ,SAAQ,MAAK,WAAU,aAC9B,eAAK,OACP;AAAA,QACA,oBAAC,QAAK,MAAK,MAAK,YAAW,oBAAmB,WAAU,WACtD,eAAK,aACP;AAAA,WAjBS,CAkBV,CACA,GACF;AAAA,OACD;AAAA,KACD;AAEF;","names":[]}

package/dist/components/blocks/marketing/values-grid.d.ts

@@ -0,0 +1,16 @@
+import * as React$1 from 'react';
+
+type ValueItem = {
+    title: string;
+    description: string;
+};
+type Props = {
+    items: ValueItem[];
+    title?: string;
+    icon?: React.ReactNode;
+    className?: string;
+};
+/** Grid of value cards with title and description. */
+declare function ValuesGrid({ items, title, icon, className, }: Props): React$1.JSX.Element;
+
+export { type ValueItem, ValuesGrid };

package/dist/components/blocks/marketing/values-grid.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading, Text } from "../../primitives/index.js";
+import { cn } from "../../../utils/index.js";
+function ValuesGrid({
+  items,
+  title = "What We Value",
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("sg:text-center", className), children: [
+    icon,
+    /* @__PURE__ */ jsx(Heading, { variant: "h2", className: "sg:mb-4", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "sg:grid sg:gap-4 sm:sg:grid-cols-3 sg:text-left sg:mt-8", children: items.map((value) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "sg:p-4 sg:rounded-lg sg:bg-background sg:border sg:border-border",
+        children: [
+          /* @__PURE__ */ jsx(Heading, { variant: "h6", className: "sg:mb-1", children: value.title }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", foreground: "muted-foreground", children: value.description })
+        ]
+      },
+      value.title
+    )) })
+  ] });
+}
+export {
+  ValuesGrid
+};
+//# sourceMappingURL=values-grid.js.map

package/dist/components/blocks/marketing/values-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/blocks/marketing/values-grid.tsx"],"sourcesContent":["import { Heading, Text } from \"../../primitives/index\";\r\nimport { cn } from \"../../../utils/index\";\r\n\r\nexport type ValueItem = {\r\n\ttitle: string;\r\n\tdescription: string;\r\n};\r\n\r\ntype Props = {\r\n\titems: ValueItem[];\r\n\ttitle?: string;\r\n\ticon?: React.ReactNode;\r\n\tclassName?: string;\r\n};\r\n\r\n/** Grid of value cards with title and description. */\r\nexport function ValuesGrid({\r\n\titems,\r\n\ttitle = \"What We Value\",\r\n\ticon,\r\n\tclassName,\r\n}: Props) {\r\n\treturn (\r\n\t\t<div className={cn(\"sg:text-center\", className)}>\r\n\t\t\t{icon}\r\n\t\t\t<Heading variant=\"h2\" className=\"sg:mb-4\">\r\n\t\t\t\t{title}\r\n\t\t\t</Heading>\r\n\t\t\t<div className=\"sg:grid sg:gap-4 sm:sg:grid-cols-3 sg:text-left sg:mt-8\">\r\n\t\t\t\t{items.map((value) => (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={value.title}\r\n\t\t\t\t\t\tclassName=\"sg:p-4 sg:rounded-lg sg:bg-background sg:border sg:border-border\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<Heading variant=\"h6\" className=\"sg:mb-1\">\r\n\t\t\t\t\t\t\t{value.title}\r\n\t\t\t\t\t\t</Heading>\r\n\t\t\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\">\r\n\t\t\t\t\t\t\t{value.description}\r\n\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":"AAyBG,cAKE,YALF;AAzBH,SAAS,SAAS,YAAY;AAC9B,SAAS,UAAU;AAeZ,SAAS,WAAW;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACD,GAAU;AACT,SACC,qBAAC,SAAI,WAAW,GAAG,kBAAkB,SAAS,GAC5C;AAAA;AAAA,IACD,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAC9B,iBACF;AAAA,IACA,oBAAC,SAAI,WAAU,2DACb,gBAAM,IAAI,CAAC,UACX;AAAA,MAAC;AAAA;AAAA,QAEA,WAAU;AAAA,QAEV;AAAA,8BAAC,WAAQ,SAAQ,MAAK,WAAU,WAC9B,gBAAM,OACR;AAAA,UACA,oBAAC,QAAK,MAAK,MAAK,YAAW,oBACzB,gBAAM,aACR;AAAA;AAAA;AAAA,MARK,MAAM;AAAA,IASZ,CACA,GACF;AAAA,KACD;AAEF;","names":[]}

package/dist/components/blocks/post-list/post-list-with-filters.js

@@ -193,9 +193,9 @@ function PostListWithFilters({
     /* @__PURE__ */ jsx(AnimatePresence, { children: isFiltersOpen && /* @__PURE__ */ jsxs(
       motion.div,
       {
-        initial: { height: 0, opacity: 0 },
+        initial: { height: 0, opacity: 1 },
         animate: { height: "auto", opacity: 1 },
-        exit: { height: 0, opacity: 0 },
+        exit: { height: 0, opacity: 1 },
         className: "sg:overflow-hidden sg:border sg:rounded-xl sg:p-6 sg:bg-card sg:mb-8 sg:shadow-sm",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:justify-between sg:items-center sg:mb-6", children: [
@@ -312,9 +312,9 @@ function PostListWithFilters({
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.div,
             {
-              initial: { opacity: 0, y: 10 },
+              initial: { opacity: 1, y: 10 },
               animate: { opacity: 1, y: 0 },
-              exit: { opacity: 0, y: -10 },
+              exit: { opacity: 1, y: -10 },
               transition: { duration: 0.2 },
               className: viewMode === "grid" ? "sg:grid sg:grid-cols-[repeat(auto-fill,minmax(210px,1fr))] sg:gap-8" : "sg:flex sg:flex-col sg:gap-4",
               children: displayed.map(