raft-ui 0.0.5 → 0.0.7

package/src/components/lightbox/lightbox.tsx

@@ -1,245 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,263 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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";