@popgrids/ui 0.0.35 → 0.0.37

package/dist/index.cjs

@@ -2,7 +2,6 @@
 
 var avatar = require('@base-ui/react/avatar');
 var classVarianceAuthority = require('class-variance-authority');
-var react = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var mergeProps = require('@base-ui/react/merge-props');
@@ -140,42 +139,39 @@ var BACKGROUND_COLORS = [
 function backgroundColor(id) {
   return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
 }
-var AvatarColorContext = react.createContext(void 0);
-function Avatar({ className = "", size = "md", colorKey, ...props }) {
-  const resolvedColor = colorKey ? backgroundColor(colorKey) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(AvatarColorContext.Provider, { value: resolvedColor, children: /* @__PURE__ */ jsxRuntime.jsx(
+var AVATAR_BG_VAR = "--avatar-background";
+function Avatar({ className = "", size = "md", colorKey, style, ...props }) {
+  const resolved = colorKey ? backgroundColor(colorKey) : void 0;
+  const rootStyle = resolved !== void 0 ? { ...style, [AVATAR_BG_VAR]: resolved } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx(
     avatar.Avatar.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
       className: cn(avatarVariants({ size }), className),
-      ...props
+      ...props,
+      style: rootStyle
     }
-  ) });
+  );
 }
 function AvatarImage({ className = "", style, ...props }) {
-  const resolvedColor = react.useContext(AvatarColorContext);
-  const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
   return /* @__PURE__ */ jsxRuntime.jsx(
     avatar.Avatar.Image,
     {
       "data-slot": "avatar-image",
       className: cn("mask mask-squircle aspect-square size-full object-cover", className),
       ...props,
-      style: mergedStyle
+      style: { backgroundColor: `var(${AVATAR_BG_VAR})`, ...style }
     }
   );
 }
 function AvatarFallback({ className = "", style, ...props }) {
-  const resolvedColor = react.useContext(AvatarColorContext);
-  const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
   return /* @__PURE__ */ jsxRuntime.jsx(
     avatar.Avatar.Fallback,
     {
       "data-slot": "avatar-fallback",
       className: cn(
         "mask mask-squircle text-muted-foreground flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
-        resolvedColor ? void 0 : "bg-muted",
         "group-data-[size=xs]/avatar:text-xs",
         "group-data-[size=sm]/avatar:text-sm",
         "group-data-[size=md]/avatar:text-lg",
@@ -185,7 +181,10 @@ function AvatarFallback({ className = "", style, ...props }) {
         className
       ),
       ...props,
-      style: mergedStyle
+      style: {
+        backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,
+        ...style
+      }
     }
   );
 }
@@ -495,7 +494,7 @@ var buttonVariants = classVarianceAuthority.cva(
         variant: "primary",
         outline: false,
         theme: "base",
-        class: "bg-foreground text-background hover:ring-2 active:ring active:bg-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
+        class: "bg-foreground text-background hover:ring-2 active:bg-foreground active:text-background disabled:outline-none disabled:bg-black/0 disabled:text-black-alpha-600 focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-background focus-visible:bg-foreground focus-visible:text-background"
       },
       {
         variant: "primary",
@@ -664,7 +663,8 @@ function Button({
       {
         className: cn("transition-opacity group-aria-busy/button:opacity-0", {
           "opacity-0": loading,
-          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed
+          "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2": collapsed,
+          "ml-auto": !collapsed
         }),
         children: trailing
       }
@@ -1273,10 +1273,10 @@ var popgridsLogoLg = /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www
   )
 ] });
 function Footer({ theme = "template", logo, tagline, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full flex-col items-center gap-8 self-stretch border-t border-t-foreground/10 px-10 py-20 lg:px-8", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t-foreground/10 mx-auto flex w-full flex-col items-center gap-8 self-stretch border-t px-10 py-20 lg:px-8", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-[480px] flex-col items-center gap-4 self-stretch", children: [
       theme === "branding" ? popgridsLogoLg : logo != null && logo,
-      tagline != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-lg text-primary-foreground", children: tagline })
+      tagline != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-lg", children: tagline })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-[320px] flex-col items-center justify-center gap-1.5 self-stretch lg:max-w-none lg:flex-row lg:gap-1 lg:space-x-1", children }),
     theme === "branding" && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1285,7 +1285,7 @@ function Footer({ theme = "template", logo, tagline, children }) {
         className: "relative box-border flex w-full shrink-0 flex-row content-stretch items-center justify-center gap-2 px-0 py-1",
         "data-name": "Footer Info",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex shrink-0 flex-col justify-center text-nowrap text-center font-display font-normal text-base text-foreground not-italic leading-0", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "block whitespace-pre text-sm leading-6", children: "Powered by" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-display text-foreground relative flex shrink-0 flex-col justify-center text-center text-base leading-0 font-normal text-nowrap not-italic", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "block text-sm leading-6 whitespace-pre", children: "Powered by" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -1466,6 +1466,87 @@ function InputGroupTextarea({ className, ...props }) {
     }
   );
 }
+var inputStatusVariants = classVarianceAuthority.cva(
+  "inline-flex h-10 min-w-[54px] cursor-pointer items-stretch rounded-sm border-0 bg-transparent p-0 outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      theme: {
+        approve: "text-success-700 dark:text-success-200",
+        publish: "text-success-700 dark:text-success-200",
+        feedback: "text-success-700 dark:text-success-200",
+        flagged: "text-warning-700 dark:text-warning-200",
+        review: "text-warning-700 dark:text-warning-200",
+        delete: "text-error-600 dark:text-error-300",
+        blocked: "text-error-600 dark:text-error-300",
+        reject: "text-error-600 dark:text-error-300"
+      },
+      variant: {
+        community: "",
+        content: ""
+      }
+    },
+    defaultVariants: {
+      theme: "approve",
+      variant: "community"
+    }
+  }
+);
+var inputStatusInnerVariants = classVarianceAuthority.cva(
+  "flex flex-1 items-center gap-0.5 overflow-hidden rounded-sm py-2.5 pr-1.5 pl-[10px]",
+  {
+    variants: {
+      theme: {
+        approve: "bg-success-100 dark:bg-success-200/16",
+        publish: "bg-success-100 dark:bg-success-200/16",
+        feedback: "bg-success-100 dark:bg-success-200/16",
+        flagged: "bg-warning-100 dark:bg-warning-200/16",
+        review: "bg-warning-100 dark:bg-warning-200/16",
+        delete: "bg-error-100 dark:bg-error-300/16",
+        blocked: "bg-error-100 dark:bg-error-300/16",
+        reject: "bg-error-100 dark:bg-error-300/16"
+      }
+    },
+    defaultVariants: {
+      theme: "approve"
+    }
+  }
+);
+var STATUS_ICON = {
+  flagged: icons.Hourglass03,
+  review: icons.Hourglass03,
+  approve: icons.ThumbsUp,
+  publish: icons.CheckCircle,
+  feedback: icons.MessageAlertSquare,
+  delete: icons.ThumbsDown,
+  blocked: icons.SlashCircle01,
+  reject: icons.ThumbsDown
+};
+function InputStatus({
+  className,
+  theme = "approve",
+  variant = "community",
+  open = false,
+  "aria-expanded": ariaExpanded,
+  type = "button",
+  ...props
+}) {
+  const Icon = STATUS_ICON[theme];
+  const expanded = ariaExpanded !== void 0 ? ariaExpanded : open;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      "data-slot": "input-status",
+      type,
+      "aria-expanded": expanded,
+      className: cn(inputStatusVariants({ theme, variant }), className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: inputStatusInnerVariants({ theme }), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-5", "aria-hidden": true }),
+        open ? /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUp, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDown, { className: "size-4", "aria-hidden": true })
+      ] })
+    }
+  );
+}
 function Label({ className, render, ...props }) {
   const defaultProps = {
     "data-slot": "label",
@@ -2090,6 +2171,7 @@ exports.InputGroupButton = InputGroupButton;
 exports.InputGroupInput = InputGroupInput;
 exports.InputGroupText = InputGroupText;
 exports.InputGroupTextarea = InputGroupTextarea;
+exports.InputStatus = InputStatus;
 exports.Label = Label;
 exports.Loader = Loader;
 exports.Logo = Logo;