@popgrids/ui 0.0.36 → 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

@@ -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",
@@ -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