@pisodev/test-component-library 2.0.1 → 2.1.0

package/components/Anchor/index.ts

@@ -1,2 +1,2 @@
-export { Anchor } from './Anchor';
+export { Anchor } from './Anchor.native';
 export type { AnchorProps } from './Anchor.types';

package/components/Anchor/index.web.ts

@@ -0,0 +1,2 @@
+export { Anchor } from './Anchor.web';
+export type { AnchorProps } from './Anchor.types';

package/components/index.web.ts

@@ -0,0 +1,8 @@
+// 크로스 플랫폼 컴포넌트
+export * from './Anchor/index.web';
+
+// 웹 전용 컴포넌트
+export * from './Tooltip';
+
+// React Native 전용 컴포넌트 (웹에서는 null 반환)
+export * from './StatusBar/index.web';

package/components/theme/ThemeContext.ts

@@ -0,0 +1,15 @@
+import { createContext } from 'react';
+import { Theme, ThemeMode } from './colors.types';
+import { lightTheme } from './colors';
+
+export interface ThemeContextType {
+  theme: Theme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: lightTheme,
+  mode: 'light',
+  setMode: () => {},
+});

package/components/theme/ThemeProvider.native.tsx

@@ -0,0 +1,36 @@
+import React, { useState, ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
+import { ThemeContext } from './ThemeContext';
+import { ThemeMode } from './colors.types';
+import { lightTheme, darkTheme } from './colors';
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  initialMode?: ThemeMode;
+  followSystem?: boolean;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialMode,
+  followSystem = true,
+}) => {
+  const systemColorScheme = useColorScheme();
+  const [manualMode, setManualMode] = useState<ThemeMode | null>(
+    initialMode || null
+  );
+
+  const mode =
+    manualMode || (followSystem && systemColorScheme) || 'light';
+  const theme = mode === 'light' ? lightTheme : darkTheme;
+
+  const setMode = (newMode: ThemeMode) => {
+    setManualMode(newMode);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, mode, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/components/theme/ThemeProvider.web.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, ReactNode } from 'react';
+import { ThemeContext } from './ThemeContext';
+import { ThemeMode } from './colors.types';
+import { lightTheme, darkTheme } from './colors';
+
+export interface ThemeProviderProps {
+  children: ReactNode;
+  initialMode?: ThemeMode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  initialMode = 'light',
+}) => {
+  const [mode, setMode] = useState<ThemeMode>(initialMode);
+  const theme = mode === 'light' ? lightTheme : darkTheme;
+
+  useEffect(() => {
+    // HTML 클래스 업데이트
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(mode);
+
+    // CSS Variables 업데이트
+    const root = document.documentElement;
+
+    // Gray colors
+    root.style.setProperty('--gray-50', theme.colors.gray[50]);
+    root.style.setProperty('--gray-100', theme.colors.gray[100]);
+    root.style.setProperty('--gray-200', theme.colors.gray[200]);
+    root.style.setProperty('--gray-400', theme.colors.gray[400]);
+    root.style.setProperty('--gray-600', theme.colors.gray[600]);
+    root.style.setProperty('--gray-800', theme.colors.gray[800]);
+    root.style.setProperty('--gray-900', theme.colors.gray[900]);
+
+    // Green colors
+    root.style.setProperty('--green-400', theme.colors.green[400]);
+    root.style.setProperty('--green-500', theme.colors.green[500]);
+    root.style.setProperty('--green-600', theme.colors.green[600]);
+
+    // Blue colors
+    root.style.setProperty('--blue-400', theme.colors.blue[400]);
+    root.style.setProperty('--blue-500', theme.colors.blue[500]);
+    root.style.setProperty('--blue-600', theme.colors.blue[600]);
+
+    // Red colors
+    root.style.setProperty('--red-400', theme.colors.red[400]);
+    root.style.setProperty('--red-500', theme.colors.red[500]);
+    root.style.setProperty('--red-600', theme.colors.red[600]);
+
+    // Semantic colors
+    root.style.setProperty('--color-info', theme.semantic.info);
+    root.style.setProperty('--color-success', theme.semantic.success);
+    root.style.setProperty('--color-error', theme.semantic.error);
+    root.style.setProperty('--color-warning', theme.semantic.warning);
+
+    // Paper colors
+    root.style.setProperty('--paper-default', theme.paper.default);
+    root.style.setProperty('--paper-neutral', theme.paper.neutral);
+    root.style.setProperty('--paper-dialog', theme.paper.dialog);
+  }, [mode, theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, mode, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/components/theme/colors.ts

@@ -0,0 +1,81 @@
+import { Theme } from './colors.types';
+
+export const lightTheme: Theme = {
+  colors: {
+    gray: {
+      50: '#F6F8FA',
+      100: '#EEF0F2',
+      200: '#E6E8EA',
+      400: '#CED0D2',
+      600: '#86888A',
+      800: '#2C2E30',
+      900: '#0C0E10',
+    },
+    green: {
+      400: '#18C792',
+      500: '#16B383',
+      600: '#12976F',
+    },
+    blue: {
+      400: '#1473FF',
+      500: '#1267E6',
+      600: '#0F57C2',
+    },
+    red: {
+      400: '#EB4242',
+      500: '#D43B3B',
+      600: '#B33232',
+    },
+  },
+  semantic: {
+    info: '#1473FF',
+    success: '#18C792',
+    error: '#EB4242',
+    warning: '#F0B800',
+  },
+  paper: {
+    default: '#FFFFFF',
+    neutral: '#F6F8FA',
+    dialog: '#FFFFFF',
+  },
+};
+
+export const darkTheme: Theme = {
+  colors: {
+    gray: {
+      50: '#1A1C1E',
+      100: '#282A2C',
+      200: '#36383A',
+      400: '#525456',
+      600: '#888A8C',
+      800: '#CCCED0',
+      900: '#FFFFFF',
+    },
+    green: {
+      400: '#1EEEAF',
+      500: '#54F2C2',
+      600: '#73F4CD',
+    },
+    blue: {
+      400: '#1473FF',
+      500: '#4C95FF',
+      600: '#6DA8FF',
+    },
+    red: {
+      400: '#FF4848',
+      500: '#FF7474',
+      600: '#FF8E8E',
+    },
+  },
+  semantic: {
+    info: '#1473FF',
+    success: '#1EEEAF',
+    error: '#FF4848',
+    warning: '#FFC400',
+  },
+  paper: {
+    default: '#0C0E10',
+    neutral: '#0C0E10',
+    dialog: '#1A1C1E',
+  },
+};

package/components/theme/colors.types.ts

@@ -0,0 +1,48 @@
+// 간소화된 컬러 타입 (예시용)
+export interface ColorScale {
+  gray: {
+    50: string;
+    100: string;
+    200: string;
+    400: string;
+    600: string;
+    800: string;
+    900: string;
+  };
+  green: {
+    400: string;
+    500: string;
+    600: string;
+  };
+  blue: {
+    400: string;
+    500: string;
+    600: string;
+  };
+  red: {
+    400: string;
+    500: string;
+    600: string;
+  };
+}
+
+export interface SemanticColors {
+  info: string;
+  success: string;
+  error: string;
+  warning: string;
+}
+
+export interface PaperColors {
+  default: string;
+  neutral: string;
+  dialog: string;
+}
+
+export interface Theme {
+  colors: ColorScale;
+  semantic: SemanticColors;
+  paper: PaperColors;
+}
+
+export type ThemeMode = 'light' | 'dark';

package/components/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.native';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/components/theme/index.web.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.web';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/components/theme/useTheme.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+};

package/dist/Anchor/index.d.ts

@@ -1,2 +1,2 @@
-export { Anchor } from './Anchor';
+export { Anchor } from './Anchor.native';
 export type { AnchorProps } from './Anchor.types';

package/dist/Anchor/index.web.d.ts

@@ -0,0 +1,2 @@
+export { Anchor } from './Anchor.web';
+export type { AnchorProps } from './Anchor.types';

package/dist/index.esm.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { StatusBar as StatusBar$1 } from 'react-native';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -54,8 +53,13 @@ const Tooltip = ({ children, content, position = 'top', }) => {
         isVisible && (React.createElement("div", { className: `${styles.tooltip} ${styles[position]}` }, content))));
 };
 
-const StatusBar = ({ barStyle = 'default', backgroundColor, hidden = false, }) => {
-    return (React.createElement(StatusBar$1, { barStyle: barStyle, backgroundColor: backgroundColor, hidden: hidden }));
+// 웹에서는 StatusBar 개념이 없음
+const StatusBar = (_props) => {
+    if (process.env.NODE_ENV === 'development') {
+        console.warn('StatusBar is only available on React Native. ' +
+            'For web, you can use <meta name="theme-color"> in your HTML.');
+    }
+    return null;
 };
 
 export { Anchor, StatusBar, Tooltip };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js","../components/Anchor/Anchor.web.tsx","../components/Tooltip/Tooltip.tsx","../components/StatusBar/StatusBar.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport { AnchorProps } from './Anchor.types';\nimport styles from './Anchor.web.module.scss';\n\nexport const Anchor: React.FC<AnchorProps> = ({\n  children,\n  href,\n  rel,\n  title,\n  target = '_self',\n  className = '',\n  onPress,\n}) => {\n  const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (onPress) {\n      e.preventDefault();\n      onPress();\n    }\n  };\n\n  return (\n    <a\n      href={href}\n      rel={rel}\n      title={title}\n      target={target}\n      className={anchorClasses}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n};\n","import React, { useState } from 'react';\nimport { TooltipProps } from './Tooltip.types';\nimport styles from './Tooltip.module.scss';\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n  children,\n  content,\n  position = 'top',\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div\n      className={styles.tooltipWrapper}\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n    >\n      {children}\n      {isVisible && (\n        <div className={`${styles.tooltip} ${styles[position]}`}>\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n","import React from 'react';\nimport { StatusBar as RNStatusBar } from 'react-native';\nimport { StatusBarProps } from './StatusBar.types';\n\nexport const StatusBar: React.FC<StatusBarProps> = ({\n  barStyle = 'default',\n  backgroundColor,\n  hidden = false,\n}) => {\n  return (\n    <RNStatusBar\n      barStyle={barStyle}\n      backgroundColor={backgroundColor}\n      hidden={hidden}\n    />\n  );\n};\n"],"names":["styles","RNStatusBar"],"mappings":";;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;ACrBO,MAAM,MAAM,GAA0B,CAAC,EAC5C,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,GAAG,OAAO,EAChB,SAAS,GAAG,EAAE,EACd,OAAO,GACR,KAAI;AACH,IAAA,MAAM,aAAa,GAAG,CAACA,QAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAE1E,IAAA,MAAM,WAAW,GAAG,CAAC,CAAsC,KAAI;QAC7D,IAAI,OAAO,EAAE;YACX,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,OAAO,EAAE;QACX;AACF,IAAA,CAAC;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EAAA,EAEnB,QAAQ,CACP;AAER;;;;;;AC9BO,MAAM,OAAO,GAA2B,CAAC,EAC9C,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,GACjB,KAAI;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEjD,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,cAAc,EAChC,YAAY,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EACtC,YAAY,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAA;QAEtC,QAAQ;QACR,SAAS,KACR,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,EAAG,MAAM,CAAC,OAAO,CAAA,CAAA,EAAI,MAAM,CAAC,QAAQ,CAAC,CAAA,CAAE,EAAA,EACpD,OAAO,CACJ,CACP,CACG;AAEV;;ACrBO,MAAM,SAAS,GAA6B,CAAC,EAClD,QAAQ,GAAG,SAAS,EACpB,eAAe,EACf,MAAM,GAAG,KAAK,GACf,KAAI;AACH,IAAA,QACE,KAAA,CAAA,aAAA,CAACC,WAAW,EAAA,EACV,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,MAAM,EAAE,MAAM,EAAA,CACd;AAEN;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.esm.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js","../components/Anchor/Anchor.web.tsx","../components/Tooltip/Tooltip.tsx","../components/StatusBar/index.web.ts"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport { AnchorProps } from './Anchor.types';\nimport styles from './Anchor.web.module.scss';\n\nexport const Anchor: React.FC<AnchorProps> = ({\n  children,\n  href,\n  rel,\n  title,\n  target = '_self',\n  className = '',\n  onPress,\n}) => {\n  const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (onPress) {\n      e.preventDefault();\n      onPress();\n    }\n  };\n\n  return (\n    <a\n      href={href}\n      rel={rel}\n      title={title}\n      target={target}\n      className={anchorClasses}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n};\n","import React, { useState } from 'react';\nimport { TooltipProps } from './Tooltip.types';\nimport styles from './Tooltip.module.scss';\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n  children,\n  content,\n  position = 'top',\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div\n      className={styles.tooltipWrapper}\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n    >\n      {children}\n      {isVisible && (\n        <div className={`${styles.tooltip} ${styles[position]}`}>\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n","import { StatusBarProps } from './StatusBar.types';\n\n// 웹에서는 StatusBar 개념이 없음\nexport const StatusBar = (_props: StatusBarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    console.warn(\n      'StatusBar is only available on React Native. ' +\n      'For web, you can use <meta name=\"theme-color\"> in your HTML.'\n    );\n  }\n  return null;\n};\n\nexport type { StatusBarProps };\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var reactNative = require('react-native');
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -56,8 +55,13 @@ const Tooltip = ({ children, content, position = 'top', }) => {
         isVisible && (React.createElement("div", { className: `${styles.tooltip} ${styles[position]}` }, content))));
 };
 
-const StatusBar = ({ barStyle = 'default', backgroundColor, hidden = false, }) => {
-    return (React.createElement(reactNative.StatusBar, { barStyle: barStyle, backgroundColor: backgroundColor, hidden: hidden }));
+// 웹에서는 StatusBar 개념이 없음
+const StatusBar = (_props) => {
+    if (process.env.NODE_ENV === 'development') {
+        console.warn('StatusBar is only available on React Native. ' +
+            'For web, you can use <meta name="theme-color"> in your HTML.');
+    }
+    return null;
 };
 
 exports.Anchor = Anchor;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js","../components/Anchor/Anchor.web.tsx","../components/Tooltip/Tooltip.tsx","../components/StatusBar/StatusBar.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport { AnchorProps } from './Anchor.types';\nimport styles from './Anchor.web.module.scss';\n\nexport const Anchor: React.FC<AnchorProps> = ({\n  children,\n  href,\n  rel,\n  title,\n  target = '_self',\n  className = '',\n  onPress,\n}) => {\n  const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (onPress) {\n      e.preventDefault();\n      onPress();\n    }\n  };\n\n  return (\n    <a\n      href={href}\n      rel={rel}\n      title={title}\n      target={target}\n      className={anchorClasses}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n};\n","import React, { useState } from 'react';\nimport { TooltipProps } from './Tooltip.types';\nimport styles from './Tooltip.module.scss';\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n  children,\n  content,\n  position = 'top',\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div\n      className={styles.tooltipWrapper}\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n    >\n      {children}\n      {isVisible && (\n        <div className={`${styles.tooltip} ${styles[position]}`}>\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n","import React from 'react';\nimport { StatusBar as RNStatusBar } from 'react-native';\nimport { StatusBarProps } from './StatusBar.types';\n\nexport const StatusBar: React.FC<StatusBarProps> = ({\n  barStyle = 'default',\n  backgroundColor,\n  hidden = false,\n}) => {\n  return (\n    <RNStatusBar\n      barStyle={barStyle}\n      backgroundColor={backgroundColor}\n      hidden={hidden}\n    />\n  );\n};\n"],"names":["styles","useState","RNStatusBar"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js","../components/Anchor/Anchor.web.tsx","../components/Tooltip/Tooltip.tsx","../components/StatusBar/index.web.ts"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport { AnchorProps } from './Anchor.types';\nimport styles from './Anchor.web.module.scss';\n\nexport const Anchor: React.FC<AnchorProps> = ({\n  children,\n  href,\n  rel,\n  title,\n  target = '_self',\n  className = '',\n  onPress,\n}) => {\n  const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (onPress) {\n      e.preventDefault();\n      onPress();\n    }\n  };\n\n  return (\n    <a\n      href={href}\n      rel={rel}\n      title={title}\n      target={target}\n      className={anchorClasses}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n};\n","import React, { useState } from 'react';\nimport { TooltipProps } from './Tooltip.types';\nimport styles from './Tooltip.module.scss';\n\nexport const Tooltip: React.FC<TooltipProps> = ({\n  children,\n  content,\n  position = 'top',\n}) => {\n  const [isVisible, setIsVisible] = useState(false);\n\n  return (\n    <div\n      className={styles.tooltipWrapper}\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n    >\n      {children}\n      {isVisible && (\n        <div className={`${styles.tooltip} ${styles[position]}`}>\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n","import { StatusBarProps } from './StatusBar.types';\n\n// 웹에서는 StatusBar 개념이 없음\nexport const StatusBar = (_props: StatusBarProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    console.warn(\n      'StatusBar is only available on React Native. ' +\n      'For web, you can use <meta name=\"theme-color\"> in your HTML.'\n    );\n  }\n  return null;\n};\n\nexport type { StatusBarProps };\n"],"names":["styles","useState"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.web.d.ts

@@ -0,0 +1,3 @@
+export * from './Anchor/index.web';
+export * from './Tooltip';
+export * from './StatusBar/index.web';

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,7 @@
+import { Theme, ThemeMode } from './colors.types';
+export interface ThemeContextType {
+    theme: Theme;
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextType>;

package/dist/theme/ThemeProvider.native.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { ThemeMode } from './colors.types';
+export interface ThemeProviderProps {
+    children: ReactNode;
+    initialMode?: ThemeMode;
+    followSystem?: boolean;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/theme/ThemeProvider.web.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { ThemeMode } from './colors.types';
+export interface ThemeProviderProps {
+    children: ReactNode;
+    initialMode?: ThemeMode;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/theme/colors.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from './colors.types';
+export declare const lightTheme: Theme;
+export declare const darkTheme: Theme;

package/dist/theme/colors.types.d.ts

@@ -0,0 +1,43 @@
+export interface ColorScale {
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        400: string;
+        600: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        400: string;
+        500: string;
+        600: string;
+    };
+    blue: {
+        400: string;
+        500: string;
+        600: string;
+    };
+    red: {
+        400: string;
+        500: string;
+        600: string;
+    };
+}
+export interface SemanticColors {
+    info: string;
+    success: string;
+    error: string;
+    warning: string;
+}
+export interface PaperColors {
+    default: string;
+    neutral: string;
+    dialog: string;
+}
+export interface Theme {
+    colors: ColorScale;
+    semantic: SemanticColors;
+    paper: PaperColors;
+}
+export type ThemeMode = 'light' | 'dark';

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.native';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/dist/theme/index.web.d.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider } from './ThemeProvider.web';
+export { useTheme } from './useTheme';
+export { lightTheme, darkTheme } from './colors';
+export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';

package/dist/theme/useTheme.d.ts

@@ -0,0 +1 @@
+export declare const useTheme: () => import("./ThemeContext").ThemeContextType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisodev/test-component-library",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "웹과 React Native를 위한 컴포넌트 라이브러리",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",