neato - npm Package Compare versions

Comparing version

+1

-0

dist/index.d.ts

		@@ -0,3 +1,4 @@
		export type { ClassValue } from 'clsx';
		export { neato } from './neato';
		export type { CompoundVariant, VariantProps, VariantsConfig } from './types';
		export { neatoVariants } from './variants';

+5

-16

dist/theme-script.js

		@@ -19,24 +19,13 @@ // FOUC 방지를 위한 인라인 스크립트 (Neato Theme)

		// 중복 클래스 추가 방지
		var htmlElement = document.documentElement;
		if (isDark && !htmlElement.classList.contains('dark')) {
		htmlElement.classList.add('dark');
		} else if (!isDark && htmlElement.classList.contains('dark')) {
		htmlElement.classList.remove('dark');
		if (isDark) {
		document.documentElement.classList.add('dark');
		}

		// 서버와 클라이언트 동기화를 위한 데이터 속성 추가
		htmlElement.setAttribute('data-theme-resolved', isDark ? 'dark' : 'light');
		} catch (e) {
		// 에러가 발생하면 시스템 테마 사용
		try {
		var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
		var htmlElement = document.documentElement;
		if (systemDark && !htmlElement.classList.contains('dark')) {
		htmlElement.classList.add('dark');
		if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
		document.documentElement.classList.add('dark');
		}
		htmlElement.setAttribute('data-theme-resolved', systemDark ? 'dark' : 'light');
		} catch (e2) {
		// 완전히 실패하면 light 테마로 설정
		document.documentElement.setAttribute('data-theme-resolved', 'light');
		// 완전히 실패하면 아무것도 하지 않음
		}
		@@ -43,0 +32,0 @@ }

+3

-12

dist/theme.js

		@@ -12,5 +12,2 @@ "use client";
		setIsHydrated(true);
		// 서버에서 설정된 초기 테마 상태 읽기
		const htmlElement = document.documentElement;
		const resolvedTheme = htmlElement.getAttribute('data-theme-resolved');
		// localStorage에서 테마 값 읽기
		@@ -21,11 +18,5 @@ const saved = localStorage.getItem("theme");
		}
		// 초기 effectiveTheme을 서버에서 결정된 값으로 설정
		if (resolvedTheme === 'dark' \|\| resolvedTheme === 'light') {
		setEffectiveTheme(resolvedTheme);
		}
		else {
		// fallback: DOM 상태를 확인
		const currentlyDark = htmlElement.classList.contains("dark");
		setEffectiveTheme(currentlyDark ? "dark" : "light");
		}
		// 현재 DOM 상태를 기준으로 초기 effectiveTheme 설정
		const currentlyDark = document.documentElement.classList.contains("dark");
		setEffectiveTheme(currentlyDark ? "dark" : "light");
		}, []); // 시스템 다크모드 감지 및 테마 적용
		@@ -32,0 +23,0 @@ useEffect(() => {

+0

-7

dist/types.d.ts

		@@ -14,8 +14,1 @@ export type VariantProps = Record<string, string \| number \| boolean \| undefined>;
		}
		export interface HydrationSafeProps {
		suppressHydrationWarning?: boolean;
		}
		export type ThemeResolvedValue = 'light' \| 'dark';
		export interface SSRSafeElementProps extends HydrationSafeProps {
		'data-theme-resolved'?: ThemeResolvedValue;
		}

+7

-10

dist/variants.js

		@@ -6,12 +6,9 @@ import clsx from 'clsx';
		if (isMultiSlot) {
		return (props = {}) => {
		const result = {};
		for (const slotName of Object.keys(config)) {
		const slotConfig = config[slotName];
		const slotProps = props[slotName];
		const slotVariants = neatoVariants(slotConfig);
		result[slotName] = slotVariants(slotProps);
		}
		return result;
		};
		// 각 슬롯별로 함수 반환
		const result = {};
		for (const slotName of Object.keys(config)) {
		const slotConfig = config[slotName];
		result[slotName] = neatoVariants(slotConfig);
		}
		return result;
		}
		@@ -18,0 +15,0 @@ return (props = {}) => {

+1

-1

package.json

		{
		"name": "neato",
		"version": "0.0.12",
		"version": "0.0.13",
		"description": "A powerful utility library for efficient CSS class management in React applications",
		@@ -5,0 +5,0 @@ "keywords": [

Fixed alerts