65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
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();
|
|
}
|
|
}
|