sitero 0.2.0 → 0.4.0

package/dist/src/cms/client/interfaces/components/ui/display/object-array-list.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import '../../../../../../constants/paths/redirect.js';
 import { NEW_TAB_REL, NEW_TAB_TARGET } from '../../../../../../constants/anchor.js';
 import '../../../../../../constants/cms-locale.js';
@@ -11,7 +12,6 @@ import 'ua-parser-js';
 import '../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../shared/utils/cn.js';
-import 'zod';
 import '@radix-ui/react-avatar';
 import '../../shadcn/badge.js';
 import '../../shadcn/button.js';
@@ -30,18 +30,25 @@ import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
 import { FieldBody } from '../form/field-body.js';
-import 'intor/react';
+import '../inputs/input.js';
+import '../inputs/textarea.js';
+import { NoData } from './no-data.js';
 
 function ObjectArrayList({
   items,
   fields,
-  isLoading
+  isLoading,
+  isDisabled,
+  isLink
 }) {
+  const { t } = useTranslator();
+  const listId = useId();
   const [expandedIndex, setExpandedIndex] = useState(null);
   const toggle = (i) => setExpandedIndex((p) => p === i ? null : i);
   const validItems = items?.filter(
     (item) => typeof item === "object" && item !== null && Object.values(item).every((v) => typeof v === "string")
   ) ?? [];
+  if (isLoading) return /* @__PURE__ */ jsx(FieldBody, { isLoading: true });
   if (!fields?.length || validItems.length === 0) return /* @__PURE__ */ jsx(FieldBody, { isEmpty: true });
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: validItems.map((item, index) => {
     const expanded = expandedIndex === index;
@@ -49,27 +56,50 @@ function ObjectArrayList({
       FieldBody,
       {
         isLoading,
-        className: cn(expanded ? "cursor-zoom-out" : "cursor-zoom-in"),
-        onClick: () => toggle(index),
+        isDisabled,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-0 left-0 z-10 h-full", children: [
-            /* @__PURE__ */ jsx("span", { className: "min-w-10 px-2 text-center text-sm opacity-50", children: index + 1 }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: isDisabled,
+                "aria-expanded": expanded,
+                "aria-controls": `${listId}-${index}-${field.key}`,
+                "aria-label": `${t(expanded ? "ui.list.collapse.text" : "ui.list.expand.text")} ${index + 1}`,
+                title: t(
+                  expanded ? "ui.list.collapse.text" : "ui.list.expand.text"
+                ),
+                onClick: () => toggle(index),
+                className: "focus-visible:outline-ring text-muted-foreground h-full min-w-10 px-2 text-center text-sm focus-visible:outline-2 disabled:cursor-not-allowed",
+                children: index + 1
+              }
+            ),
             /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "py-2" })
           ] }),
-          field.isLink ? /* @__PURE__ */ jsx(
-            Link,
+          /* @__PURE__ */ jsxs(
+            "div",
             {
-              href: item[field.key] ?? "",
-              target: NEW_TAB_TARGET,
-              rel: NEW_TAB_REL,
-              className: cn(
-                "ml-11 text-blue-500/80 underline underline-offset-2",
-                !expanded && "line-clamp-1"
-              ),
-              onClick: (e) => e.stopPropagation(),
-              children: item[field.key]
+              id: `${listId}-${index}-${field.key}`,
+              className: "ml-11 min-w-0 flex-1",
+              children: [
+                field.label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block text-xs", children: field.label }),
+                !item[field.key]?.trim() ? field.placeholder ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: field.placeholder }) : /* @__PURE__ */ jsx(NoData, {}) : field.isLink ?? isLink ? /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: item[field.key] ?? "",
+                    target: NEW_TAB_TARGET,
+                    rel: NEW_TAB_REL,
+                    className: cn(
+                      "w-fit text-blue-500/80 underline underline-offset-2",
+                      !expanded && "line-clamp-1"
+                    ),
+                    children: item[field.key]
+                  }
+                ) : /* @__PURE__ */ jsx("p", { className: cn(!expanded && "line-clamp-1"), children: item[field.key] })
+              ]
             }
-          ) : /* @__PURE__ */ jsx("p", { className: cn("ml-11", !expanded && "line-clamp-1"), children: item[field.key] })
+          )
         ]
       },
       field.key

package/dist/src/cms/client/interfaces/components/ui/display/text-display.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import { NoData } from './no-data.js';
+
+function TextDisplay({ value, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn("whitespace-pre-line", className), children: value ? value : /* @__PURE__ */ jsx(NoData, {}) });
+}
+
+export { TextDisplay };

package/dist/src/cms/client/interfaces/components/ui/features/accordion/accordion-header.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTranslator } from 'intor/react';
 import 'mime-types';
 import 'sitero-domain';
 import 'react';
@@ -8,14 +7,11 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 
 function AccordionHeader({
-  isRelated = false,
   count,
   children
 }) {
-  const { t } = useTranslator();
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center gap-3 font-medium", children: [
     count !== void 0 && /* @__PURE__ */ jsx(
       "div",
@@ -29,10 +25,7 @@ function AccordionHeader({
         children: /* @__PURE__ */ jsx("p", { className: "text-xs", children: count })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: cn("text-sm", "font-500"), children: [
-      isRelated && t("resources.related.text"),
-      children
-    ] })
+    /* @__PURE__ */ jsx("div", { className: cn("text-sm", "font-500"), children })
   ] });
 }
 

package/dist/src/cms/client/interfaces/components/ui/features/accordion/accordion.js

@@ -1,14 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { CircleChevronDown } from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useId, useEffect } from 'react';
 import 'mime-types';
 import 'sitero-domain';
 import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import AccordionHeader from './accordion-header.js';
 
 function Accordion({
@@ -24,6 +23,8 @@ function Accordion({
 }) {
   const [isOpen, setIsOpen] = useState(initialOpen);
   const containerRef = useRef(null);
+  const contentId = useId();
+  const triggerId = useId();
   useEffect(() => {
     const el = containerRef.current;
     if (el) el.style.maxHeight = initialOpen ? `${el.scrollHeight}px` : "0";
@@ -43,17 +44,21 @@ function Accordion({
       ...props,
       children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          "button",
           {
+            type: "button",
+            id: triggerId,
+            "aria-controls": contentId,
+            "aria-expanded": isOpen,
             onClick: () => setIsOpen((prev) => !prev),
             className: cn(
               "h-9 w-full",
               "flex items-center justify-between",
               "px-3",
               "bg-secondary",
-              "cursor-pointer",
+              "cursor-pointer text-left",
               hasBorder ? "" : "border-secondary rounded-lg border",
-              "transition"
+              "focus-visible:outline-ring transition focus-visible:outline-2 focus-visible:outline-offset-[-2px]"
             ),
             children: [
               accordionHeaderProps && /* @__PURE__ */ jsx(AccordionHeader, { ...accordionHeaderProps }),
@@ -70,6 +75,9 @@ function Accordion({
         /* @__PURE__ */ jsx(
           "div",
           {
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId,
             className: cn(
               "transition-[max-height] duration-300",
               "overflow-hidden"

package/dist/src/cms/client/interfaces/components/ui/features/boolean-filter.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTranslator } from 'intor/react';
+import { ChevronDown } from 'lucide-react';
+import 'mime-types';
+import 'sitero-domain';
+import 'react';
+import 'ua-parser-js';
+import '../../../../../../shared/client/react-query/client.js';
+import '@tanstack/react-query';
+import { cn } from '../../../../../../shared/utils/cn.js';
+import '@radix-ui/react-avatar';
+import '../../shadcn/badge.js';
+import '../../shadcn/button.js';
+import '@radix-ui/react-collapsible';
+import '@radix-ui/react-dialog';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItem } from '../../shadcn/dropdown-menu.js';
+import '../../shadcn/input-group.js';
+import '@radix-ui/react-label';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-select';
+import '@radix-ui/react-separator';
+import '../../shadcn/sidebar/sidebar.js';
+import 'next-themes';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import '@radix-ui/react-tooltip';
+import { ActionButton } from '../buttons/action-button.js';
+import 'next/link';
+import 'next/navigation';
+import '../../../../../../constants/paths/redirect.js';
+import '../../../../../../constants/cms-locale.js';
+
+function BooleanFilter({
+  value,
+  onChange,
+  label,
+  icon: Icon,
+  trueLabel,
+  falseLabel
+}) {
+  const { t } = useTranslator();
+  const resolvedTrueLabel = trueLabel ?? t("ui.boolean-filter.yes.text");
+  const resolvedFalseLabel = falseLabel ?? t("ui.boolean-filter.no.text");
+  const selectedLabel = value ? resolvedTrueLabel : resolvedFalseLabel;
+  const hasValue = value !== null;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      ActionButton,
+      {
+        size: "sm",
+        variant: "outline",
+        className: cn(
+          "border-input hover:text-foreground shrink-0 gap-2 bg-transparent py-2 font-normal transition-[color,box-shadow] hover:bg-transparent",
+          !hasValue && "text-muted-foreground"
+        ),
+        "aria-label": hasValue ? `${label}: ${selectedLabel}` : label,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Icon, { className: "inline-block", "aria-hidden": "true" }),
+            hasValue && /* @__PURE__ */ jsx("span", { children: selectedLabel })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: "text-muted-foreground size-4 shrink-0 opacity-50",
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuRadioGroup,
+        {
+          "aria-label": label,
+          value: hasValue ? String(value) : "",
+          onValueChange: (nextValue) => onChange(nextValue === "true"),
+          children: [
+            /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "true", children: resolvedTrueLabel }),
+            /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: "false", children: resolvedFalseLabel })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { disabled: !hasValue, onSelect: () => onChange(null), children: t("ui.boolean-filter.clear.text") })
+    ] })
+  ] });
+}
+
+export { BooleanFilter };

package/dist/src/cms/client/interfaces/components/ui/features/expandable-list/expand-bar.js

@@ -7,28 +7,12 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
-import '@radix-ui/react-avatar';
-import '../../../shadcn/badge.js';
-import '../../../shadcn/button.js';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-dropdown-menu';
-import '../../../shadcn/input-group.js';
-import '@radix-ui/react-label';
-import '@radix-ui/react-radio-group';
-import '@radix-ui/react-select';
-import { Separator } from '../../../shadcn/separator.js';
-import '../../../shadcn/sidebar/sidebar.js';
-import 'next-themes';
-import 'sonner';
-import '@radix-ui/react-tabs';
-import '@radix-ui/react-tooltip';
 
 function ExpandBar({ isExpand }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    "span",
     {
+      "aria-hidden": true,
       className: cn(
         "w-full",
         "flex-center gap-1",
@@ -36,9 +20,9 @@ function ExpandBar({ isExpand }) {
         "transition"
       ),
       children: [
-        /* @__PURE__ */ jsx(Separator, { className: "my-3 flex-1" }),
+        /* @__PURE__ */ jsx("span", { className: "bg-border my-3 h-px flex-1" }),
         !isExpand ? /* @__PURE__ */ jsx(CirclePlus, { className: "text-base-content size-5 min-w-5" }) : /* @__PURE__ */ jsx(CircleMinus, { className: "text-base-content size-5 min-w-5" }),
-        /* @__PURE__ */ jsx(Separator, { className: "my-3 flex-1" })
+        /* @__PURE__ */ jsx("span", { className: "bg-border my-3 h-px flex-1" })
       ]
     }
   );

package/dist/src/cms/client/interfaces/components/ui/features/expandable-list/expandable-list-content.js

@@ -7,7 +7,6 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 
 const COLLAPSED_HEIGHT = 48;
 function ExpandableListContent({
@@ -24,7 +23,7 @@ function ExpandableListContent({
     const el = containerRef.current;
     if (!el) return;
     const height = el.scrollHeight;
-    onOverflowChange?.(height > COLLAPSED_HEIGHT);
+    onOverflowChange?.(!isDisabled && height > COLLAPSED_HEIGHT);
     if (isDisabled) {
       el.style.maxHeight = "0px";
       return;
@@ -32,7 +31,7 @@ function ExpandableListContent({
     el.style.maxHeight = isExpand ? `${height}px` : `${COLLAPSED_HEIGHT}px`;
   }, [isExpand, isDisabled, items.length, children, onOverflowChange]);
   return /* @__PURE__ */ jsxs(
-    "div",
+    "span",
     {
       ref: containerRef,
       className: cn("overflow-hidden", "flex flex-wrap gap-1", "duration-150"),

package/dist/src/cms/client/interfaces/components/ui/features/expandable-list/expandable-list.js

@@ -8,7 +8,6 @@ import 'ua-parser-js';
 import '../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../shared/utils/cn.js';
-import 'zod';
 import { ExpandBar } from './expand-bar.js';
 import { ExpandableListContent } from './expandable-list-content.js';
 
@@ -24,13 +23,14 @@ function ExpandableList({
     "button",
     {
       type: "button",
+      "aria-expanded": isListOverFlow && isExpand,
+      disabled: isDisabled || !isListOverFlow,
       onClick: () => {
-        if (!isListOverFlow) return;
         setIsExpand((prev) => !prev);
       },
       className: cn(
         "group flex w-full flex-col gap-1 text-xs text-gray-400",
-        !isListOverFlow && "pointer-events-none"
+        "disabled:cursor-default"
       ),
       children: [
         /* @__PURE__ */ jsxs(

package/dist/src/cms/client/interfaces/components/ui/features/file/file-info/file-info.js

@@ -2,25 +2,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslator } from 'intor/react';
 import { SquareArrowOutUpRight } from 'lucide-react';
-import Link from 'next/link';
-import '../../../../../../../../constants/paths/redirect.js';
-import { NEW_TAB_REL, NEW_TAB_TARGET } from '../../../../../../../../constants/anchor.js';
-import '../../../../../../../../constants/cms-locale.js';
 import { mimeToExtension } from '../../../../../../../../shared/blob-file/mime-to-extension.js';
 import { classifyFileType } from '../../../../../../../../shared/blob-file/classify-file-type.js';
-import { formatFileSize } from '../../../../../../../../shared/blob-file/format-file-size.js';
 import 'react';
 import 'ua-parser-js';
 import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import { cn } from '../../../../../../../../shared/utils/cn.js';
 import { joinUrl } from '../../../../../../../../shared/utils/join-url.js';
-import 'zod';
-import { Button } from '../../../buttons/button.js';
-import 'next/navigation';
-import 'sitero-domain';
-import { Field } from '../../../form/field.js';
-import { FieldBody } from '../../../form/field-body.js';
 import '@radix-ui/react-avatar';
 import '../../../../shadcn/badge.js';
 import '../../../../shadcn/button.js';
@@ -37,7 +26,18 @@ import 'next-themes';
 import 'sonner';
 import '@radix-ui/react-tabs';
 import '@radix-ui/react-tooltip';
+import 'next/link';
+import { ExternalLinkButton } from '../../../buttons/external-link-button.js';
+import 'next/navigation';
+import 'sitero-domain';
+import '../../../../../../../../constants/paths/redirect.js';
+import '../../../../../../../../constants/cms-locale.js';
+import { Field } from '../../../form/field.js';
+import '../../../inputs/input.js';
+import '../../../inputs/textarea.js';
 import { FileName } from './file-name.js';
+import { FileSize } from './file-size.js';
+import { FileType } from './file-type.js';
 
 function createFileInfo({
   maxSize,
@@ -50,7 +50,6 @@ function createFileInfo({
   }) {
     const { t } = useTranslator();
     const isBlobFile = file instanceof Blob;
-    const isOversize = Number(file.size) > maxSize;
     const fileType = isBlobFile ? classifyFileType(file.type, mimeToExtension(file.type)) : file.type;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -63,59 +62,25 @@ function createFileInfo({
           "transition-[width,margin]"
         ),
         children: [
-          !isBlobFile && file && /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-link.text"), children: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "group p-0", children: /* @__PURE__ */ jsx(
-            Link,
+          !isBlobFile && file && /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-link.text"), children: /* @__PURE__ */ jsx(
+            ExternalLinkButton,
             {
+              "aria-label": t("ui.blob-file.file-info.file-link.text"),
+              variant: "outline",
               href: joinUrl(storageUrl, file.key),
-              target: NEW_TAB_TARGET,
-              rel: NEW_TAB_REL,
-              className: "group flex-center size-full",
+              className: "group w-full p-0",
               children: /* @__PURE__ */ jsx(SquareArrowOutUpRight, { className: "transition group-hover:scale-110" })
             }
-          ) }) }),
+          ) }),
           /* @__PURE__ */ jsx(FileName, { fileName: isBlobFile ? file.name : file.originalName }),
-          /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-type.text"), children: /* @__PURE__ */ jsx(FieldBody, { children: /* @__PURE__ */ jsx("p", { className: "mx-auto truncate", children: t(
-            `resources.file.file-type.${fileType.toLowerCase()}.text`
-          ) }) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-size.text"), children: /* @__PURE__ */ jsx(FieldBody, { children: /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mx-auto truncate",
-                  isOversize && "text-destructive"
-                ),
-                children: formatFileSize(file.size)
-              }
-            ) }) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "h-1 w-28",
-                  "rounded-full",
-                  "bg-white dark:bg-gray-200",
-                  "transition"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "h-full rounded-full",
-                      "overflow-hidden",
-                      "transition"
-                    ),
-                    style: {
-                      width: `${Math.min(file.size / maxSize * 100, 100).toFixed(
-                        2
-                      )}%`
-                    },
-                    children: /* @__PURE__ */ jsx("div", { className: "h-full w-28 bg-linear-to-r from-green-300 via-yellow-400 to-red-500" })
-                  }
-                )
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx(
+            FileType,
+            {
+              fileType,
+              mimeType: isBlobFile ? file.type : file.mimeType
+            }
+          ),
+          /* @__PURE__ */ jsx(FileSize, { size: file.size, maxSize })
         ]
       }
     );

package/dist/src/cms/client/interfaces/components/ui/features/file/file-info/file-name.js

@@ -9,7 +9,6 @@ import '../../../../../../../../shared/client/react-query/client.js';
 import '@tanstack/react-query';
 import 'clsx';
 import 'tailwind-merge';
-import 'zod';
 import '../../../../shadcn/badge.js';
 import '../../../../shadcn/button.js';
 import '@radix-ui/react-collapsible';
@@ -28,6 +27,8 @@ import '@radix-ui/react-tabs';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../shadcn/tooltip.js';
 import { Field } from '../../../form/field.js';
 import { FieldBody } from '../../../form/field-body.js';
+import '../../../inputs/input.js';
+import '../../../inputs/textarea.js';
 
 const splitFileName = (fileName) => {
   const lastDotIndex = fileName.lastIndexOf(".");
@@ -40,16 +41,23 @@ const splitFileName = (fileName) => {
 function FileName({ fileName }) {
   const { t } = useTranslator();
   const { name, ext } = splitFileName(fileName);
-  return /* @__PURE__ */ jsx(Field, { label: t("ui.blob-file.file-info.file-name.text"), children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FieldBody, { children: /* @__PURE__ */ jsxs("p", { className: "mx-auto flex truncate", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
-      ext && /* @__PURE__ */ jsxs("span", { children: [
-        ".",
-        ext
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      label: t("ui.blob-file.file-info.file-name.text"),
+      wrapperClassName: "min-w-0 grid-cols-1",
+      children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FieldBody, { childrenClassName: "min-w-0", children: /* @__PURE__ */ jsxs("p", { className: "mx-auto flex max-w-full min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+          ext && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+            ".",
+            ext
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: fileName }) })
       ] })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: fileName }) })
-  ] }) });
+    }
+  );
 }
 
 export { FileName };