create-vexcms 0.0.8 → 0.0.10

package/templates/marketing-site/src/components/admin/ThemeImport.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { useState } from "react"
+
+import { parseThemeCSS } from "~/lib/colorConvert"
+
+/**
+ * CSS variable name → form field path mapping.
+ * Maps CSS custom property names (from :root / .dark blocks)
+ * to the field paths in the themes collection form.
+ *
+ * Tabs with slugs create nested paths: "light.background", "dark.background"
+ * This maps the CSS var name to the camelCase field name used in themeColorFields().
+ */
+const CSS_VAR_TO_FIELD: Record<string, string> = {
+  background: "background",
+  foreground: "foreground",
+  card: "card",
+  "card-foreground": "cardForeground",
+  popover: "popover",
+  "popover-foreground": "popoverForeground",
+  primary: "primary",
+  "primary-foreground": "primaryForeground",
+  secondary: "secondary",
+  "secondary-foreground": "secondaryForeground",
+  muted: "muted",
+  "muted-foreground": "mutedForeground",
+  accent: "accent",
+  "accent-foreground": "accentForeground",
+  destructive: "destructive",
+  "destructive-foreground": "destructiveForeground",
+  border: "border",
+  input: "input",
+  ring: "ring",
+  "chart-1": "chart1",
+  "chart-2": "chart2",
+  "chart-3": "chart3",
+  "chart-4": "chart4",
+  "chart-5": "chart5",
+  sidebar: "sidebar",
+  "sidebar-foreground": "sidebarForeground",
+  "sidebar-primary": "sidebarPrimary",
+  "sidebar-primary-foreground": "sidebarPrimaryForeground",
+  "sidebar-accent": "sidebarAccent",
+  "sidebar-accent-foreground": "sidebarAccentForeground",
+  "sidebar-border": "sidebarBorder",
+  "sidebar-ring": "sidebarRing",
+}
+
+interface ThemeImportProps {
+  /** Callback to set a form field value by path. e.g., setFieldValue("light.background", "#fff") */
+  onImport: (updates: Record<string, string>) => void
+}
+
+/**
+ * Theme import component — paste CSS from tweakcn/shadcn to populate color fields.
+ *
+ * Parses :root { } and .dark { } blocks from the CSS, maps variable names to
+ * form field paths, and calls onImport with all matched field updates.
+ *
+ * Designed to work with any CSS file — only updates fields that match known
+ * CSS variable names. Unmatched variables are silently ignored.
+ */
+export function ThemeImport({ onImport }: ThemeImportProps) {
+  const [css, setCss] = useState("")
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [importResult, setImportResult] = useState<string | null>(null)
+
+  const handleImport = () => {
+    if (!css.trim()) return
+
+    const parsed = parseThemeCSS({ css })
+    const updates: Record<string, string> = {}
+    let count = 0
+
+    // Map light colors to light.{fieldName} paths
+    for (const [cssVar, value] of Object.entries(parsed.light)) {
+      const fieldName = CSS_VAR_TO_FIELD[cssVar]
+      if (fieldName) {
+        updates[`light.${fieldName}`] = value
+        count++
+      }
+    }
+
+    // Map dark colors to dark.{fieldName} paths
+    for (const [cssVar, value] of Object.entries(parsed.dark)) {
+      const fieldName = CSS_VAR_TO_FIELD[cssVar]
+      if (fieldName) {
+        updates[`dark.${fieldName}`] = value
+        count++
+      }
+    }
+
+    if (count > 0) {
+      onImport(updates)
+      setImportResult(`Imported ${count} color values`)
+      setCss("")
+      setTimeout(() => setImportResult(null), 3000)
+    } else {
+      setImportResult("No matching CSS variables found")
+      setTimeout(() => setImportResult(null), 3000)
+    }
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-4 mb-6">
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-2 text-sm font-medium w-full text-left"
+      >
+        <span className={`transition-transform ${isExpanded ? "rotate-90" : ""}`}>▶</span>
+        Import Theme from CSS
+      </button>
+
+      {isExpanded && (
+        <div className="mt-3 space-y-3">
+          <p className="text-xs text-muted-foreground">
+            Paste CSS from{" "}
+            <a
+              href="https://tweakcn.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              tweakcn
+            </a>
+            {" "}or{" "}
+            <a
+              href="https://ui.shadcn.com/themes"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              shadcn/ui themes
+            </a>
+            . The importer will match CSS variable names to color fields and fill them in.
+          </p>
+
+          <textarea
+            value={css}
+            onChange={(e) => setCss(e.target.value)}
+            placeholder={`:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --primary: #171717;
+  ...
+}
+
+.dark {
+  --background: #0a0a0a;
+  ...
+}`}
+            className="w-full h-40 rounded-md border bg-background px-3 py-2 text-xs font-mono resize-y"
+          />
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={handleImport}
+              disabled={!css.trim()}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            >
+              Import
+            </button>
+            {importResult && (
+              <span className="text-xs text-muted-foreground">{importResult}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/marketing-site/src/components/admin/ThemeImportField.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useVexFormContext } from "@vexcms/ui"
+
+import { ThemeImport } from "./ThemeImport"
+
+/**
+ * Custom admin field component that renders the theme CSS import UI.
+ * Uses the VexForm context to programmatically set color field values
+ * when CSS is imported.
+ *
+ * Register on a ui() field in the themes collection:
+ * ```ts
+ * importTheme: ui({ admin: { components: { Field: ThemeImportField } } })
+ * ```
+ */
+export default function ThemeImportField() {
+  const { form } = useVexFormContext()
+
+  const handleImport = (updates: Record<string, string>) => {
+    for (const [path, value] of Object.entries(updates)) {
+      // Path is like "light.background" or "dark.foreground"
+      // Tabs expand to top-level keys, so the form field path is just the path directly
+      try {
+        form.setFieldValue(path as any, value)
+      } catch {
+        // Field might not exist in this form — silently skip
+      }
+    }
+  }
+
+  return <ThemeImport onImport={handleImport} />
+}

package/templates/marketing-site/src/components/motion-primitives/animated-group.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import { motion, type Variants } from "motion/react"
+import React, { type ComponentPropsWithRef } from "react"
+
+export type PresetType =
+  | "blur"
+  | "blur-slide"
+  | "bounce"
+  | "fade"
+  | "flip"
+  | "rotate"
+  | "scale"
+  | "slide"
+  | "swing"
+  | "zoom"
+
+export type AnimatedGroupProps = ComponentPropsWithRef<"div"> & {
+  as?: React.ElementType
+  asChild?: React.ElementType
+  className?: string
+  preset?: PresetType
+  variants?: {
+    container?: Variants
+    item?: Variants
+  }
+}
+
+const defaultContainerVariants: Variants = {
+  visible: {
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+}
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+}
+
+const presetVariants: Record<PresetType, Variants> = {
+  "blur-slide": {
+    hidden: { filter: "blur(4px)", y: 20 },
+    visible: { filter: "blur(0px)", y: 0 },
+  },
+  slide: {
+    hidden: { y: 20 },
+    visible: { y: 0 },
+  },
+  blur: {
+    hidden: { filter: "blur(4px)" },
+    visible: { filter: "blur(0px)" },
+  },
+  bounce: {
+    hidden: { y: -50 },
+    visible: {
+      transition: { type: "spring", damping: 10, stiffness: 400 },
+      y: 0,
+    },
+  },
+  fade: {},
+  flip: {
+    hidden: { rotateX: -90 },
+    visible: {
+      rotateX: 0,
+      transition: { type: "spring", damping: 20, stiffness: 300 },
+    },
+  },
+  rotate: {
+    hidden: { rotate: -180 },
+    visible: {
+      rotate: 0,
+      transition: { type: "spring", damping: 15, stiffness: 200 },
+    },
+  },
+  scale: {
+    hidden: { scale: 0.8 },
+    visible: { scale: 1 },
+  },
+  swing: {
+    hidden: { rotate: -10 },
+    visible: {
+      rotate: 0,
+      transition: { type: "spring", damping: 8, stiffness: 300 },
+    },
+  },
+  zoom: {
+    hidden: { scale: 0.5 },
+    visible: {
+      scale: 1,
+      transition: { type: "spring", damping: 20, stiffness: 300 },
+    },
+  },
+}
+
+const addDefaultVariants = (variants: Variants) => ({
+  hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
+  visible: { ...defaultItemVariants.visible, ...variants.visible },
+})
+
+function AnimatedGroup({
+  as = "div",
+  asChild = "div",
+  children,
+  className,
+  preset,
+  variants,
+  ...divProps
+}: AnimatedGroupProps) {
+  const selectedVariants = {
+    container: addDefaultVariants(defaultContainerVariants),
+    item: addDefaultVariants(preset ? presetVariants[preset] : {}),
+  }
+  const containerVariants = variants?.container ?? selectedVariants.container
+  const itemVariants = variants?.item ?? selectedVariants.item
+
+  const MotionComponent = motion(as)
+  const MotionChild = motion(asChild)
+
+  return (
+    <MotionComponent
+      animate="visible"
+      className={className}
+      initial="hidden"
+      variants={containerVariants}
+      {...divProps}
+    >
+      {React.Children.map(children, (child, index) => (
+        <MotionChild key={index} variants={itemVariants}>
+          {child}
+        </MotionChild>
+      ))}
+    </MotionComponent>
+  )
+}
+
+export { AnimatedGroup }

package/templates/marketing-site/src/components/motion-primitives/text-effect.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import {
+  AnimatePresence,
+  motion,
+  type TargetAndTransition,
+  type Transition,
+  type Variant,
+  type Variants,
+} from "motion/react"
+import React from "react"
+
+import { cn } from "~/lib/utils"
+
+export type PerType = "char" | "line" | "word"
+export type PresetType = "blur" | "fade" | "fade-in-blur" | "scale" | "slide"
+
+export type TextEffectProps = {
+  as?: keyof React.JSX.IntrinsicElements
+  children: string
+  className?: string
+  containerTransition?: Transition
+  delay?: number
+  onAnimationComplete?: () => void
+  onAnimationStart?: () => void
+  per?: PerType
+  preset?: PresetType
+  segmentTransition?: Transition
+  segmentWrapperClassName?: string
+  speedReveal?: number
+  speedSegment?: number
+  style?: React.CSSProperties
+  trigger?: boolean
+  variants?: {
+    container?: Variants
+    item?: Variants
+  }
+}
+
+const defaultStaggerTimes: Record<PerType, number> = {
+  char: 0.03,
+  line: 0.1,
+  word: 0.05,
+}
+
+const defaultContainerVariants: Variants = {
+  hidden: { opacity: 0 },
+  exit: {
+    transition: { staggerChildren: 0.05, staggerDirection: -1 },
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+}
+
+const defaultItemVariants: Variants = {
+  hidden: { opacity: 0 },
+  exit: { opacity: 0 },
+  visible: {
+    opacity: 1,
+  },
+}
+
+const presetVariants: Record<
+  PresetType,
+  { container: Variants; item: Variants }
+> = {
+  slide: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      exit: { opacity: 0, y: 20 },
+      visible: { opacity: 1, y: 0 },
+    },
+  },
+  blur: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { filter: "blur(12px)", opacity: 0 },
+      exit: { filter: "blur(12px)", opacity: 0 },
+      visible: { filter: "blur(0px)", opacity: 1 },
+    },
+  },
+  fade: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0 },
+      exit: { opacity: 0 },
+      visible: { opacity: 1 },
+    },
+  },
+  "fade-in-blur": {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { filter: "blur(12px)", opacity: 0, y: 20 },
+      exit: { filter: "blur(12px)", opacity: 0, y: 20 },
+      visible: { filter: "blur(0px)", opacity: 1, y: 0 },
+    },
+  },
+  scale: {
+    container: defaultContainerVariants,
+    item: {
+      hidden: { opacity: 0, scale: 0 },
+      exit: { opacity: 0, scale: 0 },
+      visible: { opacity: 1, scale: 1 },
+    },
+  },
+}
+
+const AnimationComponent: React.FC<{
+  per: "char" | "line" | "word"
+  segment: string
+  segmentWrapperClassName?: string
+  variants: Variants
+}> = React.memo(({ per, segment, segmentWrapperClassName, variants }) => {
+  const content =
+    per === "line" ? (
+      <motion.span className="block" variants={variants}>
+        {segment}
+      </motion.span>
+    ) : per === "word" ? (
+      <motion.span
+        aria-hidden="true"
+        className="inline-block whitespace-pre"
+        variants={variants}
+      >
+        {segment}
+      </motion.span>
+    ) : (
+      <motion.span className="inline-block whitespace-pre">
+        {segment.split("").map((char, charIndex) => (
+          <motion.span
+            aria-hidden="true"
+            className="inline-block whitespace-pre"
+            key={`char-${charIndex}`}
+            variants={variants}
+          >
+            {char}
+          </motion.span>
+        ))}
+      </motion.span>
+    )
+
+  if (!segmentWrapperClassName) {
+    return content
+  }
+
+  const defaultWrapperClassName = per === "line" ? "block" : "inline-block"
+
+  return (
+    <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
+      {content}
+    </span>
+  )
+})
+
+AnimationComponent.displayName = "AnimationComponent"
+
+const splitText = (text: string, per: "char" | "line" | "word") => {
+  if (per === "line") return text.split("\n")
+  return text.split(/(\s+)/)
+}
+
+const hasTransition = (
+  variant: Variant,
+): variant is TargetAndTransition & { transition?: Transition } => {
+  return (
+    typeof variant === "object" && variant !== null && "transition" in variant
+  )
+}
+
+const createVariantsWithTransition = (
+  baseVariants: Variants,
+  transition?: Transition & { exit?: Transition },
+): Variants => {
+  if (!transition) return baseVariants
+
+  const { ...mainTransition } = transition
+
+  return {
+    ...baseVariants,
+    exit: {
+      ...baseVariants.exit,
+      transition: {
+        ...(hasTransition(baseVariants.exit)
+          ? baseVariants.exit.transition
+          : {}),
+        ...mainTransition,
+        staggerDirection: -1,
+      },
+    },
+    visible: {
+      ...baseVariants.visible,
+      transition: {
+        ...(hasTransition(baseVariants.visible)
+          ? baseVariants.visible.transition
+          : {}),
+        ...mainTransition,
+      },
+    },
+  }
+}
+
+export function TextEffect({
+  as = "p",
+  children,
+  className,
+  containerTransition,
+  delay = 0,
+  onAnimationComplete,
+  onAnimationStart,
+  per = "word",
+  preset = "fade",
+  segmentTransition,
+  segmentWrapperClassName,
+  speedReveal = 1,
+  speedSegment = 1,
+  style,
+  trigger = true,
+  variants,
+}: TextEffectProps) {
+  const segments = splitText(children, per)
+  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div
+
+  const baseVariants = preset
+    ? presetVariants[preset]
+    : { container: defaultContainerVariants, item: defaultItemVariants }
+
+  const stagger = defaultStaggerTimes[per] / speedReveal
+
+  const baseDuration = 0.3 / speedSegment
+
+  const customStagger = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+        ?.staggerChildren
+    : undefined
+
+  const customDelay = hasTransition(variants?.container?.visible ?? {})
+    ? (variants?.container?.visible as TargetAndTransition).transition
+        ?.delayChildren
+    : undefined
+
+  const computedVariants = {
+    container: createVariantsWithTransition(
+      variants?.container ?? baseVariants.container,
+      {
+        delayChildren: customDelay ?? delay,
+        staggerChildren: customStagger ?? stagger,
+        ...containerTransition,
+        exit: {
+          staggerChildren: customStagger ?? stagger,
+          staggerDirection: -1,
+        },
+      },
+    ),
+    item: createVariantsWithTransition(variants?.item ?? baseVariants.item, {
+      duration: baseDuration,
+      ...segmentTransition,
+    }),
+  }
+
+  return (
+    <AnimatePresence mode="popLayout">
+      {trigger && (
+        <MotionTag
+          animate="visible"
+          className={className}
+          exit="exit"
+          initial="hidden"
+          onAnimationComplete={onAnimationComplete}
+          onAnimationStart={onAnimationStart}
+          style={style}
+          variants={computedVariants.container}
+        >
+          {per !== "line" ? <span className="sr-only">{children}</span> : null}
+          {segments.map((segment, index) => (
+            <AnimationComponent
+              key={`${per}-${index}-${segment}`}
+              per={per}
+              segment={segment}
+              segmentWrapperClassName={segmentWrapperClassName}
+              variants={computedVariants.item}
+            />
+          ))}
+        </MotionTag>
+      )}
+    </AnimatePresence>
+  )
+}

package/templates/marketing-site/src/components/ui/accordion.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "~/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }