@boxcustodia/library 2.0.0-alpha.10 → 2.0.0-alpha.12

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,171 @@
+import { Tooltip as TooltipBase } from "@base-ui/react/tooltip";
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { cn } from "../../lib";
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type RootProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;
+type TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;
+type PopupProps = ComponentPropsWithoutRef<typeof TooltipBase.Popup>;
+type ArrowProps = ComponentPropsWithoutRef<typeof TooltipBase.Arrow>;
+type ProviderProps = ComponentPropsWithoutRef<typeof TooltipBase.Provider>;
+
+// ── Arrow SVG ─────────────────────────────────────────────────────────────────
+
+function ArrowSvg(props: React.ComponentProps<"svg">) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+/** Enables shared hover intent and delay grouping across multiple tooltips. */
+export function TooltipProvider(props: ProviderProps) {
+  return <TooltipBase.Provider {...props} />;
+}
+
+export function TooltipRoot(props: RootProps) {
+  return <TooltipBase.Root {...props} />;
+}
+
+export function TooltipTrigger({ className, ...props }: TriggerProps) {
+  return (
+    <TooltipBase.Trigger
+      data-slot="tooltip-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+export function TooltipPopup({ className, ...props }: PopupProps) {
+  return (
+    <TooltipBase.Popup
+      data-slot="tooltip-popup"
+      className={cn(
+        "flex origin-[var(--transform-origin)] flex-col rounded-md bg-popover px-2.5 py-1.5 text-xs text-popover-foreground drop-shadow-md",
+        "transition-[scale,opacity] duration-150 ease-out",
+        "data-starting-style:scale-98 data-starting-style:opacity-0",
+        "data-ending-style:scale-98 data-ending-style:opacity-0",
+        "data-instant:duration-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TooltipArrow({ className, ...props }: ArrowProps) {
+  return (
+    <TooltipBase.Arrow
+      data-slot="tooltip-arrow"
+      className={cn(
+        "flex text-popover",
+        "data-[side=bottom]:top-[-8px]",
+        "data-[side=left]:right-[-13px] data-[side=left]:rotate-90",
+        "data-[side=right]:left-[-13px] data-[side=right]:-rotate-90",
+        "data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      <ArrowSvg />
+    </TooltipBase.Arrow>
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export type TooltipProps = Omit<RootProps, "children"> &
+  Omit<
+    TriggerProps,
+    "render" | "delay" | "closeDelay" | "className" | "content"
+  > & {
+    /** The element that triggers the tooltip on hover/focus. */
+    children: ReactElement;
+    /** Content displayed inside the tooltip popup. */
+    content: ReactNode;
+    /** Preferred side of the trigger to render the tooltip. @default "top" */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Alignment on the axis perpendicular to `side`. @default "center" */
+    align?: "start" | "center" | "end";
+    /** Distance in pixels between the tooltip and the trigger. @default 10 */
+    offset?: number;
+    /** Delay in ms before the tooltip opens. @default 600 */
+    delay?: TriggerProps["delay"];
+    /** Delay in ms before the tooltip closes. @default 0 */
+    closeDelay?: TriggerProps["closeDelay"];
+    /** Additional classes applied to the tooltip popup. */
+    className?: string;
+    /**
+     * Additional classes applied to the arrow.
+     * Pass a `text-*` class to change the arrow color when overriding the popup background.
+     * @example arrowClassName="text-primary"
+     */
+    arrowClassName?: string;
+  };
+
+/**
+ * Accessible popup that shows additional information on hover/focus.
+ * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+export function Tooltip({
+  content,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  side = "top",
+  align,
+  offset = 10,
+  delay,
+  closeDelay,
+  className,
+  arrowClassName,
+  ...triggerProps
+}: TooltipProps) {
+  return (
+    <TooltipRoot
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <TooltipTrigger
+        delay={delay}
+        closeDelay={closeDelay}
+        render={children}
+        {...triggerProps}
+      />
+      <TooltipBase.Portal>
+        <TooltipBase.Positioner
+          side={side}
+          align={align}
+          sideOffset={offset}
+          className="z-float"
+        >
+          <TooltipPopup className={className}>
+            <TooltipArrow className={arrowClassName} />
+            {content}
+          </TooltipPopup>
+        </TooltipBase.Positioner>
+      </TooltipBase.Portal>
+    </TooltipRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { TooltipBase as TooltipPrimitive };

package/src/components/tree/hooks/use-controllable-tree-state.ts

@@ -0,0 +1,80 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback } from "react";
+
+interface UseControllableTreeStateProps {
+  defaultExpandedKeys: string[];
+  defaultSelectedKeys: string[];
+  selectedKeys?: string[];
+  expandedKeys?: string[];
+  multiSelect: boolean;
+  onSelect?: (selectedKeys: string[]) => void;
+  onExpand?: (expandedKeys: string[]) => void;
+}
+
+export function useControllableTreeState({
+  defaultExpandedKeys,
+  defaultSelectedKeys,
+  selectedKeys: selectedKeysProp,
+  expandedKeys: expandedKeysProp,
+  multiSelect,
+  onSelect,
+  onExpand,
+}: UseControllableTreeStateProps) {
+  const [expandedKeys = new Set(), setExpandedKeys] = useControllableState<
+    Set<string>
+  >({
+    prop: expandedKeysProp ? new Set(expandedKeysProp) : undefined,
+    defaultProp: new Set(defaultExpandedKeys),
+    onChange: (keys) => onExpand?.(Array.from(keys)),
+  });
+
+  const [selectedKeys = new Set(), setSelectedKeys] = useControllableState<
+    Set<string>
+  >({
+    prop: selectedKeysProp ? new Set(selectedKeysProp) : undefined,
+    defaultProp: new Set(defaultSelectedKeys),
+    onChange: (keys) => onSelect?.(Array.from(keys)),
+  });
+
+  const handleToggle = useCallback(
+    (nodeId: string) => {
+      setExpandedKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(nodeId)) {
+          next.delete(nodeId);
+        } else {
+          next.add(nodeId);
+        }
+        return next;
+      });
+    },
+    [setExpandedKeys],
+  );
+
+  const handleSelect = useCallback(
+    (nodeId: string) => {
+      setSelectedKeys((prev) => {
+        const next = new Set(prev);
+        if (multiSelect) {
+          if (next.has(nodeId)) {
+            next.delete(nodeId);
+          } else {
+            next.add(nodeId);
+          }
+        } else {
+          next.clear();
+          next.add(nodeId);
+        }
+        return next;
+      });
+    },
+    [multiSelect, setSelectedKeys],
+  );
+
+  return {
+    expandedKeys,
+    selectedKeys,
+    handleToggle,
+    handleSelect,
+  };
+}

package/src/components/tree/index.ts

@@ -0,0 +1,2 @@
+export * from "./tree";
+export * from "./tree-primitives";

package/src/components/tree/tree-primitives.tsx

@@ -0,0 +1,126 @@
+import { ChevronRight } from "lucide-react";
+import * as React from "react";
+import type {
+  TreeItemProps as TreeItemPrimitiveProps,
+  TreeProps,
+} from "react-aria-components";
+import {
+  Button,
+  Collection,
+  composeRenderProps as cr,
+  TreeItemContent as TreeItemContentPrimitive,
+  TreeItem as TreeItemPrimitive,
+  Tree as TreePrimitive,
+} from "react-aria-components";
+import { tv } from "tailwind-variants";
+import { OverrideProps } from "../../models";
+
+const treeStyles = tv({
+  base: "flex py-2 rounded-lg bg-bg cursor-default lg:text-sm flex-col overflow-auto outline-none",
+  variants: {
+    isFocusVisible: {
+      true: "outline-offset-[-1px] outline-2 outline-primary",
+    },
+  },
+});
+
+const TreeRoot = <T extends object>({ className, ...props }: TreeProps<T>) => {
+  return (
+    <TreePrimitive
+      data-slot="tree"
+      className={cr(className, (className, renderProps) =>
+        treeStyles({
+          ...renderProps,
+          className,
+        }),
+      )}
+      {...props}
+    >
+      {props.children}
+    </TreePrimitive>
+  );
+};
+
+const itemStyles = tv({
+  base: [
+    "[&_[data-expanded]_[slot=chevron]_[data-slot=icon]]:rotate-90 outline-none [--padding:20px] p-[0.286rem_0.286rem_0.286rem_0.571rem] pl-[calc((var(--tree-item-level)-1)*20px+0.571rem+var(--padding))]",
+    "[&_[slot=chevron]]:outline-none [&_[slot=chevron]_[data-slot=icon]]:text-muted-fg",
+    "data-[has-child-rows]:[--padding:0px]",
+  ],
+  variants: {
+    isExpanded: {
+      true: "[&_[slot=chevron]_[data-slot=icon]]:text-fg [&_[slot=chevron]_[data-slot=icon]]:rotate-90 [&_[slot=chevron]_[data-slot=icon]]:transition [&_[slot=chevron]_[data-slot=icon]]:duration-200",
+    },
+    isFocusVisible: {
+      true: "[&_[slot=chevron]_[data-slot=icon]]:text-fg focus:outline-none focus-visible:ring-1 focus-visible:ring-primary",
+    },
+    isDisabled: {
+      true: "opacity-50 forced-colors:text-[GrayText]",
+    },
+    isSelected: {
+      true: "bg-accent text-accent-foreground",
+    },
+  },
+});
+
+const TreeItem = <T extends object>({
+  className,
+  ...props
+}: OverrideProps<TreeItemPrimitiveProps<T>, { id: string | number }>) => {
+  return (
+    <TreeItemPrimitive
+      data-slot="tree-item"
+      data-key={props.id}
+      className={cr(className, (className, renderProps) =>
+        itemStyles({
+          ...renderProps,
+          className,
+        }),
+      )}
+      {...props}
+    >
+      {props.children}
+    </TreeItemPrimitive>
+  );
+};
+
+const TreeItemContent = (
+  props: React.ComponentProps<typeof TreeItemContentPrimitive>,
+) => {
+  return (
+    <TreeItemContentPrimitive
+      data-slot="tree-item-content"
+      {...props}
+      data-key={props.key}
+    >
+      <div className="flex items-center gap-x-1">
+        {props.children as React.ReactNode}
+      </div>
+    </TreeItemContentPrimitive>
+  );
+};
+
+const TreeItemIndicator = () => {
+  return (
+    <Button
+      data-slot="tree-item-chevron"
+      className="shrink-0 relative"
+      slot="chevron"
+    >
+      <ChevronRight className="size-5" data-slot="icon" />
+    </Button>
+  );
+};
+
+const TreeItemLabel = (props: React.HtmlHTMLAttributes<HTMLSpanElement>) => {
+  return <span data-slot="tree-item-label" {...props} />;
+};
+
+export {
+  Collection,
+  TreeItem,
+  TreeItemContent,
+  TreeItemIndicator,
+  TreeItemLabel,
+  TreeRoot,
+};