@tangle-network/ui 11.17.0 → 11.19.0

package/src/primitives/sheet.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  [
+    "fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
+    "data-[state=closed]:animate-out data-[state=open]:animate-in",
+    "data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none",
+  ],
+  {
+    variants: {
+      side: {
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      },
+    },
+    defaultVariants: { side: "right" },
+  },
+);
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &
+    VariantProps<typeof sheetVariants> & {
+      /** Hide only the built-in close button; Escape and outside clicks still dismiss. */
+      hideCloseButton?: boolean;
+    }
+>(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      {!hideCloseButton && (
+        <SheetPrimitive.Close
+          className={cn(
+            "absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none",
+            focusRing,
+          )}
+        >
+          <X className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 p-4 pr-10", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("font-semibold text-base text-foreground leading-tight", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/primitives/slider.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * Range input with one thumb per value. A single value renders one thumb; an
+ * array of two renders a range. The thumbs are what assistive technology
+ * focuses, so the names go on them: `aria-label` / `aria-labelledby` name a
+ * single thumb, and `thumbLabels` names each thumb of a range.
+ */
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    thumbLabels?: string[];
+  }
+>(
+  (
+    {
+      className,
+      defaultValue,
+      value,
+      min = 0,
+      max = 100,
+      thumbLabels,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...props
+    },
+    ref,
+  ) => {
+  const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min];
+  const single = values.length === 1;
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5">
+        <SliderPrimitive.Range className="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+      </SliderPrimitive.Track>
+      {values.map((_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          aria-label={thumbLabels?.[index] ?? (single ? ariaLabel : undefined)}
+          aria-labelledby={single && !thumbLabels?.[index] ? ariaLabelledBy : undefined}
+          className={cn(
+            "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[box-shadow] disabled:pointer-events-none",
+            focusRing,
+          )}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+  },
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/src/primitives/theme-toggle.test.tsx

@@ -101,7 +101,8 @@ describe("root mode preference", () => {
   });
 
   it.each([
-    ["aubergine", "aubergine-light"], ["arena", "arena-light"], ["tangle-dark", "tangle-light"],
+    ["aubergine", "aubergine-light"], ["arena", "arena-light"], ["super", "super-light"], ["tangle-dark", "tangle-light"],
+    ["agents", "agents-light"],
   ])("keeps the %s named family in both directions", (name, lightName) => {
     document.documentElement.dataset.theme = name;
     render(<ThemeToggle />);

package/src/primitives/theme-toggle.tsx

@@ -10,7 +10,9 @@ const systemQuery = "(prefers-color-scheme: dark)";
 const namedModes = [
   { dark: "aubergine", light: "aubergine-light" },
   { dark: "arena", light: "arena-light" },
+  { dark: "super", light: "super-light" },
   { dark: "tangle-dark", light: "tangle-light" },
+  { dark: "agents", light: "agents-light" },
 ] as const;
 
 // Client-only preference cache also keeps the control usable when storage is

package/src/primitives/tooltip.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Wrap an app (or a toolbar) once. The open delay applies to the first tooltip;
+ * moving between triggers inside `skipDelayDuration` opens the next one at
+ * once, which keeps an icon rail fast to scan.
+ */
+const TooltipProvider = ({
+  delayDuration = 400,
+  skipDelayDuration = 300,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => (
+  <TooltipPrimitive.Provider
+    delayDuration={delayDuration}
+    skipDelayDuration={skipDelayDuration}
+    {...props}
+  />
+);
+TooltipProvider.displayName = "TooltipProvider";
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+/**
+ * Inverse-surface label for a control whose name is otherwise only an icon.
+ * It is supplementary: the trigger still needs its own accessible name.
+ */
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md bg-foreground px-2.5 py-1.5 text-background text-xs leading-snug shadow-md",
+        "data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "duration-150 ease-out motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/stories/theme-showcase.stories.tsx

@@ -17,6 +17,8 @@ const THEMES: { name: string; theme?: string }[] = [
   { name: "Aubergine · light", theme: "aubergine-light" },
   { name: "Experimental green", theme: "arena" },
   { name: "Experimental green · light", theme: "arena-light" },
+  { name: "Super (forest)", theme: "super" },
+  { name: "Super · light", theme: "super-light" },
 ];
 
 const NOW = Date.now();