@hua-labs/hua-ux 0.1.0-alpha.0.1

package/dist/framework/a11y/hooks/useLiveRegion.js

@@ -0,0 +1,60 @@
+/**
+ * @hua-labs/hua-ux/framework - useLiveRegion
+ *
+ * 프로그래밍 방식으로 Live Region을 사용하는 hook
+ * Hook for programmatically using Live Region
+ */
+'use client';
+import React, { useCallback, useState } from 'react';
+import { LiveRegion } from '../components/LiveRegion';
+/**
+ * useLiveRegion Hook
+ *
+ * 프로그래밍 방식으로 Live Region을 사용할 수 있습니다.
+ * Allows programmatic use of Live Region.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { announce, LiveRegionComponent } = useLiveRegion();
+ *
+ *   const handleClick = () => {
+ *     announce('버튼이 클릭되었습니다');
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleClick}>Click me</button>
+ *       {LiveRegionComponent}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @param defaultPoliteness - 기본 politeness 레벨
+ * @returns Live Region 제어 함수와 컴포넌트
+ */
+export function useLiveRegion(defaultPoliteness = 'polite') {
+    const [message, setMessage] = useState(undefined);
+    const [politeness, setPoliteness] = useState(defaultPoliteness);
+    const announce = useCallback((newMessage, newPoliteness) => {
+        // 메시지를 초기화한 후 다시 설정하여 스크린 리더가 변경을 감지하도록 함
+        setMessage(undefined);
+        // 다음 틱에 메시지 설정
+        setTimeout(() => {
+            setMessage(newMessage);
+            if (newPoliteness) {
+                setPoliteness(newPoliteness);
+            }
+        }, 0);
+    }, []);
+    const LiveRegionComponent = React.createElement(LiveRegion, {
+        message,
+        politeness,
+    });
+    return {
+        announce,
+        LiveRegionComponent,
+        message,
+    };
+}

package/dist/framework/a11y/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @hua-labs/hua-ux/framework - Accessibility (a11y)
+ *
+ * WCAG 2.1 준수를 위한 접근성 도구 모음
+ * Accessibility tools for WCAG 2.1 compliance
+ */
+export { useFocusManagement } from './hooks/useFocusManagement';
+export { useFocusTrap } from './hooks/useFocusTrap';
+export { SkipToContent } from './components/SkipToContent';
+export { LiveRegion } from './components/LiveRegion';
+export { useLiveRegion } from './hooks/useLiveRegion';
+export type { FocusManagementOptions } from './hooks/useFocusManagement';
+export type { FocusTrapOptions } from './hooks/useFocusTrap';
+export type { SkipToContentProps } from './components/SkipToContent';
+export type { LiveRegionProps } from './components/LiveRegion';
+//# sourceMappingURL=index.d.ts.map

package/dist/framework/a11y/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/framework/a11y/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/framework/a11y/index.js

@@ -0,0 +1,11 @@
+/**
+ * @hua-labs/hua-ux/framework - Accessibility (a11y)
+ *
+ * WCAG 2.1 준수를 위한 접근성 도구 모음
+ * Accessibility tools for WCAG 2.1 compliance
+ */
+export { useFocusManagement } from './hooks/useFocusManagement';
+export { useFocusTrap } from './hooks/useFocusTrap';
+export { SkipToContent } from './components/SkipToContent';
+export { LiveRegion } from './components/LiveRegion';
+export { useLiveRegion } from './hooks/useLiveRegion';

package/dist/framework/branding/context.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @hua-labs/hua-ux/framework - Branding Context
+ *
+ * 브랜딩 설정을 컴포넌트에서 사용하기 위한 Context
+ */
+import React from 'react';
+import type { HuaUxConfig } from '../types';
+/**
+ * BrandingProvider component
+ *
+ * 브랜딩 설정을 제공하고 CSS 변수를 자동으로 주입하는 Provider입니다.
+ * Provides branding configuration and automatically injects CSS variables.
+ *
+ * @example
+ * ```tsx
+ * <BrandingProvider branding={config.branding}>
+ *   {children}
+ * </BrandingProvider>
+ * ```
+ */
+export declare function BrandingProvider({ branding, children, }: {
+    branding: NonNullable<HuaUxConfig['branding']> | null;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * useBranding hook
+ *
+ * 브랜딩 설정을 가져오는 훅입니다.
+ *
+ * @returns Branding configuration or null
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const branding = useBranding();
+ *   const primaryColor = branding?.colors?.primary || 'blue';
+ *   return <div style={{ color: primaryColor }}>Hello</div>;
+ * }
+ * ```
+ */
+export declare function useBranding(): NonNullable<HuaUxConfig['branding']> | null;
+/**
+ * Get color from branding
+ *
+ * 브랜딩에서 색상을 가져옵니다. 없으면 기본값을 반환합니다.
+ *
+ * @param colorKey - Color key (primary, secondary, etc.)
+ * @param defaultValue - Default color if not found
+ * @returns Color value
+ */
+export declare function useBrandingColor(colorKey: keyof NonNullable<NonNullable<HuaUxConfig['branding']>['colors']>, defaultValue?: string): string | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/framework/branding/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/framework/branding/context.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAiB5C;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAmDA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,IAAI,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAGzE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,MAAM,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAC3E,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,GAAG,SAAS,CAGpB"}

package/dist/framework/branding/context.js

@@ -0,0 +1,96 @@
+/**
+ * @hua-labs/hua-ux/framework - Branding Context
+ *
+ * 브랜딩 설정을 컴포넌트에서 사용하기 위한 Context
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext } from 'react';
+import { generateCSSVariables } from './css-vars';
+/**
+ * Branding context
+ */
+const BrandingContext = createContext({
+    branding: null,
+});
+/**
+ * BrandingProvider component
+ *
+ * 브랜딩 설정을 제공하고 CSS 변수를 자동으로 주입하는 Provider입니다.
+ * Provides branding configuration and automatically injects CSS variables.
+ *
+ * @example
+ * ```tsx
+ * <BrandingProvider branding={config.branding}>
+ *   {children}
+ * </BrandingProvider>
+ * ```
+ */
+export function BrandingProvider({ branding, children, }) {
+    // SSR 시 초기 CSS 변수 주입 (FOUC 방지)
+    // Inject initial CSS variables on SSR (prevent FOUC)
+    // Next.js의 suppressHydrationWarning을 사용하여 클라이언트 하이드레이션 시 경고 방지
+    // Use Next.js suppressHydrationWarning to prevent warnings during client hydration
+    const cssVarsString = React.useMemo(() => {
+        if (!branding)
+            return '';
+        return generateCSSVariables(branding);
+    }, [branding]);
+    // 클라이언트 사이드에서 CSS 변수 동적 업데이트
+    // Dynamically update CSS variables on client side
+    React.useEffect(() => {
+        if (!branding || !cssVarsString)
+            return;
+        // style 태그 생성 또는 업데이트
+        // Create or update style tag
+        const styleId = 'hua-ux-branding-vars';
+        let styleElement = document.getElementById(styleId);
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = styleId;
+            document.head.appendChild(styleElement);
+        }
+        styleElement.textContent = cssVarsString;
+        // Cleanup
+        return () => {
+            const element = document.getElementById(styleId);
+            if (element) {
+                element.remove();
+            }
+        };
+    }, [branding, cssVarsString]);
+    return (_jsxs(BrandingContext.Provider, { value: { branding }, children: [cssVarsString && (_jsx("style", { id: "hua-ux-branding-vars", dangerouslySetInnerHTML: { __html: cssVarsString }, suppressHydrationWarning: true })), children] }));
+}
+/**
+ * useBranding hook
+ *
+ * 브랜딩 설정을 가져오는 훅입니다.
+ *
+ * @returns Branding configuration or null
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const branding = useBranding();
+ *   const primaryColor = branding?.colors?.primary || 'blue';
+ *   return <div style={{ color: primaryColor }}>Hello</div>;
+ * }
+ * ```
+ */
+export function useBranding() {
+    const { branding } = useContext(BrandingContext);
+    return branding;
+}
+/**
+ * Get color from branding
+ *
+ * 브랜딩에서 색상을 가져옵니다. 없으면 기본값을 반환합니다.
+ *
+ * @param colorKey - Color key (primary, secondary, etc.)
+ * @param defaultValue - Default color if not found
+ * @returns Color value
+ */
+export function useBrandingColor(colorKey, defaultValue) {
+    const branding = useBranding();
+    return branding?.colors?.[colorKey] || defaultValue;
+}

package/dist/framework/branding/css-vars.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @hua-labs/hua-ux/framework - CSS Variables Generator
+ *
+ * 브랜딩 설정을 CSS 변수로 자동 생성
+ */
+import type { HuaUxConfig } from '../types';
+/**
+ * Generate CSS variables from branding configuration
+ *
+ * 브랜딩 설정을 CSS 변수 문자열로 변환합니다.
+ *
+ * @param branding - Branding configuration
+ * @returns CSS variables string
+ *
+ * @example
+ * ```ts
+ * const css = generateCSSVariables({
+ *   colors: { primary: '#3B82F6' },
+ *   typography: { fontFamily: ['Inter', 'sans-serif'] },
+ * });
+ * // Returns: ":root {\n  --color-primary: #3B82F6;\n  --font-family: Inter, sans-serif;\n}"
+ * ```
+ */
+export declare function generateCSSVariables(branding: NonNullable<HuaUxConfig['branding']>): string;
+/**
+ * Generate CSS variables as object
+ *
+ * 브랜딩 설정을 CSS 변수 객체로 변환합니다.
+ *
+ * @param branding - Branding configuration
+ * @returns CSS variables object
+ */
+export declare function generateCSSVariablesObject(branding: NonNullable<HuaUxConfig['branding']>): Record<string, string>;
+//# sourceMappingURL=css-vars.d.ts.map

package/dist/framework/branding/css-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["../../../src/framework/branding/css-vars.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,GAAG,MAAM,CAsC3F;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,GAC7C,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkCxB"}

package/dist/framework/branding/css-vars.js

@@ -0,0 +1,95 @@
+/**
+ * @hua-labs/hua-ux/framework - CSS Variables Generator
+ *
+ * 브랜딩 설정을 CSS 변수로 자동 생성
+ */
+/**
+ * Generate CSS variables from branding configuration
+ *
+ * 브랜딩 설정을 CSS 변수 문자열로 변환합니다.
+ *
+ * @param branding - Branding configuration
+ * @returns CSS variables string
+ *
+ * @example
+ * ```ts
+ * const css = generateCSSVariables({
+ *   colors: { primary: '#3B82F6' },
+ *   typography: { fontFamily: ['Inter', 'sans-serif'] },
+ * });
+ * // Returns: ":root {\n  --color-primary: #3B82F6;\n  --font-family: Inter, sans-serif;\n}"
+ * ```
+ */
+export function generateCSSVariables(branding) {
+    const vars = [];
+    // 색상 변수
+    if (branding.colors) {
+        Object.entries(branding.colors).forEach(([key, value]) => {
+            if (value) {
+                vars.push(`  --color-${key}: ${value};`);
+            }
+        });
+    }
+    // 타이포그래피 변수
+    if (branding.typography) {
+        if (branding.typography.fontFamily) {
+            vars.push(`  --font-family: ${branding.typography.fontFamily.join(', ')};`);
+        }
+        if (branding.typography.fontSize) {
+            Object.entries(branding.typography.fontSize).forEach(([key, value]) => {
+                if (value) {
+                    vars.push(`  --font-size-${key}: ${value};`);
+                }
+            });
+        }
+    }
+    // 커스텀 변수
+    if (branding.customVariables) {
+        Object.entries(branding.customVariables).forEach(([key, value]) => {
+            vars.push(`  --${key}: ${value};`);
+        });
+    }
+    if (vars.length === 0) {
+        return '';
+    }
+    return `:root {\n${vars.join('\n')}\n}`;
+}
+/**
+ * Generate CSS variables as object
+ *
+ * 브랜딩 설정을 CSS 변수 객체로 변환합니다.
+ *
+ * @param branding - Branding configuration
+ * @returns CSS variables object
+ */
+export function generateCSSVariablesObject(branding) {
+    const vars = {};
+    // 색상 변수
+    if (branding.colors) {
+        Object.entries(branding.colors).forEach(([key, value]) => {
+            if (value) {
+                vars[`--color-${key}`] = value;
+            }
+        });
+    }
+    // 타이포그래피 변수
+    if (branding.typography) {
+        if (branding.typography.fontFamily) {
+            vars['--font-family'] = branding.typography.fontFamily.join(', ');
+        }
+        if (branding.typography.fontSize) {
+            Object.entries(branding.typography.fontSize).forEach(([key, value]) => {
+                if (value) {
+                    vars[`--font-size-${key}`] = value;
+                }
+            });
+        }
+    }
+    // 커스텀 변수
+    if (branding.customVariables) {
+        Object.entries(branding.customVariables).forEach(([key, value]) => {
+            vars[`--${key}`] = value;
+        });
+    }
+    return vars;
+}

package/dist/framework/branding/tailwind-config.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @hua-labs/hua-ux/framework - Tailwind Config Generator
+ *
+ * 브랜딩 설정을 Tailwind Config로 자동 생성
+ */
+import type { HuaUxConfig } from '../types';
+/**
+ * Generate Tailwind config from branding configuration
+ *
+ * 브랜딩 설정을 Tailwind Config 객체로 변환합니다.
+ *
+ * @param branding - Branding configuration
+ * @returns Tailwind config object
+ *
+ * @example
+ * ```ts
+ * const tailwindConfig = generateTailwindConfig({
+ *   colors: { primary: '#3B82F6' },
+ *   typography: { fontFamily: ['Inter', 'sans-serif'] },
+ * });
+ *
+ * // Use in tailwind.config.js:
+ * module.exports = {
+ *   ...tailwindConfig,
+ *   // ... other config
+ * };
+ * ```
+ */
+export declare function generateTailwindConfig(branding: NonNullable<HuaUxConfig['branding']>): {
+    theme: {
+        extend: {
+            colors?: Record<string, string>;
+            fontFamily?: Record<string, string[]>;
+            fontSize?: Record<string, string>;
+        };
+    };
+};
+//# sourceMappingURL=tailwind-config.d.ts.map

package/dist/framework/branding/tailwind-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-config.d.ts","sourceRoot":"","sources":["../../../src/framework/branding/tailwind-config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,GAC7C;IACD,KAAK,EAAE;QACL,MAAM,EAAE;YACN,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAChC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;YACtC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SACnC,CAAC;KACH,CAAC;CACH,CAiDA"}

package/dist/framework/branding/tailwind-config.js

@@ -0,0 +1,66 @@
+/**
+ * @hua-labs/hua-ux/framework - Tailwind Config Generator
+ *
+ * 브랜딩 설정을 Tailwind Config로 자동 생성
+ */
+/**
+ * Generate Tailwind config from branding configuration
+ *
+ * 브랜딩 설정을 Tailwind Config 객체로 변환합니다.
+ *
+ * @param branding - Branding configuration
+ * @returns Tailwind config object
+ *
+ * @example
+ * ```ts
+ * const tailwindConfig = generateTailwindConfig({
+ *   colors: { primary: '#3B82F6' },
+ *   typography: { fontFamily: ['Inter', 'sans-serif'] },
+ * });
+ *
+ * // Use in tailwind.config.js:
+ * module.exports = {
+ *   ...tailwindConfig,
+ *   // ... other config
+ * };
+ * ```
+ */
+export function generateTailwindConfig(branding) {
+    const config = {
+        theme: {
+            extend: {},
+        },
+    };
+    // 색상 설정
+    if (branding.colors) {
+        const colors = {};
+        Object.entries(branding.colors).forEach(([key, value]) => {
+            if (value) {
+                colors[key] = value;
+            }
+        });
+        if (Object.keys(colors).length > 0) {
+            config.theme.extend.colors = colors;
+        }
+    }
+    // 타이포그래피 설정
+    if (branding.typography) {
+        if (branding.typography.fontFamily) {
+            config.theme.extend.fontFamily = {
+                sans: branding.typography.fontFamily,
+            };
+        }
+        if (branding.typography.fontSize) {
+            const fontSize = {};
+            Object.entries(branding.typography.fontSize).forEach(([key, value]) => {
+                if (value) {
+                    fontSize[key] = value;
+                }
+            });
+            if (Object.keys(fontSize).length > 0) {
+                config.theme.extend.fontSize = fontSize;
+            }
+        }
+    }
+    return config;
+}

package/dist/framework/components/BrandedButton.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @hua-labs/hua-ux/framework - BrandedButton
+ *
+ * Button 컴포넌트에 branding을 자동으로 적용하는 wrapper
+ * Wrapper that automatically applies branding to Button component
+ *
+ * CSS 변수를 사용하여 Tailwind의 최적화를 활용합니다.
+ * Uses CSS variables to leverage Tailwind's optimization.
+ */
+import * as React from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+import { Button } from '@hua-labs/ui';
+/**
+ * BrandedButton Component
+ *
+ * Button 컴포넌트에 branding 설정을 자동으로 적용합니다.
+ * Automatically applies branding configuration to Button component.
+ *
+ * **자동 적용되는 branding**:
+ * - Primary 색상: `variant="default"`일 때 `bg-[var(--color-primary)]` 사용
+ * - Secondary 색상: `variant="secondary"`일 때 `bg-[var(--color-secondary)]` 사용
+ * - Accent 색상: `variant="outline"`일 때 `border-[var(--color-accent)]` 사용
+ *
+ * **Auto-applied branding**:
+ * - Primary color: Uses `bg-[var(--color-primary)]` when `variant="default"`
+ * - Secondary color: Uses `bg-[var(--color-secondary)]` when `variant="secondary"`
+ * - Accent color: Uses `border-[var(--color-accent)]` when `variant="outline"`
+ *
+ * **CSS 변수 방식의 장점**:
+ * - Tailwind의 JIT 컴파일러 최적화 활용
+ * - 인라인 스타일 없이 깔끔한 코드
+ * - 런타임에 동적으로 색상 변경 가능
+ *
+ * **Advantages of CSS variables**:
+ * - Leverages Tailwind's JIT compiler optimization
+ * - Clean code without inline styles
+ * - Dynamic color changes at runtime
+ *
+ * @example
+ * ```tsx
+ * // branding 설정이 있으면 자동으로 primary 색상 적용
+ * // Automatically applies primary color if branding is configured
+ * <BrandedButton variant="default">저장</BrandedButton>
+ *
+ * // branding이 없으면 기본 Button과 동일하게 동작
+ * // Works same as default Button if branding is not configured
+ * <BrandedButton variant="outline">취소</BrandedButton>
+ * ```
+ */
+type BrandedButtonProps = ComponentPropsWithoutRef<typeof Button>;
+export declare const BrandedButton: React.ForwardRefExoticComponent<BrandedButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=BrandedButton.d.ts.map

package/dist/framework/components/BrandedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandedButton.d.ts","sourceRoot":"","sources":["../../../src/framework/components/BrandedButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,EAAS,MAAM,cAAc,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,KAAK,kBAAkB,GAAG,wBAAwB,CAAC,OAAO,MAAM,CAAC,CAAC;AAElE,eAAO,MAAM,aAAa,kHAmCxB,CAAC"}

package/dist/framework/components/BrandedButton.js

@@ -0,0 +1,40 @@
+/**
+ * @hua-labs/hua-ux/framework - BrandedButton
+ *
+ * Button 컴포넌트에 branding을 자동으로 적용하는 wrapper
+ * Wrapper that automatically applies branding to Button component
+ *
+ * CSS 변수를 사용하여 Tailwind의 최적화를 활용합니다.
+ * Uses CSS variables to leverage Tailwind's optimization.
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button, merge } from '@hua-labs/ui';
+import { useBranding } from '../branding/context';
+export const BrandedButton = React.forwardRef((props, ref) => {
+    const { variant = 'default', className, ...restProps } = props;
+    const branding = useBranding();
+    // Branding 색상이 있으면 Tailwind arbitrary values 사용
+    // Use Tailwind arbitrary values if branding colors exist
+    let brandingClasses = '';
+    if (branding?.colors) {
+        if (variant === 'default' && branding.colors.primary) {
+            // Primary 색상을 배경으로 사용
+            // Use primary color as background
+            brandingClasses = 'bg-[var(--color-primary)] text-white border-[var(--color-primary)] hover:opacity-90';
+        }
+        else if (variant === 'secondary' && branding.colors.secondary) {
+            // Secondary 색상을 배경으로 사용
+            // Use secondary color as background
+            brandingClasses = 'bg-[var(--color-secondary)] text-white border-[var(--color-secondary)] hover:opacity-90';
+        }
+        else if (variant === 'outline' && branding.colors.accent) {
+            // Accent 색상을 테두리와 텍스트로 사용
+            // Use accent color for border and text
+            brandingClasses = 'border-[var(--color-accent)] text-[var(--color-accent)] bg-transparent hover:bg-[var(--color-accent)]/10';
+        }
+    }
+    return (_jsx(Button, { ref: ref, variant: variant, className: merge(brandingClasses, className), ...restProps }));
+});
+BrandedButton.displayName = 'BrandedButton';

package/dist/framework/components/BrandedCard.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @hua-labs/hua-ux/framework - BrandedCard
+ *
+ * Card 컴포넌트에 branding을 자동으로 적용하는 wrapper
+ * Wrapper that automatically applies branding to Card component
+ *
+ * CSS 변수를 사용하여 Tailwind의 최적화를 활용합니다.
+ * Uses CSS variables to leverage Tailwind's optimization.
+ */
+import React from 'react';
+import { type CardProps } from '@hua-labs/ui';
+/**
+ * BrandedCard Component
+ *
+ * Card 컴포넌트에 branding 설정을 자동으로 적용합니다.
+ * Automatically applies branding configuration to Card component.
+ *
+ * **자동 적용되는 branding**:
+ * - Accent 색상: `variant="outline"`일 때 `border-[var(--color-accent)]` 사용
+ * - Primary 색상: `variant="default"`일 때 `bg-[var(--color-primary)]/5` 사용
+ *
+ * **Auto-applied branding**:
+ * - Accent color: Uses `border-[var(--color-accent)]` when `variant="outline"`
+ * - Primary color: Uses `bg-[var(--color-primary)]/5` when `variant="default"`
+ *
+ * **CSS 변수 방식의 장점**:
+ * - Tailwind의 JIT 컴파일러 최적화 활용
+ * - 인라인 스타일 없이 깔끔한 코드
+ * - 런타임에 동적으로 색상 변경 가능
+ *
+ * **Advantages of CSS variables**:
+ * - Leverages Tailwind's JIT compiler optimization
+ * - Clean code without inline styles
+ * - Dynamic color changes at runtime
+ *
+ * @example
+ * ```tsx
+ * // branding 설정이 있으면 자동으로 색상 적용
+ * // Automatically applies colors if branding is configured
+ * <BrandedCard variant="outline">
+ *   <CardContent>내용</CardContent>
+ * </BrandedCard>
+ *
+ * // branding이 없으면 기본 Card와 동일하게 동작
+ * // Works same as default Card if branding is not configured
+ * <BrandedCard variant="elevated">
+ *   <CardContent>내용</CardContent>
+ * </BrandedCard>
+ * ```
+ */
+export declare const BrandedCard: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BrandedCard.d.ts.map

package/dist/framework/components/BrandedCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandedCard.d.ts","sourceRoot":"","sources":["../../../src/framework/components/BrandedCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,WAAW,kFA6BvB,CAAC"}