feat: useLayoutWrapper

wp-content/themes/moonshine/app/composables/useLayoutWrapper.ts

@@ -0,0 +1,64 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import * as z from "zod";
+
+// Tailwind Variants for LayoutWrapper
+export const tvLayoutWrapper = tv({
+  slots: {
+    base: "",
+    inner: "",
+  },
+  variants: {
+    // LayoutColored
+    color: {
+      default: { base: "bg-default" },
+      muted: { base: "bg-muted" },
+      elevated: { base: "bg-elevated" },
+      accented: { base: "bg-accented" },
+      inverted: { base: "bg-inverted text-inverted" },
+      primary: { base: "bg-primary text-inverted" },
+    },
+    // LayoutContained
+    container: {
+      default: { inner: "container" },
+      xl: { inner: "container-xl" },
+      lg: { inner: "container-lg" },
+      fluid: { inner: "container-fluid" },
+      fullbleed: { inner: "container-fullbleed" },
+    },
+    // LayoutPadded
+    verticalPadding: {
+      sm: { base: "py-3" },
+      md: { base: "py-6" },
+      lg: { base: "py-12" },
+      none: {},
+    },
+  },
+  defaultVariants: {
+    color: "default",
+    container: "default",
+    verticalPadding: "md",
+  },
+});
+
+export type LayoutWrapperProps = VariantProps<typeof tvLayoutWrapper>;
+
+// Zod schemas for validating layout settings
+const colorEnum = z.enum(["default", "muted", "elevated", "accented", "inverted", "primary"]);
+const containerEnum = z.enum(["default", "xl", "lg", "fluid", "fullbleed"]);
+const verticalPaddingEnum = z.enum(["sm", "md", "lg", "none"]);
+
+const layoutSettingsSchema = z.object({
+  color: z.string().pipe(colorEnum).optional(),
+  container: z.string().pipe(containerEnum).optional(),
+  verticalPadding: z.string().pipe(verticalPaddingEnum).optional(),
+});
+
+export type LayoutSettings = z.input<typeof layoutSettingsSchema>;
+
+export function useLayoutWrapper(input?: LayoutSettings) {
+  try {
+    return tvLayoutWrapper(layoutSettingsSchema.parse(input));
+  } catch {
+    return tvLayoutWrapper();
+  }
+}