@jenesei-software/jenesei-kit-react 1.0.0

package/build/component-CBshLNEf.js

@@ -0,0 +1,50 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useRef, useCallback } from "react";
+import { ImageSupportedFormatsForInput } from "./consts.es.js";
+import { u as useImageCrop } from "./use-BVj4dgbW.js";
+import { c as Button } from "./component-DZxbW_Jz.js";
+const ImageButton = (props) => {
+  const refInput = useRef(null);
+  const handleOpenFileDialog = useCallback(() => {
+    var _a;
+    (_a = refInput.current) == null ? void 0 : _a.click();
+  }, []);
+  const { handleAddFiles } = useImageCrop({
+    onSave: props.onSave,
+    locale: props.locale,
+    dialog: props.dialog,
+    imageSettings: props.imageSettings,
+    refInput
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        ...props.button,
+        onClick: (e) => {
+          var _a, _b;
+          (_b = (_a = props.button).onClick) == null ? void 0 : _b.call(_a, e);
+          handleOpenFileDialog();
+        },
+        children: props.button.children || props.locale.buttonAdd
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        ref: refInput,
+        type: "file",
+        accept: ImageSupportedFormatsForInput,
+        multiple: true,
+        style: { display: "none" },
+        onChange: (e) => {
+          if (e.target.files) handleAddFiles(e.target.files);
+        }
+      }
+    )
+  ] });
+};
+export {
+  ImageButton as I
+};
+//# sourceMappingURL=component-CBshLNEf.js.map

package/build/component-CBshLNEf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-CBshLNEf.js","sources":["../src/components/image-button/component.tsx"],"sourcesContent":["import { FC, useCallback, useRef } from 'react'\n\nimport { ImageSupportedFormatsForInput } from '@local/consts'\nimport { useImageCrop } from '@local/hooks/use-image-crop'\n\nimport { ImageButtonProps } from '.'\nimport { Button } from '../button'\n\nexport const ImageButton: FC<ImageButtonProps> = props => {\n  const refInput = useRef<HTMLInputElement | null>(null)\n\n  const handleOpenFileDialog = useCallback(() => {\n    refInput.current?.click()\n  }, [])\n\n  const { handleAddFiles } = useImageCrop({\n    onSave: props.onSave,\n    locale: props.locale,\n    dialog: props.dialog,\n    imageSettings: props.imageSettings,\n    refInput: refInput\n  })\n\n  return (\n    <>\n      <Button\n        {...props.button}\n        onClick={e => {\n          props.button.onClick?.(e)\n          handleOpenFileDialog()\n        }}\n      >\n        {props.button.children || props.locale.buttonAdd}\n      </Button>\n      <input\n        ref={refInput}\n        type=\"file\"\n        accept={ImageSupportedFormatsForInput}\n        multiple\n        style={{ display: 'none' }}\n        onChange={e => {\n          if (e.target.files) handleAddFiles(e.target.files)\n        }}\n      />\n    </>\n  )\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAQO,MAAM,cAAoC,CAAA,UAAS;AACxD,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,uBAAuB,YAAY,MAAM;;AAC7C,mBAAS,YAAT,mBAAkB;AAAA,EAAM,GACvB,EAAE;AAEL,QAAM,EAAE,eAAA,IAAmB,aAAa;AAAA,IACtC,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,QAAQ,MAAM;AAAA,IACd,eAAe,MAAM;AAAA,IACrB;AAAA,EAAA,CACD;AAED,SACEA,kCAAAA,KAAAC,4BAAA,EACE,UAAA;AAAA,IAAAC,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG,MAAM;AAAA,QACV,SAAS,CAAA,MAAK;;AACZ,4BAAM,QAAO,YAAb,4BAAuB;AACvB,+BAAA;AAAA,QAAqB;AAAA,QAGtB,UAAA,MAAM,OAAO,YAAY,MAAM,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAEzCA,kCAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,UAAQ;AAAA,QACR,OAAO,EAAE,SAAS,OAAA;AAAA,QAClB,UAAU,CAAA,MAAK;AACb,cAAI,EAAE,OAAO,MAAO,gBAAe,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MACnD;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/build/component-CFMlaYj1.js

@@ -0,0 +1,66 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { c as Button } from "./component-DZxbW_Jz.js";
+import { css, styled } from "styled-components";
+import { a as addSX } from "./style-plT9Ah7t.js";
+const ButtonGroupWrapperPositionHorizontal = css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: space-between;
+  & #jenesei-button {
+    &:not(:only-child) {
+      flex-grow: 1;
+      &:first-child {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      }
+      &:last-child {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+    }
+  }
+`;
+const ButtonGroupWrapperPositionVertical = css`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+
+  & #jenesei-button {
+    &:not(:only-child) {
+      &:first-child {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:last-child {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+    }
+  }
+`;
+const ButtonGroupWrapper = styled.div`
+  & #jenesei-button {
+    &:focus-visible {
+      z-index: 1;
+    }
+  }
+  ${(props) => props.$position === "horizontal" ? ButtonGroupWrapperPositionHorizontal : ButtonGroupWrapperPositionVertical};
+  ${addSX};
+`;
+const ButtonGroup = (props) => {
+  var _a;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWrapper, { $sx: props.sx, $position: props.position, className: props.className, id: "jenesei-button-group", children: (_a = props.value) == null ? void 0 : _a.map((button, id) => /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { id: "jenesei-button", ...button }, id)) });
+};
+export {
+  ButtonGroupWrapper as B,
+  ButtonGroup as a
+};
+//# sourceMappingURL=component-CFMlaYj1.js.map

package/build/component-CFMlaYj1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-CFMlaYj1.js","sources":["../src/components/button-group/component.styles.ts","../src/components/button-group/component.tsx"],"sourcesContent":["import { css, styled } from 'styled-components'\n\nimport { addSX } from '@local/styles/sx'\n\nimport { StyledButtonGroupProps } from '.'\n\n/****************************************** Position *************************************************/\nconst ButtonGroupWrapperPositionHorizontal = css`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: space-between;\n  & #jenesei-button {\n    &:not(:only-child) {\n      flex-grow: 1;\n      &:first-child {\n        border-bottom-right-radius: 0;\n        border-top-right-radius: 0;\n      }\n      &:last-child {\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n      }\n      &:not(:first-child):not(:last-child) {\n        border-radius: 0;\n      }\n    }\n  }\n`\n\nconst ButtonGroupWrapperPositionVertical = css`\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n\n  & #jenesei-button {\n    &:not(:only-child) {\n      &:first-child {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      &:last-child {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n      }\n      &:not(:first-child):not(:last-child) {\n        border-radius: 0;\n      }\n    }\n  }\n`\n\nexport const ButtonGroupWrapper = styled.div<StyledButtonGroupProps>`\n  & #jenesei-button {\n    &:focus-visible {\n      z-index: 1;\n    }\n  }\n  ${props =>\n    props.$position === 'horizontal' ? ButtonGroupWrapperPositionHorizontal : ButtonGroupWrapperPositionVertical};\n  ${addSX};\n`\n","import { FC } from 'react'\n\nimport { Button } from '@local/components/button'\n\nimport { ButtonGroupProps, ButtonGroupWrapper } from '.'\n\nexport const ButtonGroup: FC<ButtonGroupProps> = props => {\n  return (\n    <ButtonGroupWrapper $sx={props.sx} $position={props.position} className={props.className} id=\"jenesei-button-group\">\n      {props.value?.map((button, id) => <Button id=\"jenesei-button\" key={id} {...button} />)}\n    </ButtonGroupWrapper>\n  )\n}\n"],"names":["jsx"],"mappings":";;;;AAOA,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB7C,MAAM,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBpC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrC,CAAA,UACA,MAAM,cAAc,eAAe,uCAAuC,kCAAkC;AAAA,IAC5G,KAAK;AAAA;ACvDF,MAAM,cAAoC,CAAA,UAAS;;AACxD,SACEA,kCAAAA,IAAC,oBAAA,EAAmB,KAAK,MAAM,IAAI,WAAW,MAAM,UAAU,WAAW,MAAM,WAAW,IAAG,wBAC1F,WAAA,WAAM,UAAN,mBAAa,IAAI,CAAC,QAAQ,OAAOA,kCAAAA,IAAC,QAAA,EAAO,IAAG,kBAA2B,GAAG,OAAA,GAAR,EAAgB,GAAE,CACvF;AAEJ;"}

package/build/component-CuiUpH8H.js

@@ -0,0 +1,207 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useCallback } from "react";
+import { b as ErrorMessage } from "./style-DeAgDHyI.js";
+import { S as StyledInputWrapper, j as InputPrefixChildren, h as StyledInputPattern, i as StyledInputNumeric, f as StyledInput, k as InputPostfixChildren } from "./component.styles-Du2y0R4W.js";
+const Input = (props) => {
+  const handleOnChange = useCallback(
+    (input) => {
+      var _a, _b;
+      if (props.variety === "standard") {
+        const value = typeof input === "string" ? input : input.value;
+        const cleaned = props.isNoSpaces ? value.replace(/\s+/g, "") : value;
+        (_a = props.onChange) == null ? void 0 : _a.call(props, cleaned);
+      }
+      if (props.variety === "pattern" || props.variety === "numeric") {
+        if (typeof input !== "string") {
+          (_b = props.onChange) == null ? void 0 : _b.call(props, input);
+        }
+      }
+    },
+    [props]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      StyledInputWrapper,
+      {
+        $isInputEffect: props.isInputEffect,
+        className: props.className,
+        $isDisabled: props.isDisabled,
+        $sx: props.sx,
+        $size: props.size,
+        $isWidthAsHeight: props.isWidthAsHeight,
+        children: [
+          props.prefixChildren && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            InputPrefixChildren,
+            {
+              $left: props.prefixChildren.left,
+              $right: props.prefixChildren.right,
+              $isDisabled: props.isDisabled,
+              $width: props.prefixChildren.width,
+              children: props.prefixChildren.children
+            }
+          ),
+          props.variety === "pattern" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledInputPattern,
+            {
+              $isNiceNumber: props.isNiceNumber,
+              $isInputEffect: props.isInputEffect,
+              $error: props == null ? void 0 : props.error,
+              $isLoading: props.isLoading,
+              $postfixChildren: props == null ? void 0 : props.postfixChildren,
+              $prefixChildren: props == null ? void 0 : props.prefixChildren,
+              $genre: props.genre,
+              $size: props.size,
+              $isBold: props.isBold,
+              $isDisabled: props.isDisabled,
+              $isCenter: props.isCenter,
+              disabled: props.isDisabled,
+              readOnly: props.isReadOnly,
+              required: props.isRequired,
+              defaultValue: props.defaultValue,
+              value: props.value,
+              placeholder: props.placeholder,
+              onValueChange: (props2) => handleOnChange(props2),
+              onBlur: props.onBlur,
+              onFocus: props.onFocus,
+              onPaste: props.onPaste,
+              name: props.name,
+              id: props.id,
+              onKeyDown: props.onKeyDown,
+              inputMode: props.inputMode,
+              maxLength: props.maxLength,
+              minLength: props.minLength,
+              tabIndex: props.tabIndex,
+              ...props.propsPattern
+            }
+          ) : props.variety === "numeric" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledInputNumeric,
+            {
+              $isNiceNumber: props.isNiceNumber,
+              $isInputEffect: props.isInputEffect,
+              $error: props == null ? void 0 : props.error,
+              $isLoading: props.isLoading,
+              $postfixChildren: props == null ? void 0 : props.postfixChildren,
+              $prefixChildren: props == null ? void 0 : props.prefixChildren,
+              $genre: props.genre,
+              $size: props.size,
+              $isBold: props.isBold,
+              $isDisabled: props.isDisabled,
+              $isCenter: props.isCenter,
+              disabled: props.isDisabled,
+              readOnly: props.isReadOnly,
+              required: props.isRequired,
+              defaultValue: props.defaultValue,
+              value: props.value,
+              placeholder: props.placeholder,
+              onValueChange: (props2) => handleOnChange(props2),
+              onBlur: props.onBlur,
+              onFocus: props.onFocus,
+              onPaste: props.onPaste,
+              name: props.name,
+              id: props.id,
+              onKeyDown: props.onKeyDown,
+              inputMode: props.inputMode,
+              maxLength: props.maxLength,
+              minLength: props.minLength,
+              tabIndex: props.tabIndex,
+              ...props.propsNumeric
+            }
+          ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            StyledInput,
+            {
+              $isNiceNumber: props.isNiceNumber,
+              inputMode: props.inputMode,
+              maxLength: props.maxLength,
+              minLength: props.minLength,
+              ref: props.ref,
+              $error: props.error,
+              $isInputEffect: props.isInputEffect,
+              $isLoading: props.isLoading,
+              $postfixChildren: props == null ? void 0 : props.postfixChildren,
+              $prefixChildren: props == null ? void 0 : props.prefixChildren,
+              $genre: props.genre,
+              $size: props.size,
+              $isBold: props.isBold,
+              $isDisabled: props.isDisabled,
+              $isCenter: props.isCenter,
+              disabled: props.isDisabled,
+              readOnly: props.isReadOnly,
+              required: props.isRequired,
+              defaultValue: props.defaultValue,
+              value: props.value ?? "",
+              placeholder: props.placeholder,
+              type: props.type,
+              autoComplete: props.autocomplete,
+              onInput: (event) => {
+                const input = event.target;
+                handleOnChange(input.value);
+              },
+              onBlur: props.onBlur,
+              onFocus: props.onFocus,
+              onPaste: props.onPaste,
+              name: props.name,
+              id: props.id,
+              tabIndex: props.tabIndex,
+              onKeyDown: props.onKeyDown,
+              min: props.min,
+              max: props.max,
+              step: props.step
+            }
+          ),
+          props.postfixChildren && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            InputPostfixChildren,
+            {
+              $left: props.postfixChildren.left,
+              $right: props.postfixChildren.right,
+              $isDisabled: props.isDisabled,
+              $width: props.postfixChildren.width,
+              children: props.postfixChildren.children
+            }
+          )
+        ]
+      }
+    ),
+    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
+  ] });
+};
+function formatPhoneNumber(dialCode, international) {
+  function isDigit(char) {
+    return /\d/.test(char);
+  }
+  let formattedNumber = "";
+  let placeholderNumber = "";
+  let dialCodeIndex = 0;
+  if (dialCode.length === 0) {
+    return { format: "", placeholder: "" };
+  }
+  for (let i = 0; i < international.length; i++) {
+    const char = international.charAt(i);
+    if (char === dialCode.charAt(dialCodeIndex)) {
+      formattedNumber += char;
+      placeholderNumber += isDigit(char) ? "#" : char;
+      dialCodeIndex++;
+    } else {
+      if (isDigit(char)) {
+        formattedNumber += "#";
+        placeholderNumber += "-";
+      } else {
+        formattedNumber += char;
+        placeholderNumber += char;
+      }
+    }
+  }
+  while (dialCodeIndex < dialCode.length) {
+    formattedNumber += dialCode.charAt(dialCodeIndex);
+    placeholderNumber += dialCode.charAt(dialCodeIndex);
+    dialCodeIndex++;
+  }
+  return {
+    format: formattedNumber,
+    placeholder: placeholderNumber
+  };
+}
+export {
+  Input as I,
+  formatPhoneNumber as f
+};
+//# sourceMappingURL=component-CuiUpH8H.js.map

package/build/component-CuiUpH8H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-CuiUpH8H.js","sources":["../src/components/input/component.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport { NumberFormatValues } from 'react-number-format'\n\nimport { ErrorMessage } from '@local/styles/error'\n\nimport {\n  InputPostfixChildren,\n  InputPrefixChildren,\n  InputProps,\n  StyledInput,\n  StyledInputNumeric,\n  StyledInputPattern,\n  StyledInputWrapper\n} from '.'\n\nexport const Input = (props: InputProps) => {\n  const handleOnChange = useCallback(\n    (input: string | NumberFormatValues) => {\n      if (props.variety === 'standard') {\n        const value = typeof input === 'string' ? input : input.value\n        const cleaned = props.isNoSpaces ? value.replace(/\\s+/g, '') : value\n        props.onChange?.(cleaned)\n      }\n\n      if (props.variety === 'pattern' || props.variety === 'numeric') {\n        if (typeof input !== 'string') {\n          props.onChange?.(input)\n        }\n      }\n    },\n    [props]\n  )\n\n  return (\n    <>\n      <StyledInputWrapper\n        $isInputEffect={props.isInputEffect}\n        className={props.className}\n        $isDisabled={props.isDisabled}\n        $sx={props.sx}\n        $size={props.size}\n        $isWidthAsHeight={props.isWidthAsHeight}\n      >\n        {props.prefixChildren && (\n          <InputPrefixChildren\n            $left={props.prefixChildren.left}\n            $right={props.prefixChildren.right}\n            $isDisabled={props.isDisabled}\n            $width={props.prefixChildren.width}\n          >\n            {props.prefixChildren.children}\n          </InputPrefixChildren>\n        )}\n        {props.variety === 'pattern' ? (\n          <StyledInputPattern\n            $isNiceNumber={props.isNiceNumber}\n            $isInputEffect={props.isInputEffect}\n            $error={props?.error}\n            $isLoading={props.isLoading}\n            $postfixChildren={props?.postfixChildren}\n            $prefixChildren={props?.prefixChildren}\n            $genre={props.genre}\n            $size={props.size}\n            $isBold={props.isBold}\n            $isDisabled={props.isDisabled}\n            $isCenter={props.isCenter}\n            disabled={props.isDisabled}\n            readOnly={props.isReadOnly}\n            required={props.isRequired}\n            defaultValue={props.defaultValue}\n            value={props.value}\n            placeholder={props.placeholder}\n            onValueChange={props => handleOnChange(props)}\n            onBlur={props.onBlur}\n            onFocus={props.onFocus}\n            onPaste={props.onPaste}\n            name={props.name}\n            id={props.id}\n            onKeyDown={props.onKeyDown}\n            inputMode={props.inputMode}\n            maxLength={props.maxLength}\n            minLength={props.minLength}\n            tabIndex={props.tabIndex}\n            {...props.propsPattern}\n          />\n        ) : props.variety === 'numeric' ? (\n          <StyledInputNumeric\n            $isNiceNumber={props.isNiceNumber}\n            $isInputEffect={props.isInputEffect}\n            $error={props?.error}\n            $isLoading={props.isLoading}\n            $postfixChildren={props?.postfixChildren}\n            $prefixChildren={props?.prefixChildren}\n            $genre={props.genre}\n            $size={props.size}\n            $isBold={props.isBold}\n            $isDisabled={props.isDisabled}\n            $isCenter={props.isCenter}\n            disabled={props.isDisabled}\n            readOnly={props.isReadOnly}\n            required={props.isRequired}\n            defaultValue={props.defaultValue}\n            value={props.value}\n            placeholder={props.placeholder}\n            onValueChange={props => handleOnChange(props)}\n            onBlur={props.onBlur}\n            onFocus={props.onFocus}\n            onPaste={props.onPaste}\n            name={props.name}\n            id={props.id}\n            onKeyDown={props.onKeyDown}\n            inputMode={props.inputMode}\n            maxLength={props.maxLength}\n            minLength={props.minLength}\n            tabIndex={props.tabIndex}\n            {...props.propsNumeric}\n          />\n        ) : (\n          <StyledInput\n            $isNiceNumber={props.isNiceNumber}\n            inputMode={props.inputMode}\n            maxLength={props.maxLength}\n            minLength={props.minLength}\n            ref={props.ref}\n            $error={props.error}\n            $isInputEffect={props.isInputEffect}\n            $isLoading={props.isLoading}\n            $postfixChildren={props?.postfixChildren}\n            $prefixChildren={props?.prefixChildren}\n            $genre={props.genre}\n            $size={props.size}\n            $isBold={props.isBold}\n            $isDisabled={props.isDisabled}\n            $isCenter={props.isCenter}\n            disabled={props.isDisabled}\n            readOnly={props.isReadOnly}\n            required={props.isRequired}\n            defaultValue={props.defaultValue}\n            value={props.value ?? ''}\n            placeholder={props.placeholder}\n            type={props.type}\n            autoComplete={props.autocomplete}\n            onInput={event => {\n              const input = event.target as HTMLInputElement\n              handleOnChange(input.value)\n            }}\n            onBlur={props.onBlur}\n            onFocus={props.onFocus}\n            onPaste={props.onPaste}\n            name={props.name}\n            id={props.id}\n            tabIndex={props.tabIndex}\n            onKeyDown={props.onKeyDown}\n            min={props.min}\n            max={props.max}\n            step={props.step}\n          />\n        )}\n\n        {props.postfixChildren && (\n          <InputPostfixChildren\n            $left={props.postfixChildren.left}\n            $right={props.postfixChildren.right}\n            $isDisabled={props.isDisabled}\n            $width={props.postfixChildren.width}\n          >\n            {props.postfixChildren.children}\n          </InputPostfixChildren>\n        )}\n      </StyledInputWrapper>\n      {props?.error ? <ErrorMessage {...props.error} size={props?.error.size ?? props.size} /> : null}\n    </>\n  )\n}\n\nexport function formatPhoneNumber(dialCode: string, international: string) {\n  function isDigit(char: string): boolean {\n    return /\\d/.test(char)\n  }\n\n  let formattedNumber = ''\n  let placeholderNumber = ''\n  let dialCodeIndex = 0\n\n  if (dialCode.length === 0) {\n    return { format: '', placeholder: '' }\n  }\n\n  for (let i = 0; i < international.length; i++) {\n    const char = international.charAt(i)\n\n    if (char === dialCode.charAt(dialCodeIndex)) {\n      formattedNumber += char\n      placeholderNumber += isDigit(char) ? '#' : char\n      dialCodeIndex++\n    } else {\n      if (isDigit(char)) {\n        formattedNumber += '#'\n        placeholderNumber += '-'\n      } else {\n        formattedNumber += char\n        placeholderNumber += char\n      }\n    }\n  }\n\n  while (dialCodeIndex < dialCode.length) {\n    formattedNumber += dialCode.charAt(dialCodeIndex)\n    placeholderNumber += dialCode.charAt(dialCodeIndex)\n    dialCodeIndex++\n  }\n\n  return {\n    format: formattedNumber,\n    placeholder: placeholderNumber\n  }\n}\n"],"names":["jsxs","Fragment","jsx","props"],"mappings":"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"}

package/build/component-D1NPhRuV.cjs

@@ -0,0 +1,90 @@
+"use strict";const e=require("./jsx-runtime-BcGej2Kr.cjs"),s=require("react"),i=require("styled-components"),t=require("./component.styles-BfvB83xM.cjs"),o=require("./component.styles-Dpg-__rn.cjs"),r=require("./component-xnEaYd4a.cjs"),n=require("framer-motion"),d=require("./component-C52VCES6.cjs"),l=require("./style-Dm74EPGE.cjs"),c=require("./style-fRZ6xrVp.cjs"),u=require("./theme.global-D6XU05Et.cjs"),a=i.css`
+  ${e=>i.css`
+    background: ${e.theme.colors.button[e.$genre].background.rest};
+    border-color: ${e.theme.colors.button[e.$genre].border.rest};
+    color: ${e.theme.colors.button[e.$genre].color.rest};
+    &:hover {
+      ${!e.$isHidden&&i.css`
+        background: ${e.theme.colors.button[e.$genre].background.hover};
+        border-color: ${e.theme.colors.button[e.$genre].border.hover};
+        color: ${e.theme.colors.button[e.$genre].color.hover};
+      `}
+    }
+  `};
+`,p=i.css`
+  ${e=>e.$isHidden?i.css`
+          opacity: 0.5;
+          background: ${e.theme.colors.button[e.$genre].background.rest} !important;
+          color: ${e.theme.colors.button[e.$genre].color.rest} !important;
+        `:i.css`
+          opacity: 1;
+        `}
+`,$=i.css`
+  ${e=>e.$isHiddenBorder&&i.css`
+      border: 0px transparent !important;
+    `}
+`,h=i.css`
+  ${e=>e.$isRadius&&i.css`
+      border-radius: 100px;
+    `}
+`,x=i.css`
+  ${e=>e.$isPlaystationEffect&&i.css`
+      box-shadow: ${e.theme.effects.button};
+    `}
+`,m=i.div`
+  ${e=>e.$isIconGroup?i.css`
+          display: flex;
+          gap: ${u.KEY_SIZE_DATA[e.$size].padding-2}px;
+          align-items: center;
+          order: ${e.$iconGroupOrder||"initial"};
+        `:i.css`
+          display: contents;
+        `}
+`,g=i.css`
+  ${e=>b({...u.KEY_SIZE_DATA[e.$size],isFullSize:e.$isFullSize,isWidthAsHeight:e.$isWidthAsHeight,isMinWidthAsContent:e.$isMinWidthAsContent})};
+`,b=e=>i.css`
+  height: fit-content;
+  min-height: ${e.height}px;
+  max-height: fit-content;
+  padding: 2px ${e.padding}px;
+  border-radius: ${e.radius}px;
+  gap: ${e.padding-2}px;
+  ${s=>d.getFontSizeStyles(e.font,700,s.theme.font.family)};
+  ${()=>e.isFullSize&&i.css`
+      height: 100%;
+      width: 100%;
+      border-radius: 0px;
+    `};
+  ${e.isWidthAsHeight&&i.css`
+    width: ${e.height}px;
+    min-width: ${e.height}px;
+    padding: 0px;
+  `};
+  ${e.isMinWidthAsContent&&i.css`
+    min-width: max-content;
+  `};
+`,y=i.css`
+  border: 1px solid transparent;
+`,j=i.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,z=i(n.motion.button)`
+  cursor: pointer;
+  user-select: none;
+
+  ${y};
+  ${g};
+  ${a};
+  ${p};
+  ${$};
+  ${h};
+  ${x};
+  ${j};
+  ${o.addRippleDefault};
+  ${l.addTransition};
+  ${l.addOutline};
+  ${d.addSXTypography};
+  ${c.addSX};
+`;exports.Button=o=>{const n=i.useTheme(),d=s.useMemo(()=>{var s,i;return null==(i=null==(s=o.icons??[])?void 0:s.filter(e=>!e.isHidden))?void 0:i.map((s,i)=>"id"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"id",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"logo"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"logo",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"checkbox"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"checkbox",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"loading"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"loading",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):"realebail"===(null==s?void 0:s.type)?e.jsxRuntimeExports.jsx(t.Icon,{name:null==s?void 0:s.name,type:"realebail",size:(null==s?void 0:s.size)??o.size,turn:s.turn,order:s.order},i):null)},[o.icons,o.size]);return e.jsxRuntimeExports.jsxs(z,{whileTap:o.isWhileTapEffect?{scale:.9,transition:{duration:.02}}:{},id:o.id,tabIndex:0,$isFullSize:o.isFullSize,$genre:o.genre,$size:o.size,$isDisabled:o.isDisabled,$isMinWidthAsContent:o.isMinWidthAsContent,$isWidthAsHeight:o.isWidthAsHeight,$isRadius:o.isRadius,$isHidden:o.isHidden,$isPlaystationEffect:o.isPlaystationEffect,$sxTypography:o.sxTypography,$isHiddenBorder:o.isHiddenBorder||o.isPlaystationEffect,disabled:o.isDisabled,type:o.type??"button",className:o.className,onClick:e=>{!o.isDisabled&&o.onClick&&o.onClick(e)},ref:o.ref,$sx:o.sx,children:[e.jsxRuntimeExports.jsx(r.Ripple,{color:n.colors.checkbox[o.genre].color.rest,isDisabled:o.isDisabled??o.isDisabledRipple,isHidden:o.isHidden}),e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[!o.isOnlyIcon&&e.jsxRuntimeExports.jsx("div",{style:{order:0,display:"contents"},children:o.children&&o.children}),e.jsxRuntimeExports.jsx(m,{$size:o.size,$isIconGroup:o.isIconGroup,$iconGroupOrder:"iconGroupOrder"in o?o.iconGroupOrder:void 0,children:d})]})]})},exports.ButtonSize=g,exports.ButtonSizeConstructor=b,exports.StyledButton=z,exports.StyledButtonIconsWrapper=m;
+//# sourceMappingURL=component-D1NPhRuV.cjs.map

package/build/component-D1NPhRuV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-D1NPhRuV.cjs","sources":["../src/components/button/component.styles.ts","../src/components/button/component.tsx"],"sourcesContent":["import { motion } from 'framer-motion'\nimport styled, { css } from 'styled-components'\n\nimport { addRippleDefault } from '@local/components/ripple'\nimport { addSXTypography, getFontSizeStyles } from '@local/components/typography'\nimport { addOutline, addTransition } from '@local/styles/add'\nimport { addSX } from '@local/styles/sx'\nimport { IThemeSizePropertyDefault, KEY_SIZE_DATA } from '@local/theme'\n\nimport { StyledDollarButtonIconsWrapperProps, StyledDollarButtonProps } from '.'\n\n/****************************************** Genre *************************************************/\nconst ButtonGenre = css<StyledDollarButtonProps>`\n  ${props => css`\n    background: ${props.theme.colors.button[props.$genre].background.rest};\n    border-color: ${props.theme.colors.button[props.$genre].border.rest};\n    color: ${props.theme.colors.button[props.$genre].color.rest};\n    &:hover {\n      ${!props.$isHidden &&\n      css`\n        background: ${props.theme.colors.button[props.$genre].background.hover};\n        border-color: ${props.theme.colors.button[props.$genre].border.hover};\n        color: ${props.theme.colors.button[props.$genre].color.hover};\n      `}\n    }\n  `};\n`\n\n/****************************************** Disabled *************************************************/\nconst ButtonDisabled = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isHidden\n      ? css`\n          opacity: 0.5;\n          background: ${props.theme.colors.button[props.$genre].background.rest} !important;\n          color: ${props.theme.colors.button[props.$genre].color.rest} !important;\n        `\n      : css`\n          opacity: 1;\n        `}\n`\n/****************************************** is HiddenBorder *************************************************/\nconst ButtonIsHiddenBorder = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isHiddenBorder &&\n    css`\n      border: 0px transparent !important;\n    `}\n`\n/****************************************** is Radius *************************************************/\nconst ButtonIsRadius = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isRadius &&\n    css`\n      border-radius: 100px;\n    `}\n`\n/****************************************** is PlaystationEffect *************************************************/\nconst ButtonIsPlaystationEffect = css<StyledDollarButtonProps>`\n  ${props =>\n    props.$isPlaystationEffect &&\n    css`\n      box-shadow: ${props.theme.effects.button};\n    `}\n`\n/****************************************** Icons Wrapper *************************************************/\nexport const StyledButtonIconsWrapper = styled.div<StyledDollarButtonIconsWrapperProps>`\n  ${props =>\n    props.$isIconGroup\n      ? css`\n          display: flex;\n          gap: ${KEY_SIZE_DATA[props.$size].padding - 2}px;\n          align-items: center;\n          order: ${props.$iconGroupOrder || 'initial'};\n        `\n      : css`\n          display: contents;\n        `}\n`\n\n/****************************************** Size *************************************************/\nexport const ButtonSize = css<StyledDollarButtonProps>`\n  ${props =>\n    ButtonSizeConstructor({\n      ...KEY_SIZE_DATA[props.$size],\n      isFullSize: props.$isFullSize,\n      isWidthAsHeight: props.$isWidthAsHeight,\n      isMinWidthAsContent: props.$isMinWidthAsContent\n    })};\n`\nexport const ButtonSizeConstructor = (\n  props: IThemeSizePropertyDefault & {\n    isFullSize?: boolean\n    isWidthAsHeight?: boolean\n    isMinWidthAsContent?: boolean\n  }\n) => css`\n  height: fit-content;\n  min-height: ${props.height}px;\n  max-height: fit-content;\n  padding: 2px ${props.padding}px;\n  border-radius: ${props.radius}px;\n  gap: ${props.padding - 2}px;\n  ${params => getFontSizeStyles(props.font, 700, params.theme.font.family)};\n  ${() =>\n    props.isFullSize &&\n    css`\n      height: 100%;\n      width: 100%;\n      border-radius: 0px;\n    `};\n  ${props.isWidthAsHeight &&\n  css`\n    width: ${props.height}px;\n    min-width: ${props.height}px;\n    padding: 0px;\n  `};\n  ${props.isMinWidthAsContent &&\n  css`\n    min-width: max-content;\n  `};\n`\n/****************************************** Border *************************************************/\nconst ButtonBorder = css`\n  border: 1px solid transparent;\n`\n\n/****************************************** Flex *************************************************/\nconst ButtonFlex = css<StyledDollarButtonProps>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n/****************************************** Styled *************************************************/\nexport const StyledButton = styled(motion.button)<StyledDollarButtonProps>`\n  cursor: pointer;\n  user-select: none;\n\n  ${ButtonBorder};\n  ${ButtonSize};\n  ${ButtonGenre};\n  ${ButtonDisabled};\n  ${ButtonIsHiddenBorder};\n  ${ButtonIsRadius};\n  ${ButtonIsPlaystationEffect};\n  ${ButtonFlex};\n  ${addRippleDefault};\n  ${addTransition};\n  ${addOutline};\n  ${addSXTypography};\n  ${addSX};\n`\n","import { FC, Ref, useMemo } from 'react'\nimport { useTheme } from 'styled-components'\n\nimport {\n  Icon,\n  TIconCheckboxNameString,\n  TIconIdNameString,\n  TIconLoadingNameString,\n  TIconLogoNameString,\n  TIconRealEbailNameString\n} from '@local/components/icon'\nimport { Ripple } from '@local/components/ripple'\n\nimport { ButtonProps, StyledButton, StyledButtonIconsWrapper } from '.'\n\nexport const Button: FC<ButtonProps> = props => {\n  const theme = useTheme()\n\n  const iconComponents = useMemo(\n    () =>\n      (props.icons ?? [])\n        ?.filter(icon => !icon.isHidden)\n        ?.map((icon, index) =>\n          icon?.type === 'id' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconIdNameString}\n              type=\"id\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'logo' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconLogoNameString}\n              type=\"logo\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'checkbox' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconCheckboxNameString}\n              type=\"checkbox\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'loading' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconLoadingNameString}\n              type=\"loading\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : icon?.type === 'realebail' ? (\n            <Icon\n              key={index}\n              name={icon?.name as TIconRealEbailNameString}\n              type=\"realebail\"\n              size={icon?.size ?? props.size}\n              turn={icon.turn}\n              order={icon.order}\n            />\n          ) : null\n        ),\n    [props.icons, props.size]\n  )\n\n  const handleClick: ButtonProps['onClick'] = event => {\n    if (!props.isDisabled && props.onClick) {\n      props.onClick(event)\n    }\n  }\n\n  return (\n    <StyledButton\n      whileTap={props.isWhileTapEffect ? { scale: 0.9, transition: { duration: 0.02 } } : {}}\n      id={props.id}\n      tabIndex={0}\n      $isFullSize={props.isFullSize}\n      $genre={props.genre}\n      $size={props.size}\n      $isDisabled={props.isDisabled}\n      $isMinWidthAsContent={props.isMinWidthAsContent}\n      $isWidthAsHeight={props.isWidthAsHeight}\n      $isRadius={props.isRadius}\n      $isHidden={props.isHidden}\n      $isPlaystationEffect={props.isPlaystationEffect}\n      $sxTypography={props.sxTypography}\n      $isHiddenBorder={props.isHiddenBorder || props.isPlaystationEffect}\n      disabled={props.isDisabled}\n      type={props.type ?? 'button'}\n      className={props.className}\n      onClick={handleClick}\n      ref={props.ref as Ref<HTMLButtonElement>}\n      $sx={props.sx}\n    >\n      <Ripple\n        color={theme.colors.checkbox[props.genre].color.rest}\n        isDisabled={props.isDisabled ?? props.isDisabledRipple}\n        isHidden={props.isHidden}\n      />\n      <>\n        {!props.isOnlyIcon && <div style={{ order: 0, display: 'contents' }}>{props.children && props.children}</div>}\n        <StyledButtonIconsWrapper\n          $size={props.size}\n          $isIconGroup={props.isIconGroup}\n          $iconGroupOrder={'iconGroupOrder' in props ? props.iconGroupOrder : undefined}\n        >\n          {iconComponents}\n        </StyledButtonIconsWrapper>\n      </>\n    </StyledButton>\n  )\n}\n"],"names":["ButtonGenre","css","props","theme","colors","button","$genre","background","rest","border","color","$isHidden","hover","ButtonDisabled","ButtonIsHiddenBorder","$isHiddenBorder","ButtonIsRadius","$isRadius","ButtonIsPlaystationEffect","$isPlaystationEffect","effects","StyledButtonIconsWrapper","styled","div","$isIconGroup","KEY_SIZE_DATA","$size","padding","$iconGroupOrder","ButtonSize","ButtonSizeConstructor","isFullSize","$isFullSize","isWidthAsHeight","$isWidthAsHeight","isMinWidthAsContent","$isMinWidthAsContent","height","radius","params","getFontSizeStyles","font","family","ButtonBorder","ButtonFlex","StyledButton","motion","addRippleDefault","addTransition","addOutline","addSXTypography","addSX","useTheme","iconComponents","useMemo","_b","_a","icons","filter","icon","isHidden","map","index","type","jsx","Icon","name","size","turn","order","jsxs","whileTap","isWhileTapEffect","scale","transition","duration","id","tabIndex","genre","$isDisabled","isDisabled","isRadius","isPlaystationEffect","$sxTypography","sxTypography","isHiddenBorder","disabled","className","onClick","event","ref","$sx","sx","children","Ripple","checkbox","isDisabledRipple","Fragment","isOnlyIcon","style","display","isIconGroup","iconGroupOrder"],"mappings":"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"}