@fanvue/ui 1.16.4 → 1.17.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/Icons/EmojiIcon.cjs +70 -0
- package/dist/cjs/components/Icons/EmojiIcon.cjs.map +1 -0
- package/dist/cjs/components/PasswordField/PasswordField.cjs +2 -2
- package/dist/cjs/components/PasswordField/PasswordField.cjs.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs +8 -3
- package/dist/cjs/components/ProgressBar/ProgressBar.cjs.map +1 -1
- package/dist/cjs/index.cjs +2 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/components/Icons/EmojiIcon.mjs +53 -0
- package/dist/components/Icons/EmojiIcon.mjs.map +1 -0
- package/dist/components/PasswordField/PasswordField.mjs +2 -2
- package/dist/components/PasswordField/PasswordField.mjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.mjs +8 -3
- package/dist/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/index.d.ts +7 -3
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,70 @@
|
|
|
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 EmojiIcon = React__namespace.forwardRef(
|
|
25
|
+
({ className, ...props }, ref) => {
|
|
26
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
27
|
+
"svg",
|
|
28
|
+
{
|
|
29
|
+
ref,
|
|
30
|
+
viewBox: "0 0 24 24",
|
|
31
|
+
fill: "none",
|
|
32
|
+
"aria-hidden": "true",
|
|
33
|
+
className: cn.cn("size-6", className),
|
|
34
|
+
...props,
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
37
|
+
"path",
|
|
38
|
+
{
|
|
39
|
+
d: "M11.97 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z",
|
|
40
|
+
stroke: "currentColor",
|
|
41
|
+
strokeWidth: "1.5",
|
|
42
|
+
strokeLinecap: "round",
|
|
43
|
+
strokeLinejoin: "round"
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
47
|
+
"path",
|
|
48
|
+
{
|
|
49
|
+
d: "M8.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM15.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
|
|
50
|
+
fill: "currentColor"
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
54
|
+
"path",
|
|
55
|
+
{
|
|
56
|
+
d: "M7.21 16A5.831 5.831 0 0 0 12 18.5c1.98 0 3.73-.99 4.79-2.5",
|
|
57
|
+
stroke: "currentColor",
|
|
58
|
+
strokeWidth: "1.5",
|
|
59
|
+
strokeLinecap: "round",
|
|
60
|
+
strokeLinejoin: "round"
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
EmojiIcon.displayName = "EmojiIcon";
|
|
69
|
+
exports.EmojiIcon = EmojiIcon;
|
|
70
|
+
//# sourceMappingURL=EmojiIcon.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmojiIcon.cjs","sources":["../../../../src/components/Icons/EmojiIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const EmojiIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ className, ...props }, ref) => {\n return (\n <svg\n ref={ref}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n className={cn(\"size-6\", className)}\n {...props}\n >\n <path\n d=\"M11.97 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M8.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM15.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M7.21 16A5.831 5.831 0 0 0 12 18.5c1.98 0 3.73-.99 4.79-2.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n },\n);\n\nEmojiIcon.displayName = \"EmojiIcon\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAIO,MAAM,YAAYA,iBAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAWC,GAAAA,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjBA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEPA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,UAAU,cAAc;;"}
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const jsxRuntime = require("react/jsx-runtime");
|
|
5
5
|
const React = require("react");
|
|
6
|
-
const EyeClosedIcon = require("../Icons/EyeClosedIcon.cjs");
|
|
7
6
|
const EyeIcon = require("../Icons/EyeIcon.cjs");
|
|
7
|
+
const EyeSlashIcon = require("../Icons/EyeSlashIcon.cjs");
|
|
8
8
|
const TextField = require("../TextField/TextField.cjs");
|
|
9
9
|
function _interopNamespaceDefault(e) {
|
|
10
10
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
@@ -38,7 +38,7 @@ const PasswordField = React__namespace.forwardRef(
|
|
|
38
38
|
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
39
39
|
tabIndex: -1,
|
|
40
40
|
className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed",
|
|
41
|
-
children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(EyeSlashIcon.EyeSlashIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(EyeIcon.EyeIcon, {})
|
|
42
42
|
}
|
|
43
43
|
);
|
|
44
44
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordField.cjs","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"PasswordField.cjs","sources":["../../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { EyeSlashIcon } from \"../Icons/EyeSlashIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n /** Size variant of the password field */\n size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n ({ disabled, ...props }, ref) => {\n const [showPassword, setShowPassword] = React.useState(false);\n\n const togglePasswordVisibility = () => {\n setShowPassword((prev) => !prev);\n };\n\n const rightIcon = (\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n disabled={disabled}\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n tabIndex={-1}\n className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed\"\n >\n {showPassword ? <EyeSlashIcon /> : <EyeIcon />}\n </button>\n );\n\n return (\n <TextField\n ref={ref}\n type={showPassword ? \"text\" : \"password\"}\n disabled={disabled}\n rightIcon={rightIcon}\n aria-label={!props.label ? \"Password field\" : undefined}\n {...props}\n />\n );\n },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":["React","jsx","EyeSlashIcon","EyeIcon","TextField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,gBAAgBA,iBAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAeA,+BAACC,aAAAA,cAAA,CAAA,CAAa,mCAAMC,QAAAA,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIhD,WACEF,2BAAAA;AAAAA,MAACG,UAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;;"}
|
|
@@ -39,6 +39,13 @@ function getDefaultTextColor(value) {
|
|
|
39
39
|
if (value >= 40) return "text-warning-default";
|
|
40
40
|
return "text-error-default";
|
|
41
41
|
}
|
|
42
|
+
function resolveColors(variant, value) {
|
|
43
|
+
if (variant === "neutral")
|
|
44
|
+
return { barColor: "bg-foreground-inverse", textColor: "text-foreground-inverse" };
|
|
45
|
+
if (variant === "generic")
|
|
46
|
+
return { barColor: "bg-brand-accent-default", textColor: "text-brand-accent-default" };
|
|
47
|
+
return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };
|
|
48
|
+
}
|
|
42
49
|
const ProgressBar = React__namespace.forwardRef(
|
|
43
50
|
({
|
|
44
51
|
value,
|
|
@@ -55,10 +62,8 @@ const ProgressBar = React__namespace.forwardRef(
|
|
|
55
62
|
...props
|
|
56
63
|
}, ref) => {
|
|
57
64
|
const clampedValue = Math.min(100, Math.max(0, value));
|
|
58
|
-
const isGeneric = variant === "generic";
|
|
59
65
|
const isSmall = size === "small";
|
|
60
|
-
const barColor
|
|
61
|
-
const textColor = isGeneric ? "text-brand-accent-default" : getDefaultTextColor(clampedValue);
|
|
66
|
+
const { barColor, textColor } = resolveColors(variant, clampedValue);
|
|
62
67
|
const showHeader = title != null || showCompletion || stepsLabel != null;
|
|
63
68
|
const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
|
|
64
69
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn.cn("flex w-full flex-col", GAP[size], className), ...props, children: [
|
|
@@ -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/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green. */\nexport type ProgressBarVariant = \"default\" | \"generic\";\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 — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green. @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}\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-default\";\n if (value >= 40) return \"bg-warning-default\";\n return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-default\";\n if (value >= 40) return \"text-warning-default\";\n return \"text-error-default\";\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 className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const
|
|
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/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. */\nexport type ProgressBarVariant = \"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 — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @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}\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-default\";\n if (value >= 40) return \"bg-warning-default\";\n return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-default\";\n if (value >= 40) return \"text-warning-default\";\n return \"text-error-default\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string } {\n if (variant === \"neutral\")\n return { barColor: \"bg-foreground-inverse\", textColor: \"text-foreground-inverse\" };\n if (variant === \"generic\")\n return { barColor: \"bg-brand-accent-default\", textColor: \"text-brand-accent-default\" };\n return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\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 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 } = 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-semibold-body-sm text-foreground-default\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-bold-heading-sm\" : \"typography-bold-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\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 className={cn(\"relative w-full rounded-full bg-neutral-100\", 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-regular-body-sm text-foreground-default\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\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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"}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -52,6 +52,7 @@ const DonateIcon = require("./components/Icons/DonateIcon.cjs");
|
|
|
52
52
|
const DoubleTickIcon = require("./components/Icons/DoubleTickIcon.cjs");
|
|
53
53
|
const DownloadIcon = require("./components/Icons/DownloadIcon.cjs");
|
|
54
54
|
const EditIcon = require("./components/Icons/EditIcon.cjs");
|
|
55
|
+
const EmojiIcon = require("./components/Icons/EmojiIcon.cjs");
|
|
55
56
|
const ErrorCircleIcon = require("./components/Icons/ErrorCircleIcon.cjs");
|
|
56
57
|
const ErrorIcon = require("./components/Icons/ErrorIcon.cjs");
|
|
57
58
|
const ExpandIcon = require("./components/Icons/ExpandIcon.cjs");
|
|
@@ -220,6 +221,7 @@ exports.DonateIcon = DonateIcon.DonateIcon;
|
|
|
220
221
|
exports.DoubleTickIcon = DoubleTickIcon.DoubleTickIcon;
|
|
221
222
|
exports.DownloadIcon = DownloadIcon.DownloadIcon;
|
|
222
223
|
exports.EditIcon = EditIcon.EditIcon;
|
|
224
|
+
exports.EmojiIcon = EmojiIcon.EmojiIcon;
|
|
223
225
|
exports.ErrorCircleIcon = ErrorCircleIcon.ErrorCircleIcon;
|
|
224
226
|
exports.ErrorIcon = ErrorIcon.ErrorIcon;
|
|
225
227
|
exports.ExpandIcon = ExpandIcon.ExpandIcon;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "../../utils/cn.mjs";
|
|
5
|
+
const EmojiIcon = React.forwardRef(
|
|
6
|
+
({ className, ...props }, ref) => {
|
|
7
|
+
return /* @__PURE__ */ jsxs(
|
|
8
|
+
"svg",
|
|
9
|
+
{
|
|
10
|
+
ref,
|
|
11
|
+
viewBox: "0 0 24 24",
|
|
12
|
+
fill: "none",
|
|
13
|
+
"aria-hidden": "true",
|
|
14
|
+
className: cn("size-6", className),
|
|
15
|
+
...props,
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ jsx(
|
|
18
|
+
"path",
|
|
19
|
+
{
|
|
20
|
+
d: "M11.97 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z",
|
|
21
|
+
stroke: "currentColor",
|
|
22
|
+
strokeWidth: "1.5",
|
|
23
|
+
strokeLinecap: "round",
|
|
24
|
+
strokeLinejoin: "round"
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
/* @__PURE__ */ jsx(
|
|
28
|
+
"path",
|
|
29
|
+
{
|
|
30
|
+
d: "M8.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM15.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ jsx(
|
|
35
|
+
"path",
|
|
36
|
+
{
|
|
37
|
+
d: "M7.21 16A5.831 5.831 0 0 0 12 18.5c1.98 0 3.73-.99 4.79-2.5",
|
|
38
|
+
stroke: "currentColor",
|
|
39
|
+
strokeWidth: "1.5",
|
|
40
|
+
strokeLinecap: "round",
|
|
41
|
+
strokeLinejoin: "round"
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
EmojiIcon.displayName = "EmojiIcon";
|
|
50
|
+
export {
|
|
51
|
+
EmojiIcon
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=EmojiIcon.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EmojiIcon.mjs","sources":["../../../src/components/Icons/EmojiIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport type { IconProps } from \"./types\";\n\nexport const EmojiIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ className, ...props }, ref) => {\n return (\n <svg\n ref={ref}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n className={cn(\"size-6\", className)}\n {...props}\n >\n <path\n d=\"M11.97 22c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M8.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM15.5 10.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z\"\n fill=\"currentColor\"\n />\n <path\n d=\"M7.21 16A5.831 5.831 0 0 0 12 18.5c1.98 0 3.73-.99 4.79-2.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n );\n },\n);\n\nEmojiIcon.displayName = \"EmojiIcon\";\n"],"names":[],"mappings":";;;;AAIO,MAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,WAAW,GAAG,UAAU,SAAS;AAAA,QAChC,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAEP;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,UAAU,cAAc;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import { EyeClosedIcon } from "../Icons/EyeClosedIcon.mjs";
|
|
5
4
|
import { EyeIcon } from "../Icons/EyeIcon.mjs";
|
|
5
|
+
import { EyeSlashIcon } from "../Icons/EyeSlashIcon.mjs";
|
|
6
6
|
import { TextField } from "../TextField/TextField.mjs";
|
|
7
7
|
const PasswordField = React.forwardRef(
|
|
8
8
|
({ disabled, ...props }, ref) => {
|
|
@@ -19,7 +19,7 @@ const PasswordField = React.forwardRef(
|
|
|
19
19
|
"aria-label": showPassword ? "Hide password" : "Show password",
|
|
20
20
|
tabIndex: -1,
|
|
21
21
|
className: "flex size-5 shrink-0 items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed",
|
|
22
|
-
children: showPassword ? /* @__PURE__ */ jsx(
|
|
22
|
+
children: showPassword ? /* @__PURE__ */ jsx(EyeSlashIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
|
|
23
23
|
}
|
|
24
24
|
);
|
|
25
25
|
return /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordField.mjs","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"PasswordField.mjs","sources":["../../../src/components/PasswordField/PasswordField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { EyeIcon } from \"../Icons/EyeIcon\";\nimport { EyeSlashIcon } from \"../Icons/EyeSlashIcon\";\nimport { TextField, type TextFieldProps } from \"../TextField/TextField\";\n\nexport type PasswordFieldSize = \"48\" | \"40\" | \"32\";\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, \"type\" | \"rightIcon\"> {\n /** Size variant of the password field */\n size?: PasswordFieldSize;\n}\n\nexport const PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(\n ({ disabled, ...props }, ref) => {\n const [showPassword, setShowPassword] = React.useState(false);\n\n const togglePasswordVisibility = () => {\n setShowPassword((prev) => !prev);\n };\n\n const rightIcon = (\n <button\n type=\"button\"\n onClick={togglePasswordVisibility}\n disabled={disabled}\n aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n tabIndex={-1}\n className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary transition-colors hover:text-foreground-default focus:outline-none disabled:cursor-not-allowed\"\n >\n {showPassword ? <EyeSlashIcon /> : <EyeIcon />}\n </button>\n );\n\n return (\n <TextField\n ref={ref}\n type={showPassword ? \"text\" : \"password\"}\n disabled={disabled}\n rightIcon={rightIcon}\n aria-label={!props.label ? \"Password field\" : undefined}\n {...props}\n />\n );\n },\n);\n\nPasswordField.displayName = \"PasswordField\";\n"],"names":[],"mappings":";;;;;;AAYO,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/B,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,UAAM,2BAA2B,MAAM;AACrC,sBAAgB,CAAC,SAAS,CAAC,IAAI;AAAA,IACjC;AAEA,UAAM,YACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,cAAY,eAAe,kBAAkB;AAAA,QAC7C,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAA,eAAe,oBAAC,cAAA,CAAA,CAAa,wBAAM,SAAA,CAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAIhD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,eAAe,SAAS;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,cAAY,CAAC,MAAM,QAAQ,mBAAmB;AAAA,QAC7C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,cAAc,cAAc;"}
|
|
@@ -20,6 +20,13 @@ function getDefaultTextColor(value) {
|
|
|
20
20
|
if (value >= 40) return "text-warning-default";
|
|
21
21
|
return "text-error-default";
|
|
22
22
|
}
|
|
23
|
+
function resolveColors(variant, value) {
|
|
24
|
+
if (variant === "neutral")
|
|
25
|
+
return { barColor: "bg-foreground-inverse", textColor: "text-foreground-inverse" };
|
|
26
|
+
if (variant === "generic")
|
|
27
|
+
return { barColor: "bg-brand-accent-default", textColor: "text-brand-accent-default" };
|
|
28
|
+
return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };
|
|
29
|
+
}
|
|
23
30
|
const ProgressBar = React.forwardRef(
|
|
24
31
|
({
|
|
25
32
|
value,
|
|
@@ -36,10 +43,8 @@ const ProgressBar = React.forwardRef(
|
|
|
36
43
|
...props
|
|
37
44
|
}, ref) => {
|
|
38
45
|
const clampedValue = Math.min(100, Math.max(0, value));
|
|
39
|
-
const isGeneric = variant === "generic";
|
|
40
46
|
const isSmall = size === "small";
|
|
41
|
-
const barColor
|
|
42
|
-
const textColor = isGeneric ? "text-brand-accent-default" : getDefaultTextColor(clampedValue);
|
|
47
|
+
const { barColor, textColor } = resolveColors(variant, clampedValue);
|
|
43
48
|
const showHeader = title != null || showCompletion || stepsLabel != null;
|
|
44
49
|
const showFooter = leftIcon != null || helperLeft != null || helperRight != null;
|
|
45
50
|
return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex w-full flex-col", GAP[size], className), ...props, children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.mjs","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/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green. */\nexport type ProgressBarVariant = \"default\" | \"generic\";\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 — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green. @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}\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-default\";\n if (value >= 40) return \"bg-warning-default\";\n return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-default\";\n if (value >= 40) return \"text-warning-default\";\n return \"text-error-default\";\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 className,\n ...props\n },\n ref,\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const
|
|
1
|
+
{"version":3,"file":"ProgressBar.mjs","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/** Colour mode — `\"default\"` uses red/yellow/green by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. */\nexport type ProgressBarVariant = \"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 — `\"default\"` is colour-coded by value, `\"generic\"` always uses brand green, `\"neutral\"` uses a theme-aware inverse colour. @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}\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-default\";\n if (value >= 40) return \"bg-warning-default\";\n return \"bg-error-default\";\n}\n\nfunction getDefaultTextColor(value: number): string {\n if (value >= 100) return \"text-success-default\";\n if (value >= 40) return \"text-warning-default\";\n return \"text-error-default\";\n}\n\nfunction resolveColors(\n variant: ProgressBarVariant,\n value: number,\n): { barColor: string; textColor: string } {\n if (variant === \"neutral\")\n return { barColor: \"bg-foreground-inverse\", textColor: \"text-foreground-inverse\" };\n if (variant === \"generic\")\n return { barColor: \"bg-brand-accent-default\", textColor: \"text-brand-accent-default\" };\n return { barColor: getDefaultBarColor(value), textColor: getDefaultTextColor(value) };\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 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 } = 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-semibold-body-sm text-foreground-default\">{title}</p>\n )}\n {showCompletion && (\n <span\n className={cn(\n textColor,\n isSmall ? \"typography-bold-heading-sm\" : \"typography-bold-heading-xl\",\n )}\n >\n {Math.round(clampedValue)}%\n </span>\n )}\n {stepsLabel != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\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 className={cn(\"relative w-full rounded-full bg-neutral-100\", 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-regular-body-sm text-foreground-default\">\n {helperLeft}\n </span>\n )}\n </div>\n {helperRight != null && (\n <span className=\"typography-regular-body-sm text-foreground-default\">\n {helperRight}\n </span>\n )}\n </div>\n )}\n </div>\n );\n },\n);\n\nProgressBar.displayName = \"ProgressBar\";\n"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -658,6 +658,10 @@ export declare const EditIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttr
|
|
|
658
658
|
className?: string;
|
|
659
659
|
} & React_2.RefAttributes<SVGSVGElement>>;
|
|
660
660
|
|
|
661
|
+
export declare const EmojiIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
|
|
662
|
+
className?: string;
|
|
663
|
+
} & React_2.RefAttributes<SVGSVGElement>>;
|
|
664
|
+
|
|
661
665
|
/** An "×" inside a filled circle icon for error states (20 × 20). */
|
|
662
666
|
export declare const ErrorCircleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
|
|
663
667
|
className?: string;
|
|
@@ -1032,7 +1036,7 @@ export declare interface ProgressBarProps extends Omit<React_2.HTMLAttributes<HT
|
|
|
1032
1036
|
value: number;
|
|
1033
1037
|
/** Track height — `"default"` (12px) or `"small"` (6px). @default "default" */
|
|
1034
1038
|
size?: ProgressBarSize;
|
|
1035
|
-
/** Colour mode — `"default"` is colour-coded by value, `"generic"` always uses brand green. @default "default" */
|
|
1039
|
+
/** Colour mode — `"default"` is colour-coded by value, `"generic"` always uses brand green, `"neutral"` uses a theme-aware inverse colour. @default "default" */
|
|
1036
1040
|
variant?: ProgressBarVariant;
|
|
1037
1041
|
/** Title content shown at the top-left of the bar. */
|
|
1038
1042
|
title?: React_2.ReactNode;
|
|
@@ -1053,8 +1057,8 @@ export declare interface ProgressBarProps extends Omit<React_2.HTMLAttributes<HT
|
|
|
1053
1057
|
/** Track height — `"default"` (12px) or `"small"` (6px). */
|
|
1054
1058
|
export declare type ProgressBarSize = "default" | "small";
|
|
1055
1059
|
|
|
1056
|
-
/** Colour mode — `"default"` uses red/yellow/green by value, `"generic"` always uses brand green. */
|
|
1057
|
-
export declare type ProgressBarVariant = "default" | "generic";
|
|
1060
|
+
/** Colour mode — `"default"` uses red/yellow/green by value, `"generic"` always uses brand green, `"neutral"` uses a theme-aware inverse colour. */
|
|
1061
|
+
export declare type ProgressBarVariant = "default" | "generic" | "neutral";
|
|
1058
1062
|
|
|
1059
1063
|
/**
|
|
1060
1064
|
* A single radio option within a {@link RadioGroup}. Includes an optional label
|
package/dist/index.mjs
CHANGED
|
@@ -50,6 +50,7 @@ import { DonateIcon } from "./components/Icons/DonateIcon.mjs";
|
|
|
50
50
|
import { DoubleTickIcon } from "./components/Icons/DoubleTickIcon.mjs";
|
|
51
51
|
import { DownloadIcon } from "./components/Icons/DownloadIcon.mjs";
|
|
52
52
|
import { EditIcon } from "./components/Icons/EditIcon.mjs";
|
|
53
|
+
import { EmojiIcon } from "./components/Icons/EmojiIcon.mjs";
|
|
53
54
|
import { ErrorCircleIcon } from "./components/Icons/ErrorCircleIcon.mjs";
|
|
54
55
|
import { ErrorIcon } from "./components/Icons/ErrorIcon.mjs";
|
|
55
56
|
import { ExpandIcon } from "./components/Icons/ExpandIcon.mjs";
|
|
@@ -217,6 +218,7 @@ export {
|
|
|
217
218
|
DoubleTickIcon,
|
|
218
219
|
DownloadIcon,
|
|
219
220
|
EditIcon,
|
|
221
|
+
EmojiIcon,
|
|
220
222
|
ErrorCircleIcon,
|
|
221
223
|
ErrorIcon,
|
|
222
224
|
ExpandIcon,
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|