softable-pixels-web 1.1.17 → 1.1.18

package/dist/TextArea-DY7hxFbx.js

@@ -1,113 +0,0 @@
-import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
-import { t as Icon } from "./Icon-KzwFJI_k.js";
-import { t as Typography } from "./Typography-BkFV7BhK.js";
-import { t as Label } from "./Label-C5AIUqYV.js";
-import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/commons/inputs/TextArea/styles.ts
-function createTextAreaStyles(props) {
-	const { height = "8rem", readOnly, startIcon } = props;
-	const focusRingColor = props.focusedRingColor || "var(--px-color-info)";
-	const placeHolderColor = props.placeholderColor || "var(--px-text-placeholder)";
-	return styled({
-		iconContainer: {
-			position: "absolute",
-			left: "0.75rem",
-			top: "1.375rem",
-			transform: "translateY(-50%)"
-		},
-		textArea: {
-			height,
-			width: "100%",
-			paddingBlock: "0.75rem",
-			paddingInline: "0.875rem",
-			borderRadius: "0.5rem",
-			resize: "none",
-			fontWeight: "400",
-			fontSize: "1rem",
-			color: "var(--px-text-primary)",
-			border: "1px solid red",
-			outlineOffset: "-1px",
-			cursor: readOnly ? "default" : void 0,
-			paddingLeft: startIcon ? "2.5rem" : void 0,
-			__rules: {
-				"&::placeholder": { color: `${placeHolderColor}` },
-				"&:focus": readOnly ? { outline: "none" } : { outline: `2px solid ${focusRingColor}` }
-			}
-		}
-	});
-}
-
-//#endregion
-//#region src/components/commons/inputs/TextArea/index.tsx
-const TextArea = (props) => {
-	const { value, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, label, required, requiredColor, labelColor, labelVariant, startIcon, iconColor } = props;
-	const inputId = useId();
-	const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {
-		pick: (p) => [
-			p.height,
-			p.readOnly,
-			p.startIcon,
-			p.placeholderColor,
-			p.focusedRingColor
-		],
-		override: props.styles,
-		applyCommonProps: true
-	});
-	function handleChange(e) {
-		if (disabled || readOnly) return;
-		props.onChange?.(e.target.value);
-	}
-	function renderLabel() {
-		if (!label) return null;
-		return /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-3",
-			children: /* @__PURE__ */ jsx(Label, {
-				label,
-				htmlFor: inputId,
-				color: labelColor,
-				required,
-				variant: labelVariant,
-				requiredColor
-			})
-		});
-	}
-	return /* @__PURE__ */ jsxs("div", { children: [
-		renderLabel(),
-		/* @__PURE__ */ jsxs("div", {
-			style: { position: "relative" },
-			children: [startIcon && /* @__PURE__ */ jsx("div", {
-				style: styles.iconContainer,
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: startIcon,
-					color: iconColor ? iconColor : "var(--px-text-primary)"
-				})
-			}), /* @__PURE__ */ jsx("textarea", {
-				value,
-				disabled,
-				readOnly,
-				maxLength,
-				placeholder,
-				style: styles.textArea,
-				className: classes.textArea,
-				onChange: handleChange
-			})]
-		}),
-		maxLength && !hideMaxLength ? /* @__PURE__ */ jsxs(Typography, {
-			variant: "b2",
-			styles: { text: { marginLeft: "auto" } },
-			children: [
-				value.length,
-				"/",
-				maxLength,
-				" ",
-				textMaxLength
-			]
-		}) : null
-	] });
-};
-
-//#endregion
-export { TextArea as t };
-//# sourceMappingURL=TextArea-DY7hxFbx.js.map

package/dist/TextArea-DY7hxFbx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea-DY7hxFbx.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly, startIcon } = props\n\n  const focusRingColor = props.focusedRingColor || 'var(--px-color-info)'\n  const placeHolderColor =\n    props.placeholderColor || 'var(--px-text-placeholder)'\n\n  return styled({\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      border: '1px solid red',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n      paddingLeft: startIcon ? '2.5rem' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          color: `${placeHolderColor}`\n        },\n        '&:focus': readOnly\n          ? { outline: 'none' }\n          : { outline: `2px solid ${focusRingColor}` }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n\n    label,\n    required,\n    requiredColor,\n    labelColor,\n    labelVariant,\n\n    startIcon,\n    iconColor\n  } = props\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [\n      p.height,\n      p.readOnly,\n      p.startIcon,\n      p.placeholderColor,\n      p.focusedRingColor\n    ],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n    props.onChange?.(e.target.value)\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <Label\n          label={label}\n          htmlFor={inputId}\n          color={labelColor}\n          required={required}\n          variant={labelVariant}\n          requiredColor={requiredColor}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div>\n      {renderLabel()}\n\n      <div style={{ position: 'relative' }}>\n        {startIcon && (\n          <div style={styles.iconContainer}>\n            <Icon\n              name={startIcon}\n              color={iconColor ? iconColor : 'var(--px-text-primary)'}\n            />\n          </div>\n        )}\n\n        <textarea\n          value={value}\n          disabled={disabled}\n          readOnly={readOnly}\n          maxLength={maxLength}\n          placeholder={placeholder}\n          style={styles.textArea}\n          className={classes.textArea}\n          onChange={handleChange}\n        />\n      </div>\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,UAAU,cAAc;CAEjD,MAAM,iBAAiB,MAAM,oBAAoB;CACjD,MAAM,mBACJ,MAAM,oBAAoB;AAE5B,QAAO,OAAO;EACZ,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,QAAQ;GACR,eAAe;GAEf,QAAQ,WAAW,YAAY;GAC/B,aAAa,YAAY,WAAW;GAEpC,SAAS;IACP,kBAAkB,EAChB,OAAO,GAAG,oBACX;IACD,WAAW,WACP,EAAE,SAAS,QAAQ,GACnB,EAAE,SAAS,aAAa,kBAAkB;IAC/C;GACF;EACF,CAAC;;;;;AC5BJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aAEA,OACA,UACA,eACA,YACA,cAEA,WACA,cACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GACT,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACF,EAAE;GACH;EACD,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC;GAAI,WAAU;aACb,oBAAC;IACQ;IACP,SAAS;IACT,OAAO;IACG;IACV,SAAS;IACM;KACf;IACE;;AAIV,QACE,qBAAC;EACE,aAAa;EAEd,qBAAC;GAAI,OAAO,EAAE,UAAU,YAAY;cACjC,aACC,oBAAC;IAAI,OAAO,OAAO;cACjB,oBAAC;KACC,MAAM;KACN,OAAO,YAAY,YAAY;MAC/B;KACE,EAGR,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;IACE;EAEL,aAAa,CAAC,gBACb,qBAAC;GAAW,SAAQ;GAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;IAC9D,MAAM;IAAO;IAAE;IAAU;IAAE;;IACjB,GACX;KACA"}