@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-7ZJ32KRQ.js

@@ -0,0 +1,100 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var tooltipContentVariants = cva(
+  [
+    // Base positioning and z-index
+    "z-[var(--tooltip-content-z-index)] w-fit max-w-[var(--tooltip-content-max-width)]",
+    // Colors and background
+    "bg-[color:var(--tooltip-content-background)] text-[color:var(--tooltip-content-foreground)]",
+    // Typography
+    "text-[length:var(--tooltip-content-text-size)] text-balance",
+    // Spacing
+    "px-[var(--tooltip-content-padding-x)] py-[var(--tooltip-content-padding-y)]",
+    // Border radius
+    "rounded-[var(--tooltip-content-radius)]",
+    // Transform origin for animations
+    "origin-(--radix-tooltip-content-transform-origin)",
+    // Enter animations
+    "animate-in fade-in-0 zoom-in-95",
+    // Exit animations
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+    // Side-specific slide animations
+    "data-[side=top]:slide-in-from-bottom-2",
+    "data-[side=bottom]:slide-in-from-top-2",
+    "data-[side=left]:slide-in-from-right-2",
+    "data-[side=right]:slide-in-from-left-2"
+  ].join(" ")
+);
+var tooltipArrowVariants = cva(
+  [
+    // Colors
+    "bg-[color:var(--tooltip-content-background)] fill-[color:var(--tooltip-content-background)]",
+    // Z-index
+    "z-[var(--tooltip-content-z-index)]",
+    // Size
+    "size-[var(--tooltip-arrow-size)]",
+    // Transform to position arrow correctly
+    "translate-y-[calc(-50%_-_2px)] rotate-45",
+    // Border radius for rounded corners
+    "rounded-[var(--tooltip-arrow-radius)]"
+  ].join(" ")
+);
+function TooltipProvider({
+  delayDuration = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props,
+      children
+    }
+  );
+}
+function Tooltip({ children, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props, children }) });
+}
+function TooltipTrigger({ children, ...props }) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props, children });
+}
+function TooltipArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Arrow,
+    {
+      className: cn(tooltipArrowVariants(), className),
+      "data-slot": "tooltip-arrow",
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  showArrow = true,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      className: cn(tooltipContentVariants(), className),
+      "data-slot": "tooltip-content",
+      sideOffset,
+      ...props,
+      children: [
+        children,
+        showArrow && /* @__PURE__ */ jsx(TooltipArrow, {})
+      ]
+    }
+  ) });
+}
+
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, tooltipArrowVariants, tooltipContentVariants };
+//# sourceMappingURL=chunk-7ZJ32KRQ.js.map
+//# sourceMappingURL=chunk-7ZJ32KRQ.js.map

package/dist/chunk-7ZJ32KRQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Tooltip/Tooltip.variants.ts","../src/components/feedback/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;AAQO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA;AAAA,IAEE,mFAAA;AAAA;AAAA,IAEA,6FAAA;AAAA;AAAA,IAEA,6DAAA;AAAA;AAAA,IAEA,6EAAA;AAAA;AAAA,IAEA,yCAAA;AAAA;AAAA,IAEA,mDAAA;AAAA;AAAA,IAEA,iCAAA;AAAA;AAAA,IAEA,gGAAA;AAAA;AAAA,IAEA,wCAAA;AAAA,IACA,wCAAA;AAAA,IACA,wCAAA;AAAA,IACA;AAAA,GACF,CAAE,KAAK,GAAG;AACZ;AAQO,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC;AAAA;AAAA,IAEE,6FAAA;AAAA;AAAA,IAEA,oCAAA;AAAA;AAAA,IAEA,kCAAA;AAAA;AAAA,IAEA,0CAAA;AAAA;AAAA,IAEA;AAAA,GACF,CAAE,KAAK,GAAG;AACZ;AC/BA,SAAS,eAAA,CAAgB;AAAA,EACvB,aAAA,GAAgB,CAAA;AAAA,EAChB,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAkB,gBAAA,CAAA,QAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,aAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAMA,SAAS,OAAA,CAAQ,EAAE,QAAA,EAAU,GAAG,OAAM,EAAiB;AACrD,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAkB,gBAAA,CAAA,IAAA,EAAjB,EAAsB,aAAU,SAAA,EAAW,GAAG,KAAA,EAC5C,QAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAMA,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,GAAG,OAAM,EAAwB;AACnE,EAAA,2BACoB,gBAAA,CAAA,OAAA,EAAjB,EAAyB,aAAU,iBAAA,EAAmB,GAAG,OACvD,QAAA,EACH,CAAA;AAEJ;AAKA,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAsB;AAChE,EAAA,uBACE,GAAA;AAAA,IAAkB,gBAAA,CAAA,KAAA;AAAA,IAAjB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,oBAAA,EAAqB,EAAG,SAAS,CAAA;AAAA,MAC/C,WAAA,EAAU,eAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,SAAA,GAAY,IAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,uBACE,GAAA,CAAkB,yBAAjB,EACC,QAAA,kBAAA,IAAA;AAAA,IAAkB,gBAAA,CAAA,OAAA;AAAA,IAAjB;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,sBAAA,EAAuB,EAAG,SAAS,CAAA;AAAA,MACjD,WAAA,EAAU,iBAAA;AAAA,MACV,UAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,SAAA,wBAAc,YAAA,EAAA,EAAa;AAAA;AAAA;AAAA,GAC9B,EACF,CAAA;AAEJ","file":"chunk-7ZJ32KRQ.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Tooltip content variant styles using CVA\n *\n * Handles base styling and animations for the tooltip content.\n * Side-specific slide animations are handled via data-[side=*] attributes.\n */\nexport const tooltipContentVariants = cva(\n  [\n    // Base positioning and z-index\n    \"z-[var(--tooltip-content-z-index)] w-fit max-w-[var(--tooltip-content-max-width)]\",\n    // Colors and background\n    \"bg-[color:var(--tooltip-content-background)] text-[color:var(--tooltip-content-foreground)]\",\n    // Typography\n    \"text-[length:var(--tooltip-content-text-size)] text-balance\",\n    // Spacing\n    \"px-[var(--tooltip-content-padding-x)] py-[var(--tooltip-content-padding-y)]\",\n    // Border radius\n    \"rounded-[var(--tooltip-content-radius)]\",\n    // Transform origin for animations\n    \"origin-(--radix-tooltip-content-transform-origin)\",\n    // Enter animations\n    \"animate-in fade-in-0 zoom-in-95\",\n    // Exit animations\n    \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n    // Side-specific slide animations\n    \"data-[side=top]:slide-in-from-bottom-2\",\n    \"data-[side=bottom]:slide-in-from-top-2\",\n    \"data-[side=left]:slide-in-from-right-2\",\n    \"data-[side=right]:slide-in-from-left-2\",\n  ].join(\" \")\n)\n\n/**\n * Tooltip arrow styles\n *\n * Custom arrow styling with rotation and translation\n * to create a proper arrow appearance.\n */\nexport const tooltipArrowVariants = cva(\n  [\n    // Colors\n    \"bg-[color:var(--tooltip-content-background)] fill-[color:var(--tooltip-content-background)]\",\n    // Z-index\n    \"z-[var(--tooltip-content-z-index)]\",\n    // Size\n    \"size-[var(--tooltip-arrow-size)]\",\n    // Transform to position arrow correctly\n    \"translate-y-[calc(-50%_-_2px)] rotate-45\",\n    // Border radius for rounded corners\n    \"rounded-[var(--tooltip-arrow-radius)]\",\n  ].join(\" \")\n)\n","\"use client\"\n\nimport type {\n  TooltipArrowProps,\n  TooltipContentProps,\n  TooltipProps,\n  TooltipProviderProps,\n  TooltipTriggerProps,\n} from \"./Tooltip.types\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  tooltipArrowVariants,\n  tooltipContentVariants,\n} from \"./Tooltip.variants\"\n\n/**\n * TooltipProvider wraps your app to enable tooltips.\n * Provides shared configuration for delay and behavior.\n */\nfunction TooltipProvider({\n  delayDuration = 0,\n  children,\n  ...props\n}: TooltipProviderProps) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    >\n      {children}\n    </TooltipPrimitive.Provider>\n  )\n}\n\n/**\n * Tooltip displays contextual information on hover or focus.\n * Wraps content in its own TooltipProvider for convenience.\n */\nfunction Tooltip({ children, ...props }: TooltipProps) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props}>\n        {children}\n      </TooltipPrimitive.Root>\n    </TooltipProvider>\n  )\n}\n\n/**\n * TooltipTrigger is the element that triggers the tooltip.\n * Use asChild to wrap your own element instead of adding a wrapper.\n */\nfunction TooltipTrigger({ children, ...props }: TooltipTriggerProps) {\n  return (\n    <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props}>\n      {children}\n    </TooltipPrimitive.Trigger>\n  )\n}\n\n/**\n * TooltipArrow renders the arrow pointing to the trigger.\n */\nfunction TooltipArrow({ className, ...props }: TooltipArrowProps) {\n  return (\n    <TooltipPrimitive.Arrow\n      className={cn(tooltipArrowVariants(), className)}\n      data-slot=\"tooltip-arrow\"\n      {...props}\n    />\n  )\n}\n\n/**\n * TooltipContent contains the tooltip message.\n * Automatically positioned and animated based on available space.\n */\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  showArrow = true,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        className={cn(tooltipContentVariants(), className)}\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        {...props}\n      >\n        {children}\n        {showArrow && <TooltipArrow />}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipArrow,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n}\n"]}