@clubmed/trident-ui 2.0.0-beta.53 → 2.0.0-beta.55

package/ui/forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    hasDropdown = false,\n    clear = '',\n    iconFirst = true,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          style={\n            {\n              '--nbIconsStart': Number(!!icon && iconFirst),\n              '--nbIconsEnd':\n                Number(!!icon && !iconFirst) +\n                Number(shouldDisplayClearButton || hasDropdown) +\n                Number(internalStatus === 'error' || internalStatus === 'success'),\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || shouldDisplayClearButton) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto flex\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossOutlined\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OAAO,KAA4B,EAAY,GAC/C,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,2KACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAe,OACd,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAgB,WAAU;QAAa,OAAM;QAAS,CAAA;OAC1D,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../lib/ui/forms/TextField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { useId } from 'react';\n\nexport interface TextFieldProps<Value> extends FormControlProps<Value> {\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const TextField = <Value = string,>(props: TextFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'TextField',\n    hasDropdown = false,\n    clear = '',\n    iconFirst = true,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      className={className}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          style={\n            {\n              '--nbIconsStart': Number(!!icon && iconFirst),\n              '--nbIconsEnd':\n                Number(!!icon && !iconFirst) +\n                Number(\n                  (hasDropdown && !shouldDisplayClearButton) ||\n                    (shouldDisplayClearButton && internalStatus !== 'error'),\n                ) +\n                Number(internalStatus === 'error' || internalStatus === 'success'),\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          {icon && iconFirst && <Icon name={icon} width=\"24px\" />}\n\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n                </button>\n              ) : (\n                <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n              ))}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || (shouldDisplayClearButton && internalStatus !== 'error')) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto cursor-pointer flex\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAa,KAA8B,MAAiC;CAC1E,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,SACA,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,aACb,iBAAc,IACd,WAAQ,IACR,eAAY,IACZ,aACA,cACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU;EAAW,CAAC,EAC5E,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EAEI,IACJ,CAAC,KAAY,MAAU,MAAM,KAAU,QAA+B,CAAC,CAAC;AAE1E,QACE,kBAAC,GAAD;EACM;EACG;EACI;EACE;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM,EAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;IACjE,OACE;KACE,kBAAkB,OAAO,CAAC,CAAC,KAAQ,EAAU;KAC7C,gBACE,OAAO,CAAC,CAAC,KAAQ,CAAC,EAAU,GAC5B,OACG,KAAe,CAAC,KACd,KAA4B,MAAmB,QACnD,GACD,OAAO,MAAmB,WAAW,MAAmB,UAAU;KACrE;IAEH,WAAW,EACT,2KACA;KACE,4DACE,MAAmB;KACrB,uBAAuB,MAAmB;KAC1C,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IACZ,CAAA,EAEF,kBAAC,OAAD;IACE,WAAW,EACT,sFACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cARH,CAUG,KAAQ,KAAa,kBAAC,GAAD;KAAM,MAAM;KAAM,OAAM;KAAS,CAAA,EAEvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,YACjB,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,OAAM;QAAO,MAAM;QAAY,CAAA;OAClD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG5D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;OAEzD,KAAgB,KAA4B,MAAmB,aAC9D,IACC,kBAAC,UAAD;OACE,WAAU;OACV,UAAU,MAAM,EAAS,IAAa,EAAE,YAAY;OACpD,cAAY;OACZ,MAAK;iBAEL,kBAAC,GAAD;QAAM,MAAK;QAAe,WAAU;QAAa,OAAM;QAAS,CAAA;OACzD,CAAA,GAET,kBAAC,GAAD;OAAM,MAAK;OAAmB,WAAU;OAAa,OAAM;OAAS,CAAA;MAEvE,CAAC,KAAa,KAAQ,kBAAC,GAAD;OAAM,MAAM;OAAM,OAAM;OAAS,CAAA;MACnD;OACH;MACF;;EACM,CAAA"}

package/ui/hooks/useIsClient.d.ts

@@ -0,0 +1 @@
+export declare const useIsClient: () => boolean;

package/ui/hooks/useIsClient.js

@@ -0,0 +1,12 @@
+import { useEffect as e, useState as t } from "react";
+//#region lib/ui/hooks/useIsClient.ts
+var n = () => {
+	let [n, r] = t(!1);
+	return e(() => {
+		r(!0);
+	}, []), n;
+};
+//#endregion
+export { n as useIsClient };
+
+//# sourceMappingURL=useIsClient.js.map

package/ui/hooks/useIsClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsClient.js","names":[],"sources":["../../../lib/ui/hooks/useIsClient.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nexport const useIsClient = () => {\n  const [isClient, setIsClient] = useState(false);\n\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  return isClient;\n};\n"],"mappings":";;AAEA,IAAa,UAAoB;CAC/B,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM;AAM/C,QAJA,QAAgB;AACd,IAAY,GAAK;IAChB,EAAE,CAAC,EAEC"}