@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/components/toast.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import * as React from 'react'
+import { Toast as ToastPrimitive } from '@base-ui/react/toast'
+import { cn } from '../lib/utils'
+
+import { Button } from '@devxcrew/react-ui/components/button'
+import {
+  XIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from 'lucide-react'
+
+const toast = ToastPrimitive.createToastManager()
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        'pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        'group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+        '[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]',
+        'h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]',
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        'data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]',
+        'data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]',
+        '[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]',
+        'data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',
+        'data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        'flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn('text-sm font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+function ToastDescription({ className, ...props }: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function ToastAction({
+  className,
+  render = <Button variant="outline" size="sm" />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn('shrink-0', className)}
+      {...props}
+    />
+  )
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button variant="ghost" size="icon-sm" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <XIcon aria-hidden="true" />}
+    </ToastPrimitive.Close>
+  )
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null
+
+  if (type === 'success') {
+    icon = <CircleCheckIcon aria-hidden="true" />
+  }
+
+  if (type === 'info') {
+    icon = <InfoIcon aria-hidden="true" />
+  }
+
+  if (type === 'warning') {
+    icon = <TriangleAlertIcon aria-hidden="true" />
+  }
+
+  if (type === 'error') {
+    icon = <OctagonXIcon className="text-destructive" aria-hidden="true" />
+  }
+
+  if (type === 'loading') {
+    icon = <Loader2Icon className="animate-spin" aria-hidden="true" />
+  }
+
+  if (!icon) {
+    return null
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  )
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        <ToastAction />
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ))
+}
+
+function Toaster({ children, toastManager = toast, ...props }: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider toastManager={toastManager} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  )
+}
+
+const createToastManager = ToastPrimitive.createToastManager
+const useToastManager = ToastPrimitive.useToastManager
+
+export {
+  Toaster,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  createToastManager,
+  toast,
+  useToastManager,
+}

package/src/components/toggle-group.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+import { toggleVariants } from '@devxcrew/react-ui/components/toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: 'horizontal' | 'vertical'
+  }
+>({
+  size: 'default',
+  variant: 'default',
+  spacing: 2,
+  orientation: 'horizontal',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 2,
+  orientation = 'horizontal',
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: 'horizontal' | 'vertical'
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ '--gap': spacing } as React.CSSProperties}
+      className={cn(
+        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/toggle.tsx

@@ -0,0 +1,42 @@
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-muted',
+      },
+      size: {
+        default:
+          'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Toggle({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/components/tooltip.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import { cn } from '../lib/utils'
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/design-system/README.md

@@ -0,0 +1,55 @@
+# CODEXSUN UI Design System Contract
+
+This document defines the package-owned design-system contract that agents and applications use to
+discover, select, and compose shared UI.
+
+## Source of truth
+
+`@devxcrew/react-ui/design-system` is the source of truth. The block, component, page, and template
+registries define the available assets, their variants, and their public import paths. Do not copy
+registry entries into an application or into UIUX.
+
+`designSystemManifest` is the normalized agent-facing view. It includes an asset kind, stable id,
+description, default variant, variant descriptions, source import, and ownership boundary.
+`validateDesignSystemManifest()` must remain green when a registry changes.
+
+## Ownership boundary
+
+The package owns visual structure, semantic styling, accessibility defaults, and typed UI callbacks.
+An application owns business data, field definitions and validation, routes and permissions,
+persistence, and workflows. A block is a reusable rendering contract; it is not a business feature
+or a data provider.
+
+## MCP discovery
+
+Run `npm run ui:mcp` to start the stdio MCP surface. The server exposes:
+
+- `ui.list_assets` to search the normalized manifest.
+- `ui.get_asset` to inspect one asset and its ownership contract.
+- `ui.resolve_variant` to resolve a requested or default variant.
+- `ui.validate_selection` to reject unknown assets and variants before code generation.
+- `ui://manifest` as a read-only manifest resource.
+
+Agents should discover an asset, resolve its variant, and then generate application composition
+around the public import. They must not infer business behavior from a visual specimen.
+
+## Selection contract
+
+`createDesignSystemSelection()` resolves blocks, components, pages, and templates together. A
+requested id or variant that is not in its registry is rejected. Templates are included so a page
+can change from v1 to v3 without changing its application-owned data flow.
+
+## UIUX boundary
+
+UIUX is a visual gallery only. It renders package assets and examples for inspection, documentation,
+and variant comparison. It must not become a feature owner, add durable data, or define an alternate
+design-system registry. If an asset is registered in the package, UIUX should provide a reachable
+visual route or a contract preview.
+
+## Agent composition workflow
+
+1. Discover the asset through MCP or `@devxcrew/react-ui/design-system`.
+2. Resolve the requested variant and inspect its public source path.
+3. Keep business data, routes, permissions, persistence, and workflows in the consuming application.
+4. Pass typed data and callbacks into the package-owned UI.
+5. Verify the manifest and the consuming application build/typecheck.

package/src/design-system/action-intents.ts

@@ -0,0 +1,21 @@
+import { buttonDefaultVariant } from './defaults'
+
+export const actionVariantByIntent = {
+  alternative: 'secondary',
+  caution: 'warning',
+  destructive: 'destructive',
+  information: 'info',
+  navigation: 'link',
+  neutral: 'neutral',
+  positive: 'success',
+  primary: buttonDefaultVariant,
+  quiet: 'ghost',
+  surface: 'outline',
+} as const
+
+export type ActionIntent = keyof typeof actionVariantByIntent
+export type ActionVariant = (typeof actionVariantByIntent)[ActionIntent]
+
+export function resolveActionVariant(intent: ActionIntent): ActionVariant {
+  return actionVariantByIntent[intent]
+}

package/src/design-system/agent-manifest.ts

@@ -0,0 +1,83 @@
+import { designSystemBlocks } from "./block-registry";
+import { designSystemComponents } from "./component-registry";
+import { designSystemPages } from "./page-registry";
+import { designSystemTemplates } from "./template-registry";
+import type {
+  DesignSystemAssetKind,
+  DesignSystemAssetManifest,
+  DesignSystemOwnership,
+  DesignSystemVariantDefinition,
+} from "./contracts";
+
+const packageOwnership = Object.freeze([
+  "visual structure",
+  "semantic styling",
+  "accessibility defaults",
+  "typed UI callbacks",
+]);
+const applicationOwnership = Object.freeze([
+  "business data",
+  "fields and validation",
+  "routes and permissions",
+  "persistence and workflows",
+]);
+
+export const designSystemManifest: readonly DesignSystemAssetManifest[] = Object.freeze([
+  ...designSystemBlocks.map((definition) => createManifestEntry("block", definition)),
+  ...designSystemComponents.map((definition) =>
+    createManifestEntry("component", {
+      ...definition,
+      description: `Reusable ${definition.name} UI primitive.`,
+    }),
+  ),
+  ...designSystemPages.map((definition) => createManifestEntry("page", definition)),
+  ...designSystemTemplates.map((definition) => createManifestEntry("template", definition)),
+]);
+
+export function getDesignSystemAsset(assetId: string, kind?: DesignSystemAssetKind) {
+  return designSystemManifest.find((asset) => asset.id === assetId && (!kind || asset.kind === kind));
+}
+
+export function validateDesignSystemManifest(manifest: readonly DesignSystemAssetManifest[] = designSystemManifest) {
+  const seen = new Set<string>();
+  const errors: string[] = [];
+
+  for (const asset of manifest) {
+    const key = `${asset.kind}:${asset.id}`;
+    if (seen.has(key)) errors.push(`Duplicate asset: ${key}`);
+    seen.add(key);
+    if (!asset.variants.some(({ id }) => id === asset.defaultVariantId)) {
+      errors.push(`Missing default variant: ${key}:${asset.defaultVariantId}`);
+    }
+    if (!asset.source.startsWith("@devxcrew/react-ui/")) errors.push(`Invalid package source: ${key}`);
+    if (!asset.ownership.packageOwns.length || !asset.ownership.applicationOwns.length) {
+      errors.push(`Incomplete ownership contract: ${key}`);
+    }
+  }
+
+  return Object.freeze({ valid: errors.length === 0, errors });
+}
+
+function createManifestEntry(
+  kind: DesignSystemAssetKind,
+  definition: {
+    defaultVariantId: string;
+    description: string;
+    id: string;
+    name: string;
+    source: string;
+    variants: readonly DesignSystemVariantDefinition[];
+  },
+): DesignSystemAssetManifest {
+  const ownership: DesignSystemOwnership = { applicationOwns: applicationOwnership, packageOwns: packageOwnership };
+  return Object.freeze({
+    defaultVariantId: definition.defaultVariantId,
+    description: definition.description,
+    id: definition.id,
+    kind,
+    name: definition.name,
+    ownership,
+    source: definition.source,
+    variants: definition.variants,
+  });
+}