@cl-light-ds/ui 0.1.0 → 0.2.0

package/src/components/tooltip/TooltipContent.astro

@@ -1,60 +1,85 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-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;
-}
-
-const {
-  class: className = "",
-  sideOffset,
-  side = "top",
-  align = "center",
-  alignOffset,
-  ...rest
-} = Astro.props as Props;
----
-
-<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(
-        "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1 px-2 py-1 text-xs 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 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-fit max-w-xs origin-(--transform-origin) bg-foreground text-background",
-        className,
-      )}
-    >
-      <slot />
-      <div
-        data-slot="tooltip-arrow"
-        class={cn(
-          "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 bg-foreground fill-foreground",
-          "data-[side=top]:-bottom-1",
-          "data-[side=bottom]:-top-1",
-          "data-[side=left]:-right-1",
-          "data-[side=right]:-left-1",
-        )}
-      >
-      </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/lib/toggle-shared.ts

@@ -1,13 +1,13 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 export const TOGGLE_VARIANTS = ["default", "outline"] as const;
-export const TOGGLE_SIZES = ["default", "sm", "lg"] as const;
+export const TOGGLE_SIZES = ["xs", "default", "sm", "lg"] as const;
 
 export type ToggleVariant = (typeof TOGGLE_VARIANTS)[number];
 export type ToggleSize = (typeof TOGGLE_SIZES)[number];
 
 export const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-background-hover focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-background-hover focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "hover:text-foreground aria-pressed:bg-background-hover focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-background-hover focus-visible:ring-[3px] disabled:pointer-events-none disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -15,6 +15,7 @@ export const toggleVariants = cva(
         outline: "border-input hover:bg-background-hover border bg-transparent shadow-xs",
       },
       size: {
+        xs: "h-7 min-w-7 px-1",
         default: "h-9 min-w-9 px-2",
         sm: "h-8 min-w-8 px-1.5",
         lg: "h-10 min-w-10 px-2.5",