raft-ui 0.0.1

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,405 @@
+import type { ComponentPropsWithRef } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { tv } from "../../lib/tv.ts";
+import { Badge, type BadgeProps } from "../badge/index.ts";
+import { Kbd, type KbdProps } from "../kbd/index.ts";
+import type { StyledProps } from "../../lib/styled-props.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const dropdownMenu = tv({
+  slots: {
+    trigger: ["select-none"],
+    positioner: ["isolate z-50 outline-none"],
+    content: [
+      "max-h-[var(--available-height)] min-w-48 overflow-hidden bg-layer-panel",
+      "outline-none",
+    ],
+    item: [
+      "flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1",
+      "text-left text-sm outline-none transition-colors",
+    ],
+    radioItem: [
+      "flex w-full cursor-default select-none items-center gap-2 px-3",
+      "text-left outline-none transition-colors",
+    ],
+    submenuTrigger: [
+      "flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1",
+      "text-left text-sm outline-none transition-colors",
+    ],
+    label: [],
+    shortcut: ["ml-auto"],
+    itemCount: ["ml-auto tabular-nums"],
+    separator: ["border-t-2"],
+    indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        trigger: [
+          "data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0",
+          "data-[popup-open]:hover:translate-x-0 data-[popup-open]:hover:translate-y-0",
+        ],
+        content: ["border-2 border-black bg-white shadow-lg"],
+        item: [
+          "py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow data-[highlighted]:bg-brutal-yellow",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5",
+        ],
+        radioItem: [
+          "h-9 overflow-hidden font-sans text-sm font-semibold leading-6 text-black",
+          "border-b border-black/10 last:border-b-0",
+          "hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5",
+        ],
+        submenuTrigger: [
+          "py-1.5 font-sans text-sm font-semibold leading-6 text-black hover:bg-brutal-yellow data-[highlighted]:bg-brutal-yellow data-[popup-open]:bg-brutal-yellow",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3.5",
+        ],
+        label: [
+          "border-b border-black px-3 py-2",
+          "font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60",
+        ],
+        shortcut: ["font-sans text-sm font-semibold leading-6"],
+        itemCount: [
+          "rounded border border-black bg-brutal-pink px-1.5 py-0.5",
+          "font-sans text-[10px] leading-none font-bold text-white",
+        ],
+        separator: ["border-black"],
+        indicator: [],
+      },
+      elegant: {
+        content: [
+          "gap-0.5 rounded-md bg-layer-popover p-1",
+          "shadow-lg outline-none",
+          "flex flex-col",
+        ],
+        item: [
+          "gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+          "text-foreground-muted",
+          "transition-[background-color,color] duration-150",
+          "hover:bg-foreground/[0.04] hover:text-foreground-strong",
+          "data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+          "[&>svg:last-child]:size-3",
+          "[&>svg]:text-foreground-muted",
+          "hover:[&>svg]:text-foreground-strong",
+          "data-[highlighted]:[&>svg]:text-foreground-strong",
+        ],
+        radioItem: [
+          "gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+          "text-foreground-muted",
+          "transition-[background-color,color] duration-150",
+          "hover:bg-foreground/[0.04] hover:text-foreground-strong",
+          "data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+          "[&>svg:last-child]:size-3",
+          "[&>svg]:text-foreground-muted",
+          "hover:[&>svg]:text-foreground-strong",
+          "data-[highlighted]:[&>svg]:text-foreground-strong",
+        ],
+        submenuTrigger: [
+          "gap-2.5 rounded-sm px-3 py-2 text-[13px] font-medium tracking-[-0.005em]",
+          "text-foreground-muted",
+          "transition-[background-color,color] duration-150",
+          "hover:bg-foreground/[0.04] hover:text-foreground-strong",
+          "data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+          "data-[popup-open]:bg-foreground/[0.04] data-[popup-open]:text-foreground-strong",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&>svg]:size-4",
+          "[&>svg:last-child]:size-3",
+          "[&>svg]:text-foreground-muted",
+          "hover:[&>svg]:text-foreground-strong",
+          "data-[highlighted]:[&>svg]:text-foreground-strong",
+          "data-[popup-open]:[&>svg]:text-foreground-strong",
+        ],
+        label: [
+          "-mx-1 border-b border-line-muted px-3 py-2",
+          "text-[11px] font-medium leading-none tracking-[-0.005em] text-foreground/45",
+        ],
+        shortcut: ["text-foreground-muted"],
+        itemCount: [],
+        separator: ["my-1 -mx-1 h-px border-0 bg-line-muted"],
+        indicator: [],
+      },
+    },
+  },
+});
+
+export type DropdownMenuProps = BaseMenu.Root.Props;
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  return <BaseMenu.Root data-slot="dropdown-menu" {...props} />;
+}
+
+export type DropdownMenuSubmenuProps = BaseMenu.SubmenuRoot.Props;
+
+export function DropdownMenuSubmenu(props: DropdownMenuSubmenuProps) {
+  return <BaseMenu.SubmenuRoot data-slot="dropdown-menu-submenu" {...props} />;
+}
+
+export type DropdownMenuTriggerProps = StyledProps<BaseMenu.Trigger.Props>;
+
+export function DropdownMenuTrigger({ className, ...props }: DropdownMenuTriggerProps) {
+  const theme = useThemeFamily();
+  const { trigger } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={trigger({ className })}
+      {...props}
+    />
+  );
+}
+
+export type DropdownMenuPortalProps = BaseMenu.Portal.Props;
+
+export function DropdownMenuPortal(props: DropdownMenuPortalProps) {
+  return <BaseMenu.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+export type DropdownMenuPopupProps = ComponentPropsWithRef<"div">;
+
+export function DropdownMenuPopup({ className, ...props }: DropdownMenuPopupProps) {
+  const theme = useThemeFamily();
+  const { content } = dropdownMenu({ theme });
+  return <div data-slot="dropdown-menu-content" className={content({ className })} {...props} />;
+}
+
+export type DropdownMenuContentProps = StyledProps<BaseMenu.Popup.Props> &
+  Pick<
+    BaseMenu.Positioner.Props,
+    | "align"
+    | "alignOffset"
+    | "anchor"
+    | "arrowPadding"
+    | "collisionAvoidance"
+    | "collisionBoundary"
+    | "collisionPadding"
+    | "disableAnchorTracking"
+    | "positionMethod"
+    | "side"
+    | "sideOffset"
+    | "sticky"
+  > & {
+    portalProps?: DropdownMenuPortalProps;
+  };
+
+export function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  arrowPadding,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  disableAnchorTracking = false,
+  positionMethod = "fixed",
+  side = "bottom",
+  sideOffset = 4,
+  sticky,
+  portalProps,
+  className,
+  ...props
+}: DropdownMenuContentProps) {
+  const theme = useThemeFamily();
+  const { positioner, content } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.Portal {...portalProps}>
+      <BaseMenu.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        arrowPadding={arrowPadding}
+        collisionAvoidance={collisionAvoidance}
+        collisionBoundary={collisionBoundary}
+        collisionPadding={collisionPadding}
+        disableAnchorTracking={disableAnchorTracking}
+        positionMethod={positionMethod}
+        side={side}
+        sideOffset={sideOffset}
+        sticky={sticky}
+        className={positioner()}
+      >
+        <BaseMenu.Popup
+          data-slot="dropdown-menu-content"
+          className={content({ className })}
+          {...props}
+        />
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+  );
+}
+
+export type DropdownMenuItemProps = StyledProps<BaseMenu.Item.Props>;
+
+export function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps) {
+  const theme = useThemeFamily();
+  const { item } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.Item data-slot="dropdown-menu-item" className={item({ className })} {...props} />
+  );
+}
+
+export type DropdownMenuSubmenuTriggerProps = StyledProps<BaseMenu.SubmenuTrigger.Props>;
+
+export function DropdownMenuSubmenuTrigger({
+  className,
+  ...props
+}: DropdownMenuSubmenuTriggerProps) {
+  const theme = useThemeFamily();
+  const { submenuTrigger } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.SubmenuTrigger
+      data-slot="dropdown-menu-submenu-trigger"
+      className={submenuTrigger({ className })}
+      {...props}
+    />
+  );
+}
+
+export type DropdownMenuLabelProps = StyledProps<ComponentPropsWithRef<"div">>;
+
+export function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps) {
+  const theme = useThemeFamily();
+  const { label } = dropdownMenu({ theme });
+  return <div data-slot="dropdown-menu-label" className={label({ className })} {...props} />;
+}
+
+export type DropdownMenuShortcutProps = KbdProps;
+
+export function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps) {
+  const theme = useThemeFamily();
+  const { shortcut } = dropdownMenu({ theme });
+  return <Kbd data-slot="dropdown-menu-shortcut" className={shortcut({ className })} {...props} />;
+}
+
+export type DropdownMenuItemCountProps = BadgeProps;
+
+export function DropdownMenuItemCount({ className, ...props }: DropdownMenuItemCountProps) {
+  const theme = useThemeFamily();
+  const { itemCount } = dropdownMenu({ theme });
+  return (
+    <Badge data-slot="dropdown-menu-item-count" className={itemCount({ className })} {...props} />
+  );
+}
+
+export type DropdownMenuSeparatorProps = StyledProps<BaseMenu.Separator.Props>;
+
+export function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps) {
+  const theme = useThemeFamily();
+  const { separator } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.Separator
+      data-slot="dropdown-menu-separator"
+      className={separator({ className })}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden className="size-3 shrink-0">
+      <g
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1"
+        stroke="currentColor"
+      >
+        <path d="M1.75391 6.41392L4.4001 9.24985L10.2467 2.98532" />
+      </g>
+    </svg>
+  );
+}
+
+export type DropdownMenuRadioGroupProps = StyledProps<BaseMenu.RadioGroup.Props>;
+
+export function DropdownMenuRadioGroup({ ...props }: DropdownMenuRadioGroupProps) {
+  return <BaseMenu.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+export type DropdownMenuRadioItemProps = StyledProps<BaseMenu.RadioItem.Props>;
+
+export function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuRadioItemProps) {
+  const theme = useThemeFamily();
+  const { radioItem, indicator } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={radioItem({ className })}
+      {...props}
+    >
+      {children}
+      <span className={indicator()}>
+        <BaseMenu.RadioItemIndicator>
+          <DropdownMenuCheckIcon />
+        </BaseMenu.RadioItemIndicator>
+      </span>
+    </BaseMenu.RadioItem>
+  );
+}
+
+export type DropdownMenuRadioItemIndicatorProps = StyledProps<BaseMenu.RadioItemIndicator.Props>;
+
+export function DropdownMenuRadioItemIndicator({
+  className,
+  ...props
+}: DropdownMenuRadioItemIndicatorProps) {
+  return (
+    <BaseMenu.RadioItemIndicator
+      data-slot="dropdown-menu-radio-item-indicator"
+      className={className}
+      {...props}
+    />
+  );
+}
+
+export type DropdownMenuCheckboxItemProps = StyledProps<BaseMenu.CheckboxItem.Props>;
+
+export function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuCheckboxItemProps) {
+  const theme = useThemeFamily();
+  const { item, indicator } = dropdownMenu({ theme });
+  return (
+    <BaseMenu.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={item({ className })}
+      {...props}
+    >
+      {children}
+      <span className={indicator()}>
+        <BaseMenu.CheckboxItemIndicator>
+          <DropdownMenuCheckIcon />
+        </BaseMenu.CheckboxItemIndicator>
+      </span>
+    </BaseMenu.CheckboxItem>
+  );
+}
+
+export type DropdownMenuCheckboxItemIndicatorProps =
+  StyledProps<BaseMenu.CheckboxItemIndicator.Props>;
+
+export function DropdownMenuCheckboxItemIndicator({
+  className,
+  ...props
+}: DropdownMenuCheckboxItemIndicatorProps) {
+  return (
+    <BaseMenu.CheckboxItemIndicator
+      data-slot="dropdown-menu-checkbox-item-indicator"
+      className={className}
+      {...props}
+    />
+  );
+}

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1,38 @@
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuCheckboxItemIndicator,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemCount,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioItemIndicator,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSubmenu,
+  DropdownMenuSubmenuTrigger,
+  DropdownMenuPopup,
+  DropdownMenuTrigger,
+} from "./dropdown-menu.tsx";
+export type {
+  DropdownMenuCheckboxItemIndicatorProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemCountProps,
+  DropdownMenuItemProps,
+  DropdownMenuLabelProps,
+  DropdownMenuPortalProps,
+  DropdownMenuProps,
+  DropdownMenuRadioGroupProps,
+  DropdownMenuRadioItemIndicatorProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuShortcutProps,
+  DropdownMenuSubmenuProps,
+  DropdownMenuSubmenuTriggerProps,
+  DropdownMenuPopupProps,
+  DropdownMenuTriggerProps,
+} from "./dropdown-menu.tsx";

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,177 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+// EmptyState family: a quiet "nothing here yet" surface — muted icon, muted
+// title, optional description + action. Composed from a centered root, a
+// content group, and slot parts (`EmptyStateIcon`, `EmptyStateTitle`,
+// `EmptyStateDescription`, `EmptyStateActions`). All parts share one `tv()`
+// slots config so theme styling lives in a single place. There is no icon frame
+// in brutal; elegant uses a compact neutral icon chip. The title is
+// sentence-case (callers pass the literal string).
+const emptyState = tv({
+  slots: {
+    root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
+    content: [
+      "flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
+      "[&>[data-slot=empty-state-icon]]:mb-0",
+      "[&>[data-slot=empty-state-title]]:mb-0",
+    ],
+    icon: ["mb-4 inline-flex items-center justify-center [&_svg]:shrink-0"],
+    title: ["mb-2 w-full max-w-full text-center text-balance font-heading text-lg font-semibold"],
+    description: [
+      "mx-auto w-full max-w-[32ch] text-center text-sm leading-relaxed text-pretty",
+      "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground-strong",
+    ],
+    actions: ["mt-5"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        icon: "text-foreground-muted [&_svg]:size-9",
+        title: "text-foreground/60",
+        description: "text-foreground/60",
+      },
+      elegant: {
+        icon: "rounded-md bg-layer-muted p-2 text-foreground-placeholder [&_svg]:size-4.5",
+        title: "text-sm font-medium text-foreground-strong",
+        description: "text-foreground-muted",
+      },
+    },
+  },
+});
+
+type EmptyStateSlotProps = useRender.ElementProps<"div"> & {
+  "data-slot": string;
+};
+
+export type EmptyStateProps = useRender.ComponentProps<"div">;
+
+// Root: a centered, padded column. Compose `EmptyStateContent` and
+// `EmptyStateActions` as children. Flat icon/title/description children are
+// still supported for legacy callsites.
+export function EmptyState({ render, className, ...props }: EmptyStateProps) {
+  const { root } = emptyState();
+  const defaultProps: EmptyStateSlotProps = {
+    "data-slot": "empty-state",
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "empty-state",
+    },
+  });
+}
+
+export type EmptyStateContentProps = useRender.ComponentProps<"div">;
+
+// Content: groups media, title, and description so empty-state copy keeps a
+// stable measure and balanced line breaks.
+export function EmptyStateContent({ render, className, ...props }: EmptyStateContentProps) {
+  const { content } = emptyState();
+  const defaultProps: EmptyStateSlotProps = {
+    "data-slot": "empty-state-content",
+    className: content({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "empty-state-content",
+    },
+  });
+}
+
+export type EmptyStateIconProps = useRender.ComponentProps<"div">;
+
+// Muted icon slot. The slot owns default SVG sizing per theme; callers can
+// still override it with className for custom media.
+export function EmptyStateIcon({ render, className, ...props }: EmptyStateIconProps) {
+  const theme = useThemeFamily();
+  const { icon } = emptyState({ theme });
+  const defaultProps: EmptyStateSlotProps = {
+    "data-slot": "empty-state-icon",
+    className: icon({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "empty-state-icon",
+    },
+  });
+}
+
+export type EmptyStateTitleProps = useRender.ComponentProps<"div">;
+
+// Muted, sentence-case title line. Pass `render` to override the element (e.g. a
+// real heading for landmark semantics).
+export function EmptyStateTitle({ render, className, ...props }: EmptyStateTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = emptyState({ theme });
+  const defaultProps: EmptyStateSlotProps = {
+    "data-slot": "empty-state-title",
+    className: title({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "empty-state-title",
+    },
+  });
+}
+
+export type EmptyStateDescriptionProps = useRender.ComponentProps<"div">;
+
+// Optional supporting copy, capped to ~32ch for a tidy measure. Pass `render` to
+// override the element.
+export function EmptyStateDescription({ render, className, ...props }: EmptyStateDescriptionProps) {
+  const theme = useThemeFamily();
+  const { description } = emptyState({ theme });
+  const defaultProps: EmptyStateSlotProps = {
+    "data-slot": "empty-state-description",
+    className: description({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "empty-state-description",
+    },
+  });
+}
+
+export type EmptyStateActionsProps = useRender.ComponentProps<"div">;
+
+// Optional action slot rendered below the copy. Pass `render` to override the
+// element.
+export function EmptyStateActions({ render, className, ...props }: EmptyStateActionsProps) {
+  const { actions } = emptyState();
+  const defaultProps: EmptyStateSlotProps = {
+    "data-slot": "empty-state-actions",
+    className: actions({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "empty-state-actions",
+    },
+  });
+}

package/src/components/empty-state/index.ts

@@ -0,0 +1,16 @@
+export {
+  EmptyState,
+  EmptyStateContent,
+  EmptyStateIcon,
+  EmptyStateTitle,
+  EmptyStateDescription,
+  EmptyStateActions,
+} from "./empty-state.tsx";
+export type {
+  EmptyStateProps,
+  EmptyStateContentProps,
+  EmptyStateIconProps,
+  EmptyStateTitleProps,
+  EmptyStateDescriptionProps,
+  EmptyStateActionsProps,
+} from "./empty-state.tsx";