@popgrids/ui 0.0.36 → 0.0.38

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

@@ -7,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';
@@ -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",
@@ -1904,8 +1985,8 @@ var tagVariants = cva(
   {
     variants: {
       selected: {
-        false: "text-primary ring ring-primary ring-offset-0 focus-visible:bg-primary focus-visible:text-primary",
-        true: "bg-primary text-primary-foreground dark:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground dark:focus-visible:bg-primary dark:focus-visible:text-primary-foreground"
+        false: "text-primary dark:text-primary-foreground ring ring-primary dark:ring-1 dark:ring-primary-foreground ring-offset-0 focus-visible:bg-primary focus-visible:text-primary",
+        true: "bg-primary text-primary-foreground dark:ring-1 dark:ring-primary-foreground dark:bg-primary-foreground/5 dark:text-primary-foreground focus-visible:bg-primary focus-visible:text-primary-foreground dark:focus-visible:bg-primary dark:focus-visible:text-primary-foreground"
       },
       interactive: {
         false: null,
@@ -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