TypeScript Definitions

/**
 * Type-safe attribute names for attributify usage
 * @template Prefix - Optional prefix string for attribute names
 */
type AttributifyNames<Prefix extends string = ''> = 
  | `${Prefix}${BasicAttributes}`
  | `${Prefix}${PseudoPrefix}:${BasicAttributes}`;

/**
 * Interface providing type-safe attribute names for JSX/TSX usage
 * Extends Partial<Record> to make all attributes optional
 */
interface AttributifyAttributes extends Partial<Record<AttributifyNames, string | boolean>> {}

import type { AttributifyAttributes } from '@unocss/preset-attributify'

// Use in React component props
interface ButtonProps extends AttributifyAttributes {
  children: React.ReactNode;
}

function Button(props: ButtonProps) {
  return <button {...props} />;
}

// Usage with full type safety
<Button 
  bg="blue-500 hover:blue-600"    // ✓ Valid
  text="white sm"                 // ✓ Valid  
  p="x-4 y-2"                     // ✓ Valid
  invalidAttr="value"             // ✗ TypeScript error
/>

/**
 * All basic attribute types available in attributify mode
 */
type BasicAttributes = SpecialSingleWord | TwoStringsComposition | SeparateEnabled;

/**
 * Complete UnoCSS utilities that work as single words
 */
type SpecialSingleWord = 
  | 'container'
  | 'flex' 
  | 'block'
  | 'inline'
  | 'table'
  | 'isolate'
  | 'absolute'
  | 'relative'
  | 'fixed'
  | 'sticky'
  | 'static'
  | 'visible'
  | 'invisible'
  | 'grow'
  | 'shrink'
  | 'antialiased'
  | 'italic'
  | 'ordinal'
  | 'overline'
  | 'underline'
  | 'uppercase'
  | 'lowercase'
  | 'capitalize'
  | 'truncate'
  | 'border'
  | 'rounded'
  | 'outline'
  | 'ring'
  | 'shadow'
  | 'blur'
  | 'grayscale'
  | 'invert'
  | 'sepia'
  | 'transition'
  | 'resize'
  | 'transform'
  | 'filter';

/**
 * Valid prefixes for two-string composition utilities
 */
type TwoStringsCompositionPrefix = 'm' | 'p';

/**
 * Valid suffixes for two-string composition utilities  
 */
type TwoStringsCompositionSuffix = 'r' | 'b' | 'l' | 't' | 'a' | 'x' | 'y';

/**
 * Two-character utility combinations plus special cases
 */
type TwoStringsComposition = 
  | `${TwoStringsCompositionPrefix}${TwoStringsCompositionSuffix}`
  | 'ha' 
  | 'wa';

/**
 * Valid pseudo-class and breakpoint prefixes
 */
type PseudoPrefix = 
  | 'active'
  | 'before'
  | 'after'
  | 'dark'
  | 'light'
  | 'first'
  | 'last'
  | 'focus'
  | 'hover'
  | 'link'
  | 'root'
  | 'sm'
  | 'md'
  | 'lg'
  | 'xl'
  | '2xl'
  | 'enabled'
  | 'disabled'
  | 'all'
  | 'children';

/**
 * Utilities that can separate multiple values with spaces
 * For example: font="mono light", text="sm white"
 */
type SeparateEnabled = 
  | 'align'
  | 'animate'
  | 'backdrop'
  | 'bg'
  | 'blend'
  | 'border'
  | 'box'
  | 'container'
  | 'content'
  | 'cursor'
  | 'display'
  | 'divide'
  | 'filter'
  | 'flex'
  | 'font'
  | 'fw'
  | 'gap'
  | 'gradient'
  | 'grid'
  | 'h'
  | 'icon'
  | 'items'
  | 'justify'
  | 'list'
  | 'm'
  | 'op'
  | 'opacity'
  | 'order'
  | 'outline'
  | 'overflow'
  | 'p'
  | 'place'
  | 'pos'
  | 'position'
  | 'ring'
  | 'select'
  | 'shadow'
  | 'size'
  | 'space'
  | 'table'
  | 'text'
  | 'transform'
  | 'transition'
  | 'underline'
  | 'w'
  | 'z'
  | PseudoPrefix;

import type { AttributifyAttributes } from '@unocss/preset-attributify'

// Extend component props
interface CardProps extends AttributifyAttributes {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children, ...attrs }: CardProps) {
  return (
    <div 
      bg="white dark:gray-800"
      border="rounded-lg"
      p="6"
      shadow="lg"
      {...attrs}
    >
      <h2 text="xl font-bold">{title}</h2>
      {children}
    </div>
  );
}

<script setup lang="ts">
import type { AttributifyAttributes } from '@unocss/preset-attributify'

interface Props extends AttributifyAttributes {
  title: string;
}

defineProps<Props>();
</script>

<template>
  <div 
    bg="white dark:gray-800"
    border="rounded-lg" 
    p="6"
    shadow="lg"
  >
    <h2 text="xl font-bold">{{ title }}</h2>
    <slot />
  </div>
</template>

import type { AttributifyNames } from '@unocss/preset-attributify'

// Custom prefix type
type UIAttributes = Partial<Record<AttributifyNames<'ui-'>, string | boolean>>;

interface ComponentProps extends UIAttributes {
  // Component-specific props
}

// Usage
<div 
  ui-bg="blue-500"
  ui-text="white"
  ui-p="4"
/>

// types/jsx.d.ts
import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

// Now all HTML elements support attributify
<div bg="blue-500" text="white" />  // ✓ Type-safe everywhere

import type { HTMLAttributes } from 'react'
import type { AttributifyAttributes } from '@unocss/preset-attributify'

type ReactAttributifyProps<T = HTMLElement> = HTMLAttributes<T> & AttributifyAttributes;

import type { AllowedComponentProps } from 'vue'
import type { AttributifyAttributes } from '@unocss/preset-attributify'

type VueAttributifyProps = AllowedComponentProps & AttributifyAttributes;

// Both string and boolean values are supported
<div block />           // boolean: true
<div block="true" />    // string: "true"  
<div block={true} />    // boolean: true (JSX)

// String values support complex utilities
<div bg="gradient-to-r from-blue-500 to-purple-600" />
<div text="lg font-bold leading-tight" />