@pisodev/test-component-library 2.1.5 → 3.0.0

package/dist/components/Typography/H1/H1.web.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TypographyWebProps } from '../shared/Typography.base.types';
+export interface H1Props extends TypographyWebProps {
+}
+export declare const H1: React.FC<H1Props>;

package/dist/components/Typography/H1/index.web.d.ts

@@ -0,0 +1,2 @@
+export { H1 } from './H1.web';
+export type { H1Props } from './H1.web';

package/dist/components/Typography/index.web.d.ts

@@ -0,0 +1,2 @@
+export { H1 } from './H1/index.web';
+export type { H1Props } from './H1/index.web';

package/dist/components/Typography/shared/Typography.base.types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface TypographyBaseProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface TypographyWebProps extends TypographyBaseProps {
+    id?: string;
+}
+export interface TypographyNativeProps extends TypographyBaseProps {
+    testID?: string;
+}

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

@@ -0,0 +1 @@
+export * from './Typography/index.web';

package/dist/index.d.ts

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

package/dist/index.esm.js

@@ -1,10 +1,55 @@
-import React, { useState } from 'react';
+import React from 'react';
+
+const grayScale = {
+    light: {
+        '00': '#FFFFFF',
+        '50': '#F6F8FA',
+        '100': '#EEF0F2',
+        '200': '#E6E8EA',
+        '300': '#DADCDD',
+        '400': '#CED0D2',
+        '500': '#AAACAE',
+        '600': '#86888A',
+        '700': '#4C4E50',
+        '800': '#2C2E30',
+        '900': '#0C0E10',
+    },
+    dark: {
+        '00': '#0C0E10',
+        '50': '#1A1C1E',
+        '100': '#282A2C',
+        '200': '#36383A',
+        '300': '#444648',
+        '400': '#525456',
+        '500': '#66686A',
+        '600': '#888A8C',
+        '700': '#AAACAE',
+        '800': '#CCCED0',
+        '900': '#FFFFFF',
+    },
+};
+
+var colors_data = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    grayScale: grayScale
+});
+
+const lightColors = {
+    colors: {
+        gray: grayScale.light,
+    },
+};
+const darkColors = {
+    colors: {
+        gray: grayScale.dark,
+    },
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
-  if (!css || typeof document === 'undefined') { return; }
+  if (typeof document === 'undefined') { return; }
 
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
@@ -27,40 +72,14 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".Anchor-web-module_anchor__UIKbZ{color:var(--color-primary-600,#2196f3);cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-web-module_anchor__UIKbZ:hover{color:var(--color-primary-700,#1976d2);text-decoration:underline}.Anchor-web-module_anchor__UIKbZ:focus{outline:2px solid var(--color-primary-600,#2196f3);outline-offset:2px}.Anchor-web-module_anchor__UIKbZ:visited{color:var(--color-primary-800,#1565c0)}.Anchor-web-module_anchor__UIKbZ:active{color:var(--color-primary-900,#0d47a1)}";
-var styles$1 = {"anchor":"Anchor-web-module_anchor__UIKbZ"};
-styleInject(css_248z$1);
-
-const Anchor = ({ children, href, rel, title, target = '_self', className = '', onPress, }) => {
-    const anchorClasses = [styles$1.anchor, className].filter(Boolean).join(' ');
-    const handleClick = (e) => {
-        if (onPress) {
-            e.preventDefault();
-            onPress();
-        }
-    };
-    return (React.createElement("a", { href: href, rel: rel, title: title, target: target, className: anchorClasses, onClick: handleClick }, children));
-};
-
-var css_248z = ".Tooltip-module_tooltipWrapper__xyNaw{display:inline-block;position:relative}.Tooltip-module_tooltip__5JYjr{background-color:rgba(0,0,0,.8);border-radius:4px;color:#fff;font-size:14px;padding:8px 12px;pointer-events:none;position:absolute;white-space:nowrap;z-index:1000}.Tooltip-module_tooltip__5JYjr.Tooltip-module_top__ne8AY{bottom:100%;left:50%;margin-bottom:8px;transform:translateX(-50%)}.Tooltip-module_tooltip__5JYjr.Tooltip-module_bottom__euTWK{left:50%;margin-top:8px;top:100%;transform:translateX(-50%)}.Tooltip-module_tooltip__5JYjr.Tooltip-module_left__vrkh0{margin-right:8px;right:100%;top:50%;transform:translateY(-50%)}.Tooltip-module_tooltip__5JYjr.Tooltip-module_right__jZEpK{left:100%;margin-left:8px;top:50%;transform:translateY(-50%)}";
-var styles = {"tooltipWrapper":"Tooltip-module_tooltipWrapper__xyNaw","tooltip":"Tooltip-module_tooltip__5JYjr","top":"Tooltip-module_top__ne8AY","bottom":"Tooltip-module_bottom__euTWK","left":"Tooltip-module_left__vrkh0","right":"Tooltip-module_right__jZEpK"};
+var css_248z = ".H1-web-module_h1__jMWPY {\n  font-size: 32px;\n  font-weight: 700;\n  line-height: 40px;\n  letter-spacing: -0.5px;\n  margin: 0;\n  color: var(--gray-900);\n}";
+var styles = {"h1":"H1-web-module_h1__jMWPY"};
 styleInject(css_248z);
 
-const Tooltip = ({ children, content, position = 'top', }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    return (React.createElement("div", { className: styles.tooltipWrapper, onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false) },
-        children,
-        isVisible && (React.createElement("div", { className: `${styles.tooltip} ${styles[position]}` }, content))));
-};
-
-// 웹에서는 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;
+const H1 = ({ children, className = '', id }) => {
+    const h1Classes = [styles.h1, className].filter(Boolean).join(' ');
+    return (React.createElement("h1", { id: id, className: h1Classes }, children));
 };
 
-export { Anchor, StatusBar, Tooltip };
+export { H1, colors_data as colorScales, darkColors, lightColors };
 //# sourceMappingURL=index.esm.js.map

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/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]}
+{"version":3,"file":"index.esm.js","sources":["../src/theme/colors.data.ts","../src/theme/colors.ts","../../node_modules/style-inject/dist/style-inject.es.js","../src/components/Typography/H1/H1.web.tsx"],"sourcesContent":["export const grayScale = {\n  light: {\n    '00': '#FFFFFF',\n    '50': '#F6F8FA',\n    '100': '#EEF0F2',\n    '200': '#E6E8EA',\n    '300': '#DADCDD',\n    '400': '#CED0D2',\n    '500': '#AAACAE',\n    '600': '#86888A',\n    '700': '#4C4E50',\n    '800': '#2C2E30',\n    '900': '#0C0E10',\n  },\n  dark: {\n    '00': '#0C0E10',\n    '50': '#1A1C1E',\n    '100': '#282A2C',\n    '200': '#36383A',\n    '300': '#444648',\n    '400': '#525456',\n    '500': '#66686A',\n    '600': '#888A8C',\n    '700': '#AAACAE',\n    '800': '#CCCED0',\n    '900': '#FFFFFF',\n  },\n};\n","import { Theme } from './colors.types';\nimport * as colorScales from './colors.data'\n\nexport const lightColors: Theme = {\n  colors: {\n    gray: colorScales.grayScale.light,\n  },\n};\n\nexport const darkColors: Theme = {\n  colors: {\n    gray: colorScales.grayScale.dark,\n  },\n};\n","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 { TypographyWebProps } from '../shared/Typography.base.types';\nimport styles from './H1.web.module.scss';\n\nexport interface H1Props extends TypographyWebProps {}\n\nexport const H1: React.FC<H1Props> = ({ \n  children, \n  className = '', \n  id \n}) => {\n  const h1Classes = [styles.h1, className].filter(Boolean).join(' ');\n  \n  return (\n    <h1 id={id} className={h1Classes}>\n      {children}\n    </h1>\n  );\n};\n"],"names":["colorScales.grayScale"],"mappings":";;AAAO,MAAM,SAAS,GAAG;AACvB,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;CACF;;;;;;;ACxBM,MAAM,WAAW,GAAU;AAChC,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAEA,SAAqB,CAAC,KAAK;AAClC,KAAA;;AAGI,MAAM,UAAU,GAAU;AAC/B,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAEA,SAAqB,CAAC,IAAI;AACjC,KAAA;;;ACZH,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,IAAY,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;;;;;;ACnBO,MAAM,EAAE,GAAsB,CAAC,EACpC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,EAAE,EACH,KAAI;AACH,IAAA,MAAM,SAAS,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAElE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAA,EAC7B,QAAQ,CACN;AAET;;;;","x_google_ignoreList":[2]}

package/dist/index.js

@@ -2,11 +2,56 @@
 
 var React = require('react');
 
+const grayScale = {
+    light: {
+        '00': '#FFFFFF',
+        '50': '#F6F8FA',
+        '100': '#EEF0F2',
+        '200': '#E6E8EA',
+        '300': '#DADCDD',
+        '400': '#CED0D2',
+        '500': '#AAACAE',
+        '600': '#86888A',
+        '700': '#4C4E50',
+        '800': '#2C2E30',
+        '900': '#0C0E10',
+    },
+    dark: {
+        '00': '#0C0E10',
+        '50': '#1A1C1E',
+        '100': '#282A2C',
+        '200': '#36383A',
+        '300': '#444648',
+        '400': '#525456',
+        '500': '#66686A',
+        '600': '#888A8C',
+        '700': '#AAACAE',
+        '800': '#CCCED0',
+        '900': '#FFFFFF',
+    },
+};
+
+var colors_data = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    grayScale: grayScale
+});
+
+const lightColors = {
+    colors: {
+        gray: grayScale.light,
+    },
+};
+const darkColors = {
+    colors: {
+        gray: grayScale.dark,
+    },
+};
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
-  if (!css || typeof document === 'undefined') { return; }
+  if (typeof document === 'undefined') { return; }
 
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
@@ -29,42 +74,17 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = ".Anchor-web-module_anchor__UIKbZ{color:var(--color-primary-600,#2196f3);cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-web-module_anchor__UIKbZ:hover{color:var(--color-primary-700,#1976d2);text-decoration:underline}.Anchor-web-module_anchor__UIKbZ:focus{outline:2px solid var(--color-primary-600,#2196f3);outline-offset:2px}.Anchor-web-module_anchor__UIKbZ:visited{color:var(--color-primary-800,#1565c0)}.Anchor-web-module_anchor__UIKbZ:active{color:var(--color-primary-900,#0d47a1)}";
-var styles$1 = {"anchor":"Anchor-web-module_anchor__UIKbZ"};
-styleInject(css_248z$1);
-
-const Anchor = ({ children, href, rel, title, target = '_self', className = '', onPress, }) => {
-    const anchorClasses = [styles$1.anchor, className].filter(Boolean).join(' ');
-    const handleClick = (e) => {
-        if (onPress) {
-            e.preventDefault();
-            onPress();
-        }
-    };
-    return (React.createElement("a", { href: href, rel: rel, title: title, target: target, className: anchorClasses, onClick: handleClick }, children));
-};
-
-var css_248z = ".Tooltip-module_tooltipWrapper__xyNaw{display:inline-block;position:relative}.Tooltip-module_tooltip__5JYjr{background-color:rgba(0,0,0,.8);border-radius:4px;color:#fff;font-size:14px;padding:8px 12px;pointer-events:none;position:absolute;white-space:nowrap;z-index:1000}.Tooltip-module_tooltip__5JYjr.Tooltip-module_top__ne8AY{bottom:100%;left:50%;margin-bottom:8px;transform:translateX(-50%)}.Tooltip-module_tooltip__5JYjr.Tooltip-module_bottom__euTWK{left:50%;margin-top:8px;top:100%;transform:translateX(-50%)}.Tooltip-module_tooltip__5JYjr.Tooltip-module_left__vrkh0{margin-right:8px;right:100%;top:50%;transform:translateY(-50%)}.Tooltip-module_tooltip__5JYjr.Tooltip-module_right__jZEpK{left:100%;margin-left:8px;top:50%;transform:translateY(-50%)}";
-var styles = {"tooltipWrapper":"Tooltip-module_tooltipWrapper__xyNaw","tooltip":"Tooltip-module_tooltip__5JYjr","top":"Tooltip-module_top__ne8AY","bottom":"Tooltip-module_bottom__euTWK","left":"Tooltip-module_left__vrkh0","right":"Tooltip-module_right__jZEpK"};
+var css_248z = ".H1-web-module_h1__jMWPY {\n  font-size: 32px;\n  font-weight: 700;\n  line-height: 40px;\n  letter-spacing: -0.5px;\n  margin: 0;\n  color: var(--gray-900);\n}";
+var styles = {"h1":"H1-web-module_h1__jMWPY"};
 styleInject(css_248z);
 
-const Tooltip = ({ children, content, position = 'top', }) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    return (React.createElement("div", { className: styles.tooltipWrapper, onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false) },
-        children,
-        isVisible && (React.createElement("div", { className: `${styles.tooltip} ${styles[position]}` }, content))));
-};
-
-// 웹에서는 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;
+const H1 = ({ children, className = '', id }) => {
+    const h1Classes = [styles.h1, className].filter(Boolean).join(' ');
+    return (React.createElement("h1", { id: id, className: h1Classes }, children));
 };
 
-exports.Anchor = Anchor;
-exports.StatusBar = StatusBar;
-exports.Tooltip = Tooltip;
+exports.H1 = H1;
+exports.colorScales = colors_data;
+exports.darkColors = darkColors;
+exports.lightColors = lightColors;
 //# sourceMappingURL=index.js.map

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/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]}
+{"version":3,"file":"index.js","sources":["../src/theme/colors.data.ts","../src/theme/colors.ts","../../node_modules/style-inject/dist/style-inject.es.js","../src/components/Typography/H1/H1.web.tsx"],"sourcesContent":["export const grayScale = {\n  light: {\n    '00': '#FFFFFF',\n    '50': '#F6F8FA',\n    '100': '#EEF0F2',\n    '200': '#E6E8EA',\n    '300': '#DADCDD',\n    '400': '#CED0D2',\n    '500': '#AAACAE',\n    '600': '#86888A',\n    '700': '#4C4E50',\n    '800': '#2C2E30',\n    '900': '#0C0E10',\n  },\n  dark: {\n    '00': '#0C0E10',\n    '50': '#1A1C1E',\n    '100': '#282A2C',\n    '200': '#36383A',\n    '300': '#444648',\n    '400': '#525456',\n    '500': '#66686A',\n    '600': '#888A8C',\n    '700': '#AAACAE',\n    '800': '#CCCED0',\n    '900': '#FFFFFF',\n  },\n};\n","import { Theme } from './colors.types';\nimport * as colorScales from './colors.data'\n\nexport const lightColors: Theme = {\n  colors: {\n    gray: colorScales.grayScale.light,\n  },\n};\n\nexport const darkColors: Theme = {\n  colors: {\n    gray: colorScales.grayScale.dark,\n  },\n};\n","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 { TypographyWebProps } from '../shared/Typography.base.types';\nimport styles from './H1.web.module.scss';\n\nexport interface H1Props extends TypographyWebProps {}\n\nexport const H1: React.FC<H1Props> = ({ \n  children, \n  className = '', \n  id \n}) => {\n  const h1Classes = [styles.h1, className].filter(Boolean).join(' ');\n  \n  return (\n    <h1 id={id} className={h1Classes}>\n      {children}\n    </h1>\n  );\n};\n"],"names":["colorScales.grayScale"],"mappings":";;;;AAAO,MAAM,SAAS,GAAG;AACvB,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACD,IAAA,IAAI,EAAE;AACJ,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;CACF;;;;;;;ACxBM,MAAM,WAAW,GAAU;AAChC,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAEA,SAAqB,CAAC,KAAK;AAClC,KAAA;;AAGI,MAAM,UAAU,GAAU;AAC/B,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAEA,SAAqB,CAAC,IAAI;AACjC,KAAA;;;ACZH,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,IAAY,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;;;;;;ACnBO,MAAM,EAAE,GAAsB,CAAC,EACpC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,EAAE,EACH,KAAI;AACH,IAAA,MAAM,SAAS,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAElE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAA,EAC7B,QAAQ,CACN;AAET;;;;;;;","x_google_ignoreList":[2]}

package/dist/index.web.d.ts

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

package/dist/theme/build-colors.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme/colors.d.ts

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

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

@@ -0,0 +1,28 @@
+export declare const grayScale: {
+    light: {
+        '00': string;
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+    dark: {
+        '00': string;
+        '50': string;
+        '100': string;
+        '200': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '700': string;
+        '800': string;
+        '900': string;
+    };
+};

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

@@ -1,43 +1,19 @@
 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;
+    '00': string;
+    '50': string;
+    '100': string;
+    '200': string;
+    '300': string;
+    '400': string;
+    '500': string;
+    '600': string;
+    '700': string;
+    '800': string;
+    '900': string;
 }
 export interface Theme {
-    colors: ColorScale;
-    semantic: SemanticColors;
-    paper: PaperColors;
+    colors: {
+        gray: ColorScale;
+    };
 }
 export type ThemeMode = 'light' | 'dark';

package/dist/theme/index.d.ts

@@ -1,5 +1,3 @@
-export { ThemeProvider } from './ThemeProvider';
-export type { ThemeProviderProps } from './ThemeProvider';
-export { useTheme } from './useTheme';
-export { lightTheme, darkTheme } from './colors';
-export type { Theme, ThemeMode, ColorScale, SemanticColors, PaperColors } from './colors.types';
+export type { ColorScale, Theme, ThemeMode } from './colors.types';
+export { lightColors, darkColors } from './colors';
+export * as colorScales from './colors.data';

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@pisodev/test-component-library",
-  "version": "2.1.5",
+  "version": "3.0.0",
   "description": "웹과 React Native를 위한 컴포넌트 라이브러리",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "react-native": "components/index.ts",
+  "react-native": "src/index.ts",
   "files": [
     "dist",
-    "components"
+    "src"
   ],
   "scripts": {
-    "build": "npm run build:web",
+    "build:colors": "ts-node src/theme/build-colors.ts",
     "build:web": "rollup -c rollup.config.web.js",
-    "build:native": "tsc -p tsconfig.native.json",
-    "prepublishOnly": "npm run build"
+    "build": "npm run build:colors && npm run build:web"
   },
   "keywords": [
     "react",
@@ -42,6 +41,7 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
+    "@types/node": "^22.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.73.0",
@@ -53,6 +53,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "postcss": "^8.4.49",
     "sass": "^1.97.1",
+    "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"
   }

package/src/components/Typography/H1/H1.native.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { TypographyNativeProps } from '../shared/Typography.base.types';
+
+export interface H1Props extends TypographyNativeProps {}
+
+export const H1: React.FC<H1Props> = ({ 
+  children, 
+  testID 
+}) => {
+  return (
+    <Text style={styles.h1} testID={testID}>
+      {children}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  h1: {
+    fontSize: 32,
+    fontWeight: '700',
+    lineHeight: 40,
+    letterSpacing: -0.5,
+  },
+});

package/src/components/Typography/H1/H1.web.module.scss

@@ -0,0 +1,10 @@
+@use '../../../theme/colors' as *;
+
+.h1 {
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 40px;
+  letter-spacing: -0.5px;
+  margin: 0;
+  color: $gray-900;
+}

package/src/components/Typography/H1/H1.web.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TypographyWebProps } from '../shared/Typography.base.types';
+import styles from './H1.web.module.scss';
+
+export interface H1Props extends TypographyWebProps {}
+
+export const H1: React.FC<H1Props> = ({ 
+  children, 
+  className = '', 
+  id 
+}) => {
+  const h1Classes = [styles.h1, className].filter(Boolean).join(' ');
+  
+  return (
+    <h1 id={id} className={h1Classes}>
+      {children}
+    </h1>
+  );
+};

package/src/components/Typography/H1/index.ts

@@ -0,0 +1,2 @@
+export { H1 } from './H1.native';
+export type { H1Props } from './H1.native';

package/src/components/Typography/H1/index.web.ts

@@ -0,0 +1,2 @@
+export { H1 } from './H1.web';
+export type { H1Props } from './H1.web';

package/src/components/Typography/index.ts

@@ -0,0 +1,2 @@
+export { H1 } from './H1';
+export type { H1Props } from './H1';

package/src/components/Typography/index.web.ts

@@ -0,0 +1,2 @@
+export { H1 } from './H1/index.web';
+export type { H1Props } from './H1/index.web';

package/src/components/Typography/shared/Typography.base.types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+export interface TypographyBaseProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export interface TypographyWebProps extends TypographyBaseProps {
+  id?: string;
+}
+
+export interface TypographyNativeProps extends TypographyBaseProps {
+  testID?: string;
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Typography';

package/src/components/index.web.ts

@@ -0,0 +1 @@
+export * from './Typography/index.web';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './components';

package/src/index.web.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './components/index.web';

package/src/theme/_colors.scss

@@ -0,0 +1,41 @@
+// 이 파일은 자동 생성됩니다. 직접 수정하지 마세요.
+// build-colors.ts 스크립트로 생성됨
+
+// Gray Scale - Light
+$gray-50-light: #F6F8FA;
+$gray-100-light: #EEF0F2;
+$gray-200-light: #E6E8EA;
+$gray-300-light: #DADCDD;
+$gray-400-light: #CED0D2;
+$gray-500-light: #AAACAE;
+$gray-600-light: #86888A;
+$gray-700-light: #4C4E50;
+$gray-800-light: #2C2E30;
+$gray-900-light: #0C0E10;
+$gray-00-light: #FFFFFF;
+
+// Gray Scale - Dark
+$gray-50-dark: #1A1C1E;
+$gray-100-dark: #282A2C;
+$gray-200-dark: #36383A;
+$gray-300-dark: #444648;
+$gray-400-dark: #525456;
+$gray-500-dark: #66686A;
+$gray-600-dark: #888A8C;
+$gray-700-dark: #AAACAE;
+$gray-800-dark: #CCCED0;
+$gray-900-dark: #FFFFFF;
+$gray-00-dark: #0C0E10;
+
+// Default (CSS Variables 사용 - 테마 자동 전환)
+$gray-50: var(--gray-50);
+$gray-100: var(--gray-100);
+$gray-200: var(--gray-200);
+$gray-300: var(--gray-300);
+$gray-400: var(--gray-400);
+$gray-500: var(--gray-500);
+$gray-600: var(--gray-600);
+$gray-700: var(--gray-700);
+$gray-800: var(--gray-800);
+$gray-900: var(--gray-900);
+$gray-00: var(--gray-00);

package/{components → src}/theme/_index.scss

@@ -1 +1,2 @@
 @forward './colors';
+