@dalexto/lexsys-registry 0.0.2

package/templates/primitives/Toast/Toast.types.ts

@@ -0,0 +1,52 @@
+import type { Ref } from "react"
+/**
+ * Toast.types.ts
+ *
+ * Public and internal types for Toast component.
+ */
+
+import type { Toast as BaseToast } from "@base-ui/react/toast"
+
+export type ToastPlacement =
+  | "top-right"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-left"
+
+export type ToastProviderProps = BaseToast.Provider.Props
+export type ToastPortalProps = BaseToast.Portal.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+export type ToastObject<Data extends object = object> =
+  BaseToast.Root.ToastObject<Data>
+
+export interface ToastProps extends Omit<BaseToast.Root.Props, "className"> {
+  className?: BaseToast.Root.Props["className"]
+}
+
+export interface ToastViewportProps extends Omit<
+  BaseToast.Viewport.Props,
+  "className"
+> {
+  placement?: ToastPlacement
+  className?: BaseToast.Viewport.Props["className"]
+}
+
+export interface ToastPositionerProps extends Omit<
+  BaseToast.Positioner.Props,
+  "className"
+> {
+  className?: BaseToast.Positioner.Props["className"]
+}
+
+export type ToastContentProps = BaseToast.Content.Props
+
+export type ToastArrowProps = BaseToast.Arrow.Props
+
+export type ToastTitleProps = BaseToast.Title.Props
+
+export type ToastDescriptionProps = BaseToast.Description.Props
+
+export type ToastActionProps = BaseToast.Action.Props
+
+export type ToastCloseProps = BaseToast.Close.Props

package/templates/primitives/Toast/Toast.variants.ts

@@ -0,0 +1,88 @@
+/**
+ * Toast.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const toastViewportVariants = cva(
+  [
+    "fixed z-(--lsys-toast-viewport-z-index) flex max-h-(--lsys-toast-viewport-max-height) w-[min(calc(100vw-(var(--lsys-toast-viewport-inset)*2)),var(--lsys-toast-viewport-width))] flex-col gap-(--lsys-toast-viewport-gap) p-(--lsys-toast-viewport-padding)",
+    "data-[expanded]:gap-(--lsys-toast-viewport-gap-expanded)",
+  ].join(" "),
+  {
+    variants: {
+      placement: {
+        "top-right": "right-0 top-0",
+        "top-left": "left-0 top-0",
+        "bottom-right": "bottom-0 right-0",
+        "bottom-left": "bottom-0 left-0",
+      },
+    },
+    defaultVariants: {
+      placement: "bottom-right",
+    },
+  },
+)
+
+const toastTypeSurfaceClasses = [
+  "border-(--lsys-toast-border-color) bg-(--lsys-toast-background) text-(--lsys-toast-foreground)",
+  "data-[type=success]:border-(--lsys-toast-success-border-color) data-[type=success]:bg-(--lsys-toast-success-background) data-[type=success]:text-(--lsys-toast-success-foreground)",
+  "data-[type=info]:border-(--lsys-toast-info-border-color) data-[type=info]:bg-(--lsys-toast-info-background) data-[type=info]:text-(--lsys-toast-info-foreground)",
+  "data-[type=destructive]:border-(--lsys-toast-danger-border-color) data-[type=destructive]:bg-(--lsys-toast-danger-background) data-[type=destructive]:text-(--lsys-toast-danger-foreground)",
+].join(" ")
+
+export const toastVariants = cva(
+  [
+    "relative grid gap-(--lsys-toast-gap) rounded-(--lsys-toast-radius) border p-(--lsys-toast-padding) pr-(--lsys-toast-padding-end) shadow-(--lsys-toast-shadow) outline-none",
+    toastTypeSurfaceClasses,
+    "transition-[opacity,transform] duration-(--lsys-toast-transition-duration) ease-(--lsys-toast-transition-easing)",
+    "data-[starting-style]:translate-y-(--lsys-toast-motion-offset-y) data-[starting-style]:opacity-0 data-[ending-style]:translate-y-(--lsys-toast-motion-offset-y) data-[ending-style]:opacity-0 data-[swiping]:transition-none",
+    "translate-x-[var(--toast-swipe-movement-x,0px)] translate-y-[var(--toast-swipe-movement-y,0px)]",
+  ].join(" "),
+)
+
+export const toastContentVariants = cva(
+  "grid gap-(--lsys-toast-content-gap) data-[behind]:opacity-(--lsys-toast-content-behind-opacity)",
+)
+
+export const toastPositionerVariants = cva(
+  "z-(--lsys-toast-viewport-z-index) max-w-[min(var(--available-width,calc(100vw-(var(--lsys-toast-viewport-inset)*2))),var(--lsys-toast-viewport-width))]",
+)
+
+export const toastArrowVariants = cva(
+  [
+    "size-(--lsys-toast-arrow-size) rotate-45 border",
+    toastTypeSurfaceClasses,
+  ].join(" "),
+)
+
+export const toastTitleVariants = cva(
+  "text-(length:--lsys-toast-title-font-size) font-(--lsys-toast-title-font-weight) leading-(--lsys-toast-title-font-line-height)",
+)
+
+export const toastDescriptionVariants = cva(
+  [
+    "text-(length:--lsys-toast-description-font-size) font-(--lsys-toast-description-font-weight) leading-(--lsys-toast-description-font-line-height)",
+    "text-(--lsys-toast-description-foreground) data-[type=success]:text-(--lsys-toast-success-foreground) data-[type=info]:text-(--lsys-toast-info-foreground) data-[type=destructive]:text-(--lsys-toast-danger-foreground)",
+  ].join(" "),
+)
+
+export const toastActionVariants = cva(
+  [
+    "inline-flex h-(--lsys-toast-action-height) items-center justify-center rounded-(--lsys-toast-action-radius) border border-(--lsys-toast-action-border-color) px-(--lsys-toast-action-padding-x)",
+    "text-(length:--lsys-toast-action-font-size) font-(--lsys-toast-action-font-weight) leading-(--lsys-toast-action-font-line-height) text-(--lsys-toast-action-foreground)",
+    "outline-none transition-colors duration-(--lsys-toast-transition-duration) ease-(--lsys-toast-transition-easing) hover:bg-(--lsys-toast-action-hover-background) focus-visible:ring-(length:--lsys-toast-focus-ring-width) focus-visible:ring-(--lsys-toast-focus-ring-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const toastCloseVariants = cva(
+  [
+    "absolute right-(--lsys-toast-close-inset) top-(--lsys-toast-close-inset) inline-flex size-(--lsys-toast-close-size) items-center justify-center rounded-(--lsys-toast-close-radius)",
+    "text-(--lsys-toast-close-foreground) outline-none transition-colors duration-(--lsys-toast-transition-duration) ease-(--lsys-toast-transition-easing) hover:bg-(--lsys-toast-close-hover-background) focus-visible:ring-(length:--lsys-toast-focus-ring-width) focus-visible:ring-(--lsys-toast-focus-ring-color)",
+    disabledStateClasses,
+  ].join(" "),
+)

package/templates/primitives/Toggle/Toggle.tsx

@@ -0,0 +1,24 @@
+/**
+ * Toggle.tsx
+ *
+ * Reference Toggle component implementation.
+ */
+
+import { Toggle as BaseToggle } from "@base-ui/react/toggle"
+import type { ToggleProps } from "./Toggle.types"
+import { toggleVariants } from "./Toggle.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Toggle = ({ ref, size, className, ...props }: ToggleProps) => {
+  return (
+    <BaseToggle
+      ref={ref}
+      className={mergeClassName(toggleVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+Toggle.displayName = "Toggle"
+
+export { Toggle }

package/templates/primitives/Toggle/Toggle.types.ts

@@ -0,0 +1,19 @@
+import type { Ref } from "react"
+/**
+ * Toggle.types.ts
+ *
+ * Public and internal types for Toggle component.
+ */
+
+import type { Toggle as BaseToggle } from "@base-ui/react/toggle"
+
+export type ToggleSize = "sm" | "md" | "lg"
+
+export interface ToggleProps extends Omit<
+  BaseToggle.Props,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLButtonElement>
+  size?: ToggleSize
+  className?: BaseToggle.Props["className"]
+}

package/templates/primitives/Toggle/Toggle.variants.ts

@@ -0,0 +1,32 @@
+/**
+ * Toggle.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const toggleVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-(--lsys-toggle-radius) border",
+    "border-(--lsys-toggle-border-color) bg-(--lsys-toggle-background) text-(--lsys-toggle-foreground)",
+    "font-(family-name:--lsys-toggle-font-family) font-(--lsys-toggle-font-weight) leading-(--lsys-toggle-font-line-height) tracking-(--lsys-toggle-font-letter-spacing)",
+    "transition-colors duration-(--lsys-toggle-transition-duration) ease-(--lsys-toggle-transition-easing)",
+    "outline-none hover:bg-(--lsys-toggle-hover-background) data-[pressed]:border-(--lsys-toggle-pressed-border-color) data-[pressed]:bg-(--lsys-toggle-pressed-background) data-[pressed]:text-(--lsys-toggle-pressed-foreground)",
+    "focus-visible:ring-(length:--lsys-toggle-focus-ring-width) focus-visible:ring-(--lsys-toggle-focus-ring-color) focus-visible:ring-offset-(length:--lsys-toggle-focus-ring-offset) focus-visible:ring-offset-(--lsys-toggle-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "h-(--lsys-toggle-height-sm) px-(--lsys-toggle-padding-x-sm) text-(length:--lsys-toggle-font-size-sm)",
+        md: "h-(--lsys-toggle-height-md) px-(--lsys-toggle-padding-x-md) text-(length:--lsys-toggle-font-size-md)",
+        lg: "h-(--lsys-toggle-height-lg) px-(--lsys-toggle-padding-x-lg) text-(length:--lsys-toggle-font-size-lg)",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)

package/templates/primitives/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,34 @@
+/**
+ * ToggleGroup.tsx
+ *
+ * Reference ToggleGroup component implementation.
+ */
+
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
+import type { ToggleGroupProps } from "./ToggleGroup.types"
+import { toggleGroupVariants } from "./ToggleGroup.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const ToggleGroup = ({
+  ref,
+  size,
+  orientation = "horizontal",
+  className,
+  ...props
+}: ToggleGroupProps) => {
+  return (
+    <BaseToggleGroup
+      ref={ref}
+      orientation={orientation}
+      className={mergeClassName(
+        toggleGroupVariants({ size, orientation }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+ToggleGroup.displayName = "ToggleGroup"
+
+export { ToggleGroup }

package/templates/primitives/ToggleGroup/ToggleGroup.types.ts

@@ -0,0 +1,19 @@
+import type { Ref } from "react"
+/**
+ * ToggleGroup.types.ts
+ *
+ * Public and internal types for ToggleGroup component.
+ */
+
+import type { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
+
+export type ToggleGroupSize = "sm" | "md" | "lg"
+
+export interface ToggleGroupProps<Value extends string = string> extends Omit<
+  BaseToggleGroup.Props<Value>,
+  "className" | "size"
+> {
+  ref?: Ref<HTMLDivElement>
+  size?: ToggleGroupSize
+  className?: BaseToggleGroup.Props<Value>["className"]
+}

package/templates/primitives/ToggleGroup/ToggleGroup.variants.ts

@@ -0,0 +1,32 @@
+/**
+ * ToggleGroup.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const toggleGroupVariants = cva(
+  [
+    "inline-flex rounded-(--lsys-toggle-group-radius) border border-(--lsys-toggle-group-border-color)",
+    "bg-(--lsys-toggle-group-background) p-(--lsys-toggle-group-padding)",
+    "[&_[data-toggle]]:border-0 [&_[data-toggle]]:shadow-none",
+  ].join(" "),
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+      },
+      size: {
+        sm: "gap-(--lsys-toggle-group-gap-sm)",
+        md: "gap-(--lsys-toggle-group-gap-md)",
+        lg: "gap-(--lsys-toggle-group-gap-lg)",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      size: "md",
+    },
+  },
+)

package/templates/primitives/Toolbar/Toolbar.tsx

@@ -0,0 +1,118 @@
+/**
+ * Toolbar.tsx
+ *
+ * Reference Toolbar component implementation.
+ */
+
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar"
+import type {
+  ToolbarButtonProps,
+  ToolbarGroupProps,
+  ToolbarInputProps,
+  ToolbarLinkProps,
+  ToolbarProps,
+  ToolbarSeparatorProps,
+} from "./Toolbar.types"
+import {
+  toolbarButtonVariants,
+  toolbarGroupVariants,
+  toolbarInputVariants,
+  toolbarLinkVariants,
+  toolbarRootVariants,
+  toolbarSeparatorVariants,
+} from "./Toolbar.variants"
+import { mergeClassName } from "@/lib/utils"
+
+const Toolbar = ({ ref, className, orientation, ...props }: ToolbarProps) => {
+  return (
+    <BaseToolbar.Root
+      ref={ref}
+      orientation={orientation}
+      className={mergeClassName(
+        toolbarRootVariants({ orientation }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+Toolbar.displayName = "Toolbar"
+
+const ToolbarGroup = ({ ref, className, ...props }: ToolbarGroupProps) => {
+  return (
+    <BaseToolbar.Group
+      ref={ref}
+      className={mergeClassName(toolbarGroupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToolbarGroup.displayName = "ToolbarGroup"
+
+const ToolbarButton = ({ ref, className, ...props }: ToolbarButtonProps) => {
+  return (
+    <BaseToolbar.Button
+      ref={ref}
+      className={mergeClassName(toolbarButtonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToolbarButton.displayName = "ToolbarButton"
+
+const ToolbarLink = ({ ref, className, ...props }: ToolbarLinkProps) => {
+  return (
+    <BaseToolbar.Link
+      ref={ref}
+      className={mergeClassName(toolbarLinkVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToolbarLink.displayName = "ToolbarLink"
+
+const ToolbarInput = ({ ref, className, ...props }: ToolbarInputProps) => {
+  return (
+    <BaseToolbar.Input
+      ref={ref}
+      className={mergeClassName(toolbarInputVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+ToolbarInput.displayName = "ToolbarInput"
+
+const ToolbarSeparator = ({
+  ref,
+  className,
+  orientation = "vertical",
+  ...props
+}: ToolbarSeparatorProps) => {
+  return (
+    <BaseToolbar.Separator
+      ref={ref}
+      orientation={orientation}
+      className={mergeClassName(
+        toolbarSeparatorVariants({ orientation }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+ToolbarSeparator.displayName = "ToolbarSeparator"
+
+export {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarButton,
+  ToolbarLink,
+  ToolbarInput,
+  ToolbarSeparator,
+}

package/templates/primitives/Toolbar/Toolbar.types.ts

@@ -0,0 +1,32 @@
+import type { Ref } from "react"
+/**
+ * Toolbar.types.ts
+ *
+ * Public and internal types for Toolbar component.
+ */
+
+import type { Toolbar as BaseToolbar } from "@base-ui/react/toolbar"
+
+export type ToolbarProps = BaseToolbar.Root.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ToolbarGroupProps = BaseToolbar.Group.Props & {
+  ref?: Ref<HTMLDivElement>
+}
+
+export type ToolbarButtonProps = BaseToolbar.Button.Props & {
+  ref?: Ref<HTMLButtonElement>
+}
+
+export type ToolbarLinkProps = BaseToolbar.Link.Props & {
+  ref?: Ref<HTMLAnchorElement>
+}
+
+export type ToolbarInputProps = BaseToolbar.Input.Props & {
+  ref?: Ref<HTMLInputElement>
+}
+
+export type ToolbarSeparatorProps = BaseToolbar.Separator.Props & {
+  ref?: Ref<HTMLDivElement>
+}

package/templates/primitives/Toolbar/Toolbar.variants.ts

@@ -0,0 +1,84 @@
+/**
+ * Toolbar.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+import { disabledStateClasses } from "@/lib/utils"
+
+export const toolbarRootVariants = cva(
+  "flex items-center gap-(--lsys-button-padding-x-sm) rounded-(--lsys-button-radius) border border-(--lsys-button-secondary-border-color) bg-(--lsys-button-secondary-background) p-(--lsys-button-padding-x-sm)",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+)
+
+export const toolbarGroupVariants = cva(
+  "flex items-center gap-(--lsys-space-1)",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+)
+
+export const toolbarButtonVariants = cva(
+  [
+    "inline-flex h-(--lsys-button-height-sm) items-center justify-center rounded-(--lsys-button-radius) border border-transparent px-(--lsys-button-padding-x-sm)",
+    "text-(length:--lsys-button-font-size-sm) font-(--lsys-button-font-weight) leading-(--lsys-button-font-line-height) text-(--lsys-button-secondary-foreground)",
+    "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
+    "outline-none hover:bg-(--lsys-button-secondary-hover-background) focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const toolbarLinkVariants = cva(
+  [
+    "inline-flex h-(--lsys-button-height-sm) items-center justify-center rounded-(--lsys-button-radius) px-(--lsys-button-padding-x-sm)",
+    "text-(length:--lsys-button-font-size-sm) font-(--lsys-button-font-weight) leading-(--lsys-button-font-line-height) text-(--lsys-button-secondary-foreground)",
+    "transition-colors duration-(--lsys-button-transition-duration) ease-(--lsys-button-transition-easing)",
+    "outline-none hover:bg-(--lsys-button-secondary-hover-background) focus-visible:ring-(length:--lsys-button-focus-ring-width) focus-visible:ring-(--lsys-button-focus-ring-color) focus-visible:ring-offset-(length:--lsys-button-focus-ring-offset) focus-visible:ring-offset-(--lsys-button-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const toolbarInputVariants = cva(
+  [
+    "h-(--lsys-input-height-sm) min-w-0 rounded-(--lsys-input-radius) border border-(--lsys-input-border-color) bg-(--lsys-input-background) px-(--lsys-input-padding-x-sm)",
+    "text-(length:--lsys-input-font-size-sm) font-(family-name:--lsys-input-font-family) font-(--lsys-input-font-weight) leading-(--lsys-input-font-line-height) text-(--lsys-input-foreground)",
+    "placeholder:text-(--lsys-input-placeholder-color)",
+    "transition-colors duration-(--lsys-input-transition-duration) ease-(--lsys-input-transition-easing)",
+    "outline-none focus-visible:border-(--lsys-input-focus-border-color) focus-visible:ring-(length:--lsys-input-focus-ring-width) focus-visible:ring-(--lsys-input-focus-ring-color) focus-visible:ring-offset-(length:--lsys-input-focus-ring-offset) focus-visible:ring-offset-(--lsys-input-focus-ring-offset-color)",
+    disabledStateClasses,
+  ].join(" "),
+)
+
+export const toolbarSeparatorVariants = cva(
+  "shrink-0 bg-(--lsys-separator-color)",
+  {
+    variants: {
+      orientation: {
+        horizontal: "mx-(--lsys-space-1) h-(--lsys-separator-thickness) w-full",
+        vertical: "my-(--lsys-space-1) h-full w-(--lsys-separator-thickness)",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)

package/templates/primitives/Tooltip/Tooltip.tsx

@@ -0,0 +1,98 @@
+/**
+ * Tooltip.tsx
+ *
+ * Reference Tooltip component implementation.
+ */
+
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
+import type {
+  TooltipArrowProps,
+  TooltipPopupProps,
+  TooltipPositionerProps,
+  TooltipPortalProps,
+  TooltipProps,
+  TooltipTriggerProps,
+} from "./Tooltip.types"
+import {
+  tooltipArrowVariants,
+  tooltipPopupVariants,
+  tooltipPositionerVariants,
+  tooltipTriggerVariants,
+} from "./Tooltip.variants"
+import { mergeClassName } from "@/lib/utils"
+import { overlayPositionerSideOffset } from "@/lib/utils"
+
+const Tooltip = (props: TooltipProps) => {
+  return <BaseTooltip.Root {...props} />
+}
+
+Tooltip.displayName = "Tooltip"
+
+const TooltipTrigger = ({ ref, className, ...props }: TooltipTriggerProps) => {
+  return (
+    <BaseTooltip.Trigger
+      ref={ref}
+      className={mergeClassName(tooltipTriggerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TooltipTrigger.displayName = "TooltipTrigger"
+
+const TooltipPortal = (props: TooltipPortalProps) => {
+  return <BaseTooltip.Portal {...props} />
+}
+
+TooltipPortal.displayName = "TooltipPortal"
+
+const TooltipPositioner = ({
+  ref,
+  className,
+  sideOffset = overlayPositionerSideOffset,
+  ...props
+}: TooltipPositionerProps) => {
+  return (
+    <BaseTooltip.Positioner
+      ref={ref}
+      sideOffset={sideOffset}
+      className={mergeClassName(tooltipPositionerVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TooltipPositioner.displayName = "TooltipPositioner"
+
+const TooltipPopup = ({ ref, className, ...props }: TooltipPopupProps) => {
+  return (
+    <BaseTooltip.Popup
+      ref={ref}
+      className={mergeClassName(tooltipPopupVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TooltipPopup.displayName = "TooltipPopup"
+
+const TooltipArrow = ({ ref, className, ...props }: TooltipArrowProps) => {
+  return (
+    <BaseTooltip.Arrow
+      ref={ref}
+      className={mergeClassName(tooltipArrowVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+TooltipArrow.displayName = "TooltipArrow"
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipPopup,
+  TooltipArrow,
+}

package/templates/primitives/Tooltip/Tooltip.types.ts

@@ -0,0 +1,22 @@
+import type { Ref } from "react"
+/**
+ * Tooltip.types.ts
+ *
+ * Public and internal types for Tooltip component.
+ */
+
+import type { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
+
+export type TooltipProps = BaseTooltip.Root.Props
+
+export type TooltipTriggerProps = BaseTooltip.Trigger.Props & {
+  ref?: Ref<HTMLButtonElement>
+}
+
+export type TooltipPortalProps = BaseTooltip.Portal.Props
+
+export type TooltipPositionerProps = BaseTooltip.Positioner.Props
+
+export type TooltipPopupProps = BaseTooltip.Popup.Props
+
+export type TooltipArrowProps = BaseTooltip.Arrow.Props

package/templates/primitives/Tooltip/Tooltip.variants.ts

@@ -0,0 +1,24 @@
+/**
+ * Tooltip.variants.ts
+ *
+ * Defines visual variants using class composition.
+ */
+
+import { cva } from "class-variance-authority"
+
+export const tooltipTriggerVariants = cva("inline-flex")
+
+export const tooltipPositionerVariants = cva(
+  "z-(--lsys-tooltip-positioner-z-index)",
+)
+
+export const tooltipPopupVariants = cva(
+  [
+    "rounded-(--lsys-tooltip-radius) border border-(--lsys-tooltip-border-color) bg-(--lsys-tooltip-background) px-(--lsys-tooltip-padding-x) py-(--lsys-tooltip-padding-y) text-(--lsys-tooltip-foreground) shadow-(--lsys-tooltip-shadow)",
+    "text-(length:--lsys-tooltip-font-size) font-(--lsys-tooltip-font-weight) leading-(--lsys-tooltip-font-line-height)",
+    "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+    "transition-opacity duration-(--lsys-tooltip-transition-duration) ease-(--lsys-tooltip-transition-easing)",
+  ].join(" "),
+)
+
+export const tooltipArrowVariants = cva("fill-(--lsys-tooltip-background)")