@arbidocs/blocks 0.4.153 → 0.4.154

package/dist/chunk-5TDGVOR5.js

@@ -0,0 +1,142 @@
+"use client";
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@arbidocs/react/ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/home/CollapsibleSection.tsx
+var DEFAULT_COLLAPSIBLE_SECTION_LABELS = {
+  collapseSection: "Collapse section",
+  expandSection: "Expand section"
+};
+function CollapsibleSection({
+  title,
+  icon,
+  isExpanded,
+  onToggle,
+  children,
+  count,
+  hasActiveFilters = false,
+  expandWhenEmpty = false,
+  childrenClassName,
+  headerClassName,
+  className,
+  rightContent,
+  collapsible = true,
+  onHeaderClick,
+  labels
+}) {
+  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels };
+  const hasCount = count !== void 0;
+  const shouldBeExpanded = !collapsible ? true : hasCount ? count > 0 ? isExpanded : expandWhenEmpty && isExpanded : isExpanded;
+  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true;
+  const chevron = /* @__PURE__ */ jsx(
+    ChevronRight,
+    {
+      className: cn("size-4 shrink-0 transition-transform", shouldBeExpanded && "rotate-90")
+    }
+  );
+  const titleBlock = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    icon,
+    typeof title === "string" ? title && /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: title }) : title,
+    hasCount && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ml-1 text-xs tabular-nums",
+          hasActiveFilters ? "rounded-full bg-primary px-1.5 font-medium text-primary-foreground" : "font-normal text-muted-foreground"
+        ),
+        children: count
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), "data-slot": "collapsible-section", children: [
+    onHeaderClick ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: onHeaderClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onHeaderClick();
+          }
+        },
+        className: cn(
+          "mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          headerClassName
+        ),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 text-left", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": shouldBeExpanded,
+                "aria-label": shouldBeExpanded ? l.collapseSection : l.expandSection,
+                disabled: !hasContent,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (hasContent) onToggle();
+                },
+                className: "-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5",
+                children: chevron
+              }
+            ),
+            titleBlock
+          ] }),
+          rightContent && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ) : !collapsible ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mb-4 flex items-center justify-between", headerClassName),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2 text-left font-medium", children: titleBlock }),
+          rightContent && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mb-4 flex items-center justify-between", headerClassName),
+        "data-slot": "collapsible-section-header",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: hasContent ? 0 : -1,
+              "aria-expanded": shouldBeExpanded,
+              "aria-disabled": !hasContent,
+              onClick: hasContent ? onToggle : void 0,
+              onKeyDown: hasContent ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onToggle();
+                }
+              } : void 0,
+              className: cn(
+                "touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                hasContent ? "cursor-pointer hover:text-muted-foreground" : "cursor-default opacity-60"
+              ),
+              children: [
+                chevron,
+                titleBlock
+              ]
+            }
+          ),
+          rightContent && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: rightContent })
+        ]
+      }
+    ),
+    shouldBeExpanded && /* @__PURE__ */ jsx("div", { className: childrenClassName ?? "mb-8 flex flex-wrap justify-start gap-6", children })
+  ] });
+}
+
+export { CollapsibleSection, DEFAULT_COLLAPSIBLE_SECTION_LABELS };
+//# sourceMappingURL=chunk-5TDGVOR5.js.map
+//# sourceMappingURL=chunk-5TDGVOR5.js.map

package/dist/chunk-5TDGVOR5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/home/CollapsibleSection.tsx"],"names":[],"mappings":"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","file":"chunk-5TDGVOR5.js","sourcesContent":["import type { ReactNode } from 'react'\nimport { ChevronRight } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\n/** Fixed strings of the section header. */\nexport interface CollapsibleSectionLabels {\n  /** The chevron button's name (only with `onHeaderClick`). */\n  collapseSection: string\n  expandSection: string\n}\n\nexport const DEFAULT_COLLAPSIBLE_SECTION_LABELS: CollapsibleSectionLabels = {\n  collapseSection: 'Collapse section',\n  expandSection: 'Expand section',\n}\n\nexport interface CollapsibleSectionProps {\n  /** The section's heading. A node, so callers can add badges or tooltips. */\n  title: ReactNode\n  /** Leading glyph before the title. */\n  icon?: ReactNode\n  isExpanded: boolean\n  onToggle: () => void\n  children: ReactNode\n  /** Count badge beside the title. When 0 the section cannot expand (unless `expandWhenEmpty`). */\n  count?: number\n  /** The count badge is filled (a filter is active). */\n  hasActiveFilters?: boolean\n  expandWhenEmpty?: boolean\n  /** Class for the body wrapper. */\n  childrenClassName?: string\n  headerClassName?: string\n  className?: string\n  /** Trailing header content. */\n  rightContent?: ReactNode\n  /** When false the section is always open: no chevron, a plain header. */\n  collapsible?: boolean\n  /**\n   * When set, the whole header is one click target firing this (e.g. open a\n   * detail panel) and the chevron becomes its own separate toggle.\n   */\n  onHeaderClick?: () => void\n  labels?: Partial<CollapsibleSectionLabels>\n}\n\n/**\n * A section with a chevron toggle, title, optional count and body. The header\n * is a `role=\"button\"` div (not a native button) because `title`/`rightContent`\n * may hold interactive nodes such as tooltip triggers; a button inside a button\n * is invalid HTML.\n */\nexport function CollapsibleSection({\n  title,\n  icon,\n  isExpanded,\n  onToggle,\n  children,\n  count,\n  hasActiveFilters = false,\n  expandWhenEmpty = false,\n  childrenClassName,\n  headerClassName,\n  className,\n  rightContent,\n  collapsible = true,\n  onHeaderClick,\n  labels,\n}: CollapsibleSectionProps) {\n  const l = { ...DEFAULT_COLLAPSIBLE_SECTION_LABELS, ...labels }\n  const hasCount = count !== undefined\n  const shouldBeExpanded = !collapsible\n    ? true\n    : hasCount\n      ? count > 0\n        ? isExpanded\n        : expandWhenEmpty && isExpanded\n      : isExpanded\n  const hasContent = hasCount ? count > 0 || expandWhenEmpty : true\n\n  const chevron = (\n    <ChevronRight\n      className={cn('size-4 shrink-0 transition-transform', shouldBeExpanded && 'rotate-90')}\n    />\n  )\n  const titleBlock = (\n    <div className=\"flex min-w-0 items-center gap-2\">\n      {icon}\n      {typeof title === 'string'\n        ? title && <span className=\"whitespace-nowrap\">{title}</span>\n        : title}\n      {hasCount && (\n        <span\n          className={cn(\n            'ml-1 text-xs tabular-nums',\n            hasActiveFilters\n              ? 'rounded-full bg-primary px-1.5 font-medium text-primary-foreground'\n              : 'font-normal text-muted-foreground'\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </div>\n  )\n\n  return (\n    <div className={cn('w-full', className)} data-slot=\"collapsible-section\">\n      {onHeaderClick ? (\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={onHeaderClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onHeaderClick()\n            }\n          }}\n          className={cn(\n            'mb-4 flex cursor-pointer items-center justify-between gap-2 font-semibold pointer-coarse:min-h-11 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n            headerClassName\n          )}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left\">\n            <button\n              type=\"button\"\n              aria-expanded={shouldBeExpanded}\n              aria-label={shouldBeExpanded ? l.collapseSection : l.expandSection}\n              disabled={!hasContent}\n              onClick={(e) => {\n                e.stopPropagation()\n                if (hasContent) onToggle()\n              }}\n              className=\"-ml-0.5 shrink-0 rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 pointer-coarse:p-3.5\"\n            >\n              {chevron}\n            </button>\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : !collapsible ? (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-left font-medium\">{titleBlock}</div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      ) : (\n        <div\n          className={cn('mb-4 flex items-center justify-between', headerClassName)}\n          data-slot=\"collapsible-section-header\"\n        >\n          <div\n            role=\"button\"\n            tabIndex={hasContent ? 0 : -1}\n            aria-expanded={shouldBeExpanded}\n            aria-disabled={!hasContent}\n            onClick={hasContent ? onToggle : undefined}\n            onKeyDown={\n              hasContent\n                ? (e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      onToggle()\n                    }\n                  }\n                : undefined\n            }\n            className={cn(\n              'touch-hit flex min-w-0 items-center gap-2 rounded-md text-left font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n              hasContent\n                ? 'cursor-pointer hover:text-muted-foreground'\n                : 'cursor-default opacity-60'\n            )}\n          >\n            {chevron}\n            {titleBlock}\n          </div>\n          {rightContent && <div className=\"flex shrink-0 items-center\">{rightContent}</div>}\n        </div>\n      )}\n      {shouldBeExpanded && (\n        <div className={childrenClassName ?? 'mb-8 flex flex-wrap justify-start gap-6'}>\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}