@plexui/ui 0.2.0

package/dist/es/components/Textarea/Textarea.module.css

@@ -0,0 +1,272 @@
+@layer components {.Container {
+  --textarea-line-height: 20px;
+  --textarea-font-weight: var(--font-weight-normal);
+  --textarea-color: var(--color-text);
+  --textarea-gutter-y: calc(0.5 * calc(var(--textarea-base-height) - var(--textarea-line-height)));
+  --textarea-min-height: calc(
+    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-min-rows))
+  );
+  --textarea-max-height: calc(
+    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-max-rows))
+  );
+}
+  /* ============================================ */
+  .Container:where([data-size="3xs"]) {
+    --textarea-base-height: var(--control-size-3xs);
+    --textarea-font-size: var(--control-font-size-sm);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+  /* Sizes */
+
+  .Container:where([data-size="2xs"]) {
+    --textarea-base-height: var(--control-size-2xs);
+    --textarea-font-size: var(--control-font-size-sm);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  /* ============================================ */
+
+  .Container:where([data-size="xs"]) {
+    --textarea-base-height: var(--control-size-xs);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-sm);
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  .Container:where([data-size="sm"]) {
+    --textarea-base-height: var(--control-size-sm);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-sm);
+  }
+
+  /* ("md" is applied by default, set above) */
+  .Container:where([data-size="md"]) {
+    --textarea-base-height: var(--control-size-md);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  .Container:where([data-size="lg"]) {
+    --textarea-base-height: var(--control-size-lg);
+    --textarea-font-size: var(--control-font-size-md);
+    --textarea-radius: var(--control-radius-md);
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  .Container:where([data-size="xl"]) {
+    --textarea-base-height: var(--control-size-xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-lg);
+    --textarea-gutter-x: var(--control-gutter-lg);
+  }
+
+  .Container:where([data-size="2xl"]) {
+    --textarea-base-height: var(--control-size-2xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+
+  .Container:where([data-size="3xl"]) {
+    --textarea-base-height: var(--control-size-3xl);
+    --textarea-font-size: var(--control-font-size-lg);
+    --textarea-radius: var(--control-radius-xl);
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+  /* ============================================ */
+  .Container:where([data-gutter-size="2xs"]) {
+    --textarea-gutter-x: var(--control-gutter-2xs);
+  }
+  /* Gutter sizes */
+
+  .Container:where([data-gutter-size="xs"]) {
+    --textarea-gutter-x: var(--control-gutter-xs);
+  }
+
+  /* ============================================ */
+
+  .Container:where([data-gutter-size="sm"]) {
+    --textarea-gutter-x: var(--control-gutter-sm);
+  }
+
+  .Container:where([data-gutter-size="md"]) {
+    --textarea-gutter-x: var(--control-gutter-md);
+  }
+
+  .Container:where([data-gutter-size="lg"]) {
+    --textarea-gutter-x: var(--control-gutter-lg);
+  }
+
+  .Container:where([data-gutter-size="xl"]) {
+    --textarea-gutter-x: var(--control-gutter-xl);
+  }
+
+  .Container {
+
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  width: 100%;
+  border-radius: var(--textarea-radius);
+  color: var(--textarea-color);
+  cursor: text;
+  font-size: var(--textarea-font-size);
+  font-weight: var(--textarea-font-weight);
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color, box-shadow, background-color;
+  transition-timing-function: var(--transition-ease-basic);
+}
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .Container:where([data-variant="outline"]) {
+    /* NOTE: Don't add box-model size here, as the <textarea> defines all height sizing */
+    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
+  }
+      @media (hover: hover) and (pointer: fine) {.Container:where([data-variant="outline"]):not([data-disabled]):hover {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
+}
+}
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .Container:where([data-variant="soft"]) {
+    background-color: var(--input-soft-background-color);
+  }
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
+        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
+      }
+
+      .Container:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+    .Container[data-invalid] ::-moz-selection {
+      background-color: var(--red-a50);
+    }
+    .Container[data-invalid] ::selection {
+      background-color: var(--red-a50);
+    }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  .Container[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }.Textarea {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-height: var(--textarea-min-height);
+  max-height: var(--textarea-max-height);
+  padding: var(--textarea-gutter-y) var(--textarea-gutter-x);
+  border: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  /* Prevent Firefox autofill coloring (preview and confirmed modes) */
+  filter: none;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: var(--textarea-line-height);
+  resize: none;
+}
+
+  .Textarea:focus {
+    outline: 0;
+  }
+
+  .Textarea:disabled {
+    cursor: not-allowed;
+  }
+
+  .Textarea::-moz-placeholder {
+    color: var(--input-placeholder-text-color);
+    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
+    opacity: 1;
+  }
+
+  .Textarea::placeholder {
+    color: var(--input-placeholder-text-color);
+    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
+    opacity: 1;
+  }
+
+  /* Applying an animation on autofill allows us to listen for the event in JS */
+  .Textarea:-webkit-autofill {
+    animation: native-autofill-in 1ms;
+  }
+
+  /* Prevent auto-fill coloring */
+  .Textarea:-webkit-autofill,
+  .Textarea:-webkit-autofill:focus,
+  .Textarea:-webkit-autofill:hover {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    /* Prevent all color changes by delaying their effect for a very long time */
+    /* We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them. */
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+  }
+  /* Identical to block above, but must keep separate for browsers to recognize their own selector */
+  .Textarea:-webkit-autofill-and-obscured,
+  .Textarea:-webkit-autofill-strong-password,
+  .Textarea:-webkit-autofill-strong-password-viewable {
+    color: var(--color-text) !important;
+    -webkit-text-fill-color: var(--color-text) !important;
+    -webkit-transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+    transition:
+      background-color 0s 50000s,
+      box-shadow 0s 50000s,
+      filter 0s 50000s !important;
+  }
+  /* Prevent strange autofill size adjustments */
+  .Textarea:-webkit-autofill::first-line {
+    font-size: 16px !important;
+    -webkit-transition: font-size 0s 50000s !important;
+    transition: font-size 0s 50000s !important;
+  }
+
+  .Textarea::-webkit-resizer {
+    visibility: hidden;
+  }@keyframes native-autofill-in {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+}

package/dist/es/components/Textarea/index.js

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA","sourcesContent":["export { Textarea, type TextareaProps } from \"./Textarea\"\n"]}

package/dist/es/components/Tooltip/CopyTooltip.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as RadixTooltip } from "radix-ui";
+import { useRef, useState } from "react";
+import { copyText } from "../../lib/copyToClipboard";
+import { Check, Copy } from "../Icon";
+import { Tooltip } from "./Tooltip";
+export const CopyTooltip = ({ children, copyValue, openDelay = 150, align = "center", alignOffset = 0, side = "top", sideOffset = 5, }) => {
+    const [open, setOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const copiedTimerRef = useRef(undefined);
+    const copy = () => {
+        setCopied(true);
+        // Not currently revealing the slight async nature of this operation,
+        // nor indicating the failure state.
+        copyText(copyValue);
+        // Persist the copied state for a second, then close
+        copiedTimerRef.current = setTimeout(() => {
+            setOpen(false);
+        }, 1000);
+    };
+    const handleOpenChange = (nextState) => {
+        // When opening, ensure timer and copied state are cleared
+        if (nextState) {
+            clearTimeout(copiedTimerRef.current);
+            setCopied(false);
+        }
+        setOpen(nextState);
+    };
+    return (_jsxs(Tooltip.Root, { open: open, onOpenChange: handleOpenChange, delayDuration: openDelay, disableHoverableContent: false, children: [_jsx(Tooltip.Trigger, { onPointerDown: (evt) => {
+                    // Prevent tooltip listeners from closing
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    // Copy the value
+                    copy();
+                }, 
+                // Prevent default behavior of closing on click from this handler
+                onClick: (evt) => {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                }, children: children }), _jsx(Tooltip.Content, { compact: true, clickable: !copied, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: 15, onEscapeKeyDown: () => setOpen(false), onPointerDown: copy, children: copied ? (
+                // The <Check /> SVG canvas whitespace is larger than copy, so we use a smaller flexbox gap
+                _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(Check, {}), " Copied!"] })) : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Copy, {}), " Copy"] })) })] }));
+};
+//# sourceMappingURL=CopyTooltip.js.map

package/dist/es/components/Tooltip/CopyTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyTooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/CopyTooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAiCnC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,GAAG,EACf,KAAK,GAAG,QAAQ,EAChB,WAAW,GAAG,CAAC,EACf,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,CAAC,GACG,EAAE,EAAE;IACrB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACpD,MAAM,cAAc,GAAG,MAAM,CAAgC,SAAS,CAAC,CAAA;IAEvE,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,SAAS,CAAC,IAAI,CAAC,CAAA;QAEf,qEAAqE;QACrE,oCAAoC;QACpC,QAAQ,CAAC,SAAS,CAAC,CAAA;QAEnB,oDAAoD;QACpD,cAAc,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACvC,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC,EAAE,IAAI,CAAC,CAAA;IACV,CAAC,CAAA;IAED,MAAM,gBAAgB,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC9C,0DAA0D;QAC1D,IAAI,SAAS,EAAE,CAAC;YACd,YAAY,CAAC,cAAc,CAAC,OAAO,CAAC,CAAA;YACpC,SAAS,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC;QAED,OAAO,CAAC,SAAS,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,CACL,MAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,SAAS,EACxB,uBAAuB,EAAE,KAAK,aAE9B,KAAC,OAAO,CAAC,OAAO,IACd,aAAa,EAAE,CAAC,GAAG,EAAE,EAAE;oBACrB,yCAAyC;oBACzC,GAAG,CAAC,cAAc,EAAE,CAAA;oBACpB,GAAG,CAAC,eAAe,EAAE,CAAA;oBAErB,iBAAiB;oBACjB,IAAI,EAAE,CAAA;gBACR,CAAC;gBACD,iEAAiE;gBACjE,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;oBACf,GAAG,CAAC,cAAc,EAAE,CAAA;oBACpB,GAAG,CAAC,eAAe,EAAE,CAAA;gBACvB,CAAC,YAEA,QAAQ,GACO,EAClB,KAAC,OAAO,CAAC,OAAO,IACd,OAAO,QACP,SAAS,EAAE,CAAC,MAAM,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,EAAE,EACpB,eAAe,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EACrC,aAAa,EAAE,IAAI,YAElB,MAAM,CAAC,CAAC,CAAC;gBACR,2FAA2F;gBAC3F,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,KAAK,KAAG,gBACL,CACP,CAAC,CAAC,CAAC,CACF,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,IAAI,KAAG,aACJ,CACP,GACe,IACL,CAChB,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { Tooltip as RadixTooltip } from \"radix-ui\"\nimport { useRef, useState } from \"react\"\nimport { copyText } from \"../../lib/copyToClipboard\"\nimport { Check, Copy } from \"../Icon\"\nimport { Tooltip } from \"./Tooltip\"\n\nexport type CopyTooltipProps = {\n  children: React.ReactNode\n  /** Value to copy to the clipboard */\n  copyValue: string\n  /**\n   * Delay of when the tooltip is shown from first interaction, in milliseconds.\n   * @default 150\n   */\n  openDelay?: number\n  /**\n   * The preferred alignment against the trigger. May change when collisions occur.\n   * @default center\n   */\n  align?: RadixTooltip.TooltipContentProps[\"align\"]\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   * @default 0\n   */\n  alignOffset?: RadixTooltip.TooltipContentProps[\"alignOffset\"]\n  /**\n   * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n   * @default top\n   */\n  side?: RadixTooltip.TooltipContentProps[\"side\"]\n  /**\n   * The distance in pixels from the trigger.\n   * @default 5\n   */\n  sideOffset?: RadixTooltip.TooltipContentProps[\"sideOffset\"]\n}\n\nexport const CopyTooltip = ({\n  children,\n  copyValue,\n  openDelay = 150,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"top\",\n  sideOffset = 5,\n}: CopyTooltipProps) => {\n  const [open, setOpen] = useState<boolean>(false)\n  const [copied, setCopied] = useState<boolean>(false)\n  const copiedTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)\n\n  const copy = () => {\n    setCopied(true)\n\n    // Not currently revealing the slight async nature of this operation,\n    // nor indicating the failure state.\n    copyText(copyValue)\n\n    // Persist the copied state for a second, then close\n    copiedTimerRef.current = setTimeout(() => {\n      setOpen(false)\n    }, 1000)\n  }\n\n  const handleOpenChange = (nextState: boolean) => {\n    // When opening, ensure timer and copied state are cleared\n    if (nextState) {\n      clearTimeout(copiedTimerRef.current)\n      setCopied(false)\n    }\n\n    setOpen(nextState)\n  }\n\n  return (\n    <Tooltip.Root\n      open={open}\n      onOpenChange={handleOpenChange}\n      delayDuration={openDelay}\n      disableHoverableContent={false}\n    >\n      <Tooltip.Trigger\n        onPointerDown={(evt) => {\n          // Prevent tooltip listeners from closing\n          evt.preventDefault()\n          evt.stopPropagation()\n\n          // Copy the value\n          copy()\n        }}\n        // Prevent default behavior of closing on click from this handler\n        onClick={(evt) => {\n          evt.preventDefault()\n          evt.stopPropagation()\n        }}\n      >\n        {children}\n      </Tooltip.Trigger>\n      <Tooltip.Content\n        compact\n        clickable={!copied}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        collisionPadding={15}\n        onEscapeKeyDown={() => setOpen(false)}\n        onPointerDown={copy}\n      >\n        {copied ? (\n          // The <Check /> SVG canvas whitespace is larger than copy, so we use a smaller flexbox gap\n          <div className=\"flex items-center gap-0.5\">\n            <Check /> Copied!\n          </div>\n        ) : (\n          <div className=\"flex items-center gap-1\">\n            <Copy /> Copy\n          </div>\n        )}\n      </Tooltip.Content>\n    </Tooltip.Root>\n  )\n}\n"]}

package/dist/es/components/Tooltip/Tooltip.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Tooltip as RadixTooltip, Slot } from "radix-ui";
+import { useState } from "react";
+import { useTimeout } from "usehooks-ts";
+import { useEscCloseStack } from "../../hooks/useEscCloseStack";
+import { preventDefaultHandler } from "../../lib/helpers";
+import s from "./Tooltip.module.css";
+export const Tooltip = (props) => {
+    const { ref: forwardedRef, children, content, forceOpen = content === null ? false : undefined, maxWidth = 300, openDelay = 150, interactive = false, compact = false, preventUnintentionalClickToClose, align, alignOffset = 0, side, sideOffset = 5, gutterSize = "md", contentClassName, onPointerDown, onClick, ...restProps } = props;
+    const [visible, setVisible] = useState(false);
+    const [temporarilyPreventClickToClose, setTemporarilyPreventClickToClose] = useState(false);
+    useTimeout(() => setTemporarilyPreventClickToClose(false), temporarilyPreventClickToClose ? 400 : null);
+    const open = forceOpen ?? visible;
+    const handleOpenChange = (nextState) => {
+        // When forceOpen is passed, don't manage internal state
+        if (typeof forceOpen === "boolean")
+            return;
+        setVisible(nextState);
+        if (preventUnintentionalClickToClose) {
+            setTemporarilyPreventClickToClose(nextState);
+        }
+    };
+    const maybePreventClickClose = (evt) => {
+        if (preventUnintentionalClickToClose && temporarilyPreventClickToClose) {
+            // Prevents tooltip listeners from closing
+            evt.preventDefault();
+            evt.stopPropagation();
+        }
+    };
+    return (_jsxs(Root, { open: open, delayDuration: openDelay, onOpenChange: handleOpenChange, disableHoverableContent: !interactive, children: [_jsx(RadixTooltip.Trigger, { asChild: true, children: _jsx(Slot.Root, { ...restProps, ref: forwardedRef, onPointerDown: (evt) => {
+                        maybePreventClickClose(evt);
+                        onPointerDown?.(evt);
+                    }, onClick: (evt) => {
+                        maybePreventClickClose(evt);
+                        onClick?.(evt);
+                    }, children: children }) }), _jsx(Content, { maxWidth: maxWidth, compact: compact, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, gutterSize: gutterSize, className: contentClassName, children: content })] }));
+};
+const Root = ({ children, open, onOpenChange, ...restProps }) => {
+    useEscCloseStack(open, () => {
+        onOpenChange(false);
+    });
+    return (_jsx(RadixTooltip.Provider, { children: _jsx(RadixTooltip.Root, { open: open, onOpenChange: onOpenChange, ...restProps, children: children }) }));
+};
+export const Content = ({ children, maxWidth = 300, compact = false, clickable = undefined, alignOffset = 0, sideOffset = 5, gutterSize = "md", className, style, ...restProps }) => {
+    return (_jsx(RadixTooltip.Portal, { children: _jsx(RadixTooltip.Content, { ...restProps, className: clsx(s.Tooltip, className), "data-compact": compact, "data-clickable": clickable, "data-gutter-size": gutterSize, alignOffset: alignOffset, sideOffset: sideOffset, collisionPadding: 15, hideWhenDetached: true, style: {
+                ...style,
+                maxWidth,
+            }, onEscapeKeyDown: preventDefaultHandler, children: children }) }));
+};
+export const Trigger = ({ children, asChild = true, ...restProps }) => {
+    return (_jsx(RadixTooltip.Trigger, { asChild: asChild, ...restProps, children: children }));
+};
+// Optional wrapper for tooltip trigger, if the visual content isn't already accessible or with built-in visual indications
+export const TriggerDecorator = (props) => {
+    const { children, className, focusable = true, ref, ...restProps } = props;
+    const isPlainText = typeof children === "string";
+    return (_jsx(Slot.Root, { ref: ref, ...restProps, className: clsx(s.TriggerDecorator, className), tabIndex: focusable ? 0 : undefined, children: isPlainText ? _jsx("span", { children: children }) : children }));
+};
+// Building advanced tooltip behaviors can be achieved by using the
+// composed components, and wiring up bespoke behaviors.
+Tooltip.Root = Root;
+Tooltip.Content = Content;
+Tooltip.Trigger = Trigger;
+// Basic <Tooltip> usage can be done with the component directly,
+// without requiring controlled component composition.
+// <TriggerDecorator> is a helper component that creates an accessible trigger with a visual effect
+Tooltip.TriggerDecorator = TriggerDecorator;
+//# sourceMappingURL=Tooltip.js.map

package/dist/es/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAoD,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,CAAC,MAAM,sBAAsB,CAAA;AAkEpC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,EACJ,GAAG,EAAE,YAAY,EACjB,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAChD,QAAQ,GAAG,GAAG,EACd,SAAS,GAAG,GAAG,EACf,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,KAAK,EACf,gCAAgC,EAChC,KAAK,EACL,WAAW,GAAG,CAAC,EACf,IAAI,EACJ,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,IAAI,EACjB,gBAAgB,EAChB,aAAa,EACb,OAAO,EACP,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IACtD,MAAM,CAAC,8BAA8B,EAAE,iCAAiC,CAAC,GACvE,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC1B,UAAU,CACR,GAAG,EAAE,CAAC,iCAAiC,CAAC,KAAK,CAAC,EAC9C,8BAA8B,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAC5C,CAAA;IACD,MAAM,IAAI,GAAG,SAAS,IAAI,OAAO,CAAA;IAEjC,MAAM,gBAAgB,GAAG,CAAC,SAAkB,EAAE,EAAE;QAC9C,wDAAwD;QACxD,IAAI,OAAO,SAAS,KAAK,SAAS;YAAE,OAAM;QAE1C,UAAU,CAAC,SAAS,CAAC,CAAA;QAErB,IAAI,gCAAgC,EAAE,CAAC;YACrC,iCAAiC,CAAC,SAAS,CAAC,CAAA;QAC9C,CAAC;IACH,CAAC,CAAA;IAED,MAAM,sBAAsB,GAAG,CAAC,GAAqB,EAAE,EAAE;QACvD,IAAI,gCAAgC,IAAI,8BAA8B,EAAE,CAAC;YACvE,0CAA0C;YAC1C,GAAG,CAAC,cAAc,EAAE,CAAA;YACpB,GAAG,CAAC,eAAe,EAAE,CAAA;QACvB,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,MAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,SAAS,EACxB,YAAY,EAAE,gBAAgB,EAC9B,uBAAuB,EAAE,CAAC,WAAW,aAErC,KAAC,YAAY,CAAC,OAAO,IAAC,OAAO,kBAC3B,KAAC,IAAI,CAAC,IAAI,OACJ,SAAS,EACb,GAAG,EAAE,YAAY,EACjB,aAAa,EAAE,CAAC,GAAG,EAAE,EAAE;wBACrB,sBAAsB,CAAC,GAAG,CAAC,CAAA;wBAC3B,aAAa,EAAE,CAAC,GAAG,CAAC,CAAA;oBACtB,CAAC,EACD,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;wBACf,sBAAsB,CAAC,GAAG,CAAC,CAAA;wBAC3B,OAAO,EAAE,CAAC,GAAG,CAAC,CAAA;oBAChB,CAAC,YAEA,QAAQ,GACC,GACS,EACvB,KAAC,OAAO,IACN,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,gBAAgB,YAE1B,OAAO,GACA,IACL,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,CAAC,EACZ,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,GAAG,SAAS,EAIb,EAAE,EAAE;IACH,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE;QAC1B,YAAY,CAAC,KAAK,CAAC,CAAA;IACrB,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,cACpB,KAAC,YAAY,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,KAAM,SAAS,YACrE,QAAQ,GACS,GACE,CACzB,CAAA;AACH,CAAC,CAAA;AAsBD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,QAAQ,GAAG,GAAG,EACd,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,SAAS,EACrB,WAAW,GAAG,CAAC,EACf,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,OAAO,CACL,KAAC,YAAY,CAAC,MAAM,cAClB,KAAC,YAAY,CAAC,OAAO,OACf,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,kBACvB,OAAO,oBACL,SAAS,sBACP,UAAU,EAC5B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,EAAE,EACpB,gBAAgB,QAChB,KAAK,EAAE;gBACL,GAAG,KAAK;gBACR,QAAQ;aACT,EACD,eAAe,EAAE,qBAAqB,YAErC,QAAQ,GACY,GACH,CACvB,CAAA;AACH,CAAC,CAAA;AAgBD,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,GAAG,SAAS,EACqB,EAAE,EAAE;IACrC,OAAO,CACL,KAAC,YAAY,CAAC,OAAO,IAAC,OAAO,EAAE,OAAO,KAAM,SAAS,YAClD,QAAQ,GACY,CACxB,CAAA;AACH,CAAC,CAAA;AAED,2HAA2H;AAC3H,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,EAAE;IAC7D,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;IAC1E,MAAM,WAAW,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAA;IAEhD,OAAO,CACL,KAAC,IAAI,CAAC,IAAI,IACR,GAAG,EAAE,GAAG,KACJ,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,EAC9C,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAElC,WAAW,CAAC,CAAC,CAAC,yBAAO,QAAQ,GAAQ,CAAC,CAAC,CAAC,QAAQ,GACvC,CACb,CAAA;AACH,CAAC,CAAA;AAED,mEAAmE;AACnE,wDAAwD;AACxD,OAAO,CAAC,IAAI,GAAG,IAAI,CAAA;AACnB,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;AACzB,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;AACzB,iEAAiE;AACjE,sDAAsD;AACtD,mGAAmG;AACnG,OAAO,CAAC,gBAAgB,GAAG,gBAAgB,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Tooltip as RadixTooltip, Slot } from \"radix-ui\"\nimport { useState, type MouseEventHandler, type PointerEventHandler } from \"react\"\nimport { useTimeout } from \"usehooks-ts\"\nimport { useEscCloseStack } from \"../../hooks/useEscCloseStack\"\nimport { preventDefaultHandler } from \"../../lib/helpers\"\nimport s from \"./Tooltip.module.css\"\n\nexport type TooltipProps = {\n  children: React.ReactNode\n  /**\n   * The content of the tooltip. If `null`, the tooltip will not render.\n   */\n  content: React.ReactNode\n  /**\n   * Defines the `max-width` of the tooltip content. `\"none\"` creates a single-line, naturally sized tooltip.\n   * @default 300\n   */\n  maxWidth?: number | \"none\"\n  /**\n   * Forces the tooltip to remain open or closed\n   */\n  forceOpen?: boolean\n  /**\n   * Delay of when the tooltip is shown from first interaction, in milliseconds.\n   * @default 150\n   */\n  openDelay?: number\n  /** Indicates that the tooltip has interactive content, and should remain open when hovered. */\n  interactive?: boolean\n  /**\n   * Short, 1-3 word tooltips, stylized inversely from normal tooltips\n   */\n  compact?: boolean\n  /**\n   * Prevents the tooltip from closing when the trigger is clicked right after opening\n   * @default false\n   */\n  preventUnintentionalClickToClose?: true\n  /**\n   * The preferred alignment against the trigger. May change when collisions occur.\n   * @default center\n   */\n  align?: RadixTooltip.TooltipContentProps[\"align\"]\n  /**\n   * An offset in pixels from the \"start\" or \"end\" alignment options.\n   * @default 0\n   */\n  alignOffset?: RadixTooltip.TooltipContentProps[\"alignOffset\"]\n  /**\n   * The preferred side of the trigger to render against when open. Will be reversed when collisions occur.\n   * @default top\n   */\n  side?: RadixTooltip.TooltipContentProps[\"side\"]\n  /**\n   * The distance in pixels from the trigger.\n   * @default 5\n   */\n  sideOffset?: RadixTooltip.TooltipContentProps[\"sideOffset\"]\n  /**\n   * Gutter sizing inside the tooltip content\n   * @default md\n   */\n  gutterSize?: \"sm\" | \"md\" | \"lg\"\n  /** Ref for the tooltip */\n  ref?: React.Ref<HTMLDivElement | null>\n  onPointerDown?: PointerEventHandler\n  onClick?: MouseEventHandler\n  /** Optional class name to apply to the tooltip content */\n  contentClassName?: string\n}\n\nexport const Tooltip = (props: TooltipProps) => {\n  const {\n    ref: forwardedRef,\n    children,\n    content,\n    forceOpen = content === null ? false : undefined,\n    maxWidth = 300,\n    openDelay = 150,\n    interactive = false,\n    compact = false,\n    preventUnintentionalClickToClose,\n    align,\n    alignOffset = 0,\n    side,\n    sideOffset = 5,\n    gutterSize = \"md\",\n    contentClassName,\n    onPointerDown,\n    onClick,\n    ...restProps\n  } = props\n  const [visible, setVisible] = useState<boolean>(false)\n  const [temporarilyPreventClickToClose, setTemporarilyPreventClickToClose] =\n    useState<boolean>(false)\n  useTimeout(\n    () => setTemporarilyPreventClickToClose(false),\n    temporarilyPreventClickToClose ? 400 : null,\n  )\n  const open = forceOpen ?? visible\n\n  const handleOpenChange = (nextState: boolean) => {\n    // When forceOpen is passed, don't manage internal state\n    if (typeof forceOpen === \"boolean\") return\n\n    setVisible(nextState)\n\n    if (preventUnintentionalClickToClose) {\n      setTemporarilyPreventClickToClose(nextState)\n    }\n  }\n\n  const maybePreventClickClose = (evt: React.MouseEvent) => {\n    if (preventUnintentionalClickToClose && temporarilyPreventClickToClose) {\n      // Prevents tooltip listeners from closing\n      evt.preventDefault()\n      evt.stopPropagation()\n    }\n  }\n\n  return (\n    <Root\n      open={open}\n      delayDuration={openDelay}\n      onOpenChange={handleOpenChange}\n      disableHoverableContent={!interactive}\n    >\n      <RadixTooltip.Trigger asChild>\n        <Slot.Root\n          {...restProps}\n          ref={forwardedRef}\n          onPointerDown={(evt) => {\n            maybePreventClickClose(evt)\n            onPointerDown?.(evt)\n          }}\n          onClick={(evt) => {\n            maybePreventClickClose(evt)\n            onClick?.(evt)\n          }}\n        >\n          {children}\n        </Slot.Root>\n      </RadixTooltip.Trigger>\n      <Content\n        maxWidth={maxWidth}\n        compact={compact}\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        gutterSize={gutterSize}\n        className={contentClassName}\n      >\n        {content}\n      </Content>\n    </Root>\n  )\n}\n\nconst Root = ({\n  children,\n  open,\n  onOpenChange,\n  ...restProps\n}: RadixTooltip.TooltipProps & {\n  open: boolean\n  onOpenChange: (nextState: boolean) => void\n}) => {\n  useEscCloseStack(open, () => {\n    onOpenChange(false)\n  })\n\n  return (\n    <RadixTooltip.Provider>\n      <RadixTooltip.Root open={open} onOpenChange={onOpenChange} {...restProps}>\n        {children}\n      </RadixTooltip.Root>\n    </RadixTooltip.Provider>\n  )\n}\n\ntype TooltipContentProps = RadixTooltip.TooltipContentProps & {\n  children: React.ReactNode\n  /**\n   * Defines the `max-width` of the tooltip content. `\"none\"` creates a single-line, naturally sized tooltip.\n   * @default 300\n   */\n  maxWidth?: number | \"none\"\n  /**\n   * Short, 1-3 word tooltips, stylized inversely from normal tooltips\n   */\n  compact?: boolean\n  /**\n   * Gutter sizing inside the tooltip content\n   * @default md\n   */\n  gutterSize?: \"sm\" | \"md\" | \"lg\"\n  /** Determines if the tooltip content should respond to click events */\n  clickable?: boolean\n}\n\nexport const Content = ({\n  children,\n  maxWidth = 300,\n  compact = false,\n  clickable = undefined,\n  alignOffset = 0,\n  sideOffset = 5,\n  gutterSize = \"md\",\n  className,\n  style,\n  ...restProps\n}: TooltipContentProps) => {\n  return (\n    <RadixTooltip.Portal>\n      <RadixTooltip.Content\n        {...restProps}\n        className={clsx(s.Tooltip, className)}\n        data-compact={compact}\n        data-clickable={clickable}\n        data-gutter-size={gutterSize}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        collisionPadding={15}\n        hideWhenDetached\n        style={{\n          ...style,\n          maxWidth,\n        }}\n        onEscapeKeyDown={preventDefaultHandler}\n      >\n        {children}\n      </RadixTooltip.Content>\n    </RadixTooltip.Portal>\n  )\n}\n\ntype TooltipTriggerProps = RadixTooltip.TooltipTriggerProps & {\n  /**\n   * Determines if `tabindex=0` is applied to the trigger\n   * @default true\n   */\n  focusable?: boolean\n  /**\n   * Optional class name to apply to the trigger\n   */\n  className?: string\n  /** Ref for the trigger */\n  ref?: React.Ref<HTMLSpanElement | null>\n}\n\nexport const Trigger = ({\n  children,\n  asChild = true,\n  ...restProps\n}: RadixTooltip.TooltipTriggerProps) => {\n  return (\n    <RadixTooltip.Trigger asChild={asChild} {...restProps}>\n      {children}\n    </RadixTooltip.Trigger>\n  )\n}\n\n// Optional wrapper for tooltip trigger, if the visual content isn't already accessible or with built-in visual indications\nexport const TriggerDecorator = (props: TooltipTriggerProps) => {\n  const { children, className, focusable = true, ref, ...restProps } = props\n  const isPlainText = typeof children === \"string\"\n\n  return (\n    <Slot.Root\n      ref={ref}\n      {...restProps}\n      className={clsx(s.TriggerDecorator, className)}\n      tabIndex={focusable ? 0 : undefined}\n    >\n      {isPlainText ? <span>{children}</span> : children}\n    </Slot.Root>\n  )\n}\n\n// Building advanced tooltip behaviors can be achieved by using the\n// composed components, and wiring up bespoke behaviors.\nTooltip.Root = Root\nTooltip.Content = Content\nTooltip.Trigger = Trigger\n// Basic <Tooltip> usage can be done with the component directly,\n// without requiring controlled component composition.\n// <TriggerDecorator> is a helper component that creates an accessible trigger with a visual effect\nTooltip.TriggerDecorator = TriggerDecorator\n"]}

package/dist/es/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,91 @@
+@layer components {.Tooltip {
+  z-index: 50;
+  max-width: 300px;
+  border-radius: var(--radius-md);
+  /* animation-duration: 0.3s; */
+  /* animation-name: scale-in; */
+  /* animation-timing-function: var(--cubic-enter); */
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow), var(--shadow-hairline);
+  font-size: 14px;
+  line-height: 1.45;
+  /* transform-origin: var(--radix-tooltip-content-transform-origin); */
+  /* transition: background-color 0.15s ease; */
+
+  /* &[data-state="closed"] {
+    animation: scale-out 0.2s var(--cubic-exit);
+  } */
+}
+
+  /*
+   * Default cursor is slightly more pleasing than text cursor,
+   * if a tooltip transitions between clickable -> non-clickable (e.g., CopyTooltip)
+   */
+  .Tooltip[data-clickable="false"] {
+    cursor: default;
+  }
+
+  .Tooltip[data-clickable="true"] {
+    cursor: pointer;
+  }
+    @media (hover: hover) and (pointer: fine) {.Tooltip[data-compact="true"][data-clickable="true"]:hover {
+      background: var(--gray-600);
+      color: var(--gray-0);
+}
+}
+
+  .Tooltip[data-gutter-size="sm"] {
+    padding: 8px 12px;
+  }
+
+  .Tooltip[data-gutter-size="md"] {
+    padding: 12px 16px;
+  }
+
+  .Tooltip[data-gutter-size="lg"] {
+    padding: 14px 18px;
+  }
+
+  .Tooltip[data-compact="true"] {
+    padding: 2px 8px;
+    background: var(--gray-700);
+    color: var(--gray-0);
+    font-size: 14px;
+  }@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}@keyframes scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}.TriggerDecorator {
+  display: inline-flex;
+  cursor: pointer;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: transparent;
+  /* transition: text-decoration 0.2s var(--cubic-exit); */
+}
+
+  .TriggerDecorator:focus {
+    outline: 0;
+  }
+
+  .TriggerDecorator[data-state*="open"] {
+    text-decoration-color: var(--color-text-tertiary);
+    transition-timing-function: var(--cubic-enter);
+  }
+}

package/dist/es/components/Tooltip/index.js

@@ -0,0 +1,3 @@
+export { CopyTooltip } from "./CopyTooltip";
+export { Tooltip } from "./Tooltip";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAA","sourcesContent":["export { CopyTooltip, type CopyTooltipProps } from \"./CopyTooltip\"\nexport { Tooltip, type TooltipProps } from \"./Tooltip\"\n"]}

package/dist/es/components/Transition/Animate.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { TransitionGroup } from "./TransitionGroup";
+import {} from "react";
+import { toCssVariables, toFilterProperty, toMsDurationProperty, toOpacityProperty, toTransformProperty, } from "../../lib/helpers";
+import s from "./Animate.module.css";
+import {} from "./shared";
+export const Animate = (props) => {
+    const { as: TagName = "span", className, children, preventInitialTransition, insertMethod, transitionClassName, transitionPosition = "absolute", } = props;
+    const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props);
+    return (_jsx(TagName, { className: clsx("block", transitionPosition === "absolute" && "relative", className), "data-transition-position": transitionPosition, style: variables, children: _jsx(TransitionGroup, { as: TagName, className: clsx(s.TransitionItem, transitionClassName), enterDuration: enterTotalDuration, exitDuration: exitTotalDuration, insertMethod: insertMethod, preventInitialTransition: preventInitialTransition, children: children }) }));
+};
+// Keep in sync with default values in Animate.module.css
+const DEFAULT_ENTER_DURATION_MS_EASE = 400;
+const DEFAULT_ENTER_DURATION_MS_CUBIC = 500;
+const DEFAULT_EXIT_DURATION_MS_EASE = 200;
+const DEFAULT_EXIT_DURATION_MS_CUBIC = 300;
+function getAnimationProperties({ initial: initial, enter: enter, exit: exit, forceCompositeLayer, }) {
+    // Dynamically inspect if we're transitioning transform properties, and apply cubic curves and timings as defaults
+    const initialTransform = toTransformProperty(initial);
+    const enterTransform = toTransformProperty(enter);
+    const exitTransform = toTransformProperty(exit);
+    const isCubicTransition = [initialTransform, exitTransform, enterTransform].some((t) => t !== "none");
+    const enterDuration = enter?.duration ??
+        (isCubicTransition ? DEFAULT_ENTER_DURATION_MS_CUBIC : DEFAULT_ENTER_DURATION_MS_EASE);
+    const enterTimingFunction = enter?.timingFunction ?? (isCubicTransition ? "var(--cubic-enter)" : "ease");
+    const exitDuration = exit?.duration ??
+        (isCubicTransition ? DEFAULT_EXIT_DURATION_MS_CUBIC : DEFAULT_EXIT_DURATION_MS_EASE);
+    const exitTimingFunction = exit?.timingFunction ?? (isCubicTransition ? "var(--cubic-exit)" : "ease");
+    // Generate variable overrides from props
+    const variables = toCssVariables({
+        "tg-will-change": forceCompositeLayer ? "transform, opacity" : "auto",
+        "tg-enter-opacity": toOpacityProperty(enter?.opacity ?? 1),
+        "tg-enter-transform": enterTransform,
+        "tg-enter-filter": toFilterProperty(enter),
+        "tg-enter-duration": toMsDurationProperty(enterDuration),
+        "tg-enter-delay": toMsDurationProperty(enter?.delay ?? 0),
+        "tg-enter-timing-function": enterTimingFunction,
+        "tg-exit-opacity": toOpacityProperty(exit?.opacity ?? 0),
+        "tg-exit-transform": exitTransform,
+        "tg-exit-filter": toFilterProperty(exit),
+        "tg-exit-duration": toMsDurationProperty(exitDuration),
+        "tg-exit-delay": toMsDurationProperty(exit?.delay ?? 0),
+        "tg-exit-timing-function": exitTimingFunction,
+        "tg-initial-opacity": toOpacityProperty(initial?.opacity ?? exit?.opacity ?? 0),
+        "tg-initial-transform": initialTransform === "none" ? exitTransform : initialTransform,
+        "tg-initial-filter": toFilterProperty(initial ?? exit ?? {}),
+    });
+    const enterTotalDuration = (enter?.delay ?? 0) + enterDuration;
+    const exitTotalDuration = (exit?.delay ?? 0) + exitDuration;
+    return { enterTotalDuration, exitTotalDuration, variables };
+}
+//# sourceMappingURL=Animate.js.map

package/dist/es/components/Transition/Animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Animate.js","sourceRoot":"","sources":["../../../../src/components/Transition/Animate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAA;AAE9E,OAAO,EAAsB,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,CAAC,MAAM,sBAAsB,CAAA;AACpC,OAAO,EAA+D,MAAM,UAAU,CAAA;AA0BtF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,EACJ,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,GAAG,UAAU,GAChC,GAAG,KAAK,CAAA;IACT,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAA;IAE1F,OAAO,CACL,KAAC,OAAO,IACN,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,kBAAkB,KAAK,UAAU,IAAI,UAAU,EAAE,SAAS,CAAC,8BAC1D,kBAAkB,EAC5C,KAAK,EAAE,SAAS,YAEhB,KAAC,eAAe,IACd,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,cAAc,EAAE,mBAAmB,CAAC,EACtD,aAAa,EAAE,kBAAkB,EACjC,YAAY,EAAE,iBAAiB,EAC/B,YAAY,EAAE,YAAY,EAC1B,wBAAwB,EAAE,wBAAwB,YAEjD,QAAQ,GACO,GACV,CACX,CAAA;AACH,CAAC,CAAA;AAED,yDAAyD;AACzD,MAAM,8BAA8B,GAAG,GAAG,CAAA;AAC1C,MAAM,+BAA+B,GAAG,GAAG,CAAA;AAC3C,MAAM,6BAA6B,GAAG,GAAG,CAAA;AACzC,MAAM,8BAA8B,GAAG,GAAG,CAAA;AAE1C,SAAS,sBAAsB,CAAC,EAC9B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,mBAAmB,GACN;IAKb,kHAAkH;IAClH,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAA;IACrD,MAAM,cAAc,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,aAAa,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAA;IAC/C,MAAM,iBAAiB,GAAG,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC,IAAI,CAC9E,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,MAAM,CACpB,CAAA;IACD,MAAM,aAAa,GACjB,KAAK,EAAE,QAAQ;QACf,CAAC,iBAAiB,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAA;IACxF,MAAM,mBAAmB,GACvB,KAAK,EAAE,cAAc,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9E,MAAM,YAAY,GAChB,IAAI,EAAE,QAAQ;QACd,CAAC,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAA;IACtF,MAAM,kBAAkB,GACtB,IAAI,EAAE,cAAc,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;IAE5E,yCAAyC;IACzC,MAAM,SAAS,GAAG,cAAc,CAAC;QAC/B,gBAAgB,EAAE,mBAAmB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM;QACrE,kBAAkB,EAAE,iBAAiB,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC;QAC1D,oBAAoB,EAAE,cAAc;QACpC,iBAAiB,EAAE,gBAAgB,CAAC,KAAK,CAAC;QAC1C,mBAAmB,EAAE,oBAAoB,CAAC,aAAa,CAAC;QACxD,gBAAgB,EAAE,oBAAoB,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC;QACzD,0BAA0B,EAAE,mBAAmB;QAC/C,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,EAAE,OAAO,IAAI,CAAC,CAAC;QACxD,mBAAmB,EAAE,aAAa;QAClC,gBAAgB,EAAE,gBAAgB,CAAC,IAAI,CAAC;QACxC,kBAAkB,EAAE,oBAAoB,CAAC,YAAY,CAAC;QACtD,eAAe,EAAE,oBAAoB,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC;QACvD,yBAAyB,EAAE,kBAAkB;QAC7C,oBAAoB,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,OAAO,IAAI,CAAC,CAAC;QAC/E,sBAAsB,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB;QACtF,mBAAmB,EAAE,gBAAgB,CAAC,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC;KAC5B,CAAC,CAAA;IAEnC,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,aAAa,CAAA;IAC9D,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,GAAG,YAAY,CAAA;IAE3D,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAC7D,CAAC","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { TransitionGroup, type TransitionGroupProps } from \"./TransitionGroup\"\n\nimport { type CSSProperties } from \"react\"\nimport {\n  toCssVariables,\n  toFilterProperty,\n  toMsDurationProperty,\n  toOpacityProperty,\n  toTransformProperty,\n} from \"../../lib/helpers\"\nimport s from \"./Animate.module.css\"\nimport { type InitialTransitionDefinition, type TransitionDefinition } from \"./shared\"\n\nexport type AnimateProps = Pick<\n  TransitionGroupProps,\n  \"as\" | \"children\" | \"className\" | \"insertMethod\" | \"preventInitialTransition\"\n> & {\n  /** Class applied to the inner TransitionGroup */\n  transitionClassName?: string\n  /** Styles applied to the enter transition */\n  enter?: TransitionDefinition\n  /** Styles applied to the exit transition */\n  exit?: TransitionDefinition\n  /** Styles applied before the enter transition occurs */\n  initial?: InitialTransitionDefinition\n  /**\n   * Determines how transition states are positioned\n   * @default absolute\n   */\n  transitionPosition?: \"absolute\" | \"static\"\n  /**\n   * Applies `will-change` to force animating elements to composite layers. Use with caution!\n   * @default false\n   */\n  forceCompositeLayer?: boolean\n}\n\nexport const Animate = (props: AnimateProps) => {\n  const {\n    as: TagName = \"span\",\n    className,\n    children,\n    preventInitialTransition,\n    insertMethod,\n    transitionClassName,\n    transitionPosition = \"absolute\",\n  } = props\n  const { enterTotalDuration, exitTotalDuration, variables } = getAnimationProperties(props)\n\n  return (\n    <TagName\n      className={clsx(\"block\", transitionPosition === \"absolute\" && \"relative\", className)}\n      data-transition-position={transitionPosition}\n      style={variables}\n    >\n      <TransitionGroup\n        as={TagName}\n        className={clsx(s.TransitionItem, transitionClassName)}\n        enterDuration={enterTotalDuration}\n        exitDuration={exitTotalDuration}\n        insertMethod={insertMethod}\n        preventInitialTransition={preventInitialTransition}\n      >\n        {children}\n      </TransitionGroup>\n    </TagName>\n  )\n}\n\n// Keep in sync with default values in Animate.module.css\nconst DEFAULT_ENTER_DURATION_MS_EASE = 400\nconst DEFAULT_ENTER_DURATION_MS_CUBIC = 500\nconst DEFAULT_EXIT_DURATION_MS_EASE = 200\nconst DEFAULT_EXIT_DURATION_MS_CUBIC = 300\n\nfunction getAnimationProperties({\n  initial: initial,\n  enter: enter,\n  exit: exit,\n  forceCompositeLayer,\n}: AnimateProps): {\n  enterTotalDuration: number\n  exitTotalDuration: number\n  variables: CSSProperties\n} {\n  // Dynamically inspect if we're transitioning transform properties, and apply cubic curves and timings as defaults\n  const initialTransform = toTransformProperty(initial)\n  const enterTransform = toTransformProperty(enter)\n  const exitTransform = toTransformProperty(exit)\n  const isCubicTransition = [initialTransform, exitTransform, enterTransform].some(\n    (t) => t !== \"none\",\n  )\n  const enterDuration =\n    enter?.duration ??\n    (isCubicTransition ? DEFAULT_ENTER_DURATION_MS_CUBIC : DEFAULT_ENTER_DURATION_MS_EASE)\n  const enterTimingFunction =\n    enter?.timingFunction ?? (isCubicTransition ? \"var(--cubic-enter)\" : \"ease\")\n  const exitDuration =\n    exit?.duration ??\n    (isCubicTransition ? DEFAULT_EXIT_DURATION_MS_CUBIC : DEFAULT_EXIT_DURATION_MS_EASE)\n  const exitTimingFunction =\n    exit?.timingFunction ?? (isCubicTransition ? \"var(--cubic-exit)\" : \"ease\")\n\n  // Generate variable overrides from props\n  const variables = toCssVariables({\n    \"tg-will-change\": forceCompositeLayer ? \"transform, opacity\" : \"auto\",\n    \"tg-enter-opacity\": toOpacityProperty(enter?.opacity ?? 1),\n    \"tg-enter-transform\": enterTransform,\n    \"tg-enter-filter\": toFilterProperty(enter),\n    \"tg-enter-duration\": toMsDurationProperty(enterDuration),\n    \"tg-enter-delay\": toMsDurationProperty(enter?.delay ?? 0),\n    \"tg-enter-timing-function\": enterTimingFunction,\n    \"tg-exit-opacity\": toOpacityProperty(exit?.opacity ?? 0),\n    \"tg-exit-transform\": exitTransform,\n    \"tg-exit-filter\": toFilterProperty(exit),\n    \"tg-exit-duration\": toMsDurationProperty(exitDuration),\n    \"tg-exit-delay\": toMsDurationProperty(exit?.delay ?? 0),\n    \"tg-exit-timing-function\": exitTimingFunction,\n    \"tg-initial-opacity\": toOpacityProperty(initial?.opacity ?? exit?.opacity ?? 0),\n    \"tg-initial-transform\": initialTransform === \"none\" ? exitTransform : initialTransform,\n    \"tg-initial-filter\": toFilterProperty(initial ?? exit ?? {}),\n  } satisfies Record<string, string>)\n\n  const enterTotalDuration = (enter?.delay ?? 0) + enterDuration\n  const exitTotalDuration = (exit?.delay ?? 0) + exitDuration\n\n  return { enterTotalDuration, exitTotalDuration, variables }\n}\n"]}