hazo_ui 2.7.2 → 2.8.1

package/README.md

@@ -49,11 +49,23 @@ If you're using **Tailwind CSS v4**, you must add the `@source` directive to ens
 
 ```css
 @import "tailwindcss";
+@import "tw-animate-css";
 
 /* REQUIRED for Tailwind v4: Enable scanning of hazo_ui components */
 @source "../node_modules/hazo_ui/dist";
 ```
 
+**PostCSS** (Tailwind v4):
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
 **Why is this needed?**
 
 Tailwind v4 uses JIT compilation and only generates CSS for classes found in scanned files. By default, it doesn't scan `node_modules/`. Without the `@source` directive:
@@ -61,7 +73,9 @@ Tailwind v4 uses JIT compilation and only generates CSS for classes found in sca
 - Colors will be missing
 - Layouts may break
 
-**Note:** Tailwind v3 users do NOT need this directive - the `content` configuration is sufficient.
+The `tw-animate-css` import replaces the legacy `tailwindcss-animate` plugin (used by hazo_ui's accordion/collapse animations) for Tailwind v4 consumers.
+
+**Note:** Tailwind v3 users do NOT need this directive — the `content` configuration plus `tailwindcss-animate@^1.0.7` is sufficient.
 
 ---
 
@@ -2959,9 +2973,10 @@ function FormDialog() {
 
 If you're using Tailwind CSS v4 and components appear unstyled:
 
-1. Add the `@source` directive to your globals.css:
+1. Add the `@source` directive (and `tw-animate-css`) to your globals.css:
    ```css
    @import "tailwindcss";
+   @import "tw-animate-css";
    @source "../node_modules/hazo_ui/dist";
    ```
 

package/dist/index.cjs

@@ -61,6 +61,12 @@ var AccordionPrimitive = require('@radix-ui/react-accordion');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var TogglePrimitive = require('@radix-ui/react-toggle');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -123,6 +129,12 @@ var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrim
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrimitive);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
+var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -152,7 +164,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // ../node_modules/@babel/runtime/helpers/extends.js
 var require_extends = __commonJS({
-  "../node_modules/@babel/runtime/helpers/extends.js"(exports$1, module) {
+  "../node_modules/@babel/runtime/helpers/extends.js"(exports, module) {
     function _extends11() {
       return module.exports = _extends11 = Object.assign ? Object.assign.bind() : function(n) {
         for (var e = 1; e < arguments.length; e++) {
@@ -168,7 +180,7 @@ var require_extends = __commonJS({
 
 // ../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
 var require_objectWithoutPropertiesLoose = __commonJS({
-  "../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports$1, module) {
+  "../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports, module) {
     function _objectWithoutPropertiesLoose10(r, e) {
       if (null == r) return {};
       var t = {};
@@ -5198,6 +5210,8 @@ var Document = core.Node.create({
   }
 });
 var index_default = Document;
+var EMPTY_PARAGRAPH_MARKDOWN = "&nbsp;";
+var NBSP_CHAR = "\xA0";
 var Paragraph = core.Node.create({
   name: "paragraph",
   priority: 1e3,
@@ -5219,18 +5233,25 @@ var Paragraph = core.Node.create({
     if (tokens.length === 1 && tokens[0].type === "image") {
       return helpers.parseChildren([tokens[0]]);
     }
-    return helpers.createNode(
-      "paragraph",
-      void 0,
-      // no attributes for paragraph
-      helpers.parseInline(tokens)
-    );
+    const content = helpers.parseInline(tokens);
+    const hasExplicitEmptyParagraphMarker = tokens.length === 1 && tokens[0].type === "text" && (tokens[0].raw === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].text === EMPTY_PARAGRAPH_MARKDOWN || tokens[0].raw === NBSP_CHAR || tokens[0].text === NBSP_CHAR);
+    if (hasExplicitEmptyParagraphMarker && content.length === 1 && content[0].type === "text" && (content[0].text === EMPTY_PARAGRAPH_MARKDOWN || content[0].text === NBSP_CHAR)) {
+      return helpers.createNode("paragraph", void 0, []);
+    }
+    return helpers.createNode("paragraph", void 0, content);
   },
-  renderMarkdown: (node, h) => {
-    if (!node || !Array.isArray(node.content)) {
+  renderMarkdown: (node, h, ctx) => {
+    var _a, _b;
+    if (!node) {
       return "";
     }
-    return h.renderChildren(node.content);
+    const content = Array.isArray(node.content) ? node.content : [];
+    if (content.length === 0) {
+      const previousContent = Array.isArray((_a = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _a.content) ? ctx.previousNode.content : [];
+      const previousNodeIsEmptyParagraph = ((_b = ctx == null ? void 0 : ctx.previousNode) == null ? void 0 : _b.type) === "paragraph" && previousContent.length === 0;
+      return previousNodeIsEmptyParagraph ? EMPTY_PARAGRAPH_MARKDOWN : "";
+    }
+    return h.renderChildren(content);
   },
   addCommands() {
     return {
@@ -6997,15 +7018,222 @@ var Textarea = React27__namespace.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
+var Separator3 = React27__namespace.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  SeparatorPrimitive__namespace.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator3.displayName = SeparatorPrimitive__namespace.Root.displayName;
+var Collapsible = CollapsiblePrimitive__namespace.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive__namespace.CollapsibleContent;
+var ScrollArea = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  ScrollAreaPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+    ]
+  }
+));
+ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
+var ScrollBar = React27__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
+var Card = React27__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React27__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React27__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React27__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React27__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React27__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+function Spinner({ className, size = "md" }) {
+  const sizeClasses = { sm: "h-4 w-4", md: "h-8 w-8", lg: "h-12 w-12" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("animate-spin rounded-full border-2 border-current border-t-transparent text-primary", sizeClasses[size], className),
+      role: "status",
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+}
+var toggleVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-10 px-3 min-w-10",
+        sm: "h-9 px-2.5 min-w-9",
+        lg: "h-11 px-5 min-w-11"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+var Toggle = React27__namespace.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TogglePrimitive__namespace.Root, { ref, className: cn(toggleVariants({ variant, size, className })), ...props }));
+Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
+var ToggleGroupContext = React27__namespace.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React27__namespace.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupPrimitive__namespace.Root, { ref, className: cn("flex items-center justify-center gap-1", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
+ToggleGroup.displayName = ToggleGroupPrimitive__namespace.Root.displayName;
+var ToggleGroupItem = React27__namespace.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React27__namespace.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupPrimitive__namespace.Item,
+    {
+      ref,
+      className: cn(toggleVariants({ variant: context.variant || variant, size: context.size || size }), className),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
+var AlertDialog = AlertDialogPrimitive__namespace.Root;
+var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
+var AlertDialogOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AlertDialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+    ...props
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
+var AlertDialogContent = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive__namespace.Content.displayName;
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
+var AlertDialogDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
+var AlertDialogAction = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
+var AlertDialogCancel = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AlertDialogPrimitive__namespace.Cancel, { ref, className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className), ...props }));
+AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
+var buttonGroupVariants = classVarianceAuthority.cva(
+  "flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "data-slot": "button-group", className: cn(buttonGroupVariants({ orientation }), className), ...props });
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Comp, { className: cn("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props });
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Separator3, { orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props });
+}
 
 exports.ANIMATION_PRESETS = ANIMATION_PRESETS;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupText = ButtonGroupText;
 exports.Calendar = Calendar;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent2;
+exports.CollapsibleTrigger = CollapsibleTrigger2;
 exports.CommandNodeExtension = CommandNodeExtension;
 exports.CommandPill = CommandPill;
 exports.CommandPopover = CommandPopover;
@@ -7054,6 +7282,8 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -7064,22 +7294,28 @@ exports.SelectScrollUpButton = SelectScrollUpButton;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+exports.Separator = Separator3;
 exports.ShadcnCommand = Command;
 exports.ShadcnCommandEmpty = CommandEmpty;
 exports.ShadcnCommandGroup = CommandGroup;
 exports.ShadcnCommandInput = CommandInput;
 exports.ShadcnCommandItem = CommandItem;
 exports.ShadcnCommandList = CommandList;
+exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.buttonGroupVariants = buttonGroupVariants;
 exports.create_command_suggestion_extension = create_command_suggestion_extension;
 exports.get_hazo_ui_config = get_hazo_ui_config;
 exports.parse_commands_from_text = parse_commands_from_text;
@@ -7087,5 +7323,6 @@ exports.reset_hazo_ui_config = reset_hazo_ui_config;
 exports.resolve_animation_classes = resolve_animation_classes;
 exports.set_hazo_ui_config = set_hazo_ui_config;
 exports.text_to_tiptap_content = text_to_tiptap_content;
+exports.toggleVariants = toggleVariants;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map