@rdna/radiants 0.1.1 → 0.1.3

package/components/core/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,273 @@
+'use client';
+
+import React, { useState, useCallback } from 'react';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { createCompoundContext } from '../../shared/createCompoundContext';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface AlertDialogState {
+  open: boolean;
+}
+
+interface AlertDialogActions {
+  setOpen: (open: boolean, eventDetails?: unknown) => void;
+  close: () => void;
+}
+
+interface AlertDialogContextValue {
+  state: AlertDialogState;
+  actions: AlertDialogActions;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const {
+  Context: AlertDialogContext,
+} = createCompoundContext<AlertDialogContextValue>('AlertDialog', {
+  errorMessage: 'AlertDialog components must be used within AlertDialog.Provider',
+});
+
+// ============================================================================
+// Provider — wraps Base UI AlertDialog.Root with controlled state
+// ============================================================================
+
+interface ProviderProps {
+  state: AlertDialogState;
+  actions: AlertDialogActions;
+  children: React.ReactNode;
+  onOpenChangeComplete?: (open: boolean) => void;
+  actionsRef?: React.RefObject<{ close: () => void; unmount: () => void } | null>;
+}
+
+function Provider({ state, actions, children, onOpenChangeComplete, actionsRef }: ProviderProps): React.ReactNode {
+  return (
+    <AlertDialogContext value={{ state, actions }}>
+      <BaseAlertDialog.Root
+        data-rdna="alertdialog"
+        open={state.open}
+        onOpenChange={(open, eventDetails) => actions.setOpen(open, eventDetails)}
+        onOpenChangeComplete={onOpenChangeComplete}
+        actionsRef={actionsRef}
+      >
+        {children}
+      </BaseAlertDialog.Root>
+    </AlertDialogContext>
+  );
+}
+
+// ============================================================================
+// Trigger
+// ============================================================================
+
+interface TriggerProps {
+  children: React.ReactElement;
+  asChild?: boolean;
+}
+
+function Trigger({ children, asChild = false }: TriggerProps): React.ReactNode {
+  if (asChild) {
+    return (
+      <BaseAlertDialog.Trigger
+        className="cursor-pointer focus-visible:outline-none"
+        render={children}
+      />
+    );
+  }
+
+  return (
+    <BaseAlertDialog.Trigger
+      className="cursor-pointer focus-visible:outline-none"
+    >
+      {children}
+    </BaseAlertDialog.Trigger>
+  );
+}
+
+// ============================================================================
+// Content — AlertDialog blocks interaction, no escape-to-close by default
+// ============================================================================
+
+interface ContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Content({ className = '', children }: ContentProps): React.ReactNode {
+  return (
+    <BaseAlertDialog.Portal>
+      <BaseAlertDialog.Backdrop
+        className="fixed inset-0 z-50 bg-hover transition-opacity duration-150 ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
+      />
+      <BaseAlertDialog.Popup
+        className="group fixed inset-0 z-50 flex items-center justify-center"
+      >
+        <div
+          className={`
+            relative z-10
+            w-full max-w-[32rem] mx-4
+            pixel-shadow-floating
+            transition-[opacity,transform,filter] duration-150 ease-out
+            group-data-[starting-style]:opacity-0 group-data-[starting-style]:scale-95
+            group-data-[ending-style]:opacity-0 group-data-[ending-style]:-translate-y-2 group-data-[ending-style]:blur-sm
+          `.trim()}
+        >
+          <div className={`pixel-rounded-sm bg-page ${className}`.trim()}>
+            {children}
+          </div>
+        </div>
+      </BaseAlertDialog.Popup>
+    </BaseAlertDialog.Portal>
+  );
+}
+
+// ============================================================================
+// Header, Title, Description
+// ============================================================================
+
+interface HeaderProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Header({ className = '', children }: HeaderProps): React.ReactNode {
+  return (
+    <div className={`px-6 pt-6 pb-4 border-b border-rule ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+interface TitleProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Title({ className = '', children }: TitleProps): React.ReactNode {
+  return (
+    <BaseAlertDialog.Title className={`font-heading text-base uppercase tracking-tight leading-none text-main text-balance ${className}`.trim()}>
+      {children}
+    </BaseAlertDialog.Title>
+  );
+}
+
+interface DescriptionProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Description({ className = '', children }: DescriptionProps): React.ReactNode {
+  return (
+    <BaseAlertDialog.Description className={`font-sans text-base text-sub mt-2 text-pretty ${className}`.trim()}>
+      {children}
+    </BaseAlertDialog.Description>
+  );
+}
+
+// ============================================================================
+// Body & Footer
+// ============================================================================
+
+interface BodyProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Body({ className = '', children }: BodyProps): React.ReactNode {
+  return (
+    <div className={`px-6 py-4 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+interface FooterProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Footer({ className = '', children }: FooterProps): React.ReactNode {
+  return (
+    <div className={`px-6 pb-6 pt-4 border-t border-rule flex justify-end gap-2 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// Close
+// ============================================================================
+
+interface CloseProps {
+  children: React.ReactElement;
+  asChild?: boolean;
+}
+
+function Close({ children, asChild = false }: CloseProps): React.ReactNode {
+  if (asChild) {
+    return (
+      <BaseAlertDialog.Close
+        className="cursor-pointer focus-visible:outline-none"
+        render={children}
+      />
+    );
+  }
+
+  return (
+    <BaseAlertDialog.Close
+      className="cursor-pointer focus-visible:outline-none"
+    >
+      {children}
+    </BaseAlertDialog.Close>
+  );
+}
+
+// ============================================================================
+// State hook
+// ============================================================================
+
+export function useAlertDialogState({
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+}: {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean, eventDetails?: unknown) => void;
+} = {}): { state: AlertDialogState; actions: AlertDialogActions } {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback((value: boolean, eventDetails?: unknown) => {
+    if (!isControlled) setInternalOpen(value);
+    onOpenChange?.(value, eventDetails);
+  }, [isControlled, onOpenChange]);
+
+  const close = useCallback(() => setOpen(false), [setOpen]);
+
+  return { state: { open }, actions: { setOpen, close } };
+}
+
+// ============================================================================
+// Export
+// ============================================================================
+
+export const AlertDialog = {
+  Provider,
+  Trigger,
+  Content,
+  Header,
+  Title,
+  Description,
+  Body,
+  Footer,
+  Close,
+  useAlertDialogState,
+};
+
+export default AlertDialog;

package/components/core/Avatar/Avatar.meta.ts

@@ -0,0 +1,79 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "square";
+
+interface AvatarProps {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+}
+
+export const AvatarMeta = defineComponentMeta<AvatarProps>()({
+  name: "Avatar",
+  description:
+    "User profile image with automatic fallback to initials when the image is unavailable or not provided.",
+  props: {
+    src: {
+      type: "string",
+      description: "URL of the avatar image. Falls back to initials when omitted or fails to load.",
+    },
+    alt: {
+      type: "string",
+      default: "",
+      description: "Accessible alt text for the avatar image",
+    },
+    fallback: {
+      type: "string",
+      default: "",
+      description: "Initials or short text shown when the image is unavailable",
+    },
+    size: {
+      type: "enum",
+      values: ["sm", "md", "lg", "xl"],
+      default: "md",
+      description: "Size preset controlling width, height, and text size",
+    },
+    shape: {
+      type: "enum",
+      values: ["circle", "square"],
+      default: "circle",
+      description: "Border-radius shape of the avatar",
+    },
+  },
+  slots: {},
+  examples: [
+    {
+      name: "Image avatar",
+      code: '<Avatar src="/avatars/user.jpg" alt="Jane Doe" />',
+    },
+    {
+      name: "Fallback initials",
+      code: '<Avatar fallback="JD" />',
+    },
+    {
+      name: "Large square",
+      code: '<Avatar src="/avatars/user.jpg" alt="Jane Doe" size="lg" shape="square" />',
+    },
+  ],
+  tokenBindings: {
+    base: {
+      border: "line",
+    },
+    image: {
+      objectFit: "cover",
+    },
+    fallback: {
+      background: "tinted",
+      text: "main",
+      font: "monospace",
+    },
+  },
+  registry: {
+    category: "data-display",
+    tags: ["avatar", "user", "image", "profile"],
+    renderMode: "custom",
+  },
+});

package/components/core/Avatar/Avatar.schema.json

@@ -0,0 +1,55 @@
+{
+  "name": "Avatar",
+  "description": "User profile image with automatic fallback to initials when the image is unavailable or not provided.",
+  "props": {
+    "src": {
+      "type": "string",
+      "description": "URL of the avatar image. Falls back to initials when omitted or fails to load."
+    },
+    "alt": {
+      "type": "string",
+      "default": "",
+      "description": "Accessible alt text for the avatar image"
+    },
+    "fallback": {
+      "type": "string",
+      "default": "",
+      "description": "Initials or short text shown when the image is unavailable"
+    },
+    "size": {
+      "type": "enum",
+      "values": [
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ],
+      "default": "md",
+      "description": "Size preset controlling width, height, and text size"
+    },
+    "shape": {
+      "type": "enum",
+      "values": [
+        "circle",
+        "square"
+      ],
+      "default": "circle",
+      "description": "Border-radius shape of the avatar"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Image avatar",
+      "code": "<Avatar src=\"/avatars/user.jpg\" alt=\"Jane Doe\" />"
+    },
+    {
+      "name": "Fallback initials",
+      "code": "<Avatar fallback=\"JD\" />"
+    },
+    {
+      "name": "Large square",
+      "code": "<Avatar src=\"/avatars/user.jpg\" alt=\"Jane Doe\" size=\"lg\" shape=\"square\" />"
+    }
+  ]
+}

package/components/core/Avatar/Avatar.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// ============================================================================
+// CVA Variants
+// ============================================================================
+
+const avatarVariants = cva(
+  'relative inline-flex items-center justify-center overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-6 w-6 text-xs',
+        md: 'h-8 w-8 text-sm',
+        lg: 'h-10 w-10 text-base',
+        xl: 'h-14 w-14 text-lg',
+      },
+      shape: {
+        circle: 'rounded-full border border-line',
+        square: 'pixel-rounded-xs',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      shape: 'circle',
+    },
+  }
+);
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface AvatarProps extends VariantProps<typeof avatarVariants> {
+  /** Image source URL */
+  src?: string;
+  /** Alt text for the image */
+  alt?: string;
+  /** Fallback text (e.g. initials) shown when image is unavailable */
+  fallback?: string;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Avatar component for displaying user images with text fallback
+ */
+export function Avatar({
+  src,
+  alt = '',
+  fallback = '',
+  size = 'md',
+  shape = 'circle',
+  className = '',
+}: AvatarProps) {
+  return (
+    <BaseAvatar.Root
+      className={avatarVariants({ size, shape, className })}
+      data-rdna="avatar"
+      data-slot="avatar"
+      data-size={size}
+      data-shape={shape}
+    >
+      {src && (
+        <BaseAvatar.Image
+          src={src}
+          alt={alt}
+          className="h-full w-full object-cover"
+        />
+      )}
+      <BaseAvatar.Fallback
+        className="flex h-full w-full items-center justify-center bg-tinted text-main font-mono uppercase leading-none"
+      >
+        {fallback}
+      </BaseAvatar.Fallback>
+    </BaseAvatar.Root>
+  );
+}
+
+export default Avatar;

package/components/core/Badge/Badge.meta.ts

@@ -0,0 +1,52 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+type BadgeVariant = "default" | "success" | "warning" | "error" | "info";
+type BadgeSize = "sm" | "md";
+
+interface BadgeProps {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+}
+
+export const BadgeMeta = defineComponentMeta<BadgeProps>()({
+  name: "Badge",
+  description: "Status indicator and label component with semantic color variants.",
+  props: {
+    variant: {
+      type: "enum",
+      values: ["default", "success", "warning", "error", "info"],
+      default: "default",
+      description: "Visual variant determining background color for status indication",
+    },
+    size: {
+      type: "enum",
+      values: ["sm", "md"],
+      default: "md",
+      description: "Size preset controlling padding and text size",
+    },
+  },
+  slots: {
+    children: { description: "Badge label text or content" },
+  },
+  examples: [
+    { name: "Default badge", code: "<Badge>Label</Badge>" },
+    { name: "Success status", code: '<Badge variant="success">Active</Badge>' },
+    { name: "Warning status", code: '<Badge variant="warning">Pending</Badge>' },
+    { name: "Error status", code: '<Badge variant="error">Failed</Badge>' },
+    { name: "Info status", code: '<Badge variant="info">New</Badge>' },
+    { name: "Small badge", code: '<Badge size="sm">Tiny</Badge>' },
+  ],
+  tokenBindings: {
+    base: { font: "heading", border: "line", text: "main" },
+    default: { background: "page", text: "main", border: "line" },
+    success: { background: "success", text: "main", border: "line" },
+    warning: { background: "warning", text: "main", border: "line" },
+    error: { background: "danger", text: "main", border: "line" },
+    info: { background: "link", text: "main", border: "line" },
+  },
+  registry: {
+    category: "feedback",
+    tags: ["status", "label", "indicator"],
+    renderMode: "inline",
+  },
+});

package/components/core/Badge/Badge.schema.json

@@ -4,13 +4,22 @@
   "props": {
     "variant": {
       "type": "enum",
-      "values": ["default", "success", "warning", "error", "info"],
+      "values": [
+        "default",
+        "success",
+        "warning",
+        "error",
+        "info"
+      ],
       "default": "default",
       "description": "Visual variant determining background color for status indication"
     },
     "size": {
       "type": "enum",
-      "values": ["sm", "md"],
+      "values": [
+        "sm",
+        "md"
+      ],
       "default": "md",
       "description": "Size preset controlling padding and text size"
     }

package/components/core/Badge/Badge.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// ============================================================================
+// CVA Variants
+// ============================================================================
+
+export const badgeVariants = cva(
+  'inline-flex items-center justify-center font-mono uppercase tracking-tight leading-none pixel-rounded-xs pixel-shadow-raised whitespace-nowrap tabular-nums',
+  {
+    variants: {
+      variant: {
+        default: 'bg-page text-main',
+        success: 'bg-success text-accent-inv',
+        warning: 'bg-warning text-accent-inv',
+        error: 'bg-danger text-accent-inv',
+        info: 'bg-link text-accent-inv',
+      },
+      size: {
+        sm: 'px-1 py-0.5 text-xs',
+        md: 'px-2 py-1 text-xs',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Badge component for status indicators and labels
+ */
+export function Badge({
+  variant = 'default',
+  size = 'md',
+  children,
+  className = '',
+}: BadgeProps) {
+  return (
+    <span
+      className={badgeVariants({ variant, size, className })}
+      data-rdna="badge"
+      data-slot="badge"
+      data-variant={variant}
+    >
+      {children}
+    </span>
+  );
+}
+
+export default Badge;