@fileverse/ui 5.2.0 → 5.2.1-tooltip-1

package/dist/index.css

@@ -1388,6 +1388,17 @@ video {
     border-radius: 8px;
     border-width: 4px;
   }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1504,6 +1515,9 @@ video {
 .top-1\/2 {
   top: 50%;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-3 {
   top: 0.75rem;
 }
@@ -1538,18 +1552,10 @@ video {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
-.-my-1 {
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
-}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -1782,6 +1788,9 @@ video {
 .max-h-\[300px\] {
   max-height: 300px;
 }
+.max-h-\[var\(--radix-tooltip-content-available-height\2c none\)\] {
+  max-height: var(--radix-tooltip-content-available-height,none);
+}
 .max-h-screen {
   max-height: 100vh;
 }
@@ -1803,9 +1812,6 @@ video {
 .min-h-\[296px\] {
   min-height: 296px;
 }
-.min-h-\[2vh\] {
-  min-height: 2vh;
-}
 .min-h-\[468px\] {
   min-height: 468px;
 }
@@ -1975,6 +1981,9 @@ video {
 .w-\[8px\] {
   width: 8px;
 }
+.w-\[92\.5vw\] {
+  width: 92.5vw;
+}
 .w-\[calc\(100vw-24px\)\] {
   width: calc(100vw - 24px);
 }
@@ -2077,6 +2086,9 @@ video {
 .max-w-\[172px\] {
   max-width: 172px;
 }
+.max-w-\[394px\] {
+  max-width: 394px;
+}
 .max-w-\[440px\] {
   max-width: 440px;
 }
@@ -2086,6 +2098,9 @@ video {
 .max-w-\[70vw\] {
   max-width: 70vw;
 }
+.max-w-\[var\(--radix-tooltip-content-available-width\2c 24rem\)\] {
+  max-width: var(--radix-tooltip-content-available-width,24rem);
+}
 .max-w-fit {
   max-width: -moz-fit-content;
   max-width: fit-content;
@@ -2974,10 +2989,6 @@ video {
 .ring-offset-white {
   --tw-ring-offset-color: #fff;
 }
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .drop-shadow {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3040,6 +3051,21 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+.animate-in {
+  animation-name: enter;
+  animation-duration: 150ms;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+.fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+.zoom-in-95 {
+  --tw-enter-scale: .95;
+}
 .duration-200 {
   animation-duration: 200ms;
 }
@@ -4061,18 +4087,6 @@ textarea:is(:-webkit-autofill, :autofill) {
 .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
   padding-right: 0px;
 }
-.\[\&\>span\]\:\!left-\[10\%\]>span {
-  left: 10% !important;
-}
-.\[\&\>span\]\:\!left-\[80\%\]>span {
-  left: 80% !important;
-}
-.\[\&\>span\]\:\!top-\[20\%\]>span {
-  top: 20% !important;
-}
-.\[\&\>span\]\:\!top-\[60\%\]>span {
-  top: 60% !important;
-}
 .\[\&\>span\]\:line-clamp-1>span {
   overflow: hidden;
   display: -webkit-box;

package/dist/index.es.d.ts

@@ -30,6 +30,7 @@ import { SetStateAction } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitives from '@radix-ui/react-toast';
+import * as TooltipPrimitives from '@radix-ui/react-tooltip';
 import { VariantProps } from 'class-variance-authority';
 
 export declare const Accordion: React_2.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React_2.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React_2.RefAttributes<HTMLDivElement>, "ref">) & React_2.RefAttributes<HTMLDivElement>>;
@@ -279,6 +280,34 @@ export declare const DialogClose: React_2.ForwardRefExoticComponent<DialogPrimit
 
 export declare const DialogContent: React_2.ForwardRefExoticComponent<DialogContentProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * `DialogContentPrimitive` — the raw, unstyled Radix Dialog Content.
+ *
+ * Unlike {@link DialogContent}, this ships **no** styling, no portal, no
+ * overlay, and no close icon. Reach for it when the opinionated `DialogContent`
+ * gets in the way — e.g. custom centering, shared-element / layout animations
+ * (its default `translate(-50%,-50%)` centering conflicts with transform-driven
+ * animation), or when you need `asChild` to render your own element.
+ *
+ * Composition-first: assemble it yourself with {@link DialogPortal} and
+ * {@link DialogOverlay}. For the common "centered panel" case, prefer
+ * {@link DialogShell}, which wires those up for you.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogPortal>
+ *     <DialogOverlay />
+ *     <DialogContentPrimitive className="fixed inset-0 flex items-center justify-center">
+ *       <DialogTitle className="sr-only">…</DialogTitle>
+ *       <div className="rounded-lg color-bg-default">…</div>
+ *     </DialogContentPrimitive>
+ *   </DialogPortal>
+ * </Dialog>
+ * ```
+ */
+export declare const DialogContentPrimitive: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
 declare interface DialogContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
     hasCloseIcon?: boolean;
     dismissable?: boolean;
@@ -301,6 +330,47 @@ export declare const DialogOverlay: React_2.ForwardRefExoticComponent<Omit<Dialo
 
 export declare const DialogPortal: React_2.FC<DialogPrimitive.DialogPortalProps>;
 
+/**
+ * `DialogShell` — a centered dialog that leaves the panel styling entirely to
+ * you, built for custom and **animated** content.
+ *
+ * It centers via flexbox (a full-screen `pointer-events-none` wrapper) rather
+ * than a CSS transform, so nothing sits on a transformed ancestor — making it
+ * safe for framer-motion layout / shared-element (`layoutId`) animations that
+ * {@link DialogContent} would break. Because the wrapper is transparent to
+ * pointer events, backdrop clicks reach the overlay and Radix's own
+ * outside-click dismissal keeps working; Escape and focus management come from
+ * Radix as usual.
+ *
+ * You provide the panel as `children` (style it however you like — including a
+ * `motion.div`); render your own close affordance with {@link DialogClose}.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogShell>
+ *     <DialogTitle className="sr-only">Announcement</DialogTitle>
+ *     <div className="w-[92.5vw] max-w-[394px] rounded-xl color-bg-default">
+ *       <DialogClose className="absolute top-2 right-2">
+ *         <LucideIcon name="X" className="h-5 w-5" />
+ *       </DialogClose>
+ *       …
+ *     </div>
+ *   </DialogShell>
+ * </Dialog>
+ * ```
+ */
+export declare const DialogShell: React_2.ForwardRefExoticComponent<DialogShellProps & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface DialogShellProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** Classes for the dimming {@link DialogOverlay}. */
+    overlayClasses?: string;
+    /** Classes for the full-screen flex-centering wrapper around the panel. */
+    containerClassName?: string;
+    /** When `false`, clicking the backdrop / pressing Escape won't close. Default `true`. */
+    dismissable?: boolean;
+}
+
 export declare const DialogTitle: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
 
 export declare const DialogTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -935,7 +1005,7 @@ export declare const SheetTitle: React_2.ForwardRefExoticComponent<Omit<DialogPr
 export declare const SheetTrigger: React_2.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 declare const sheetVariants: (props?: ({
-    side?: "bottom" | "top" | "right" | "left" | null | undefined;
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Skeleton: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => JSX_2.Element;
@@ -1255,19 +1325,35 @@ declare const toggleVariants: (props?: ({
 
 export declare const Tooltip: React_2.ForwardRefExoticComponent<TooltipProps & React_2.RefAttributes<HTMLDivElement>>;
 
-export declare interface TooltipProps extends React_2.HTMLAttributes<HTMLElement>, VariantProps<typeof tooltipVariants> {
+declare const TooltipContent: React_2.ForwardRefExoticComponent<TooltipPrimitives.TooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TooltipProps extends React_2.HTMLAttributes<HTMLElement> {
     text: string | React_2.ReactNode;
+    /**
+     * Gap between the trigger and the tip of the beak, in px. Radix adds the
+     * measured arrow height to this internally, so it is the visible gap rather
+     * than the distance to the bubble edge.
+     */
     sideOffset?: number;
     asTriggerChild?: boolean;
     open?: boolean;
+    /**
+     * Minimum gap kept between the tooltip and the collision boundary (the
+     * viewport by default). Radix defaults this to 0, which lets long content sit
+     * flush against the edge. This also shrinks
+     * `--radix-tooltip-content-available-width/height`, so the max-width below
+     * respects the same gutter rather than growing into it.
+     */
+    collisionPadding?: React_2.ComponentPropsWithoutRef<typeof TooltipContent>["collisionPadding"];
+    /** Side of the trigger to place the tooltip on. Maps to Radix `side`. */
+    position?: "top" | "bottom" | "left" | "right" | null;
+    /**
+     * Alignment of the tooltip — and therefore its beak — along the trigger.
+     * Maps to Radix `align`, which positions the beak natively.
+     */
+    beakAlignment?: "start" | "center" | "end" | null;
 }
 
-declare const tooltipVariants: (props?: ({
-    position?: "bottom" | "top" | "right" | "left" | null | undefined;
-    beakAlignment?: "end" | "center" | "start" | null | undefined;
-    defaultVariants?: "variant" | "beakPosition" | null | undefined;
-} & ClassProp) | undefined) => string;
-
 export declare const UltimateIcons: any;
 
 export declare const useHoverAndLongPress: ({ delay, }: UseHoverAndLongPressProps) => {