@opensite/ui 2.8.8 → 2.9.0

package/dist/carousel-feature-badge.js

@@ -1,11 +1,11 @@
 "use client";
-import * as React6 from 'react';
-import React6__default from 'react';
+import * as React8 from 'react';
+import React8__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
 import { Img } from '@page-speed/img';
 import useEmblaCarousel from 'embla-carousel-react';
@@ -121,7 +121,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React6.useMemo(() => {
+  const linkType = React8.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -142,7 +142,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React6.useMemo(() => {
+  const normalizedHref = React8.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -160,7 +160,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React6.useMemo(() => {
+  const target = React8.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -173,7 +173,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React6.useMemo(() => {
+  const rel = React8.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -182,7 +182,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React6.useCallback(
+  const handleClick = React8.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -366,7 +366,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React6.forwardRef(
+var Pressable = React8.forwardRef(
   ({
     children,
     className,
@@ -465,7 +465,7 @@ var Pressable = React6.forwardRef(
 );
 Pressable.displayName = "Pressable";
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-var DynamicIcon = React6.memo(function DynamicIcon2({
+var DynamicIcon = React8.memo(function DynamicIcon2({
   apiKey,
   ...props
 }) {
@@ -539,7 +539,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React6__default.forwardRef(
+var Container = React8__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -845,7 +845,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React6__default.forwardRef(
+var Section = React8__default.forwardRef(
   ({
     id,
     title,
@@ -906,6 +906,102 @@ var Section = React6__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React8.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React8.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React8.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React8.isValidElement(reactNode)) {
+          return React8.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React8.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 var SLIDE_LAYOUT_ASPECT_MAP = {
   horizontal: "aspect-video",
   vertical: "aspect-[9/16]",
@@ -926,28 +1022,31 @@ function CarouselFeatureBadge({
   carouselClassName,
   carouselItemClassName,
   optixFlowConfig,
+  actions,
+  actionsSlot,
+  actionsClassName,
   background,
-  spacing,
+  spacing = "none",
   pattern,
   patternOpacity,
   slideLayoutVariant = "square",
   containerMaxWidth = "2xl"
 }) {
   const [emblaRef, emblaApi] = useEmblaCarousel();
-  const [canScrollPrev, setCanScrollPrev] = React6.useState(false);
-  const [canScrollNext, setCanScrollNext] = React6.useState(false);
-  const scrollPrev = React6.useCallback(() => {
+  const [canScrollPrev, setCanScrollPrev] = React8.useState(false);
+  const [canScrollNext, setCanScrollNext] = React8.useState(false);
+  const scrollPrev = React8.useCallback(() => {
     emblaApi?.scrollPrev();
   }, [emblaApi]);
-  const scrollNext = React6.useCallback(() => {
+  const scrollNext = React8.useCallback(() => {
     emblaApi?.scrollNext();
   }, [emblaApi]);
-  const onSelect = React6.useCallback(() => {
+  const onSelect = React8.useCallback(() => {
     if (!emblaApi) return;
     setCanScrollPrev(emblaApi.canScrollPrev());
     setCanScrollNext(emblaApi.canScrollNext());
   }, [emblaApi]);
-  React6.useEffect(() => {
+  React8.useEffect(() => {
     if (!emblaApi) return;
     onSelect();
     emblaApi.on("reInit", onSelect);
@@ -990,12 +1089,46 @@ function CarouselFeatureBadge({
       index
     ));
   };
+  const headerItems = React8.useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-left text-2xl font-semibold md:text-4xl lg:max-w-xl lg:text-6xl text-pretty",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-full text-left text-lg leading-snug lg:max-w-sm text-balance text-lg",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
       containerMaxWidth,
@@ -1005,29 +1138,16 @@ function CarouselFeatureBadge({
           {
             className: cn("flex flex-col items-start gap-4", contentClassName),
             children: [
-              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { children: badge }) : badge }),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                  "h2",
-                  {
-                    className: cn(
-                      "text-left text-xl font-semibold md:text-3xl lg:max-w-xl lg:text-4xl",
-                      headingClassName
-                    ),
-                    children: heading
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "max-w-xl text-left text-lg leading-snug lg:max-w-sm",
-                      descriptionClassName
-                    ),
-                    children: description
-                  }
-                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-              ] })
+              badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: badgeClassName, children: badge }) : badge),
+              /* @__PURE__ */ jsx(ContentGroup, { items: headerItems, className: "flex flex-col gap-2" }),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
             ]
           }
         ),

package/dist/community-initiatives.cjs

@@ -533,6 +533,148 @@ var Section = React4__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var baseStyles = [
+  // Layout
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
+  // Typography - using CSS variables with sensible defaults
+  "font-[var(--button-font-family,inherit)]",
+  "font-[var(--button-font-weight,500)]",
+  "tracking-[var(--button-letter-spacing,0)]",
+  "leading-[var(--button-line-height,1.25)]",
+  "[text-transform:var(--button-text-transform,none)]",
+  "text-sm",
+  // Border radius
+  "rounded-[var(--button-radius,var(--radius,0.375rem))]",
+  // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
+  "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
+  // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
+  "[box-shadow:var(--button-shadow,none)]",
+  "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
+  // Disabled state
+  "disabled:pointer-events-none disabled:opacity-50",
+  // SVG handling
+  "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+  // Focus styles
+  "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  // Invalid state
+  "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+].join(" ");
+var buttonVariants = classVarianceAuthority.cva(baseStyles, {
+  variants: {
+    variant: {
+      // Default (Primary) variant - full customization
+      default: [
+        "bg-[var(--button-default-bg,hsl(var(--primary)))]",
+        "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
+        "border-[length:var(--button-default-border-width,0px)]",
+        "border-[color:var(--button-default-border,transparent)]",
+        "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
+        "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
+        "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
+        "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
+        "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
+      ].join(" "),
+      // Destructive variant - full customization
+      destructive: [
+        "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
+        "text-[var(--button-destructive-fg,white)]",
+        "border-[length:var(--button-destructive-border-width,0px)]",
+        "border-[color:var(--button-destructive-border,transparent)]",
+        "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
+        "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
+        "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
+        "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
+        "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
+        "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        "dark:bg-destructive/60"
+      ].join(" "),
+      // Outline variant - full customization with proper border handling
+      outline: [
+        "bg-[var(--button-outline-bg,hsl(var(--background)))]",
+        "text-[var(--button-outline-fg,inherit)]",
+        "border-[length:var(--button-outline-border-width,1px)]",
+        "border-[color:var(--button-outline-border,hsl(var(--border)))]",
+        "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
+        "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
+        "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
+        "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
+        "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
+        "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+      ].join(" "),
+      // Secondary variant - full customization
+      secondary: [
+        "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
+        "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
+        "border-[length:var(--button-secondary-border-width,0px)]",
+        "border-[color:var(--button-secondary-border,transparent)]",
+        "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
+        "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
+        "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
+        "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
+        "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
+      ].join(" "),
+      // Ghost variant - full customization
+      ghost: [
+        "bg-[var(--button-ghost-bg,transparent)]",
+        "text-[var(--button-ghost-fg,inherit)]",
+        "border-[length:var(--button-ghost-border-width,0px)]",
+        "border-[color:var(--button-ghost-border,transparent)]",
+        "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
+        "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
+        "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
+        "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
+        "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
+        "dark:hover:bg-accent/50"
+      ].join(" "),
+      // Link variant - full customization
+      link: [
+        "bg-[var(--button-link-bg,transparent)]",
+        "text-[var(--button-link-fg,hsl(var(--primary)))]",
+        "border-[length:var(--button-link-border-width,0px)]",
+        "border-[color:var(--button-link-border,transparent)]",
+        "[box-shadow:var(--button-link-shadow,none)]",
+        "hover:bg-[var(--button-link-hover-bg,transparent)]",
+        "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
+        "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
+        "underline-offset-4 hover:underline"
+      ].join(" ")
+    },
+    size: {
+      default: [
+        "h-[var(--button-height-md,2.25rem)]",
+        "px-[var(--button-padding-x-md,1rem)]",
+        "py-[var(--button-padding-y-md,0.5rem)]",
+        "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
+      ].join(" "),
+      sm: [
+        "h-[var(--button-height-sm,2rem)]",
+        "px-[var(--button-padding-x-sm,0.75rem)]",
+        "py-[var(--button-padding-y-sm,0.25rem)]",
+        "gap-1.5",
+        "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
+      ].join(" "),
+      md: [
+        "h-[var(--button-height-md,2.25rem)]",
+        "px-[var(--button-padding-x-md,1rem)]",
+        "py-[var(--button-padding-y-md,0.5rem)]",
+        "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
+      ].join(" "),
+      lg: [
+        "h-[var(--button-height-lg,2.5rem)]",
+        "px-[var(--button-padding-x-lg,1.5rem)]",
+        "py-[var(--button-padding-y-lg,0.5rem)]",
+        "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
+      ].join(" "),
+      icon: "size-[var(--button-height-md,2.25rem)]",
+      "icon-sm": "size-[var(--button-height-sm,2rem)]",
+      "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -711,148 +853,6 @@ function useNavigation({
     handleClick
   };
 }
-var baseStyles = [
-  // Layout
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
-  // Typography - using CSS variables with sensible defaults
-  "font-[var(--button-font-family,inherit)]",
-  "font-[var(--button-font-weight,500)]",
-  "tracking-[var(--button-letter-spacing,0)]",
-  "leading-[var(--button-line-height,1.25)]",
-  "[text-transform:var(--button-text-transform,none)]",
-  "text-sm",
-  // Border radius
-  "rounded-[var(--button-radius,var(--radius,0.375rem))]",
-  // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
-  "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
-  // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
-  "[box-shadow:var(--button-shadow,none)]",
-  "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
-  // Disabled state
-  "disabled:pointer-events-none disabled:opacity-50",
-  // SVG handling
-  "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
-  // Focus styles
-  "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  // Invalid state
-  "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
-].join(" ");
-var buttonVariants = classVarianceAuthority.cva(baseStyles, {
-  variants: {
-    variant: {
-      // Default (Primary) variant - full customization
-      default: [
-        "bg-[var(--button-default-bg,hsl(var(--primary)))]",
-        "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
-        "border-[length:var(--button-default-border-width,0px)]",
-        "border-[color:var(--button-default-border,transparent)]",
-        "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
-        "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
-        "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
-        "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
-        "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
-      ].join(" "),
-      // Destructive variant - full customization
-      destructive: [
-        "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
-        "text-[var(--button-destructive-fg,white)]",
-        "border-[length:var(--button-destructive-border-width,0px)]",
-        "border-[color:var(--button-destructive-border,transparent)]",
-        "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
-        "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
-        "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
-        "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
-        "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
-        "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        "dark:bg-destructive/60"
-      ].join(" "),
-      // Outline variant - full customization with proper border handling
-      outline: [
-        "bg-[var(--button-outline-bg,hsl(var(--background)))]",
-        "text-[var(--button-outline-fg,inherit)]",
-        "border-[length:var(--button-outline-border-width,1px)]",
-        "border-[color:var(--button-outline-border,hsl(var(--border)))]",
-        "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
-        "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
-        "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
-        "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
-        "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
-        "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
-      ].join(" "),
-      // Secondary variant - full customization
-      secondary: [
-        "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
-        "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
-        "border-[length:var(--button-secondary-border-width,0px)]",
-        "border-[color:var(--button-secondary-border,transparent)]",
-        "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
-        "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
-        "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
-        "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
-        "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
-      ].join(" "),
-      // Ghost variant - full customization
-      ghost: [
-        "bg-[var(--button-ghost-bg,transparent)]",
-        "text-[var(--button-ghost-fg,inherit)]",
-        "border-[length:var(--button-ghost-border-width,0px)]",
-        "border-[color:var(--button-ghost-border,transparent)]",
-        "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
-        "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
-        "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
-        "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
-        "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
-        "dark:hover:bg-accent/50"
-      ].join(" "),
-      // Link variant - full customization
-      link: [
-        "bg-[var(--button-link-bg,transparent)]",
-        "text-[var(--button-link-fg,hsl(var(--primary)))]",
-        "border-[length:var(--button-link-border-width,0px)]",
-        "border-[color:var(--button-link-border,transparent)]",
-        "[box-shadow:var(--button-link-shadow,none)]",
-        "hover:bg-[var(--button-link-hover-bg,transparent)]",
-        "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
-        "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
-        "underline-offset-4 hover:underline"
-      ].join(" ")
-    },
-    size: {
-      default: [
-        "h-[var(--button-height-md,2.25rem)]",
-        "px-[var(--button-padding-x-md,1rem)]",
-        "py-[var(--button-padding-y-md,0.5rem)]",
-        "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
-      ].join(" "),
-      sm: [
-        "h-[var(--button-height-sm,2rem)]",
-        "px-[var(--button-padding-x-sm,0.75rem)]",
-        "py-[var(--button-padding-y-sm,0.25rem)]",
-        "gap-1.5",
-        "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
-      ].join(" "),
-      md: [
-        "h-[var(--button-height-md,2.25rem)]",
-        "px-[var(--button-padding-x-md,1rem)]",
-        "py-[var(--button-padding-y-md,0.5rem)]",
-        "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
-      ].join(" "),
-      lg: [
-        "h-[var(--button-height-lg,2.5rem)]",
-        "px-[var(--button-padding-x-lg,1.5rem)]",
-        "py-[var(--button-padding-y-lg,0.5rem)]",
-        "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
-      ].join(" "),
-      icon: "size-[var(--button-height-md,2.25rem)]",
-      "icon-sm": "size-[var(--button-height-sm,2rem)]",
-      "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-});
 var Pressable = React4__namespace.forwardRef(
   ({
     children,