@jenesei-software/jenesei-kit-react 2.3.1 → 2.3.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.
- package/build/area-outside.cjs.js +1 -1
- package/build/area-outside.es.js +1 -1
- package/build/area-preview.cjs.js +1 -1
- package/build/area-preview.es.js +1 -1
- package/build/area-skeleton.cjs.js +1 -1
- package/build/area-skeleton.es.js +1 -1
- package/build/button-6CFvwtSz.cjs +3 -0
- package/build/button-6CFvwtSz.cjs.map +1 -0
- package/build/button-D6Bg00Uh.js +120 -0
- package/build/button-D6Bg00Uh.js.map +1 -0
- package/build/{checkbox-Bxt8K0ZY.cjs → checkbox-9ue4f3-6.cjs} +2 -2
- package/build/{checkbox-Bxt8K0ZY.cjs.map → checkbox-9ue4f3-6.cjs.map} +1 -1
- package/build/{checkbox-DPkXe4_5.js → checkbox-TW5VSNui.js} +3 -3
- package/build/{checkbox-DPkXe4_5.js.map → checkbox-TW5VSNui.js.map} +1 -1
- package/build/component-button.cjs.js +1 -1
- package/build/component-button.es.js +1 -1
- package/build/component-checkbox.cjs.js +1 -1
- package/build/component-checkbox.es.js +1 -1
- package/build/component-date-picker.cjs.js +1 -1
- package/build/component-date-picker.es.js +1 -1
- package/build/component-icon.cjs.js +1 -1
- package/build/component-icon.es.js +1 -1
- package/build/component-input-otp.cjs.js +1 -1
- package/build/component-input-otp.es.js +1 -1
- package/build/component-input.cjs.js +1 -1
- package/build/component-input.es.js +1 -1
- package/build/component-pagination.cjs.js +1 -1
- package/build/component-pagination.es.js +1 -1
- package/build/component-popover.cjs.js +1 -1
- package/build/component-popover.es.js +1 -1
- package/build/component-select.cjs.js +1 -1
- package/build/component-select.es.js +1 -1
- package/build/component-textarea.cjs.js +1 -1
- package/build/component-textarea.es.js +1 -1
- package/build/component-toggle.cjs.js +1 -1
- package/build/component-toggle.es.js +1 -1
- package/build/component-tooltip.cjs.js +1 -1
- package/build/component-tooltip.es.js +1 -1
- package/build/component-typography.cjs.js +1 -1
- package/build/component-typography.es.js +1 -1
- package/build/components/button/component.d.ts +1 -2
- package/build/components/select/component.types.d.ts +1 -0
- package/build/components-error.cjs.js +1 -1
- package/build/components-error.es.js +1 -1
- package/build/{context-app-Dsa1tKlU.cjs → context-app-29ajupjq.cjs} +2 -2
- package/build/{context-app-Dsa1tKlU.cjs.map → context-app-29ajupjq.cjs.map} +1 -1
- package/build/{context-app-C9XoarPw.js → context-app-CxNgCfd2.js} +2 -2
- package/build/{context-app-C9XoarPw.js.map → context-app-CxNgCfd2.js.map} +1 -1
- package/build/context-app.cjs.js +1 -1
- package/build/context-app.es.js +1 -1
- package/build/{context-dialog-DctdSBC8.cjs → context-dialog-BLb0fPJw.cjs} +2 -2
- package/build/{context-dialog-DctdSBC8.cjs.map → context-dialog-BLb0fPJw.cjs.map} +1 -1
- package/build/{context-dialog-DzwL2ElF.js → context-dialog-IYNzoNOe.js} +2 -2
- package/build/{context-dialog-DzwL2ElF.js.map → context-dialog-IYNzoNOe.js.map} +1 -1
- package/build/context-dialog.cjs.js +1 -1
- package/build/context-dialog.es.js +1 -1
- package/build/{context-sonner-Dqw0jhwT.cjs → context-sonner-B-eO7pwI.cjs} +2 -2
- package/build/{context-sonner-Dqw0jhwT.cjs.map → context-sonner-B-eO7pwI.cjs.map} +1 -1
- package/build/{context-sonner-MO6uE8y0.js → context-sonner-CtCttHLD.js} +3 -3
- package/build/{context-sonner-MO6uE8y0.js.map → context-sonner-CtCttHLD.js.map} +1 -1
- package/build/context-sonner.cjs.js +1 -1
- package/build/context-sonner.es.js +1 -1
- package/build/{date-picker-ATktGA1c.cjs → date-picker-9rpPgP0a.cjs} +2 -2
- package/build/{date-picker-ATktGA1c.cjs.map → date-picker-9rpPgP0a.cjs.map} +1 -1
- package/build/{date-picker-D81n3KbO.js → date-picker-BvKtH7lp.js} +6 -6
- package/build/{date-picker-D81n3KbO.js.map → date-picker-BvKtH7lp.js.map} +1 -1
- package/build/{error-BdFba_yV.cjs → error-aQfsl_Kl.cjs} +1 -1
- package/build/{error-BdFba_yV.cjs.map → error-aQfsl_Kl.cjs.map} +1 -1
- package/build/{error-BFb2NCum.js → error-iaB6e_aq.js} +1 -1
- package/build/{error-BFb2NCum.js.map → error-iaB6e_aq.js.map} +1 -1
- package/build/hooks/use-fps/index.d.ts +2 -0
- package/build/hooks/use-fps/use.d.ts +2 -0
- package/build/hooks/use-fps/use.types.d.ts +10 -0
- package/build/hooks-use-deep-compare-memoize.cjs.js +1 -1
- package/build/hooks-use-deep-compare-memoize.es.js +1 -1
- package/build/hooks-use-deep-memo.cjs.js +1 -1
- package/build/hooks-use-deep-memo.es.js +1 -1
- package/build/hooks-use-fps.cjs.js +3 -0
- package/build/hooks-use-fps.cjs.js.map +1 -0
- package/build/hooks-use-fps.d.ts +2 -0
- package/build/hooks-use-fps.es.js +46 -0
- package/build/hooks-use-fps.es.js.map +1 -0
- package/build/{icon-Ddkbk3-m.cjs → icon-DyjaxKWq.cjs} +2 -2
- package/build/{icon-Ddkbk3-m.cjs.map → icon-DyjaxKWq.cjs.map} +1 -1
- package/build/{icon-D2w7GViT.js → icon-Y-IZxLXB.js} +2 -2
- package/build/{icon-D2w7GViT.js.map → icon-Y-IZxLXB.js.map} +1 -1
- package/build/index.cjs.js +1 -1
- package/build/index.d.ts +1 -0
- package/build/index.es.js +46 -44
- package/build/{input-B9ceeR9v.js → input-Buf_HFGH.js} +34 -30
- package/build/{input-B9ceeR9v.js.map → input-Buf_HFGH.js.map} +1 -1
- package/build/{input-CmdwwrV2.cjs → input-DMm67Wyr.cjs} +3 -3
- package/build/{input-CmdwwrV2.cjs.map → input-DMm67Wyr.cjs.map} +1 -1
- package/build/input-otp-MDjIcfVu.cjs +3 -0
- package/build/input-otp-MDjIcfVu.cjs.map +1 -0
- package/build/{input-otp-CeMGm5Xq.js → input-otp-q4zKk_nP.js} +26 -26
- package/build/input-otp-q4zKk_nP.js.map +1 -0
- package/build/{isEqual-0jZ23Bb6.js → isEqual-BHn_Fkkw.js} +1 -1
- package/build/{isEqual-0jZ23Bb6.js.map → isEqual-BHn_Fkkw.js.map} +1 -1
- package/build/{isEqual-BA0P9-C8.cjs → isEqual-Q-mEN2md.cjs} +1 -1
- package/build/{isEqual-BA0P9-C8.cjs.map → isEqual-Q-mEN2md.cjs.map} +1 -1
- package/build/{outside-CXyCk8h1.cjs → outside-BP81eKu0.cjs} +2 -2
- package/build/{outside-CXyCk8h1.cjs.map → outside-BP81eKu0.cjs.map} +1 -1
- package/build/{outside-DopxX0PZ.js → outside-_oOot7z3.js} +6 -6
- package/build/{outside-DopxX0PZ.js.map → outside-_oOot7z3.js.map} +1 -1
- package/build/{pagination-BluJtJl7.js → pagination-BFTnpYCz.js} +33 -23
- package/build/pagination-BFTnpYCz.js.map +1 -0
- package/build/pagination-ZXl2fVKZ.cjs +3 -0
- package/build/pagination-ZXl2fVKZ.cjs.map +1 -0
- package/build/{popover-DHWcQVp1.js → popover--NOw9qfd.js} +1 -1
- package/build/{popover-DHWcQVp1.js.map → popover--NOw9qfd.js.map} +1 -1
- package/build/{popover-DQkn4RWI.cjs → popover-B1KASIeD.cjs} +1 -1
- package/build/{popover-DQkn4RWI.cjs.map → popover-B1KASIeD.cjs.map} +1 -1
- package/build/{preview-Bc2qdyd4.js → preview-C-mtYSGG.js} +20 -20
- package/build/preview-C-mtYSGG.js.map +1 -0
- package/build/preview-p2i9Ju3I.cjs +3 -0
- package/build/preview-p2i9Ju3I.cjs.map +1 -0
- package/build/select-7yVS14II.cjs +9 -0
- package/build/select-7yVS14II.cjs.map +1 -0
- package/build/{select-CCbtkj6f.js → select-BdGRG7zf.js} +1069 -1054
- package/build/select-BdGRG7zf.js.map +1 -0
- package/build/skeleton-BfOHjRgT.cjs +3 -0
- package/build/skeleton-BfOHjRgT.cjs.map +1 -0
- package/build/skeleton-wRSg85X7.js +39 -0
- package/build/skeleton-wRSg85X7.js.map +1 -0
- package/build/{textarea-DInJb6Lz.cjs → textarea-Bm3ki2-6.cjs} +2 -2
- package/build/{textarea-DInJb6Lz.cjs.map → textarea-Bm3ki2-6.cjs.map} +1 -1
- package/build/{textarea-jIGZ0JdP.js → textarea-DLZq4RT-.js} +2 -2
- package/build/{textarea-jIGZ0JdP.js.map → textarea-DLZq4RT-.js.map} +1 -1
- package/build/{toggle-D1nXs-LD.js → toggle-Bzru0yZw.js} +2 -2
- package/build/{toggle-D1nXs-LD.js.map → toggle-Bzru0yZw.js.map} +1 -1
- package/build/{toggle-BEmUm0of.cjs → toggle-CdUVhH0Z.cjs} +2 -2
- package/build/{toggle-BEmUm0of.cjs.map → toggle-CdUVhH0Z.cjs.map} +1 -1
- package/build/{typography-BKp4OAQI.cjs → typography-DzYrzZZb.cjs} +2 -2
- package/build/{typography-BKp4OAQI.cjs.map → typography-DzYrzZZb.cjs.map} +1 -1
- package/build/{typography-07KEDl9_.js → typography-Tebu6c9L.js} +2 -2
- package/build/{typography-07KEDl9_.js.map → typography-Tebu6c9L.js.map} +1 -1
- package/package.json +7 -1
- package/build/button-C1w25-Hk.js +0 -102
- package/build/button-C1w25-Hk.js.map +0 -1
- package/build/button-CHEeSypf.cjs +0 -3
- package/build/button-CHEeSypf.cjs.map +0 -1
- package/build/input-otp-CJfZoWd7.cjs +0 -3
- package/build/input-otp-CJfZoWd7.cjs.map +0 -1
- package/build/input-otp-CeMGm5Xq.js.map +0 -1
- package/build/pagination-BluJtJl7.js.map +0 -1
- package/build/pagination-VMAFNidU.cjs +0 -3
- package/build/pagination-VMAFNidU.cjs.map +0 -1
- package/build/preview-BLu-NOv2.cjs +0 -3
- package/build/preview-BLu-NOv2.cjs.map +0 -1
- package/build/preview-Bc2qdyd4.js.map +0 -1
- package/build/select-CCbtkj6f.js.map +0 -1
- package/build/select-CGXyVf57.cjs +0 -9
- package/build/select-CGXyVf57.cjs.map +0 -1
- package/build/skeleton-Bh6zA5iB.js +0 -39
- package/build/skeleton-Bh6zA5iB.js.map +0 -1
- package/build/skeleton-DmaXsm9C.cjs +0 -3
- package/build/skeleton-DmaXsm9C.cjs.map +0 -1
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
const f=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),a=require("./functions-CZrZU5U0.cjs"),u=require("./component-CbJ_P8yq.cjs");let c=require("react/jsx-runtime"),s=require("react");var o=e=>{const[n,r]=(0,s.useState)(e.defaultVisible??!1),l="visible"in e?e.visible:null,i="time"in e?e.time:null;return(0,s.useEffect)(()=>{if(l!==null&&i===null)r(l);else if(l!==null&&i!==null)if(l===!1)r(!1);else{const S=setTimeout(()=>{r(!0)},i);return()=>{clearTimeout(S)}}},[l,i]),(0,c.jsx)(u.Stack,{...e,className:a.setClasses([t.CSS_CLASS.area.skeleton.root,n===!1?t.CSS_CLASS.area.skeleton.visibleFalse:!1,n===!1?t.CSS_CLASS.keyframe.backgroundMove:!1,t.CSS_CLASS.transition.color,e.className]),style:a.setStyles([{[t.CSS_VARS_RAW.area.skeleton.color]:e.color?t.CSS_VARS.palette[e.color]:e.isInheritColor?"inherit":(e.type==="secondary",t.CSS_VARS.palette.fillQuaternaryLight),[t.CSS_VARS_RAW.area.skeleton.line]:e.type==="secondary"?t.CSS_VARS.palette.fillTertiaryLight:t.CSS_VARS.palette.fillQuinaryLight},e.style]),children:e.children})};Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return o}});
|
|
2
|
+
|
|
3
|
+
//# sourceMappingURL=skeleton-BfOHjRgT.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton-BfOHjRgT.cjs","names":[],"sources":["../src/areas/skeleton/area.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack/component';\nimport { CSS_CLASS, CSS_VARS } from '@local/styles/utils';\nimport { CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, useEffect, useState } from 'react';\n\nimport { ISkeleton } from './area.types';\n\nexport const Skeleton: FC<ISkeleton> = (props) => {\n const [visible, setVisible] = useState(props.defaultVisible ?? false);\n\n const propsVisible = 'visible' in props ? props.visible : null;\n const propsTime = 'time' in props ? props.time : null;\n\n useEffect(() => {\n if (propsVisible !== null && propsTime === null) {\n setVisible(propsVisible);\n } else if (propsVisible !== null && propsTime !== null) {\n if (propsVisible === false) {\n setVisible(false);\n } else {\n const timer = setTimeout(() => {\n setVisible(true);\n }, propsTime);\n\n return () => {\n clearTimeout(timer);\n };\n }\n }\n }, [propsVisible, propsTime]);\n\n return (\n <Stack\n {...props}\n className={setClasses([\n CSS_CLASS.area.skeleton.root,\n visible === false ? CSS_CLASS.area.skeleton.visibleFalse : false,\n visible === false ? CSS_CLASS.keyframe.backgroundMove : false,\n CSS_CLASS.transition.color,\n props.className,\n ])}\n style={setStyles([\n {\n [CSS_VARS_RAW.area.skeleton.color]: props.color\n ? CSS_VARS.palette[props.color]\n : props.isInheritColor\n ? 'inherit'\n : props.type === 'secondary'\n ? CSS_VARS.palette.fillQuaternaryLight\n : CSS_VARS.palette.fillQuaternaryLight,\n [CSS_VARS_RAW.area.skeleton.line]:\n props.type === 'secondary' ? CSS_VARS.palette.fillTertiaryLight : CSS_VARS.palette.fillQuinaryLight,\n },\n props.style,\n ])}\n >\n {props.children}\n </Stack>\n );\n};\n"],"mappings":"4MASA,IAAa,EAA2B,GAAU,CAChD,KAAM,CAAC,EAAS,CAAA,KAAA,EAAA,UAAuB,EAAM,gBAAkB,EAAA,EAEzD,EAAe,YAAa,EAAQ,EAAM,QAAU,KACpD,EAAY,SAAU,EAAQ,EAAM,KAAO,KAEjD,SAAA,EAAA,WAAA,IAAgB,CACd,GAAI,IAAiB,MAAQ,IAAc,KACzC,EAAW,CAAA,UACF,IAAiB,MAAQ,IAAc,KAChD,GAAI,IAAiB,GACnB,EAAW,EAAA,MACN,CACL,MAAM,EAAQ,WAAA,IAAiB,CAC7B,EAAW,EAAA,GACV,CAAA,EAEH,MAAA,IAAa,CACX,aAAa,CAAA,KAIlB,CAAC,EAAc,CAAA,CAAU,KAG1B,EAAA,KAAC,EAAA,MAAD,CACE,GAAI,EACJ,UAAW,EAAA,WAAW,CACpB,EAAA,UAAU,KAAK,SAAS,KACxB,IAAY,GAAQ,EAAA,UAAU,KAAK,SAAS,aAAe,GAC3D,IAAY,GAAQ,EAAA,UAAU,SAAS,eAAiB,GACxD,EAAA,UAAU,WAAW,MACrB,EAAM,UACP,EACD,MAAO,EAAA,UAAU,CACf,EACG,EAAA,aAAa,KAAK,SAAS,KAAA,EAAQ,EAAM,MACtC,EAAA,SAAS,QAAQ,EAAM,KAAA,EACvB,EAAM,eACJ,WACA,EAAM,OAAS,YACb,EAAA,SAAS,QAAQ,sBAExB,EAAA,aAAa,KAAK,SAAS,IAAA,EAC1B,EAAM,OAAS,YAAc,EAAA,SAAS,QAAQ,kBAAoB,EAAA,SAAS,QAAQ,kBAEvF,EAAM,KAAA,CACP,WAEA,EAAM,SACD"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { i as n, n as a, r as t } from "./utils-BRgi6734.js";
|
|
2
|
+
import { n as f, t as m } from "./functions-DzX-pTN8.js";
|
|
3
|
+
import { t as c } from "./component-DGfyD5-u.js";
|
|
4
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
5
|
+
import { useEffect as S, useState as y } from "react";
|
|
6
|
+
var C = (e) => {
|
|
7
|
+
const [r, s] = y(e.defaultVisible ?? !1), l = "visible" in e ? e.visible : null, i = "time" in e ? e.time : null;
|
|
8
|
+
return S(() => {
|
|
9
|
+
if (l !== null && i === null) s(l);
|
|
10
|
+
else if (l !== null && i !== null) if (l === !1) s(!1);
|
|
11
|
+
else {
|
|
12
|
+
const o = setTimeout(() => {
|
|
13
|
+
s(!0);
|
|
14
|
+
}, i);
|
|
15
|
+
return () => {
|
|
16
|
+
clearTimeout(o);
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
}, [l, i]), /* @__PURE__ */ u(c, {
|
|
20
|
+
...e,
|
|
21
|
+
className: m([
|
|
22
|
+
a.area.skeleton.root,
|
|
23
|
+
r === !1 ? a.area.skeleton.visibleFalse : !1,
|
|
24
|
+
r === !1 ? a.keyframe.backgroundMove : !1,
|
|
25
|
+
a.transition.color,
|
|
26
|
+
e.className
|
|
27
|
+
]),
|
|
28
|
+
style: f([{
|
|
29
|
+
[n.area.skeleton.color]: e.color ? t.palette[e.color] : e.isInheritColor ? "inherit" : e.type === "secondary" ? t.palette.fillQuaternaryLight : t.palette.fillQuaternaryLight,
|
|
30
|
+
[n.area.skeleton.line]: e.type === "secondary" ? t.palette.fillTertiaryLight : t.palette.fillQuinaryLight
|
|
31
|
+
}, e.style]),
|
|
32
|
+
children: e.children
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
C as t
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=skeleton-wRSg85X7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton-wRSg85X7.js","names":[],"sources":["../src/areas/skeleton/area.tsx"],"sourcesContent":["import { Stack } from '@local/components/stack/component';\nimport { CSS_CLASS, CSS_VARS } from '@local/styles/utils';\nimport { CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, useEffect, useState } from 'react';\n\nimport { ISkeleton } from './area.types';\n\nexport const Skeleton: FC<ISkeleton> = (props) => {\n const [visible, setVisible] = useState(props.defaultVisible ?? false);\n\n const propsVisible = 'visible' in props ? props.visible : null;\n const propsTime = 'time' in props ? props.time : null;\n\n useEffect(() => {\n if (propsVisible !== null && propsTime === null) {\n setVisible(propsVisible);\n } else if (propsVisible !== null && propsTime !== null) {\n if (propsVisible === false) {\n setVisible(false);\n } else {\n const timer = setTimeout(() => {\n setVisible(true);\n }, propsTime);\n\n return () => {\n clearTimeout(timer);\n };\n }\n }\n }, [propsVisible, propsTime]);\n\n return (\n <Stack\n {...props}\n className={setClasses([\n CSS_CLASS.area.skeleton.root,\n visible === false ? CSS_CLASS.area.skeleton.visibleFalse : false,\n visible === false ? CSS_CLASS.keyframe.backgroundMove : false,\n CSS_CLASS.transition.color,\n props.className,\n ])}\n style={setStyles([\n {\n [CSS_VARS_RAW.area.skeleton.color]: props.color\n ? CSS_VARS.palette[props.color]\n : props.isInheritColor\n ? 'inherit'\n : props.type === 'secondary'\n ? CSS_VARS.palette.fillQuaternaryLight\n : CSS_VARS.palette.fillQuaternaryLight,\n [CSS_VARS_RAW.area.skeleton.line]:\n props.type === 'secondary' ? CSS_VARS.palette.fillTertiaryLight : CSS_VARS.palette.fillQuinaryLight,\n },\n props.style,\n ])}\n >\n {props.children}\n </Stack>\n );\n};\n"],"mappings":";;;;;AASA,IAAa,IAAA,CAA2B,MAAU;AAChD,QAAM,CAAC,GAAS,CAAA,IAAc,EAAS,EAAM,kBAAkB,EAAA,GAEzD,IAAe,aAAa,IAAQ,EAAM,UAAU,MACpD,IAAY,UAAU,IAAQ,EAAM,OAAO;AAEjD,SAAA,EAAA,MAAgB;AACd,QAAI,MAAiB,QAAQ,MAAc,KACzC,CAAA,EAAW,CAAA;AAAA,aACF,MAAiB,QAAQ,MAAc,KAChD,KAAI,MAAiB,GACnB,CAAA,EAAW,EAAA;AAAA,SACN;AACL,YAAM,IAAQ,WAAA,MAAiB;AAC7B,QAAA,EAAW,EAAA;AAAA,SACV,CAAA;AAEH,aAAA,MAAa;AACX,qBAAa,CAAA;AAAA;;KAIlB,CAAC,GAAc,CAAA,CAAU,GAG1B,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,WAAW,EAAW;AAAA,MACpB,EAAU,KAAK,SAAS;AAAA,MACxB,MAAY,KAAQ,EAAU,KAAK,SAAS,eAAe;AAAA,MAC3D,MAAY,KAAQ,EAAU,SAAS,iBAAiB;AAAA,MACxD,EAAU,WAAW;AAAA,MACrB,EAAM;AAAA,KACP;AAAA,IACD,OAAO,EAAU,CACf;AAAA,OACG,EAAa,KAAK,SAAS,KAAA,GAAQ,EAAM,QACtC,EAAS,QAAQ,EAAM,KAAA,IACvB,EAAM,iBACJ,YACA,EAAM,SAAS,cACb,EAAS,QAAQ,sBACjB,EAAS,QAAQ;AAAA,OACxB,EAAa,KAAK,SAAS,IAAA,GAC1B,EAAM,SAAS,cAAc,EAAS,QAAQ,oBAAoB,EAAS,QAAQ;AAAA,OAEvF,EAAM,KAAA,CACP;AAAA,cAEA,EAAM;AAAA,GACD"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const f=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),s=require("./functions-CZrZU5U0.cjs"),R=require("./hooks-use-merge-refs.cjs.js"),y=require("./hooks-use-typography-styles.cjs.js"),b=require("./error-
|
|
1
|
+
const f=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),s=require("./functions-CZrZU5U0.cjs"),R=require("./hooks-use-merge-refs.cjs.js"),y=require("./hooks-use-typography-styles.cjs.js"),b=require("./error-aQfsl_Kl.cjs");let r=require("react/jsx-runtime"),i=require("react");var S=t.EXTRA_VALUE.font.size*t.EXTRA_VALUE.font.height,w=e=>{const o=(0,i.useRef)(null),m=R.useMergeRefs([o,e.ref]),l=(0,i.useMemo)(()=>e.maxRows?e.maxRows*S:0,[e.maxRows]),c=(0,i.useMemo)(()=>e.minRows?e.minRows*S:S,[e.minRows]),u=(0,i.useCallback)(()=>{const n=o.current;if(n&&e.isAutoHeight){n.style.height="auto";const a=Math.min(n.scrollHeight,l);n.style.height=`${a}px`}},[e.isAutoHeight,l]),h=(0,i.useCallback)(n=>{if(e.isNoSpaces){const a=n.replace(/\s+/g,"");e.onChange?.(a)}else e.onChange?.(n)},[e.isNoSpaces,e.onChange]);(0,i.useEffect)(()=>{e.isAutoHeight&&requestAnimationFrame(u)},[e.value,u,e.isAutoHeight]);const{className:d,style:g}=y.useTypographyStyles({sx:{family:e.isNiceNumber?"Roboto Mono":e.sxTypography?.family,size:16,weight:e.isBold?"700":"400",height:"1.2",...e?.sxTypography}}),{className:C,style:x}=(0,i.useMemo)(()=>{const n=s.setClasses([t.CSS_CLASS.component.textarea.wrapper,t.CSS_CLASS.transition.color,e.error?.isError&&t.CSS_CLASS.isError,t.CSS_CLASS.control[e.isDisabled?"none":e.control??"boxShadow"],e.isZeroRadius&&t.CSS_CLASS.component.textarea.wrapperIsZeroRadius,e.isHidden&&t.CSS_CLASS.component.textarea.wrapperIsHidden,e.isHiddenBorder&&t.CSS_CLASS.component.textarea.wrapperIsHiddenBorder,e.isFullRadius&&t.CSS_CLASS.component.textarea.wrapperIsFullRadius,!e.isResize&&t.CSS_CLASS.component.textarea.wrapperIsNotResize,e.className]),a={};return a[t.CSS_VARS_RAW.component.textarea.radius]=t.CSS_VARS.size[e.size].radius,a[t.CSS_VARS_RAW.component.textarea.borderColor]=t.CSS_VARS.genre.textarea[e.genre].border,a[t.CSS_VARS_RAW.component.textarea.background]=t.CSS_VARS.genre.textarea[e.genre].background,a[t.CSS_VARS_RAW.component.textarea.padding]=`calc(${t.CSS_VARS.size[e.size].padding} - 4px) 0px calc(${t.CSS_VARS.size[e.size].padding} - 4px) ${t.CSS_VARS.size[e.size].padding}`,{className:n,style:s.setStyles([Object.keys(a).length?a:void 0,e.style])}},[e.className,e.size,e.style,e.isDisabled,e.isHidden,e.isFullRadius,e.isHiddenBorder,e.isZeroRadius,e.genre,e.control,e.error?.isError,e.isResize]),{className:_,style:A}=(0,i.useMemo)(()=>{const n=s.setClasses([t.CSS_CLASS.component.textarea.root,t.CSS_CLASS.scrollbarGutter.stable,t.CSS_CLASS.transition.color,d]),a={};return a[t.CSS_VARS_RAW.component.textarea.color]=t.CSS_VARS.genre.textarea[e.genre].color,a[t.CSS_VARS_RAW.component.textarea.placeholderColor]=t.CSS_VARS.genre.textarea[e.genre].placeholder,{className:n,style:s.setStyles([e.style,g,Object.keys(a).length?a:void 0])}},[e.style,e.genre,d,g]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:C,style:x,children:(0,r.jsx)("textarea",{className:_,tabIndex:0,ref:m,maxLength:e.maxLength,minLength:e.minLength,disabled:e.isDisabled,readOnly:e.isReadOnly,required:e.isRequired,defaultValue:e.defaultValue===null?"":e.defaultValue,value:e.value===null?"":e.value,rows:e.minRows,placeholder:e.placeholder,onChange:n=>h(n.target.value),onBlur:e.onBlur,onFocus:e.onFocus,onKeyDown:e.onKeyDown,onMouseDown:e.onMouseDown,onClick:e.onClick,name:e.name,"aria-label":e.ariaLabel??e.name,autoComplete:e.autoComplete,id:e.id,style:{...A,minHeight:`${c}px`,maxHeight:e.isResize?"none":e.isAutoHeight?`${l}px`:`${c}px`}})}),e?.error?.isError&&(0,r.jsx)(b.ErrorMessage,{size:e?.error.size??e.size,sxTypography:{size:"16px",weight:"400",...e?.error.sxTypography},...e.error})]})};Object.defineProperty(exports,"TextArea",{enumerable:!0,get:function(){return w}});
|
|
2
2
|
|
|
3
|
-
//# sourceMappingURL=textarea-
|
|
3
|
+
//# sourceMappingURL=textarea-Bm3ki2-6.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-
|
|
1
|
+
{"version":3,"file":"textarea-Bm3ki2-6.cjs","names":[],"sources":["../src/components/textarea/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles/use';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW, EXTRA_VALUE } from '@local/styles/utils';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { ITextArea } from './component.types';\n\nconst lineHeight = EXTRA_VALUE.font.size * EXTRA_VALUE.font.height;\n\nexport const TextArea = (props: ITextArea) => {\n const refLocal = useRef<HTMLTextAreaElement>(null);\n const ref = useMergeRefs([refLocal, props.ref]);\n\n const maxHeight = useMemo(() => (props.maxRows ? props.maxRows * lineHeight : 0), [props.maxRows]);\n const minHeight = useMemo(() => (props.minRows ? props.minRows * lineHeight : lineHeight), [props.minRows]);\n\n const resizeTextarea = useCallback(() => {\n const el = refLocal.current;\n if (el && props.isAutoHeight) {\n el.style.height = 'auto';\n const newHeight = Math.min(el.scrollHeight, maxHeight);\n el.style.height = `${newHeight}px`;\n }\n }, [props.isAutoHeight, maxHeight]);\n\n const handleOnChange = useCallback(\n (value: string) => {\n if (props.isNoSpaces) {\n const valueWithoutSpaces = value.replace(/\\s+/g, '');\n props.onChange?.(valueWithoutSpaces);\n } else {\n props.onChange?.(value);\n }\n },\n [props.isNoSpaces, props.onChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n useEffect(() => {\n if (props.isAutoHeight) {\n requestAnimationFrame(resizeTextarea);\n }\n }, [props.value, resizeTextarea, props.isAutoHeight]);\n\n const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n sx: {\n family: props.isNiceNumber ? 'Roboto Mono' : props.sxTypography?.family,\n size: 16,\n weight: props.isBold ? '700' : '400',\n height: '1.2',\n ...props?.sxTypography,\n },\n });\n\n const { className, style } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.textarea.wrapper,\n CSS_CLASS.transition.color,\n props.error?.isError && CSS_CLASS.isError,\n CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n props.isZeroRadius && CSS_CLASS.component.textarea.wrapperIsZeroRadius,\n props.isHidden && CSS_CLASS.component.textarea.wrapperIsHidden,\n props.isHiddenBorder && CSS_CLASS.component.textarea.wrapperIsHiddenBorder,\n props.isFullRadius && CSS_CLASS.component.textarea.wrapperIsFullRadius,\n !props.isResize && CSS_CLASS.component.textarea.wrapperIsNotResize,\n props.className,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.textarea.radius] = CSS_VARS.size[props.size].radius;\n vars[CSS_VARS_RAW.component.textarea.borderColor] = CSS_VARS.genre.textarea[props.genre].border;\n vars[CSS_VARS_RAW.component.textarea.background] = CSS_VARS.genre.textarea[props.genre].background;\n vars[CSS_VARS_RAW.component.textarea.padding] =\n `calc(${CSS_VARS.size[props.size].padding} - 4px) 0px calc(${CSS_VARS.size[props.size].padding} - 4px) ${CSS_VARS.size[props.size].padding}`;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n return { className, style };\n }, [\n props.className,\n props.size,\n props.style,\n props.isDisabled,\n props.isHidden,\n props.isFullRadius,\n props.isHiddenBorder,\n props.isZeroRadius,\n props.genre,\n props.control,\n props.error?.isError,\n props.isResize,\n ]);\n\n const { className: classNameTextarea, style: styleTextarea } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.textarea.root,\n CSS_CLASS.scrollbarGutter.stable,\n CSS_CLASS.transition.color,\n classNameTypography,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.textarea.color] = CSS_VARS.genre.textarea[props.genre].color;\n vars[CSS_VARS_RAW.component.textarea.placeholderColor] = CSS_VARS.genre.textarea[props.genre].placeholder;\n\n const style = setStyles([props.style, styleTypography, Object.keys(vars).length ? vars : undefined]);\n\n return { className, style };\n }, [props.style, props.genre, classNameTypography, styleTypography]);\n\n return (\n <>\n <div className={className} style={style}>\n <textarea\n className={classNameTextarea}\n tabIndex={0}\n ref={ref}\n maxLength={props.maxLength}\n minLength={props.minLength}\n disabled={props.isDisabled}\n readOnly={props.isReadOnly}\n required={props.isRequired}\n defaultValue={props.defaultValue === null ? '' : props.defaultValue}\n value={props.value === null ? '' : props.value}\n rows={props.minRows}\n placeholder={props.placeholder}\n onChange={(event) => handleOnChange(event.target.value)}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onKeyDown={props.onKeyDown}\n onMouseDown={props.onMouseDown}\n onClick={props.onClick}\n name={props.name}\n aria-label={props.ariaLabel ?? props.name}\n autoComplete={props.autoComplete}\n id={props.id}\n style={{\n ...styleTextarea,\n minHeight: `${minHeight}px`,\n maxHeight: props.isResize ? 'none' : props.isAutoHeight ? `${maxHeight}px` : `${minHeight}px`,\n }}\n />\n </div>\n\n {props?.error?.isError && (\n <ErrorMessage\n size={props?.error.size ?? props.size}\n sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n {...props.error}\n />\n )}\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { i as l, n, r as i, t as x } from "./utils-BRgi6734.js";
|
|
|
2
2
|
import { n as y, t as R } from "./functions-DzX-pTN8.js";
|
|
3
3
|
import { useMergeRefs as N } from "./hooks-use-merge-refs.es.js";
|
|
4
4
|
import { useTypographyStyles as A } from "./hooks-use-typography-styles.es.js";
|
|
5
|
-
import { t as v } from "./error-
|
|
5
|
+
import { t as v } from "./error-iaB6e_aq.js";
|
|
6
6
|
import { Fragment as T, jsx as r, jsxs as E } from "react/jsx-runtime";
|
|
7
7
|
import { useCallback as f, useEffect as L, useMemo as s, useRef as k } from "react";
|
|
8
8
|
var c = x.font.size * x.font.height, O = (e) => {
|
|
@@ -129,4 +129,4 @@ export {
|
|
|
129
129
|
O as t
|
|
130
130
|
};
|
|
131
131
|
|
|
132
|
-
//# sourceMappingURL=textarea-
|
|
132
|
+
//# sourceMappingURL=textarea-DLZq4RT-.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-
|
|
1
|
+
{"version":3,"file":"textarea-DLZq4RT-.js","names":[],"sources":["../src/components/textarea/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles/use';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW, EXTRA_VALUE } from '@local/styles/utils';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { ITextArea } from './component.types';\n\nconst lineHeight = EXTRA_VALUE.font.size * EXTRA_VALUE.font.height;\n\nexport const TextArea = (props: ITextArea) => {\n const refLocal = useRef<HTMLTextAreaElement>(null);\n const ref = useMergeRefs([refLocal, props.ref]);\n\n const maxHeight = useMemo(() => (props.maxRows ? props.maxRows * lineHeight : 0), [props.maxRows]);\n const minHeight = useMemo(() => (props.minRows ? props.minRows * lineHeight : lineHeight), [props.minRows]);\n\n const resizeTextarea = useCallback(() => {\n const el = refLocal.current;\n if (el && props.isAutoHeight) {\n el.style.height = 'auto';\n const newHeight = Math.min(el.scrollHeight, maxHeight);\n el.style.height = `${newHeight}px`;\n }\n }, [props.isAutoHeight, maxHeight]);\n\n const handleOnChange = useCallback(\n (value: string) => {\n if (props.isNoSpaces) {\n const valueWithoutSpaces = value.replace(/\\s+/g, '');\n props.onChange?.(valueWithoutSpaces);\n } else {\n props.onChange?.(value);\n }\n },\n [props.isNoSpaces, props.onChange],\n );\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n useEffect(() => {\n if (props.isAutoHeight) {\n requestAnimationFrame(resizeTextarea);\n }\n }, [props.value, resizeTextarea, props.isAutoHeight]);\n\n const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n sx: {\n family: props.isNiceNumber ? 'Roboto Mono' : props.sxTypography?.family,\n size: 16,\n weight: props.isBold ? '700' : '400',\n height: '1.2',\n ...props?.sxTypography,\n },\n });\n\n const { className, style } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.textarea.wrapper,\n CSS_CLASS.transition.color,\n props.error?.isError && CSS_CLASS.isError,\n CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n props.isZeroRadius && CSS_CLASS.component.textarea.wrapperIsZeroRadius,\n props.isHidden && CSS_CLASS.component.textarea.wrapperIsHidden,\n props.isHiddenBorder && CSS_CLASS.component.textarea.wrapperIsHiddenBorder,\n props.isFullRadius && CSS_CLASS.component.textarea.wrapperIsFullRadius,\n !props.isResize && CSS_CLASS.component.textarea.wrapperIsNotResize,\n props.className,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.textarea.radius] = CSS_VARS.size[props.size].radius;\n vars[CSS_VARS_RAW.component.textarea.borderColor] = CSS_VARS.genre.textarea[props.genre].border;\n vars[CSS_VARS_RAW.component.textarea.background] = CSS_VARS.genre.textarea[props.genre].background;\n vars[CSS_VARS_RAW.component.textarea.padding] =\n `calc(${CSS_VARS.size[props.size].padding} - 4px) 0px calc(${CSS_VARS.size[props.size].padding} - 4px) ${CSS_VARS.size[props.size].padding}`;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n return { className, style };\n }, [\n props.className,\n props.size,\n props.style,\n props.isDisabled,\n props.isHidden,\n props.isFullRadius,\n props.isHiddenBorder,\n props.isZeroRadius,\n props.genre,\n props.control,\n props.error?.isError,\n props.isResize,\n ]);\n\n const { className: classNameTextarea, style: styleTextarea } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.textarea.root,\n CSS_CLASS.scrollbarGutter.stable,\n CSS_CLASS.transition.color,\n classNameTypography,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.textarea.color] = CSS_VARS.genre.textarea[props.genre].color;\n vars[CSS_VARS_RAW.component.textarea.placeholderColor] = CSS_VARS.genre.textarea[props.genre].placeholder;\n\n const style = setStyles([props.style, styleTypography, Object.keys(vars).length ? vars : undefined]);\n\n return { className, style };\n }, [props.style, props.genre, classNameTypography, styleTypography]);\n\n return (\n <>\n <div className={className} style={style}>\n <textarea\n className={classNameTextarea}\n tabIndex={0}\n ref={ref}\n maxLength={props.maxLength}\n minLength={props.minLength}\n disabled={props.isDisabled}\n readOnly={props.isReadOnly}\n required={props.isRequired}\n defaultValue={props.defaultValue === null ? '' : props.defaultValue}\n value={props.value === null ? '' : props.value}\n rows={props.minRows}\n placeholder={props.placeholder}\n onChange={(event) => handleOnChange(event.target.value)}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onKeyDown={props.onKeyDown}\n onMouseDown={props.onMouseDown}\n onClick={props.onClick}\n name={props.name}\n aria-label={props.ariaLabel ?? props.name}\n autoComplete={props.autoComplete}\n id={props.id}\n style={{\n ...styleTextarea,\n minHeight: `${minHeight}px`,\n maxHeight: props.isResize ? 'none' : props.isAutoHeight ? `${maxHeight}px` : `${minHeight}px`,\n }}\n />\n </div>\n\n {props?.error?.isError && (\n <ErrorMessage\n size={props?.error.size ?? props.size}\n sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n {...props.error}\n />\n )}\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { i as o, n as g, r as n } from "./utils-BRgi6734.js";
|
|
2
2
|
import { n as l, t as a } from "./functions-DzX-pTN8.js";
|
|
3
3
|
import { useMergeRefs as b } from "./hooks-use-merge-refs.es.js";
|
|
4
|
-
import { t as z } from "./error-
|
|
4
|
+
import { t as z } from "./error-iaB6e_aq.js";
|
|
5
5
|
import { Fragment as A, jsx as c, jsxs as y } from "react/jsx-runtime";
|
|
6
6
|
import { useCallback as S, useMemo as r, useRef as C } from "react";
|
|
7
7
|
var N = (e) => {
|
|
@@ -83,4 +83,4 @@ export {
|
|
|
83
83
|
N as t
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
-
//# sourceMappingURL=toggle-
|
|
86
|
+
//# sourceMappingURL=toggle-Bzru0yZw.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-
|
|
1
|
+
{"version":3,"file":"toggle-Bzru0yZw.js","names":[],"sources":["../src/components/toggle/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { Ref, useCallback, useMemo, useRef } from 'react';\n\nimport { IToggle } from './component.types';\n\nexport const Toggle = (props: IToggle) => {\n const { className, style } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.toggle.root,\n props.value ? CSS_CLASS.component.toggle.active : CSS_CLASS.component.toggle.unActive,\n CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n CSS_CLASS.transition.color,\n props.isZeroRadius && CSS_CLASS.component.toggle.isZeroRadius,\n props.error?.isError && CSS_CLASS.isError,\n props.isHidden && CSS_CLASS.component.toggle.isHidden,\n props.isHiddenBorder && CSS_CLASS.component.toggle.isHiddenBorder,\n props.className,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.toggle.height] = CSS_VARS.sizeToggle[props.size].height;\n vars[CSS_VARS_RAW.component.toggle.width] = CSS_VARS.sizeToggle[props.size].width;\n vars[CSS_VARS_RAW.component.toggle.padding] = CSS_VARS.sizeToggle[props.size].padding;\n vars[CSS_VARS_RAW.component.toggle.backgroundActive] = CSS_VARS.genre.toggle[props.genre].active.track;\n vars[CSS_VARS_RAW.component.toggle.backgroundUnActive] = CSS_VARS.genre.toggle[props.genre].unActive.track;\n vars[CSS_VARS_RAW.component.toggle.borderActive] = CSS_VARS.genre.toggle[props.genre].active.border;\n vars[CSS_VARS_RAW.component.toggle.borderUnActive] = CSS_VARS.genre.toggle[props.genre].unActive.border;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n return { className, style };\n }, [\n props.className,\n props.style,\n props.genre,\n props.isDisabled,\n props.isHidden,\n props.isHiddenBorder,\n props.size,\n props.value,\n props.error?.isError,\n props.isZeroRadius,\n props.control,\n ]);\n\n const { className: classNameCenter, style: styleCenter } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.toggle.center,\n CSS_CLASS.transition.color,\n props.value ? CSS_CLASS.component.toggle.centerActive : CSS_CLASS.component.toggle.centerUnActive,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.toggle.centerHeight] = CSS_VARS.sizeToggle[props.size].thumb;\n vars[CSS_VARS_RAW.component.toggle.centerWidth] = CSS_VARS.sizeToggle[props.size].thumb;\n vars[CSS_VARS_RAW.component.toggle.centerBackgroundActive] = CSS_VARS.genre.toggle[props.genre].active.thumb;\n vars[CSS_VARS_RAW.component.toggle.centerBackgroundUnActive] = CSS_VARS.genre.toggle[props.genre].unActive.thumb;\n vars[CSS_VARS_RAW.component.toggle.centerBorderActive] = CSS_VARS.palette.transparent;\n vars[CSS_VARS_RAW.component.toggle.centerBorderUnActive] = CSS_VARS.palette.transparent;\n vars[CSS_VARS_RAW.component.toggle.centerBoxShadowActive] =\n CSS_VARS.genre.toggle[props.genre].active.thumbBoxShadow;\n vars[CSS_VARS_RAW.component.toggle.centerBoxShadowUnActive] =\n CSS_VARS.genre.toggle[props.genre].unActive.thumbBoxShadow;\n\n vars[CSS_VARS_RAW.component.toggle.centerX] = props.value\n ? `calc(${CSS_VARS.sizeToggle[props.size].width} - ${CSS_VARS.sizeToggle[props.size].thumb} - ${CSS_VARS.sizeToggle[props.size].padding} * 2)`\n : '0px';\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined]);\n\n return { className, style };\n }, [props.genre, props.size, props.value]);\n\n const refDefault = useRef<HTMLButtonElement>(null);\n\n const ref = useMergeRefs([refDefault, props.ref]);\n\n const handleClick = useCallback(() => {\n if (!props.isDisabled && props.onChange) {\n props.onChange(!props.value);\n }\n }, [props.isDisabled, props.onChange, props.value]);\n\n return (\n <>\n <button\n className={className}\n style={style}\n type={props.type ?? 'button'}\n ref={ref as Ref<HTMLButtonElement>}\n name={props.name}\n aria-label={props.ariaLabel}\n id={props.id}\n onClick={handleClick}\n onFocus={props.onFocus}\n onMouseDown={props.onMouseDown}\n >\n <div className={classNameCenter} style={styleCenter} />\n </button>\n {props?.error?.isError && (\n <ErrorMessage\n size={props?.error.size ?? props.size}\n sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n {...props.error}\n />\n )}\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const d=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),g=require("./functions-CZrZU5U0.cjs"),C=require("./hooks-use-merge-refs.cjs.js"),s=require("./error-
|
|
1
|
+
const d=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),g=require("./functions-CZrZU5U0.cjs"),C=require("./hooks-use-merge-refs.cjs.js"),s=require("./error-aQfsl_Kl.cjs");let S=require("react/jsx-runtime"),o=require("react");var u=e=>{const{className:c,style:r}=(0,o.useMemo)(()=>{const i=g.setClasses([t.CSS_CLASS.component.toggle.root,e.value?t.CSS_CLASS.component.toggle.active:t.CSS_CLASS.component.toggle.unActive,t.CSS_CLASS.control[e.isDisabled?"none":e.control??"boxShadow"],t.CSS_CLASS.transition.color,e.isZeroRadius&&t.CSS_CLASS.component.toggle.isZeroRadius,e.error?.isError&&t.CSS_CLASS.isError,e.isHidden&&t.CSS_CLASS.component.toggle.isHidden,e.isHiddenBorder&&t.CSS_CLASS.component.toggle.isHiddenBorder,e.className]),n={};return n[t.CSS_VARS_RAW.component.toggle.height]=t.CSS_VARS.sizeToggle[e.size].height,n[t.CSS_VARS_RAW.component.toggle.width]=t.CSS_VARS.sizeToggle[e.size].width,n[t.CSS_VARS_RAW.component.toggle.padding]=t.CSS_VARS.sizeToggle[e.size].padding,n[t.CSS_VARS_RAW.component.toggle.backgroundActive]=t.CSS_VARS.genre.toggle[e.genre].active.track,n[t.CSS_VARS_RAW.component.toggle.backgroundUnActive]=t.CSS_VARS.genre.toggle[e.genre].unActive.track,n[t.CSS_VARS_RAW.component.toggle.borderActive]=t.CSS_VARS.genre.toggle[e.genre].active.border,n[t.CSS_VARS_RAW.component.toggle.borderUnActive]=t.CSS_VARS.genre.toggle[e.genre].unActive.border,{className:i,style:g.setStyles([Object.keys(n).length?n:void 0,e.style])}},[e.className,e.style,e.genre,e.isDisabled,e.isHidden,e.isHiddenBorder,e.size,e.value,e.error?.isError,e.isZeroRadius,e.control]),{className:l,style:a}=(0,o.useMemo)(()=>{const i=g.setClasses([t.CSS_CLASS.component.toggle.center,t.CSS_CLASS.transition.color,e.value?t.CSS_CLASS.component.toggle.centerActive:t.CSS_CLASS.component.toggle.centerUnActive]),n={};return n[t.CSS_VARS_RAW.component.toggle.centerHeight]=t.CSS_VARS.sizeToggle[e.size].thumb,n[t.CSS_VARS_RAW.component.toggle.centerWidth]=t.CSS_VARS.sizeToggle[e.size].thumb,n[t.CSS_VARS_RAW.component.toggle.centerBackgroundActive]=t.CSS_VARS.genre.toggle[e.genre].active.thumb,n[t.CSS_VARS_RAW.component.toggle.centerBackgroundUnActive]=t.CSS_VARS.genre.toggle[e.genre].unActive.thumb,n[t.CSS_VARS_RAW.component.toggle.centerBorderActive]=t.CSS_VARS.palette.transparent,n[t.CSS_VARS_RAW.component.toggle.centerBorderUnActive]=t.CSS_VARS.palette.transparent,n[t.CSS_VARS_RAW.component.toggle.centerBoxShadowActive]=t.CSS_VARS.genre.toggle[e.genre].active.thumbBoxShadow,n[t.CSS_VARS_RAW.component.toggle.centerBoxShadowUnActive]=t.CSS_VARS.genre.toggle[e.genre].unActive.thumbBoxShadow,n[t.CSS_VARS_RAW.component.toggle.centerX]=e.value?`calc(${t.CSS_VARS.sizeToggle[e.size].width} - ${t.CSS_VARS.sizeToggle[e.size].thumb} - ${t.CSS_VARS.sizeToggle[e.size].padding} * 2)`:"0px",{className:i,style:g.setStyles([Object.keys(n).length?n:void 0])}},[e.genre,e.size,e.value]),A=C.useMergeRefs([(0,o.useRef)(null),e.ref]),_=(0,o.useCallback)(()=>{!e.isDisabled&&e.onChange&&e.onChange(!e.value)},[e.isDisabled,e.onChange,e.value]);return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)("button",{className:c,style:r,type:e.type??"button",ref:A,name:e.name,"aria-label":e.ariaLabel,id:e.id,onClick:_,onFocus:e.onFocus,onMouseDown:e.onMouseDown,children:(0,S.jsx)("div",{className:l,style:a})}),e?.error?.isError&&(0,S.jsx)(s.ErrorMessage,{size:e?.error.size??e.size,sxTypography:{size:"16px",weight:"400",...e?.error.sxTypography},...e.error})]})};Object.defineProperty(exports,"Toggle",{enumerable:!0,get:function(){return u}});
|
|
2
2
|
|
|
3
|
-
//# sourceMappingURL=toggle-
|
|
3
|
+
//# sourceMappingURL=toggle-CdUVhH0Z.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-
|
|
1
|
+
{"version":3,"file":"toggle-CdUVhH0Z.cjs","names":[],"sources":["../src/components/toggle/component.tsx"],"sourcesContent":["import { ErrorMessage } from '@local/components/error';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { Ref, useCallback, useMemo, useRef } from 'react';\n\nimport { IToggle } from './component.types';\n\nexport const Toggle = (props: IToggle) => {\n const { className, style } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.toggle.root,\n props.value ? CSS_CLASS.component.toggle.active : CSS_CLASS.component.toggle.unActive,\n CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n CSS_CLASS.transition.color,\n props.isZeroRadius && CSS_CLASS.component.toggle.isZeroRadius,\n props.error?.isError && CSS_CLASS.isError,\n props.isHidden && CSS_CLASS.component.toggle.isHidden,\n props.isHiddenBorder && CSS_CLASS.component.toggle.isHiddenBorder,\n props.className,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.toggle.height] = CSS_VARS.sizeToggle[props.size].height;\n vars[CSS_VARS_RAW.component.toggle.width] = CSS_VARS.sizeToggle[props.size].width;\n vars[CSS_VARS_RAW.component.toggle.padding] = CSS_VARS.sizeToggle[props.size].padding;\n vars[CSS_VARS_RAW.component.toggle.backgroundActive] = CSS_VARS.genre.toggle[props.genre].active.track;\n vars[CSS_VARS_RAW.component.toggle.backgroundUnActive] = CSS_VARS.genre.toggle[props.genre].unActive.track;\n vars[CSS_VARS_RAW.component.toggle.borderActive] = CSS_VARS.genre.toggle[props.genre].active.border;\n vars[CSS_VARS_RAW.component.toggle.borderUnActive] = CSS_VARS.genre.toggle[props.genre].unActive.border;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n return { className, style };\n }, [\n props.className,\n props.style,\n props.genre,\n props.isDisabled,\n props.isHidden,\n props.isHiddenBorder,\n props.size,\n props.value,\n props.error?.isError,\n props.isZeroRadius,\n props.control,\n ]);\n\n const { className: classNameCenter, style: styleCenter } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.toggle.center,\n CSS_CLASS.transition.color,\n props.value ? CSS_CLASS.component.toggle.centerActive : CSS_CLASS.component.toggle.centerUnActive,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.toggle.centerHeight] = CSS_VARS.sizeToggle[props.size].thumb;\n vars[CSS_VARS_RAW.component.toggle.centerWidth] = CSS_VARS.sizeToggle[props.size].thumb;\n vars[CSS_VARS_RAW.component.toggle.centerBackgroundActive] = CSS_VARS.genre.toggle[props.genre].active.thumb;\n vars[CSS_VARS_RAW.component.toggle.centerBackgroundUnActive] = CSS_VARS.genre.toggle[props.genre].unActive.thumb;\n vars[CSS_VARS_RAW.component.toggle.centerBorderActive] = CSS_VARS.palette.transparent;\n vars[CSS_VARS_RAW.component.toggle.centerBorderUnActive] = CSS_VARS.palette.transparent;\n vars[CSS_VARS_RAW.component.toggle.centerBoxShadowActive] =\n CSS_VARS.genre.toggle[props.genre].active.thumbBoxShadow;\n vars[CSS_VARS_RAW.component.toggle.centerBoxShadowUnActive] =\n CSS_VARS.genre.toggle[props.genre].unActive.thumbBoxShadow;\n\n vars[CSS_VARS_RAW.component.toggle.centerX] = props.value\n ? `calc(${CSS_VARS.sizeToggle[props.size].width} - ${CSS_VARS.sizeToggle[props.size].thumb} - ${CSS_VARS.sizeToggle[props.size].padding} * 2)`\n : '0px';\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined]);\n\n return { className, style };\n }, [props.genre, props.size, props.value]);\n\n const refDefault = useRef<HTMLButtonElement>(null);\n\n const ref = useMergeRefs([refDefault, props.ref]);\n\n const handleClick = useCallback(() => {\n if (!props.isDisabled && props.onChange) {\n props.onChange(!props.value);\n }\n }, [props.isDisabled, props.onChange, props.value]);\n\n return (\n <>\n <button\n className={className}\n style={style}\n type={props.type ?? 'button'}\n ref={ref as Ref<HTMLButtonElement>}\n name={props.name}\n aria-label={props.ariaLabel}\n id={props.id}\n onClick={handleClick}\n onFocus={props.onFocus}\n onMouseDown={props.onMouseDown}\n >\n <div className={classNameCenter} style={styleCenter} />\n </button>\n {props?.error?.isError && (\n <ErrorMessage\n size={props?.error.size ?? props.size}\n sxTypography={{ size: '16px', weight: '400', ...props?.error.sxTypography }}\n {...props.error}\n />\n )}\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const b=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),l=require("./functions-CZrZU5U0.cjs"),y=require("./hooks-use-typography-styles.cjs.js"),h=require("./popover-
|
|
1
|
+
const b=require("./chunk-Dd8m0Ver.cjs"),t=require("./utils-DCIq-5FL.cjs"),l=require("./functions-CZrZU5U0.cjs"),y=require("./hooks-use-typography-styles.cjs.js"),h=require("./popover-B1KASIeD.cjs"),A=require("./hooks-use-overflowing.cjs.js");let i=require("react/jsx-runtime"),s=require("react");var o=(0,s.memo)(e=>e.isDisabled?(0,i.jsx)("div",{className:l.setClasses([t.CSS_CLASS.component.tooltip.wrapper,e.classNameWrapper]),style:e.styleWrapper,children:e.children}):(0,i.jsx)(T,{...e})),T=e=>{const{isOpen:a,refReference:n,refFloating:d,floatingStyles:u,context:m,refArrow:v,placement:S}=h.usePopover({placement:e.placement??"bottom-start",offset:e.offset??8,mode:e.mode??"hover",isClickOutside:e.isClickOutside??!0,isFloatingHover:e.isFloatingHover??!0,isWidthAsContent:e.isWidthAsContent??!1,hoverCloseDelay:e.hoverCloseDelay??void 0,hoverOffset:e.hoverOffset??void 0}),{className:g,style:f}=(0,s.useMemo)(()=>{const _=l.setClasses([t.CSS_CLASS.component.tooltip.root,e.classNamePopover]),r={};return r[t.CSS_VARS_RAW.component.tooltip.height]=t.CSS_VARS.size[e.size].padding,r[t.CSS_VARS_RAW.component.tooltip.padding]=`${t.CSS_VARS.size[e.size].padding} ${t.CSS_VARS.size[e.size].padding} 0px ${t.CSS_VARS.size[e.size].padding}`,{className:_,style:l.setStyles([Object.keys(r).length?r:void 0,e.stylePopover])}},[e.size,e.classNamePopover,e.stylePopover]),{className:x,style:C}=y.useTypographyStyles({sx:{variant:t.EXTRA_VALUE.sizeToController[e.size],isBold:!0,...e?.sxTypography},style:{order:0,display:"inline-flex"}});return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{className:l.setClasses([t.CSS_CLASS.component.tooltip.wrapper,e.classNameWrapper]),style:e.styleWrapper,ref:n,children:e.children}),(0,i.jsx)(h.Popover,{className:g,style:f,size:e.size,isOpen:a,genre:e.genre,floatingStyles:u,ref:d,maxHeight:e.maxHeight,maxWidth:e.maxWidth,context:m,refArrow:v,placement:S,isArrow:!0,isCenteredArrow:e.isCenteredArrow,children:(0,i.jsx)(c,{className:x,style:C,sx:e.sxTypography,children:e.content})})]})};o.displayName="Tooltip";var c=(0,s.memo)(e=>{const{className:a,style:n}=y.useTypographyStyles({sx:e?.sx??{},className:e.className,style:e.style});return(0,i.jsx)((0,s.useMemo)(()=>e.isAnchor?"a":e.isParagraph?"p":e.isSpan?"span":e.sx&&"variant"in e.sx?e.sx.variant==="headline"?"h1":e.sx.variant==="sub-headline"?"h2":e.sx.variant==="title-1"?"h3":e.sx.variant==="title-2"?"h4":e.sx.variant==="title-3"?"h5":e.sx.variant==="title-4"?"h6":"span":"span",[e.isAnchor,e.isParagraph,e.isSpan,e.sx]),{ref:e.ref,href:e.href,className:a,style:n,children:e.children})}),N=(0,s.memo)(e=>{const{isDisabled:a,ref:n}=A.useOverflowing({isCheckSize:e.tooltip.isDisabled!==void 0?!e.tooltip.isDisabled:!0,dependencies:[e.children]});return(0,i.jsx)(o,{isDisabled:a,content:e.children,...e.tooltip,children:(0,i.jsx)(c,{ref:n,...e.typography,style:{position:"relative",...e.typography.style},children:e.children})})});Object.defineProperty(exports,"Tooltip",{enumerable:!0,get:function(){return o}});Object.defineProperty(exports,"Typography",{enumerable:!0,get:function(){return c}});Object.defineProperty(exports,"TypographyTooltip",{enumerable:!0,get:function(){return N}});
|
|
2
2
|
|
|
3
|
-
//# sourceMappingURL=typography-
|
|
3
|
+
//# sourceMappingURL=typography-DzYrzZZb.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography-
|
|
1
|
+
{"version":3,"file":"typography-DzYrzZZb.cjs","names":[],"sources":["../src/components/tooltip/component.constants.ts","../src/components/tooltip/component.tsx","../src/components/typography/component.tsx"],"sourcesContent":["import { Placement } from '@floating-ui/react';\n\nexport const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK: Placement = 'bottom-start';\nexport const DEFAULT_TOOLTIP_OFFSET_FALLBACK: number = 8;\n","import { Popover, usePopover } from '@local/components/popover';\nimport { Typography } from '@local/components/typography';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, EXTRA_VALUE } from '@local/styles/utils';\nimport { CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, memo, Ref, useMemo } from 'react';\n\nimport { DEFAULT_TOOLTIP_OFFSET_FALLBACK, DEFAULT_TOOLTIP_PLACEMENT_FALLBACK } from './component.constants';\nimport { ITooltip } from './component.types';\n\nexport const Tooltip: FC<ITooltip> = memo((props) => {\n if (props.isDisabled)\n return (\n <div\n className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n style={props.styleWrapper}\n >\n {props.children}\n </div>\n );\n\n return <TooltipContent {...props} />;\n});\n\nexport const TooltipContent: FC<ITooltip> = (props) => {\n const { isOpen, refReference, refFloating, floatingStyles, context, refArrow, placement } = usePopover({\n placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,\n offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,\n mode: props.mode ?? 'hover',\n isClickOutside: props.isClickOutside ?? true,\n isFloatingHover: props.isFloatingHover ?? true,\n isWidthAsContent: props.isWidthAsContent ?? false,\n hoverCloseDelay: props.hoverCloseDelay ?? undefined,\n hoverOffset: props.hoverOffset ?? undefined,\n });\n\n const { className, style } = useMemo(() => {\n const className = setClasses([CSS_CLASS.component.tooltip.root, props.classNamePopover]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.tooltip.height] = CSS_VARS.size[props.size].padding;\n vars[CSS_VARS_RAW.component.tooltip.padding] =\n `${CSS_VARS.size[props.size].padding} ${CSS_VARS.size[props.size].padding} 0px ${CSS_VARS.size[props.size].padding}`;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.stylePopover]);\n\n return { className, style };\n }, [props.size, props.classNamePopover, props.stylePopover]);\n\n const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n sx: { variant: EXTRA_VALUE.sizeToController[props.size], isBold: true, ...props?.sxTypography },\n style: { order: 0, display: 'inline-flex' },\n });\n\n return (\n <>\n <div\n className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n style={props.styleWrapper}\n ref={refReference as Ref<HTMLDivElement | null>}\n >\n {props.children}\n </div>\n <Popover\n className={className}\n style={style}\n size={props.size}\n isOpen={isOpen}\n genre={props.genre}\n floatingStyles={floatingStyles}\n ref={refFloating}\n maxHeight={props.maxHeight}\n maxWidth={props.maxWidth}\n context={context}\n refArrow={refArrow}\n placement={placement}\n isArrow\n isCenteredArrow={props.isCenteredArrow}\n >\n <Typography className={classNameTypography} style={styleTypography} sx={props.sxTypography}>\n {props.content}\n </Typography>\n </Popover>\n </>\n );\n};\n\nTooltip.displayName = 'Tooltip';\n","import { Tooltip } from '@local/components/tooltip';\nimport { useOverflowing } from '@local/hooks/use-overflowing';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\n\nimport { ElementType, memo, useMemo } from 'react';\n\nimport { ITypographyComponent, ITypographyTooltip } from './component.types';\n\nexport const Typography = memo((props: ITypographyComponent) => {\n const { className, style } = useTypographyStyles({\n sx: props?.sx ?? {},\n className: props.className,\n style: props.style,\n });\n\n const Component = useMemo(() => {\n const Component: ElementType = props.isAnchor\n ? 'a'\n : props.isParagraph\n ? 'p'\n : props.isSpan\n ? 'span'\n : props.sx && 'variant' in props.sx\n ? props.sx.variant === 'headline'\n ? 'h1'\n : props.sx.variant === 'sub-headline'\n ? 'h2'\n : props.sx.variant === 'title-1'\n ? 'h3'\n : props.sx.variant === 'title-2'\n ? 'h4'\n : props.sx.variant === 'title-3'\n ? 'h5'\n : props.sx.variant === 'title-4'\n ? 'h6'\n : 'span'\n : 'span';\n return Component;\n }, [props.isAnchor, props.isParagraph, props.isSpan, props.sx]);\n\n return (\n <Component ref={props.ref as any} href={props.href} className={className} style={style}>\n {props.children}\n </Component>\n );\n});\n\nexport const TypographyTooltip = memo((props: ITypographyTooltip) => {\n const { isDisabled, ref } = useOverflowing<HTMLDivElement>({\n isCheckSize: props.tooltip.isDisabled !== undefined ? !props.tooltip.isDisabled : true,\n dependencies: [props.children],\n });\n return (\n <Tooltip isDisabled={isDisabled} content={props.children} {...props.tooltip}>\n <Typography ref={ref} {...props.typography} style={{ position: 'relative', ...props.typography.style }}>\n {props.children}\n </Typography>\n </Tooltip>\n );\n});\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { i as c, n as l, r as s, t as z } from "./utils-BRgi6734.js";
|
|
2
2
|
import { n as P, t as r } from "./functions-DzX-pTN8.js";
|
|
3
3
|
import { useTypographyStyles as d } from "./hooks-use-typography-styles.es.js";
|
|
4
|
-
import { n as O, t as W } from "./popover
|
|
4
|
+
import { n as O, t as W } from "./popover--NOw9qfd.js";
|
|
5
5
|
import { useOverflowing as b } from "./hooks-use-overflowing.es.js";
|
|
6
6
|
import { Fragment as _, jsx as t, jsxs as w } from "react/jsx-runtime";
|
|
7
7
|
import { memo as o, useMemo as h } from "react";
|
|
@@ -113,4 +113,4 @@ export {
|
|
|
113
113
|
y as t
|
|
114
114
|
};
|
|
115
115
|
|
|
116
|
-
//# sourceMappingURL=typography-
|
|
116
|
+
//# sourceMappingURL=typography-Tebu6c9L.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography-
|
|
1
|
+
{"version":3,"file":"typography-Tebu6c9L.js","names":[],"sources":["../src/components/tooltip/component.constants.ts","../src/components/tooltip/component.tsx","../src/components/typography/component.tsx"],"sourcesContent":["import { Placement } from '@floating-ui/react';\n\nexport const DEFAULT_TOOLTIP_PLACEMENT_FALLBACK: Placement = 'bottom-start';\nexport const DEFAULT_TOOLTIP_OFFSET_FALLBACK: number = 8;\n","import { Popover, usePopover } from '@local/components/popover';\nimport { Typography } from '@local/components/typography';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, EXTRA_VALUE } from '@local/styles/utils';\nimport { CSS_VARS, CSS_VARS_RAW } from '@local/styles/utils/constants';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, memo, Ref, useMemo } from 'react';\n\nimport { DEFAULT_TOOLTIP_OFFSET_FALLBACK, DEFAULT_TOOLTIP_PLACEMENT_FALLBACK } from './component.constants';\nimport { ITooltip } from './component.types';\n\nexport const Tooltip: FC<ITooltip> = memo((props) => {\n if (props.isDisabled)\n return (\n <div\n className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n style={props.styleWrapper}\n >\n {props.children}\n </div>\n );\n\n return <TooltipContent {...props} />;\n});\n\nexport const TooltipContent: FC<ITooltip> = (props) => {\n const { isOpen, refReference, refFloating, floatingStyles, context, refArrow, placement } = usePopover({\n placement: props.placement ?? DEFAULT_TOOLTIP_PLACEMENT_FALLBACK,\n offset: props.offset ?? DEFAULT_TOOLTIP_OFFSET_FALLBACK,\n mode: props.mode ?? 'hover',\n isClickOutside: props.isClickOutside ?? true,\n isFloatingHover: props.isFloatingHover ?? true,\n isWidthAsContent: props.isWidthAsContent ?? false,\n hoverCloseDelay: props.hoverCloseDelay ?? undefined,\n hoverOffset: props.hoverOffset ?? undefined,\n });\n\n const { className, style } = useMemo(() => {\n const className = setClasses([CSS_CLASS.component.tooltip.root, props.classNamePopover]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.tooltip.height] = CSS_VARS.size[props.size].padding;\n vars[CSS_VARS_RAW.component.tooltip.padding] =\n `${CSS_VARS.size[props.size].padding} ${CSS_VARS.size[props.size].padding} 0px ${CSS_VARS.size[props.size].padding}`;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.stylePopover]);\n\n return { className, style };\n }, [props.size, props.classNamePopover, props.stylePopover]);\n\n const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n sx: { variant: EXTRA_VALUE.sizeToController[props.size], isBold: true, ...props?.sxTypography },\n style: { order: 0, display: 'inline-flex' },\n });\n\n return (\n <>\n <div\n className={setClasses([CSS_CLASS.component.tooltip.wrapper, props.classNameWrapper])}\n style={props.styleWrapper}\n ref={refReference as Ref<HTMLDivElement | null>}\n >\n {props.children}\n </div>\n <Popover\n className={className}\n style={style}\n size={props.size}\n isOpen={isOpen}\n genre={props.genre}\n floatingStyles={floatingStyles}\n ref={refFloating}\n maxHeight={props.maxHeight}\n maxWidth={props.maxWidth}\n context={context}\n refArrow={refArrow}\n placement={placement}\n isArrow\n isCenteredArrow={props.isCenteredArrow}\n >\n <Typography className={classNameTypography} style={styleTypography} sx={props.sxTypography}>\n {props.content}\n </Typography>\n </Popover>\n </>\n );\n};\n\nTooltip.displayName = 'Tooltip';\n","import { Tooltip } from '@local/components/tooltip';\nimport { useOverflowing } from '@local/hooks/use-overflowing';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\n\nimport { ElementType, memo, useMemo } from 'react';\n\nimport { ITypographyComponent, ITypographyTooltip } from './component.types';\n\nexport const Typography = memo((props: ITypographyComponent) => {\n const { className, style } = useTypographyStyles({\n sx: props?.sx ?? {},\n className: props.className,\n style: props.style,\n });\n\n const Component = useMemo(() => {\n const Component: ElementType = props.isAnchor\n ? 'a'\n : props.isParagraph\n ? 'p'\n : props.isSpan\n ? 'span'\n : props.sx && 'variant' in props.sx\n ? props.sx.variant === 'headline'\n ? 'h1'\n : props.sx.variant === 'sub-headline'\n ? 'h2'\n : props.sx.variant === 'title-1'\n ? 'h3'\n : props.sx.variant === 'title-2'\n ? 'h4'\n : props.sx.variant === 'title-3'\n ? 'h5'\n : props.sx.variant === 'title-4'\n ? 'h6'\n : 'span'\n : 'span';\n return Component;\n }, [props.isAnchor, props.isParagraph, props.isSpan, props.sx]);\n\n return (\n <Component ref={props.ref as any} href={props.href} className={className} style={style}>\n {props.children}\n </Component>\n );\n});\n\nexport const TypographyTooltip = memo((props: ITypographyTooltip) => {\n const { isDisabled, ref } = useOverflowing<HTMLDivElement>({\n isCheckSize: props.tooltip.isDisabled !== undefined ? !props.tooltip.isDisabled : true,\n dependencies: [props.children],\n });\n return (\n <Tooltip isDisabled={isDisabled} content={props.children} {...props.tooltip}>\n <Typography ref={ref} {...props.typography} style={{ position: 'relative', ...props.typography.style }}>\n {props.children}\n </Typography>\n </Tooltip>\n );\n});\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"storybook": "npm run gen:exports && storybook dev -p 3030"
|
|
35
35
|
},
|
|
36
36
|
"type": "module",
|
|
37
|
-
"version": "2.3.
|
|
37
|
+
"version": "2.3.2",
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@floating-ui/react": "^0.27.12",
|
|
40
40
|
"@jenesei-software/jenesei-library-log": "^2.0.0",
|
|
@@ -231,6 +231,12 @@
|
|
|
231
231
|
"require": "./build/hooks-use-deep-memo.cjs.js",
|
|
232
232
|
"default": "./build/hooks-use-deep-memo.es.js"
|
|
233
233
|
},
|
|
234
|
+
"./hooks-use-fps": {
|
|
235
|
+
"types": "./build/hooks-use-fps.d.ts",
|
|
236
|
+
"import": "./build/hooks-use-fps.es.js",
|
|
237
|
+
"require": "./build/hooks-use-fps.cjs.js",
|
|
238
|
+
"default": "./build/hooks-use-fps.es.js"
|
|
239
|
+
},
|
|
234
240
|
"./hooks-use-merge-refs": {
|
|
235
241
|
"types": "./build/hooks-use-merge-refs.d.ts",
|
|
236
242
|
"import": "./build/hooks-use-merge-refs.es.js",
|
package/build/button-C1w25-Hk.js
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { i, n as e, r as o, t as C } from "./utils-BRgi6734.js";
|
|
2
|
-
import { n as a, t as l } from "./functions-DzX-pTN8.js";
|
|
3
|
-
import { t as f } from "./icon-D2w7GViT.js";
|
|
4
|
-
import { useMergeRefs as x } from "./hooks-use-merge-refs.es.js";
|
|
5
|
-
import { useTypographyStyles as A } from "./hooks-use-typography-styles.es.js";
|
|
6
|
-
import { jsx as d, jsxs as N } from "react/jsx-runtime";
|
|
7
|
-
import { useCallback as R, useMemo as c, useRef as F } from "react";
|
|
8
|
-
var W = (n) => {
|
|
9
|
-
const u = c(() => f({
|
|
10
|
-
icons: (n.icons ?? []).map((s) => ({
|
|
11
|
-
...s,
|
|
12
|
-
style: { color: o.genre.button[n.genre].color.index }
|
|
13
|
-
})),
|
|
14
|
-
size: n.size
|
|
15
|
-
}), [
|
|
16
|
-
n.icons,
|
|
17
|
-
n.size,
|
|
18
|
-
n.genre
|
|
19
|
-
]), m = R((s) => {
|
|
20
|
-
!n.isDisabled && n.onClick && n.onClick(s);
|
|
21
|
-
}, [n.isDisabled, n.onClick]), b = x([F(null), n.ref]), { className: r, style: g } = A({
|
|
22
|
-
sx: {
|
|
23
|
-
variant: C.sizeToController[n.size],
|
|
24
|
-
isNoUserSelect: !0,
|
|
25
|
-
...n?.sxTypography
|
|
26
|
-
},
|
|
27
|
-
style: {
|
|
28
|
-
order: 0,
|
|
29
|
-
display: "inline-flex"
|
|
30
|
-
}
|
|
31
|
-
}), { className: y, style: h } = c(() => {
|
|
32
|
-
const s = l([
|
|
33
|
-
e.component.button.root,
|
|
34
|
-
e.control[n.isDisabled ? "none" : n.control ?? "boxShadow"],
|
|
35
|
-
e.transition.color,
|
|
36
|
-
n.isZeroRadius && e.component.button.isZeroRadius,
|
|
37
|
-
n.isHidden && e.component.button.isHidden,
|
|
38
|
-
n.isHiddenBorder && e.component.button.isHiddenBorder,
|
|
39
|
-
n.isFullRadius && e.component.button.isFullRadius,
|
|
40
|
-
n.isFullSize && e.component.button.isFullSize,
|
|
41
|
-
n.isWidthAsHeight && e.component.button.isWidthAsHeight,
|
|
42
|
-
n.isMinWidthAsContent && e.component.button.isMinWidthAsContent,
|
|
43
|
-
n.isZeroPadding && e.component.button.isZeroPadding,
|
|
44
|
-
n.isSizeFitContent && e.component.button.isSizeFitContent,
|
|
45
|
-
n.className
|
|
46
|
-
]), t = {};
|
|
47
|
-
return t[i.component.button.background] = o.genre.button[n.genre].background.index, t[i.component.button.color] = o.genre.button[n.genre].color.index, t[i.component.button.border] = o.genre.button[n.genre].border.index, t[i.component.button.height] = o.size[n.size].height, t[i.component.button.padding] = o.size[n.size].padding, t[i.component.button.radius] = o.size[n.size].radius, t[i.component.button.gap] = `calc(${o.size[n.size].padding} - 2px)`, {
|
|
48
|
-
className: s,
|
|
49
|
-
style: a([Object.keys(t).length ? t : void 0, n.style])
|
|
50
|
-
};
|
|
51
|
-
}, [
|
|
52
|
-
n.className,
|
|
53
|
-
n.style,
|
|
54
|
-
n.genre,
|
|
55
|
-
n.isDisabled,
|
|
56
|
-
n.isFullSize,
|
|
57
|
-
n.isHidden,
|
|
58
|
-
n.isHiddenBorder,
|
|
59
|
-
n.isMinWidthAsContent,
|
|
60
|
-
n.isFullRadius,
|
|
61
|
-
n.isWidthAsHeight,
|
|
62
|
-
n.size,
|
|
63
|
-
n.isZeroRadius,
|
|
64
|
-
n.control,
|
|
65
|
-
n.isZeroPadding,
|
|
66
|
-
n.isSizeFitContent
|
|
67
|
-
]), { className: S, style: z } = c(() => {
|
|
68
|
-
const s = l([e.component.button.iconGroup, n.isIconGroup && e.component.button.iconGroupIsIconGroup]), t = {};
|
|
69
|
-
return "iconGroupOrder" in n && (t[i.component.button.iconGroupOrder] = String(n.iconGroupOrder ?? "initial")), {
|
|
70
|
-
className: s,
|
|
71
|
-
style: a([Object.keys(t).length ? t : void 0])
|
|
72
|
-
};
|
|
73
|
-
}, [n]);
|
|
74
|
-
return /* @__PURE__ */ N("button", {
|
|
75
|
-
tabIndex: n.tabIndex,
|
|
76
|
-
disabled: n.isDisabled,
|
|
77
|
-
className: y,
|
|
78
|
-
style: h,
|
|
79
|
-
onClick: m,
|
|
80
|
-
onFocus: n.onFocus,
|
|
81
|
-
onMouseDown: n.onMouseDown,
|
|
82
|
-
type: n.type ?? "button",
|
|
83
|
-
ref: b,
|
|
84
|
-
name: n.name,
|
|
85
|
-
"aria-label": n.ariaLabel,
|
|
86
|
-
id: n.id,
|
|
87
|
-
children: [!n.isOnlyIcon && n.children && /* @__PURE__ */ d("div", {
|
|
88
|
-
className: r,
|
|
89
|
-
style: g,
|
|
90
|
-
children: n.children
|
|
91
|
-
}), /* @__PURE__ */ d("div", {
|
|
92
|
-
className: S,
|
|
93
|
-
style: z,
|
|
94
|
-
children: u
|
|
95
|
-
})]
|
|
96
|
-
});
|
|
97
|
-
};
|
|
98
|
-
export {
|
|
99
|
-
W as t
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
//# sourceMappingURL=button-C1w25-Hk.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"button-C1w25-Hk.js","names":[],"sources":["../src/components/button/component.tsx"],"sourcesContent":["import { getIconComponents } from '@local/components/icon';\nimport { useMergeRefs } from '@local/hooks/use-merge-refs';\nimport { useTypographyStyles } from '@local/hooks/use-typography-styles';\nimport { CSS_CLASS, CSS_VARS, CSS_VARS_RAW, EXTRA_VALUE } from '@local/styles/utils';\nimport { setClasses, setStyles } from '@local/styles/utils/functions';\n\nimport { FC, Ref, useCallback, useMemo, useRef } from 'react';\n\nimport { IButton } from './component.types';\n\nexport const Button: FC<IButton> = (props) => {\n const iconComponents = useMemo(\n () =>\n getIconComponents({\n icons: (props.icons ?? []).map((e) => ({\n ...e,\n style: { color: CSS_VARS.genre.button[props.genre].color.index },\n })),\n size: props.size,\n }),\n [props.icons, props.size, props.genre],\n );\n\n const handleClick = useCallback<Exclude<IButton['onClick'], undefined>>(\n (event) => {\n if (!props.isDisabled && props.onClick) {\n props.onClick(event);\n }\n },\n [props.isDisabled, props.onClick],\n );\n\n const refDefault = useRef<HTMLButtonElement>(null);\n\n const ref = useMergeRefs([refDefault, props.ref]);\n\n const { className: classNameTypography, style: styleTypography } = useTypographyStyles({\n sx: { variant: EXTRA_VALUE.sizeToController[props.size], isNoUserSelect: true, ...props?.sxTypography },\n style: { order: 0, display: 'inline-flex' },\n });\n\n const { className, style } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.button.root,\n CSS_CLASS.control[props.isDisabled ? 'none' : (props.control ?? 'boxShadow')],\n CSS_CLASS.transition.color,\n props.isZeroRadius && CSS_CLASS.component.button.isZeroRadius,\n props.isHidden && CSS_CLASS.component.button.isHidden,\n props.isHiddenBorder && CSS_CLASS.component.button.isHiddenBorder,\n props.isFullRadius && CSS_CLASS.component.button.isFullRadius,\n props.isFullSize && CSS_CLASS.component.button.isFullSize,\n props.isWidthAsHeight && CSS_CLASS.component.button.isWidthAsHeight,\n props.isMinWidthAsContent && CSS_CLASS.component.button.isMinWidthAsContent,\n props.isZeroPadding && CSS_CLASS.component.button.isZeroPadding,\n props.isSizeFitContent && CSS_CLASS.component.button.isSizeFitContent,\n props.className,\n ]);\n\n const vars: Record<string, string> = {};\n\n vars[CSS_VARS_RAW.component.button.background] = CSS_VARS.genre.button[props.genre].background.index;\n vars[CSS_VARS_RAW.component.button.color] = CSS_VARS.genre.button[props.genre].color.index;\n vars[CSS_VARS_RAW.component.button.border] = CSS_VARS.genre.button[props.genre].border.index;\n\n vars[CSS_VARS_RAW.component.button.height] = CSS_VARS.size[props.size].height;\n vars[CSS_VARS_RAW.component.button.padding] = CSS_VARS.size[props.size].padding;\n vars[CSS_VARS_RAW.component.button.radius] = CSS_VARS.size[props.size].radius;\n vars[CSS_VARS_RAW.component.button.gap] = `calc(${CSS_VARS.size[props.size].padding} - 2px)`;\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined, props.style]);\n\n return { className, style };\n }, [\n props.className,\n props.style,\n props.genre,\n props.isDisabled,\n props.isFullSize,\n props.isHidden,\n props.isHiddenBorder,\n props.isMinWidthAsContent,\n props.isFullRadius,\n props.isWidthAsHeight,\n props.size,\n props.isZeroRadius,\n props.control,\n props.isZeroPadding,\n props.isSizeFitContent,\n ]);\n\n const { className: classNameIconGroup, style: styleIconGroup } = useMemo(() => {\n const className = setClasses([\n CSS_CLASS.component.button.iconGroup,\n\n props.isIconGroup && CSS_CLASS.component.button.iconGroupIsIconGroup,\n ]);\n\n const vars: Record<string, string> = {};\n\n if ('iconGroupOrder' in props)\n vars[CSS_VARS_RAW.component.button.iconGroupOrder] = String(props.iconGroupOrder ?? 'initial');\n\n const style = setStyles([Object.keys(vars).length ? vars : undefined]);\n\n return { className, style };\n }, [props]);\n\n return (\n <button\n tabIndex={props.tabIndex}\n disabled={props.isDisabled}\n className={className}\n style={style}\n onClick={handleClick}\n onFocus={props.onFocus}\n onMouseDown={props.onMouseDown}\n type={props.type ?? 'button'}\n ref={ref as Ref<HTMLButtonElement>}\n name={props.name}\n aria-label={props.ariaLabel}\n id={props.id}\n >\n {!props.isOnlyIcon && props.children && (\n <div className={classNameTypography} style={styleTypography}>\n {props.children}\n </div>\n )}\n <div className={classNameIconGroup} style={styleIconGroup}>\n {iconComponents}\n </div>\n </button>\n );\n};\n"],"mappings":"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"}
|