@dotss/ui 0.0.10 → 0.0.12

package/FormControlText/FormControlText.cjs

@@ -1,12 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@emotion/react/jsx-runtime"),r=require("react"),C=require("@emotion/styled"),S=e=>e&&e.__esModule?e:{default:e},a=S(C),j=a.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("@emotion/react/jsx-runtime"),l=require("react"),j=require("@emotion/styled"),w=e=>e&&e.__esModule?e:{default:e},d=w(j),_=d.default.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: ${({theme:{spacing:e}})=>e.content(2)}px;
   cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
   flex-direction: ${({placement:e})=>e==="left"?"row-reverse":"row"};
-`,v=a.default.div`
+`,v=d.default.div`
   display: inline-flex;
-`,_=a.default.div`
-  ${({theme:{palette:{grey:e},typography:{h0R:o,b2R:i}},size:s,disabled:c})=>{let l={fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing};return s==="2xLarge"&&(l={fontSize:o.size,fontWeight:o.weight,lineHeight:o.lineHeight,letterSpacing:o.letterSpacing}),c&&(l.color=e[30]),l}}
-`,w=r.forwardRef(function({control:o,text:i,placement:s,size:c,onClick:l,disabled:f,inlineCSS:g,...h},x){const p=r.useRef(null),y=t=>{var n,d;t.preventDefault(),(d=(n=p.current)==null?void 0:n.getElementsByTagName("input")[0])==null||d.click(),typeof l=="function"&&l(t)},m=t=>n=>{n.stopPropagation(),typeof t=="function"&&t(n)};return u.jsxs(j,{ref:x,onClick:y,placement:s,disabled:f,...h,css:g,children:[u.jsx(v,{ref:p,children:r.Children.map(o,t=>{var n;return r.isValidElement(t)?r.cloneElement(t,{size:c,disabled:f,onClick:m((n=t.props)==null?void 0:n.onClick),...t.props}):null})}),u.jsx(_,{size:c,disabled:f,children:i})]})});exports.default=w;
+`,T=d.default.label`
+  cursor: pointer;
+
+  ${({theme:{palette:{grey:e},typography:{h0R:n,b2R:o}},size:u,disabled:c})=>{let i={fontSize:o.size,fontWeight:o.weight,lineHeight:o.lineHeight,letterSpacing:o.letterSpacing};return u==="2xLarge"&&(i={fontSize:n.size,fontWeight:n.weight,lineHeight:n.lineHeight,letterSpacing:n.letterSpacing}),c&&(i.color=e[30],i.cursor="not-allowed"),i}}
+`,F=l.forwardRef(function({control:n,text:o,placement:u,size:c,onClick:i,disabled:a,inlineCSS:h,controlWrapperProps:p,textProps:x,...s},y){const C=l.useRef(null),m=l.useId(),g=(s==null?void 0:s.id)||m,S=t=>r=>{r.stopPropagation(),typeof t=="function"&&t(r)};return f.jsxs(_,{ref:y,placement:u,disabled:a,...s,css:h,children:[f.jsx(v,{ref:C,...p,children:l.Children.map(n,t=>{var r;return l.isValidElement(t)?l.cloneElement(t,{size:c,disabled:a,onClick:S((r=t.props)==null?void 0:r.onClick),id:g,...t.props}):null})}),f.jsx(T,{size:c,disabled:a,htmlFor:g,...x,children:o})]})});exports.default=F;

package/FormControlText/FormControlText.d.ts

@@ -9,6 +9,8 @@ export interface FormControlTextProps extends GeneralComponentProps<HTMLAttribut
     placement?: 'left' | 'right';
     size?: Extract<Size, 'medium' | '2xLarge'>;
     disabled?: boolean;
+    controlWrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    textProps?: GeneralComponentProps<HTMLAttributes<HTMLLabelElement>>;
 }
 declare const FormControlText: import('react').ForwardRefExoticComponent<FormControlTextProps & import('react').RefAttributes<HTMLDivElement>>;
 export default FormControlText;

package/FormControlText/FormControlText.es.js

@@ -1,68 +1,78 @@
-import { jsxs as y, jsx as g } from "@emotion/react/jsx-runtime";
-import { forwardRef as C, useRef as S, Children as w, isValidElement as v, cloneElement as T } from "react";
-import p from "@emotion/styled";
-const j = p.div`
+import { jsxs as w, jsx as g } from "@emotion/react/jsx-runtime";
+import { forwardRef as S, useRef as j, useId as F, Children as H, isValidElement as T, cloneElement as $ } from "react";
+import a from "@emotion/styled";
+const k = a.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
-  cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
-  flex-direction: ${({ placement: e }) => e === "left" ? "row-reverse" : "row"};
-`, k = p.div`
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  cursor: ${({ disabled: t }) => t ? "not-allowed" : "pointer"};
+  flex-direction: ${({ placement: t }) => t === "left" ? "row-reverse" : "row"};
+`, v = a.div`
   display: inline-flex;
-`, H = p.div`
+`, z = a.label`
+  cursor: pointer;
+
   ${({
   theme: {
-    palette: { grey: e },
-    typography: { h0R: o, b2R: i }
+    palette: { grey: t },
+    typography: { h0R: o, b2R: n }
   },
-  size: c,
+  size: f,
   disabled: l
 }) => {
-  let r = {
-    fontSize: i.size,
-    fontWeight: i.weight,
-    lineHeight: i.lineHeight,
-    letterSpacing: i.letterSpacing
+  let i = {
+    fontSize: n.size,
+    fontWeight: n.weight,
+    lineHeight: n.lineHeight,
+    letterSpacing: n.letterSpacing
   };
-  return c === "2xLarge" && (r = {
+  return f === "2xLarge" && (i = {
     fontSize: o.size,
     fontWeight: o.weight,
     lineHeight: o.lineHeight,
     letterSpacing: o.letterSpacing
-  }), l && (r.color = e[30]), r;
+  }), l && (i.color = t[30], i.cursor = "not-allowed"), i;
 }}
-`, F = C(function({ control: o, text: i, placement: c, size: l, onClick: r, disabled: f, inlineCSS: u, ...d }, h) {
-  const s = S(null), m = (t) => {
-    var n, a;
-    t.preventDefault(), (a = (n = s.current) == null ? void 0 : n.getElementsByTagName("input")[0]) == null || a.click(), typeof r == "function" && r(t);
-  }, x = (t) => (n) => {
-    n.stopPropagation(), typeof t == "function" && t(n);
+`, L = S(function({
+  control: o,
+  text: n,
+  placement: f,
+  size: l,
+  onClick: i,
+  disabled: s,
+  inlineCSS: u,
+  controlWrapperProps: p,
+  textProps: h,
+  ...c
+}, m) {
+  const x = j(null), C = F(), d = (c == null ? void 0 : c.id) || C, y = (e) => (r) => {
+    r.stopPropagation(), typeof e == "function" && e(r);
   };
-  return /* @__PURE__ */ y(
-    j,
+  return /* @__PURE__ */ w(
+    k,
     {
-      ref: h,
-      onClick: m,
-      placement: c,
-      disabled: f,
-      ...d,
+      ref: m,
+      placement: f,
+      disabled: s,
+      ...c,
       css: u,
       children: [
-        /* @__PURE__ */ g(k, { ref: s, children: w.map(o, (t) => {
-          var n;
-          return v(t) ? T(t, {
+        /* @__PURE__ */ g(v, { ref: x, ...p, children: H.map(o, (e) => {
+          var r;
+          return T(e) ? $(e, {
             size: l,
-            disabled: f,
-            onClick: x((n = t.props) == null ? void 0 : n.onClick),
-            ...t.props
+            disabled: s,
+            onClick: y((r = e.props) == null ? void 0 : r.onClick),
+            id: d,
+            ...e.props
           }) : null;
         }) }),
-        /* @__PURE__ */ g(H, { size: l, disabled: f, children: i })
+        /* @__PURE__ */ g(z, { size: l, disabled: s, htmlFor: d, ...h, children: n })
       ]
     }
   );
 });
 export {
-  F as default
+  L as default
 };

package/Icon/Icon.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-IVJAK4qr.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),t=require("react"),S=require("../resources/tictoccroc/icons/index.ts-BmqvB_n6.cjs"),b=require("@emotion/styled"),h=require("../utils/getPaletteColor/getPaletteColor.cjs"),I=r=>r&&r.__esModule?r:{default:r},w=I(b),$=r=>w.default(r)`
   ${({size:o,width:s,height:a})=>{let n={width:s,height:a};switch(o){case"large":n={width:32,height:32};break;case"medium":n={width:24,height:24};break;case"small":n={width:20,height:20};break;case"xSmall":n={width:16,height:16};break}return n}};
 
   color: ${({theme:o,color:s="grey.100"})=>h.default(s,{theme:o})};

package/Icon/Icon.es.js

@@ -1,6 +1,6 @@
 import { jsx as w } from "@emotion/react/jsx-runtime";
 import { forwardRef as y, Children as f, isValidElement as i, cloneElement as s } from "react";
-import { S as $ } from "../resources/tictoccroc/icons/index.ts-CarI_z7q.js";
+import { S as $ } from "../resources/tictoccroc/icons/index.ts-CzTh-XsD.js";
 import b from "@emotion/styled";
 import x from "../utils/getPaletteColor/getPaletteColor.es.js";
 const g = (p) => b(p)`

package/IconButton/IconButton.cjs

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),h=require("react"),b=require("../Icon/Icon.cjs"),g=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),k=require("../utils/getIconLabel/getIconLabel.cjs"),v=require("@emotion/styled"),f=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),m=r=>r&&r.__esModule?r:{default:r},s=m(v),C=s.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),v=require("react"),m=require("../Icon/Icon.cjs"),C=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),p=require("../utils/getIconLabel/getIconLabel.cjs"),w=require("@emotion/styled"),x=require("../utils/getContrastingTextColor/getContrastingTextColor.cjs"),j=r=>r&&r.__esModule?r:{default:r},u=j(w),q=u.default.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 100px;
 
-  ${({theme:{spacing:r},size:e})=>{let i={width:40,height:40,padding:r.content(1)};switch(e){case"2xLarge":i={width:80,height:80,padding:0};break;case"xLarge":i={width:56,height:56,padding:r.content(.5)};break;case"large":i={width:48,height:48,padding:r.content(1)};break;case"small":i={width:32,height:32,padding:r.content(1)};break;case"xSmall":i={width:24,height:24,padding:r.content(.5)};break}return i}};
+  ${({theme:{spacing:r},size:t})=>{let i={width:40,height:40,padding:r.content(1)};switch(t){case"2xLarge":i={width:80,height:80,padding:0};break;case"xLarge":i={width:56,height:56,padding:r.content(.5)};break;case"large":i={width:48,height:48,padding:r.content(1)};break;case"small":i={width:32,height:32,padding:r.content(1)};break;case"xSmall":i={width:24,height:24,padding:r.content(.5)};break}return i}};
 
-  ${({theme:{palette:{yellow:r,grey:e}},variant:i,color:a,isHoverPossible:t})=>{let o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[10]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[10]}}:{}};switch(i){case"standard":a==="tertiary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[80]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[80]}}:{}});break;case"filled":a==="primary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:r[80]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:r[80]}}:{}}),a==="secondary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[100]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[100]}}:{}});break;case"outlined":a==="primary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[10]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[10]}}:{}}),a==="tertiary"&&(o={'&:not([aria-disabled="true"]):active > div':{backgroundColor:e[100]},...t?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:e[100]}}:{}});break}return o}};
+  ${({theme:{palette:{yellow:r,grey:t}},variant:i,color:a,isHoverPossible:e})=>{let d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[10]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[10]}}:{}};switch(i){case"standard":a==="tertiary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[80]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[80]}}:{}});break;case"filled":a==="primary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:r[80]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:r[80]}}:{}}),a==="secondary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[100]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[100]}}:{}});break;case"outlined":a==="primary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[10]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[10]}}:{}}),a==="tertiary"&&(d={'&:not([aria-disabled="true"]):active > div':{backgroundColor:t[100]},...e?{'&:not([aria-disabled="true"]):hover > div':{backgroundColor:t[100]}}:{}});break}return d}};
 
   &[aria-disabled='true'] {
     cursor: not-allowed;
 
     & > div {
-      ${({theme:{palette:{brand:r,grey:e}},variant:i,color:a})=>{let t={backgroundColor:"transparent","& svg":{color:e[30]}};switch(i){case"standard":a==="tertiary"&&(t={backgroundColor:"transparent","& svg":{color:e[80]}});break;case"filled":a==="primary"&&(t={backgroundColor:r.primary.disable,"& svg":{color:e[30]}}),a==="secondary"&&(t={backgroundColor:e[10],"& svg":{color:e[30]}});break;case"outlined":a==="secondary"&&(t={backgroundColor:e[10],borderColor:e[30],"& svg":{color:e[30]}}),a==="tertiary"&&(t={backgroundColor:e[80],borderColor:e[70],"& svg":{color:e[70]}});break}return t}};
+      ${({theme:{palette:{brand:r,grey:t}},variant:i,color:a})=>{let e={backgroundColor:"transparent","& svg":{color:t[30]}};switch(i){case"standard":a==="tertiary"&&(e={backgroundColor:"transparent","& svg":{color:t[80]}});break;case"filled":a==="primary"&&(e={backgroundColor:r.primary.disable,"& svg":{color:t[30]}}),a==="secondary"&&(e={backgroundColor:t[10],"& svg":{color:t[30]}});break;case"outlined":a==="secondary"&&(e={backgroundColor:t[10],borderColor:t[30],"& svg":{color:t[30]}}),a==="tertiary"&&(e={backgroundColor:t[80],borderColor:t[70],"& svg":{color:t[70]}});break}return e}};
     }
   }
-`,p=s.default.div`
+`,W=u.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,7 +24,7 @@
   border: 1px solid transparent;
   border-radius: 100px;
 
-  ${({theme:{palette:{brand:r,grey:e}},variant:i,color:a})=>{let t={backgroundColor:"transparent"};switch(i){case"standard":a==="tertiary"&&(t={backgroundColor:"transparent","& svg":{color:e.white}});break;case"filled":a==="primary"&&(t={backgroundColor:r.primary.main,color:f.default(r.primary.main,[e.white,e[100]]),"& svg":{color:"inherit"}}),a==="secondary"&&(t={backgroundColor:r.secondary,color:e.white,"& svg":{color:"inherit"}});break;case"outlined":a==="primary"&&(t={backgroundColor:e.white,borderColor:e[50]}),a==="tertiary"&&(t={backgroundColor:"transparent",borderColor:e[50],"& svg":{color:e[50]}});break}return t}};
+  ${({theme:{palette:{brand:r,grey:t}},variant:i,color:a})=>{let e={backgroundColor:"transparent"};switch(i){case"standard":a==="tertiary"&&(e={backgroundColor:"transparent","& svg":{color:t.white}});break;case"filled":a==="primary"&&(e={backgroundColor:r.primary.main,color:x.default(r.primary.main,[t.white,t[100]]),"& svg":{color:"inherit"}}),a==="secondary"&&(e={backgroundColor:r.secondary,color:t.white,"& svg":{color:"inherit"}});break;case"outlined":a==="primary"&&(e={backgroundColor:t.white,borderColor:t[50]}),a==="tertiary"&&(e={backgroundColor:"transparent",borderColor:t[50],"& svg":{color:t[50]}});break}return e}};
 
-  ${({size:r})=>{let e={minWidth:32,minHeight:32,"& svg":{width:24,height:24}};switch(r){case"2xLarge":e={minWidth:80,minHeight:80,borderWidth:2,"& svg":{width:48,height:48}};break;case"xLarge":e={minWidth:52,minHeight:52,"& svg":{width:36,height:36}};break;case"large":e={minWidth:40,minHeight:40,"& svg":{width:32,height:32}};break;case"small":e={minWidth:24,minHeight:24,"& svg":{width:16,height:16}};break;case"xSmall":e={minWidth:20,minHeight:20,"& svg":{width:16,height:16}};break}return e}};
-`,w=h.forwardRef(function({name:e,variant:i="standard",size:a="medium",color:t="primary",inlineCSS:o,disabled:n=!1,...c},l){const{isHoverPossible:u}=g.default();return d.jsx(C,{ref:l,variant:i,size:a,color:t,"aria-disabled":n,"aria-label":k.default(e),isHoverPossible:u,disabled:n,...c,css:o,children:d.jsx(p,{variant:i,size:a,color:t,children:d.jsx(b.default,{name:e,focusable:!1})})})});exports.default=w;
+  ${({size:r})=>{let t={minWidth:32,minHeight:32,"& svg":{width:24,height:24}};switch(r){case"2xLarge":t={minWidth:80,minHeight:80,borderWidth:2,"& svg":{width:48,height:48}};break;case"xLarge":t={minWidth:52,minHeight:52,"& svg":{width:36,height:36}};break;case"large":t={minWidth:40,minHeight:40,"& svg":{width:32,height:32}};break;case"small":t={minWidth:24,minHeight:24,"& svg":{width:16,height:16}};break;case"xSmall":t={minWidth:20,minHeight:20,"& svg":{width:16,height:16}};break}return t}};
+`,_=v.forwardRef(function({name:t,variant:i="standard",size:a="medium",color:e="primary",inlineCSS:d,disabled:o=!1,onClick:n,onKeyDown:s,...h},b){const{isHoverPossible:g}=C.default(),k=c=>{o||n==null||n(c)},f=c=>{o||s==null||s(c)};return l.jsx(q,{ref:b,variant:i,size:a,color:e,"aria-disabled":o,"aria-label":p.default(t),isHoverPossible:g,onClick:k,onKeyDown:f,...h,css:d,children:l.jsx(W,{variant:i,size:a,color:e,children:l.jsx(m.default,{name:t,focusable:!1})})})});exports.default=_;

package/IconButton/IconButton.es.js

@@ -1,11 +1,11 @@
-import { jsx as d } from "@emotion/react/jsx-runtime";
-import { forwardRef as b } from "react";
-import u from "../Icon/Icon.es.js";
-import m from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import g from "../utils/getIconLabel/getIconLabel.es.js";
-import c from "@emotion/styled";
-import k from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
-const v = c.button`
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as f } from "react";
+import v from "../Icon/Icon.es.js";
+import p from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import C from "../utils/getIconLabel/getIconLabel.es.js";
+import h from "@emotion/styled";
+import w from "../utils/getContrastingTextColor/getContrastingTextColor.es.js";
+const x = h.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -157,7 +157,7 @@ const v = c.button`
 }};
     }
   }
-`, f = c.div`
+`, j = h.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -188,7 +188,7 @@ const v = c.button`
     case "filled":
       a === "primary" && (t = {
         backgroundColor: e.primary.main,
-        color: k(e.primary.main, [r.white, r[100]]),
+        color: w(e.primary.main, [r.white, r[100]]),
         "& svg": {
           color: "inherit"
         }
@@ -280,33 +280,40 @@ const v = c.button`
   }
   return r;
 }};
-`, L = b(function({
+`, S = f(function({
   name: r,
   variant: i = "standard",
   size: a = "medium",
   color: t = "primary",
   inlineCSS: o,
-  disabled: n = !1,
-  ...s
-}, l) {
-  const { isHoverPossible: h } = m();
-  return /* @__PURE__ */ d(
-    v,
+  disabled: d = !1,
+  onClick: n,
+  onKeyDown: c,
+  ...b
+}, u) {
+  const { isHoverPossible: m } = p(), g = (s) => {
+    d || n == null || n(s);
+  }, k = (s) => {
+    d || c == null || c(s);
+  };
+  return /* @__PURE__ */ l(
+    x,
     {
-      ref: l,
+      ref: u,
       variant: i,
       size: a,
       color: t,
-      "aria-disabled": n,
-      "aria-label": g(r),
-      isHoverPossible: h,
-      disabled: n,
-      ...s,
+      "aria-disabled": d,
+      "aria-label": C(r),
+      isHoverPossible: m,
+      onClick: g,
+      onKeyDown: k,
+      ...b,
       css: o,
-      children: /* @__PURE__ */ d(f, { variant: i, size: a, color: t, children: /* @__PURE__ */ d(u, { name: r, focusable: !1 }) })
+      children: /* @__PURE__ */ l(j, { variant: i, size: a, color: t, children: /* @__PURE__ */ l(v, { name: r, focusable: !1 }) })
     }
   );
 });
 export {
-  L as default
+  S as default
 };

package/LineProgressIndicator/LineProgressIndicator.cjs

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@emotion/react/jsx-runtime"),f=require("react"),p=require("@emotion/react"),g=require("@emotion/styled"),m=e=>e&&e.__esModule?e:{default:e},n=m(g),h=p.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@emotion/react/jsx-runtime"),f=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),p=e=>e&&e.__esModule?e:{default:e},o=p(m),b=g.keyframes`
     to {
         transform: translateX(100%);
     }
-`,y=n.default.div`
+`,h=o.default.div`
   position: relative;
   height: ${({size:e})=>e==="large"?42:4}px;
   border-radius: 100px;
   background-color: ${({theme:{palette:{grey:e}}})=>e[10]};
   overflow: hidden;
-`,x=n.default.div`
+`,y=o.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -21,8 +21,8 @@
   transition: transform ${({transitionDuration:e})=>e}ms linear;
   background-color: ${({theme:{palette:{brand:e}}})=>e.primary.main};
 
-  ${({loop:e})=>e?{animation:`${h} 1s infinite`}:{}};
-`,b=n.default.div`
+  ${({loop:e})=>e?{animation:`${b} 1s infinite`}:{}};
+`,x=o.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -32,4 +32,4 @@
   width: 100%;
   height: 100%;
   white-space: nowrap;
-`,j=f.forwardRef(function({children:o,size:i,value:s=0,transitionDuration:l=500,loop:a,inlineCSS:d,...c},u){let t=s-100;return t=s>100?0:t,t=a?-80:t,r.jsxs(y,{ref:u,size:i,...c,css:d,children:[r.jsx(x,{transitionDuration:l,loop:a,style:{transform:`translate3d(${t}%, 0, 0)`}}),i==="large"&&o&&r.jsx(b,{children:o})]})});exports.default=j;
+`,j=f.forwardRef(function({children:s,size:l,value:r=0,transitionDuration:d=500,loop:a,inlineCSS:c,...i},u){let t=r-100;return t=r>100?0:t,t=a?-80:t,n.jsxs(h,{role:"progressbar","aria-valuenow":a?void 0:r,"aria-label":i["aria-label"]?i["aria-label"]:"로딩 중",ref:u,size:l,...i,css:c,children:[n.jsx(y,{transitionDuration:d,loop:a,style:{transform:`translate3d(${t}%, 0, 0)`}}),l==="large"&&s&&n.jsx(x,{children:s})]})});exports.default=j;

package/LineProgressIndicator/LineProgressIndicator.es.js

@@ -1,12 +1,12 @@
-import { jsxs as m, jsx as a } from "@emotion/react/jsx-runtime";
+import { jsxs as m, jsx as l } from "@emotion/react/jsx-runtime";
 import { forwardRef as p } from "react";
 import { keyframes as g } from "@emotion/react";
-import r from "@emotion/styled";
+import a from "@emotion/styled";
 const h = g`
     to {
         transform: translateX(100%);
     }
-`, u = r.div`
+`, b = a.div`
   position: relative;
   height: ${({ size: t }) => t === "large" ? 42 : 4}px;
   border-radius: 100px;
@@ -16,7 +16,7 @@ const h = g`
   }
 }) => t[10]};
   overflow: hidden;
-`, y = r.div`
+`, u = a.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -36,7 +36,7 @@ const h = g`
   ${({ loop: t }) => t ? {
   animation: `${h} 1s infinite`
 } : {}};
-`, x = r.div`
+`, y = a.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -46,24 +46,36 @@ const h = g`
   width: 100%;
   height: 100%;
   white-space: nowrap;
-`, v = p(
-  function({ children: o, size: i, value: n = 0, transitionDuration: l = 500, loop: s, inlineCSS: d, ...c }, f) {
-    let e = n - 100;
-    return e = n > 100 ? 0 : e, e = s ? -80 : e, /* @__PURE__ */ m(u, { ref: f, size: i, ...c, css: d, children: [
-      /* @__PURE__ */ a(
-        y,
-        {
-          transitionDuration: l,
-          loop: s,
-          style: {
-            transform: `translate3d(${e}%, 0, 0)`
-          }
-        }
-      ),
-      i === "large" && o && /* @__PURE__ */ a(x, { children: o })
-    ] });
+`, j = p(
+  function({ children: n, size: s, value: r = 0, transitionDuration: d = 500, loop: i, inlineCSS: c, ...o }, f) {
+    let e = r - 100;
+    return e = r > 100 ? 0 : e, e = i ? -80 : e, /* @__PURE__ */ m(
+      b,
+      {
+        role: "progressbar",
+        "aria-valuenow": i ? void 0 : r,
+        "aria-label": o["aria-label"] ? o["aria-label"] : "로딩 중",
+        ref: f,
+        size: s,
+        ...o,
+        css: c,
+        children: [
+          /* @__PURE__ */ l(
+            u,
+            {
+              transitionDuration: d,
+              loop: i,
+              style: {
+                transform: `translate3d(${e}%, 0, 0)`
+              }
+            }
+          ),
+          s === "large" && n && /* @__PURE__ */ l(y, { children: n })
+        ]
+      }
+    );
   }
 );
 export {
-  v as default
+  j as default
 };

package/Menu/Menu.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),o=require("react"),X=require("react-dom"),Y=require("@emotion/styled"),Z=t=>t&&t.__esModule?t:{default:t},x=Z(Y),tt=x.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),o=require("react"),ot=require("react-dom"),z=require("../utils/getSibling/getSibling.cjs"),st=require("@emotion/styled"),it=e=>e&&e.__esModule?e:{default:e},$=it(st),rt=$.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -6,30 +6,30 @@
   height: 100%;
   z-index: 100003;
 
-    ${({disableClickOutside:t})=>t?null:{pointerEvents:"none","& *":{pointerEvents:"auto"}}}}
+    ${({disableClickOutside:e})=>e?null:{pointerEvents:"none","& *":{pointerEvents:"auto"}}}}
 
-`,et=x.default.div`
+`,ut=$.default.div`
   position: fixed;
-  max-width: calc(100% - ${({theme:{spacing:t}})=>t.layout(4)}px);
+  max-width: calc(100% - ${({theme:{spacing:e}})=>e.layout(4)}px);
   border-radius: 10px;
   overflow: hidden;
-  background-color: ${({theme:{palette:{grey:t}}})=>t.white};
-  box-shadow: ${({theme:{elevation:t}})=>t[4]};
+  background-color: ${({theme:{palette:{grey:e}}})=>e.white};
+  box-shadow: ${({theme:{elevation:e}})=>e[4]};
   transition:
-    transform ${({transitionDuration:t})=>t}ms,
-    opacity ${({transitionDuration:t=0})=>t/2}ms;
-  transform: scale(${({open:t})=>t?1:.97});
-  opacity: ${({open:t})=>t?1:0};
+    transform ${({transitionDuration:e})=>e}ms,
+    opacity ${({transitionDuration:e=0})=>e/2}ms;
+  transform: scale(${({open:e})=>e?1:.97});
+  opacity: ${({open:e})=>e?1:0};
   z-index: 100003;
-`,ot=x.default.ul`
+`,nt=$.default.ul`
   display: flex;
   flex-direction: column;
-  max-height: ${({maxHeight:t})=>t}px;
+  max-height: ${({maxHeight:e})=>e}px;
   overflow-y: auto;
 
-    ${({theme:{spacing:t},disablePadding:c})=>c?null:{padding:`${t.content(1)}px 0`}}}
-`,st=x.default.div`
+    ${({theme:{spacing:e},disablePadding:l})=>l?null:{padding:`${e.content(1)}px 0`}}}
+`,ct=$.default.div`
   width: 100%;
   height: 1px;
-  background-color: ${({theme:{palette:{grey:t}}})=>t[20]};
-`,b=24,it=o.forwardRef(function({children:c,anchorRef:u,open:v,onClose:m,spacing:f=4,transitionDuration:g=200,onChange:T,value:L,showDivider:P,placement:_="bottom-center",disablePadding:q,disableClickOutside:z=!0,width:E,fitToAnchorWidth:$=!0,maxHeight:H=476,style:R,inlineCSS:B,...D},G){const[h,j]=o.useState(0),[k,S]=o.useState(0),[w,F]=o.useState(0),[M,C]=o.useState(!1),[N,V]=o.useState(!1),[A,O]=o.useState(!0),l=o.useRef(),a=o.useRef(),W=o.useRef(null),J=(e,i)=>r=>{r.stopPropagation(),typeof m=="function"&&m(),typeof T=="function"&&T(e,r),typeof i=="function"&&i(r)};return o.useEffect(()=>{v&&(a.current&&clearTimeout(a.current),document.body.style.overflow="hidden",O(!1),l.current=setTimeout(()=>{C(!0)},100))},[v]),o.useEffect(()=>{v||(l.current&&clearTimeout(l.current),C(!1),document.body.removeAttribute("style"),a.current=setTimeout(()=>{O(!0)},g))},[v,g]),o.useEffect(()=>{const e=()=>{var I;const{offsetWidth:i=0,offsetHeight:r=0}=(u==null?void 0:u.current)||{},s=((I=u==null?void 0:u.current)==null?void 0:I.getBoundingClientRect())||{top:0,left:0,bottom:0},{offsetWidth:p=0,offsetHeight:n=0}=W.current||{},[y,K]=_.split("-");F(E||i);const Q=(s.top||0)-n-f-b<b,U=(s.bottom||0)+n+f+b>window.innerHeight;switch(y){case"top":j(Q?b:s.top-n-f);break;default:j(U?"auto":s.top+r+f);break}switch(K){case"left":S(s.left);break;case"right":S(s.left-Math.abs(i-p));break;default:S(s.left+i/2-p/2);break}};return e(),window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[u,f,_,M,c,E]),o.useEffect(()=>{V(M&&!!h&&!!k&&!!w)},[M,h,k,w]),o.useEffect(()=>()=>{l.current&&clearTimeout(l.current),a.current&&clearTimeout(a.current)},[]),A?null:X.createPortal(d.jsx(tt,{onClick:m,disableClickOutside:z,children:d.jsx(et,{ref:G,open:N,transitionDuration:g,...D,css:B,style:{...R,top:h,left:k,bottom:h==="auto"?24:void 0,width:$?w:void 0},children:d.jsx(ot,{ref:W,disablePadding:q,maxHeight:H,children:o.Children.map(c,(e,i)=>{var r,s,p,n,y;return o.isValidElement(e)?d.jsxs(d.Fragment,{children:[o.cloneElement(e,{...e.props,selected:!!((r=e==null?void 0:e.props)!=null&&r.value)&&((s=e==null?void 0:e.props)==null?void 0:s.value)===L,onClick:J((p=e==null?void 0:e.props)==null?void 0:p.value,(n=e==null?void 0:e.props)==null?void 0:n.onClick),style:{...(y=e==null?void 0:e.props)==null?void 0:y.style,[E?"width":"minWidth"]:$?void 0:w,maxWidth:$?void 0:"100%"}}),P&&o.Children.count(c)!==i+1&&d.jsx(st,{})]}):null})})})}),document.body)});exports.default=it;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[20]};
+`,k=24,dt=o.forwardRef(function({children:l,anchorRef:d,open:w,onClose:f,spacing:v=4,transitionDuration:T=200,onChange:h,value:H,showDivider:F,placement:D="bottom-center",disablePadding:N,disableClickOutside:R=!0,width:M,fitToAnchorWidth:I=!0,maxHeight:A=476,style:B,inlineCSS:C,menuProps:G,...K},U){const[m,O]=o.useState(0),[_,j]=o.useState(0),[g,V]=o.useState(0),[q,W]=o.useState(!1),[J,Q]=o.useState(!1),[X,L]=o.useState(!0),[Y,p]=o.useState(null),b=o.useRef(),x=o.useRef(),E=o.useRef(null),Z=(t,s)=>u=>{u.stopPropagation(),typeof f=="function"&&f(),typeof h=="function"&&h(t,u),typeof s=="function"&&s(u)},tt=t=>s=>{var r,c,n,a;s.key==="Tab"&&typeof f=="function"&&(f(),p(0)),(s.key==="Enter"||s.key===" ")&&typeof f=="function"&&typeof h=="function"&&(f(),h(t,s));const u=document.activeElement;if(u){if(s.code==="ArrowDown"){const i=z.default(u,"next",{skipDisabled:!0});i&&i.dataset.index?(p(Number(i.dataset.index)),i.focus()):(p(0),(c=(r=E.current)==null?void 0:r.querySelector('[role="menuitem"]'))==null||c.focus())}if(s.code==="ArrowUp"){const i=z.default(u,"prev",{skipDisabled:!0});i&&i.dataset.index?(p(Number(i.dataset.index)),i.focus()):(p(o.Children.count(l)-1),(a=(n=E.current)==null?void 0:n.querySelector('[role="menuitem"]:last-child'))==null||a.focus())}}};return o.useEffect(()=>{w&&(x.current&&clearTimeout(x.current),document.body.style.overflow="hidden",L(!1),b.current=setTimeout(()=>{W(!0)},100))},[w]),o.useEffect(()=>{w||(b.current&&clearTimeout(b.current),W(!1),document.body.removeAttribute("style"),x.current=setTimeout(()=>{L(!0),p(0)},T))},[w,T]),o.useEffect(()=>{const t=()=>{var P;const{offsetWidth:s=0,offsetHeight:u=0}=(d==null?void 0:d.current)||{},r=((P=d==null?void 0:d.current)==null?void 0:P.getBoundingClientRect())||{top:0,left:0,bottom:0},{offsetWidth:c=0,offsetHeight:n=0}=E.current||{},[a,i]=D.split("-");V(M||s);const S=(r.top||0)-n-v-k<k,et=(r.bottom||0)+n+v+k>window.innerHeight;switch(a){case"top":O(S?k:r.top-n-v);break;default:O(et?"auto":r.top+u+v);break}switch(i){case"left":j(r.left);break;case"right":j(r.left-Math.abs(s-c));break;default:j(r.left+s/2-c/2);break}};return t(),window.addEventListener("scroll",t),window.addEventListener("resize",t),()=>{window.removeEventListener("scroll",t),window.removeEventListener("resize",t)}},[d,v,D,q,l,M]),o.useEffect(()=>{Q(q&&!!m&&!!_&&!!g)},[q,m,_,g]),o.useEffect(()=>()=>{b.current&&clearTimeout(b.current),x.current&&clearTimeout(x.current)},[]),X?null:ot.createPortal(y.jsx(rt,{onClick:f,disableClickOutside:R,children:y.jsx(ut,{ref:U,open:J,transitionDuration:T,...K,css:C,style:{...B,top:m,left:_,bottom:m==="auto"?24:void 0,width:I?g:void 0},children:y.jsx(nt,{role:"menu",ref:E,disablePadding:N,maxHeight:A,...G,children:o.Children.map(l,(t,s)=>{var r,c,n,a,i,S;if(!o.isValidElement(t))return null;const u=Y===s;return y.jsxs(y.Fragment,{children:[o.cloneElement(t,{...t.props,"data-index":s,selected:!!((r=t==null?void 0:t.props)!=null&&r.value)&&((c=t==null?void 0:t.props)==null?void 0:c.value)===H,onClick:Z((n=t==null?void 0:t.props)==null?void 0:n.value,(a=t==null?void 0:t.props)==null?void 0:a.onClick),onKeyDown:tt((i=t==null?void 0:t.props)==null?void 0:i.value),tabIndex:u?0:-1,style:{...(S=t==null?void 0:t.props)==null?void 0:S.style,[M?"width":"minWidth"]:I?void 0:g,maxWidth:I?void 0:"100%"}}),F&&o.Children.count(l)!==s+1&&y.jsx(ct,{})]})})})})}),document.body)});exports.default=dt;

package/Menu/Menu.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, MouseEvent, ReactElement, ReactNode, RefObject } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, RefObject, SyntheticEvent } from 'react';
 import { GeneralComponentProps } from '../typings/component';
 import { default as MenuBlock } from './MenuBlock';
 
@@ -8,7 +8,7 @@ export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTM
     onClose?: () => void;
     spacing?: number;
     transitionDuration?: number;
-    onChange?: (newValue?: string | number, e?: MouseEvent) => void;
+    onChange?: (newValue?: string | number, e?: SyntheticEvent) => void;
     value?: string | number;
     showDivider?: boolean;
     placement?: 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center';
@@ -18,6 +18,7 @@ export interface MenuProps extends GeneralComponentProps<Omit<HTMLAttributes<HTM
     width?: number;
     fitToAnchorWidth?: boolean;
     maxHeight?: number;
+    menuProps?: HTMLAttributes<HTMLUListElement>;
 }
 declare const Menu: import('react').ForwardRefExoticComponent<MenuProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Menu;