@twreporter/react-typescript-components 0.1.0-beta.17 → 0.1.0-beta.18

package/lib/constants-CxHP9dkH.d.mts

@@ -1,22 +0,0 @@
-import { ValuesOf } from "./index-DaRD2S-9.mjs";
-
-//#region src/input/constants.d.ts
-declare const WIDTH_TYPE: {
-  readonly fit: "fit";
-  readonly stretch: "stretch";
-};
-type WidthType = ValuesOf<typeof WIDTH_TYPE>;
-declare const TEXT_ALIGN: {
-  readonly left: "left";
-  readonly center: "center";
-};
-type TextAlign = ValuesOf<typeof TEXT_ALIGN>;
-declare const TEXT_STATE: {
-  readonly default: "default";
-  readonly error: "error";
-  readonly disabled: "disabled";
-};
-type TextState = ValuesOf<typeof TEXT_STATE>;
-//#endregion
-export { TEXT_ALIGN, TEXT_STATE, TextAlign, TextState, WIDTH_TYPE, WidthType };
-//# sourceMappingURL=constants-CxHP9dkH.d.mts.map

package/lib/constants-Dfgyc0ND.mjs

@@ -1,18 +0,0 @@
-//#region src/input/constants.ts
-const WIDTH_TYPE = {
-	fit: "fit",
-	stretch: "stretch"
-};
-const TEXT_ALIGN = {
-	left: "left",
-	center: "center"
-};
-const TEXT_STATE = {
-	default: "default",
-	error: "error",
-	disabled: "disabled"
-};
-
-//#endregion
-export { TEXT_ALIGN, TEXT_STATE, WIDTH_TYPE };
-//# sourceMappingURL=constants-Dfgyc0ND.mjs.map

package/lib/constants-Dfgyc0ND.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants-Dfgyc0ND.mjs","names":[],"sources":["../src/input/constants.ts"],"sourcesContent":["import type { ValuesOf } from '../types'\n\n// for search-bar\nexport const WIDTH_TYPE = {\n  fit: 'fit',\n  stretch: 'stretch',\n} as const\nexport type WidthType = ValuesOf<typeof WIDTH_TYPE>\n\n// for text-field\nexport const TEXT_ALIGN = {\n  left: 'left',\n  center: 'center',\n} as const\nexport type TextAlign = ValuesOf<typeof TEXT_ALIGN>\n\nexport const TEXT_STATE = {\n  default: 'default',\n  error: 'error',\n  disabled: 'disabled',\n} as const\nexport type TextState = ValuesOf<typeof TEXT_STATE>\n"],"mappings":";AAGA,MAAa,aAAa;CACxB,KAAK;CACL,SAAS;CACV;AAID,MAAa,aAAa;CACxB,MAAM;CACN,QAAQ;CACT;AAGD,MAAa,aAAa;CACxB,SAAS;CACT,OAAO;CACP,UAAU;CACX"}

package/lib/input-_Hl5B4_K.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-_Hl5B4_K.mjs","names":["SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n  WidthType: typeof WIDTH_TYPE\n}","IconButton"],"sources":["../src/input/components/search-bar.tsx","../src/input/index.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { FC, FormEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../constants/release-branch'\nimport { WIDTH_TYPE, type WidthType } from '../constants'\n// theme\nimport { selectThemeStyle } from '../theme'\n// icons\nimport { Cross, Search } from '../../icons'\n// button\nimport { IconButton } from '../../button'\n\nconst defaultFunc = () => {}\ntype SearchBarProps = {\n  placeholder?: string\n  theme?: Theme\n  releaseBranch?: ReleaseBranch\n  onSearch?: (keywords: string) => void\n  onClose?: () => void\n  handleBlur?: () => void\n  autoFocus?: boolean\n  widthType?: WidthType\n  className?: string\n}\nconst SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n  WidthType: typeof WIDTH_TYPE\n} = ({\n  placeholder = '',\n  theme = THEME.normal,\n  releaseBranch = RELEASE_BRANCH.master,\n  onSearch = defaultFunc,\n  onClose = defaultFunc,\n  handleBlur = defaultFunc,\n  autoFocus = true,\n  widthType = WIDTH_TYPE.fit,\n  className = '',\n}) => {\n  const [keywords, setKeywords] = useState('')\n  const [focus, setFocus] = useState(false)\n  const {\n    bgColor,\n    focusBgColor,\n    desktopBgColor,\n    borderColor,\n    color,\n    focusColor,\n    placeholderColor,\n  } = selectThemeStyle(theme)\n  const onFocus = () => setFocus(true)\n  const onBlur = () => {\n    setFocus(false)\n    handleBlur()\n  }\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    onSearch(keywords)\n  }\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget.value\n    setKeywords(input)\n  }\n  const onReset = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    setKeywords('')\n  }\n\n  return (\n    <form\n      className={clsx(\n        'flex items-center',\n        widthType === WIDTH_TYPE.stretch ? 'w-full' : 'w-fit',\n        className\n      )}\n      noValidate\n      onSubmit={onSubmit}\n      onReset={onReset}\n      onFocus={onFocus}\n    >\n      <div\n        className={clsx(\n          'flex items-center py-[8px] px-[16px] rounded-[40px] border-[1px] border-solid gap-[8px]',\n          bgColor,\n          widthType === WIDTH_TYPE.stretch ? 'w-full' : 'w-fit',\n          focus\n            ? clsx(focusBgColor, borderColor, desktopBgColor)\n            : 'border-transparent'\n        )}\n      >\n        <input\n          type=\"search\"\n          placeholder={placeholder}\n          value={keywords}\n          onChange={onChange}\n          onBlur={onBlur}\n          // biome-ignore lint/a11y/noAutofocus: autoFocus is intentionally used to focus the search input for better UX\n          autoFocus={autoFocus}\n          className={clsx(\n            'h-[24px] text-[14px] focus-visible:border-0',\n            'focus-visible:outline-0 focus-visible:border-transparent [&::-webkit-search-cancel-button]:hidden',\n            widthType === WIDTH_TYPE.stretch ? 'w-full' : 'w-fit',\n            color,\n            placeholderColor,\n            focusColor\n          )}\n        />\n        <IconButton\n          theme={theme}\n          iconComponent={Search(releaseBranch)}\n          onClick={() => onSearch(keywords)}\n        />\n      </div>\n      <IconButton\n        theme={theme}\n        iconComponent={Cross(releaseBranch)}\n        onClick={onClose}\n        className={clsx('ml-[8px] hidden', 'desktop:inline-flex')}\n      />\n    </form>\n  )\n}\nSearchBar.Theme = THEME\nSearchBar.WidthType = WIDTH_TYPE\n\nexport default SearchBar\n","import SearchBar from './components/search-bar'\n\nexport { SearchBar }\n\nexport default {\n  SearchBar,\n}\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,oBAAoB;AAY1B,MAAMA,aAGD,EACH,cAAc,IACd,QAAQ,MAAM,QACd,gBAAgB,eAAe,QAC/B,WAAW,aACX,UAAU,aACV,aAAa,aACb,YAAY,MACZ,YAAY,WAAW,KACvB,YAAY,SACR;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,GAAG;CAC5C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,EACJ,SACA,cACA,gBACA,aACA,OACA,YACA,qBACE,iBAAiB,MAAM;CAC3B,MAAM,gBAAgB,SAAS,KAAK;CACpC,MAAM,eAAe;AACnB,WAAS,MAAM;AACf,cAAY;;CAEd,MAAM,YAAY,MAAkC;AAClD,IAAE,gBAAgB;AAClB,WAAS,SAAS;;CAEpB,MAAM,YAAY,MAAqC;EACrD,MAAM,QAAQ,EAAE,cAAc;AAC9B,cAAY,MAAM;;CAEpB,MAAM,WAAW,MAAkC;AACjD,IAAE,gBAAgB;AAClB,cAAY,GAAG;;AAGjB,QACE,qBAAC;EACC,WAAW,KACT,qBACA,cAAc,WAAW,UAAU,WAAW,SAC9C,UACD;EACD;EACU;EACD;EACA;aAET,qBAAC;GACC,WAAW,KACT,2FACA,SACA,cAAc,WAAW,UAAU,WAAW,SAC9C,QACI,KAAK,cAAc,aAAa,eAAe,GAC/C,qBACL;cAED,oBAAC;IACC,MAAK;IACQ;IACb,OAAO;IACG;IACF;IAEG;IACX,WAAW,KACT,+CACA,qGACA,cAAc,WAAW,UAAU,WAAW,SAC9C,OACA,kBACA,WACD;KACD,EACF,oBAACC;IACQ;IACP,eAAe,OAAO,cAAc;IACpC,eAAe,SAAS,SAAS;KACjC;IACE,EACN,oBAACA;GACQ;GACP,eAAe,MAAM,cAAc;GACnC,SAAS;GACT,WAAW,KAAK,mBAAmB,sBAAsB;IACzD;GACG;;AAGX,UAAU,QAAQ;AAClB,UAAU,YAAY;AAEtB,yBAAe;;;;AC7Hf,oBAAe,EACb,+BACD"}

package/lib/input-czWOItrW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-czWOItrW.js","names":["SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n  WidthType: typeof WIDTH_TYPE\n}","THEME","RELEASE_BRANCH","WIDTH_TYPE","selectThemeStyle","IconButton","Search","Cross"],"sources":["../src/input/components/search-bar.tsx","../src/input/index.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { FC, FormEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n// constants\nimport { THEME, type Theme } from '../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../constants/release-branch'\nimport { WIDTH_TYPE, type WidthType } from '../constants'\n// theme\nimport { selectThemeStyle } from '../theme'\n// icons\nimport { Cross, Search } from '../../icons'\n// button\nimport { IconButton } from '../../button'\n\nconst defaultFunc = () => {}\ntype SearchBarProps = {\n  placeholder?: string\n  theme?: Theme\n  releaseBranch?: ReleaseBranch\n  onSearch?: (keywords: string) => void\n  onClose?: () => void\n  handleBlur?: () => void\n  autoFocus?: boolean\n  widthType?: WidthType\n  className?: string\n}\nconst SearchBar: FC<SearchBarProps> & {\n  Theme: typeof THEME\n  WidthType: typeof WIDTH_TYPE\n} = ({\n  placeholder = '',\n  theme = THEME.normal,\n  releaseBranch = RELEASE_BRANCH.master,\n  onSearch = defaultFunc,\n  onClose = defaultFunc,\n  handleBlur = defaultFunc,\n  autoFocus = true,\n  widthType = WIDTH_TYPE.fit,\n  className = '',\n}) => {\n  const [keywords, setKeywords] = useState('')\n  const [focus, setFocus] = useState(false)\n  const {\n    bgColor,\n    focusBgColor,\n    desktopBgColor,\n    borderColor,\n    color,\n    focusColor,\n    placeholderColor,\n  } = selectThemeStyle(theme)\n  const onFocus = () => setFocus(true)\n  const onBlur = () => {\n    setFocus(false)\n    handleBlur()\n  }\n  const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    onSearch(keywords)\n  }\n  const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget.value\n    setKeywords(input)\n  }\n  const onReset = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    setKeywords('')\n  }\n\n  return (\n    <form\n      className={clsx(\n        'flex items-center',\n        widthType === WIDTH_TYPE.stretch ? 'w-full' : 'w-fit',\n        className\n      )}\n      noValidate\n      onSubmit={onSubmit}\n      onReset={onReset}\n      onFocus={onFocus}\n    >\n      <div\n        className={clsx(\n          'flex items-center py-[8px] px-[16px] rounded-[40px] border-[1px] border-solid gap-[8px]',\n          bgColor,\n          widthType === WIDTH_TYPE.stretch ? 'w-full' : 'w-fit',\n          focus\n            ? clsx(focusBgColor, borderColor, desktopBgColor)\n            : 'border-transparent'\n        )}\n      >\n        <input\n          type=\"search\"\n          placeholder={placeholder}\n          value={keywords}\n          onChange={onChange}\n          onBlur={onBlur}\n          // biome-ignore lint/a11y/noAutofocus: autoFocus is intentionally used to focus the search input for better UX\n          autoFocus={autoFocus}\n          className={clsx(\n            'h-[24px] text-[14px] focus-visible:border-0',\n            'focus-visible:outline-0 focus-visible:border-transparent [&::-webkit-search-cancel-button]:hidden',\n            widthType === WIDTH_TYPE.stretch ? 'w-full' : 'w-fit',\n            color,\n            placeholderColor,\n            focusColor\n          )}\n        />\n        <IconButton\n          theme={theme}\n          iconComponent={Search(releaseBranch)}\n          onClick={() => onSearch(keywords)}\n        />\n      </div>\n      <IconButton\n        theme={theme}\n        iconComponent={Cross(releaseBranch)}\n        onClick={onClose}\n        className={clsx('ml-[8px] hidden', 'desktop:inline-flex')}\n      />\n    </form>\n  )\n}\nSearchBar.Theme = THEME\nSearchBar.WidthType = WIDTH_TYPE\n\nexport default SearchBar\n","import SearchBar from './components/search-bar'\n\nexport { SearchBar }\n\nexport default {\n  SearchBar,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,oBAAoB;AAY1B,MAAMA,aAGD,EACH,cAAc,IACd,QAAQC,oBAAM,QACd,gBAAgBC,sCAAe,QAC/B,WAAW,aACX,UAAU,aACV,aAAa,aACb,YAAY,MACZ,YAAYC,6BAAW,KACvB,YAAY,SACR;CACJ,MAAM,CAAC,UAAU,mCAAwB,GAAG;CAC5C,MAAM,CAAC,OAAO,gCAAqB,MAAM;CACzC,MAAM,EACJ,SACA,cACA,gBACA,aACA,OACA,YACA,qBACEC,iCAAiB,MAAM;CAC3B,MAAM,gBAAgB,SAAS,KAAK;CACpC,MAAM,eAAe;AACnB,WAAS,MAAM;AACf,cAAY;;CAEd,MAAM,YAAY,MAAkC;AAClD,IAAE,gBAAgB;AAClB,WAAS,SAAS;;CAEpB,MAAM,YAAY,MAAqC;EACrD,MAAM,QAAQ,EAAE,cAAc;AAC9B,cAAY,MAAM;;CAEpB,MAAM,WAAW,MAAkC;AACjD,IAAE,gBAAgB;AAClB,cAAY,GAAG;;AAGjB,QACE,4CAAC;EACC,6BACE,qBACA,cAAcD,6BAAW,UAAU,WAAW,SAC9C,UACD;EACD;EACU;EACD;EACA;aAET,4CAAC;GACC,6BACE,2FACA,SACA,cAAcA,6BAAW,UAAU,WAAW,SAC9C,0BACS,cAAc,aAAa,eAAe,GAC/C,qBACL;cAED,2CAAC;IACC,MAAK;IACQ;IACb,OAAO;IACG;IACF;IAEG;IACX,6BACE,+CACA,qGACA,cAAcA,6BAAW,UAAU,WAAW,SAC9C,OACA,kBACA,WACD;KACD,EACF,2CAACE;IACQ;IACP,eAAeC,qBAAO,cAAc;IACpC,eAAe,SAAS,SAAS;KACjC;IACE,EACN,2CAACD;GACQ;GACP,eAAeE,oBAAM,cAAc;GACnC,SAAS;GACT,6BAAgB,mBAAmB,sBAAsB;IACzD;GACG;;AAGX,UAAU,QAAQN;AAClB,UAAU,YAAYE;AAEtB,yBAAe;;;;AC7Hf,oBAAe,EACb,+BACD"}

package/lib/use-outside-click-DToGSYRk.d.mts

@@ -1,7 +0,0 @@
-import * as react9 from "react";
-
-//#region src/hooks/use-outside-click.d.ts
-declare const useOutsideClick: (callback: () => void) => react9.RefObject<HTMLDivElement | null>;
-//#endregion
-export { useOutsideClick };
-//# sourceMappingURL=use-outside-click-DToGSYRk.d.mts.map