raft-ui 0.0.1

package/src/components/lightbox/lightbox.tsx

@@ -0,0 +1,245 @@
+import { Dialog } from "@base-ui/react/dialog";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import { useCallback, useRef, useState, type ReactNode, type RefObject } from "react";
+import { tv } from "../../lib/tv.ts";
+import type { StyledProps } from "../../lib/styled-props.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const lightbox = tv({
+  slots: {
+    backdrop: ["fixed inset-0 z-[70] bg-layer-backdrop data-[closed]:hidden"],
+    content: ["pointer-events-none fixed inset-0 z-[71] data-[closed]:hidden"],
+    header: ["safe-top safe-left safe-right pointer-events-auto shrink-0"],
+    title: ["min-w-0 flex-1 truncate font-heading text-sm font-bold"],
+    actions: ["flex shrink-0 items-center gap-1.5"],
+    stage: [
+      "pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden",
+    ],
+    media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-2"],
+    close: [],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        header: ["border-b-2 border-line-strong bg-layer-panel"],
+        title: ["text-foreground-strong"],
+        media: ["border-line-strong bg-layer-panel shadow-xl"],
+      },
+      elegant: {},
+    },
+  },
+});
+
+export type LightboxProps<Payload = unknown> = Omit<
+  Dialog.Root.Props<Payload>,
+  "actionsRef" | "children" | "handle"
+> & {
+  children?: ReactNode;
+  closeOnModW?: boolean;
+};
+
+export function Lightbox<Payload = unknown>({
+  closeOnModW = true,
+  defaultOpen = false,
+  modal = true,
+  onOpenChange,
+  open,
+  children,
+  ...props
+}: LightboxProps<Payload>) {
+  const dialogRef = useRef<Dialog.Root.Actions>(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const effectiveOpen = open ?? uncontrolledOpen;
+
+  const handleOpenChange = useCallback<NonNullable<Dialog.Root.Props<Payload>["onOpenChange"]>>(
+    (nextOpen, eventDetails) => {
+      if (open === undefined) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen, eventDetails);
+    },
+    [onOpenChange, open],
+  );
+
+  const modWClose =
+    closeOnModW && effectiveOpen ? <LightboxModWClose dialogRef={dialogRef} /> : null;
+
+  return (
+    <Dialog.Root
+      actionsRef={dialogRef}
+      defaultOpen={defaultOpen}
+      modal={modal}
+      onOpenChange={handleOpenChange}
+      open={open}
+      {...props}
+    >
+      {modWClose}
+      {children}
+    </Dialog.Root>
+  );
+}
+
+type LightboxModWCloseProps = {
+  dialogRef: RefObject<Dialog.Root.Actions | null>;
+};
+
+function LightboxModWClose({ dialogRef }: LightboxModWCloseProps) {
+  useHotkey(
+    "Mod+W",
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      dialogRef.current?.close();
+    },
+    {
+      meta: {
+        name: "Close lightbox",
+        description: "Close the active lightbox before the browser closes the tab.",
+      },
+    },
+  );
+
+  return null;
+}
+
+export type LightboxTriggerProps = Dialog.Trigger.Props;
+
+export function LightboxTrigger(props: LightboxTriggerProps) {
+  return <Dialog.Trigger data-slot="lightbox-trigger" {...props} />;
+}
+
+export type LightboxPortalProps = Dialog.Portal.Props;
+
+export function LightboxPortal(props: LightboxPortalProps) {
+  return <Dialog.Portal data-slot="lightbox-portal" {...props} />;
+}
+
+export type LightboxContentProps = StyledProps<Dialog.Popup.Props>;
+
+export function LightboxContent({
+  className,
+  initialFocus = false,
+  finalFocus = false,
+  ...props
+}: LightboxContentProps) {
+  const theme = useThemeFamily();
+  const { backdrop, content } = lightbox({ theme });
+  return (
+    <LightboxPortal>
+      <Dialog.Backdrop data-slot="lightbox-backdrop" className={backdrop()} />
+      <Dialog.Popup
+        data-slot="lightbox-content"
+        initialFocus={initialFocus}
+        finalFocus={finalFocus}
+        className={content({ className })}
+        {...props}
+      />
+    </LightboxPortal>
+  );
+}
+
+export type LightboxHeaderProps = useRender.ComponentProps<"div">;
+
+export function LightboxHeader({ render, className, ...props }: LightboxHeaderProps) {
+  const theme = useThemeFamily();
+  const { header } = lightbox({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: header({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "lightbox-header",
+    },
+  });
+}
+
+export type LightboxTitleProps = useRender.ComponentProps<"div">;
+
+export function LightboxTitle({ render, className, ...props }: LightboxTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = lightbox({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: title({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "lightbox-title",
+    },
+  });
+}
+
+export type LightboxActionsProps = useRender.ComponentProps<"div">;
+
+export function LightboxActions({ render, className, ...props }: LightboxActionsProps) {
+  const theme = useThemeFamily();
+  const { actions } = lightbox({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: actions({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "lightbox-actions",
+    },
+  });
+}
+
+export type LightboxStageProps = useRender.ComponentProps<"div">;
+
+export function LightboxStage({ render, className, ...props }: LightboxStageProps) {
+  const theme = useThemeFamily();
+  const { stage } = lightbox({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: stage({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "lightbox-stage",
+    },
+  });
+}
+
+export type LightboxMediaProps = useRender.ComponentProps<"div">;
+
+export function LightboxMedia({ render, className, ...props }: LightboxMediaProps) {
+  const theme = useThemeFamily();
+  const { media } = lightbox({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: media({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "lightbox-media",
+    },
+  });
+}
+
+export type LightboxCloseProps = StyledProps<Dialog.Close.Props>;
+
+export function LightboxClose({ className, ...props }: LightboxCloseProps) {
+  const theme = useThemeFamily();
+  const { close } = lightbox({ theme });
+
+  return <Dialog.Close data-slot="lightbox-close" className={close({ className })} {...props} />;
+}

package/src/components/list-item/index.ts

@@ -0,0 +1,20 @@
+export {
+  ListItem,
+  ListItemActionGroup,
+  ListItemBody,
+  ListItemDescription,
+  ListItemIcon,
+  ListItemRow,
+  ListItemMeta,
+  ListItemTitle,
+} from "./list-item.tsx";
+export type {
+  ListItemActionGroupProps,
+  ListItemBodyProps,
+  ListItemDescriptionProps,
+  ListItemIconProps,
+  ListItemRowProps,
+  ListItemMetaProps,
+  ListItemProps,
+  ListItemTitleProps,
+} from "./list-item.tsx";

package/src/components/list-item/list-item.tsx

@@ -0,0 +1,263 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const listItem = tv({
+  slots: {
+    root: ["px-4 py-3 transition-colors"],
+    body: [
+      "min-w-0",
+      "grid grid-cols-[minmax(0,1fr)]",
+      "has-[>[data-slot=list-item-icon]]:grid-cols-[auto_minmax(0,1fr)]",
+      "has-[>[data-slot=list-item-icon]]:items-start",
+      "has-[>[data-slot=list-item-icon]]:gap-x-2",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-icon]]:col-start-1",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-icon]]:row-start-1",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-row]]:col-start-2",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-description]]:col-span-2",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-description]]:col-start-1",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-description]]:row-start-2",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-meta]]:col-start-2",
+      "has-[>[data-slot=list-item-icon]]:[&>[data-slot=list-item-action-group]]:col-start-2",
+    ],
+    icon: ["shrink-0 self-start", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
+    row: ["flex min-w-0 flex-wrap items-center gap-2", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
+    title: ["break-words text-sm font-bold"],
+    description: ["mt-1 text-xs"],
+    meta: [
+      "mt-1 flex min-w-0 flex-wrap items-center gap-2 text-xs",
+      "[&_svg]:size-3 [&_svg]:shrink-0",
+    ],
+    actionGroup: ["mt-2 flex flex-wrap items-center gap-2", "[&_svg]:size-3 [&_svg]:shrink-0"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: ["border-2"],
+        icon: ["mt-0.5 text-foreground/50"],
+        title: "text-foreground-strong",
+        description: "text-foreground/60",
+        meta: "text-foreground/50",
+      },
+      elegant: {
+        root: [
+          "rounded-sm border",
+          "border-line-muted bg-layer-panel",
+          "outline-none",
+          "transition-[background-color,border-color] duration-150",
+          "focus-visible:ring-2 focus-visible:ring-line-focus",
+        ],
+        icon: ["mt-0.5 text-foreground-muted"],
+        row: ["items-center gap-2"],
+        title: ["text-sm font-medium leading-snug tracking-[-0.005em]", "text-foreground-strong"],
+        description: ["mt-1 text-[0.8125rem] font-normal leading-normal", "text-foreground-muted"],
+        meta: ["text-foreground-muted"],
+        actionGroup: ["mt-2 gap-2"],
+      },
+    },
+    selected: {
+      true: {
+        root: "",
+      },
+      false: {
+        root: "",
+      },
+    },
+    interactive: {
+      true: {
+        root: "",
+      },
+      false: {
+        root: "",
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      theme: "brutal",
+      selected: true,
+      class: {
+        root: "border-line-strong bg-info-base/15 shadow-sm",
+      },
+    },
+    { theme: "brutal", selected: false, class: { root: "border-line-subtle bg-layer-panel" } },
+    {
+      theme: "brutal",
+      selected: false,
+      interactive: true,
+      class: { root: "hover:border-line-strong hover:shadow-sm" },
+    },
+    {
+      theme: "elegant",
+      selected: true,
+      class: {
+        root: ["border-info-light", "bg-info-lighter"],
+      },
+    },
+    {
+      theme: "elegant",
+      selected: false,
+      interactive: true,
+      class: {
+        root: "hover:bg-layer-muted",
+      },
+    },
+  ],
+  defaultVariants: {
+    selected: false,
+    interactive: true,
+  },
+});
+
+export type ListItemProps = useRender.ComponentProps<"div"> &
+  Omit<VariantProps<typeof listItem>, "theme">;
+
+export function ListItem({ selected, interactive, className, render, ...props }: ListItemProps) {
+  const theme = useThemeFamily();
+  const { root } = listItem({ theme, selected, interactive });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item",
+    },
+  });
+}
+
+export type ListItemBodyProps = useRender.ComponentProps<"div">;
+
+export function ListItemBody({ className, render, ...props }: ListItemBodyProps) {
+  const { body } = listItem();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: body({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item-body",
+    },
+  });
+}
+
+export type ListItemIconProps = useRender.ComponentProps<"div">;
+
+export function ListItemIcon({ className, render, ...props }: ListItemIconProps) {
+  const theme = useThemeFamily();
+  const { icon } = listItem({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: icon({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item-icon",
+    },
+  });
+}
+
+export type ListItemRowProps = useRender.ComponentProps<"div">;
+
+export function ListItemRow({ className, render, ...props }: ListItemRowProps) {
+  const theme = useThemeFamily();
+  const { row } = listItem({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: row({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item-row",
+    },
+  });
+}
+
+export type ListItemTitleProps = useRender.ComponentProps<"div">;
+
+export function ListItemTitle({ className, render, ...props }: ListItemTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = listItem({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: title({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item-title",
+    },
+  });
+}
+
+export type ListItemDescriptionProps = useRender.ComponentProps<"p">;
+
+export function ListItemDescription({ className, render, ...props }: ListItemDescriptionProps) {
+  const theme = useThemeFamily();
+  const { description } = listItem({ theme });
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: description({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "p",
+    render,
+    props: mergeProps<"p">(defaultProps, props),
+    state: {
+      slot: "list-item-description",
+    },
+  });
+}
+
+export type ListItemMetaProps = useRender.ComponentProps<"div">;
+
+export function ListItemMeta({ className, render, ...props }: ListItemMetaProps) {
+  const theme = useThemeFamily();
+  const { meta } = listItem({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: meta({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item-meta",
+    },
+  });
+}
+
+export type ListItemActionGroupProps = useRender.ComponentProps<"div">;
+
+export function ListItemActionGroup({ className, render, ...props }: ListItemActionGroupProps) {
+  const theme = useThemeFamily();
+  const { actionGroup } = listItem({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: actionGroup({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "list-item-action-group",
+    },
+  });
+}

package/src/components/media-list-item/index.ts

@@ -0,0 +1,20 @@
+export {
+  MediaListItem,
+  MediaListItemActionGroup,
+  MediaListItemBody,
+  MediaListItemText,
+  MediaListItemTitle,
+  MediaListItemSubtitle,
+  MediaListItemAside,
+  MediaListItemVisual,
+} from "./media-list-item.tsx";
+export type {
+  MediaListItemProps,
+  MediaListItemActionGroupProps,
+  MediaListItemBodyProps,
+  MediaListItemTextProps,
+  MediaListItemTitleProps,
+  MediaListItemSubtitleProps,
+  MediaListItemAsideProps,
+  MediaListItemVisualProps,
+} from "./media-list-item.tsx";