@lax-wp/design-system 0.13.36 → 0.13.37
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/components/forms/link-input/LinkInputField.cjs.js +1 -1
- package/dist/components/forms/link-input/LinkInputField.cjs.js.map +1 -1
- package/dist/components/forms/link-input/LinkInputField.d.ts +7 -40
- package/dist/components/forms/link-input/LinkInputField.es.js +104 -93
- package/dist/components/forms/link-input/LinkInputField.es.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../_virtual/index.cjs.js"),R=require("react-i18next"),j=require("../base-input-field/BaseInputField.cjs.js"),t=require("../../icon/icons.generated.cjs.js"),N="[&_input]:!border-0 [&_input]:!shadow-none [&_input]:!rounded-none [&_input]:!bg-transparent [&_input]:!h-8 [&_input]:!pl-1",W=({urlId:f,urlValue:n,onUrlChange:E,urlPlaceholder:l,urlError:i,urlClassName:y,onUrlBlur:S,aliasId:I,aliasValue:a,onAliasChange:w,aliasPlaceholder:x,aliasError:c,aliasClassName:A,aliasFixedWidth:C,disabled:h=!1,label:m,labelExtra:u,withBorder:r=!1,readOnly:_=!1,inputEmphasis:D="default"})=>{const{t:p}=R.useTranslation(),q=l===void 0?p("Enter URL"):l,B=x===void 0?p("Enter Alias"):x,d=!!i||!!c,s=d?"default":D,b=s==="modified",g=s==="deleted",k=s==="success",F=b||g||k,v=(m||u)&&e.jsxs("div",{className:"flex items-center gap-1",children:[m,u]});if(_)return e.jsxs("div",{className:"w-full",children:[v,e.jsxs("div",{className:"flex items-center gap-2 min-h-9",children:[e.jsx(t.KeychainIcon,{className:"text-black-300 shrink-0 w-icon h-icon"}),n?e.jsxs(e.Fragment,{children:[e.jsx("a",{href:n,target:"_blank",rel:"noopener noreferrer",className:"text-primary-600 dark:text-primary-400 hover:underline text-sm truncate",children:a||n}),a&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0"}),e.jsx(t.MentionIcon,{className:"text-black-300 shrink-0 w-icon h-icon"}),e.jsx("span",{className:"text-neutral-500 dark:text-neutral-400 text-sm shrink-0",children:a})]})]}):e.jsx("span",{className:"text-neutral-400 dark:text-neutral-600 text-sm",children:"—"})]})]});const M=e.jsxs("div",{className:o("flex items-center h-9 overflow-hidden",{"border rounded-lg bg-white dark:bg-black-700":r&&!F,"border-error-500":r&&d,"border-gray-300 dark:border-black-500":r&&!d&&!F,"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]":r&&b,"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)]":r&&g,"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)]":r&&k}),children:[e.jsx(t.KeychainIcon,{className:"ml-2 text-black-300 shrink-0 w-icon h-icon"}),e.jsx("div",{className:o("min-w-0 flex-1",N),children:e.jsx(j.BaseInputField,{id:f,originalCase:!0,type:"url",value:n,onChange:E,placeholder:q,disabled:h,onBlur:S,className:y,inputEmphasis:s})}),e.jsx("div",{className:"h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0"}),e.jsx(t.MentionIcon,{className:"ml-2 text-black-300 shrink-0 w-icon h-icon",size:18}),e.jsx("div",{className:o("shrink-0",N,C),children:e.jsx(j.BaseInputField,{id:I,originalCase:!0,type:"text",value:a,onChange:w,placeholder:B,disabled:h,className:A,inputEmphasis:s})})]});return e.jsxs("div",{className:"w-full",children:[v,M,i&&e.jsx("p",{className:"text-error-500 text-xs mt-1",children:i}),c&&e.jsx("p",{className:"text-error-500 text-xs mt-1",children:c})]})};exports.LinkInputField=W;
|
|
2
2
|
//# sourceMappingURL=LinkInputField.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkInputField.cjs.js","sources":["../../../../src/components/forms/link-input/LinkInputField.tsx"],"sourcesContent":["import cn from
|
|
1
|
+
{"version":3,"file":"LinkInputField.cjs.js","sources":["../../../../src/components/forms/link-input/LinkInputField.tsx"],"sourcesContent":["import cn from 'classnames';\nimport type { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BaseInputField, type BaseInputFieldEmphasis } from '../base-input-field/BaseInputField';\nimport { KeychainIcon, MentionIcon } from '../../icon';\n\ninterface ILinkInputFieldProps {\n // URL input\n urlId?: string;\n urlValue: string;\n onUrlChange: (value: string) => void;\n urlPlaceholder?: string | null;\n urlError?: string;\n urlClassName?: string;\n onUrlBlur?: () => void;\n\n // Alias input\n aliasId?: string;\n aliasValue: string;\n onAliasChange: (value: string) => void;\n aliasPlaceholder?: string | null;\n aliasError?: string;\n aliasClassName?: string;\n // Pass e.g. 'w-[140px]' for a fixed-width alias column; omit for natural width\n aliasFixedWidth?: string;\n\n disabled?: boolean;\n // Optional label rendered above the input row\n label?: ReactNode;\n // Optional extra content rendered next to the label (e.g. actions, badges)\n labelExtra?: ReactNode;\n // Wrap the edit row in a bordered container (for standalone field usage)\n withBorder?: boolean;\n // Render a read-only link view instead of inputs (when the field is disabled and anchors are preferred)\n readOnly?: boolean;\n // Input surface style, mirrors BaseInputField's inputEmphasis\n inputEmphasis?: BaseInputFieldEmphasis;\n}\n\nconst inputOverrides =\n '[&_input]:!border-0 [&_input]:!shadow-none [&_input]:!rounded-none [&_input]:!bg-transparent [&_input]:!h-8 [&_input]:!pl-1';\n\nexport const LinkInputField = ({\n urlId,\n urlValue,\n onUrlChange,\n urlPlaceholder,\n urlError,\n urlClassName,\n onUrlBlur,\n aliasId,\n aliasValue,\n onAliasChange,\n aliasPlaceholder,\n aliasError,\n aliasClassName,\n aliasFixedWidth,\n disabled = false,\n label,\n labelExtra,\n withBorder = false,\n readOnly = false,\n inputEmphasis = 'default',\n}: ILinkInputFieldProps) => {\n const { t } = useTranslation();\n\n const resolvedUrlPlaceholder = urlPlaceholder === undefined ? t('Enter URL') : urlPlaceholder;\n const resolvedAliasPlaceholder = aliasPlaceholder === undefined ? t('Enter Alias') : aliasPlaceholder;\n const hasAnyError = !!urlError || !!aliasError;\n const resolvedEmphasis = hasAnyError ? 'default' : inputEmphasis;\n const emphasisModifiedSkin = resolvedEmphasis === 'modified';\n const emphasisDeletedSkin = resolvedEmphasis === 'deleted';\n const emphasisSuccessSkin = resolvedEmphasis === 'success';\n const hasEmphasisSkin = emphasisModifiedSkin || emphasisDeletedSkin || emphasisSuccessSkin;\n\n const labelRow = (label || labelExtra) && (\n <div className='flex items-center gap-1'>\n {label}\n {labelExtra}\n </div>\n );\n\n if (readOnly) {\n return (\n <div className='w-full'>\n {labelRow}\n <div className='flex items-center gap-2 min-h-9'>\n <KeychainIcon className='text-black-300 shrink-0 w-icon h-icon' />\n {urlValue ? (\n <>\n <a\n href={urlValue}\n target='_blank'\n rel='noopener noreferrer'\n className='text-primary-600 dark:text-primary-400 hover:underline text-sm truncate'\n >\n {aliasValue || urlValue}\n </a>\n {aliasValue && (\n <>\n <div className='h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0' />\n <MentionIcon className='text-black-300 shrink-0 w-icon h-icon' />\n <span className='text-neutral-500 dark:text-neutral-400 text-sm shrink-0'>{aliasValue}</span>\n </>\n )}\n </>\n ) : (\n <span className='text-neutral-400 dark:text-neutral-600 text-sm'>—</span>\n )}\n </div>\n </div>\n );\n }\n\n const editRow = (\n <div\n className={cn('flex items-center h-9 overflow-hidden', {\n 'border rounded-lg bg-white dark:bg-black-700': withBorder && !hasEmphasisSkin,\n 'border-error-500': withBorder && hasAnyError,\n 'border-gray-300 dark:border-black-500': withBorder && !hasAnyError && !hasEmphasisSkin,\n 'rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]':\n withBorder && emphasisModifiedSkin,\n 'rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)]':\n withBorder && emphasisDeletedSkin,\n 'rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)]':\n withBorder && emphasisSuccessSkin,\n })}\n >\n <KeychainIcon className='ml-2 text-black-300 shrink-0 w-icon h-icon' />\n <div className={cn('min-w-0 flex-1', inputOverrides)}>\n <BaseInputField\n id={urlId}\n originalCase\n type='url'\n value={urlValue}\n onChange={onUrlChange}\n placeholder={resolvedUrlPlaceholder}\n disabled={disabled}\n onBlur={onUrlBlur}\n className={urlClassName}\n inputEmphasis={resolvedEmphasis}\n />\n </div>\n <div className='h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0' />\n <MentionIcon className='ml-2 text-black-300 shrink-0 w-icon h-icon' size={18} />\n <div className={cn('shrink-0', inputOverrides, aliasFixedWidth)}>\n <BaseInputField\n id={aliasId}\n originalCase\n type='text'\n value={aliasValue}\n onChange={onAliasChange}\n placeholder={resolvedAliasPlaceholder}\n disabled={disabled}\n className={aliasClassName}\n inputEmphasis={resolvedEmphasis}\n />\n </div>\n </div>\n );\n\n return (\n <div className='w-full'>\n {labelRow}\n {editRow}\n {urlError && <p className='text-error-500 text-xs mt-1'>{urlError}</p>}\n {aliasError && <p className='text-error-500 text-xs mt-1'>{aliasError}</p>}\n </div>\n );\n};\n"],"names":["inputOverrides","LinkInputField","urlId","urlValue","onUrlChange","urlPlaceholder","urlError","urlClassName","onUrlBlur","aliasId","aliasValue","onAliasChange","aliasPlaceholder","aliasError","aliasClassName","aliasFixedWidth","disabled","label","labelExtra","withBorder","readOnly","inputEmphasis","t","useTranslation","resolvedUrlPlaceholder","resolvedAliasPlaceholder","hasAnyError","resolvedEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","hasEmphasisSkin","labelRow","jsxs","jsx","KeychainIcon","Fragment","MentionIcon","editRow","cn","BaseInputField"],"mappings":"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"}
|
|
@@ -1,59 +1,26 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type BaseInputFieldEmphasis } from '../base-input-field/BaseInputField';
|
|
3
|
+
interface ILinkInputFieldProps {
|
|
4
4
|
urlId?: string;
|
|
5
|
-
/** Current URL value */
|
|
6
5
|
urlValue: string;
|
|
7
|
-
/** Callback fired when the URL value changes */
|
|
8
6
|
onUrlChange: (value: string) => void;
|
|
9
|
-
/** Placeholder text for the URL input */
|
|
10
7
|
urlPlaceholder?: string | null;
|
|
11
|
-
/** Error message for the URL input */
|
|
12
8
|
urlError?: string;
|
|
13
|
-
/** Additional CSS classes for the URL input wrapper */
|
|
14
9
|
urlClassName?: string;
|
|
15
|
-
/** Callback fired when the URL input loses focus */
|
|
16
10
|
onUrlBlur?: () => void;
|
|
17
|
-
/** Unique identifier for the alias input */
|
|
18
11
|
aliasId?: string;
|
|
19
|
-
/** Current alias value */
|
|
20
12
|
aliasValue: string;
|
|
21
|
-
/** Callback fired when the alias value changes */
|
|
22
13
|
onAliasChange: (value: string) => void;
|
|
23
|
-
/** Placeholder text for the alias input */
|
|
24
14
|
aliasPlaceholder?: string | null;
|
|
25
|
-
/** Error message for the alias input */
|
|
26
15
|
aliasError?: string;
|
|
27
|
-
/** Additional CSS classes for the alias input wrapper */
|
|
28
16
|
aliasClassName?: string;
|
|
29
|
-
/** Tailwind width class for the alias column e.g. `'w-[140px]'`. Omit for natural width. */
|
|
30
17
|
aliasFixedWidth?: string;
|
|
31
|
-
/** Whether both inputs are disabled */
|
|
32
18
|
disabled?: boolean;
|
|
33
|
-
/** Optional label rendered above the input row */
|
|
34
19
|
label?: ReactNode;
|
|
35
|
-
|
|
20
|
+
labelExtra?: ReactNode;
|
|
36
21
|
withBorder?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Render a read-only link view instead of inputs.
|
|
39
|
-
* Use when the field is disabled and anchor links are preferred over inputs.
|
|
40
|
-
*/
|
|
41
22
|
readOnly?: boolean;
|
|
23
|
+
inputEmphasis?: BaseInputFieldEmphasis;
|
|
42
24
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
* Supports a read-only anchor-link view, optional label, error messages per sub-field,
|
|
46
|
-
* and a fixed-width alias column.
|
|
47
|
-
*
|
|
48
|
-
* @example
|
|
49
|
-
* ```tsx
|
|
50
|
-
* <LinkInputField
|
|
51
|
-
* urlValue={url}
|
|
52
|
-
* onUrlChange={setUrl}
|
|
53
|
-
* aliasValue={alias}
|
|
54
|
-
* onAliasChange={setAlias}
|
|
55
|
-
* withBorder
|
|
56
|
-
* />
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
|
-
export declare const LinkInputField: FC<LinkInputFieldProps>;
|
|
25
|
+
export declare const LinkInputField: ({ urlId, urlValue, onUrlChange, urlPlaceholder, urlError, urlClassName, onUrlBlur, aliasId, aliasValue, onAliasChange, aliasPlaceholder, aliasError, aliasClassName, aliasFixedWidth, disabled, label, labelExtra, withBorder, readOnly, inputEmphasis, }: ILinkInputFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -1,102 +1,113 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import "react";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
aliasId: y,
|
|
1
|
+
import { jsxs as r, jsx as e, Fragment as f } from "react/jsx-runtime";
|
|
2
|
+
import c from "../../../_virtual/index.es.js";
|
|
3
|
+
import { useTranslation as z } from "react-i18next";
|
|
4
|
+
import { BaseInputField as N } from "../base-input-field/BaseInputField.es.js";
|
|
5
|
+
import { KeychainIcon as E, MentionIcon as w } from "../../icon/icons.generated.es.js";
|
|
6
|
+
const y = "[&_input]:!border-0 [&_input]:!shadow-none [&_input]:!rounded-none [&_input]:!bg-transparent [&_input]:!h-8 [&_input]:!pl-1", H = ({
|
|
7
|
+
urlId: A,
|
|
8
|
+
urlValue: a,
|
|
9
|
+
onUrlChange: S,
|
|
10
|
+
urlPlaceholder: l,
|
|
11
|
+
urlError: i,
|
|
12
|
+
urlClassName: C,
|
|
13
|
+
onUrlBlur: D,
|
|
14
|
+
aliasId: _,
|
|
16
15
|
aliasValue: t,
|
|
17
|
-
onAliasChange:
|
|
18
|
-
aliasPlaceholder:
|
|
19
|
-
aliasError:
|
|
20
|
-
aliasClassName:
|
|
21
|
-
aliasFixedWidth:
|
|
22
|
-
disabled:
|
|
23
|
-
label:
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
onAliasChange: I,
|
|
17
|
+
aliasPlaceholder: m,
|
|
18
|
+
aliasError: d,
|
|
19
|
+
aliasClassName: W,
|
|
20
|
+
aliasFixedWidth: B,
|
|
21
|
+
disabled: h = !1,
|
|
22
|
+
label: p,
|
|
23
|
+
labelExtra: b,
|
|
24
|
+
withBorder: n = !1,
|
|
25
|
+
readOnly: R = !1,
|
|
26
|
+
inputEmphasis: j = "default"
|
|
26
27
|
}) => {
|
|
27
|
-
const { t:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
className: "text-primary-600 dark:text-primary-400 hover:underline text-sm truncate",
|
|
40
|
-
children: t || r
|
|
41
|
-
}
|
|
42
|
-
),
|
|
43
|
-
t ? /* @__PURE__ */ n(x, { children: [
|
|
44
|
-
/* @__PURE__ */ e("div", { className: "h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0" }),
|
|
45
|
-
/* @__PURE__ */ e(g, { className: "text-black-300 shrink-0 w-icon h-icon" }),
|
|
46
|
-
/* @__PURE__ */ e("span", { className: "text-neutral-500 dark:text-neutral-400 text-sm shrink-0", children: t })
|
|
47
|
-
] }) : null
|
|
48
|
-
] }) : /* @__PURE__ */ e("span", { className: "text-neutral-400 dark:text-neutral-600 text-sm", children: "—" })
|
|
49
|
-
] })
|
|
50
|
-
] }) : /* @__PURE__ */ n("div", { className: "w-full", children: [
|
|
51
|
-
m,
|
|
52
|
-
/* @__PURE__ */ n(
|
|
53
|
-
"div",
|
|
54
|
-
{
|
|
55
|
-
className: l("flex items-center h-9 overflow-hidden", {
|
|
56
|
-
"border rounded-lg bg-white dark:bg-black-700": i,
|
|
57
|
-
"border-error-500": i && p,
|
|
58
|
-
"border-gray-300 dark:border-black-500": i && !p
|
|
59
|
-
}),
|
|
60
|
-
children: [
|
|
61
|
-
/* @__PURE__ */ e(u, { className: "ml-2 text-black-300 shrink-0 w-icon h-icon" }),
|
|
62
|
-
/* @__PURE__ */ e("div", { className: l("min-w-0 flex-1", f, v), children: /* @__PURE__ */ e(
|
|
63
|
-
k,
|
|
64
|
-
{
|
|
65
|
-
id: N,
|
|
66
|
-
originalCase: !0,
|
|
67
|
-
type: "url",
|
|
68
|
-
value: r,
|
|
69
|
-
onChange: b,
|
|
70
|
-
placeholder: A ?? "",
|
|
71
|
-
disabled: d,
|
|
72
|
-
onBlur: w,
|
|
73
|
-
errorMessage: ""
|
|
74
|
-
}
|
|
75
|
-
) }),
|
|
76
|
-
/* @__PURE__ */ e("div", { className: "h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0" }),
|
|
77
|
-
/* @__PURE__ */ e(g, { className: "ml-2 text-black-300 shrink-0 w-icon h-icon" }),
|
|
78
|
-
/* @__PURE__ */ e("div", { className: l("shrink-0", f, C, I), children: /* @__PURE__ */ e(
|
|
79
|
-
k,
|
|
28
|
+
const { t: k } = z(), L = l === void 0 ? k("Enter URL") : l, M = m === void 0 ? k("Enter Alias") : m, o = !!i || !!d, s = o ? "default" : j, g = s === "modified", u = s === "deleted", v = s === "success", F = g || u || v, x = (p || b) && /* @__PURE__ */ r("div", { className: "flex items-center gap-1", children: [
|
|
29
|
+
p,
|
|
30
|
+
b
|
|
31
|
+
] });
|
|
32
|
+
if (R)
|
|
33
|
+
return /* @__PURE__ */ r("div", { className: "w-full", children: [
|
|
34
|
+
x,
|
|
35
|
+
/* @__PURE__ */ r("div", { className: "flex items-center gap-2 min-h-9", children: [
|
|
36
|
+
/* @__PURE__ */ e(E, { className: "text-black-300 shrink-0 w-icon h-icon" }),
|
|
37
|
+
a ? /* @__PURE__ */ r(f, { children: [
|
|
38
|
+
/* @__PURE__ */ e(
|
|
39
|
+
"a",
|
|
80
40
|
{
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
placeholder: L ?? "",
|
|
87
|
-
disabled: d,
|
|
88
|
-
errorMessage: ""
|
|
41
|
+
href: a,
|
|
42
|
+
target: "_blank",
|
|
43
|
+
rel: "noopener noreferrer",
|
|
44
|
+
className: "text-primary-600 dark:text-primary-400 hover:underline text-sm truncate",
|
|
45
|
+
children: t || a
|
|
89
46
|
}
|
|
90
|
-
)
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
47
|
+
),
|
|
48
|
+
t && /* @__PURE__ */ r(f, { children: [
|
|
49
|
+
/* @__PURE__ */ e("div", { className: "h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0" }),
|
|
50
|
+
/* @__PURE__ */ e(w, { className: "text-black-300 shrink-0 w-icon h-icon" }),
|
|
51
|
+
/* @__PURE__ */ e("span", { className: "text-neutral-500 dark:text-neutral-400 text-sm shrink-0", children: t })
|
|
52
|
+
] })
|
|
53
|
+
] }) : /* @__PURE__ */ e("span", { className: "text-neutral-400 dark:text-neutral-600 text-sm", children: "—" })
|
|
54
|
+
] })
|
|
55
|
+
] });
|
|
56
|
+
const U = /* @__PURE__ */ r(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
className: c("flex items-center h-9 overflow-hidden", {
|
|
60
|
+
"border rounded-lg bg-white dark:bg-black-700": n && !F,
|
|
61
|
+
"border-error-500": n && o,
|
|
62
|
+
"border-gray-300 dark:border-black-500": n && !o && !F,
|
|
63
|
+
"rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]": n && g,
|
|
64
|
+
"rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)]": n && u,
|
|
65
|
+
"rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)]": n && v
|
|
66
|
+
}),
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ e(E, { className: "ml-2 text-black-300 shrink-0 w-icon h-icon" }),
|
|
69
|
+
/* @__PURE__ */ e("div", { className: c("min-w-0 flex-1", y), children: /* @__PURE__ */ e(
|
|
70
|
+
N,
|
|
71
|
+
{
|
|
72
|
+
id: A,
|
|
73
|
+
originalCase: !0,
|
|
74
|
+
type: "url",
|
|
75
|
+
value: a,
|
|
76
|
+
onChange: S,
|
|
77
|
+
placeholder: L,
|
|
78
|
+
disabled: h,
|
|
79
|
+
onBlur: D,
|
|
80
|
+
className: C,
|
|
81
|
+
inputEmphasis: s
|
|
82
|
+
}
|
|
83
|
+
) }),
|
|
84
|
+
/* @__PURE__ */ e("div", { className: "h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0" }),
|
|
85
|
+
/* @__PURE__ */ e(w, { className: "ml-2 text-black-300 shrink-0 w-icon h-icon", size: 18 }),
|
|
86
|
+
/* @__PURE__ */ e("div", { className: c("shrink-0", y, B), children: /* @__PURE__ */ e(
|
|
87
|
+
N,
|
|
88
|
+
{
|
|
89
|
+
id: _,
|
|
90
|
+
originalCase: !0,
|
|
91
|
+
type: "text",
|
|
92
|
+
value: t,
|
|
93
|
+
onChange: I,
|
|
94
|
+
placeholder: M,
|
|
95
|
+
disabled: h,
|
|
96
|
+
className: W,
|
|
97
|
+
inputEmphasis: s
|
|
98
|
+
}
|
|
99
|
+
) })
|
|
100
|
+
]
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
return /* @__PURE__ */ r("div", { className: "w-full", children: [
|
|
104
|
+
x,
|
|
105
|
+
U,
|
|
106
|
+
i && /* @__PURE__ */ e("p", { className: "text-error-500 text-xs mt-1", children: i }),
|
|
107
|
+
d && /* @__PURE__ */ e("p", { className: "text-error-500 text-xs mt-1", children: d })
|
|
96
108
|
] });
|
|
97
109
|
};
|
|
98
|
-
j.displayName = "LinkInputField";
|
|
99
110
|
export {
|
|
100
|
-
|
|
111
|
+
H as LinkInputField
|
|
101
112
|
};
|
|
102
113
|
//# sourceMappingURL=LinkInputField.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkInputField.es.js","sources":["../../../../src/components/forms/link-input/LinkInputField.tsx"],"sourcesContent":["import cn from
|
|
1
|
+
{"version":3,"file":"LinkInputField.es.js","sources":["../../../../src/components/forms/link-input/LinkInputField.tsx"],"sourcesContent":["import cn from 'classnames';\nimport type { ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { BaseInputField, type BaseInputFieldEmphasis } from '../base-input-field/BaseInputField';\nimport { KeychainIcon, MentionIcon } from '../../icon';\n\ninterface ILinkInputFieldProps {\n // URL input\n urlId?: string;\n urlValue: string;\n onUrlChange: (value: string) => void;\n urlPlaceholder?: string | null;\n urlError?: string;\n urlClassName?: string;\n onUrlBlur?: () => void;\n\n // Alias input\n aliasId?: string;\n aliasValue: string;\n onAliasChange: (value: string) => void;\n aliasPlaceholder?: string | null;\n aliasError?: string;\n aliasClassName?: string;\n // Pass e.g. 'w-[140px]' for a fixed-width alias column; omit for natural width\n aliasFixedWidth?: string;\n\n disabled?: boolean;\n // Optional label rendered above the input row\n label?: ReactNode;\n // Optional extra content rendered next to the label (e.g. actions, badges)\n labelExtra?: ReactNode;\n // Wrap the edit row in a bordered container (for standalone field usage)\n withBorder?: boolean;\n // Render a read-only link view instead of inputs (when the field is disabled and anchors are preferred)\n readOnly?: boolean;\n // Input surface style, mirrors BaseInputField's inputEmphasis\n inputEmphasis?: BaseInputFieldEmphasis;\n}\n\nconst inputOverrides =\n '[&_input]:!border-0 [&_input]:!shadow-none [&_input]:!rounded-none [&_input]:!bg-transparent [&_input]:!h-8 [&_input]:!pl-1';\n\nexport const LinkInputField = ({\n urlId,\n urlValue,\n onUrlChange,\n urlPlaceholder,\n urlError,\n urlClassName,\n onUrlBlur,\n aliasId,\n aliasValue,\n onAliasChange,\n aliasPlaceholder,\n aliasError,\n aliasClassName,\n aliasFixedWidth,\n disabled = false,\n label,\n labelExtra,\n withBorder = false,\n readOnly = false,\n inputEmphasis = 'default',\n}: ILinkInputFieldProps) => {\n const { t } = useTranslation();\n\n const resolvedUrlPlaceholder = urlPlaceholder === undefined ? t('Enter URL') : urlPlaceholder;\n const resolvedAliasPlaceholder = aliasPlaceholder === undefined ? t('Enter Alias') : aliasPlaceholder;\n const hasAnyError = !!urlError || !!aliasError;\n const resolvedEmphasis = hasAnyError ? 'default' : inputEmphasis;\n const emphasisModifiedSkin = resolvedEmphasis === 'modified';\n const emphasisDeletedSkin = resolvedEmphasis === 'deleted';\n const emphasisSuccessSkin = resolvedEmphasis === 'success';\n const hasEmphasisSkin = emphasisModifiedSkin || emphasisDeletedSkin || emphasisSuccessSkin;\n\n const labelRow = (label || labelExtra) && (\n <div className='flex items-center gap-1'>\n {label}\n {labelExtra}\n </div>\n );\n\n if (readOnly) {\n return (\n <div className='w-full'>\n {labelRow}\n <div className='flex items-center gap-2 min-h-9'>\n <KeychainIcon className='text-black-300 shrink-0 w-icon h-icon' />\n {urlValue ? (\n <>\n <a\n href={urlValue}\n target='_blank'\n rel='noopener noreferrer'\n className='text-primary-600 dark:text-primary-400 hover:underline text-sm truncate'\n >\n {aliasValue || urlValue}\n </a>\n {aliasValue && (\n <>\n <div className='h-4 w-px bg-neutral-300 dark:bg-grey-800 shrink-0' />\n <MentionIcon className='text-black-300 shrink-0 w-icon h-icon' />\n <span className='text-neutral-500 dark:text-neutral-400 text-sm shrink-0'>{aliasValue}</span>\n </>\n )}\n </>\n ) : (\n <span className='text-neutral-400 dark:text-neutral-600 text-sm'>—</span>\n )}\n </div>\n </div>\n );\n }\n\n const editRow = (\n <div\n className={cn('flex items-center h-9 overflow-hidden', {\n 'border rounded-lg bg-white dark:bg-black-700': withBorder && !hasEmphasisSkin,\n 'border-error-500': withBorder && hasAnyError,\n 'border-gray-300 dark:border-black-500': withBorder && !hasAnyError && !hasEmphasisSkin,\n 'rounded-lg border border-solid border-[var(--Warning-200,#FEDF89)] bg-[var(--Warning-50,#FFFAEB)] dark:border-[var(--Warning-200,#FEDF89)] dark:bg-[var(--Warning-50,#FFFAEB)]':\n withBorder && emphasisModifiedSkin,\n 'rounded-lg border border-solid border-[var(--Error-200,#FECACA)] bg-[var(--Error-50,#FEF2F2)] dark:border-[var(--Error-200,#FECACA)] dark:bg-[var(--Error-50,#FEF2F2)]':\n withBorder && emphasisDeletedSkin,\n 'rounded-lg border border-solid border-[var(--Success-200,#BBF7D0)] bg-[var(--Success-50,#F0FDF4)] dark:border-[var(--Success-200,#BBF7D0)] dark:bg-[var(--Success-50,#F0FDF4)]':\n withBorder && emphasisSuccessSkin,\n })}\n >\n <KeychainIcon className='ml-2 text-black-300 shrink-0 w-icon h-icon' />\n <div className={cn('min-w-0 flex-1', inputOverrides)}>\n <BaseInputField\n id={urlId}\n originalCase\n type='url'\n value={urlValue}\n onChange={onUrlChange}\n placeholder={resolvedUrlPlaceholder}\n disabled={disabled}\n onBlur={onUrlBlur}\n className={urlClassName}\n inputEmphasis={resolvedEmphasis}\n />\n </div>\n <div className='h-full w-px bg-neutral-300 dark:bg-grey-800 shrink-0' />\n <MentionIcon className='ml-2 text-black-300 shrink-0 w-icon h-icon' size={18} />\n <div className={cn('shrink-0', inputOverrides, aliasFixedWidth)}>\n <BaseInputField\n id={aliasId}\n originalCase\n type='text'\n value={aliasValue}\n onChange={onAliasChange}\n placeholder={resolvedAliasPlaceholder}\n disabled={disabled}\n className={aliasClassName}\n inputEmphasis={resolvedEmphasis}\n />\n </div>\n </div>\n );\n\n return (\n <div className='w-full'>\n {labelRow}\n {editRow}\n {urlError && <p className='text-error-500 text-xs mt-1'>{urlError}</p>}\n {aliasError && <p className='text-error-500 text-xs mt-1'>{aliasError}</p>}\n </div>\n );\n};\n"],"names":["inputOverrides","LinkInputField","urlId","urlValue","onUrlChange","urlPlaceholder","urlError","urlClassName","onUrlBlur","aliasId","aliasValue","onAliasChange","aliasPlaceholder","aliasError","aliasClassName","aliasFixedWidth","disabled","label","labelExtra","withBorder","readOnly","inputEmphasis","t","useTranslation","resolvedUrlPlaceholder","resolvedAliasPlaceholder","hasAnyError","resolvedEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","hasEmphasisSkin","labelRow","jsxs","jsx","KeychainIcon","Fragment","MentionIcon","editRow","cn","BaseInputField"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -38,7 +38,6 @@ export type { DynamicDataInputFieldProps, DynamicDataInputFieldEmphasis, Dynamic
|
|
|
38
38
|
export { DynamicDataInput } from "./components/forms/dynamic-data-input/DynamicDataInput";
|
|
39
39
|
export type { DynamicDataInputProps } from "./components/forms/dynamic-data-input/DynamicDataInput";
|
|
40
40
|
export { LinkInputField } from "./components/forms/link-input/LinkInputField";
|
|
41
|
-
export type { LinkInputFieldProps } from "./components/forms/link-input/LinkInputField";
|
|
42
41
|
export { PercentageInputField } from "./components/forms/percentage-input/PercentageInputField";
|
|
43
42
|
export { Form } from "./components/forms/form/Form";
|
|
44
43
|
export type { PercentageInputFieldProps, PercentageInputFieldEmphasis, RiskDetails as PercentageInputFieldRiskDetails, RiskDetailsCardProps as PercentageInputFieldRiskDetailsCardProps, } from "./components/forms/percentage-input/PercentageInputField";
|