@meith/ui 0.31.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "Meith's shared UI primitives: buttons, menus and the class utilities themes build with.",
   "license": "MIT",
   "repository": {
@@ -14,10 +14,13 @@
   "exports": {
     ".": "./src/index.ts",
     "./button": "./src/button.tsx",
+    "./dialog": "./src/dialog.tsx",
     "./input-otp": "./src/input-otp.tsx",
     "./menu": "./src/menu.tsx",
     "./popover": "./src/popover.tsx",
     "./tabs": "./src/tabs.tsx",
+    "./toast": "./src/toast.tsx",
+    "./tooltip": "./src/tooltip.tsx",
     "./utils": "./src/utils.ts",
     "./variants": "./src/variants.ts"
   },

package/src/avatar.tsx

@@ -14,17 +14,14 @@ function Avatar({ className, src = null, name, size = 40, ...props }: AvatarProp
       data-slot="avatar"
       aria-hidden="true"
       className={cn(
-        'inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-md border border-border bg-muted',
+        'inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-md border border-primary/15 bg-primary/10',
         className,
       )}
       style={{ width: size, height: size }}
       {...props}
     >
       {src === null ? (
-        <span
-          className="font-medium text-muted-foreground"
-          style={{ fontSize: Math.round(size * 0.42) }}
-        >
+        <span className="font-semibold text-primary" style={{ fontSize: Math.round(size * 0.42) }}>
           {initial}
         </span>
       ) : (

package/src/dialog.tsx

@@ -0,0 +1,2 @@
+export { AlertDialog } from '@base-ui/react/alert-dialog'
+export { Dialog } from '@base-ui/react/dialog'

package/src/index.ts

@@ -21,6 +21,8 @@ export type { FieldProps } from './field'
 export { Field, Input, Label, NativeSelect, Textarea } from './field'
 export type { SeparatorProps } from './separator'
 export { Separator } from './separator'
+export type { TextLinkProps } from './text-link'
+export { TextLink } from './text-link'
 export { cn } from './utils'
-export type { BadgeVariants, ButtonVariants } from './variants'
-export { badgeVariants, buttonVariants } from './variants'
+export type { BadgeVariants, ButtonVariants, TextLinkVariants } from './variants'
+export { badgeVariants, buttonVariants, textLinkVariants } from './variants'

package/src/text-link.tsx

@@ -0,0 +1,12 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from './utils'
+import { textLinkVariants } from './variants'
+
+export interface TextLinkProps
+  extends React.ComponentProps<'a'>,
+    VariantProps<typeof textLinkVariants> {}
+
+export function TextLink({ className, tone, weight, size, ...props }: TextLinkProps) {
+  return <a {...props} className={cn(textLinkVariants({ tone, weight, size }), className)} />
+}

package/src/toast.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import { useCallback, useEffect, useState } from 'react'
+
+import { cn } from './utils'
+
+export const toastVariants = cva(
+  'pointer-events-auto flex w-[min(24rem,calc(100vw-2rem))] items-start justify-between gap-3 rounded-md border border-l-4 px-4 py-3 text-sm shadow-lg',
+  {
+    variants: {
+      tone: {
+        info: 'border-border border-l-muted-foreground bg-card text-card-foreground',
+        success:
+          'border-moderation-approved/30 border-l-moderation-approved bg-card text-card-foreground',
+        warning: 'border-border border-l-moderation-pending bg-card text-card-foreground',
+        error: 'border-destructive/30 border-l-destructive bg-card text-card-foreground',
+      },
+    },
+    defaultVariants: { tone: 'info' },
+  },
+)
+
+export type ToastTone = NonNullable<VariantProps<typeof toastVariants>['tone']>
+
+export interface ToastProps {
+  readonly children: React.ReactNode
+  readonly tone?: ToastTone
+  readonly dismissLabel: string
+  readonly duration?: number
+  readonly className?: string
+  readonly onDismiss?: () => void
+}
+
+export function Toast({
+  children,
+  tone = 'info',
+  dismissLabel,
+  duration = 6000,
+  className,
+  onDismiss,
+}: ToastProps) {
+  const [open, setOpen] = useState(true)
+
+  const dismiss = useCallback(() => {
+    setOpen(false)
+    onDismiss?.()
+  }, [onDismiss])
+
+  useEffect(() => {
+    if (duration <= 0) return
+    const timer = setTimeout(dismiss, duration)
+    return () => clearTimeout(timer)
+  }, [duration, dismiss])
+
+  if (!open) return null
+
+  const assertive = tone === 'error'
+
+  return (
+    <div
+      role={assertive ? 'alert' : 'status'}
+      aria-live={assertive ? 'assertive' : 'polite'}
+      className={cn(toastVariants({ tone }), className)}
+    >
+      <div className="min-w-0 flex-1">{children}</div>
+      <button
+        type="button"
+        onClick={dismiss}
+        aria-label={dismissLabel}
+        className="-mr-1 -mt-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        <span aria-hidden="true">✕</span>
+      </button>
+    </div>
+  )
+}

package/src/tooltip.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+
+import { cn } from './utils'
+
+export interface TooltipProps {
+  readonly label: React.ReactNode
+  readonly children: React.ReactElement
+  readonly side?: 'top' | 'bottom' | 'left' | 'right'
+  readonly align?: 'start' | 'center' | 'end'
+  readonly delay?: number
+  readonly className?: string
+}
+
+export function Tooltip({
+  label,
+  children,
+  side = 'top',
+  align = 'center',
+  delay = 300,
+  className,
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger delay={delay} render={children} />
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Positioner
+          side={side}
+          align={align}
+          sideOffset={6}
+          collisionPadding={8}
+          className="z-50"
+        >
+          <TooltipPrimitive.Popup
+            className={cn(
+              'max-w-64 origin-[var(--transform-origin)] rounded-md border border-border bg-card px-2 py-1 text-xs text-card-foreground shadow-md',
+              'duration-100 ease-out transition-[opacity,transform]',
+              'data-[starting-style]:scale-95 data-[starting-style]:opacity-0',
+              'data-[ending-style]:scale-95 data-[ending-style]:opacity-0',
+              className,
+            )}
+          >
+            {label}
+          </TooltipPrimitive.Popup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+  )
+}

package/src/variants.ts

@@ -68,3 +68,28 @@ export const badgeVariants = cva(
 )
 
 export type BadgeVariants = VariantProps<typeof badgeVariants>
+
+export const textLinkVariants = cva(
+  'underline decoration-border underline-offset-2 hover:decoration-foreground',
+  {
+    variants: {
+      tone: {
+        default: 'text-foreground',
+        muted: 'text-muted-foreground hover:text-foreground',
+        inherit: '',
+      },
+      weight: {
+        medium: 'font-medium',
+        normal: '',
+      },
+      size: {
+        default: '',
+        sm: 'text-sm',
+        xs: 'text-xs',
+      },
+    },
+    defaultVariants: { tone: 'default', weight: 'medium', size: 'default' },
+  },
+)
+
+export type TextLinkVariants = VariantProps<typeof textLinkVariants>