@lotte-innovate/ui-component-test 0.0.155 → 0.0.157

package/dist/lib/components/TextField/index.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../../lib/utils/utils';
@@ -32,6 +32,7 @@ import { MAIN_COLOR } from '../../../lib/color/constants';
 import Text from '../../../lib/Typography/Text';
 import IconButton from '../IconButton';
 import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
+import { useIsClient } from '../../../lib/is-client-ctx';
 var textFieldVariants = cva('', {
     variants: {
         radius: __assign({}, radiusVariants['base']),
@@ -62,6 +63,9 @@ export var Root = React.forwardRef(function (_a, forwardedRef) {
         message = '숫자만 입력 가능합니다.';
     if (validationType == 'email')
         message = '이메일 형식에 어긋납니다.';
+    var isClient = useIsClient();
+    if (!isClient)
+        return _jsx(_Fragment, {});
     return (_jsxs("div", { children: [_jsx(Theme, { scaling: contextValue.scaling, accentColor: contextValue.color, hasBackground: false, children: _jsxs(TextFieldTheme.Root, __assign({ ref: forwardedRef, variant: appearance, size: sizeTheme, type: validationType !== 'password' || isMouseDown ? 'text' : 'password', radius: contextValue.radius, color: contextValue.color, className: cn(textFieldVariants({ radius: contextValue.radius }), className), onChange: function (e) {
                         if (e.target.value && regex) {
                             setShowMessage(true);

package/dist/lib/components/TextField/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import a,{useState as o}from"react";import{cva as t}from"class-variance-authority";import{cn as n}from"../../utils/utils.mjs";import{radiusVariants as i,bgColorStyle as l}from"../../constants.mjs";import{Theme as s,TextField as c}from"@radix-ui/themes";import{useTheme as u}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as d}from"../../color/constants.mjs";import m from"../../Typography/Text/index.mjs";import{IconButton as p}from"../IconButton/index.mjs";import{EyeOpenIcon as f,EyeClosedIcon as h}from"@radix-ui/react-icons";var g=function(){return g=Object.assign||function(r){for(var e,a=1,o=arguments.length;a<o;a++)for(var t in e=arguments[a])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},g.apply(this,arguments)},v=function(r,e){var a={};for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&e.indexOf(o)<0&&(a[o]=r[o]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(o=Object.getOwnPropertySymbols(r);t<o.length;t++)e.indexOf(o[t])<0&&Object.prototype.propertyIsEnumerable.call(r,o[t])&&(a[o[t]]=r[o[t]])}return a},y=t("",{variants:{radius:g({},i.base),color:l()}}),x=a.forwardRef((function(a,t){var i,l,x,j=a.className,b=a.color,O=a.size,N=a.appearance,T=a.scaling,z=a.radius,S=a.children,R=a.validationType,B=a.regex,C=a.warningMessage,P=a.onChange,M=a.onBlur,F=v(a,["className","color","size","appearance","scaling","radius","children","validationType","regex","warningMessage","onChange","onBlur"]),I=u().theme,$=o(!1),k=$[0],D=$[1],E=o(null!==(i=F.defaultValue)&&void 0!==i?i:""),U=E[0],V=E[1],_=o(!1),q=_[0],A=_[1],G="2";"small"===O&&(G="1"),"large"===O&&(G="3");var H={scaling:null!==(l=null!=T?T:I.themeScaling)&&void 0!==l?l:"100%",radius:null!=z?z:I.themeRadius,color:null!==(x=null!=b?b:I.themeColor)&&void 0!==x?x:d},J=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,K=/^[0-9]+$/,L="";return"number"==R&&(L="숫자만 입력 가능합니다."),"email"==R&&(L="이메일 형식에 어긋납니다."),r("div",{children:[e(s,{scaling:H.scaling,accentColor:H.color,hasBackground:!1,children:r(c.Root,g({ref:t,variant:N,size:G,type:"password"!==R||q?"text":"password",radius:H.radius,color:H.color,className:n(y({radius:H.radius}),j),onChange:function(r){r.target.value&&B?D(!0):"number"!=R||!r.target.value||B||K.test(r.target.value)?(D(!1),V(r.target.value),P&&P(r)):D(!0)},value:U,onBlur:function(r){M&&M(r),"email"!=R||!r.target.value||J.test(r.target.value)?D(!1):D(!0)}},F,{children:[S,"password"==R&&e(w.Slot,{side:"right",children:e(p,{appearance:"ghost",color:"slate",onMouseDown:function(r){return A(!0)},onMouseUp:function(r){return A(!1)},children:e(q?f:h,{height:"14",width:"14"})})})]}))}),k&&e(m,{size:"1",color:H.color,children:C||L})]})}));x.displayName="TextField.Root";var j=a.forwardRef((function(r,a){var o=r.className,t=r.color,i=r.side,l=r.radius,s=r.children,u=v(r,["className","color","side","radius","children"]);return e(c.Slot,g({ref:a,color:t,side:i,className:n(y({radius:l}),o)},u,{children:s}))}));j.displayName="TextField.Slot";var w={Root:x,Slot:j};export{x as Root,j as Slot,w as default};
+import{jsx as r,Fragment as e,jsxs as o}from"react/jsx-runtime";import a,{useState as t}from"react";import{cva as i}from"class-variance-authority";import{cn as n}from"../../utils/utils.mjs";import{radiusVariants as l,bgColorStyle as s}from"../../constants.mjs";import{Theme as c,TextField as u}from"@radix-ui/themes";import{useTheme as d}from"../../theme/ThemeProvider.mjs";import{MAIN_COLOR as m}from"../../color/constants.mjs";import p from"../../Typography/Text/index.mjs";import{IconButton as f}from"../IconButton/index.mjs";import{EyeOpenIcon as h,EyeClosedIcon as g}from"@radix-ui/react-icons";import{useIsClient as v}from"../../is-client-ctx.mjs";var y=function(){return y=Object.assign||function(r){for(var e,o=1,a=arguments.length;o<a;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r},y.apply(this,arguments)},x=function(r,e){var o={};for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&e.indexOf(a)<0&&(o[a]=r[a]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(a=Object.getOwnPropertySymbols(r);t<a.length;t++)e.indexOf(a[t])<0&&Object.prototype.propertyIsEnumerable.call(r,a[t])&&(o[a[t]]=r[a[t]])}return o},j=i("",{variants:{radius:y({},l.base),color:s()}}),w=a.forwardRef((function(a,i){var l,s,w,b=a.className,N=a.color,T=a.size,z=a.appearance,S=a.scaling,R=a.radius,B=a.children,C=a.validationType,P=a.regex,M=a.warningMessage,F=a.onChange,I=a.onBlur,$=x(a,["className","color","size","appearance","scaling","radius","children","validationType","regex","warningMessage","onChange","onBlur"]),k=d().theme,D=t(!1),E=D[0],U=D[1],V=t(null!==(l=$.defaultValue)&&void 0!==l?l:""),_=V[0],q=V[1],A=t(!1),G=A[0],H=A[1],J="2";"small"===T&&(J="1"),"large"===T&&(J="3");var K={scaling:null!==(s=null!=S?S:k.themeScaling)&&void 0!==s?s:"100%",radius:null!=R?R:k.themeRadius,color:null!==(w=null!=N?N:k.themeColor)&&void 0!==w?w:m},L=/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,Q=/^[0-9]+$/,W="";return"number"==C&&(W="숫자만 입력 가능합니다."),"email"==C&&(W="이메일 형식에 어긋납니다."),v()?o("div",{children:[r(c,{scaling:K.scaling,accentColor:K.color,hasBackground:!1,children:o(u.Root,y({ref:i,variant:z,size:J,type:"password"!==C||G?"text":"password",radius:K.radius,color:K.color,className:n(j({radius:K.radius}),b),onChange:function(r){r.target.value&&P?U(!0):"number"!=C||!r.target.value||P||Q.test(r.target.value)?(U(!1),q(r.target.value),F&&F(r)):U(!0)},value:_,onBlur:function(r){I&&I(r),"email"!=C||!r.target.value||L.test(r.target.value)?U(!1):U(!0)}},$,{children:[B,"password"==C&&r(O.Slot,{side:"right",children:r(f,{appearance:"ghost",color:"slate",onMouseDown:function(r){return H(!0)},onMouseUp:function(r){return H(!1)},children:r(G?h:g,{height:"14",width:"14"})})})]}))}),E&&r(p,{size:"1",color:K.color,children:M||W})]}):r(e,{})}));w.displayName="TextField.Root";var b=a.forwardRef((function(e,o){var a=e.className,t=e.color,i=e.side,l=e.radius,s=e.children,c=x(e,["className","color","side","radius","children"]);return r(u.Slot,y({ref:o,color:t,side:i,className:n(j({radius:l}),a)},c,{children:s}))}));b.displayName="TextField.Slot";var O={Root:w,Slot:b};export{w as Root,b as Slot,O as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/is-client-ctx.d.ts

@@ -0,0 +1,4 @@
+export function useIsClient(): any;
+export function IsClientCtxProvider({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/is-client-ctx.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var IsClientCtx = createContext(false);
+export var IsClientCtxProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), isClient = _b[0], setIsClient = _b[1];
+    useEffect(function () { return setIsClient(true); }, []);
+    return _jsx(IsClientCtx.Provider, { value: isClient, children: children });
+};
+export function useIsClient() {
+    return useContext(IsClientCtx);
+}

package/dist/lib/is-client-ctx.mjs

@@ -0,0 +1,2 @@
+import"react/jsx-runtime";var t=createContext(!1);function e(){return useContext(t)}export{e as useIsClient};
+//# sourceMappingURL=is-client-ctx.mjs.map

package/dist/lib/is-client-ctx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-client-ctx.mjs","sources":["../lib/is-client-ctx.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nvar IsClientCtx = createContext(false);\nexport var IsClientCtxProvider = function (_a) {\n    var children = _a.children;\n    var _b = useState(false), isClient = _b[0], setIsClient = _b[1];\n    useEffect(function () { return setIsClient(true); }, []);\n    return _jsx(IsClientCtx.Provider, { value: isClient, children: children });\n};\nexport function useIsClient() {\n    return useContext(IsClientCtx);\n}\n"],"names":["IsClientCtx","createContext","useIsClient","useContext"],"mappings":"0BACA,IAAIA,EAAcC,eAAc,GAOzB,SAASC,IACZ,OAAOC,WAAWH,EACtB"}