@fanvue/ui 3.12.0 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Accordion/AccordionTrigger.cjs +11 -2
- package/dist/cjs/components/Accordion/AccordionTrigger.cjs.map +1 -1
- package/dist/cjs/components/Avatar/Avatar.cjs +2 -2
- package/dist/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs +1 -1
- package/dist/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs +25 -2
- package/dist/cjs/components/DropdownMenu/DropdownMenu.cjs.map +1 -1
- package/dist/cjs/components/Icons/GifIcon.cjs +12 -36
- package/dist/cjs/components/Icons/GifIcon.cjs.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs +30 -5
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBarItem.cjs +49 -0
- package/dist/cjs/components/ProgressBar/ProgressBarItem.cjs.map +1 -0
- package/dist/cjs/components/ProgressBar/ProgressBarSteps.cjs +66 -0
- package/dist/cjs/components/ProgressBar/ProgressBarSteps.cjs.map +1 -0
- package/dist/cjs/components/TextArea/TextArea.cjs +4 -4
- package/dist/cjs/components/TextArea/TextArea.cjs.map +1 -1
- package/dist/cjs/components/TextField/TextField.cjs +105 -62
- package/dist/cjs/components/TextField/TextField.cjs.map +1 -1
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.mjs +11 -2
- package/dist/components/Accordion/AccordionTrigger.mjs.map +1 -1
- package/dist/components/Avatar/Avatar.mjs +2 -2
- package/dist/components/Avatar/Avatar.mjs.map +1 -1
- package/dist/components/Dialog/Dialog.mjs +1 -1
- package/dist/components/Dialog/Dialog.mjs.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.mjs +25 -2
- package/dist/components/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/dist/components/Icons/GifIcon.mjs +12 -36
- package/dist/components/Icons/GifIcon.mjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.mjs +30 -5
- package/dist/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBarItem.mjs +32 -0
- package/dist/components/ProgressBar/ProgressBarItem.mjs.map +1 -0
- package/dist/components/ProgressBar/ProgressBarSteps.mjs +49 -0
- package/dist/components/ProgressBar/ProgressBarSteps.mjs.map +1 -0
- package/dist/components/TextArea/TextArea.mjs +4 -4
- package/dist/components/TextArea/TextArea.mjs.map +1 -1
- package/dist/components/TextField/TextField.mjs +105 -62
- package/dist/components/TextField/TextField.mjs.map +1 -1
- package/dist/index.d.ts +103 -9
- package/dist/index.mjs +4 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GifIcon.cjs","sources":["../../../../src/components/Icons/GifIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n 16: {\n outlined: [\n {\n d: \"
|
|
1
|
+
{"version":3,"file":"GifIcon.cjs","sources":["../../../../src/components/Icons/GifIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { BaseIcon } from \"./BaseIcon\";\nimport type { BaseIconProps, IconVariants } from \"./types\";\n\nconst VARIANTS: IconVariants = {\n 16: {\n outlined: [\n {\n d: \"M12.358 5.992v.527h-1.854v1.35h1.701v.515h-1.7v1.848h-.55v-4.24zm-3.208 0v4.24H8.6v-4.24zm-3.418-.058q.495 0 .926.199h-.001q.435.193.732.539.3.347.39.793l.018.08h-.562l-.013-.049a1.26 1.26 0 0 0-.536-.737 1.6 1.6 0 0 0-.948-.287 1.6 1.6 0 0 0-.823.214q-.36.206-.562.578-.203.37-.203.848 0 .484.197.86l.11.175q.182.248.452.403h-.001q.365.208.83.209.397 0 .723-.153a1.4 1.4 0 0 0 .532-.425q.188-.25.257-.562H5.506v-.521h2.341l-.002.068a2.3 2.3 0 0 1-.224.977l-.066.123q-.272.483-.746.757a2.1 2.1 0 0 1-1.071.274q-.538 0-.978-.214l-.124-.065a2.06 2.06 0 0 1-.763-.783h-.001A2.3 2.3 0 0 1 3.6 8.112q0-.614.272-1.112.279-.503.764-.782.493-.284 1.096-.284\",\n },\n {\n d: \"M2.667 3.667h10.666a1 1 0 0 1 1 1v6.666a1 1 0 0 1-1 1H2.667a1 1 0 0 1-1-1V4.667a1 1 0 0 1 1-1z\",\n sw: 0.667,\n },\n ],\n filled: [\n {\n d: \"M13.333 3.333c.737 0 1.333.597 1.333 1.333v6.667c0 .737-.596 1.333-1.333 1.333H2.666a1.333 1.333 0 0 1-1.333-1.333V4.666c0-.736.597-1.332 1.333-1.333zM5.732 5.867q-.62 0-1.13.293-.438.254-.713.682l-.075.126a2.34 2.34 0 0 0-.28 1.144q-.002.636.279 1.155h.002q.287.514.787.808h.002q.503.29 1.134.289.613 0 1.104-.283.49-.283.772-.784.286-.501.298-1.13l.003-.135H5.44v.654h1.726a1.4 1.4 0 0 1-.226.454q-.196.26-.508.405a1.6 1.6 0 0 1-.694.147q-.449-.001-.796-.2H4.94a1.4 1.4 0 0 1-.534-.55 1.8 1.8 0 0 1-.19-.83q0-.463.195-.817.193-.354.536-.552.348-.205.79-.205.518 0 .909.275l.002.002q.394.267.509.698l.026.099h.694l-.033-.16a1.8 1.8 0 0 0-.405-.823 2.1 2.1 0 0 0-.757-.557 2.2 2.2 0 0 0-.951-.205m2.802 4.432h.683V5.925h-.683zm1.353 0h.684V8.451h1.7v-.648h-1.7V6.585h1.853v-.66H9.887zm-3.89-.084-.03.003zm-.62-.012-.057-.01zm.864-.03-.038.008zm-1.109-.022-.055-.017zm1.342-.047-.046.017zm-1.58-.033-.043-.02zm2.151-.85h.001q-.108.143-.248.255.138-.112.247-.255M3.678 7.872l.002-.028zm.035-.242.01-.042zm.331-.778.029-.042zm.15-.19.03-.033zm.164-.163.047-.039zm1.493-.496q.033.002.064.006L5.732 6z\",\n },\n ],\n },\n 24: {\n outlined: [\n {\n d: \"M18.537 8.988v.79h-2.781v2.026h2.552v.772h-2.552v2.772h-.824v-6.36zm-4.812 0v6.36H12.9v-6.36zM8.598 8.9q.741 0 1.386.3l.16.075q.55.278.941.734a2.6 2.6 0 0 1 .585 1.188l.024.12h-.842l-.019-.074a1.9 1.9 0 0 0-.804-1.104l-.002-.001a2.4 2.4 0 0 0-1.42-.431 2.4 2.4 0 0 0-1.235.321q-.54.311-.843.867-.304.556-.304 1.273.001.726.296 1.291.304.555.842.866a2.47 2.47 0 0 0 1.243.313q.597 0 1.084-.229.49-.228.8-.639.283-.374.388-.842H8.26v-.78h3.51l-.001.101a3.4 3.4 0 0 1-.436 1.647l.001.002a2.97 2.97 0 0 1-1.12 1.137 3.16 3.16 0 0 1-1.608.41q-.922 0-1.65-.419h-.002a3.1 3.1 0 0 1-1.145-1.172l-.001-.002a3.5 3.5 0 0 1-.408-1.684q0-.921.409-1.667V10.5a3 3 0 0 1 1.146-1.173A3.2 3.2 0 0 1 8.598 8.9\",\n },\n {\n d: \"M4 5.5h16A1.5 1.5 0 0 1 21.5 7v10a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 17V7A1.5 1.5 0 0 1 4 5.5z\",\n sw: 1,\n },\n ],\n filled: [\n {\n d: \"M20 5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8.598 8.8q-.931 0-1.694.44a3.1 3.1 0 0 0-1.07 1.023l-.113.19a3.5 3.5 0 0 0-.421 1.715c0 .634.138 1.214.42 1.732l.002.002q.43.769 1.181 1.21l.002.001q.756.434 1.701.432a3.26 3.26 0 0 0 1.658-.423q.734-.425 1.156-1.176a3.5 3.5 0 0 0 .45-1.695l.003-.204H8.16v.981h2.589q-.106.375-.34.682-.294.39-.76.608-.467.219-1.043.22a2.37 2.37 0 0 1-1.194-.3 2.1 2.1 0 0 1-.802-.825 2.65 2.65 0 0 1-.285-1.245q.001-.693.292-1.225.29-.532.805-.828a2.3 2.3 0 0 1 1.184-.307c.52 0 .972.138 1.365.412l.002.002c.396.268.647.616.763 1.048l.04.148h1.041l-.05-.24a2.7 2.7 0 0 0-.607-1.235 3.2 3.2 0 0 0-1.136-.836A3.4 3.4 0 0 0 8.598 8.8m4.202 6.648h1.025v-6.56H12.8zm2.031 0h1.025v-2.772h2.552v-.972h-2.552V9.878h2.78v-.99h-3.805zm-5.826-.126q-.058.007-.115.01zm.19-.027-.1.015zm-.436-.562v.001m-2.164-.969.031.04-.02-.024zm-1.092-1.717.002-.08zm.013-.216.005-.075zm.022-.195.01-.075zm5.266-.762.07.168a2 2 0 0 0-.107-.238zm-4.763-.562.064-.09zm.14-.189.04-.05zm.211-.238q.046-.048.096-.095-.05.046-.096.095m3.257-.713.051.018zm-.292-.085.043.01zm-.312-.057.056.007zm-3.321 1.886\",\n },\n ],\n },\n 32: {\n outlined: [\n {\n d: \"M24.715 11.984v1.053h-3.707v2.701h3.403v1.03h-3.403v3.696h-1.1v-8.48zm-6.415 0v8.48h-1.1v-8.48zm-6.837-.118q.989 0 1.85.4l.212.101a4.1 4.1 0 0 1 1.254.978q.598.693.78 1.585l.034.16H14.47l-.027-.099q-.243-.912-1.072-1.472v-.001q-.821-.575-1.896-.575-.918 0-1.646.427v.001a2.93 2.93 0 0 0-1.124 1.157q-.405.741-.405 1.696.001.969.395 1.721.404.742 1.121 1.156l.186.096q.66.319 1.473.32.794 0 1.446-.304a2.8 2.8 0 0 0 1.064-.852l.102-.142q.297-.444.416-.982h-3.49v-1.04h4.681l-.003.135q-.025 1.226-.58 2.197v.001a3.96 3.96 0 0 1-1.493 1.517q-.95.547-2.143.546-1.23 0-2.203-.558a4.1 4.1 0 0 1-1.527-1.563v-.002q-.546-1.006-.546-2.246 0-1.228.545-2.223V14a4 4 0 0 1 1.528-1.565 4.3 4.3 0 0 1 2.19-.569\",\n },\n {\n d: \"M5.333 7.333h21.333a2 2 0 0 1 2 2v13.334a2 2 0 0 1-2 2H5.333a2 2 0 0 1-2-2V9.333a2 2 0 0 1 2-2z\",\n sw: 1.333,\n },\n ],\n filled: [\n {\n d: \"M26.667 6.667a2.667 2.667 0 0 1 2.667 2.667v13.333a2.667 2.667 0 0 1-2.667 2.667H5.334a2.667 2.667 0 0 1-2.667-2.667V9.334a2.667 2.667 0 0 1 2.667-2.667zm-15.203 5.066q-1.24-.001-2.258.587a4.1 4.1 0 0 0-1.428 1.363l-.15.253c-.376.684-.562 1.45-.562 2.288q-.001 1.27.56 2.31l.003.003a4.25 4.25 0 0 0 1.575 1.613l.003.001c.67.386 1.43.575 2.269.575q1.225.001 2.209-.563a4.1 4.1 0 0 0 1.542-1.568q.574-1.003.598-2.26l.006-.273H10.88v1.309h3.452a2.7 2.7 0 0 1-.453.909 2.65 2.65 0 0 1-1.015.811 3.25 3.25 0 0 1-1.388.293 3.16 3.16 0 0 1-1.593-.4h-.001a2.8 2.8 0 0 1-1.069-1.1q-.378-.719-.38-1.66.001-.925.39-1.633.387-.709 1.073-1.104l.001-.001q.696-.408 1.579-.41c.692 0 1.295.185 1.818.55l.003.003c.528.357.864.821 1.018 1.397l.053.198h1.389l-.067-.32a3.6 3.6 0 0 0-.81-1.646 4.24 4.24 0 0 0-1.514-1.115 4.5 4.5 0 0 0-1.902-.41m5.602 8.864h1.368V11.85h-1.368zm2.71 0h1.367v-3.696h3.402v-1.296h-3.402v-2.434h3.707v-1.32h-5.075zm-2.442-.266v-8.214zm-3.782-.399-.233.124a4 4 0 0 1 .233-.125zm.828-1.954a2.9 2.9 0 0 1-1.403 1.355 3 3 0 0 1 .166-.083q.568-.306.948-.809.167-.22.29-.463m-5.618.327-.075-.109.075.11M7.378 15.56l.026-.174q-.014.087-.025.174m.547-1.599q.037-.065.076-.127zm.116-.187q.045-.07.094-.138-.049.068-.094.138m.167-.233q.044-.06.092-.117-.047.056-.092.117m.685-.69q.105-.084.218-.158l.087-.055a4 4 0 0 0-.305.212m15.69.053h-3.707v-.001zm-13.106-.095v.001m1.377-.585q.207.07.406.162v.001a4 4 0 0 0-.405-.163m-.385-.111.08.021zm-.222-.044.088.016zm-.217-.033.11.014zM8.854 18.43q-.03-.037-.058-.076zm-.151-5.423\",\n },\n ],\n },\n};\n\n/** Props for {@link GifIcon}. See {@link BaseIconProps} for the shared shape. */\nexport type GifIconProps = BaseIconProps;\n\n/**\n * Gif icon. Renders at sizes 16, 24, or 32 px with outlined and filled variants.\n *\n * @example\n * ```tsx\n * <GifIcon size={24} filled />\n * ```\n */\nexport const GifIcon = React.forwardRef<SVGSVGElement, GifIconProps>((props, ref) => (\n <BaseIcon ref={ref} variants={VARIANTS} {...props} />\n));\n\nGifIcon.displayName = \"GifIcon\";\n"],"names":["React","jsx","BaseIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,WAAyB;AAAA,EAC7B,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEF,IAAI;AAAA,IACF,UAAU;AAAA,MACR;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,MAEL;AAAA,QACE,GAAG;AAAA,QACH,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,QAAQ;AAAA,MACN;AAAA,QACE,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;AAaO,MAAM,UAAUA,iBAAM,WAAwC,CAAC,OAAO,QAC3EC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,KAAU,UAAU,UAAW,GAAG,OAAO,CACpD;AAED,QAAQ,cAAc;;"}
|
|
@@ -40,11 +40,36 @@ function getDefaultTextColor(value) {
|
|
|
40
40
|
return "text-error-content";
|
|
41
41
|
}
|
|
42
42
|
function resolveColors(variant, value) {
|
|
43
|
+
const neutralTrack = "bg-neutral-alphas-50";
|
|
44
|
+
if (variant === "brand")
|
|
45
|
+
return {
|
|
46
|
+
barColor: "bg-progress-bar-brand-active",
|
|
47
|
+
textColor: "text-brand-primary-default",
|
|
48
|
+
trackColor: "bg-progress-bar-brand-inactive"
|
|
49
|
+
};
|
|
50
|
+
if (variant === "mono")
|
|
51
|
+
return {
|
|
52
|
+
barColor: "bg-progress-bar-mono-active",
|
|
53
|
+
textColor: "text-content-primary",
|
|
54
|
+
trackColor: "bg-progress-bar-mono-inactive"
|
|
55
|
+
};
|
|
43
56
|
if (variant === "neutral")
|
|
44
|
-
return {
|
|
57
|
+
return {
|
|
58
|
+
barColor: "bg-content-tertiary",
|
|
59
|
+
textColor: "text-content-tertiary",
|
|
60
|
+
trackColor: neutralTrack
|
|
61
|
+
};
|
|
45
62
|
if (variant === "generic")
|
|
46
|
-
return {
|
|
47
|
-
|
|
63
|
+
return {
|
|
64
|
+
barColor: "bg-brand-primary-default",
|
|
65
|
+
textColor: "text-brand-primary-default",
|
|
66
|
+
trackColor: neutralTrack
|
|
67
|
+
};
|
|
68
|
+
return {
|
|
69
|
+
barColor: getDefaultBarColor(value),
|
|
70
|
+
textColor: getDefaultTextColor(value),
|
|
71
|
+
trackColor: neutralTrack
|
|
72
|
+
};
|
|
48
73
|
}
|
|
49
74
|
const ProgressBar = React__namespace.forwardRef(
|
|
50
75
|
({
|
|
@@ -64,7 +89,7 @@ const ProgressBar = React__namespace.forwardRef(
|
|
|
64
89
|
}, ref) => {
|
|
65
90
|
const clampedValue = Math.min(100, Math.max(0, value));
|
|
66
91
|
const isSmall = size === "small";
|
|
67
|
-
const { barColor, textColor } = resolveColors(variant, clampedValue);
|
|
92
|
+
const { barColor, textColor, trackColor } = resolveColors(variant, clampedValue);
|
|
68
93
|
const showHeader = title != null || showCompletion || stepsLabel != null;
|
|
69
94
|
const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
|
|
70
95
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex w-full flex-col", GAP[size], className), ...props, children: [
|
|
@@ -94,7 +119,7 @@ const ProgressBar = React__namespace.forwardRef(
|
|
|
94
119
|
"aria-valuemin": 0,
|
|
95
120
|
"aria-valuemax": 100,
|
|
96
121
|
"aria-valuetext": ariaValueText,
|
|
97
|
-
className: cn.cn("relative w-full rounded-full
|
|
122
|
+
className: cn.cn("relative w-full rounded-full", trackColor, TRACK_HEIGHT[size]),
|
|
98
123
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
99
124
|
"div",
|
|
100
125
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). */\nexport type ProgressBarSize = \"default\" | \"small\";\n
|
|
1
|
+
{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Track height — `\"default\"` (12px) or `\"small\"` (6px). */\nexport type ProgressBarSize = \"default\" | \"small\";\n/**\n * Colour mode.\n * - `\"brand\"` — V2 brand (green) fill on a tinted track.\n * - `\"mono\"` — V2 monochrome fill on a tinted track (theme-aware).\n * - `\"default\"` — legacy value-coded red/yellow/green.\n * - `\"generic\"` — legacy solid brand green on a neutral track.\n * - `\"neutral\"` — legacy theme-aware inverse colour on a neutral track.\n */\nexport type ProgressBarVariant = \"brand\" | \"mono\" | \"default\" | \"generic\" | \"neutral\";\n\nexport interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Current progress value, clamped to 0–100. */\n value: number;\n /** Track height — `\"default\"` (12px) or `\"small\"` (6px). @default \"default\" */\n size?: ProgressBarSize;\n /** Colour mode. Prefer `\"brand\"` or `\"mono\"` (V2); `\"default\"`/`\"generic\"`/`\"neutral\"` are legacy. @default \"default\" */\n variant?: ProgressBarVariant;\n /** Title content shown at the top-left of the bar. */\n title?: React.ReactNode;\n /** Whether to display the completion percentage above the track. @default false */\n showCompletion?: boolean;\n /** Steps label shown at the top-right (e.g. `\"2/8 steps\"`). */\n stepsLabel?: React.ReactNode;\n /** Helper content at the bottom-left of the bar. */\n helperLeft?: React.ReactNode;\n /** Helper content at the bottom-right of the bar. */\n helperRight?: React.ReactNode;\n /** Icon shown at the bottom-left before the helper text. */\n leftIcon?: React.ReactNode;\n /** Accessible label for the `progressbar` role. @default \"Progress\" */\n ariaLabel?: string;\n /** Human-readable text alternative for the current value (e.g. \"Step 3 of 5\"). */\n ariaValueText?: string;\n}\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = {\n default: \"h-3\",\n small: \"h-1.5\",\n};\n\nconst GAP: Record<ProgressBarSize, string> = {\n default: \"gap-3\",\n small: \"gap-1\",\n};\n\nfunction getDefaultBarColor(value: number): string {\n if (value >= 100) return \"bg-success-content\";\n if (value >= 40) return \"bg-warning-content\";\n return \"bg-error-content\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-content\";\n if (value >= 40) return \"text-warning-content\";\n return \"text-error-content\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string; trackColor: string } {\n const neutralTrack = \"bg-neutral-alphas-50\";\n if (variant === \"brand\")\n return {\n barColor: \"bg-progress-bar-brand-active\",\n textColor: \"text-brand-primary-default\",\n trackColor: \"bg-progress-bar-brand-inactive\",\n };\n if (variant === \"mono\")\n return {\n barColor: \"bg-progress-bar-mono-active\",\n textColor: \"text-content-primary\",\n trackColor: \"bg-progress-bar-mono-inactive\",\n };\n if (variant === \"neutral\")\n return {\n barColor: \"bg-content-tertiary\",\n textColor: \"text-content-tertiary\",\n trackColor: neutralTrack,\n };\n if (variant === \"generic\")\n return {\n barColor: \"bg-brand-primary-default\",\n textColor: \"text-brand-primary-default\",\n trackColor: neutralTrack,\n };\n return {\n barColor: getDefaultBarColor(value),\n textColor: getDefaultTextColor(value),\n trackColor: neutralTrack,\n };\n}\n\n/**\n * A horizontal progress indicator with optional title, completion percentage,\n * step count, and helper text. The bar colour reflects progress when using the\n * `\"default\"` variant.\n *\n * @example\n * ```tsx\n * <ProgressBar value={65} title=\"Upload\" showCompletion />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n (\n {\n value,\n size = \"default\",\n variant = \"default\",\n title,\n showCompletion = false,\n stepsLabel,\n helperLeft,\n helperRight,\n leftIcon,\n ariaLabel,\n ariaValueText,\n className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const isSmall = size === \"small\";\n const { barColor, textColor, trackColor } = resolveColors(variant, clampedValue);\n\n const showHeader = title != null || showCompletion || stepsLabel != null;\n const showFooter = leftIcon != null || helperLeft != null || helperRight != null;\n\n return (\n <div ref={ref} className={cn(\"flex w-full flex-col\", GAP[size], className)} {...props}>\n {showHeader && (\n <div className=\"flex w-full items-end justify-between\">\n {title != null && (\n <p className=\"typography-description-12px-semibold text-content-primary\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-header-heading-sm\" : \"typography-header-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-description-12px-regular text-content-primary\">\n {stepsLabel}\n </span>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel ?? \"Progress\"}\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={ariaValueText}\n className={cn(\"relative w-full rounded-full\", trackColor, TRACK_HEIGHT[size])}\n >\n <div\n className={cn(\n \"absolute inset-y-0 left-0 rounded-full transition-[width] duration-300 ease-in-out\",\n barColor,\n )}\n style={{ width: `${clampedValue}%` }}\n />\n </div>\n\n {showFooter && (\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n {leftIcon != null && (\n <span className=\"flex size-5 items-center justify-center\" aria-hidden=\"true\">\n {leftIcon}\n </span>\n )}\n {helperLeft != null && (\n <span className=\"typography-description-12px-regular text-content-primary\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-description-12px-regular text-content-primary\">\n {helperRight}\n </span>\n )}\n </div>\n )}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
+
const React = require("react");
|
|
6
|
+
const cn = require("../../utils/cn.cjs");
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
8
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
9
|
+
if (e) {
|
|
10
|
+
for (const k in e) {
|
|
11
|
+
if (k !== "default") {
|
|
12
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: () => e[k]
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return Object.freeze(n);
|
|
22
|
+
}
|
|
23
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
24
|
+
const ACTIVE_COLOR = {
|
|
25
|
+
brand: "bg-progress-bar-brand-active",
|
|
26
|
+
mono: "bg-progress-bar-mono-active"
|
|
27
|
+
};
|
|
28
|
+
const INACTIVE_COLOR = {
|
|
29
|
+
brand: "bg-progress-bar-brand-inactive",
|
|
30
|
+
mono: "bg-progress-bar-mono-inactive"
|
|
31
|
+
};
|
|
32
|
+
const ProgressBarItem = React__namespace.forwardRef(
|
|
33
|
+
({ active = false, variant = "brand", size = "default", className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
34
|
+
"div",
|
|
35
|
+
{
|
|
36
|
+
ref,
|
|
37
|
+
className: cn.cn(
|
|
38
|
+
"w-full rounded-full",
|
|
39
|
+
size === "small" ? "h-1" : "h-2",
|
|
40
|
+
active ? ACTIVE_COLOR[variant] : INACTIVE_COLOR[variant],
|
|
41
|
+
className
|
|
42
|
+
),
|
|
43
|
+
...props
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
);
|
|
47
|
+
ProgressBarItem.displayName = "ProgressBarItem";
|
|
48
|
+
exports.ProgressBarItem = ProgressBarItem;
|
|
49
|
+
//# sourceMappingURL=ProgressBarItem.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBarItem.cjs","sources":["../../../../src/components/ProgressBar/ProgressBarItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Colour mode for a progress bar item — brand green or theme-aware monochrome. */\nexport type ProgressBarItemVariant = \"brand\" | \"mono\";\n/** Pill thickness — `\"default\"` (8px) or `\"small\"` (4px). */\nexport type ProgressBarItemSize = \"default\" | \"small\";\n\nexport interface ProgressBarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Whether this item is filled (completed). @default false */\n active?: boolean;\n /** Colour mode. @default \"brand\" */\n variant?: ProgressBarItemVariant;\n /** Pill thickness — `\"default\"` (8px) or `\"small\"` (4px). @default \"default\" */\n size?: ProgressBarItemSize;\n}\n\nconst ACTIVE_COLOR: Record<ProgressBarItemVariant, string> = {\n brand: \"bg-progress-bar-brand-active\",\n mono: \"bg-progress-bar-mono-active\",\n};\n\nconst INACTIVE_COLOR: Record<ProgressBarItemVariant, string> = {\n brand: \"bg-progress-bar-brand-inactive\",\n mono: \"bg-progress-bar-mono-inactive\",\n};\n\n/**\n * A single rounded segment used to compose a stepped progress indicator. Render\n * a row of these (see {@link ProgressBarSteps}) to represent discrete steps.\n *\n * @example\n * ```tsx\n * <ProgressBarItem active variant=\"brand\" />\n * ```\n */\nexport const ProgressBarItem = React.forwardRef<HTMLDivElement, ProgressBarItemProps>(\n ({ active = false, variant = \"brand\", size = \"default\", className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"w-full rounded-full\",\n size === \"small\" ? \"h-1\" : \"h-2\",\n active ? ACTIVE_COLOR[variant] : INACTIVE_COLOR[variant],\n className,\n )}\n {...props}\n />\n ),\n);\n\nProgressBarItem.displayName = \"ProgressBarItem\";\n"],"names":["React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,eAAuD;AAAA,EAC3D,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,iBAAyD;AAAA,EAC7D,OAAO;AAAA,EACP,MAAM;AACR;AAWO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,SAAS,OAAO,UAAU,SAAS,OAAO,WAAW,WAAW,GAAG,MAAA,GAAS,QAC7EC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACT;AAAA,QACA,SAAS,UAAU,QAAQ;AAAA,QAC3B,SAAS,aAAa,OAAO,IAAI,eAAe,OAAO;AAAA,QACvD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,gBAAgB,cAAc;;"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
+
const React = require("react");
|
|
6
|
+
const cn = require("../../utils/cn.cjs");
|
|
7
|
+
const ProgressBarItem = require("./ProgressBarItem.cjs");
|
|
8
|
+
function _interopNamespaceDefault(e) {
|
|
9
|
+
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
10
|
+
if (e) {
|
|
11
|
+
for (const k in e) {
|
|
12
|
+
if (k !== "default") {
|
|
13
|
+
const d = Object.getOwnPropertyDescriptor(e, k);
|
|
14
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: () => e[k]
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
n.default = e;
|
|
22
|
+
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
|
|
25
|
+
const ProgressBarSteps = React__namespace.forwardRef(
|
|
26
|
+
({
|
|
27
|
+
steps,
|
|
28
|
+
value,
|
|
29
|
+
variant = "brand",
|
|
30
|
+
size = "default",
|
|
31
|
+
ariaLabel,
|
|
32
|
+
ariaValueText,
|
|
33
|
+
className,
|
|
34
|
+
...props
|
|
35
|
+
}, ref) => {
|
|
36
|
+
const total = Math.max(1, Math.floor(steps));
|
|
37
|
+
const completed = Math.min(total, Math.max(0, Math.floor(value)));
|
|
38
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
39
|
+
"div",
|
|
40
|
+
{
|
|
41
|
+
ref,
|
|
42
|
+
role: "progressbar",
|
|
43
|
+
"aria-label": ariaLabel ?? "Progress",
|
|
44
|
+
"aria-valuemin": 0,
|
|
45
|
+
"aria-valuemax": total,
|
|
46
|
+
"aria-valuenow": completed,
|
|
47
|
+
"aria-valuetext": ariaValueText,
|
|
48
|
+
className: cn.cn("flex w-full items-center gap-1", className),
|
|
49
|
+
...props,
|
|
50
|
+
children: Array.from({ length: total }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
51
|
+
ProgressBarItem.ProgressBarItem,
|
|
52
|
+
{
|
|
53
|
+
active: index < completed,
|
|
54
|
+
variant,
|
|
55
|
+
size,
|
|
56
|
+
className: "flex-1"
|
|
57
|
+
},
|
|
58
|
+
index
|
|
59
|
+
))
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
ProgressBarSteps.displayName = "ProgressBarSteps";
|
|
65
|
+
exports.ProgressBarSteps = ProgressBarSteps;
|
|
66
|
+
//# sourceMappingURL=ProgressBarSteps.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBarSteps.cjs","sources":["../../../../src/components/ProgressBar/ProgressBarSteps.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport {\n ProgressBarItem,\n type ProgressBarItemSize,\n type ProgressBarItemVariant,\n} from \"./ProgressBarItem\";\n\nexport interface ProgressBarStepsProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Total number of steps (segments). Values below 1 are treated as 1. */\n steps: number;\n /** Number of completed steps, clamped to `0`–`steps`. */\n value: number;\n /** Colour mode. @default \"brand\" */\n variant?: ProgressBarItemVariant;\n /** Pill thickness — `\"default\"` (8px) or `\"small\"` (4px). @default \"default\" */\n size?: ProgressBarItemSize;\n /** Accessible label for the `progressbar` role. @default \"Progress\" */\n ariaLabel?: string;\n /** Human-readable text alternative for the current value (e.g. \"Step 2 of 4\"). */\n ariaValueText?: string;\n}\n\n/**\n * A segmented (stepped) progress indicator built from {@link ProgressBarItem}\n * pills. Fills the first `value` of `steps` segments.\n *\n * @example\n * ```tsx\n * <ProgressBarSteps steps={4} value={2} variant=\"brand\" />\n * ```\n */\nexport const ProgressBarSteps = React.forwardRef<HTMLDivElement, ProgressBarStepsProps>(\n (\n {\n steps,\n value,\n variant = \"brand\",\n size = \"default\",\n ariaLabel,\n ariaValueText,\n className,\n ...props\n },\n ref,\n ) => {\n const total = Math.max(1, Math.floor(steps));\n const completed = Math.min(total, Math.max(0, Math.floor(value)));\n\n return (\n <div\n ref={ref}\n role=\"progressbar\"\n aria-label={ariaLabel ?? \"Progress\"}\n aria-valuemin={0}\n aria-valuemax={total}\n aria-valuenow={completed}\n aria-valuetext={ariaValueText}\n className={cn(\"flex w-full items-center gap-1\", className)}\n {...props}\n >\n {Array.from({ length: total }, (_, index) => (\n <ProgressBarItem\n key={index}\n active={index < completed}\n variant={variant}\n size={size}\n className=\"flex-1\"\n />\n ))}\n </div>\n );\n },\n);\n\nProgressBarSteps.displayName = \"ProgressBarSteps\";\n"],"names":["React","jsx","cn","ProgressBarItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCO,MAAM,mBAAmBA,iBAAM;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AAC3C,UAAM,YAAY,KAAK,IAAI,OAAO,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhE,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,aAAa;AAAA,QACzB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,WAAWC,GAAAA,GAAG,kCAAkC,SAAS;AAAA,QACxD,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,CAAC,GAAG,UACjCD,2BAAAA;AAAAA,UAACE,gBAAAA;AAAAA,UAAA;AAAA,YAEC,QAAQ,QAAQ;AAAA,YAChB;AAAA,YACA;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,UAJL;AAAA,QAAA,CAMR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iBAAiB,cAAc;;"}
|
|
@@ -51,8 +51,8 @@ const CLEAR_BUTTON_RIGHT = {
|
|
|
51
51
|
};
|
|
52
52
|
function getContainerClassName(size, error, disabled) {
|
|
53
53
|
return cn.cn(
|
|
54
|
-
"relative rounded-sm border bg-
|
|
55
|
-
error ? "border-error-content" : "border-
|
|
54
|
+
"relative rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors",
|
|
55
|
+
error ? "border-error-content" : "border-border-primary",
|
|
56
56
|
!disabled && !error && "hover:border-neutral-alphas-400",
|
|
57
57
|
CONTAINER_MIN_HEIGHT[size],
|
|
58
58
|
disabled && "opacity-50"
|
|
@@ -60,7 +60,7 @@ function getContainerClassName(size, error, disabled) {
|
|
|
60
60
|
}
|
|
61
61
|
function getTextareaClassName(size, hasClearButton, hasMinRows, resizable) {
|
|
62
62
|
return cn.cn(
|
|
63
|
-
"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-
|
|
63
|
+
"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed",
|
|
64
64
|
resizable ? "resize-y" : "resize-none",
|
|
65
65
|
!hasMinRows && "min-h-[80px]",
|
|
66
66
|
TEXTAREA_SIZE_CLASSES[size],
|
|
@@ -179,7 +179,7 @@ const TextArea = React__namespace.forwardRef(
|
|
|
179
179
|
"label",
|
|
180
180
|
{
|
|
181
181
|
htmlFor: inputId,
|
|
182
|
-
className: "typography-description-12px-semibold
|
|
182
|
+
className: "typography-description-12px-semibold pb-2 text-content-primary",
|
|
183
183
|
children: label
|
|
184
184
|
}
|
|
185
185
|
),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n /** Label text displayed above the textarea. Also used as the accessible name. */\n label?: string;\n /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n helperText?: string;\n /** Minimum height of the text area in pixels. @default \"48\" */\n size?: TextAreaSize;\n /** Whether the text area is in an error state. @default false */\n error?: boolean;\n /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n errorMessage?: string;\n /** Whether the text area is validated. @default false */\n validated?: boolean;\n /** Whether the text area stretches to fill its container width. @default false */\n fullWidth?: boolean;\n /** Whether to show a clear button when text is present. @default false */\n showClearButton?: boolean;\n /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n onClear?: () => void;\n /** Minimum number of rows (lines) for the textarea. */\n minRows?: number;\n /** Maximum number of rows (lines) for the textarea. */\n maxRows?: number;\n /** Whether the textarea can be resized by the user. @default true */\n resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n \"48\": \"min-h-12\",\n \"40\": \"min-h-10\",\n \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n \"48\": \"pr-11\",\n \"40\": \"pr-11\",\n \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n \"48\": \"right-4 top-3\",\n \"40\": \"right-4 top-2\",\n \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative rounded-sm border bg-neutral-alphas-50 has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-content\" : \"border-transparent\",\n !disabled && !error && \"hover:border-neutral-alphas-400\",\n CONTAINER_MIN_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getTextareaClassName(\n size: TextAreaSize,\n hasClearButton: boolean,\n hasMinRows: boolean,\n resizable: boolean,\n) {\n return cn(\n \"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-secondary focus:outline-none disabled:cursor-not-allowed\",\n resizable ? \"resize-y\" : \"resize-none\",\n !hasMinRows && \"min-h-[80px]\",\n TEXTAREA_SIZE_CLASSES[size],\n PADDING_HORIZONTAL[size],\n hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n );\n}\n\nfunction TextAreaHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n error ? \"text-error-content\" : \"text-content-secondary\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n if (!maxRows) return undefined;\n\n // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n const lineHeight = size === \"32\" ? 20 : 24;\n // py-2 = 8px, py-3 = 12px\n const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n showClearButton: boolean,\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n onClear?: () => void,\n textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n const resolvedValue = value !== undefined ? value : internalValue;\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setInternalValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n setInternalValue(\"\");\n\n if (onChange && textareaRef?.current) {\n const syntheticEvent = {\n target: { ...textareaRef.current, value: \"\" },\n currentTarget: { ...textareaRef.current, value: \"\" },\n } as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n\n onClear?.();\n };\n\n return {\n resolvedValue,\n displayValue: showClearButton ? resolvedValue : value,\n resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n handleChange,\n handleClear,\n };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n * label=\"Description\"\n * placeholder=\"Enter your description...\"\n * showClearButton\n * error={!!descError}\n * errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n validated = false,\n className,\n id,\n disabled,\n fullWidth = false,\n showClearButton = false,\n onClear,\n value,\n defaultValue,\n onChange,\n minRows,\n maxRows,\n resizable = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id || generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n const maxHeight = calculateMaxHeight(size, maxRows);\n\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n const mergedRef = (node: HTMLTextAreaElement | null) => {\n internalRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n }\n };\n\n const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n const showValidated = validated && !showClear;\n const ariaDescribedBy = bottomText ? helperTextId : undefined;\n const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-description-12px-semibold px-1 pt-1 pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n <textarea\n ref={mergedRef}\n id={inputId}\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error || undefined}\n className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n value={displayValue}\n defaultValue={resolvedDefaultValue}\n onChange={handleChange}\n rows={minRows}\n style={textareaStyle}\n {...props}\n />\n\n {showClear && (\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n icon={<CloseIcon />}\n aria-label=\"Clear text\"\n onClick={handleClear}\n className={cn(\n \"absolute flex size-5 items-center justify-center self-end\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n />\n )}\n {showValidated && (\n <div\n className={cn(\n \"pointer-events-none absolute flex size-5 items-center justify-center\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n >\n <CheckOutlineIcon className=\"text-success-content\" />\n </div>\n )}\n </div>\n\n {bottomText && (\n <TextAreaHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextAreaHelperText>\n )}\n </div>\n );\n },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { CheckOutlineIcon } from \"../Icons/CheckOutlineIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\n\n/** Text area height in pixels. */\nexport type TextAreaSize = \"48\" | \"40\" | \"32\";\n\nexport interface TextAreaProps\n extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\"> {\n /** Label text displayed above the textarea. Also used as the accessible name. */\n label?: string;\n /** Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`. */\n helperText?: string;\n /** Minimum height of the text area in pixels. @default \"48\" */\n size?: TextAreaSize;\n /** Whether the text area is in an error state. @default false */\n error?: boolean;\n /** Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`. */\n errorMessage?: string;\n /** Whether the text area is validated. @default false */\n validated?: boolean;\n /** Whether the text area stretches to fill its container width. @default false */\n fullWidth?: boolean;\n /** Whether to show a clear button when text is present. @default false */\n showClearButton?: boolean;\n /** Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing. */\n onClear?: () => void;\n /** Minimum number of rows (lines) for the textarea. */\n minRows?: number;\n /** Maximum number of rows (lines) for the textarea. */\n maxRows?: number;\n /** Whether the textarea can be resized by the user. @default true */\n resizable?: boolean;\n}\n\nconst CONTAINER_MIN_HEIGHT: Record<TextAreaSize, string> = {\n \"48\": \"min-h-12\",\n \"40\": \"min-h-10\",\n \"32\": \"min-h-8\",\n};\n\nconst TEXTAREA_SIZE_CLASSES: Record<TextAreaSize, string> = {\n \"48\": \"py-3 typography-body-default-16px-regular autofill-body-lg\",\n \"40\": \"py-2 typography-body-default-16px-regular autofill-body-lg\",\n \"32\": \"py-2 typography-body-small-14px-regular autofill-body-md\",\n};\n\nconst PADDING_HORIZONTAL: Record<TextAreaSize, string> = {\n \"48\": \"px-4\",\n \"40\": \"px-4\",\n \"32\": \"px-3\",\n};\n\nconst PADDING_RIGHT_WITH_CLEAR: Record<TextAreaSize, string> = {\n \"48\": \"pr-11\",\n \"40\": \"pr-11\",\n \"32\": \"pr-10\",\n};\n\nconst CLEAR_BUTTON_RIGHT: Record<TextAreaSize, string> = {\n \"48\": \"right-4 top-3\",\n \"40\": \"right-4 top-2\",\n \"32\": \"right-3 top-2\",\n};\n\nfunction getContainerClassName(size: TextAreaSize, error: boolean, disabled?: boolean) {\n return cn(\n \"relative rounded-sm border bg-inputs-inputs-primary has-focus-visible:shadow-focus-ring has-focus-visible:outline-none motion-safe:transition-colors\",\n error ? \"border-error-content\" : \"border-border-primary\",\n !disabled && !error && \"hover:border-neutral-alphas-400\",\n CONTAINER_MIN_HEIGHT[size],\n disabled && \"opacity-50\",\n );\n}\n\nfunction getTextareaClassName(\n size: TextAreaSize,\n hasClearButton: boolean,\n hasMinRows: boolean,\n resizable: boolean,\n) {\n return cn(\n \"h-full w-full bg-transparent text-content-primary no-underline placeholder:text-content-tertiary focus:outline-none disabled:cursor-not-allowed\",\n resizable ? \"resize-y\" : \"resize-none\",\n !hasMinRows && \"min-h-[80px]\",\n TEXTAREA_SIZE_CLASSES[size],\n PADDING_HORIZONTAL[size],\n hasClearButton ? PADDING_RIGHT_WITH_CLEAR[size] : \"\",\n );\n}\n\nfunction TextAreaHelperText({\n id,\n error,\n children,\n}: {\n id: string;\n error: boolean;\n children: React.ReactNode;\n}) {\n return (\n <p\n id={id}\n className={cn(\n \"typography-description-12px-regular px-2 pt-1 pb-0.5\",\n error ? \"text-error-content\" : \"text-content-secondary\",\n )}\n >\n {children}\n </p>\n );\n}\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n if (process.env.NODE_ENV !== \"production\") {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n \"TextArea: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n );\n }\n }\n}\n\nfunction calculateMaxHeight(size: TextAreaSize, maxRows?: number): string | undefined {\n if (!maxRows) return undefined;\n\n // Line height is 24px for body-1 (sizes 48 and 40) and 20px for body-2 (size 32)\n const lineHeight = size === \"32\" ? 20 : 24;\n // py-2 = 8px, py-3 = 12px\n const verticalPadding = size === \"32\" ? 8 : size === \"40\" ? 8 : 12;\n\n return `${lineHeight * maxRows + verticalPadding * 2}px`;\n}\n\nfunction useTextAreaValue(\n value: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"value\"],\n defaultValue: React.TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"],\n showClearButton: boolean,\n onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,\n onClear?: () => void,\n textareaRef?: React.RefObject<HTMLTextAreaElement | null>,\n) {\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n const resolvedValue = value !== undefined ? value : internalValue;\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setInternalValue(e.target.value);\n onChange?.(e);\n };\n\n const handleClear = () => {\n setInternalValue(\"\");\n\n if (onChange && textareaRef?.current) {\n const syntheticEvent = {\n target: { ...textareaRef.current, value: \"\" },\n currentTarget: { ...textareaRef.current, value: \"\" },\n } as React.ChangeEvent<HTMLTextAreaElement>;\n onChange(syntheticEvent);\n }\n\n onClear?.();\n };\n\n return {\n resolvedValue,\n displayValue: showClearButton ? resolvedValue : value,\n resolvedDefaultValue: showClearButton ? undefined : defaultValue,\n handleChange,\n handleClear,\n };\n}\n\n/**\n * A multi-line text input with optional label, helper/error text, and clear button.\n *\n * Provide at least one of `label`, `aria-label`, or `aria-labelledby` for\n * accessibility — a console warning is emitted in development if none are set.\n *\n * @example\n * ```tsx\n * <TextArea\n * label=\"Description\"\n * placeholder=\"Enter your description...\"\n * showClearButton\n * error={!!descError}\n * errorMessage={descError}\n * />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (\n {\n label,\n helperText,\n size = \"48\",\n error = false,\n errorMessage,\n validated = false,\n className,\n id,\n disabled,\n fullWidth = false,\n showClearButton = false,\n onClear,\n value,\n defaultValue,\n onChange,\n minRows,\n maxRows,\n resizable = false,\n ...props\n },\n ref,\n ) => {\n const generatedId = React.useId();\n const inputId = id || generatedId;\n const helperTextId = `${inputId}-helper`;\n const bottomText = error && errorMessage ? errorMessage : helperText;\n const maxHeight = calculateMaxHeight(size, maxRows);\n\n const internalRef = React.useRef<HTMLTextAreaElement>(null);\n\n const { resolvedValue, displayValue, resolvedDefaultValue, handleChange, handleClear } =\n useTextAreaValue(value, defaultValue, showClearButton, onChange, onClear, internalRef);\n\n const mergedRef = (node: HTMLTextAreaElement | null) => {\n internalRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;\n }\n };\n\n const showClear = showClearButton && resolvedValue !== \"\" && !disabled;\n const showValidated = validated && !showClear;\n const ariaDescribedBy = bottomText ? helperTextId : undefined;\n const textareaStyle = maxHeight ? { maxHeight } : undefined;\n\n warnMissingAccessibleName(label, props[\"aria-label\"], props[\"aria-labelledby\"]);\n\n return (\n <div\n className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n data-disabled={disabled ? \"\" : undefined}\n data-error={error ? \"\" : undefined}\n >\n {label && (\n <label\n htmlFor={inputId}\n className=\"typography-description-12px-semibold pb-2 text-content-primary\"\n >\n {label}\n </label>\n )}\n\n <div className={getContainerClassName(size, error, disabled)}>\n <textarea\n ref={mergedRef}\n id={inputId}\n disabled={disabled}\n aria-describedby={ariaDescribedBy}\n aria-invalid={error || undefined}\n className={getTextareaClassName(size, showClear, !!minRows, resizable)}\n value={displayValue}\n defaultValue={resolvedDefaultValue}\n onChange={handleChange}\n rows={minRows}\n style={textareaStyle}\n {...props}\n />\n\n {showClear && (\n <IconButton\n variant=\"tertiary\"\n size=\"24\"\n icon={<CloseIcon />}\n aria-label=\"Clear text\"\n onClick={handleClear}\n className={cn(\n \"absolute flex size-5 items-center justify-center self-end\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n />\n )}\n {showValidated && (\n <div\n className={cn(\n \"pointer-events-none absolute flex size-5 items-center justify-center\",\n CLEAR_BUTTON_RIGHT[size],\n )}\n >\n <CheckOutlineIcon className=\"text-success-content\" />\n </div>\n )}\n </div>\n\n {bottomText && (\n <TextAreaHelperText id={helperTextId} error={error}>\n {bottomText}\n </TextAreaHelperText>\n )}\n </div>\n );\n },\n);\n\nTextArea.displayName = \"TextArea\";\n"],"names":["cn","jsx","React","jsxs","IconButton","CloseIcon","CheckOutlineIcon"],"mappings":"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"}
|