@ehfuse/forma 3.0.0 → 3.0.2

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 (11) hide show
  1. package/dist/esm/src/hooks/useBreakpoint.d.ts.map +1 -1
  2. package/dist/esm/src/hooks/useBreakpoint.js +92 -8
  3. package/dist/esm/src/hooks/useBreakpoint.js.map +1 -1
  4. package/dist/esm/src/types/breakpoint.d.ts +68 -16
  5. package/dist/esm/src/types/breakpoint.d.ts.map +1 -1
  6. package/dist/src/hooks/useBreakpoint.d.ts.map +1 -1
  7. package/dist/src/hooks/useBreakpoint.js +92 -8
  8. package/dist/src/hooks/useBreakpoint.js.map +1 -1
  9. package/dist/src/types/breakpoint.d.ts +68 -16
  10. package/dist/src/types/breakpoint.d.ts.map +1 -1
  11. package/package.json +1 -1
package/dist/esm/src/hooks/useBreakpoint.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAY/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,QAAO,mBA4DhC,CAAC"}
1
+ {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AA0B/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,QAAO,mBAuIhC,CAAC"}
package/dist/esm/src/hooks/useBreakpoint.js CHANGED
@@ -22,14 +22,27 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
  import { useState, useEffect } from "react";
25
- // 브레이크포인트 정의 (픽셀 단위)
25
+ // 가로 브레이크포인트 정의 (픽셀 단위)
26
26
  const breakpoints = {
27
- xs: 0,
28
- sm: 600,
29
- md: 900,
30
- lg: 1200,
31
- xl: 1536,
32
- xxl: 1920,
27
+ xxxxs: 224, // 14rem
28
+ xxxs: 256, // 16rem
29
+ xxs: 288, // 18rem
30
+ xs: 352, // 22rem
31
+ sm: 640, // 40rem
32
+ md: 768, // 48rem
33
+ lg: 1024, // 64rem
34
+ xl: 1280, // 80rem
35
+ xxl: 1536, // 96rem
36
+ };
37
+ // 세로 브레이크포인트 정의 (픽셀 단위)
38
+ const heightBreakpoints = {
39
+ hxxs: 400,
40
+ hxs: 500,
41
+ hsm: 600,
42
+ hmd: 768,
43
+ hlg: 900,
44
+ hxl: 1080,
45
+ hxxl: 1080, // hxl과 동일
33
46
  };
34
47
  /**
35
48
  * useBreakpoint Hook
@@ -58,49 +71,104 @@ const breakpoints = {
58
71
  */
59
72
  export const useBreakpoint = () => {
60
73
  const [windowWidth, setWindowWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 0);
74
+ const [windowHeight, setWindowHeight] = useState(typeof window !== "undefined" ? window.innerHeight : 0);
61
75
  useEffect(() => {
62
76
  if (typeof window === "undefined")
63
77
  return;
64
78
  const handleResize = () => {
65
79
  setWindowWidth(window.innerWidth);
80
+ setWindowHeight(window.innerHeight);
66
81
  };
67
82
  window.addEventListener("resize", handleResize);
68
83
  return () => window.removeEventListener("resize", handleResize);
69
84
  }, []);
70
- // 각 브레이크포인트별 미디어쿼리 결과 (해당 브레이크포인트 이하인지)
85
+ // 가로 브레이크포인트별 미디어쿼리 결과 (해당 브레이크포인트 이하인지)
86
+ const xxxxs = windowWidth < breakpoints.xxxs;
87
+ const xxxs = windowWidth < breakpoints.xxs;
88
+ const xxs = windowWidth < breakpoints.xs;
71
89
  const xs = windowWidth < breakpoints.sm;
72
90
  const sm = windowWidth < breakpoints.md;
73
91
  const md = windowWidth < breakpoints.lg;
74
92
  const lg = windowWidth < breakpoints.xl;
75
93
  const xl = windowWidth < breakpoints.xxl;
76
94
  const xxl = windowWidth >= breakpoints.xxl;
95
+ const xxxxsUp = windowWidth >= breakpoints.xxxxs;
96
+ const xxxsUp = windowWidth >= breakpoints.xxxs;
97
+ const xxsUp = windowWidth >= breakpoints.xxs;
77
98
  const xsUp = windowWidth >= breakpoints.xs;
78
99
  const smUp = windowWidth >= breakpoints.sm;
79
100
  const mdUp = windowWidth >= breakpoints.md;
80
101
  const lgUp = windowWidth >= breakpoints.lg;
81
102
  const xlUp = windowWidth >= breakpoints.xl;
82
103
  const xxlUp = windowWidth >= breakpoints.xxl;
104
+ // 세로 브레이크포인트별 미디어쿼리 결과 (해당 브레이크포인트 이하인지)
105
+ const hxxs = windowHeight < heightBreakpoints.hxs;
106
+ const hxs = windowHeight < heightBreakpoints.hsm;
107
+ const hsm = windowHeight < heightBreakpoints.hmd;
108
+ const hmd = windowHeight < heightBreakpoints.hlg;
109
+ const hlg = windowHeight < heightBreakpoints.hxl;
110
+ const hxl = windowHeight < heightBreakpoints.hxxl;
111
+ const hxxl = windowHeight >= heightBreakpoints.hxxl;
112
+ const hxxsUp = windowHeight >= heightBreakpoints.hxxs;
113
+ const hxsUp = windowHeight >= heightBreakpoints.hxs;
114
+ const hsmUp = windowHeight >= heightBreakpoints.hsm;
115
+ const hmdUp = windowHeight >= heightBreakpoints.hmd;
116
+ const hlgUp = windowHeight >= heightBreakpoints.hlg;
117
+ const hxlUp = windowHeight >= heightBreakpoints.hxl;
118
+ const hxxlUp = windowHeight >= heightBreakpoints.hxxl;
83
119
  // 객체 형태로 반환하여 breakpoint.sm 식으로 접근 가능
84
120
  return {
121
+ // 가로 브레이크포인트
122
+ xxxxs,
123
+ xxxs,
124
+ xxs,
85
125
  xs,
86
126
  sm,
87
127
  md,
88
128
  lg,
89
129
  xl,
90
130
  xxl,
131
+ xxxxsUp,
132
+ xxxsUp,
133
+ xxsUp,
91
134
  xsUp,
92
135
  smUp,
93
136
  mdUp,
94
137
  lgUp,
95
138
  xlUp,
96
139
  xxlUp,
140
+ // 세로 브레이크포인트
141
+ hxxs,
142
+ hxs,
143
+ hsm,
144
+ hmd,
145
+ hlg,
146
+ hxl,
147
+ hxxl,
148
+ hxxsUp,
149
+ hxsUp,
150
+ hsmUp,
151
+ hmdUp,
152
+ hlgUp,
153
+ hxlUp,
154
+ hxxlUp,
155
+ // 현재 크기
156
+ width: windowWidth,
157
+ height: windowHeight,
158
+ // 객체 형태
97
159
  breakpoint: {
160
+ xxxxs,
161
+ xxxs,
162
+ xxs,
98
163
  xs,
99
164
  sm,
100
165
  md,
101
166
  lg,
102
167
  xl,
103
168
  xxl,
169
+ xxxxsUp,
170
+ xxxsUp,
171
+ xxsUp,
104
172
  xsUp,
105
173
  smUp,
106
174
  mdUp,
@@ -108,6 +176,22 @@ export const useBreakpoint = () => {
108
176
  xlUp,
109
177
  xxlUp,
110
178
  },
179
+ heightBreakpoint: {
180
+ hxxs,
181
+ hxs,
182
+ hsm,
183
+ hmd,
184
+ hlg,
185
+ hxl,
186
+ hxxl,
187
+ hxxsUp,
188
+ hxsUp,
189
+ hsmUp,
190
+ hmdUp,
191
+ hlgUp,
192
+ hxlUp,
193
+ hxxlUp,
194
+ },
111
195
  };
112
196
  };
113
197
  //# sourceMappingURL=useBreakpoint.js.map
package/dist/esm/src/hooks/useBreakpoint.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,qBAAqB;AACrB,MAAM,WAAW,GAAG;IAChB,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,IAAI;CACH,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAwB,EAAE;IACnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC1C,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CACxD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,wCAAwC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC;IACzC,MAAM,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAE3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,KAAK,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAE7C,sCAAsC;IACtC,OAAO;QACH,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,KAAK;QACL,UAAU,EAAE;YACR,EAAE;YACF,EAAE;YACF,EAAE;YACF,EAAE;YACF,EAAE;YACF,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;SACR;KACJ,CAAC;AACN,CAAC,CAAC"}
1
+ {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,wBAAwB;AACxB,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,GAAG,EAAE,QAAQ;IACpB,IAAI,EAAE,GAAG,EAAE,QAAQ;IACnB,GAAG,EAAE,GAAG,EAAE,QAAQ;IAClB,EAAE,EAAE,GAAG,EAAE,QAAQ;IACjB,EAAE,EAAE,GAAG,EAAE,QAAQ;IACjB,EAAE,EAAE,GAAG,EAAE,QAAQ;IACjB,EAAE,EAAE,IAAI,EAAE,QAAQ;IAClB,EAAE,EAAE,IAAI,EAAE,QAAQ;IAClB,GAAG,EAAE,IAAI,EAAE,QAAQ;CACb,CAAC;AAEX,wBAAwB;AACxB,MAAM,iBAAiB,GAAG;IACtB,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI,EAAE,UAAU;CAChB,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAwB,EAAE;IACnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC1C,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CACxD,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC5C,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CACzD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAClC,eAAe,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACxC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yCAAyC;IACzC,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC;IAC7C,MAAM,IAAI,GAAG,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC;IAC3C,MAAM,GAAG,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACzC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC;IACzC,MAAM,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAE3C,MAAM,OAAO,GAAG,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC;IACjD,MAAM,MAAM,GAAG,WAAW,IAAI,WAAW,CAAC,IAAI,CAAC;IAC/C,MAAM,KAAK,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAC7C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,KAAK,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAE7C,yCAAyC;IACzC,MAAM,IAAI,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC;IAClD,MAAM,GAAG,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC;IACjD,MAAM,GAAG,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC;IACjD,MAAM,GAAG,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC;IACjD,MAAM,GAAG,GAAG,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC;IACjD,MAAM,GAAG,GAAG,YAAY,GAAG,iBAAiB,CAAC,IAAI,CAAC;IAClD,MAAM,IAAI,GAAG,YAAY,IAAI,iBAAiB,CAAC,IAAI,CAAC;IAEpD,MAAM,MAAM,GAAG,YAAY,IAAI,iBAAiB,CAAC,IAAI,CAAC;IACtD,MAAM,KAAK,GAAG,YAAY,IAAI,iBAAiB,CAAC,GAAG,CAAC;IACpD,MAAM,KAAK,GAAG,YAAY,IAAI,iBAAiB,CAAC,GAAG,CAAC;IACpD,MAAM,KAAK,GAAG,YAAY,IAAI,iBAAiB,CAAC,GAAG,CAAC;IACpD,MAAM,KAAK,GAAG,YAAY,IAAI,iBAAiB,CAAC,GAAG,CAAC;IACpD,MAAM,KAAK,GAAG,YAAY,IAAI,iBAAiB,CAAC,GAAG,CAAC;IACpD,MAAM,MAAM,GAAG,YAAY,IAAI,iBAAiB,CAAC,IAAI,CAAC;IAEtD,sCAAsC;IACtC,OAAO;QACH,aAAa;QACb,KAAK;QACL,IAAI;QACJ,GAAG;QACH,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,GAAG;QACH,OAAO;QACP,MAAM;QACN,KAAK;QACL,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,KAAK;QACL,aAAa;QACb,IAAI;QACJ,GAAG;QACH,GAAG;QACH,GAAG;QACH,GAAG;QACH,GAAG;QACH,IAAI;QACJ,MAAM;QACN,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,MAAM;QACN,QAAQ;QACR,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,YAAY;QACpB,QAAQ;QACR,UAAU,EAAE;YACR,KAAK;YACL,IAAI;YACJ,GAAG;YACH,EAAE;YACF,EAAE;YACF,EAAE;YACF,EAAE;YACF,EAAE;YACF,GAAG;YACH,OAAO;YACP,MAAM;YACN,KAAK;YACL,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;SACR;QACD,gBAAgB,EAAE;YACd,IAAI;YACJ,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,MAAM;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,MAAM;SACT;KACJ,CAAC;AACN,CAAC,CAAC"}
package/dist/esm/src/types/breakpoint.d.ts CHANGED
@@ -22,41 +22,93 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
  /**
25
- * Breakpoint state object
26
- * 브레이크포인트 상태 객체
25
+ * Breakpoint state object (width-based)
26
+ * 브레이크포인트 상태 객체 (가로 기준)
27
27
  */
28
28
  export interface BreakpointState {
29
- /** Extra small: < 600px */
29
+ /** 4x Extra small: < 256px (14rem) */
30
+ xxxxs: boolean;
31
+ /** 3x Extra small: < 288px (16rem) */
32
+ xxxs: boolean;
33
+ /** 2x Extra small: < 352px (18rem) */
34
+ xxs: boolean;
35
+ /** Extra small: < 640px (22rem) */
30
36
  xs: boolean;
31
- /** Small: < 900px */
37
+ /** Small: < 768px (40rem) */
32
38
  sm: boolean;
33
- /** Medium: < 1200px */
39
+ /** Medium: < 1024px (48rem) */
34
40
  md: boolean;
35
- /** Large: < 1536px */
41
+ /** Large: < 1280px (64rem) */
36
42
  lg: boolean;
37
- /** Extra large: < 1920px */
43
+ /** Extra large: < 1536px (80rem) */
38
44
  xl: boolean;
39
- /** Extra extra large: >= 1920px */
45
+ /** Extra extra large: >= 1536px (96rem) */
40
46
  xxl: boolean;
41
- /** >= 0px */
47
+ /** >= 224px (14rem) */
48
+ xxxxsUp: boolean;
49
+ /** >= 256px (16rem) */
50
+ xxxsUp: boolean;
51
+ /** >= 288px (18rem) */
52
+ xxsUp: boolean;
53
+ /** >= 352px (22rem) */
42
54
  xsUp: boolean;
43
- /** >= 600px */
55
+ /** >= 640px (40rem) */
44
56
  smUp: boolean;
45
- /** >= 900px */
57
+ /** >= 768px (48rem) */
46
58
  mdUp: boolean;
47
- /** >= 1200px */
59
+ /** >= 1024px (64rem) */
48
60
  lgUp: boolean;
49
- /** >= 1536px */
61
+ /** >= 1280px (80rem) */
50
62
  xlUp: boolean;
51
- /** >= 1920px */
63
+ /** >= 1536px (96rem) */
52
64
  xxlUp: boolean;
53
65
  }
66
+ /**
67
+ * Height breakpoint state object (height-based)
68
+ * 세로 브레이크포인트 상태 객체 (높이 기준)
69
+ */
70
+ export interface HeightBreakpointState {
71
+ /** Height < 400px */
72
+ hxxs: boolean;
73
+ /** Height < 500px */
74
+ hxs: boolean;
75
+ /** Height < 600px */
76
+ hsm: boolean;
77
+ /** Height < 768px */
78
+ hmd: boolean;
79
+ /** Height < 900px */
80
+ hlg: boolean;
81
+ /** Height < 1080px */
82
+ hxl: boolean;
83
+ /** Height >= 1080px */
84
+ hxxl: boolean;
85
+ /** Height >= 400px */
86
+ hxxsUp: boolean;
87
+ /** Height >= 500px */
88
+ hxsUp: boolean;
89
+ /** Height >= 600px */
90
+ hsmUp: boolean;
91
+ /** Height >= 768px */
92
+ hmdUp: boolean;
93
+ /** Height >= 900px */
94
+ hlgUp: boolean;
95
+ /** Height >= 1080px */
96
+ hxlUp: boolean;
97
+ /** Height >= 1080px (same as hxlUp) */
98
+ hxxlUp: boolean;
99
+ }
54
100
  /**
55
101
  * Return type of useBreakpoint hook
56
102
  * useBreakpoint 훅의 반환 타입
57
103
  */
58
- export interface UseBreakpointReturn extends BreakpointState {
59
- /** Breakpoint state object (same as root level) */
104
+ export interface UseBreakpointReturn extends BreakpointState, HeightBreakpointState {
105
+ /** Width breakpoint state object (same as root level) */
60
106
  breakpoint: BreakpointState;
107
+ /** Height breakpoint state object */
108
+ heightBreakpoint: HeightBreakpointState;
109
+ /** Current window width in pixels */
110
+ width: number;
111
+ /** Current window height in pixels */
112
+ height: number;
61
113
  }
62
114
  //# sourceMappingURL=breakpoint.d.ts.map
package/dist/esm/src/types/breakpoint.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/types/breakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC5B,2BAA2B;IAC3B,EAAE,EAAE,OAAO,CAAC;IACZ,qBAAqB;IACrB,EAAE,EAAE,OAAO,CAAC;IACZ,uBAAuB;IACvB,EAAE,EAAE,OAAO,CAAC;IACZ,sBAAsB;IACtB,EAAE,EAAE,OAAO,CAAC;IACZ,4BAA4B;IAC5B,EAAE,EAAE,OAAO,CAAC;IACZ,mCAAmC;IACnC,GAAG,EAAE,OAAO,CAAC;IACb,aAAa;IACb,IAAI,EAAE,OAAO,CAAC;IACd,eAAe;IACf,IAAI,EAAE,OAAO,CAAC;IACd,eAAe;IACf,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IACxD,mDAAmD;IACnD,UAAU,EAAE,eAAe,CAAC;CAC/B"}
1
+ {"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/types/breakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC5B,sCAAsC;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,GAAG,EAAE,OAAO,CAAC;IACb,mCAAmC;IACnC,EAAE,EAAE,OAAO,CAAC;IACZ,6BAA6B;IAC7B,EAAE,EAAE,OAAO,CAAC;IACZ,+BAA+B;IAC/B,EAAE,EAAE,OAAO,CAAC;IACZ,8BAA8B;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,oCAAoC;IACpC,EAAE,EAAE,OAAO,CAAC;IACZ,2CAA2C;IAC3C,GAAG,EAAE,OAAO,CAAC;IACb,uBAAuB;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,uBAAuB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,wBAAwB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,wBAAwB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,wBAAwB;IACxB,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,sBAAsB;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,sBAAsB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,uBAAuB;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,mBACb,SAAQ,eAAe,EACnB,qBAAqB;IACzB,yDAAyD;IACzD,UAAU,EAAE,eAAe,CAAC;IAC5B,qCAAqC;IACrC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;CAClB"}
package/dist/src/hooks/useBreakpoint.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAY/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,QAAO,mBA4DhC,CAAC"}
1
+ {"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AA0B/D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,QAAO,mBAuIhC,CAAC"}
package/dist/src/hooks/useBreakpoint.js CHANGED
@@ -25,14 +25,27 @@
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.useBreakpoint = void 0;
27
27
  const react_1 = require("react");
28
- // 브레이크포인트 정의 (픽셀 단위)
28
+ // 가로 브레이크포인트 정의 (픽셀 단위)
29
29
  const breakpoints = {
30
- xs: 0,
31
- sm: 600,
32
- md: 900,
33
- lg: 1200,
34
- xl: 1536,
35
- xxl: 1920,
30
+ xxxxs: 224, // 14rem
31
+ xxxs: 256, // 16rem
32
+ xxs: 288, // 18rem
33
+ xs: 352, // 22rem
34
+ sm: 640, // 40rem
35
+ md: 768, // 48rem
36
+ lg: 1024, // 64rem
37
+ xl: 1280, // 80rem
38
+ xxl: 1536, // 96rem
39
+ };
40
+ // 세로 브레이크포인트 정의 (픽셀 단위)
41
+ const heightBreakpoints = {
42
+ hxxs: 400,
43
+ hxs: 500,
44
+ hsm: 600,
45
+ hmd: 768,
46
+ hlg: 900,
47
+ hxl: 1080,
48
+ hxxl: 1080, // hxl과 동일
36
49
  };
37
50
  /**
38
51
  * useBreakpoint Hook
@@ -61,49 +74,104 @@ const breakpoints = {
61
74
  */
62
75
  const useBreakpoint = () => {
63
76
  const [windowWidth, setWindowWidth] = (0, react_1.useState)(typeof window !== "undefined" ? window.innerWidth : 0);
77
+ const [windowHeight, setWindowHeight] = (0, react_1.useState)(typeof window !== "undefined" ? window.innerHeight : 0);
64
78
  (0, react_1.useEffect)(() => {
65
79
  if (typeof window === "undefined")
66
80
  return;
67
81
  const handleResize = () => {
68
82
  setWindowWidth(window.innerWidth);
83
+ setWindowHeight(window.innerHeight);
69
84
  };
70
85
  window.addEventListener("resize", handleResize);
71
86
  return () => window.removeEventListener("resize", handleResize);
72
87
  }, []);
73
- // 각 브레이크포인트별 미디어쿼리 결과 (해당 브레이크포인트 이하인지)
88
+ // 가로 브레이크포인트별 미디어쿼리 결과 (해당 브레이크포인트 이하인지)
89
+ const xxxxs = windowWidth < breakpoints.xxxs;
90
+ const xxxs = windowWidth < breakpoints.xxs;
91
+ const xxs = windowWidth < breakpoints.xs;
74
92
  const xs = windowWidth < breakpoints.sm;
75
93
  const sm = windowWidth < breakpoints.md;
76
94
  const md = windowWidth < breakpoints.lg;
77
95
  const lg = windowWidth < breakpoints.xl;
78
96
  const xl = windowWidth < breakpoints.xxl;
79
97
  const xxl = windowWidth >= breakpoints.xxl;
98
+ const xxxxsUp = windowWidth >= breakpoints.xxxxs;
99
+ const xxxsUp = windowWidth >= breakpoints.xxxs;
100
+ const xxsUp = windowWidth >= breakpoints.xxs;
80
101
  const xsUp = windowWidth >= breakpoints.xs;
81
102
  const smUp = windowWidth >= breakpoints.sm;
82
103
  const mdUp = windowWidth >= breakpoints.md;
83
104
  const lgUp = windowWidth >= breakpoints.lg;
84
105
  const xlUp = windowWidth >= breakpoints.xl;
85
106
  const xxlUp = windowWidth >= breakpoints.xxl;
107
+ // 세로 브레이크포인트별 미디어쿼리 결과 (해당 브레이크포인트 이하인지)
108
+ const hxxs = windowHeight < heightBreakpoints.hxs;
109
+ const hxs = windowHeight < heightBreakpoints.hsm;
110
+ const hsm = windowHeight < heightBreakpoints.hmd;
111
+ const hmd = windowHeight < heightBreakpoints.hlg;
112
+ const hlg = windowHeight < heightBreakpoints.hxl;
113
+ const hxl = windowHeight < heightBreakpoints.hxxl;
114
+ const hxxl = windowHeight >= heightBreakpoints.hxxl;
115
+ const hxxsUp = windowHeight >= heightBreakpoints.hxxs;
116
+ const hxsUp = windowHeight >= heightBreakpoints.hxs;
117
+ const hsmUp = windowHeight >= heightBreakpoints.hsm;
118
+ const hmdUp = windowHeight >= heightBreakpoints.hmd;
119
+ const hlgUp = windowHeight >= heightBreakpoints.hlg;
120
+ const hxlUp = windowHeight >= heightBreakpoints.hxl;
121
+ const hxxlUp = windowHeight >= heightBreakpoints.hxxl;
86
122
  // 객체 형태로 반환하여 breakpoint.sm 식으로 접근 가능
87
123
  return {
124
+ // 가로 브레이크포인트
125
+ xxxxs,
126
+ xxxs,
127
+ xxs,
88
128
  xs,
89
129
  sm,
90
130
  md,
91
131
  lg,
92
132
  xl,
93
133
  xxl,
134
+ xxxxsUp,
135
+ xxxsUp,
136
+ xxsUp,
94
137
  xsUp,
95
138
  smUp,
96
139
  mdUp,
97
140
  lgUp,
98
141
  xlUp,
99
142
  xxlUp,
143
+ // 세로 브레이크포인트
144
+ hxxs,
145
+ hxs,
146
+ hsm,
147
+ hmd,
148
+ hlg,
149
+ hxl,
150
+ hxxl,
151
+ hxxsUp,
152
+ hxsUp,
153
+ hsmUp,
154
+ hmdUp,
155
+ hlgUp,
156
+ hxlUp,
157
+ hxxlUp,
158
+ // 현재 크기
159
+ width: windowWidth,
160
+ height: windowHeight,
161
+ // 객체 형태
100
162
  breakpoint: {
163
+ xxxxs,
164
+ xxxs,
165
+ xxs,
101
166
  xs,
102
167
  sm,
103
168
  md,
104
169
  lg,
105
170
  xl,
106
171
  xxl,
172
+ xxxxsUp,
173
+ xxxsUp,
174
+ xxsUp,
107
175
  xsUp,
108
176
  smUp,
109
177
  mdUp,
@@ -111,6 +179,22 @@ const useBreakpoint = () => {
111
179
  xlUp,
112
180
  xxlUp,
113
181
  },
182
+ heightBreakpoint: {
183
+ hxxs,
184
+ hxs,
185
+ hsm,
186
+ hmd,
187
+ hlg,
188
+ hxl,
189
+ hxxl,
190
+ hxxsUp,
191
+ hxsUp,
192
+ hsmUp,
193
+ hmdUp,
194
+ hlgUp,
195
+ hxlUp,
196
+ hxxlUp,
197
+ },
114
198
  };
115
199
  };
116
200
  exports.useBreakpoint = useBreakpoint;
package/dist/src/hooks/useBreakpoint.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;;;AAEH,iCAA4C;AAG5C,qBAAqB;AACrB,MAAM,WAAW,GAAG;IAChB,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,IAAI;CACH,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACI,MAAM,aAAa,GAAG,GAAwB,EAAE;IACnD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAC1C,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CACxD,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAE1C,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,wCAAwC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC;IACzC,MAAM,GAAG,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAE3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,IAAI,GAAG,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC;IAC3C,MAAM,KAAK,GAAG,WAAW,IAAI,WAAW,CAAC,GAAG,CAAC;IAE7C,sCAAsC;IACtC,OAAO;QACH,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,EAAE;QACF,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,KAAK;QACL,UAAU,EAAE;YACR,EAAE;YACF,EAAE;YACF,EAAE;YACF,EAAE;YACF,EAAE;YACF,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,IAAI;YACJ,KAAK;SACR;KACJ,CAAC;AACN,CAAC,CAAC;AA5DW,QAAA,aAAa,iBA4DxB"}
1
+ {"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"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"}
package/dist/src/types/breakpoint.d.ts CHANGED
@@ -22,41 +22,93 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
  /**
25
- * Breakpoint state object
26
- * 브레이크포인트 상태 객체
25
+ * Breakpoint state object (width-based)
26
+ * 브레이크포인트 상태 객체 (가로 기준)
27
27
  */
28
28
  export interface BreakpointState {
29
- /** Extra small: < 600px */
29
+ /** 4x Extra small: < 256px (14rem) */
30
+ xxxxs: boolean;
31
+ /** 3x Extra small: < 288px (16rem) */
32
+ xxxs: boolean;
33
+ /** 2x Extra small: < 352px (18rem) */
34
+ xxs: boolean;
35
+ /** Extra small: < 640px (22rem) */
30
36
  xs: boolean;
31
- /** Small: < 900px */
37
+ /** Small: < 768px (40rem) */
32
38
  sm: boolean;
33
- /** Medium: < 1200px */
39
+ /** Medium: < 1024px (48rem) */
34
40
  md: boolean;
35
- /** Large: < 1536px */
41
+ /** Large: < 1280px (64rem) */
36
42
  lg: boolean;
37
- /** Extra large: < 1920px */
43
+ /** Extra large: < 1536px (80rem) */
38
44
  xl: boolean;
39
- /** Extra extra large: >= 1920px */
45
+ /** Extra extra large: >= 1536px (96rem) */
40
46
  xxl: boolean;
41
- /** >= 0px */
47
+ /** >= 224px (14rem) */
48
+ xxxxsUp: boolean;
49
+ /** >= 256px (16rem) */
50
+ xxxsUp: boolean;
51
+ /** >= 288px (18rem) */
52
+ xxsUp: boolean;
53
+ /** >= 352px (22rem) */
42
54
  xsUp: boolean;
43
- /** >= 600px */
55
+ /** >= 640px (40rem) */
44
56
  smUp: boolean;
45
- /** >= 900px */
57
+ /** >= 768px (48rem) */
46
58
  mdUp: boolean;
47
- /** >= 1200px */
59
+ /** >= 1024px (64rem) */
48
60
  lgUp: boolean;
49
- /** >= 1536px */
61
+ /** >= 1280px (80rem) */
50
62
  xlUp: boolean;
51
- /** >= 1920px */
63
+ /** >= 1536px (96rem) */
52
64
  xxlUp: boolean;
53
65
  }
66
+ /**
67
+ * Height breakpoint state object (height-based)
68
+ * 세로 브레이크포인트 상태 객체 (높이 기준)
69
+ */
70
+ export interface HeightBreakpointState {
71
+ /** Height < 400px */
72
+ hxxs: boolean;
73
+ /** Height < 500px */
74
+ hxs: boolean;
75
+ /** Height < 600px */
76
+ hsm: boolean;
77
+ /** Height < 768px */
78
+ hmd: boolean;
79
+ /** Height < 900px */
80
+ hlg: boolean;
81
+ /** Height < 1080px */
82
+ hxl: boolean;
83
+ /** Height >= 1080px */
84
+ hxxl: boolean;
85
+ /** Height >= 400px */
86
+ hxxsUp: boolean;
87
+ /** Height >= 500px */
88
+ hxsUp: boolean;
89
+ /** Height >= 600px */
90
+ hsmUp: boolean;
91
+ /** Height >= 768px */
92
+ hmdUp: boolean;
93
+ /** Height >= 900px */
94
+ hlgUp: boolean;
95
+ /** Height >= 1080px */
96
+ hxlUp: boolean;
97
+ /** Height >= 1080px (same as hxlUp) */
98
+ hxxlUp: boolean;
99
+ }
54
100
  /**
55
101
  * Return type of useBreakpoint hook
56
102
  * useBreakpoint 훅의 반환 타입
57
103
  */
58
- export interface UseBreakpointReturn extends BreakpointState {
59
- /** Breakpoint state object (same as root level) */
104
+ export interface UseBreakpointReturn extends BreakpointState, HeightBreakpointState {
105
+ /** Width breakpoint state object (same as root level) */
60
106
  breakpoint: BreakpointState;
107
+ /** Height breakpoint state object */
108
+ heightBreakpoint: HeightBreakpointState;
109
+ /** Current window width in pixels */
110
+ width: number;
111
+ /** Current window height in pixels */
112
+ height: number;
61
113
  }
62
114
  //# sourceMappingURL=breakpoint.d.ts.map
package/dist/src/types/breakpoint.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../src/types/breakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC5B,2BAA2B;IAC3B,EAAE,EAAE,OAAO,CAAC;IACZ,qBAAqB;IACrB,EAAE,EAAE,OAAO,CAAC;IACZ,uBAAuB;IACvB,EAAE,EAAE,OAAO,CAAC;IACZ,sBAAsB;IACtB,EAAE,EAAE,OAAO,CAAC;IACZ,4BAA4B;IAC5B,EAAE,EAAE,OAAO,CAAC;IACZ,mCAAmC;IACnC,GAAG,EAAE,OAAO,CAAC;IACb,aAAa;IACb,IAAI,EAAE,OAAO,CAAC;IACd,eAAe;IACf,IAAI,EAAE,OAAO,CAAC;IACd,eAAe;IACf,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IACxD,mDAAmD;IACnD,UAAU,EAAE,eAAe,CAAC;CAC/B"}
1
+ {"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../src/types/breakpoint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC5B,sCAAsC;IACtC,KAAK,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,sCAAsC;IACtC,GAAG,EAAE,OAAO,CAAC;IACb,mCAAmC;IACnC,EAAE,EAAE,OAAO,CAAC;IACZ,6BAA6B;IAC7B,EAAE,EAAE,OAAO,CAAC;IACZ,+BAA+B;IAC/B,EAAE,EAAE,OAAO,CAAC;IACZ,8BAA8B;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,oCAAoC;IACpC,EAAE,EAAE,OAAO,CAAC;IACZ,2CAA2C;IAC3C,GAAG,EAAE,OAAO,CAAC;IACb,uBAAuB;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,uBAAuB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,uBAAuB;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,wBAAwB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,wBAAwB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,wBAAwB;IACxB,KAAK,EAAE,OAAO,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,qBAAqB;IACrB,GAAG,EAAE,OAAO,CAAC;IACb,sBAAsB;IACtB,GAAG,EAAE,OAAO,CAAC;IACb,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,sBAAsB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,OAAO,CAAC;IACf,uBAAuB;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,MAAM,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,mBACb,SAAQ,eAAe,EACnB,qBAAqB;IACzB,yDAAyD;IACzD,UAAU,EAAE,eAAe,CAAC;IAC5B,qCAAqC;IACrC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;CAClB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ehfuse/forma",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "description": "Advanced React state management library with individual field subscriptions - supports both forms and general state management with useFormaState",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/esm/index.js",