@popgrids/ui 0.0.35 → 0.0.37

package/dist/index.d.cts

@@ -10,6 +10,7 @@ export { D as DropdownMenu, a as DropdownMenuCheckboxItem, b as DropdownMenuCont
 export { Footer } from './footer.cjs';
 export { Input } from './input.cjs';
 export { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupButton, InputGroupButtonProps, InputGroupButtonSize, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupText, InputGroupTextProps, InputGroupTextarea, InputGroupTextareaProps } from './input-group.cjs';
+export { InputStatus, InputStatusProps, InputStatusTheme, InputStatusVariant } from './input-status.cjs';
 export { Label } from './label.cjs';
 export { Loader, LoaderProps } from './loader.cjs';
 export { Logo, LogoProps, LogoTheme, LogoVariant } from './logo.cjs';

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { D as DropdownMenu, a as DropdownMenuCheckboxItem, b as DropdownMenuCont
 export { Footer } from './footer.js';
 export { Input } from './input.js';
 export { InputGroup, InputGroupAddon, InputGroupAddonAlign, InputGroupAddonProps, InputGroupButton, InputGroupButtonProps, InputGroupButtonSize, InputGroupInput, InputGroupInputProps, InputGroupProps, InputGroupText, InputGroupTextProps, InputGroupTextarea, InputGroupTextareaProps } from './input-group.js';
+export { InputStatus, InputStatusProps, InputStatusTheme, InputStatusVariant } from './input-status.js';
 export { Label } from './label.js';
 export { Loader, LoaderProps } from './loader.js';
 export { Logo, LogoProps, LogoTheme, LogoVariant } from './logo.js';

package/dist/index.js

@@ -1,6 +1,5 @@
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { cva } from 'class-variance-authority';
-import { createContext, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { mergeProps } from '@base-ui/react/merge-props';
@@ -8,7 +7,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
-import { Check, XClose, ChevronRight, InfoCircle } from '@untitledui/icons';
+import { Check, XClose, ChevronRight, ThumbsDown, SlashCircle01, MessageAlertSquare, CheckCircle, ThumbsUp, Hourglass03, ChevronUp, ChevronDown, InfoCircle } from '@untitledui/icons';
 import { Dialog } from '@base-ui/react/dialog';
 import { Menu } from '@base-ui/react/menu';
 import { Input as Input$1 } from '@base-ui/react/input';
@@ -138,42 +137,39 @@ var BACKGROUND_COLORS = [
 function backgroundColor(id) {
   return BACKGROUND_COLORS[fnv1a32(id) % BACKGROUND_COLORS.length];
 }
-var AvatarColorContext = createContext(void 0);
-function Avatar({ className = "", size = "md", colorKey, ...props }) {
-  const resolvedColor = colorKey ? backgroundColor(colorKey) : void 0;
-  return /* @__PURE__ */ jsx(AvatarColorContext.Provider, { value: resolvedColor, children: /* @__PURE__ */ 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__ */ jsx(
     Avatar$1.Root,
     {
       "data-slot": "avatar",
       "data-size": size,
       className: cn(avatarVariants({ size }), className),
-      ...props
+      ...props,
+      style: rootStyle
     }
-  ) });
+  );
 }
 function AvatarImage({ className = "", style, ...props }) {
-  const resolvedColor = useContext(AvatarColorContext);
-  const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
   return /* @__PURE__ */ jsx(
     Avatar$1.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 = useContext(AvatarColorContext);
-  const mergedStyle = resolvedColor ? { ...style, backgroundColor: resolvedColor } : style;
   return /* @__PURE__ */ jsx(
     Avatar$1.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",
@@ -183,7 +179,10 @@ function AvatarFallback({ className = "", style, ...props }) {
         className
       ),
       ...props,
-      style: mergedStyle
+      style: {
+        backgroundColor: `var(${AVATAR_BG_VAR}, var(--color-muted))`,
+        ...style
+      }
     }
   );
 }
@@ -493,7 +492,7 @@ var buttonVariants = 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",
@@ -662,7 +661,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
       }
@@ -1271,10 +1271,10 @@ var popgridsLogoLg = /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/200
   )
 ] });
 function Footer({ theme = "template", logo, tagline, children }) {
-  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "text-center text-lg text-primary-foreground", children: tagline })
+      tagline != null && /* @__PURE__ */ jsx("div", { className: "text-center text-lg", children: tagline })
     ] }),
     /* @__PURE__ */ 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__ */ jsxs(
@@ -1283,7 +1283,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__ */ 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__ */ jsx("p", { className: "block whitespace-pre text-sm leading-6", children: "Powered by" }) }),
+          /* @__PURE__ */ 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__ */ jsx("p", { className: "block text-sm leading-6 whitespace-pre", children: "Powered by" }) }),
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -1464,6 +1464,87 @@ function InputGroupTextarea({ className, ...props }) {
     }
   );
 }
+var inputStatusVariants = 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 = 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: Hourglass03,
+  review: Hourglass03,
+  approve: ThumbsUp,
+  publish: CheckCircle,
+  feedback: MessageAlertSquare,
+  delete: ThumbsDown,
+  blocked: SlashCircle01,
+  reject: 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__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "input-status",
+      type,
+      "aria-expanded": expanded,
+      className: cn(inputStatusVariants({ theme, variant }), className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("span", { className: inputStatusInnerVariants({ theme }), children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-5", "aria-hidden": true }),
+        open ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-4", "aria-hidden": true })
+      ] })
+    }
+  );
+}
 function Label({ className, render, ...props }) {
   const defaultProps = {
     "data-slot": "label",
@@ -2041,6 +2122,6 @@ function TemplateHeader({ className, image }) {
   );
 }
 
-export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, BannerNotification, Button, ButtonLink, Checkbox, ContentBlock, DefaultHeader, DialogRoot as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Footer, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Loader, Logo, NotificationBadge, SectionFlourish, SectionHeader, Tag, TemplateHeader, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, BannerNotification, Button, ButtonLink, Checkbox, ContentBlock, DefaultHeader, DialogRoot as Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Footer, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputStatus, Label, Loader, Logo, NotificationBadge, SectionFlourish, SectionHeader, Tag, TemplateHeader, Textarea, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map