@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/tooltip/TooltipContent.astro

@@ -1,85 +1,85 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { cva } from "class-variance-authority";
-import type { HTMLAttributes } from "astro/types";
-
-type TooltipSide =
-  | "top"
-  | "bottom"
-  | "left"
-  | "right"
-  | "inline-start"
-  | "inline-end";
-
-interface Props extends HTMLAttributes<"div"> {
-  class?: string;
-  sideOffset?: number;
-  side?: TooltipSide;
-  align?: "start" | "center" | "end";
-  alignOffset?: number;
-  variant?: "default" | "outline";
-  size?: "default" | "lg";
-}
-
-const {
-  class: className = "",
-  sideOffset,
-  side = "top",
-  align = "center",
-  alignOffset,
-  variant = "default",
-  size = "default",
-  ...rest
-} = Astro.props as Props;
-
-const contentVariants = cva(
-  [
-    // visibility / animation
-    "relative pointer-events-none data-open:pointer-events-auto data-closed:pointer-events-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2",
-    // layout
-    "inline-flex items-center gap-1 has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm rounded-lg shadow-md z-50 w-fit max-w-xs origin-(--transform-origin)",
-  ],
-  {
-    variants: {
-      variant: {
-        default: "bg-foreground text-background",
-        outline: "bg-card text-foreground border border-border",
-      },
-      size: {
-        default: "px-2 py-1 text-xs",
-        lg: "px-3 py-2 text-sm",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
----
-
-<div data-slot="tooltip-portal">
-  <div data-slot="tooltip-positioner" class="isolate z-50">
-    <div
-      {...rest}
-      hidden
-      data-slot="tooltip-content"
-      data-side={side}
-      data-side-offset={sideOffset}
-      data-align={align}
-      data-align-offset={alignOffset}
-      class={cn(contentVariants({ variant, size }), className)}
-    >
-      <slot />
-      <div
-        data-slot="tooltip-arrow"
-        class={cn(
-          variant === "outline" ? "bg-card border border-border" : "bg-foreground fill-foreground",
-          "absolute size-2.5 rotate-45 rounded-[2px] data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] z-50",
-        )}
-      >
-      </div>
-    </div>
-  </div>
-</div>
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva } from "class-variance-authority";
+import type { HTMLAttributes } from "astro/types";
+
+type TooltipSide =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "inline-start"
+  | "inline-end";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+  sideOffset?: number;
+  side?: TooltipSide;
+  align?: "start" | "center" | "end";
+  alignOffset?: number;
+  variant?: "default" | "outline";
+  size?: "default" | "lg";
+}
+
+const {
+  class: className = "",
+  sideOffset,
+  side = "top",
+  align = "center",
+  alignOffset,
+  variant = "default",
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+
+const contentVariants = cva(
+  [
+    // visibility / animation
+    "relative pointer-events-none data-open:pointer-events-auto data-closed:pointer-events-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2",
+    // layout
+    "inline-flex items-center gap-1 has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm rounded-lg shadow-md z-50 w-fit max-w-xs origin-(--transform-origin)",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground text-background",
+        outline: "bg-card text-foreground border border-border",
+      },
+      size: {
+        default: "px-2 py-1 text-xs",
+        lg: "px-3 py-2 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+---
+
+<div data-slot="tooltip-portal">
+  <div data-slot="tooltip-positioner" class="isolate z-50">
+    <div
+      {...rest}
+      hidden
+      data-slot="tooltip-content"
+      data-side={side}
+      data-side-offset={sideOffset}
+      data-align={align}
+      data-align-offset={alignOffset}
+      class={cn(contentVariants({ variant, size }), className)}
+    >
+      <slot />
+      <div
+        data-slot="tooltip-arrow"
+        class={cn(
+          variant === "outline" ? "bg-card border border-border" : "bg-foreground fill-foreground",
+          "absolute size-2.5 rotate-45 rounded-[2px] data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] z-50",
+        )}
+      >
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/tooltip/TooltipTrigger.astro

@@ -1,34 +1,34 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"button"> {
-  class?: string;
-  /** Radix-like: render wrapper so the child can be the interactive element */
-  asChild?: boolean;
-}
-
-const {
-  class: className = "",
-  asChild = false,
-  type = "button",
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  asChild ? (
-    <div data-slot="tooltip-trigger" data-as-child class={cn("", className)}>
-      <slot />
-    </div>
-  ) : (
-    <button
-      {...rest}
-      type={type}
-      data-slot="tooltip-trigger"
-      class={cn("", className)}
-    >
-      <slot />
-    </button>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"button"> {
+  class?: string;
+  /** Radix-like: render wrapper so the child can be the interactive element */
+  asChild?: boolean;
+}
+
+const {
+  class: className = "",
+  asChild = false,
+  type = "button",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  asChild ? (
+    <div data-slot="tooltip-trigger" data-as-child class={cn("", className)}>
+      <slot />
+    </div>
+  ) : (
+    <button
+      {...rest}
+      type={type}
+      data-slot="tooltip-trigger"
+      class={cn("", className)}
+    >
+      <slot />
+    </button>
+  )
+}

package/src/components/tooltip/index.ts

@@ -1,3 +1,3 @@
-export { default as Tooltip } from "./Tooltip.astro";
-export { default as TooltipTrigger } from "./TooltipTrigger.astro";
-export { default as TooltipContent } from "./TooltipContent.astro";
+export { default as Tooltip } from "./Tooltip.astro";
+export { default as TooltipTrigger } from "./TooltipTrigger.astro";
+export { default as TooltipContent } from "./TooltipContent.astro";