유틸리티 함수

import { dotCx, semanticVars, dotExplain } from '@hua-labs/dot';
import { CAPABILITY_MATRIX, PROPERTY_TO_FAMILY, getCapability } from '@hua-labs/dot';
import type { DotExplainResult, CapabilityLevel } from '@hua-labs/dot';

function dotCx(...inputs: (string | false | null | undefined | 0 | '')[]): string

import { dotCx, dot } from '@hua-labs/dot';

// 기본 사용
dotCx('p-4', 'flex', 'items-center');
// → 'p-4 flex items-center'

// 조건부 결합
const isActive = true;
dotCx('p-4', isActive && 'bg-primary-500', !isActive && 'bg-gray-100');
// → 'p-4 bg-primary-500'  (false는 무시됨)

// null/undefined 필터링
const extraClass = undefined;
dotCx('p-4', null, extraClass, 'rounded-lg');
// → 'p-4 rounded-lg'

// dot()와 함께
const baseStyles = 'p-4 flex items-center';
const conditionalStyles = dotCx(
  baseStyles,
  isLoading && 'opacity-50 pointer-events-none',
  hasError && 'border border-red-500',
  className,
);

const style = dot(conditionalStyles);

// React 컴포넌트 예시
function Button({
  children,
  disabled,
  variant = 'primary',
}: {
  children: React.ReactNode;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}) {
  const utilStr = dotCx(
    'px-4 py-2 rounded-lg font-medium',
    variant === 'primary' && 'bg-primary-500 text-white',
    variant === 'secondary' && 'bg-gray-100 text-gray-900',
    disabled && 'opacity-50 cursor-not-allowed',
  );

  return <button style={dot(utilStr)} disabled={disabled}>{children}</button>;
}

// 기본 접두사 (--color)
function semanticVars(...names: string[]): Record<string, string>

// 커스텀 접두사
function semanticVars(
  options: { prefix: string },
  ...names: string[]
): Record<string, string>

import { semanticVars, createDotConfig } from '@hua-labs/dot';

// 기본 접두사 --color
const vars = semanticVars('sidebar', 'sidebar-foreground', 'chart-1');
// { sidebar: 'var(--color-sidebar)', 'sidebar-foreground': 'var(--color-sidebar-foreground)', 'chart-1': 'var(--color-chart-1)' }

// createDotConfig에 통합
createDotConfig({
  theme: {
    semanticColors: {
      ...semanticVars('sidebar', 'sidebar-foreground', 'chart-1'),
      brand: 'var(--my-brand)',  // 명시적 매핑과 혼합 가능
    },
  },
});

// 커스텀 접두사
const themeVars = semanticVars({ prefix: '--theme' }, 'primary', 'secondary', 'accent');
// { primary: 'var(--theme-primary)', secondary: 'var(--theme-secondary)', accent: 'var(--theme-accent)' }

// Next.js + shadcn/ui 스타일 시맨틱 설정
createDotConfig({
  theme: {
    semanticColors: {
      ...semanticVars(
        'background', 'foreground',
        'card', 'card-foreground',
        'popover', 'popover-foreground',
        'primary', 'primary-foreground',
        'secondary', 'secondary-foreground',
        'muted', 'muted-foreground',
        'accent', 'accent-foreground',
        'destructive', 'destructive-foreground',
        'border', 'input', 'ring',
      ),
    },
  },
});

dot('bg-background text-foreground border-border');
// { backgroundColor: 'var(--color-background)', color: 'var(--color-foreground)', borderColor: 'var(--color-border)' }

function dotExplain(
  input: string | undefined | null,
  options?: DotOptions
): DotExplainResult

interface DotExplainResult {
  /** dot()과 동일한 해석된 스타일 오브젝트 */
  styles: StyleObject | RNStyleObject | FlutterRecipe;
  /** 플랫폼 호환성 보고서 */
  report: DotCapabilityReport;
}

interface DotCapabilityReport {
  /** 대상 플랫폼에서 드롭된 유틸리티 목록 */
  _dropped?: string[];
  /** 근사화된 유틸리티 목록 (정확하지 않음) */
  _approximated?: string[];
  /** 패밀리별 지원 수준 */
  _capabilities?: Record<string, CapabilityLevel>;
  /** 근사화 세부 사항 (예: boxShadow: ['inset dropped', 'spread ignored']) */
  _details?: Record<string, string[]>;
}

import { dotExplain } from '@hua-labs/dot';

// React Native 호환성 확인
const result = dotExplain('p-4 blur-md grid grid-cols-3', { target: 'native' });
// {
//   styles: { padding: 16 },
//   report: {
//     _dropped: ['filter', 'gridTemplateColumns'],
//     _capabilities: {
//       filter: 'unsupported',
//       grid: 'unsupported',
//     },
//   },
// }

// Flutter 호환성 확인
const flutterResult = dotExplain('p-4 transition-all hover:bg-gray-100', { target: 'flutter' });
// {
//   styles: FlutterRecipe { padding: { top: 16, ... } },
//   report: {
//     _dropped: ['transitionProperty'],
//     _capabilities: { transition: 'unsupported' },
//   },
// }

// 웹은 항상 빈 보고서
const webResult = dotExplain('p-4 flex blur-md');
// { styles: { padding: '16px', display: 'flex', filter: 'blur(12px)' }, report: {} }

// 박스 쉐도우 근사화 세부 정보
const shadowResult = dotExplain('shadow-lg ring-2 ring-inset', { target: 'native' });
// {
//   styles: RNStyleObject,
//   report: {
//     _approximated: ['boxShadow'],
//     _capabilities: { boxShadow: 'approximate' },
//     _details: { boxShadow: ['inset dropped', 'spread ignored'] },
//   },
// }

const CAPABILITY_MATRIX: Record<string, Partial<Record<DotTarget, CapabilityLevel>>>

import { CAPABILITY_MATRIX } from '@hua-labs/dot';

CAPABILITY_MATRIX['gradient'];
// { web: 'native', native: 'unsupported', flutter: 'recipe-only' }

CAPABILITY_MATRIX['filter'];
// { web: 'native', native: 'unsupported', flutter: 'plugin-backed' }

CAPABILITY_MATRIX['spacing'];
// { web: 'native', native: 'native', flutter: 'native' }

// 플랫폼별 미지원 패밀리 목록
const nativeUnsupported = Object.entries(CAPABILITY_MATRIX)
  .filter(([, caps]) => caps.native === 'unsupported')
  .map(([family]) => family);
// ['transition', 'animation', 'filter', 'grid', 'gradient', ...]

const PROPERTY_TO_FAMILY: Record<string, string>

import { PROPERTY_TO_FAMILY, CAPABILITY_MATRIX } from '@hua-labs/dot';

PROPERTY_TO_FAMILY['backgroundImage'];
// 'gradient'

PROPERTY_TO_FAMILY['padding'];
// 'spacing'

// CSS 속성의 네이티브 지원 수준 확인
function checkNativeSupport(cssProperty: string) {
  const family = PROPERTY_TO_FAMILY[cssProperty];
  if (!family) return 'unknown';
  return CAPABILITY_MATRIX[family]?.native ?? 'unknown';
}

checkNativeSupport('backgroundImage');  // 'unsupported'
checkNativeSupport('padding');          // 'native'

function getCapability(
  property: string,
  target: DotTarget,
  value?: string
): CapabilityLevel

import { getCapability } from '@hua-labs/dot';

getCapability('padding', 'native');         // 'native'
getCapability('filter', 'native');          // 'unsupported'
getCapability('display', 'native', 'flex'); // 'native'
getCapability('display', 'native', 'grid'); // 'unsupported'