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

singularity-components 0.1.195 → 0.1.197

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

Files changed (166) hide show

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

@@ -1,26 +1,31 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useForm } from "@tanstack/react-form";
+import {
+  TanStackCheckboxField,
+  TanStackInputField,
+  TanStackSelectField,
+  TanStackTextareaField
+} from "../../../lib/forms/tanstack-field.js";
 import {
   Button,
-  Checkbox,
-  Input,
   Layout,
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectTrigger,
-  SelectValue,
-  Textarea
+  SelectValue
 } from "../../primitives/index.js";
 import {
   Field,
   FieldDescription,
   FieldGroup,
-  FieldLabel,
   FieldLegend,
   FieldSeparator,
   FieldSet
 } from "../../primitives/forms/field.js";
+import { Form as FormLayout, FormActions } from "../../primitives/forms/form.js";
 const months = [
   { label: "MM", value: null },
   { label: "01", value: "01" },
@@ -45,97 +50,138 @@ const years = [
   { label: "2028", value: "2028" },
   { label: "2029", value: "2029" }
 ];
-function Form() {
-  return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Layout.Col1, { children: /* @__PURE__ */ jsx("form", { children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
-    /* @__PURE__ */ jsxs(FieldSet, { children: [
-      /* @__PURE__ */ jsx(FieldLegend, { children: "Payment Method" }),
-      /* @__PURE__ */ jsx(FieldDescription, { children: "All transactions are secure and encrypted" }),
-      /* @__PURE__ */ jsxs(FieldGroup, { children: [
-        /* @__PURE__ */ jsxs(Field, { children: [
-          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-card-name-43j", children: "Name on Card" }),
-          /* @__PURE__ */ jsx(
-            Input,
+const defaultValues = {
+  cardName: "",
+  cardNumber: "",
+  expMonth: null,
+  expYear: null,
+  cvv: "",
+  sameAsShipping: true,
+  comments: ""
+};
+function CheckoutForm() {
+  const form = useForm({
+    defaultValues,
+    onSubmit: async () => {
+    }
+  });
+  return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Layout.Col1, { children: /* @__PURE__ */ jsx(
+    FormLayout,
+    {
+      onSubmit: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        void form.handleSubmit();
+      },
+      children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+        /* @__PURE__ */ jsxs(FieldSet, { children: [
+          /* @__PURE__ */ jsx(FieldLegend, { children: "Payment Method" }),
+          /* @__PURE__ */ jsx(FieldDescription, { children: "All transactions are secure and encrypted" }),
+          /* @__PURE__ */ jsxs(FieldGroup, { className: "sg:gap-4", children: [
+            /* @__PURE__ */ jsx(
+              TanStackInputField,
+              {
+                formApi: form,
+                name: "cardName",
+                label: "Name on Card",
+                placeholder: "Evil Rabbit",
+                validators: {
+                  onChange: ({ value }) => value.trim() ? void 0 : "Name on card is required"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TanStackInputField,
+              {
+                formApi: form,
+                name: "cardNumber",
+                label: "Card Number",
+                placeholder: "1234 5678 9012 3456",
+                description: "Enter your 16-digit card number",
+                validators: {
+                  onChange: ({ value }) => value.trim() ? void 0 : "Card number is required"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "sg:grid sg:grid-cols-3 sg:gap-4", children: [
+              /* @__PURE__ */ jsx(
+                TanStackSelectField,
+                {
+                  formApi: form,
+                  name: "expMonth",
+                  label: "Month",
+                  children: (selectProps) => /* @__PURE__ */ jsxs(Select, { ...selectProps, children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { id: selectProps.id, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: months.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.label)) }) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(TanStackSelectField, { formApi: form, name: "expYear", label: "Year", children: (selectProps) => /* @__PURE__ */ jsxs(Select, { ...selectProps, children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { id: selectProps.id, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: years.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.label)) }) })
+              ] }) }),
+              /* @__PURE__ */ jsx(
+                TanStackInputField,
+                {
+                  formApi: form,
+                  name: "cvv",
+                  label: "CVV",
+                  placeholder: "123",
+                  validators: {
+                    onChange: ({ value }) => value.trim() ? void 0 : "CVV is required"
+                  }
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(FieldSeparator, {}),
+        /* @__PURE__ */ jsxs(FieldSet, { children: [
+          /* @__PURE__ */ jsx(FieldLegend, { children: "Billing Address" }),
+          /* @__PURE__ */ jsx(FieldDescription, { children: "The billing address associated with your payment method" }),
+          /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsx(
+            TanStackCheckboxField,
             {
-              id: "checkout-7j9-card-name-43j",
-              placeholder: "Evil Rabbit",
-              required: true
+              formApi: form,
+              name: "sameAsShipping",
+              label: "Same as shipping address",
+              labelClassName: "font-normal"
             }
-          )
+          ) })
         ] }),
-        /* @__PURE__ */ jsxs(Field, { children: [
-          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-card-number-uw1", children: "Card Number" }),
+        /* @__PURE__ */ jsx(FieldSet, { children: /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsx(
+          TanStackTextareaField,
+          {
+            formApi: form,
+            name: "comments",
+            label: "Comments",
+            placeholder: "Add any additional comments",
+            className: "resize-none"
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(Field, { orientation: "horizontal", children: /* @__PURE__ */ jsxs(FormActions, { children: [
           /* @__PURE__ */ jsx(
-            Input,
+            form.Subscribe,
             {
-              id: "checkout-7j9-card-number-uw1",
-              placeholder: "1234 5678 9012 3456",
-              required: true
+              selector: (state) => [state.canSubmit, state.isSubmitting],
+              children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !canSubmit || isSubmitting, children: "Submit" })
             }
           ),
-          /* @__PURE__ */ jsx(FieldDescription, { children: "Enter your 16-digit card number" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-          /* @__PURE__ */ jsxs(Field, { children: [
-            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-exp-month-ts6", children: "Month" }),
-            /* @__PURE__ */ jsxs(Select, { items: months, children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-exp-month-ts6", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: months.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { children: [
-            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-exp-year-f59", children: "Year" }),
-            /* @__PURE__ */ jsxs(Select, { items: years, children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-7j9-exp-year-f59", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: years.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(Field, { children: [
-            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-cvv", children: "CVV" }),
-            /* @__PURE__ */ jsx(Input, { id: "checkout-7j9-cvv", placeholder: "123", required: true })
-          ] })
-        ] })
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              type: "button",
+              onClick: () => form.reset(),
+              children: "Cancel"
+            }
+          )
+        ] }) })
       ] })
-    ] }),
-    /* @__PURE__ */ jsx(FieldSeparator, {}),
-    /* @__PURE__ */ jsxs(FieldSet, { children: [
-      /* @__PURE__ */ jsx(FieldLegend, { children: "Billing Address" }),
-      /* @__PURE__ */ jsx(FieldDescription, { children: "The billing address associated with your payment method" }),
-      /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
-        /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            id: "checkout-7j9-same-as-shipping-wgm",
-            defaultChecked: true
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FieldLabel,
-          {
-            htmlFor: "checkout-7j9-same-as-shipping-wgm",
-            className: "font-normal",
-            children: "Same as shipping address"
-          }
-        )
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsx(FieldSet, { children: /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsxs(Field, { children: [
-      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-optional-comments", children: "Comments" }),
-      /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          id: "checkout-7j9-optional-comments",
-          placeholder: "Add any additional comments",
-          className: "resize-none"
-        }
-      )
-    ] }) }) }),
-    /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
-      /* @__PURE__ */ jsx(Button, { type: "submit", children: "Submit" }),
-      /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", children: "Cancel" })
-    ] })
-  ] }) }) }) });
+    }
+  ) }) });
 }
 export {
-  Form as default
+  CheckoutForm as default
 };
 //# sourceMappingURL=form.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/templates/form/form.tsx"],"sourcesContent":["import {\r\n Button,\r\n Checkbox,\r\n Input,\r\n Layout,\r\n Select,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n Textarea,\r\n} from \"../../primitives/index\";\r\nimport {\r\n Field,\r\n FieldDescription,\r\n FieldGroup,\r\n FieldLabel,\r\n FieldLegend,\r\n FieldSeparator,\r\n FieldSet,\r\n} from \"../../primitives/forms/field\";\r\n\r\nconst months = [\r\n { label: \"MM\", value: null },\r\n { label: \"01\", value: \"01\" },\r\n { label: \"02\", value: \"02\" },\r\n { label: \"03\", value: \"03\" },\r\n { label: \"04\", value: \"04\" },\r\n { label: \"05\", value: \"05\" },\r\n { label: \"06\", value: \"06\" },\r\n { label: \"07\", value: \"07\" },\r\n { label: \"08\", value: \"08\" },\r\n { label: \"09\", value: \"09\" },\r\n { label: \"10\", value: \"10\" },\r\n { label: \"11\", value: \"11\" },\r\n { label: \"12\", value: \"12\" },\r\n];\r\n\r\nconst years = [\r\n { label: \"YYYY\", value: null },\r\n { label: \"2024\", value: \"2024\" },\r\n { label: \"2025\", value: \"2025\" },\r\n { label: \"2026\", value: \"2026\" },\r\n { label: \"2027\", value: \"2027\" },\r\n { label: \"2028\", value: \"2028\" },\r\n { label: \"2029\", value: \"2029\" },\r\n];\r\n\r\nexport default function Form() {\r\n return (\r\n <Layout>\r\n <Layout.Col1>\r\n <form>\r\n <FieldGroup>\r\n <FieldSet>\r\n <FieldLegend>Payment Method</FieldLegend>\r\n <FieldDescription>\r\n All transactions are secure and encrypted\r\n </FieldDescription>\r\n <FieldGroup>\r\n <Field>\r\n <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\r\n Name on Card\r\n </FieldLabel>\r\n <Input\r\n id=\"checkout-7j9-card-name-43j\"\r\n placeholder=\"Evil Rabbit\"\r\n required\r\n />\r\n </Field>\r\n <Field>\r\n <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\r\n Card Number\r\n </FieldLabel>\r\n <Input\r\n id=\"checkout-7j9-card-number-uw1\"\r\n placeholder=\"1234 5678 9012 3456\"\r\n required\r\n />\r\n <FieldDescription>\r\n Enter your 16-digit card number\r\n </FieldDescription>\r\n </Field>\r\n <div className=\"grid grid-cols-3 gap-4\">\r\n <Field>\r\n <FieldLabel htmlFor=\"checkout-exp-month-ts6\">\r\n Month\r\n </FieldLabel>\r\n <Select items={months}>\r\n <SelectTrigger id=\"checkout-exp-month-ts6\">\r\n <SelectValue />\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectGroup>\r\n {months.map((item) => (\r\n <SelectItem key={item.value} value={item.value}>\r\n {item.label}\r\n </SelectItem>\r\n ))}\r\n </SelectGroup>\r\n </SelectContent>\r\n </Select>\r\n </Field>\r\n <Field>\r\n <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\r\n Year\r\n </FieldLabel>\r\n <Select items={years}>\r\n <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\r\n <SelectValue />\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectGroup>\r\n {years.map((item) => (\r\n <SelectItem key={item.value} value={item.value}>\r\n {item.label}\r\n </SelectItem>\r\n ))}\r\n </SelectGroup>\r\n </SelectContent>\r\n </Select>\r\n </Field>\r\n <Field>\r\n <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\r\n <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\r\n </Field>\r\n </div>\r\n </FieldGroup>\r\n </FieldSet>\r\n <FieldSeparator />\r\n <FieldSet>\r\n <FieldLegend>Billing Address</FieldLegend>\r\n <FieldDescription>\r\n The billing address associated with your payment method\r\n </FieldDescription>\r\n <FieldGroup>\r\n <Field orientation=\"horizontal\">\r\n <Checkbox\r\n id=\"checkout-7j9-same-as-shipping-wgm\"\r\n defaultChecked\r\n />\r\n <FieldLabel\r\n htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\r\n className=\"font-normal\"\r\n >\r\n Same as shipping address\r\n </FieldLabel>\r\n </Field>\r\n </FieldGroup>\r\n </FieldSet>\r\n <FieldSet>\r\n <FieldGroup>\r\n <Field>\r\n <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\r\n Comments\r\n </FieldLabel>\r\n <Textarea\r\n id=\"checkout-7j9-optional-comments\"\r\n placeholder=\"Add any additional comments\"\r\n className=\"resize-none\"\r\n />\r\n </Field>\r\n </FieldGroup>\r\n </FieldSet>\r\n <Field orientation=\"horizontal\">\r\n <Button type=\"submit\">Submit</Button>\r\n <Button variant=\"outline\" type=\"button\">\r\n Cancel\r\n </Button>\r\n </Field>\r\n </FieldGroup>\r\n </form>\r\n </Layout.Col1>\r\n </Layout>\r\n );\r\n}\r\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../../src/components/templates/form/form.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useForm } from \"@tanstack/react-form\";\r\nimport {\r\n TanStackCheckboxField,\r\n TanStackInputField,\r\n TanStackSelectField,\r\n TanStackTextareaField,\r\n} from \"../../../lib/forms/tanstack-field\";\r\nimport {\r\n Button,\r\n Layout,\r\n Select,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectTrigger,\r\n SelectValue,\r\n} from \"../../primitives/index\";\r\nimport {\r\n Field,\r\n FieldDescription,\r\n FieldGroup,\r\n FieldLegend,\r\n FieldSeparator,\r\n FieldSet,\r\n} from \"../../primitives/forms/field\";\r\nimport { Form as FormLayout, FormActions } from \"../../primitives/forms/form\";\r\n\r\nconst months = [\r\n { label: \"MM\", value: null },\r\n { label: \"01\", value: \"01\" },\r\n { label: \"02\", value: \"02\" },\r\n { label: \"03\", value: \"03\" },\r\n { label: \"04\", value: \"04\" },\r\n { label: \"05\", value: \"05\" },\r\n { label: \"06\", value: \"06\" },\r\n { label: \"07\", value: \"07\" },\r\n { label: \"08\", value: \"08\" },\r\n { label: \"09\", value: \"09\" },\r\n { label: \"10\", value: \"10\" },\r\n { label: \"11\", value: \"11\" },\r\n { label: \"12\", value: \"12\" },\r\n];\r\n\r\nconst years = [\r\n { label: \"YYYY\", value: null },\r\n { label: \"2024\", value: \"2024\" },\r\n { label: \"2025\", value: \"2025\" },\r\n { label: \"2026\", value: \"2026\" },\r\n { label: \"2027\", value: \"2027\" },\r\n { label: \"2028\", value: \"2028\" },\r\n { label: \"2029\", value: \"2029\" },\r\n];\r\n\r\ntype CheckoutFormValues = {\r\n cardName: string;\r\n cardNumber: string;\r\n expMonth: string \| null;\r\n expYear: string \| null;\r\n cvv: string;\r\n sameAsShipping: boolean;\r\n comments: string;\r\n};\r\n\r\nconst defaultValues: CheckoutFormValues = {\r\n cardName: \"\",\r\n cardNumber: \"\",\r\n expMonth: null,\r\n expYear: null,\r\n cvv: \"\",\r\n sameAsShipping: true,\r\n comments: \"\",\r\n};\r\n\r\nexport default function CheckoutForm() {\r\n const form = useForm({\r\n defaultValues,\r\n onSubmit: async () => {},\r\n });\r\n\r\n return (\r\n <Layout>\r\n <Layout.Col1>\r\n <FormLayout\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 <FieldSet>\r\n <FieldLegend>Payment Method</FieldLegend>\r\n <FieldDescription>\r\n All transactions are secure and encrypted\r\n </FieldDescription>\r\n <FieldGroup className=\"sg:gap-4\">\r\n <TanStackInputField\r\n formApi={form}\r\n name=\"cardName\"\r\n label=\"Name on Card\"\r\n placeholder=\"Evil Rabbit\"\r\n validators={{\r\n onChange: ({ value }: { value: string }) =>\r\n value.trim() ? undefined : \"Name on card is required\",\r\n }}\r\n />\r\n <TanStackInputField\r\n formApi={form}\r\n name=\"cardNumber\"\r\n label=\"Card Number\"\r\n placeholder=\"1234 5678 9012 3456\"\r\n description=\"Enter your 16-digit card number\"\r\n validators={{\r\n onChange: ({ value }: { value: string }) =>\r\n value.trim() ? undefined : \"Card number is required\",\r\n }}\r\n />\r\n <div className=\"sg:grid sg:grid-cols-3 sg:gap-4\">\r\n <TanStackSelectField\r\n formApi={form}\r\n name=\"expMonth\"\r\n label=\"Month\"\r\n >\r\n {(selectProps) => (\r\n <Select {...selectProps}>\r\n <SelectTrigger id={selectProps.id}>\r\n <SelectValue />\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectGroup>\r\n {months.map((item) => (\r\n <SelectItem key={item.label} value={item.value}>\r\n {item.label}\r\n </SelectItem>\r\n ))}\r\n </SelectGroup>\r\n </SelectContent>\r\n </Select>\r\n )}\r\n </TanStackSelectField>\r\n <TanStackSelectField formApi={form} name=\"expYear\" label=\"Year\">\r\n {(selectProps) => (\r\n <Select {...selectProps}>\r\n <SelectTrigger id={selectProps.id}>\r\n <SelectValue />\r\n </SelectTrigger>\r\n <SelectContent>\r\n <SelectGroup>\r\n {years.map((item) => (\r\n <SelectItem key={item.label} value={item.value}>\r\n {item.label}\r\n </SelectItem>\r\n ))}\r\n </SelectGroup>\r\n </SelectContent>\r\n </Select>\r\n )}\r\n </TanStackSelectField>\r\n <TanStackInputField\r\n formApi={form}\r\n name=\"cvv\"\r\n label=\"CVV\"\r\n placeholder=\"123\"\r\n validators={{\r\n onChange: ({ value }: { value: string }) =>\r\n value.trim() ? undefined : \"CVV is required\",\r\n }}\r\n />\r\n </div>\r\n </FieldGroup>\r\n </FieldSet>\r\n <FieldSeparator />\r\n <FieldSet>\r\n <FieldLegend>Billing Address</FieldLegend>\r\n <FieldDescription>\r\n The billing address associated with your payment method\r\n </FieldDescription>\r\n <FieldGroup>\r\n <TanStackCheckboxField\r\n formApi={form}\r\n name=\"sameAsShipping\"\r\n label=\"Same as shipping address\"\r\n labelClassName=\"font-normal\"\r\n />\r\n </FieldGroup>\r\n </FieldSet>\r\n <FieldSet>\r\n <FieldGroup>\r\n <TanStackTextareaField\r\n formApi={form}\r\n name=\"comments\"\r\n label=\"Comments\"\r\n placeholder=\"Add any additional comments\"\r\n className=\"resize-none\"\r\n />\r\n </FieldGroup>\r\n </FieldSet>\r\n <Field orientation=\"horizontal\">\r\n <FormActions>\r\n <form.Subscribe\r\n selector={(state) => [state.canSubmit, state.isSubmitting]}\r\n >\r\n {([canSubmit, isSubmitting]) => (\r\n <Button type=\"submit\" disabled={!canSubmit \|\| isSubmitting}>\r\n Submit\r\n </Button>\r\n )}\r\n </form.Subscribe>\r\n <Button\r\n variant=\"outline\"\r\n type=\"button\"\r\n onClick={() => form.reset()}\r\n >\r\n Cancel\r\n </Button>\r\n </FormActions>\r\n </Field>\r\n </FieldGroup>\r\n </FormLayout>\r\n </Layout.Col1>\r\n </Layout>\r\n );\r\n}\r\n"],"mappings":";AA6Fc,cAiCQ,YAjCR;AA3Fd,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,QAAQ,YAAY,mBAAmB;AAEhD,MAAM,SAAS;AAAA,EACb,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAAA,EAC3B,EAAE,OAAO,MAAM,OAAO,KAAK;AAC7B;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,OAAO,QAAQ,OAAO,KAAK;AAAA,EAC7B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,EAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,EAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,EAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,EAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,EAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AACjC;AAYA,MAAM,gBAAoC;AAAA,EACxC,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB,UAAU;AACZ;AAEe,SAAR,eAAgC;AACrC,QAAM,OAAO,QAAQ;AAAA,IACnB;AAAA,IACA,UAAU,YAAY;AAAA,IAAC;AAAA,EACzB,CAAC;AAED,SACE,oBAAC,UACC,8BAAC,OAAO,MAAP,EACC;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC,UAAU;AACnB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,aAAK,KAAK,aAAa;AAAA,MACzB;AAAA,MAEA,+BAAC,cACC;AAAA,6BAAC,YACC;AAAA,8BAAC,eAAY,4BAAc;AAAA,UAC3B,oBAAC,oBAAiB,uDAElB;AAAA,UACA,qBAAC,cAAW,WAAU,YACpB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,aAAY;AAAA,gBACZ,YAAY;AAAA,kBACV,UAAU,CAAC,EAAE,MAAM,MACjB,MAAM,KAAK,IAAI,SAAY;AAAA,gBAC/B;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS;AAAA,gBACT,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,aAAY;AAAA,gBACZ,aAAY;AAAA,gBACZ,YAAY;AAAA,kBACV,UAAU,CAAC,EAAE,MAAM,MACjB,MAAM,KAAK,IAAI,SAAY;AAAA,gBAC/B;AAAA;AAAA,YACF;AAAA,YACA,qBAAC,SAAI,WAAU,mCACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,OAAM;AAAA,kBAEL,WAAC,gBACA,qBAAC,UAAQ,GAAG,aACV;AAAA,wCAAC,iBAAc,IAAI,YAAY,IAC7B,8BAAC,eAAY,GACf;AAAA,oBACA,oBAAC,iBACC,8BAAC,eACE,iBAAO,IAAI,CAAC,SACX,oBAAC,cAA4B,OAAO,KAAK,OACtC,eAAK,SADS,KAAK,KAEtB,CACD,GACH,GACF;AAAA,qBACF;AAAA;AAAA,cAEJ;AAAA,cACA,oBAAC,uBAAoB,SAAS,MAAM,MAAK,WAAU,OAAM,QACtD,WAAC,gBACA,qBAAC,UAAQ,GAAG,aACV;AAAA,oCAAC,iBAAc,IAAI,YAAY,IAC7B,8BAAC,eAAY,GACf;AAAA,gBACA,oBAAC,iBACC,8BAAC,eACE,gBAAM,IAAI,CAAC,SACV,oBAAC,cAA4B,OAAO,KAAK,OACtC,eAAK,SADS,KAAK,KAEtB,CACD,GACH,GACF;AAAA,iBACF,GAEJ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,OAAM;AAAA,kBACN,aAAY;AAAA,kBACZ,YAAY;AAAA,oBACV,UAAU,CAAC,EAAE,MAAM,MACjB,MAAM,KAAK,IAAI,SAAY;AAAA,kBAC/B;AAAA;AAAA,cACF;AAAA,eACF;AAAA,aACF;AAAA,WACF;AAAA,QACA,oBAAC,kBAAe;AAAA,QAChB,qBAAC,YACC;AAAA,8BAAC,eAAY,6BAAe;AAAA,UAC5B,oBAAC,oBAAiB,qEAElB;AAAA,UACA,oBAAC,cACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,MAAK;AAAA,cACL,OAAM;AAAA,cACN,gBAAe;AAAA;AAAA,UACjB,GACF;AAAA,WACF;AAAA,QACA,oBAAC,YACC,8BAAC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,MAAK;AAAA,YACL,OAAM;AAAA,YACN,aAAY;AAAA,YACZ,WAAU;AAAA;AAAA,QACZ,GACF,GACF;AAAA,QACA,oBAAC,SAAM,aAAY,cACjB,+BAAC,eACC;AAAA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,UAAU,CAAC,UAAU,CAAC,MAAM,WAAW,MAAM,YAAY;AAAA,cAExD,WAAC,CAAC,WAAW,YAAY,MACxB,oBAAC,UAAO,MAAK,UAAS,UAAU,CAAC,aAAa,cAAc,oBAE5D;AAAA;AAAA,UAEJ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM,KAAK,MAAM;AAAA,cAC3B;AAAA;AAAA,UAED;AAAA,WACF,GACF;AAAA,SACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}

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

@@ -88,6 +88,7 @@ function Hero({
       },
       role: "button",
       tabIndex: 0,
+      "aria-label": "Interactive hero background \u2014 click or press Enter to add sparkle effects",
       "data-testid": "hero-section",
       className: "sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2",
       children: [

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

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

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

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

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

@@ -1,5 +1,6 @@
 export * from "./container/container.js";
 export * from "./footer/footer.js";
 export * from "./hero/hero.js";
+export * from "./loading-screen/loading-screen.js";
 export * from "./navigation/index.js";
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/templates/index.ts"],"sourcesContent":["/*\n Templates index\n \n Please keep exports sorted alphabetically by path!\n /\n\nexport from \"./container/container\";\nexport * from \"./footer/footer\";\nexport * from \"./hero/hero\";\nexport * from \"./navigation/index\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/templates/index.ts"],"sourcesContent":["/*\n Templates index\n \n Please keep exports sorted alphabetically by path!\n /\n\nexport from \"./container/container\";\nexport * from \"./footer/footer\";\nexport * from \"./hero/hero\";\nexport * from \"./loading-screen/loading-screen\";\nexport * from \"./navigation/index\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/templates/loading-screen/loading-screen.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type Props = {
+    brand?: string;
+    message?: string;
+};
+/** Full-screen branded loading overlay. */
+declare function LoadingScreen({ brand, message, }: Props): React.JSX.Element;
+export { LoadingScreen };

package/dist/components/templates/loading-screen/loading-screen.js ADDED Viewed

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { Heading, Text } from "../../primitives/index.js";
+function LoadingScreen({
+  brand = "filion.",
+  message = "Loading\u2026"
+}) {
+  const [name, accent] = brand.includes(".") ? [brand.replace(".", ""), "."] : [brand, ""];
+  return /* @__PURE__ */ jsx("div", { className: "sg:fixed sg:inset-0 sg:z-[100] sg:flex sg:flex-col sg:items-center sg:justify-center sg:bg-background", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 1, scale: 0.96 },
+      animate: { opacity: 1, scale: 1 },
+      transition: { duration: 0.3 },
+      className: "sg:text-center",
+      children: [
+        /* @__PURE__ */ jsxs(Heading, { variant: "h3", className: "sg:text-primary", children: [
+          name,
+          accent && /* @__PURE__ */ jsx("span", { className: "sg:text-secondary", children: accent })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "sg:mt-6 sg:flex sg:items-center sg:justify-center sg:gap-1.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "sg:h-2 sg:w-2 sg:rounded-full sg:bg-primary",
+            animate: { opacity: [0.3, 1, 0.3], scale: [0.8, 1.2, 0.8] },
+            transition: { duration: 1, repeat: Infinity, delay: i * 0.2 }
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", foreground: "muted-foreground", className: "sg:mt-4", children: message })
+      ]
+    }
+  ) });
+}
+export {
+  LoadingScreen
+};
+//# sourceMappingURL=loading-screen.js.map

package/dist/components/templates/loading-screen/loading-screen.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/templates/loading-screen/loading-screen.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport { Heading, Text } from \"../../primitives/index\";\r\n\r\ntype Props = {\r\n\tbrand?: string;\r\n\tmessage?: string;\r\n};\r\n\r\n/** Full-screen branded loading overlay. */\r\nexport function LoadingScreen({\r\n\tbrand = \"filion.\",\r\n\tmessage = \"Loading…\",\r\n}: Props) {\r\n\tconst [name, accent] = brand.includes(\".\")\r\n\t\t? [brand.replace(\".\", \"\"), \".\"]\r\n\t\t: [brand, \"\"];\r\n\r\n\treturn (\r\n\t\t<div className=\"sg:fixed sg:inset-0 sg:z-[100] sg:flex sg:flex-col sg:items-center sg:justify-center sg:bg-background\">\r\n\t\t\t<motion.div\r\n\t\t\t\tinitial={{ opacity: 1, scale: 0.96 }}\r\n\t\t\t\tanimate={{ opacity: 1, scale: 1 }}\r\n\t\t\t\ttransition={{ duration: 0.3 }}\r\n\t\t\t\tclassName=\"sg:text-center\"\r\n\t\t\t>\r\n\t\t\t\t<Heading variant=\"h3\" className=\"sg:text-primary\">\r\n\t\t\t\t\t{name}\r\n\t\t\t\t\t{accent && (\r\n\t\t\t\t\t\t<span className=\"sg:text-secondary\">{accent}</span>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</Heading>\r\n\t\t\t\t<div className=\"sg:mt-6 sg:flex sg:items-center sg:justify-center sg:gap-1.5\">\r\n\t\t\t\t\t{[0, 1, 2].map((i) => (\r\n\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\t\tclassName=\"sg:h-2 sg:w-2 sg:rounded-full sg:bg-primary\"\r\n\t\t\t\t\t\t\tanimate={{ opacity: [0.3, 1, 0.3], scale: [0.8, 1.2, 0.8] }}\r\n\t\t\t\t\t\t\ttransition={{ duration: 1, repeat: Infinity, delay: i * 0.2 }}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t))}\r\n\t\t\t\t</div>\r\n\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\" className=\"sg:mt-4\">\r\n\t\t\t\t\t{message}\r\n\t\t\t\t</Text>\r\n\t\t\t</motion.div>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"mappings":";AA2BI,SAGE,KAHF;AAzBJ,SAAS,cAAc;AACvB,SAAS,SAAS,YAAY;AAQvB,SAAS,cAAc;AAAA,EAC7B,QAAQ;AAAA,EACR,UAAU;AACX,GAAU;AACT,QAAM,CAAC,MAAM,MAAM,IAAI,MAAM,SAAS,GAAG,IACtC,CAAC,MAAM,QAAQ,KAAK,EAAE,GAAG,GAAG,IAC5B,CAAC,OAAO,EAAE;AAEb,SACC,oBAAC,SAAI,WAAU,yGACd;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,OAAO,KAAK;AAAA,MACnC,SAAS,EAAE,SAAS,GAAG,OAAO,EAAE;AAAA,MAChC,YAAY,EAAE,UAAU,IAAI;AAAA,MAC5B,WAAU;AAAA,MAEV;AAAA,6BAAC,WAAQ,SAAQ,MAAK,WAAU,mBAC9B;AAAA;AAAA,UACA,UACA,oBAAC,UAAK,WAAU,qBAAqB,kBAAO;AAAA,WAE9C;AAAA,QACA,oBAAC,SAAI,WAAU,gEACb,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACf;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YAEA,WAAU;AAAA,YACV,SAAS,EAAE,SAAS,CAAC,KAAK,GAAG,GAAG,GAAG,OAAO,CAAC,KAAK,KAAK,GAAG,EAAE;AAAA,YAC1D,YAAY,EAAE,UAAU,GAAG,QAAQ,UAAU,OAAO,IAAI,IAAI;AAAA;AAAA,UAHvD;AAAA,QAIN,CACA,GACF;AAAA,QACA,oBAAC,QAAK,MAAK,MAAK,YAAW,oBAAmB,WAAU,WACtD,mBACF;AAAA;AAAA;AAAA,EACD,GACD;AAEF;","names":[]}

package/dist/css/variables.css CHANGED Viewed

@@ -2,6 +2,7 @@
   --sg-black: oklch(0.25 0 0);
   --sg-charcoal: oklch(0.35 0.01 60);
   --sg-ash: oklch(0.44 0 0);
+  --sg-stone: oklch(0.32 0.02 60);
   --sg-silver: oklch(0.78 0.01 60);
   --sg-fog: oklch(0.92 0.005 240);
   --sg-cream: oklch(0.97 0.01 80);
@@ -30,11 +31,12 @@
   --sg-secondary: var(--sg-amber);
   --sg-secondary-foreground: var(--sg-black);
   --sg-muted: var(--sg-fog);
-  --sg-muted-foreground: var(--sg-ash);
+  --sg-muted-foreground: var(--sg-stone);
   --sg-accent: var(--sg-sand);
-  --sg-accent-foreground: var(--sg-charcoal);
+  --sg-accent-foreground: var(--sg-stone);
   --sg-destructive: var(--sg-crimson);
   --sg-destructive-foreground: var(--sg-cream);
+  --sg-error: var(--sg-crimson);
   --sg-border: var(--sg-silver);
   --sg-input: var(--sg-silver);
   --sg-ring: var(--sg-terracotta);
@@ -60,11 +62,12 @@
   --sg-secondary: var(--sg-amber);
   --sg-secondary-foreground: var(--sg-night);
   --sg-muted: var(--sg-slate);
-  --sg-muted-foreground: var(--sg-dove);
+  --sg-muted-foreground: var(--sg-cloud);
   --sg-accent: var(--sg-onyx);
   --sg-accent-foreground: var(--sg-cloud);
   --sg-destructive: var(--sg-crimson-light);
   --sg-destructive-foreground: var(--sg-cream);
+  --sg-error: var(--sg-crimson-light);
   --sg-border: var(--sg-slate);
   --sg-input: var(--sg-slate);
   --sg-ring: var(--sg-terracotta-light);

package/dist/css/variables.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/css/variables.css"],"sourcesContent":[":root {\n /* Neutrals /\n --sg-black: oklch(0.25 0 0);\n --sg-charcoal: oklch(0.35 0.01 60);\n --sg-ash: oklch(0.44 0 0);\n --sg-silver: oklch(0.78 0.01 60);\n --sg-fog: oklch(0.92 0.005 240);\n --sg-cream: oklch(0.97 0.01 80);\n --sg-white: oklch(0.99 0.005 80);\n --sg-pure-white: oklch(1 0 0);\n\n / Brand colors /\n --sg-terracotta: oklch(0.52 0.15 35);\n --sg-terracotta-light: oklch(0.65 0.16 35);\n --sg-amber: oklch(0.72 0.15 75);\n --sg-amber-dark: oklch(0.45 0.08 75);\n --sg-sand: oklch(0.93 0.03 80);\n\n / Feedback /\n --sg-crimson: oklch(0.55 0.22 25);\n --sg-crimson-light: oklch(0.6 0.2 25);\n\n / Dark mode neutrals /\n --sg-night: oklch(0.22 0.01 60);\n --sg-onyx: oklch(0.28 0 0);\n --sg-slate: oklch(0.43 0 0);\n --sg-dove: oklch(0.82 0.01 60);\n --sg-cloud: oklch(0.88 0.01 60);\n\n / ── Semantic mapping – Light mode ── */\n --sg-background: var(--sg-cream);\n --sg-foreground: var(--sg-black);\n\n --sg-card: var(--sg-pure-white);\n --sg-card-foreground: var(--sg-black);\n\n --sg-popover: var(--sg-pure-white);\n --sg-popover-foreground: var(--sg-black);\n\n --sg-primary: var(--sg-terracotta);\n --sg-primary-foreground: var(--sg-cream);\n\n --sg-secondary: var(--sg-amber);\n --sg-secondary-foreground: var(--sg-black);\n\n --sg-muted: var(--sg-fog);\n --sg-muted-foreground: var(--sg-~~ash~~);\n\n --sg-accent: var(--sg-sand);\n --sg-accent-foreground: var(--sg-~~charcoal~~);\n\n --sg-destructive: var(--sg-crimson);\n --sg-destructive-foreground: var(--sg-cream);\n\n --sg-border: var(--sg-silver);\n --sg-input: var(--sg-silver);\n --sg-ring: var(--sg-terracotta);\n\n --sg-radius: 0.5rem;\n\n --sg-sidebar-background: var(--sg-cream);\n --sg-sidebar-foreground: var(--sg-black);\n --sg-sidebar-primary: var(--sg-terracotta);\n --sg-sidebar-primary-foreground: var(--sg-cream);\n --sg-sidebar-accent: var(--sg-fog);\n --sg-sidebar-accent-foreground: var(--sg-charcoal);\n --sg-sidebar-border: var(--sg-silver);\n --sg-sidebar-ring: var(--sg-terracotta);\n}\n\n.dark {\n --sg-background: var(--sg-charcoal);\n --sg-foreground: var(--sg-cloud);\n\n --sg-card: var(--sg-night);\n --sg-card-foreground: var(--sg-cloud);\n\n --sg-popover: var(--sg-night);\n --sg-popover-foreground: var(--sg-cloud);\n\n --sg-primary: var(--sg-terracotta-light);\n --sg-primary-foreground: var(--sg-night);\n\n --sg-secondary: var(--sg-amber);\n --sg-secondary-foreground: var(--sg-night);\n\n --sg-muted: var(--sg-slate);\n --sg-muted-foreground: var(--sg-~~dove~~);\n\n --sg-accent: var(--sg-onyx);\n --sg-accent-foreground: var(--sg-cloud);\n\n --sg-destructive: var(--sg-crimson-light);\n --sg-destructive-foreground: var(--sg-cream);\n\n --sg-border: var(--sg-slate);\n --sg-input: var(--sg-slate);\n --sg-ring: var(--sg-terracotta-light);\n\n --sg-sidebar-background: var(--sg-night);\n --sg-sidebar-foreground: var(--sg-cloud);\n --sg-sidebar-primary: var(--sg-terracotta-light);\n --sg-sidebar-primary-foreground: var(--sg-night);\n --sg-sidebar-accent: var(--sg-onyx);\n --sg-sidebar-accent-foreground: var(--sg-cloud);\n --sg-sidebar-border: var(--sg-slate);\n --sg-sidebar-ring: var(--sg-terracotta-light);\n}\n"],"mappings":"AAAA;AAEE,cAAY,MAAM,KAAK,EAAE;AACzB,iBAAe,MAAM,KAAK,KAAK;AAC/B,YAAU,MAAM,KAAK,EAAE;AACvB,eAAa,MAAM,KAAK,KAAK;AAC7B,YAAU,MAAM,KAAK,MAAM;AAC3B,cAAY,MAAM,KAAK,KAAK;AAC5B,cAAY,MAAM,KAAK,MAAM;AAC7B,mBAAiB,MAAM,EAAE,EAAE;AAG3B,mBAAiB,MAAM,KAAK,KAAK;AACjC,yBAAuB,MAAM,KAAK,KAAK;AACvC,cAAY,MAAM,KAAK,KAAK;AAC5B,mBAAiB,MAAM,KAAK,KAAK;AACjC,aAAW,MAAM,KAAK,KAAK;AAG3B,gBAAc,MAAM,KAAK,KAAK;AAC9B,sBAAoB,MAAM,IAAI,IAAI;AAGlC,cAAY,MAAM,KAAK,KAAK;AAC5B,aAAW,MAAM,KAAK,EAAE;AACxB,cAAY,MAAM,KAAK,EAAE;AACzB,aAAW,MAAM,KAAK,KAAK;AAC3B,cAAY,MAAM,KAAK,KAAK;AAG5B,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;~~AAEjC~~,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,eAAa;AAEb,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;AAEA,CAAC;AACC,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;~~AAEjC~~,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;","names":[]}
1	+ {"version":3,"sources":["../../src/css/variables.css"],"sourcesContent":[":root {\n /* Neutrals /\n --sg-black: oklch(0.25 0 0);\n --sg-charcoal: oklch(0.35 0.01 60);\n --sg-ash: oklch(0.44 0 0);\n --sg-stone: oklch(0.32 0.02 60);\n --sg-silver: oklch(0.78 0.01 60);\n --sg-fog: oklch(0.92 0.005 240);\n --sg-cream: oklch(0.97 0.01 80);\n --sg-white: oklch(0.99 0.005 80);\n --sg-pure-white: oklch(1 0 0);\n\n / Brand colors /\n --sg-terracotta: oklch(0.52 0.15 35);\n --sg-terracotta-light: oklch(0.65 0.16 35);\n --sg-amber: oklch(0.72 0.15 75);\n --sg-amber-dark: oklch(0.45 0.08 75);\n --sg-sand: oklch(0.93 0.03 80);\n\n / Feedback /\n --sg-crimson: oklch(0.55 0.22 25);\n --sg-crimson-light: oklch(0.6 0.2 25);\n\n / Dark mode neutrals /\n --sg-night: oklch(0.22 0.01 60);\n --sg-onyx: oklch(0.28 0 0);\n --sg-slate: oklch(0.43 0 0);\n --sg-dove: oklch(0.82 0.01 60);\n --sg-cloud: oklch(0.88 0.01 60);\n\n / ── Semantic mapping – Light mode ── */\n --sg-background: var(--sg-cream);\n --sg-foreground: var(--sg-black);\n\n --sg-card: var(--sg-pure-white);\n --sg-card-foreground: var(--sg-black);\n\n --sg-popover: var(--sg-pure-white);\n --sg-popover-foreground: var(--sg-black);\n\n --sg-primary: var(--sg-terracotta);\n --sg-primary-foreground: var(--sg-cream);\n\n --sg-secondary: var(--sg-amber);\n --sg-secondary-foreground: var(--sg-black);\n\n --sg-muted: var(--sg-fog);\n --sg-muted-foreground: var(--sg-stone);\n\n --sg-accent: var(--sg-sand);\n --sg-accent-foreground: var(--sg-stone);\n\n --sg-destructive: var(--sg-crimson);\n --sg-destructive-foreground: var(--sg-cream);\n --sg-error: var(--sg-crimson);\n\n --sg-border: var(--sg-silver);\n --sg-input: var(--sg-silver);\n --sg-ring: var(--sg-terracotta);\n\n --sg-radius: 0.5rem;\n\n --sg-sidebar-background: var(--sg-cream);\n --sg-sidebar-foreground: var(--sg-black);\n --sg-sidebar-primary: var(--sg-terracotta);\n --sg-sidebar-primary-foreground: var(--sg-cream);\n --sg-sidebar-accent: var(--sg-fog);\n --sg-sidebar-accent-foreground: var(--sg-charcoal);\n --sg-sidebar-border: var(--sg-silver);\n --sg-sidebar-ring: var(--sg-terracotta);\n}\n\n.dark {\n --sg-background: var(--sg-charcoal);\n --sg-foreground: var(--sg-cloud);\n\n --sg-card: var(--sg-night);\n --sg-card-foreground: var(--sg-cloud);\n\n --sg-popover: var(--sg-night);\n --sg-popover-foreground: var(--sg-cloud);\n\n --sg-primary: var(--sg-terracotta-light);\n --sg-primary-foreground: var(--sg-night);\n\n --sg-secondary: var(--sg-amber);\n --sg-secondary-foreground: var(--sg-night);\n\n --sg-muted: var(--sg-slate);\n --sg-muted-foreground: var(--sg-cloud);\n\n --sg-accent: var(--sg-onyx);\n --sg-accent-foreground: var(--sg-cloud);\n\n --sg-destructive: var(--sg-crimson-light);\n --sg-destructive-foreground: var(--sg-cream);\n --sg-error: var(--sg-crimson-light);\n\n --sg-border: var(--sg-slate);\n --sg-input: var(--sg-slate);\n --sg-ring: var(--sg-terracotta-light);\n\n --sg-sidebar-background: var(--sg-night);\n --sg-sidebar-foreground: var(--sg-cloud);\n --sg-sidebar-primary: var(--sg-terracotta-light);\n --sg-sidebar-primary-foreground: var(--sg-night);\n --sg-sidebar-accent: var(--sg-onyx);\n --sg-sidebar-accent-foreground: var(--sg-cloud);\n --sg-sidebar-border: var(--sg-slate);\n --sg-sidebar-ring: var(--sg-terracotta-light);\n}\n"],"mappings":"AAAA;AAEE,cAAY,MAAM,KAAK,EAAE;AACzB,iBAAe,MAAM,KAAK,KAAK;AAC/B,YAAU,MAAM,KAAK,EAAE;AACvB,cAAY,MAAM,KAAK,KAAK;AAC5B,eAAa,MAAM,KAAK,KAAK;AAC7B,YAAU,MAAM,KAAK,MAAM;AAC3B,cAAY,MAAM,KAAK,KAAK;AAC5B,cAAY,MAAM,KAAK,MAAM;AAC7B,mBAAiB,MAAM,EAAE,EAAE;AAG3B,mBAAiB,MAAM,KAAK,KAAK;AACjC,yBAAuB,MAAM,KAAK,KAAK;AACvC,cAAY,MAAM,KAAK,KAAK;AAC5B,mBAAiB,MAAM,KAAK,KAAK;AACjC,aAAW,MAAM,KAAK,KAAK;AAG3B,gBAAc,MAAM,KAAK,KAAK;AAC9B,sBAAoB,MAAM,IAAI,IAAI;AAGlC,cAAY,MAAM,KAAK,KAAK;AAC5B,aAAW,MAAM,KAAK,EAAE;AACxB,cAAY,MAAM,KAAK,EAAE;AACzB,aAAW,MAAM,KAAK,KAAK;AAC3B,cAAY,MAAM,KAAK,KAAK;AAG5B,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;AACjC,cAAY,IAAI;AAEhB,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,eAAa;AAEb,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;AAEA,CAAC;AACC,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;AACjC,cAAY,IAAI;AAEhB,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;","names":[]}

package/dist/data/posts.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 interface BlogPost {
     id: number;
+    slug: string;
     title: string;
     excerpt: string;
     content: string;
@@ -9,6 +10,10 @@ interface BlogPost {
     author: string;
     featured?: boolean;
     categories: string[];
+    gallery?: {
+        src: string;
+        alt?: string;
+    }[];
 }
 interface Comment {
     id: string;