@eslamdevui/ui 3.2.0 → 3.2.1

package/dist/shared/{ui.DQZ75GCP.mjs → ui.DErCA3YU.mjs}

@@ -191,6 +191,27 @@ const alert = (options) => ({
   }
 });
 
+const authForm = {
+  slots: {
+    root: "w-full space-y-6",
+    header: "flex flex-col text-center",
+    leading: "mb-2",
+    leadingIcon: "size-8 shrink-0 inline-block",
+    title: "text-xl text-pretty font-semibold text-highlighted",
+    description: "mt-1 text-base text-pretty text-muted",
+    body: "gap-y-6 flex flex-col",
+    providers: "space-y-3",
+    checkbox: "",
+    select: "",
+    password: "w-full",
+    otp: "w-full justify-center",
+    input: "w-full",
+    separator: "",
+    form: "space-y-5",
+    footer: "text-sm text-center text-muted mt-2"
+  }
+};
+
 const avatar = {
   slots: {
     root: "inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-elevated",
@@ -427,6 +448,196 @@ const badge$1 = (options) => ({
   }
 });
 
+const banner = (options) => {
+  const colors = options.theme.colors || [];
+  return {
+    slots: {
+      root: [
+        "relative z-50 w-full",
+        "transition-colors"
+      ],
+      container: "flex items-center justify-between gap-3 h-12",
+      left: "hidden lg:flex-1 lg:flex lg:items-center",
+      center: "flex items-center gap-1.5 min-w-0",
+      right: "lg:flex-1 flex items-center justify-end",
+      icon: "size-5 shrink-0 text-inverted pointer-events-none",
+      title: "text-sm text-inverted font-medium truncate",
+      actions: "flex gap-1.5 shrink-0 isolate",
+      close: "text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0"
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries(
+          colors.map((color) => [
+            color,
+            { root: `bg-${color}` }
+          ])
+        ),
+        neutral: { root: "bg-inverted" }
+      },
+      to: {
+        true: ""
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        color,
+        to: true,
+        class: {
+          root: `hover:bg-${color}/90`
+        }
+      })),
+      {
+        color: "neutral",
+        to: true,
+        class: {
+          root: "hover:bg-inverted/90"
+        }
+      }
+    ]
+  };
+};
+
+const blogPost = (_options) => {
+  return {
+    slots: {
+      root: "relative group/blog-post flex flex-col rounded-lg overflow-hidden",
+      header: "relative overflow-hidden aspect-[16/9] w-full pointer-events-none",
+      body: "min-w-0 flex-1 flex flex-col",
+      footer: "",
+      image: "object-cover object-top w-full h-full",
+      title: "text-xl text-pretty font-semibold text-highlighted",
+      description: "mt-1 text-base text-pretty",
+      authors: "pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5",
+      avatar: "",
+      meta: "flex items-center gap-2 mb-2",
+      date: "text-sm",
+      badge: ""
+    },
+    variants: {
+      orientation: {
+        horizontal: {
+          root: "lg:grid lg:grid-cols-2 lg:items-center gap-x-8",
+          body: "justify-center p-4 sm:p-6 lg:px-0"
+        },
+        vertical: {
+          root: "flex flex-col",
+          body: "p-4 sm:p-6"
+        }
+      },
+      variant: {
+        outline: {
+          root: "bg-default ring ring-default",
+          date: "text-toned",
+          description: "text-muted"
+        },
+        soft: {
+          root: "bg-elevated/50",
+          date: "text-muted",
+          description: "text-toned"
+        },
+        subtle: {
+          root: "bg-elevated/50 ring ring-default",
+          date: "text-muted",
+          description: "text-toned"
+        },
+        ghost: {
+          date: "text-toned",
+          description: "text-muted",
+          header: "shadow-lg rounded-lg"
+        },
+        naked: {
+          root: "p-0 sm:p-0",
+          date: "text-toned",
+          description: "text-muted",
+          header: "shadow-lg rounded-lg"
+        }
+      },
+      to: {
+        true: {
+          root: "transition",
+          image: "transform transition-transform duration-200 group-hover/blog-post:scale-110",
+          avatar: "transform transition-transform duration-200 hover:scale-115"
+        }
+      },
+      image: {
+        true: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        to: true,
+        class: {
+          root: "hover:bg-elevated/50"
+        }
+      },
+      {
+        variant: "soft",
+        to: true,
+        class: {
+          root: "hover:bg-elevated"
+        }
+      },
+      {
+        variant: "subtle",
+        to: true,
+        class: {
+          root: "hover:bg-elevated hover:ring-accented"
+        }
+      },
+      {
+        variant: "ghost",
+        to: true,
+        class: {
+          root: "hover:bg-elevated/50",
+          header: [
+            "group-hover/blog-post:shadow-none",
+            "transition-all"
+          ]
+        }
+      },
+      {
+        variant: "ghost",
+        to: true,
+        orientation: "vertical",
+        class: {
+          header: "group-hover/blog-post:rounded-b-none"
+        }
+      },
+      {
+        variant: "ghost",
+        to: true,
+        orientation: "horizontal",
+        class: {
+          header: "group-hover/blog-post:rounded-r-none"
+        }
+      },
+      {
+        orientation: "vertical",
+        image: false,
+        variant: "naked",
+        class: {
+          body: "p-0 sm:p-0"
+        }
+      }
+    ],
+    defaultVariants: {
+      variant: "outline"
+    }
+  };
+};
+
+const blogPosts = {
+  base: "flex flex-col gap-8 lg:gap-y-16",
+  variants: {
+    orientation: {
+      horizontal: "sm:grid sm:grid-cols-2 lg:grid-cols-3",
+      vertical: ""
+    }
+  }
+};
+
 const breadcrumb = (options) => ({
   slots: {
     root: "relative min-w-0",
@@ -766,6 +977,57 @@ const carousel = (options) => ({
   }
 });
 
+const changelogVersion = {
+  slots: {
+    root: "relative",
+    container: "flex flex-col mx-auto max-w-2xl",
+    header: "",
+    meta: "flex items-center gap-3 mb-2",
+    date: "text-sm/6 text-toned truncate",
+    badge: "",
+    title: "relative text-xl text-pretty font-semibold text-highlighted",
+    description: "text-base text-pretty text-muted mt-1",
+    imageWrapper: "relative overflow-hidden rounded-lg aspect-[16/9] mt-5 group/changelog-version-image",
+    image: "object-cover object-top w-full h-full",
+    authors: "flex flex-wrap gap-x-4 gap-y-1.5",
+    footer: "border-t border-default pt-5 flex items-center justify-between",
+    indicator: "absolute left-0 top-0 w-32 hidden lg:flex items-center justify-end gap-3 min-w-0",
+    dot: "size-4 rounded-full bg-default ring ring-default flex items-center justify-center my-1",
+    dotInner: "size-2 rounded-full bg-primary"
+  },
+  variants: {
+    body: {
+      false: {
+        footer: "mt-5"
+      }
+    },
+    badge: {
+      false: {
+        meta: "lg:hidden"
+      }
+    },
+    to: {
+      true: {
+        image: "transform transition-transform duration-200 group-hover/changelog-version-image:scale-105"
+      }
+    },
+    hidden: {
+      true: {
+        date: "lg:hidden"
+      }
+    }
+  }
+};
+
+const changelogVersions = {
+  slots: {
+    root: "relative",
+    container: "flex flex-col gap-y-8 sm:gap-y-12 lg:gap-y-16",
+    indicator: "absolute hidden lg:block overflow-hidden inset-y-3 left-32 h-full w-px bg-border -ml-[8.5px]",
+    beam: "absolute left-0 top-0 w-full bg-primary will-change-[height]"
+  }
+};
+
 const chatMessage = {
   slots: {
     root: "group/message relative w-full",
@@ -904,6 +1166,15 @@ const chatMessages = {
   }
 };
 
+const chatPalette = {
+  slots: {
+    root: "relative flex-1 flex flex-col min-h-0 min-w-0",
+    prompt: "px-0 rounded-t-none border-t border-default",
+    close: "",
+    content: "overflow-y-auto flex-1 flex flex-col py-3"
+  }
+};
+
 const chatPrompt = {
   slots: {
     root: "relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur",
@@ -1327,10 +1598,13 @@ const contentNavigation = (options) => {
   const colors = options.theme.colors || [];
   const variants = ["pill", "link"];
   const colorVariants = Object.fromEntries(
-    colors.map((color) => [color, {
-      trigger: `focus-visible:ring-${color}`,
-      link: `focus-visible:before:ring-${color}`
-    }])
+    colors.map((color) => [
+      color,
+      {
+        trigger: `focus-visible:ring-${color}`,
+        link: `focus-visible:before:ring-${color}`
+      }
+    ])
   );
   const highlightColorVariants = Object.fromEntries(
     colors.map((color) => [color, ""])
@@ -1358,7 +1632,7 @@ const contentNavigation = (options) => {
         ].filter(Boolean),
         linkLeadingIcon: [
           "group-hover:text-default group-data-[state=open]:text-default",
-          "transition-colors"
+          "transition-colors before:transition-colors"
         ]
       }
     })),
@@ -1426,7 +1700,8 @@ const contentNavigation = (options) => {
         }
       },
       highlightColor: {
-        ...highlightColorVariants
+        ...highlightColorVariants,
+        neutral: ""
       },
       variant: Object.fromEntries(variants.map((v) => [v, ""])),
       active: {
@@ -2025,6 +2300,47 @@ const error = {
   }
 };
 
+const footer = {
+  slots: {
+    root: "",
+    top: "py-8 lg:py-12",
+    bottom: "py-8 lg:py-12",
+    container: "py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3",
+    left: "flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1",
+    center: "mt-3 lg:mt-0 lg:order-2 flex items-center justify-center",
+    right: "lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3"
+  }
+};
+
+const footerColumns = {
+  slots: {
+    root: "xl:grid xl:grid-cols-3 xl:gap-8",
+    left: "mb-10 xl:mb-0",
+    center: "flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2",
+    right: "mt-10 xl:mt-0",
+    label: "text-sm font-semibold",
+    list: "mt-6 space-y-4",
+    item: "relative",
+    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    linkLeadingIcon: "size-5 shrink-0",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed inline-block"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary font-medium"
+      },
+      false: {
+        link: [
+          "text-muted hover:text-default",
+          "transition-colors"
+        ]
+      }
+    }
+  }
+};
+
 const form = {
   base: ""
 };
@@ -2060,6 +2376,32 @@ const formField = {
   }
 };
 
+const header = {
+  slots: {
+    root: "bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50",
+    container: "flex items-center justify-between gap-3 h-full",
+    left: "lg:flex-1 flex items-center gap-1.5",
+    center: "hidden lg:flex",
+    right: "flex items-center justify-end lg:flex-1 gap-1.5",
+    title: "shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5",
+    toggle: "lg:hidden",
+    content: "lg:hidden",
+    overlay: "lg:hidden",
+    header: "px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3",
+    body: "p-4 sm:p-6 overflow-y-auto"
+  },
+  variants: {
+    toggleSide: {
+      left: {
+        toggle: "-ms-1.5"
+      },
+      right: {
+        toggle: "-me-1.5"
+      }
+    }
+  }
+};
+
 const input = (options) => ({
   slots: {
     root: "relative inline-flex items-center",
@@ -2537,6 +2879,10 @@ const link = (options) => ({
   }]
 });
 
+const main = {
+  base: "min-h-[calc(100vh-var(--ui-header-height))]"
+};
+
 const modal = {
   slots: {
     overlay: "fixed inset-0 bg-elevated/75",
@@ -2835,59 +3181,623 @@ const navigationMenu = (options) => ({
   }
 });
 
-const pagination = {
+const page = {
   slots: {
-    root: "",
-    list: "flex items-center gap-1",
-    ellipsis: "pointer-events-none",
-    label: "min-w-5 text-center",
-    first: "",
-    prev: "",
-    item: "",
-    next: "",
-    last: ""
+    root: "flex flex-col lg:grid lg:grid-cols-10 lg:gap-10",
+    left: "lg:col-span-2",
+    center: "lg:col-span-8",
+    right: "lg:col-span-2 order-first lg:order-last"
+  },
+  variants: {
+    left: {
+      true: ""
+    },
+    right: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      left: true,
+      right: true,
+      class: {
+        center: "lg:col-span-6"
+      }
+    },
+    {
+      left: false,
+      right: false,
+      class: {
+        center: "lg:col-span-10"
+      }
+    }
+  ]
+};
+
+const pageAccordion = {
+  slots: {
+    base: "",
+    trigger: "text-base",
+    body: "text-base text-muted"
   }
 };
 
-const pinInput = (options) => ({
+const pageAnchors = {
   slots: {
-    root: "relative inline-flex items-center gap-1.5",
-    base: ["rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
+    root: "",
+    list: "",
+    item: "relative",
+    link: "group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary",
+    linkLeading: "rounded-md p-1 inline-flex ring-inset ring",
+    linkLeadingIcon: "size-4 shrink-0",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed"
   },
   variants: {
-    size: {
-      xs: {
-        base: "size-6 text-xs"
-      },
-      sm: {
-        base: "size-7 text-xs"
-      },
-      md: {
-        base: "size-8 text-sm"
-      },
-      lg: {
-        base: "size-9 text-sm"
+    active: {
+      true: {
+        link: "text-primary font-semibold",
+        linkLeading: "bg-primary ring-primary text-inverted"
       },
-      xl: {
-        base: "size-10 text-base"
+      false: {
+        link: [
+          "text-muted hover:text-default font-medium",
+          "transition-colors"
+        ],
+        linkLeading: [
+          "bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted",
+          "transition"
+        ]
       }
-    },
-    variant: {
-      outline: "text-highlighted bg-default ring ring-inset ring-accented",
-      soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
-      subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
-      ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
-      none: "text-highlighted bg-transparent"
-    },
-    color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
-      neutral: ""
-    },
-    highlight: {
-      true: ""
     }
-  },
-  compoundVariants: [...(options.theme.colors || []).map((color) => ({
+  }
+};
+
+const pageAside = {
+  slots: {
+    root: "hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--ui-header-height))] lg:sticky lg:top-(--ui-header-height) py-8 lg:ps-4 lg:-ms-4 lg:pe-6.5",
+    container: "relative",
+    top: "sticky -top-8 -mt-8 pointer-events-none z-[1]",
+    topHeader: "h-8 bg-default -mx-4 px-4",
+    topBody: "bg-default relative pointer-events-auto flex flex-col -mx-4 px-4",
+    topFooter: "h-8 bg-gradient-to-b from-default -mx-4 px-4"
+  }
+};
+
+const pageBody = {
+  base: "mt-8 pb-24 space-y-12"
+};
+
+const pageCard = (_options) => {
+  return {
+    slots: {
+      root: "relative flex rounded-lg",
+      spotlight: "absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90",
+      container: "relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6",
+      wrapper: "flex flex-col flex-1 items-start",
+      header: "mb-4",
+      body: "flex-1",
+      footer: "pt-4 mt-auto",
+      leading: "inline-flex items-center mb-2.5",
+      leadingIcon: "size-5 shrink-0 text-primary",
+      title: "text-base text-pretty font-semibold text-highlighted",
+      description: "text-[15px] text-pretty"
+    },
+    variants: {
+      orientation: {
+        horizontal: {
+          container: "lg:grid-cols-2 lg:items-center"
+        },
+        vertical: {
+          container: ""
+        }
+      },
+      reverse: {
+        true: {
+          wrapper: "lg:order-last"
+        }
+      },
+      variant: {
+        solid: {
+          root: "bg-inverted text-inverted",
+          title: "text-inverted",
+          description: "text-dimmed"
+        },
+        outline: {
+          root: "bg-default ring ring-default",
+          description: "text-muted"
+        },
+        soft: {
+          root: "bg-elevated/50",
+          description: "text-toned"
+        },
+        subtle: {
+          root: "bg-elevated/50 ring ring-default",
+          description: "text-toned"
+        },
+        ghost: {
+          description: "text-muted"
+        },
+        naked: {
+          container: "p-0 sm:p-0",
+          description: "text-muted"
+        }
+      },
+      to: {
+        true: {
+          root: "transition"
+        }
+      },
+      title: {
+        true: {
+          description: "mt-1"
+        }
+      },
+      highlight: {
+        true: {
+          root: "ring-2"
+        }
+      },
+      highlightColor: {
+        primary: {},
+        secondary: {},
+        success: {},
+        info: {},
+        warning: {},
+        error: {},
+        neutral: {}
+      },
+      spotlight: {
+        true: {
+          root: "[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]"
+        }
+      },
+      spotlightColor: {
+        primary: {},
+        secondary: {},
+        success: {},
+        info: {},
+        warning: {},
+        error: {},
+        neutral: {}
+      }
+    },
+    compoundVariants: [
+      { variant: "solid", to: true, class: { root: "hover:bg-inverted/90" } },
+      { variant: "outline", to: true, class: { root: "hover:bg-elevated/50" } },
+      { variant: "soft", to: true, class: { root: "hover:bg-elevated" } },
+      { variant: "subtle", to: true, class: { root: "hover:bg-elevated" } },
+      { variant: "subtle", to: true, highlight: false, class: { root: "hover:ring-accented" } },
+      { variant: "ghost", to: true, class: { root: "hover:bg-elevated/50" } },
+      { highlightColor: "primary", highlight: true, class: { root: "ring-primary" } },
+      { highlightColor: "secondary", highlight: true, class: { root: "ring-secondary" } },
+      { highlightColor: "success", highlight: true, class: { root: "ring-success" } },
+      { highlightColor: "info", highlight: true, class: { root: "ring-info" } },
+      { highlightColor: "warning", highlight: true, class: { root: "ring-warning" } },
+      { highlightColor: "error", highlight: true, class: { root: "ring-error" } },
+      { highlightColor: "neutral", highlight: true, class: { root: "ring-inverted" } },
+      { spotlightColor: "primary", spotlight: true, class: { root: "[--spotlight-color:var(--ui-primary)]" } },
+      { spotlightColor: "secondary", spotlight: true, class: { root: "[--spotlight-color:var(--ui-secondary)]" } },
+      { spotlightColor: "success", spotlight: true, class: { root: "[--spotlight-color:var(--ui-success)]" } },
+      { spotlightColor: "info", spotlight: true, class: { root: "[--spotlight-color:var(--ui-info)]" } },
+      { spotlightColor: "warning", spotlight: true, class: { root: "[--spotlight-color:var(--ui-warning)]" } },
+      { spotlightColor: "error", spotlight: true, class: { root: "[--spotlight-color:var(--ui-error)]" } },
+      { spotlightColor: "neutral", spotlight: true, class: { root: "[--spotlight-color:var(--ui-bg-inverted)]" } }
+    ],
+    defaultVariants: {
+      variant: "outline",
+      highlightColor: "primary",
+      spotlightColor: "primary"
+    }
+  };
+};
+
+const pageColumns = {
+  base: "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
+};
+
+const pageCta = {
+  slots: {
+    root: "relative isolate rounded-xl overflow-hidden",
+    container: "flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
+    wrapper: "",
+    title: "text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted",
+    description: "text-base sm:text-lg text-muted",
+    links: "mt-8 flex flex-wrap gap-x-6 gap-y-3"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty"
+      },
+      vertical: {
+        container: "",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center"
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "lg:order-last"
+      }
+    },
+    variant: {
+      solid: {
+        root: "bg-inverted text-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      },
+      outline: {
+        root: "bg-default ring ring-default",
+        description: "text-muted"
+      },
+      soft: {
+        root: "bg-elevated/50",
+        description: "text-toned"
+      },
+      subtle: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
+      },
+      naked: {
+        description: "text-muted"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-6"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline"
+  }
+};
+
+const pageFeature = {
+  slots: {
+    root: "relative",
+    wrapper: "",
+    leading: "inline-flex items-center justify-center",
+    leadingIcon: "size-5 shrink-0 text-primary",
+    title: "text-base text-pretty font-semibold text-highlighted",
+    description: "text-[15px] text-pretty text-muted"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex items-start gap-2.5",
+        leading: "p-0.5"
+      },
+      vertical: {
+        leading: "mb-2.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
+      }
+    }
+  }
+};
+
+const pageGrid = {
+  base: "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+};
+
+const pageHeader = {
+  slots: {
+    root: "relative border-b border-default py-8",
+    container: "",
+    wrapper: "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4",
+    headline: "mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5",
+    title: "text-3xl sm:text-4xl text-pretty font-bold text-highlighted",
+    description: "text-lg text-pretty text-muted",
+    links: "flex flex-wrap items-center gap-1.5"
+  },
+  variants: {
+    title: {
+      true: {
+        description: "mt-4"
+      }
+    }
+  }
+};
+
+const pageHero = {
+  slots: {
+    root: "relative isolate",
+    container: "flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+    wrapper: "",
+    headline: "mb-4",
+    title: "text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted",
+    description: "text-lg sm:text-xl/8 text-muted",
+    links: "mt-10 flex flex-wrap gap-x-6 gap-y-3"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty"
+      },
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        wrapper: "text-center",
+        description: "text-balance",
+        links: "justify-center"
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "order-last"
+      }
+    },
+    headline: {
+      true: {
+        headline: "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-6"
+      }
+    }
+  }
+};
+
+const pageLinks = {
+  slots: {
+    root: "flex flex-col gap-3",
+    title: "text-sm font-semibold flex items-center gap-1.5",
+    list: "flex flex-col gap-2",
+    item: "relative",
+    link: "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    linkLeadingIcon: "size-5 shrink-0",
+    linkLabel: "truncate",
+    linkLabelExternalIcon: "size-3 absolute top-0 text-dimmed"
+  },
+  variants: {
+    active: {
+      true: {
+        link: "text-primary font-medium"
+      },
+      false: {
+        link: [
+          "text-muted hover:text-default",
+          "transition-colors"
+        ]
+      }
+    }
+  }
+};
+
+const pageList = {
+  base: "relative flex flex-col",
+  variants: {
+    divide: {
+      true: "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px"
+    }
+  }
+};
+
+const pageLogos = {
+  slots: {
+    root: "relative overflow-hidden",
+    title: "text-lg text-center font-semibold text-highlighted",
+    logos: "mt-10",
+    logo: "size-10 shrink-0"
+  },
+  variants: {
+    marquee: {
+      false: {
+        logos: "flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"
+      }
+    }
+  }
+};
+
+const pageMarquee = {
+  slots: {
+    root: "group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]",
+    content: "flex items-center shrink-0 justify-around gap-(--gap) min-w-max"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        content: "w-full"
+      },
+      vertical: {
+        content: "h-full"
+      }
+    },
+    pauseOnHover: {
+      true: {
+        content: "group-hover:[animation-play-state:paused]"
+      }
+    },
+    reverse: {
+      true: {
+        content: "[animation-direction:reverse]"
+      }
+    },
+    overlay: {
+      true: {
+        root: 'before:absolute before:pointer-events-none before:content-[""] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[""] after:z-2 after:from-default after:to-transparent'
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      class: {
+        root: "flex-row",
+        content: "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
+      }
+    },
+    {
+      orientation: "horizontal",
+      overlay: true,
+      class: {
+        root: "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
+      }
+    },
+    {
+      orientation: "vertical",
+      class: {
+        root: "flex-col",
+        content: "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
+      }
+    },
+    {
+      orientation: "vertical",
+      overlay: true,
+      class: {
+        root: "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
+      }
+    }
+  ]
+};
+
+const pageSection = {
+  slots: {
+    root: "relative isolate",
+    container: "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+    wrapper: "",
+    header: "",
+    leading: "flex items-center mb-6",
+    leadingIcon: "size-10 shrink-0 text-primary",
+    headline: "mb-3",
+    title: "text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted",
+    description: "text-base sm:text-lg text-muted",
+    body: "mt-8",
+    features: "grid",
+    footer: "mt-8",
+    links: "flex flex-wrap gap-x-6 gap-y-3"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty",
+        features: "gap-4"
+      },
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        leading: "justify-center",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center",
+        features: "sm:grid-cols-2 lg:grid-cols-3 gap-8"
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "lg:order-last"
+      }
+    },
+    headline: {
+      true: {
+        headline: "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-6"
+      }
+    },
+    description: {
+      true: ""
+    },
+    body: {
+      true: ""
+    },
+    features: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "vertical",
+      title: true,
+      class: {
+        body: "mt-16"
+      }
+    },
+    {
+      orientation: "vertical",
+      description: true,
+      class: {
+        body: "mt-16"
+      }
+    },
+    {
+      orientation: "vertical",
+      body: true,
+      class: {
+        footer: "mt-16"
+      }
+    }
+  ]
+};
+
+const pagination = {
+  slots: {
+    root: "",
+    list: "flex items-center gap-1",
+    ellipsis: "pointer-events-none",
+    label: "min-w-5 text-center",
+    first: "",
+    prev: "",
+    item: "",
+    next: "",
+    last: ""
+  }
+};
+
+const pinInput = (options) => ({
+  slots: {
+    root: "relative inline-flex items-center gap-1.5",
+    base: ["rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75", options.theme.transitions && "transition-colors"]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "size-6 text-xs"
+      },
+      sm: {
+        base: "size-7 text-xs"
+      },
+      md: {
+        base: "size-8 text-sm"
+      },
+      lg: {
+        base: "size-9 text-sm"
+      },
+      xl: {
+        base: "size-10 text-base"
+      }
+    },
+    variant: {
+      outline: "text-highlighted bg-default ring ring-inset ring-accented",
+      soft: "text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50",
+      subtle: "text-highlighted bg-elevated ring ring-inset ring-accented",
+      ghost: "text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent",
+      none: "text-highlighted bg-transparent"
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color) => [color, ""])),
+      neutral: ""
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color) => ({
     color,
     variant: ["outline", "subtle"],
     class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
@@ -2918,6 +3828,171 @@ const popover = {
   }
 };
 
+const pricingPlan = {
+  slots: {
+    root: "relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6",
+    header: "",
+    body: "flex flex-col min-w-0",
+    footer: "flex flex-col gap-6 items-center",
+    titleWrapper: "flex items-center gap-3",
+    title: "text-highlighted text-2xl sm:text-3xl text-pretty font-semibold",
+    description: "text-muted text-base text-pretty mt-2",
+    priceWrapper: "flex items-center gap-1",
+    price: "text-highlighted text-3xl sm:text-4xl font-semibold",
+    discount: "text-muted line-through text-xl sm:text-2xl",
+    billing: "flex flex-col justify-between min-w-0",
+    billingPeriod: "text-toned truncate text-xs font-medium",
+    billingCycle: "text-muted truncate text-xs font-medium",
+    features: "flex flex-col gap-3 flex-1 mt-6 grow-0",
+    feature: "flex items-center gap-2 min-w-0",
+    featureIcon: "size-5 shrink-0 text-primary",
+    featureTitle: "text-muted text-sm truncate",
+    badge: "",
+    button: "",
+    tagline: "text-base font-semibold text-default",
+    terms: "text-xs/5 text-muted text-center text-balance"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default",
+        body: "lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center",
+        footer: "lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto",
+        features: "lg:grid lg:grid-cols-2 lg:mt-12"
+      },
+      vertical: {
+        footer: "justify-end",
+        priceWrapper: "mt-6"
+      }
+    },
+    variant: {
+      solid: {
+        root: "bg-inverted",
+        title: "text-inverted",
+        description: "text-dimmed",
+        price: "text-inverted",
+        discount: "text-dimmed",
+        billingCycle: "text-dimmed",
+        billingPeriod: "text-dimmed",
+        featureTitle: "text-dimmed"
+      },
+      outline: {
+        root: "bg-default ring ring-default"
+      },
+      soft: {
+        root: "bg-elevated/50"
+      },
+      subtle: {
+        root: "bg-elevated/50 ring ring-default"
+      }
+    },
+    highlight: {
+      true: {
+        root: "ring-2 ring-inset ring-primary"
+      }
+    },
+    scale: {
+      true: {
+        root: "lg:scale-[1.1] lg:z-[1]"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      variant: "soft",
+      class: {
+        root: "divide-accented"
+      }
+    },
+    {
+      orientation: "horizontal",
+      variant: "subtle",
+      class: {
+        root: "divide-accented"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "outline"
+  }
+};
+
+const pricingPlans = {
+  base: "flex flex-col gap-y-8",
+  variants: {
+    orientation: {
+      horizontal: "lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]",
+      vertical: ""
+    },
+    compact: {
+      false: "gap-x-8"
+    },
+    scale: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      compact: false,
+      scale: true,
+      class: "lg:gap-x-13"
+    }
+  ]
+};
+
+const pricingTable = {
+  slots: {
+    root: "w-full relative",
+    table: "w-full table-fixed border-separate border-spacing-x-0 hidden md:table",
+    list: "md:hidden flex flex-col gap-6 w-full",
+    item: "p-6 flex flex-col border border-default rounded-lg",
+    caption: "sr-only",
+    thead: "",
+    tbody: "",
+    tr: "",
+    th: "py-4 font-normal text-left border-b border-default",
+    td: "px-6 py-4 text-center border-b border-default",
+    tier: "p-6 text-left font-normal",
+    tierTitleWrapper: "flex items-center gap-3",
+    tierTitle: "text-lg font-semibold text-highlighted",
+    tierDescription: "text-sm font-normal text-muted mt-1",
+    tierBadge: "truncate",
+    tierPriceWrapper: "flex items-center gap-1 mt-4",
+    tierPrice: "text-highlighted text-3xl sm:text-4xl font-semibold",
+    tierDiscount: "text-muted line-through text-xl sm:text-2xl",
+    tierBilling: "flex flex-col justify-between min-w-0",
+    tierBillingPeriod: "text-toned truncate text-xs font-medium",
+    tierBillingCycle: "text-muted truncate text-xs font-medium",
+    tierButton: "mt-6",
+    tierFeatureIcon: "size-5 shrink-0",
+    section: "mt-6 flex flex-col gap-2",
+    sectionTitle: "font-semibold text-sm text-highlighted",
+    feature: "flex items-center justify-between gap-1",
+    featureTitle: "text-sm text-default",
+    featureValue: "text-sm text-muted flex justify-center min-w-5"
+  },
+  variants: {
+    section: {
+      true: {
+        tr: "*:pt-8"
+      }
+    },
+    active: {
+      true: {
+        tierFeatureIcon: "text-primary"
+      }
+    },
+    highlight: {
+      true: {
+        tier: "bg-elevated/50 border-x border-t border-default rounded-t-lg",
+        td: "bg-elevated/50 border-x border-default",
+        item: "bg-elevated/50"
+      }
+    }
+  }
+};
+
 const progress = (options) => ({
   slots: {
     root: "gap-2",
@@ -4527,21 +5602,118 @@ const tree = (options) => ({
   }
 });
 
+const user = {
+  slots: {
+    root: "relative group/user",
+    wrapper: "",
+    name: "font-medium",
+    description: "text-muted",
+    avatar: "shrink-0"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: "flex items-center"
+      },
+      vertical: {
+        root: "flex flex-col"
+      }
+    },
+    to: {
+      true: {
+        name: [
+          "text-default peer-hover:text-highlighted",
+          "transition-colors"
+        ],
+        description: [
+          "peer-hover:text-toned",
+          "transition-colors"
+        ],
+        avatar: "transform transition-transform duration-200 group-hover/user:scale-115"
+      },
+      false: {
+        name: "text-highlighted",
+        description: ""
+      }
+    },
+    size: {
+      "3xs": {
+        root: "gap-1",
+        wrapper: "flex items-center gap-1",
+        name: "text-xs",
+        description: "text-xs"
+      },
+      "2xs": {
+        root: "gap-1.5",
+        wrapper: "flex items-center gap-1.5",
+        name: "text-xs",
+        description: "text-xs"
+      },
+      "xs": {
+        root: "gap-1.5",
+        wrapper: "flex items-center gap-1.5",
+        name: "text-xs",
+        description: "text-xs"
+      },
+      "sm": {
+        root: "gap-2",
+        name: "text-xs",
+        description: "text-xs"
+      },
+      "md": {
+        root: "gap-2",
+        name: "text-sm",
+        description: "text-xs"
+      },
+      "lg": {
+        root: "gap-2.5",
+        name: "text-sm",
+        description: "text-sm"
+      },
+      "xl": {
+        root: "gap-2.5",
+        name: "text-base",
+        description: "text-sm"
+      },
+      "2xl": {
+        root: "gap-3",
+        name: "text-base",
+        description: "text-base"
+      },
+      "3xl": {
+        root: "gap-3",
+        name: "text-lg",
+        description: "text-base"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+};
+
 const theme = {
   __proto__: null,
   accordion: accordion$1,
   alert: alert,
+  authForm: authForm,
   avatar: avatar,
   avatarGroup: avatarGroup,
   badge: badge$1,
+  banner: banner,
+  blogPost: blogPost,
+  blogPosts: blogPosts,
   breadcrumb: breadcrumb,
   button: button,
   buttonGroup: buttonGroup,
   calendar: calendar,
   card: card$1,
   carousel: carousel,
+  changelogVersion: changelogVersion,
+  changelogVersions: changelogVersions,
   chatMessage: chatMessage,
   chatMessages: chatMessages,
+  chatPalette: chatPalette,
   chatPrompt: chatPrompt,
   chatPromptSubmit: chatPromptSubmit,
   checkbox: checkbox,
@@ -4569,19 +5741,43 @@ const theme = {
   drawer: drawer,
   dropdownMenu: dropdownMenu,
   error: error,
+  footer: footer,
+  footerColumns: footerColumns,
   form: form,
   formField: formField,
+  header: header,
   input: input,
   inputMenu: inputMenu,
   inputNumber: inputNumber,
   inputTags: inputTags,
   kbd: kbd$1,
   link: link,
+  main: main,
   modal: modal,
   navigationMenu: navigationMenu,
+  page: page,
+  pageAccordion: pageAccordion,
+  pageAnchors: pageAnchors,
+  pageAside: pageAside,
+  pageBody: pageBody,
+  pageCard: pageCard,
+  pageColumns: pageColumns,
+  pageCta: pageCta,
+  pageFeature: pageFeature,
+  pageGrid: pageGrid,
+  pageHeader: pageHeader,
+  pageHero: pageHero,
+  pageLinks: pageLinks,
+  pageList: pageList,
+  pageLogos: pageLogos,
+  pageMarquee: pageMarquee,
+  pageSection: pageSection,
   pagination: pagination,
   pinInput: pinInput,
   popover: popover,
+  pricingPlan: pricingPlan,
+  pricingPlans: pricingPlans,
+  pricingTable: pricingTable,
   progress: progress,
   radioGroup: radioGroup,
   select: select,
@@ -4599,7 +5795,8 @@ const theme = {
   toast: toast,
   toaster: toaster,
   tooltip: tooltip,
-  tree: tree
+  tree: tree,
+  user: user
 };
 
 const contentTheme = {