@manta-eu/react 0.1.9 → 0.1.10

package/src/components/command/index.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import {
+  forwardRef,
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ElementRef,
+  type ReactNode,
+} from "react";
+import { CommandIcon } from "./command-image";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "#components/modal/index";
+import { Pill } from "#components/pill/index";
+import { cn } from "#style";
+
+const Command = forwardRef<ElementRef<typeof CommandPrimitive>, ComponentPropsWithoutRef<typeof CommandPrimitive>>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive
+      ref={ref}
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-lg-v4 bg-card text-default-foreground",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: ComponentProps<typeof Dialog>) => {
+  return (
+    <Dialog {...props}>
+      <DialogHeader>
+        <DialogTitle text="Command Menu" hidden />
+      </DialogHeader>
+      <DialogContent
+        className="flex flex-col overflow-hidden p-0 max-w-2xl! max-h-[70vh] top-40 translate-y-0"
+        showCloseButton={false}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+};
+CommandDialog.displayName = "CommandDialog";
+
+type CommandInputProps = ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
+  showEscHint?: boolean;
+};
+
+const CommandInput = forwardRef<ElementRef<typeof CommandPrimitive.Input>, CommandInputProps>(
+  ({ className, showEscHint = true, ...props }, ref) => (
+    <div className="flex shrink-0 items-center px-3 gap-2 relative" cmdk-input-wrapper="">
+      <SearchIcon className="mr-2 size-5 shrink-0 text-muted-foreground" />
+      <CommandPrimitive.Input
+        ref={ref}
+        className={cn(
+          "flex h-12 w-full rounded-md bg-transparent py-3 typography-caption outline-hidden placeholder:text-placeholder-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+      {showEscHint ? (
+        <div className="absolute right-0 h-full flex pr-3">
+          <Pill
+            label="ESC"
+            className="opacity-70 bg-muted cursor-default text-muted-foreground border-muted typography-tiny h-fit py-1 my-auto"
+          />
+        </div>
+      ) : null}
+    </div>
+  ),
+);
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = forwardRef<
+  ElementRef<typeof CommandPrimitive.List>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(
+      "max-h-[60vh] min-h-0 overflow-y-auto overflow-x-hidden",
+      "**:[[cmdk-group]]:animate-in **:[[cmdk-group]]:fade-in-0 **:[[cmdk-group]]:slide-in-from-bottom-2 **:[[cmdk-group]]:duration-200 **:[[cmdk-group]]:ease-out motion-reduce:**:[[cmdk-group]]:animate-none",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = forwardRef<
+  ElementRef<typeof CommandPrimitive.Empty>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center typography-small animate-in fade-in-0 slide-in-from-bottom-2 duration-200 ease-out motion-reduce:animate-none"
+    {...props}
+  />
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = forwardRef<
+  ElementRef<typeof CommandPrimitive.Group>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      [
+        "overflow-hidden p-1 text-default-foreground",
+        "**:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5",
+        "**:[[cmdk-group-heading]]:typography-tiny **:[[cmdk-group-heading]]:text-muted-foreground",
+      ],
+      className,
+    )}
+    {...props}
+  />
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = forwardRef<
+  ElementRef<typeof CommandPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px border-b border-muted-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = forwardRef<
+  ElementRef<typeof CommandPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      [
+        "bg-card text-default-foreground typography-small-medium",
+        "data-[selected=true]:bg-background",
+        "relative flex cursor-default gap-2 select-none items-center rounded-xs px-2 py-1.5 outline-hidden",
+        "animate-in fade-in-0 slide-in-from-bottom-2 duration-200 ease-out motion-reduce:animate-none",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        "data-[selected=true]:[&_.enter-pill]:opacity-100",
+        "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      ],
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </CommandPrimitive.Item>
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: ComponentPropsWithoutRef<"span">) => {
+  return (
+    <span
+      className={cn("ml-auto typography-small tracking-widest text-placeholder-foreground ", className)}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export type CommandResultItem = {
+  id: string;
+  title: string;
+  href?: string;
+  onSelect?: () => void;
+  icon?: ComponentType<{ className?: string; strokeWidth?: number; size?: number }>;
+  children?: ReactNode;
+  disabled?: boolean;
+};
+
+export type CommandResultsProps = {
+  heading: string;
+  items: CommandResultItem[];
+  onSelect: (_item: CommandResultItem) => void;
+};
+
+export function CommandResults(props: CommandResultsProps) {
+  const { heading, items, onSelect } = props;
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  const isRecentSection = heading === "Recent";
+
+  return (
+    <CommandGroup heading={heading}>
+      {items.map((item) => (
+        <CommandItem
+          key={item.id}
+          value={isRecentSection ? `recent-${item.id}` : item.id}
+          asChild
+          className={cn([
+            "typography-small-medium",
+            "px-2.5 py-[9px] rounded-xl",
+            "data-[selected=true]:[&_.enter-symbol]:opacity-100",
+          ])}
+          onSelect={() => {
+            item.onSelect?.();
+            onSelect(item);
+          }}
+          disabled={item.disabled}
+        >
+          <div className="flex items-center gap-2">
+            {item.icon ? (
+              <>
+                {" "}
+                <CommandIcon icon={item.icon} /> <span>{item.title} </span>
+              </>
+            ) : (
+              item.children
+            )}
+
+            <span
+              className={cn([
+                "enter-symbol ml-auto flex items-center justify-center typography-small",
+                "py-[2px] px-1 rounded-[6px] border border-muted-border bg-card",
+                "leading-[normal] text-placeholder-foreground",
+                "opacity-0 transition-opacity",
+              ])}
+            >
+              ↵
+            </span>
+          </div>
+        </CommandItem>
+      ))}
+    </CommandGroup>
+  );
+}
+
+export { CommandIcon, CommandImage } from "./command-image";
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};
+
+// Types named by this subpath's public API. A consumer cannot write a wrapper without them.
+export type { CommandIconProps, CommandImageProps } from "./command-image";

package/src/components/datastore-management/ManageDatastoresMenuItem.tsx

@@ -0,0 +1,23 @@
+import { Database } from "lucide-react";
+import { DropdownItem, preventPointerFocus } from "#components/dropdown/index";
+
+type ManageDatastoresMenuItemProps = {
+  onSelect: () => void;
+};
+
+export function ManageDatastoresMenuItem(props: ManageDatastoresMenuItemProps) {
+  const { onSelect } = props;
+
+  return (
+    <DropdownItem
+      data-testid="manage-datastores-menu-item"
+      className="flex flex-row items-center gap-1.5 typography-caption h-11"
+      onSelect={onSelect}
+      onPointerMove={preventPointerFocus}
+      onPointerLeave={preventPointerFocus}
+    >
+      <Database className="size-5" />
+      <span className="typography-caption">Datastores</span>
+    </DropdownItem>
+  );
+}

package/src/components/datastore-management/tree.ts

@@ -0,0 +1,73 @@
+import type { GQLDatastoreProvisioningStatus } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { match } from "ts-pattern";
+
+export type DatastoreNodeLike = { datastoreId?: string; removed: boolean };
+
+// `exists` alone is just the shell; `materialized` means KGC's initial data has landed too.
+export type DatastoreStatus = Omit<GQLDatastoreProvisioningStatus, "__typename" | "datastoreId">;
+
+export function collectDatastoreIds(nodes: DatastoreNodeLike[]): string[] {
+  return nodes.flatMap((node) => (isPresent(node.datastoreId) && !node.removed ? [node.datastoreId] : []));
+}
+
+export function hasRdfoxShell(status?: DatastoreStatus): boolean {
+  return isPresent(status) && status.known && !status.offline && status.exists && !status.materialized;
+}
+
+// KGC's sensor creates the RDFox datastore once registered (wiki/kgc.md).
+export function isAwaitingDatastore(status?: DatastoreStatus): boolean {
+  return isPresent(status) && status.known && !status.offline && !status.exists;
+}
+
+export function isMaterializing(status?: DatastoreStatus): boolean {
+  return hasRdfoxShell(status) || isAwaitingDatastore(status);
+}
+
+export type DatastoreStatusCategory =
+  | "removed"
+  | "unavailable"
+  | "offline"
+  | "ready"
+  | "notRegistered"
+  | "materializing";
+
+export function datastoreStatusCategory(
+  node: DatastoreNodeLike,
+  status?: DatastoreStatus,
+): DatastoreStatusCategory | undefined {
+  return (
+    match({ node, status })
+      .when(
+        ({ node }) => !isPresent(node.datastoreId),
+        () => undefined,
+      )
+      .when(
+        ({ node }) => node.removed,
+        () => "removed" as const,
+      )
+      .when(
+        ({ status }) => !status,
+        () => undefined,
+      )
+      .when(
+        ({ status }) => !status?.known,
+        () => "unavailable" as const,
+      )
+      .when(
+        ({ status }) => !!status?.offline,
+        () => "offline" as const,
+      )
+      .when(
+        ({ status }) => !!status?.ready,
+        () => "ready" as const,
+      )
+      // A pre-existing RDFox shell means this was registered before, so it's still `materializing`,
+      // not `notRegistered`.
+      .when(
+        ({ status }) => status?.registered === false && !hasRdfoxShell(status),
+        () => "notRegistered" as const,
+      )
+      .otherwise(() => "materializing" as const)
+  );
+}

package/src/components/datastore-management/use-datastore-status.ts

@@ -0,0 +1,31 @@
+import { useDatastoreProvisioningStatusesQuery } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { useMemo } from "react";
+import type { DatastoreStatus } from "./tree";
+import { useMantaClient } from "#providers/index";
+
+const provisioningStatusPollMs = 10_000;
+
+export function useDatastoreStatusByDatastoreId(
+  datastoreIds: string[],
+  enabled: boolean,
+): Record<string, DatastoreStatus> {
+  const { mantaClient } = useMantaClient();
+
+  const { data } = useDatastoreProvisioningStatusesQuery(
+    mantaClient,
+    { datastoreIds },
+    {
+      enabled: enabled && isPresent(datastoreIds),
+      refetchInterval: provisioningStatusPollMs,
+    },
+  );
+
+  return useMemo(
+    () =>
+      Object.fromEntries(
+        (data?.datastoreProvisioningStatuses ?? []).map(({ datastoreId, ...rest }) => [datastoreId, rest]),
+      ),
+    [data],
+  );
+}

package/src/components/disabled-action-tooltip/index.tsx

@@ -0,0 +1,22 @@
+import { isPresent } from "@manta-eu/lib/present";
+import type { ReactNode } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+
+export type DisabledActionTooltipProps = {
+  reason?: string;
+  children: ReactNode;
+};
+
+export function DisabledActionTooltip(props: DisabledActionTooltipProps): ReactNode {
+  const { reason, children } = props;
+  if (!isPresent(reason)) return children;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="block">{children}</span>
+      </TooltipTrigger>
+      <TooltipContent>{reason}</TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/dropdown/index.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check } from "lucide-react";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Checkbox } from "../checkbox";
+import { cn } from "#style";
+
+export const Dropdown = DropdownMenuPrimitive.Root;
+export const DropdownTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownPortal = DropdownMenuPrimitive.Portal;
+
+export function preventPointerFocus(event: React.PointerEvent) {
+  event.preventDefault();
+}
+
+const dropdownContent = tv({
+  base: [
+    "z-50 min-w-[180px] overflow-hidden p-1.5",
+    "bg-card border border-muted-border rounded-md-v4",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    // A closed overlay stays hit-testable — see the note on the modal overlay.
+    "data-[state=closed]:hidden",
+    "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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    "origin-(--radix-dropdown-menu-content-transform-origin)",
+    "max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto",
+  ],
+});
+
+export type DropdownContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function DropdownContent(props: DropdownContentProps) {
+  const { className, sideOffset = 4, side = "bottom", align = "start", ref, ...otherProps } = props;
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(dropdownContent(), className)}
+        {...otherProps}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+DropdownContent.displayName = "DropdownContent";
+
+export type DropdownGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> & {
+  label?: string;
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function DropdownGroup(props: DropdownGroupProps) {
+  const { className, label, children, ref, ...otherProps } = props;
+  const hasChildren = React.Children.count(children) > 0;
+  return (
+    <DropdownMenuPrimitive.Group ref={ref} className={cn("flex flex-col", className)} {...otherProps}>
+      {label && hasChildren && (
+        <DropdownMenuPrimitive.Label className="px-2 py-1.5 typography-caption-medium text-muted-foreground">
+          {label}
+        </DropdownMenuPrimitive.Label>
+      )}
+      {children}
+    </DropdownMenuPrimitive.Group>
+  );
+}
+DropdownGroup.displayName = "DropdownGroup";
+
+export type DropdownSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function DropdownSeparator(props: DropdownSeparatorProps) {
+  const { className, ref, ...otherProps } = props;
+  return (
+    <DropdownMenuPrimitive.Separator
+      ref={ref}
+      className={cn("border-t-[0.5px] border-muted-border", className)}
+      {...otherProps}
+    />
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+
+const dropdownItem = tv({
+  base: [
+    "relative flex w-full cursor-pointer select-none items-center gap-2",
+    "rounded-sm-v4 pl-2 pr-3 py-2 typography-caption-medium text-default-foreground",
+    "outline-none transition-colors",
+    "hover:bg-faint focus:bg-faint",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  ],
+});
+
+export type DropdownItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  icon?: React.ReactNode;
+  selected?: boolean;
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function DropdownItem(props: DropdownItemProps) {
+  const { className, children, icon, selected, asChild, ref, ...otherProps } = props;
+  return (
+    <DropdownMenuPrimitive.Item ref={ref} className={cn(dropdownItem(), className)} asChild={asChild} {...otherProps}>
+      {asChild ? (
+        children
+      ) : (
+        <>
+          {icon && <span className="size-5 shrink-0 flex items-center justify-center">{icon}</span>}
+          {children}
+          {selected && <Check className="size-4 shrink-0" />}
+        </>
+      )}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+DropdownItem.displayName = "DropdownItem";
+
+export type DropdownCheckboxItemProps = Omit<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  "checked" | "onCheckedChange"
+> & {
+  icon?: React.ReactNode;
+  checked?: boolean;
+
+  onCheckedChange?: (checked: boolean) => void;
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function DropdownCheckboxItem(props: DropdownCheckboxItemProps) {
+  const { className, children, icon, checked, onCheckedChange, disabled, ref, ...otherProps } = props;
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(dropdownItem(), "gap-3", className)}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      onSelect={(e) => e.preventDefault()}
+      {...otherProps}
+    >
+      <Checkbox checked={checked} disabled={disabled} tabIndex={-1} aria-hidden="true" />
+      {icon && <span className="size-5 shrink-0 flex items-center justify-center">{icon}</span>}
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+DropdownCheckboxItem.displayName = "DropdownCheckboxItem";
+
+export type DropdownFlagItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+  countryCode: string;
+  countryName: string;
+  dialCode: string;
+  selected?: boolean;
+  ref?: React.Ref<HTMLDivElement>;
+};
+
+export function DropdownFlagItem(props: DropdownFlagItemProps) {
+  const { className, countryCode, countryName, dialCode, selected, ref, ...otherProps } = props;
+  return (
+    <DropdownMenuPrimitive.Item ref={ref} className={cn(dropdownItem(), "gap-2", className)} {...otherProps}>
+      <img
+        src={`https://flagcdn.com/${countryCode.toLowerCase()}.svg`}
+        alt={`${countryName} flag`}
+        className="size-5 shrink-0 rounded-sm object-cover"
+      />
+      <span className="typography-caption-medium text-default-foreground">{countryName}</span>
+      <span className="typography-caption-medium text-muted-foreground">{dialCode}</span>
+      <span className="flex-1" />
+      {selected && <Check className="size-4 shrink-0" />}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+DropdownFlagItem.displayName = "DropdownFlagItem";

package/src/components/editable-text/index.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { isPresent } from "@manta-eu/lib/present";
+import { useEffect, useRef, useState, type KeyboardEvent } from "react";
+import { cn } from "#style";
+
+export type EditableTextProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  "aria-label"?: string;
+};
+
+const shared = "typography-body -mx-1.5 rounded-sm px-1.5 py-0.5";
+
+export function EditableText(props: EditableTextProps) {
+  const { value, onChange, placeholder = "Click to edit", disabled = false, className } = props;
+  const ariaLabel = props["aria-label"];
+
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const wasEditing = useRef(false);
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    } else if (wasEditing.current) {
+      // Returning from edit mode: the input just unmounted, so pull focus back to the button
+      // rather than letting it drop to <body>.
+      buttonRef.current?.focus();
+    }
+    wasEditing.current = isEditing;
+  }, [isEditing]);
+
+  function startEditing() {
+    if (disabled) {
+      return;
+    }
+    setDraft(value);
+    setIsEditing(true);
+  }
+
+  function commit() {
+    setIsEditing(false);
+    const next = draft.trim();
+    if (next !== value) {
+      onChange(next);
+    }
+  }
+
+  function cancel() {
+    setDraft(value);
+    setIsEditing(false);
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commit();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      cancel();
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        value={draft}
+        aria-label={ariaLabel}
+        placeholder={placeholder}
+        onChange={(event) => setDraft(event.currentTarget.value)}
+        onBlur={commit}
+        onKeyDown={onKeyDown}
+        className={cn(
+          shared,
+          "min-w-0 bg-background text-default-foreground outline outline-2 -outline-offset-1 outline-active-border placeholder:text-muted-foreground",
+          className,
+        )}
+      />
+    );
+  }
+
+  const hasValue = isPresent(value);
+
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      disabled={disabled}
+      aria-label={ariaLabel}
+      onClick={startEditing}
+      data-slot="editable-text"
+      className={cn(
+        shared,
+        "inline-flex max-w-full items-center text-left hover:bg-accent/60 disabled:pointer-events-none disabled:opacity-50",
+        hasValue ? "text-default-foreground" : "text-muted-foreground",
+        className,
+      )}
+    >
+      <span className="truncate">{hasValue ? value : placeholder}</span>
+    </button>
+  );
+}
+
+EditableText.displayName = "EditableText";