@scglab/admin-ui 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +210 -0
  2. package/dist/index.cjs +205 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +135 -0
  5. package/dist/index.d.ts +135 -0
  6. package/dist/index.js +169 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/styles/index.css +97 -0
  9. package/package.json +55 -0
package/README.md ADDED
@@ -0,0 +1,210 @@
1
+ # SCGLab Admin UI
2
+
3
+ React 기반 SCGLab 어드민 UI 컴포넌트 라이브러리
4
+
5
+ ## 📦 설치
6
+
7
+ ```bash
8
+ npm install @scglab/admin-ui
9
+ # or
10
+ yarn add @scglab/admin-ui
11
+ ```
12
+
13
+ ## 🚀 사용법
14
+
15
+ ### 기본 사용
16
+
17
+ ```tsx
18
+ import { Text } from '@scglab/admin-ui';
19
+ import '@scglab/admin-ui/styles';
20
+
21
+ function App() {
22
+ return (
23
+ <Text size="h1" color="primary" fontWeight="bold">
24
+ 안녕하세요
25
+ </Text>
26
+ );
27
+ }
28
+ ```
29
+
30
+ ### 스타일 Import
31
+
32
+ 글로벌 스타일과 Pretendard 폰트를 사용하려면 CSS를 import하세요:
33
+
34
+ ```tsx
35
+ // main.tsx 또는 App.tsx
36
+ import '@scglab/admin-ui/styles';
37
+ ```
38
+
39
+ ## ✨ 특징
40
+
41
+ - ✅ **Zero Dependencies**: 스타일 의존성 없음 (Tailwind, styled-components 등 불필요)
42
+ - ✅ **TypeScript**: 완전한 타입 지원
43
+ - ✅ **Tree-shakeable**: 사용한 컴포넌트만 번들에 포함
44
+ - ✅ **Customizable**: 모든 props를 통한 커스터마이징 지원
45
+ - ✅ **Theme System**: 일관된 디자인을 위한 테마 시스템 제공
46
+
47
+ ## 📚 컴포넌트
48
+
49
+ ### Text
50
+
51
+ 텍스트를 표시하는 기본 컴포넌트입니다.
52
+
53
+ #### Props
54
+
55
+ | Prop | Type | Default | Description |
56
+ |------|------|---------|-------------|
57
+ | `size` | `FontSizeType` | `'body16'` | 텍스트 크기 (h1~h6, body10~body18) |
58
+ | `color` | `ColorType` | `'black'` | 텍스트 색상 |
59
+ | `fontWeight` | `FontWeightType` | `'regular'` | 폰트 두께 (regular, semibold, bold) |
60
+ | `justify` | `JustifyType` | - | 수평 정렬 |
61
+ | `align` | `AlignType` | - | 수직 정렬 |
62
+ | `textDecoration` | `'none' \| 'underline' \| 'line-through'` | `'none'` | 텍스트 장식 |
63
+ | `children` | `ReactNode` | - | 표시할 텍스트 또는 요소 |
64
+ | `className` | `string` | - | 추가 CSS 클래스 |
65
+
66
+ #### 예제
67
+
68
+ ```tsx
69
+ import { Text } from '@scglab/admin-ui';
70
+
71
+ // 제목
72
+ <Text size="h1" color="primary" fontWeight="bold">
73
+ 페이지 제목
74
+ </Text>
75
+
76
+ // 본문
77
+ <Text size="body16" color="text">
78
+ 본문 내용입니다.
79
+ </Text>
80
+
81
+ // 링크 스타일
82
+ <Text size="body14" color="primary" textDecoration="underline">
83
+ 링크 텍스트
84
+ </Text>
85
+
86
+ // 정렬
87
+ <Text size="body16" justify="center" align="center">
88
+ 중앙 정렬 텍스트
89
+ </Text>
90
+ ```
91
+
92
+ ## 🎨 테마 시스템
93
+
94
+ 테마 상수와 타입을 직접 import하여 사용할 수 있습니다.
95
+
96
+ ### 사용 가능한 Export
97
+
98
+ ```tsx
99
+ import {
100
+ // 색상
101
+ colors,
102
+
103
+ // 폰트 크기
104
+ fontSize,
105
+ lineHeightSize,
106
+
107
+ // 폰트 두께
108
+ fontWeight,
109
+
110
+ // 레이아웃
111
+ directions,
112
+ justifies,
113
+ justifySelfs,
114
+ aligns,
115
+ alignSelfs,
116
+
117
+ // 타입
118
+ type ColorType,
119
+ type FontSizeType,
120
+ type FontWeightType,
121
+ type DirectionType,
122
+ type JustifyType,
123
+ type JustifySelfType,
124
+ type AlignType,
125
+ type AlignSelfType,
126
+ } from '@scglab/admin-ui';
127
+ ```
128
+
129
+ ### 색상 팔레트
130
+
131
+ ```tsx
132
+ import { colors } from '@scglab/admin-ui';
133
+
134
+ // Primary 색상
135
+ colors.primary // #3083FF
136
+ colors.primary10 // #EAF3FF
137
+ colors.primary5 // #F5F9FF
138
+ colors.primary3 // #F9FBFF
139
+
140
+ // Secondary 색상
141
+ colors.secondary // #18FF82
142
+
143
+ // Text 색상
144
+ colors.primaryText // #111928
145
+ colors.text // #637381
146
+ colors.textLight // #F3F4F6
147
+
148
+ // Status 색상
149
+ colors.green // #016630
150
+ colors.red // #9F0712
151
+ colors.orange // #9F2D00
152
+ colors.blue // #193CB8
153
+ colors.warning // #F15050
154
+
155
+ // Grayscale
156
+ colors.gray1 // #F9FAFB
157
+ colors.gray2 // #F3F4F6
158
+ colors.gray3 // #E5E7EB
159
+ colors.dark2 // #1F2A37
160
+ colors.dark3 // #374151
161
+ ```
162
+
163
+ ### 폰트 크기
164
+
165
+ ```tsx
166
+ import { fontSize } from '@scglab/admin-ui';
167
+
168
+ // Heading 크기 (rem 단위)
169
+ fontSize.h1 // 4.286rem (60px)
170
+ fontSize.h2 // 3.429rem (48px)
171
+ fontSize.h3 // 2.857rem (40px)
172
+ fontSize.h4 // 2.143rem (30px)
173
+ fontSize.h5 // 2rem (28px)
174
+ fontSize.h6 // 1.714rem (24px)
175
+
176
+ // Body 크기 (rem 단위)
177
+ fontSize.body18 // 1.286rem (18px)
178
+ fontSize.body16 // 1.143rem (16px)
179
+ fontSize.body14 // 1rem (14px)
180
+ fontSize.body12 // 0.857rem (12px)
181
+ fontSize.body10 // 0.714rem (10px)
182
+ ```
183
+
184
+ ## 🛠 개발
185
+
186
+ ### Storybook 실행
187
+
188
+ ```bash
189
+ npm run sb
190
+ # or
191
+ yarn sb
192
+ ```
193
+
194
+ ### 빌드
195
+
196
+ ```bash
197
+ npm run build
198
+ # or
199
+ yarn build
200
+ ```
201
+
202
+ 빌드 결과물:
203
+ - `dist/index.js` - CommonJS 번들
204
+ - `dist/index.mjs` - ES Module 번들
205
+ - `dist/index.d.ts` - TypeScript 타입 정의
206
+ - `dist/styles/index.css` - 스타일 파일
207
+
208
+ ## 📝 라이센스
209
+
210
+ MIT © SCGLab
package/dist/index.cjs ADDED
@@ -0,0 +1,205 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var index_exports = {};
22
+ __export(index_exports, {
23
+ Text: () => Text,
24
+ alignSelfs: () => alignSelfs,
25
+ aligns: () => aligns,
26
+ colors: () => colors,
27
+ directions: () => directions,
28
+ fontSize: () => fontSize,
29
+ fontWeight: () => fontWeight,
30
+ justifies: () => justifies,
31
+ justifySelfs: () => justifySelfs,
32
+ lineHeightSize: () => lineHeightSize
33
+ });
34
+ module.exports = __toCommonJS(index_exports);
35
+
36
+ // src/theme/index.ts
37
+ var toRemFunction = (value) => `${value / 14}rem`;
38
+ var fontSize = {
39
+ h1: toRemFunction(60),
40
+ h2: toRemFunction(48),
41
+ h3: toRemFunction(40),
42
+ h4: toRemFunction(30),
43
+ h5: toRemFunction(28),
44
+ h6: toRemFunction(24),
45
+ body18: toRemFunction(18),
46
+ body16: toRemFunction(16),
47
+ body14: toRemFunction(14),
48
+ body12: toRemFunction(12),
49
+ body10: toRemFunction(10)
50
+ };
51
+ var lineHeightSize = {
52
+ h1: toRemFunction(60),
53
+ h2: toRemFunction(48),
54
+ h3: toRemFunction(40),
55
+ h4: toRemFunction(40),
56
+ h5: toRemFunction(40),
57
+ h6: toRemFunction(40),
58
+ body18: toRemFunction(24),
59
+ body16: toRemFunction(24),
60
+ body14: toRemFunction(22),
61
+ body12: toRemFunction(18),
62
+ body10: toRemFunction(14)
63
+ };
64
+ var colors = {
65
+ white: "#ffffff",
66
+ black: "#000000",
67
+ gray: "#6B7280",
68
+ primary: "#3083FF",
69
+ // 기본 primary 색상
70
+ primary10: "#EAF3FF",
71
+ primary5: "#F5F9FF",
72
+ primary3: "#F9FBFF",
73
+ primary3Border: "#3083FF4D",
74
+ primaryText: "#111928",
75
+ text: "#637381",
76
+ textLight: "#F3F4F6",
77
+ secondary: "#18FF82",
78
+ // 기본 secondary 색상
79
+ secondaryText: "#8899A8",
80
+ stroke: "#DFE4EA",
81
+ line: "#E7ECF3",
82
+ dark2: "#1F2A37",
83
+ dark3: "#374151",
84
+ dark4: "#4B5563",
85
+ dark5: "#6B7280",
86
+ dark6: "#9CA3AF",
87
+ dark7: "#D1D5DB",
88
+ dark8: "#E5E7EB",
89
+ gray1: "#F9FAFB",
90
+ gray2: "#F3F4F6",
91
+ gray3: "#E5E7EB",
92
+ gray4: "#DEE2E6",
93
+ gray5: "#CED4DA",
94
+ gray6: "#CED4DA",
95
+ gray7: "#CED4DA",
96
+ green: "#016630",
97
+ greenLight: "#DCFCE7",
98
+ red: "#9F0712",
99
+ red5: "#FEF6F6",
100
+ redLight: "#FFE2E2",
101
+ orange: "#9F2D00",
102
+ orangeLight: "#FFEDD4",
103
+ blue: "#193CB8",
104
+ blueLight: "#DBEAFE",
105
+ warning: "#F15050",
106
+ warningLight: "#FEF6F6"
107
+ };
108
+ var fontWeight = {
109
+ regular: "400",
110
+ semibold: "500",
111
+ bold: "600"
112
+ };
113
+ var directions = {
114
+ row: "flex-row",
115
+ col: "flex-col",
116
+ grid: "grid"
117
+ };
118
+ var justifies = {
119
+ start: "justify-start",
120
+ center: "justify-center",
121
+ end: "justify-end",
122
+ between: "justify-between",
123
+ around: "justify-around",
124
+ evenly: "justify-evenly"
125
+ };
126
+ var justifySelfs = {
127
+ start: "justify-self-start",
128
+ center: "justify-self-center",
129
+ end: "justify-self-end",
130
+ stretch: "justify-self-stretch"
131
+ };
132
+ var aligns = {
133
+ baseline: "items-baseline",
134
+ start: "items-start",
135
+ center: "items-center",
136
+ end: "items-end",
137
+ stretch: "items-stretch"
138
+ };
139
+ var alignSelfs = {
140
+ baseline: "self-baseline",
141
+ auto: "self-auto",
142
+ start: "self-start",
143
+ center: "self-center",
144
+ end: "self-end",
145
+ stretch: "self-stretch"
146
+ };
147
+
148
+ // src/components/ui/Text/Text.tsx
149
+ var import_jsx_runtime = require("react/jsx-runtime");
150
+ var justifyContentMap = {
151
+ start: "flex-start",
152
+ center: "center",
153
+ end: "flex-end",
154
+ between: "space-between",
155
+ around: "space-around",
156
+ evenly: "space-evenly"
157
+ };
158
+ var alignItemsMap = {
159
+ baseline: "baseline",
160
+ start: "flex-start",
161
+ center: "center",
162
+ end: "flex-end",
163
+ stretch: "stretch"
164
+ };
165
+ function Text({
166
+ id,
167
+ children,
168
+ size = "body14",
169
+ color = "primaryText",
170
+ justify = "start",
171
+ align = "start",
172
+ className = "",
173
+ fontWeight: fontWeightProp = "regular",
174
+ textDecoration = "none",
175
+ style,
176
+ ...props
177
+ }) {
178
+ const styles = {
179
+ fontSize: fontSize[size],
180
+ lineHeight: lineHeightSize[size],
181
+ fontWeight: fontWeight[fontWeightProp],
182
+ color: colors[color],
183
+ display: "flex",
184
+ justifyContent: justifyContentMap[justify],
185
+ alignItems: alignItemsMap[align],
186
+ textDecoration,
187
+ ...style
188
+ // 사용자 정의 style을 마지막에 배치하여 오버라이드 가능하게
189
+ };
190
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id, style: styles, className, ...props, children });
191
+ }
192
+ // Annotate the CommonJS export names for ESM import in node:
193
+ 0 && (module.exports = {
194
+ Text,
195
+ alignSelfs,
196
+ aligns,
197
+ colors,
198
+ directions,
199
+ fontSize,
200
+ fontWeight,
201
+ justifies,
202
+ justifySelfs,
203
+ lineHeightSize
204
+ });
205
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/theme/index.ts","../src/components/ui/Text/Text.tsx"],"sourcesContent":["// Components\nexport { Text } from './components/ui/Text';\nexport type { TextProps } from './components/ui/Text';\n\n// Theme - 테마 상수와 타입들을 모두 export\nexport * from './theme';","// import { toRemFunction } from \"@/utils/helperUtils\";\nconst toRemFunction = (value: number) => `${value / 14}rem`;\nexport const fontSize = {\n h1: toRemFunction(60),\n h2: toRemFunction(48),\n h3: toRemFunction(40),\n h4: toRemFunction(30),\n h5: toRemFunction(28),\n h6: toRemFunction(24),\n body18: toRemFunction(18),\n body16: toRemFunction(16),\n body14: toRemFunction(14),\n body12: toRemFunction(12),\n body10: toRemFunction(10),\n};\nexport const lineHeightSize = {\n h1: toRemFunction(60),\n h2: toRemFunction(48),\n h3: toRemFunction(40),\n h4: toRemFunction(40),\n h5: toRemFunction(40),\n h6: toRemFunction(40),\n body18: toRemFunction(24),\n body16: toRemFunction(24),\n body14: toRemFunction(22),\n body12: toRemFunction(18),\n body10: toRemFunction(14),\n};\n\nexport const colors = {\n white: \"#ffffff\",\n black: \"#000000\",\n gray: \"#6B7280\",\n primary: \"#3083FF\", // 기본 primary 색상\n primary10: \"#EAF3FF\",\n primary5: \"#F5F9FF\",\n primary3: \"#F9FBFF\",\n primary3Border: \"#3083FF4D\",\n primaryText: \"#111928\",\n text: \"#637381\",\n textLight: \"#F3F4F6\",\n secondary: \"#18FF82\", // 기본 secondary 색상\n secondaryText: \"#8899A8\",\n stroke: \"#DFE4EA\",\n line: \"#E7ECF3\",\n dark2: \"#1F2A37\",\n dark3: \"#374151\",\n dark4: \"#4B5563\",\n dark5: \"#6B7280\",\n dark6: \"#9CA3AF\",\n dark7: \"#D1D5DB\",\n dark8: \"#E5E7EB\",\n gray1: \"#F9FAFB\",\n gray2: \"#F3F4F6\",\n gray3: \"#E5E7EB\",\n gray4: \"#DEE2E6\",\n gray5: \"#CED4DA\",\n gray6: \"#CED4DA\",\n gray7: \"#CED4DA\",\n green: \"#016630\",\n greenLight: \"#DCFCE7\",\n red: \"#9F0712\",\n red5: \"#FEF6F6\",\n redLight: \"#FFE2E2\",\n orange: \"#9F2D00\",\n orangeLight: \"#FFEDD4\",\n blue: \"#193CB8\",\n blueLight: \"#DBEAFE\",\n warning: \"#F15050\",\n warningLight: \"#FEF6F6\",\n} as const;\n\nexport const fontWeight = {\n regular: \"400\",\n semibold: \"500\",\n bold: \"600\",\n} as const;\n\nexport const directions = {\n row: \"flex-row\",\n col: \"flex-col\",\n grid: \"grid\",\n} as const;\n\nexport const justifies = {\n start: \"justify-start\",\n center: \"justify-center\",\n end: \"justify-end\",\n between: \"justify-between\",\n around: \"justify-around\",\n evenly: \"justify-evenly\",\n} as const;\n\nexport const justifySelfs = {\n start: \"justify-self-start\",\n center: \"justify-self-center\",\n end: \"justify-self-end\",\n stretch: \"justify-self-stretch\",\n} as const;\n\nexport const aligns = {\n baseline: \"items-baseline\",\n start: \"items-start\",\n center: \"items-center\",\n end: \"items-end\",\n stretch: \"items-stretch\",\n} as const;\n\nexport const alignSelfs = {\n baseline: \"self-baseline\",\n auto: \"self-auto\",\n start: \"self-start\",\n center: \"self-center\",\n end: \"self-end\",\n stretch: \"self-stretch\",\n} as const;\n\nexport type ButtonVariantType =\n | \"primary\"\n | \"secondary\"\n | \"lower\"\n | \"neutral\"\n | \"neutralGray\"\n | \"danger\"\n | \"blue\"\n | \"orange\"\n | \"green\";\n\nexport type ColorType = keyof typeof colors;\nexport type FontSizeType = keyof typeof fontSize;\nexport type FontWeightType = keyof typeof fontWeight;\nexport type DirectionType = keyof typeof directions;\nexport type JustifyType = keyof typeof justifies;\nexport type JustifySelfType = keyof typeof justifySelfs;\nexport type AlignType = keyof typeof aligns;\nexport type AlignSelfType = keyof typeof alignSelfs;\n","import React from \"react\";\nimport {\n AlignType,\n JustifyType,\n ColorType,\n FontSizeType,\n fontSize,\n FontWeightType,\n fontWeight,\n lineHeightSize,\n colors,\n} from \"../../../theme\";\n\n// Tailwind 클래스명을 CSS 속성값으로 매핑\nconst justifyContentMap: Record<JustifyType, React.CSSProperties['justifyContent']> = {\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n between: \"space-between\",\n around: \"space-around\",\n evenly: \"space-evenly\",\n};\n\nconst alignItemsMap: Record<AlignType, React.CSSProperties['alignItems']> = {\n baseline: \"baseline\",\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n stretch: \"stretch\",\n};\n\nexport interface TextProps extends React.HTMLAttributes<HTMLDivElement> {\n id?: string;\n children: React.ReactNode;\n size?: FontSizeType;\n color?: ColorType;\n className?: string;\n fontWeight?: FontWeightType;\n justify?: JustifyType;\n align?: AlignType;\n textDecoration?: \"none\" | \"underline\" | \"line-through\";\n style?: React.CSSProperties;\n}\n\nexport default function Text({\n id,\n children,\n size = \"body14\",\n color = \"primaryText\",\n justify = \"start\",\n align = \"start\",\n className = \"\",\n fontWeight: fontWeightProp = \"regular\",\n textDecoration = \"none\",\n style,\n ...props\n}: TextProps) {\n const styles: React.CSSProperties = {\n fontSize: fontSize[size],\n lineHeight: lineHeightSize[size],\n fontWeight: fontWeight[fontWeightProp],\n color: colors[color],\n display: \"flex\",\n justifyContent: justifyContentMap[justify],\n alignItems: alignItemsMap[align],\n textDecoration,\n ...style, // 사용자 정의 style을 마지막에 배치하여 오버라이드 가능하게\n };\n\n return (\n <div id={id} style={styles} className={className} {...props}>\n {children}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,135 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+
4
+ declare const fontSize: {
5
+ h1: string;
6
+ h2: string;
7
+ h3: string;
8
+ h4: string;
9
+ h5: string;
10
+ h6: string;
11
+ body18: string;
12
+ body16: string;
13
+ body14: string;
14
+ body12: string;
15
+ body10: string;
16
+ };
17
+ declare const lineHeightSize: {
18
+ h1: string;
19
+ h2: string;
20
+ h3: string;
21
+ h4: string;
22
+ h5: string;
23
+ h6: string;
24
+ body18: string;
25
+ body16: string;
26
+ body14: string;
27
+ body12: string;
28
+ body10: string;
29
+ };
30
+ declare const colors: {
31
+ readonly white: "#ffffff";
32
+ readonly black: "#000000";
33
+ readonly gray: "#6B7280";
34
+ readonly primary: "#3083FF";
35
+ readonly primary10: "#EAF3FF";
36
+ readonly primary5: "#F5F9FF";
37
+ readonly primary3: "#F9FBFF";
38
+ readonly primary3Border: "#3083FF4D";
39
+ readonly primaryText: "#111928";
40
+ readonly text: "#637381";
41
+ readonly textLight: "#F3F4F6";
42
+ readonly secondary: "#18FF82";
43
+ readonly secondaryText: "#8899A8";
44
+ readonly stroke: "#DFE4EA";
45
+ readonly line: "#E7ECF3";
46
+ readonly dark2: "#1F2A37";
47
+ readonly dark3: "#374151";
48
+ readonly dark4: "#4B5563";
49
+ readonly dark5: "#6B7280";
50
+ readonly dark6: "#9CA3AF";
51
+ readonly dark7: "#D1D5DB";
52
+ readonly dark8: "#E5E7EB";
53
+ readonly gray1: "#F9FAFB";
54
+ readonly gray2: "#F3F4F6";
55
+ readonly gray3: "#E5E7EB";
56
+ readonly gray4: "#DEE2E6";
57
+ readonly gray5: "#CED4DA";
58
+ readonly gray6: "#CED4DA";
59
+ readonly gray7: "#CED4DA";
60
+ readonly green: "#016630";
61
+ readonly greenLight: "#DCFCE7";
62
+ readonly red: "#9F0712";
63
+ readonly red5: "#FEF6F6";
64
+ readonly redLight: "#FFE2E2";
65
+ readonly orange: "#9F2D00";
66
+ readonly orangeLight: "#FFEDD4";
67
+ readonly blue: "#193CB8";
68
+ readonly blueLight: "#DBEAFE";
69
+ readonly warning: "#F15050";
70
+ readonly warningLight: "#FEF6F6";
71
+ };
72
+ declare const fontWeight: {
73
+ readonly regular: "400";
74
+ readonly semibold: "500";
75
+ readonly bold: "600";
76
+ };
77
+ declare const directions: {
78
+ readonly row: "flex-row";
79
+ readonly col: "flex-col";
80
+ readonly grid: "grid";
81
+ };
82
+ declare const justifies: {
83
+ readonly start: "justify-start";
84
+ readonly center: "justify-center";
85
+ readonly end: "justify-end";
86
+ readonly between: "justify-between";
87
+ readonly around: "justify-around";
88
+ readonly evenly: "justify-evenly";
89
+ };
90
+ declare const justifySelfs: {
91
+ readonly start: "justify-self-start";
92
+ readonly center: "justify-self-center";
93
+ readonly end: "justify-self-end";
94
+ readonly stretch: "justify-self-stretch";
95
+ };
96
+ declare const aligns: {
97
+ readonly baseline: "items-baseline";
98
+ readonly start: "items-start";
99
+ readonly center: "items-center";
100
+ readonly end: "items-end";
101
+ readonly stretch: "items-stretch";
102
+ };
103
+ declare const alignSelfs: {
104
+ readonly baseline: "self-baseline";
105
+ readonly auto: "self-auto";
106
+ readonly start: "self-start";
107
+ readonly center: "self-center";
108
+ readonly end: "self-end";
109
+ readonly stretch: "self-stretch";
110
+ };
111
+ type ButtonVariantType = "primary" | "secondary" | "lower" | "neutral" | "neutralGray" | "danger" | "blue" | "orange" | "green";
112
+ type ColorType = keyof typeof colors;
113
+ type FontSizeType = keyof typeof fontSize;
114
+ type FontWeightType = keyof typeof fontWeight;
115
+ type DirectionType = keyof typeof directions;
116
+ type JustifyType = keyof typeof justifies;
117
+ type JustifySelfType = keyof typeof justifySelfs;
118
+ type AlignType = keyof typeof aligns;
119
+ type AlignSelfType = keyof typeof alignSelfs;
120
+
121
+ interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
122
+ id?: string;
123
+ children: React.ReactNode;
124
+ size?: FontSizeType;
125
+ color?: ColorType;
126
+ className?: string;
127
+ fontWeight?: FontWeightType;
128
+ justify?: JustifyType;
129
+ align?: AlignType;
130
+ textDecoration?: "none" | "underline" | "line-through";
131
+ style?: React.CSSProperties;
132
+ }
133
+ declare function Text({ id, children, size, color, justify, align, className, fontWeight: fontWeightProp, textDecoration, style, ...props }: TextProps): react_jsx_runtime.JSX.Element;
134
+
135
+ export { type AlignSelfType, type AlignType, type ButtonVariantType, type ColorType, type DirectionType, type FontSizeType, type FontWeightType, type JustifySelfType, type JustifyType, Text, type TextProps, alignSelfs, aligns, colors, directions, fontSize, fontWeight, justifies, justifySelfs, lineHeightSize };
package/dist/index.d.ts ADDED
@@ -0,0 +1,135 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+
4
+ declare const fontSize: {
5
+ h1: string;
6
+ h2: string;
7
+ h3: string;
8
+ h4: string;
9
+ h5: string;
10
+ h6: string;
11
+ body18: string;
12
+ body16: string;
13
+ body14: string;
14
+ body12: string;
15
+ body10: string;
16
+ };
17
+ declare const lineHeightSize: {
18
+ h1: string;
19
+ h2: string;
20
+ h3: string;
21
+ h4: string;
22
+ h5: string;
23
+ h6: string;
24
+ body18: string;
25
+ body16: string;
26
+ body14: string;
27
+ body12: string;
28
+ body10: string;
29
+ };
30
+ declare const colors: {
31
+ readonly white: "#ffffff";
32
+ readonly black: "#000000";
33
+ readonly gray: "#6B7280";
34
+ readonly primary: "#3083FF";
35
+ readonly primary10: "#EAF3FF";
36
+ readonly primary5: "#F5F9FF";
37
+ readonly primary3: "#F9FBFF";
38
+ readonly primary3Border: "#3083FF4D";
39
+ readonly primaryText: "#111928";
40
+ readonly text: "#637381";
41
+ readonly textLight: "#F3F4F6";
42
+ readonly secondary: "#18FF82";
43
+ readonly secondaryText: "#8899A8";
44
+ readonly stroke: "#DFE4EA";
45
+ readonly line: "#E7ECF3";
46
+ readonly dark2: "#1F2A37";
47
+ readonly dark3: "#374151";
48
+ readonly dark4: "#4B5563";
49
+ readonly dark5: "#6B7280";
50
+ readonly dark6: "#9CA3AF";
51
+ readonly dark7: "#D1D5DB";
52
+ readonly dark8: "#E5E7EB";
53
+ readonly gray1: "#F9FAFB";
54
+ readonly gray2: "#F3F4F6";
55
+ readonly gray3: "#E5E7EB";
56
+ readonly gray4: "#DEE2E6";
57
+ readonly gray5: "#CED4DA";
58
+ readonly gray6: "#CED4DA";
59
+ readonly gray7: "#CED4DA";
60
+ readonly green: "#016630";
61
+ readonly greenLight: "#DCFCE7";
62
+ readonly red: "#9F0712";
63
+ readonly red5: "#FEF6F6";
64
+ readonly redLight: "#FFE2E2";
65
+ readonly orange: "#9F2D00";
66
+ readonly orangeLight: "#FFEDD4";
67
+ readonly blue: "#193CB8";
68
+ readonly blueLight: "#DBEAFE";
69
+ readonly warning: "#F15050";
70
+ readonly warningLight: "#FEF6F6";
71
+ };
72
+ declare const fontWeight: {
73
+ readonly regular: "400";
74
+ readonly semibold: "500";
75
+ readonly bold: "600";
76
+ };
77
+ declare const directions: {
78
+ readonly row: "flex-row";
79
+ readonly col: "flex-col";
80
+ readonly grid: "grid";
81
+ };
82
+ declare const justifies: {
83
+ readonly start: "justify-start";
84
+ readonly center: "justify-center";
85
+ readonly end: "justify-end";
86
+ readonly between: "justify-between";
87
+ readonly around: "justify-around";
88
+ readonly evenly: "justify-evenly";
89
+ };
90
+ declare const justifySelfs: {
91
+ readonly start: "justify-self-start";
92
+ readonly center: "justify-self-center";
93
+ readonly end: "justify-self-end";
94
+ readonly stretch: "justify-self-stretch";
95
+ };
96
+ declare const aligns: {
97
+ readonly baseline: "items-baseline";
98
+ readonly start: "items-start";
99
+ readonly center: "items-center";
100
+ readonly end: "items-end";
101
+ readonly stretch: "items-stretch";
102
+ };
103
+ declare const alignSelfs: {
104
+ readonly baseline: "self-baseline";
105
+ readonly auto: "self-auto";
106
+ readonly start: "self-start";
107
+ readonly center: "self-center";
108
+ readonly end: "self-end";
109
+ readonly stretch: "self-stretch";
110
+ };
111
+ type ButtonVariantType = "primary" | "secondary" | "lower" | "neutral" | "neutralGray" | "danger" | "blue" | "orange" | "green";
112
+ type ColorType = keyof typeof colors;
113
+ type FontSizeType = keyof typeof fontSize;
114
+ type FontWeightType = keyof typeof fontWeight;
115
+ type DirectionType = keyof typeof directions;
116
+ type JustifyType = keyof typeof justifies;
117
+ type JustifySelfType = keyof typeof justifySelfs;
118
+ type AlignType = keyof typeof aligns;
119
+ type AlignSelfType = keyof typeof alignSelfs;
120
+
121
+ interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
122
+ id?: string;
123
+ children: React.ReactNode;
124
+ size?: FontSizeType;
125
+ color?: ColorType;
126
+ className?: string;
127
+ fontWeight?: FontWeightType;
128
+ justify?: JustifyType;
129
+ align?: AlignType;
130
+ textDecoration?: "none" | "underline" | "line-through";
131
+ style?: React.CSSProperties;
132
+ }
133
+ declare function Text({ id, children, size, color, justify, align, className, fontWeight: fontWeightProp, textDecoration, style, ...props }: TextProps): react_jsx_runtime.JSX.Element;
134
+
135
+ export { type AlignSelfType, type AlignType, type ButtonVariantType, type ColorType, type DirectionType, type FontSizeType, type FontWeightType, type JustifySelfType, type JustifyType, Text, type TextProps, alignSelfs, aligns, colors, directions, fontSize, fontWeight, justifies, justifySelfs, lineHeightSize };
package/dist/index.js ADDED
@@ -0,0 +1,169 @@
1
+ // src/theme/index.ts
2
+ var toRemFunction = (value) => `${value / 14}rem`;
3
+ var fontSize = {
4
+ h1: toRemFunction(60),
5
+ h2: toRemFunction(48),
6
+ h3: toRemFunction(40),
7
+ h4: toRemFunction(30),
8
+ h5: toRemFunction(28),
9
+ h6: toRemFunction(24),
10
+ body18: toRemFunction(18),
11
+ body16: toRemFunction(16),
12
+ body14: toRemFunction(14),
13
+ body12: toRemFunction(12),
14
+ body10: toRemFunction(10)
15
+ };
16
+ var lineHeightSize = {
17
+ h1: toRemFunction(60),
18
+ h2: toRemFunction(48),
19
+ h3: toRemFunction(40),
20
+ h4: toRemFunction(40),
21
+ h5: toRemFunction(40),
22
+ h6: toRemFunction(40),
23
+ body18: toRemFunction(24),
24
+ body16: toRemFunction(24),
25
+ body14: toRemFunction(22),
26
+ body12: toRemFunction(18),
27
+ body10: toRemFunction(14)
28
+ };
29
+ var colors = {
30
+ white: "#ffffff",
31
+ black: "#000000",
32
+ gray: "#6B7280",
33
+ primary: "#3083FF",
34
+ // 기본 primary 색상
35
+ primary10: "#EAF3FF",
36
+ primary5: "#F5F9FF",
37
+ primary3: "#F9FBFF",
38
+ primary3Border: "#3083FF4D",
39
+ primaryText: "#111928",
40
+ text: "#637381",
41
+ textLight: "#F3F4F6",
42
+ secondary: "#18FF82",
43
+ // 기본 secondary 색상
44
+ secondaryText: "#8899A8",
45
+ stroke: "#DFE4EA",
46
+ line: "#E7ECF3",
47
+ dark2: "#1F2A37",
48
+ dark3: "#374151",
49
+ dark4: "#4B5563",
50
+ dark5: "#6B7280",
51
+ dark6: "#9CA3AF",
52
+ dark7: "#D1D5DB",
53
+ dark8: "#E5E7EB",
54
+ gray1: "#F9FAFB",
55
+ gray2: "#F3F4F6",
56
+ gray3: "#E5E7EB",
57
+ gray4: "#DEE2E6",
58
+ gray5: "#CED4DA",
59
+ gray6: "#CED4DA",
60
+ gray7: "#CED4DA",
61
+ green: "#016630",
62
+ greenLight: "#DCFCE7",
63
+ red: "#9F0712",
64
+ red5: "#FEF6F6",
65
+ redLight: "#FFE2E2",
66
+ orange: "#9F2D00",
67
+ orangeLight: "#FFEDD4",
68
+ blue: "#193CB8",
69
+ blueLight: "#DBEAFE",
70
+ warning: "#F15050",
71
+ warningLight: "#FEF6F6"
72
+ };
73
+ var fontWeight = {
74
+ regular: "400",
75
+ semibold: "500",
76
+ bold: "600"
77
+ };
78
+ var directions = {
79
+ row: "flex-row",
80
+ col: "flex-col",
81
+ grid: "grid"
82
+ };
83
+ var justifies = {
84
+ start: "justify-start",
85
+ center: "justify-center",
86
+ end: "justify-end",
87
+ between: "justify-between",
88
+ around: "justify-around",
89
+ evenly: "justify-evenly"
90
+ };
91
+ var justifySelfs = {
92
+ start: "justify-self-start",
93
+ center: "justify-self-center",
94
+ end: "justify-self-end",
95
+ stretch: "justify-self-stretch"
96
+ };
97
+ var aligns = {
98
+ baseline: "items-baseline",
99
+ start: "items-start",
100
+ center: "items-center",
101
+ end: "items-end",
102
+ stretch: "items-stretch"
103
+ };
104
+ var alignSelfs = {
105
+ baseline: "self-baseline",
106
+ auto: "self-auto",
107
+ start: "self-start",
108
+ center: "self-center",
109
+ end: "self-end",
110
+ stretch: "self-stretch"
111
+ };
112
+
113
+ // src/components/ui/Text/Text.tsx
114
+ import { jsx } from "react/jsx-runtime";
115
+ var justifyContentMap = {
116
+ start: "flex-start",
117
+ center: "center",
118
+ end: "flex-end",
119
+ between: "space-between",
120
+ around: "space-around",
121
+ evenly: "space-evenly"
122
+ };
123
+ var alignItemsMap = {
124
+ baseline: "baseline",
125
+ start: "flex-start",
126
+ center: "center",
127
+ end: "flex-end",
128
+ stretch: "stretch"
129
+ };
130
+ function Text({
131
+ id,
132
+ children,
133
+ size = "body14",
134
+ color = "primaryText",
135
+ justify = "start",
136
+ align = "start",
137
+ className = "",
138
+ fontWeight: fontWeightProp = "regular",
139
+ textDecoration = "none",
140
+ style,
141
+ ...props
142
+ }) {
143
+ const styles = {
144
+ fontSize: fontSize[size],
145
+ lineHeight: lineHeightSize[size],
146
+ fontWeight: fontWeight[fontWeightProp],
147
+ color: colors[color],
148
+ display: "flex",
149
+ justifyContent: justifyContentMap[justify],
150
+ alignItems: alignItemsMap[align],
151
+ textDecoration,
152
+ ...style
153
+ // 사용자 정의 style을 마지막에 배치하여 오버라이드 가능하게
154
+ };
155
+ return /* @__PURE__ */ jsx("div", { id, style: styles, className, ...props, children });
156
+ }
157
+ export {
158
+ Text,
159
+ alignSelfs,
160
+ aligns,
161
+ colors,
162
+ directions,
163
+ fontSize,
164
+ fontWeight,
165
+ justifies,
166
+ justifySelfs,
167
+ lineHeightSize
168
+ };
169
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/theme/index.ts","../src/components/ui/Text/Text.tsx"],"sourcesContent":["// import { toRemFunction } from \"@/utils/helperUtils\";\nconst toRemFunction = (value: number) => `${value / 14}rem`;\nexport const fontSize = {\n h1: toRemFunction(60),\n h2: toRemFunction(48),\n h3: toRemFunction(40),\n h4: toRemFunction(30),\n h5: toRemFunction(28),\n h6: toRemFunction(24),\n body18: toRemFunction(18),\n body16: toRemFunction(16),\n body14: toRemFunction(14),\n body12: toRemFunction(12),\n body10: toRemFunction(10),\n};\nexport const lineHeightSize = {\n h1: toRemFunction(60),\n h2: toRemFunction(48),\n h3: toRemFunction(40),\n h4: toRemFunction(40),\n h5: toRemFunction(40),\n h6: toRemFunction(40),\n body18: toRemFunction(24),\n body16: toRemFunction(24),\n body14: toRemFunction(22),\n body12: toRemFunction(18),\n body10: toRemFunction(14),\n};\n\nexport const colors = {\n white: \"#ffffff\",\n black: \"#000000\",\n gray: \"#6B7280\",\n primary: \"#3083FF\", // 기본 primary 색상\n primary10: \"#EAF3FF\",\n primary5: \"#F5F9FF\",\n primary3: \"#F9FBFF\",\n primary3Border: \"#3083FF4D\",\n primaryText: \"#111928\",\n text: \"#637381\",\n textLight: \"#F3F4F6\",\n secondary: \"#18FF82\", // 기본 secondary 색상\n secondaryText: \"#8899A8\",\n stroke: \"#DFE4EA\",\n line: \"#E7ECF3\",\n dark2: \"#1F2A37\",\n dark3: \"#374151\",\n dark4: \"#4B5563\",\n dark5: \"#6B7280\",\n dark6: \"#9CA3AF\",\n dark7: \"#D1D5DB\",\n dark8: \"#E5E7EB\",\n gray1: \"#F9FAFB\",\n gray2: \"#F3F4F6\",\n gray3: \"#E5E7EB\",\n gray4: \"#DEE2E6\",\n gray5: \"#CED4DA\",\n gray6: \"#CED4DA\",\n gray7: \"#CED4DA\",\n green: \"#016630\",\n greenLight: \"#DCFCE7\",\n red: \"#9F0712\",\n red5: \"#FEF6F6\",\n redLight: \"#FFE2E2\",\n orange: \"#9F2D00\",\n orangeLight: \"#FFEDD4\",\n blue: \"#193CB8\",\n blueLight: \"#DBEAFE\",\n warning: \"#F15050\",\n warningLight: \"#FEF6F6\",\n} as const;\n\nexport const fontWeight = {\n regular: \"400\",\n semibold: \"500\",\n bold: \"600\",\n} as const;\n\nexport const directions = {\n row: \"flex-row\",\n col: \"flex-col\",\n grid: \"grid\",\n} as const;\n\nexport const justifies = {\n start: \"justify-start\",\n center: \"justify-center\",\n end: \"justify-end\",\n between: \"justify-between\",\n around: \"justify-around\",\n evenly: \"justify-evenly\",\n} as const;\n\nexport const justifySelfs = {\n start: \"justify-self-start\",\n center: \"justify-self-center\",\n end: \"justify-self-end\",\n stretch: \"justify-self-stretch\",\n} as const;\n\nexport const aligns = {\n baseline: \"items-baseline\",\n start: \"items-start\",\n center: \"items-center\",\n end: \"items-end\",\n stretch: \"items-stretch\",\n} as const;\n\nexport const alignSelfs = {\n baseline: \"self-baseline\",\n auto: \"self-auto\",\n start: \"self-start\",\n center: \"self-center\",\n end: \"self-end\",\n stretch: \"self-stretch\",\n} as const;\n\nexport type ButtonVariantType =\n | \"primary\"\n | \"secondary\"\n | \"lower\"\n | \"neutral\"\n | \"neutralGray\"\n | \"danger\"\n | \"blue\"\n | \"orange\"\n | \"green\";\n\nexport type ColorType = keyof typeof colors;\nexport type FontSizeType = keyof typeof fontSize;\nexport type FontWeightType = keyof typeof fontWeight;\nexport type DirectionType = keyof typeof directions;\nexport type JustifyType = keyof typeof justifies;\nexport type JustifySelfType = keyof typeof justifySelfs;\nexport type AlignType = keyof typeof aligns;\nexport type AlignSelfType = keyof typeof alignSelfs;\n","import React from \"react\";\nimport {\n AlignType,\n JustifyType,\n ColorType,\n FontSizeType,\n fontSize,\n FontWeightType,\n fontWeight,\n lineHeightSize,\n colors,\n} from \"../../../theme\";\n\n// Tailwind 클래스명을 CSS 속성값으로 매핑\nconst justifyContentMap: Record<JustifyType, React.CSSProperties['justifyContent']> = {\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n between: \"space-between\",\n around: \"space-around\",\n evenly: \"space-evenly\",\n};\n\nconst alignItemsMap: Record<AlignType, React.CSSProperties['alignItems']> = {\n baseline: \"baseline\",\n start: \"flex-start\",\n center: \"center\",\n end: \"flex-end\",\n stretch: \"stretch\",\n};\n\nexport interface TextProps extends React.HTMLAttributes<HTMLDivElement> {\n id?: string;\n children: React.ReactNode;\n size?: FontSizeType;\n color?: ColorType;\n className?: string;\n fontWeight?: FontWeightType;\n justify?: JustifyType;\n align?: AlignType;\n textDecoration?: \"none\" | \"underline\" | \"line-through\";\n style?: React.CSSProperties;\n}\n\nexport default function Text({\n id,\n children,\n size = \"body14\",\n color = \"primaryText\",\n justify = \"start\",\n align = \"start\",\n className = \"\",\n fontWeight: fontWeightProp = \"regular\",\n textDecoration = \"none\",\n style,\n ...props\n}: TextProps) {\n const styles: React.CSSProperties = {\n fontSize: fontSize[size],\n lineHeight: lineHeightSize[size],\n fontWeight: fontWeight[fontWeightProp],\n color: colors[color],\n display: \"flex\",\n justifyContent: justifyContentMap[justify],\n alignItems: alignItemsMap[align],\n textDecoration,\n ...style, // 사용자 정의 style을 마지막에 배치하여 오버라이드 가능하게\n };\n\n return (\n <div id={id} style={styles} className={className} {...props}>\n {children}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
package/dist/styles/index.css ADDED
@@ -0,0 +1,97 @@
1
+ @charset "UTF-8";
2
+ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
3
+ html {
4
+ font-size: 14px;
5
+ height: 100%;
6
+ }
7
+
8
+ :root {
9
+ --color-white: #ffffff;
10
+ --color-black: #000000;
11
+ --color-gray: #6B7280;
12
+ --color-primary: #3083FF;
13
+ --color-primary10: #EAF3FF;
14
+ --color-primary5: #F5F9FF;
15
+ --color-primary3: #F9FBFF;
16
+ --color-primary3Border: rgba(48, 131, 255, 0.3019607843);
17
+ --color-primaryText: #111928;
18
+ --color-text: #637381;
19
+ --color-textLight: #F3F4F6;
20
+ --color-secondary: #18FF82;
21
+ --color-secondaryText: #8899A8;
22
+ --color-stroke: #DFE4EA;
23
+ --color-line: #E7ECF3;
24
+ --color-dark2: #1F2A37;
25
+ --color-dark3: #374151;
26
+ --color-dark4: #4B5563;
27
+ --color-dark5: #6B7280;
28
+ --color-dark6: #9CA3AF;
29
+ --color-dark7: #D1D5DB;
30
+ --color-dark8: #E5E7EB;
31
+ --color-gray1: #F9FAFB;
32
+ --color-gray2: #F3F4F6;
33
+ --color-gray3: #E5E7EB;
34
+ --color-gray4: #DEE2E6;
35
+ --color-gray5: #CED4DA;
36
+ --color-gray6: #CED4DA;
37
+ --color-gray7: #CED4DA;
38
+ --color-green: #016630;
39
+ --color-greenLight: #DCFCE7;
40
+ --color-red: #9F0712;
41
+ --color-red5: #FEF6F6;
42
+ --color-redLight: #FFE2E2;
43
+ --color-orange: #9F2D00;
44
+ --color-orangeLight: #FFEDD4;
45
+ --color-blue: #193CB8;
46
+ --color-blueLight: #DBEAFE;
47
+ --color-warning: #F15050;
48
+ --color-warningLight: #FEF6F6;
49
+ }
50
+
51
+ body {
52
+ font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
53
+ -webkit-font-smoothing: antialiased;
54
+ -moz-osx-font-smoothing: grayscale;
55
+ text-rendering: optimizeLegibility;
56
+ font-feature-settings: "kern" 1;
57
+ font-kerning: normal;
58
+ font-variant-ligatures: common-ligatures;
59
+ }
60
+
61
+ * {
62
+ -webkit-tap-highlight-color: transparent;
63
+ /* 터치 하이라이트 제거*/
64
+ -webkit-overflow-scrolling: touch;
65
+ /* ios 스크롤 스무스*/
66
+ -ms-overflow-style: none;
67
+ /* IE에서 스크롤바 감춤*/
68
+ -webkit-font-smoothing: antialiased;
69
+ -moz-osx-font-smoothing: grayscale;
70
+ text-rendering: optimizeLegibility;
71
+ }
72
+
73
+ input:focus,
74
+ button:focus,
75
+ select:focus,
76
+ textarea:focus {
77
+ outline: none !important;
78
+ box-shadow: none !important;
79
+ }
80
+
81
+ input[type=checkbox]:focus {
82
+ outline: none !important;
83
+ box-shadow: none !important;
84
+ border-color: inherit !important;
85
+ }
86
+
87
+ /* Chrome, Safari, Edge, Opera */
88
+ input[type=number]::-webkit-outer-spin-button,
89
+ input[type=number]::-webkit-inner-spin-button {
90
+ -webkit-appearance: none;
91
+ margin: 0;
92
+ }
93
+
94
+ /* Firefox */
95
+ input[type=number] {
96
+ -moz-appearance: textfield;
97
+ }
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@scglab/admin-ui",
3
+ "version": "0.1.1",
4
+ "description": "React 기반 SCGLab 어드민 UI 컴포넌트 라이브러리",
5
+ "keywords": ["react", "ui", "component-library", "admin", "scglab", "typescript"],
6
+ "author": "SCGLab",
7
+ "license": "MIT",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": ""
11
+ },
12
+ "type": "module",
13
+ "main": "./dist/index.js",
14
+ "module": "./dist/index.mjs",
15
+ "types": "./dist/index.d.ts",
16
+ "exports": {
17
+ ".": {
18
+ "require": "./dist/index.js",
19
+ "import": "./dist/index.mjs",
20
+ "types": "./dist/index.d.ts"
21
+ },
22
+ "./styles": "./dist/styles/index.css"
23
+ },
24
+ "files": ["dist", "README.md"],
25
+ "peerDependencies": {
26
+ "react": "^18.0.0",
27
+ "react-dom": "^18.0.0"
28
+ },
29
+ "scripts": {
30
+ "build": "tsup && npm run build:css",
31
+ "build:css": "sass src/styles/index.scss dist/styles/index.css --no-source-map",
32
+ "dev": "tsup --watch",
33
+ "sb": "storybook dev -p 6006",
34
+ "build-storybook": "storybook build"
35
+ },
36
+ "devDependencies": {
37
+ "@storybook/addon-essentials": "^8.5.1",
38
+ "@storybook/addon-interactions": "^8.5.1",
39
+ "@storybook/addon-links": "^8.5.1",
40
+ "@storybook/blocks": "^8.5.1",
41
+ "@storybook/react": "^8.5.1",
42
+ "@storybook/react-vite": "^8.5.1",
43
+ "@storybook/test": "^8.5.1",
44
+ "@types/react": "^18.2.79",
45
+ "@types/react-dom": "^18.2.25",
46
+ "react": "^18.2.0",
47
+ "react-dom": "^18.2.0",
48
+ "esbuild-sass-plugin": "^3.3.1",
49
+ "sass": "^1.77.0",
50
+ "storybook": "^8.5.1",
51
+ "tsup": "^8.5.1",
52
+ "typescript": "^5.9.3",
53
+ "vite": "^6.0.7"
54
+ }
55
+ }