@claralight-design/react 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { RadiusToken, Squircle, SquircleProps } from "./lib/squircle.js";
+import { cn } from "./lib/utils.js";
+import { AnchoredSide, AnchoredSurface, AnchoredSurfaceProps, SurfaceGeometry, surfacePath } from "./lib/anchored.js";
+import { Button, ButtonProps, buttonVariants } from "./ui/button.js";
+import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardVariants } from "./ui/card.js";
+import { Dialog, DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogPopup, DialogPopupProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./ui/dialog.js";
+import { Input, InputProps, inputVariants } from "./ui/input.js";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./ui/popover.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaEdge, ScrollAreaOrientation, ScrollAreaProps, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, ScrollbarVisibility } from "./ui/scroll-area.js";
+import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemIndicator, SelectItemIndicatorProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./ui/select.js";
+import { Tooltip, TooltipArrow, TooltipContent, TooltipContentProps, TooltipGroup, TooltipGroupProps, TooltipMotion, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps, TooltipViewport } from "./ui/tooltip.js";
+export { type AnchoredSide, AnchoredSurface, type AnchoredSurfaceProps, Button, type ButtonProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Dialog, DialogBackdrop, type DialogBackdropProps, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogPopup, type DialogPopupProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Input, type InputProps, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, type RadiusToken, ScrollArea, ScrollAreaContent, ScrollAreaCorner, type ScrollAreaEdge, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, type ScrollbarVisibility, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Squircle, type SquircleProps, type SurfaceGeometry, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipGroup, type TooltipGroupProps, type TooltipMotion, TooltipPopup, TooltipPortal, TooltipPositioner, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, TooltipViewport, buttonVariants, cardVariants, cn, inputVariants, surfacePath };

package/dist/index.js

@@ -0,0 +1,12 @@
+import { cn } from "./lib/utils.js";
+import { Squircle } from "./lib/squircle.js";
+import { AnchoredSurface, surfacePath } from "./lib/anchored.js";
+import { Button, buttonVariants } from "./ui/button.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from "./ui/card.js";
+import { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogTrigger } from "./ui/dialog.js";
+import { Input, inputVariants } from "./ui/input.js";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger } from "./ui/popover.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ui/scroll-area.js";
+import { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectSeparator, SelectTrigger, SelectValue } from "./ui/select.js";
+import { Tooltip, TooltipArrow, TooltipContent, TooltipGroup, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, TooltipViewport } from "./ui/tooltip.js";
+export { AnchoredSurface, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogTrigger, Input, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectSeparator, SelectTrigger, SelectValue, Squircle, Tooltip, TooltipArrow, TooltipContent, TooltipGroup, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, TooltipViewport, buttonVariants, cardVariants, cn, inputVariants, surfacePath };

package/dist/lib/anchored.d.ts

@@ -0,0 +1,152 @@
+import { RadiusToken } from "./squircle.js";
+import "./utils.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/lib/anchored.d.ts
+/**
+ * ClaraLight's anchored overlay surface — the shape behind `Popover` and
+ * `Tooltip`.
+ *
+ * ## Why this is not `Squircle`
+ *
+ * A ClaraLight overlay points at its anchor, and the arrow is **part of the
+ * surface**, not a second element parked against its edge. That is forced by
+ * the design language rather than chosen for elegance: the frost fill is
+ * translucent, so two overlapping elements composite their alpha into a
+ * visible dark seam, and the 1px outline of the body would run straight across
+ * the arrow's mouth. Both are plainly visible at rest, not just in motion.
+ *
+ * So the body and the tail are a single closed path. `Squircle` cannot express
+ * that — Lisse's API takes corner options, with no way to hand it a path — so
+ * this primitive owns the same three jobs `Squircle` delegates to Lisse:
+ *
+ *   clip-path   the fused path, which is also what clips the backdrop blur
+ *   the outline an SVG stroke over the same path, because `clip-path` crops
+ *               `border` (and `outline`) to nothing
+ *   sync        re-measure when the surface resizes, flips side, or the anchor
+ *               moves the tail — and, for a shared tooltip, drive the tail
+ *               ahead of a surface that is still travelling
+ *
+ * It deliberately does **not** render a shadow. Anchored overlays in ClaraLight
+ * sit on their outline and their blur alone.
+ *
+ * ## Why the body still comes from Lisse
+ *
+ * `generatePath` emits the Figma smoothing construction, which is the whole
+ * argument in `squircle.tsx` for not using CSS `corner-shape`. Reimplementing
+ * it here would fork the corner geometry of the design system, so the tail is
+ * spliced into Lisse's own output instead: its straight edges are discrete
+ * absolute `L` commands, which makes the splice an edit rather than a boolean
+ * union.
+ */
+/**
+ * The physical side of the anchor a surface sits on.
+ *
+ * Base UI also accepts the logical `inline-start` / `inline-end`, which are
+ * deliberately not forwarded: with a physical side in, Base UI's resolved side
+ * (and therefore `data-side`, which drives both the tail and the padding) is
+ * guaranteed to be one of these four, so the geometry never has to resolve
+ * writing direction to know which edge the tail belongs on.
+ */
+export type AnchoredSide = "top" | "bottom" | "left" | "right";
+interface Point {
+  x: number;
+  y: number;
+}
+export interface SurfaceGeometry {
+  /** Border box of the whole surface, tail included. */
+  width: number;
+  height: number;
+  /** Side of the anchor the surface was placed on. */
+  side: AnchoredSide;
+  radius: number;
+  smoothing: number;
+  /** Whether to splice the tail in at all. */
+  arrow: boolean;
+  /** How far the tail reaches past the body, and its full base width. */
+  extent: number;
+  arrowWidth: number;
+  /** Tail centre along the tail's edge, from the surface's own origin. */
+  center: number;
+}
+export interface SurfaceOutline {
+  /** The `clip-path` value: the surface's whole filled region. */
+  clip: string;
+  /**
+   * The subpaths to stroke. One when the tail is part of the body's own
+   * outline; two when the surface is a union, in which case each is stroked
+   * clipped to the outside of the other so the shared join is never drawn.
+   */
+  outline: string[];
+  /** Where the surface grows from: the tail's tip, or the anchored edge. */
+  origin: Point;
+  /**
+   * Where the tail actually landed, after being held clear of the corners.
+   *
+   * The requested centre is a wish: it comes from the anchor, which can sit
+   * anywhere, including off the end of the surface. This is the answer, and the
+   * only value a caller may animate towards — following the wish instead would
+   * chase a position the surface will not draw.
+   */
+  center: number;
+  /**
+   * The centres this surface could have drawn: how far the tail can reach along
+   * its edge.
+   *
+   * Anything animating the tail needs this, not just the answer for one frame. A
+   * follower aimed at an unreachable centre covers the whole distance to it in
+   * its first step and lands on the limit — which is a jump, not a movement.
+   * Aimed at the limit itself, the same follower slides.
+   */
+  range: {
+    min: number;
+    max: number;
+  };
+}
+/**
+ * The surface's filled region and the strokes that trace its boundary.
+ *
+ * The tail is spliced into the body's own path whenever the anchored edge has
+ * a straight run long enough to hold its base. That is the case for every
+ * top and bottom overlay and for tall ones on the left or right, and it is the
+ * better construction: one continuous outline, stroked in one pass.
+ *
+ * A short edge has no straight run at all — the corners meet in the middle of
+ * it — and no amount of splicing can put a 24px base on it. There the surface
+ * becomes the union of the body and a tail whose base sinks below the body's
+ * outline, which is what Flutter draws too. The `clip-path` unions them by
+ * winding, and the two strokes are clipped against each other.
+ *
+ * Both constructions need to know where the corners let go of the edge, and
+ * that is read off the path Lisse emitted rather than derived from the radius —
+ * see `edgeRun`.
+ */
+export declare function surfacePath(geometry: SurfaceGeometry): SurfaceOutline;
+export interface AnchoredSurfaceProps extends Omit<ComponentProps<"div">, "children"> {
+  /** Which `--radius-*` token shapes the body's corners. */
+  radius: RadiusToken;
+  /**
+   * Preferred side, used until Base UI reports the side it actually resolved
+   * on `data-side`. Only the fallback: a flip updates the tail on its own.
+   */
+  side: AnchoredSide;
+  /** Whether the surface points at its anchor. */
+  arrow?: boolean;
+  /** Figma's `xi`; defaults to `--cl-corner-smoothing`, as in `Squircle`. */
+  smoothing?: number;
+  /** Classes for the wrapper: placement, transform, and the entrance. */
+  wrapperClassName?: string;
+  /** Classes for the shape itself: fill, border, padding, text. */
+  className?: string;
+  /** Whether the fused tail follows a new trigger on an interruptible track. */
+  tailMotion?: "none" | "fast";
+  /**
+   * Merge onto a single child rather than rendering a `div`. Needed for the
+   * same reason as in `Squircle`: the clipped element is a Base UI part that
+   * owns its own tag and behaviour.
+   */
+  asChild?: boolean;
+  children?: ReactNode;
+}
+export declare function AnchoredSurface({ radius, side, arrow, smoothing, wrapperClassName, className, asChild, children, ref: forwardedRef, style, tailMotion, ...props }: AnchoredSurfaceProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=anchored.d.ts.map