@seedgrid/fe-components 2026.3.17-2 → 2026.3.19
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/inputs/SgInputCurrency.js +10 -10
- package/dist/inputs/SgInputNumber.js +10 -10
- package/dist/inputs/SgInputText.d.ts.map +1 -1
- package/dist/inputs/SgInputText.js +16 -11
- package/dist/sandbox.cjs +37 -37
- package/package.json +1 -1
|
@@ -423,7 +423,7 @@ function SgInputCurrencyBase(props) {
|
|
|
423
423
|
bgClass,
|
|
424
424
|
paddingLeft,
|
|
425
425
|
paddingRight,
|
|
426
|
-
"
|
|
426
|
+
"pt-4 pb-1",
|
|
427
427
|
"leading-[1.2]"
|
|
428
428
|
].join(" ");
|
|
429
429
|
let resolvedBorderRadius;
|
|
@@ -436,15 +436,17 @@ function SgInputCurrencyBase(props) {
|
|
|
436
436
|
const prefixPaddingStyle = prefixText
|
|
437
437
|
? `calc(${prefixWidth}px + 0.75rem${props.prefixIcon ? " + 0.75rem" : ""})`
|
|
438
438
|
: undefined;
|
|
439
|
+
const labelLeftStyle = prefixPaddingStyle ?? (props.prefixIcon ? "2.5rem" : "0.75rem");
|
|
439
440
|
const iconButtonsPadding = iconButtonsCount > 0 ? `${iconButtonsCount * 1.5}rem` : "0rem";
|
|
440
441
|
const baseRightPadding = canShowClear ? "2rem" : "0.75rem";
|
|
442
|
+
const suffixActionGap = suffixText && hasSuffix ? "0.375rem" : "0rem";
|
|
441
443
|
const suffixPaddingStyle = suffixText
|
|
442
|
-
? `calc(${suffixWidth}px + ${baseRightPadding} + ${iconButtonsPadding})`
|
|
444
|
+
? `calc(${suffixWidth}px + ${baseRightPadding} + ${iconButtonsPadding} + ${suffixActionGap})`
|
|
443
445
|
: hasSuffix
|
|
444
446
|
? `calc(${baseRightPadding} + ${iconButtonsPadding})`
|
|
445
447
|
: undefined;
|
|
446
448
|
const clearRightStyle = suffixText && suffixWidth
|
|
447
|
-
?
|
|
449
|
+
? `calc(${suffixWidth}px + ${suffixActionGap})`
|
|
448
450
|
: undefined;
|
|
449
451
|
return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [_jsxs("div", { className: "relative", children: [prefixText ? (_jsx("span", { ref: prefixRef, className: "pointer-events-none absolute left-0 top-0 z-10 flex h-11 items-center rounded-l-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: prefixText })) : null, props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-foreground/60", children: props.prefixIcon })) : null, _jsx("input", { id: props.id, type: props.type ?? "text", placeholder: placeholder, className: props.className ?? finalClass, style: {
|
|
450
452
|
borderRadius: resolvedBorderRadius,
|
|
@@ -454,20 +456,18 @@ function SgInputCurrencyBase(props) {
|
|
|
454
456
|
...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
455
457
|
...(inputProps.style ?? {})
|
|
456
458
|
}, inputMode: props.textInputType ?? "decimal", readOnly: props.readOnly, disabled: props.enabled === false, ...restInputProps, ref: mergeRefs(inputRef, inputProps?.ref), onKeyDown: handleKeyDown, onChange: handleChange, onPaste: handlePaste, onBlur: handleBlur, onFocus: handleFocus }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, _jsxs("label", { htmlFor: props.id, className: [
|
|
457
|
-
"absolute bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
458
|
-
isFilled
|
|
459
|
-
? "-top-2 left-3 text-xs"
|
|
460
|
-
: `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
|
|
459
|
+
"absolute z-10 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
460
|
+
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
461
461
|
hasError
|
|
462
462
|
? "text-[hsl(var(--destructive))]"
|
|
463
463
|
: isFilled
|
|
464
464
|
? "text-[hsl(var(--primary))]"
|
|
465
465
|
: "text-foreground/60",
|
|
466
466
|
hasError
|
|
467
|
-
? "peer-focus:-top-2 peer-focus:
|
|
468
|
-
: "peer-focus:-top-2 peer-focus:
|
|
467
|
+
? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
|
|
468
|
+
: "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
|
|
469
469
|
props.labelClassName ?? ""
|
|
470
|
-
].join(" "), style:
|
|
470
|
+
].join(" "), style: { left: labelLeftStyle }, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] }), hasSuffix ? (_jsxs("span", { className: "absolute right-2 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", tabIndex: -1, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, className: "rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null, props.iconButtons?.map((node, index) => (_jsx("span", { children: node }, index)))] })) : null] }), _jsx("div", { className: "mt-1 flex items-center justify-between gap-2", children: _jsx(ErrorText, { message: props.error ?? internalError ?? undefined }) })] }));
|
|
471
471
|
}
|
|
472
472
|
export function SgInputCurrency(props) {
|
|
473
473
|
const { control, name, register, rules, ...rest } = props;
|
|
@@ -382,7 +382,7 @@ function SgInputNumberBase(props) {
|
|
|
382
382
|
bgClass,
|
|
383
383
|
paddingLeft,
|
|
384
384
|
paddingRight,
|
|
385
|
-
"py-2",
|
|
385
|
+
isFloatLabel ? "pt-4 pb-1" : "py-2",
|
|
386
386
|
"leading-[1.2]"
|
|
387
387
|
].join(" ");
|
|
388
388
|
let resolvedBorderRadius;
|
|
@@ -395,15 +395,17 @@ function SgInputNumberBase(props) {
|
|
|
395
395
|
const prefixPaddingStyle = props.prefixText
|
|
396
396
|
? `calc(${prefixWidth}px + 0.75rem${props.prefixIcon ? " + 0.75rem" : ""})`
|
|
397
397
|
: undefined;
|
|
398
|
+
const labelLeftStyle = prefixPaddingStyle ?? (props.prefixIcon ? "2.5rem" : "0.75rem");
|
|
398
399
|
const iconButtonsPadding = iconButtonsCount > 0 ? `${iconButtonsCount * 1.5}rem` : "0rem";
|
|
399
400
|
const baseRightPadding = canShowClear ? "2rem" : "0.75rem";
|
|
401
|
+
const suffixActionGap = props.suffixText && hasSuffix ? "0.375rem" : "0rem";
|
|
400
402
|
const suffixPaddingStyle = props.suffixText
|
|
401
|
-
? `calc(${suffixWidth}px + ${baseRightPadding} + ${iconButtonsPadding})`
|
|
403
|
+
? `calc(${suffixWidth}px + ${baseRightPadding} + ${iconButtonsPadding} + ${suffixActionGap})`
|
|
402
404
|
: hasSuffix
|
|
403
405
|
? `calc(${baseRightPadding} + ${iconButtonsPadding})`
|
|
404
406
|
: undefined;
|
|
405
407
|
const clearRightStyle = props.suffixText && suffixWidth
|
|
406
|
-
?
|
|
408
|
+
? `calc(${suffixWidth}px + ${suffixActionGap})`
|
|
407
409
|
: undefined;
|
|
408
410
|
const resolvedLabelWidth = props.labelWidth !== undefined
|
|
409
411
|
? typeof props.labelWidth === "number"
|
|
@@ -432,20 +434,18 @@ function SgInputNumberBase(props) {
|
|
|
432
434
|
...(props.suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
433
435
|
...(inputProps.style ?? {})
|
|
434
436
|
}, inputMode: props.textInputType ?? "decimal", readOnly: props.readOnly, disabled: props.enabled === false, ...restInputProps, ref: mergeRefs(inputRef, inputProps?.ref), onKeyDown: handleKeyDown, onChange: handleChange, onPaste: handlePaste, onBlur: handleBlur, onFocus: handleFocus }), props.suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: props.suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
|
|
435
|
-
"absolute bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
436
|
-
isFilled
|
|
437
|
-
? "-top-2 left-3 text-xs"
|
|
438
|
-
: `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
|
|
437
|
+
"absolute z-10 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
438
|
+
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
439
439
|
hasError
|
|
440
440
|
? "text-[hsl(var(--destructive))]"
|
|
441
441
|
: isFilled
|
|
442
442
|
? "text-[hsl(var(--primary))]"
|
|
443
443
|
: "text-foreground/60",
|
|
444
444
|
hasError
|
|
445
|
-
? "peer-focus:-top-2 peer-focus:
|
|
446
|
-
: "peer-focus:-top-2 peer-focus:
|
|
445
|
+
? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
|
|
446
|
+
: "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
|
|
447
447
|
props.labelClassName ?? ""
|
|
448
|
-
].join(" "), style:
|
|
448
|
+
].join(" "), style: { left: labelLeftStyle }, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, hasSuffix ? (_jsxs("span", { className: "absolute right-2 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", tabIndex: -1, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, className: "rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null, props.iconButtons?.map((node, index) => (_jsx("span", { children: node }, index)))] })) : null] }), _jsx("div", { className: "mt-1 flex items-center justify-between gap-2", children: _jsx(ErrorText, { message: props.error ?? internalError ?? undefined }) })] }));
|
|
449
449
|
if (labelPosition === "left") {
|
|
450
450
|
return (_jsx("div", { style: { width: props.width ?? "100%" }, children: _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-[var(--sg-input-label-width)_minmax(0,1fr)] sm:items-start sm:gap-3", style: outerLayoutStyle, children: [showExternalLabel ? (_jsxs("label", { htmlFor: props.id, className: externalLabelClass, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { children: fieldNode })] }) }));
|
|
451
451
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"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"}
|
|
@@ -240,6 +240,7 @@ function SgInputTextBase(props) {
|
|
|
240
240
|
const isDisabled = props.enabled === false || props.readOnly || resolvedInputProps.readOnly;
|
|
241
241
|
const canShowClear = (props.clearButton ?? true) && !isDisabled;
|
|
242
242
|
const hasSuffix = canShowClear || (props.iconButtons?.length ?? 0) > 0;
|
|
243
|
+
const iconButtonsCount = props.iconButtons?.length ?? 0;
|
|
243
244
|
const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
|
|
244
245
|
const paddingRight = hasSuffix ? "pr-10" : "pr-3";
|
|
245
246
|
const placeholderClass = isFloatLabel
|
|
@@ -269,7 +270,7 @@ function SgInputTextBase(props) {
|
|
|
269
270
|
bgClass,
|
|
270
271
|
paddingLeft,
|
|
271
272
|
paddingRight,
|
|
272
|
-
"py-2",
|
|
273
|
+
isFloatLabel ? "pt-4 pb-1" : "py-2",
|
|
273
274
|
"leading-[1.2]",
|
|
274
275
|
prefixText && suffixText ? "text-center" : suffixText ? "text-right" : "text-left"
|
|
275
276
|
].join(" ");
|
|
@@ -283,11 +284,17 @@ function SgInputTextBase(props) {
|
|
|
283
284
|
const prefixPaddingStyle = prefixText
|
|
284
285
|
? `calc(${prefixWidth}px + 0.75rem${props.prefixIcon ? " + 0.75rem" : ""})`
|
|
285
286
|
: undefined;
|
|
287
|
+
const labelLeftStyle = prefixPaddingStyle ?? (props.prefixIcon ? "2.5rem" : "0.75rem");
|
|
288
|
+
const iconButtonsPadding = iconButtonsCount > 0 ? `${iconButtonsCount * 1.5}rem` : "0rem";
|
|
289
|
+
const baseRightPadding = canShowClear ? "2rem" : "0.75rem";
|
|
290
|
+
const suffixActionGap = suffixText && hasSuffix ? "0.375rem" : "0rem";
|
|
286
291
|
const suffixPaddingStyle = suffixText
|
|
287
|
-
? `calc(${suffixWidth}px + ${
|
|
288
|
-
:
|
|
292
|
+
? `calc(${suffixWidth}px + ${baseRightPadding} + ${iconButtonsPadding} + ${suffixActionGap})`
|
|
293
|
+
: hasSuffix
|
|
294
|
+
? `calc(${baseRightPadding} + ${iconButtonsPadding})`
|
|
295
|
+
: undefined;
|
|
289
296
|
const clearRightStyle = suffixText && suffixWidth
|
|
290
|
-
?
|
|
297
|
+
? `calc(${suffixWidth}px + ${suffixActionGap})`
|
|
291
298
|
: undefined;
|
|
292
299
|
const resolvedLabelWidth = props.labelWidth !== undefined
|
|
293
300
|
? typeof props.labelWidth === "number"
|
|
@@ -325,16 +332,14 @@ function SgInputTextBase(props) {
|
|
|
325
332
|
...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
326
333
|
...(resolvedInputProps.style ?? {})
|
|
327
334
|
}, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
|
|
328
|
-
"absolute bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
329
|
-
isFilled
|
|
330
|
-
? "-top-2 left-3 text-xs"
|
|
331
|
-
: `top-3 text-sm ${props.prefixIcon ? "left-10" : "left-3"}`,
|
|
335
|
+
"absolute z-10 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
336
|
+
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
332
337
|
hasError ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
|
|
333
338
|
hasError
|
|
334
|
-
? "peer-focus:-top-2 peer-focus:
|
|
335
|
-
: "peer-focus:-top-2 peer-focus:
|
|
339
|
+
? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
|
|
340
|
+
: "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
|
|
336
341
|
props.labelClassName ?? ""
|
|
337
|
-
].join(" "), style:
|
|
342
|
+
].join(" "), style: { left: labelLeftStyle }, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, hasSuffix ? (_jsxs("span", { className: "absolute right-2 top-1/2 z-20 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", tabIndex: -1, onMouseDown: (event) => event.preventDefault(), onClick: handleClear, className: "rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null, props.iconButtons?.map((node, index) => (_jsx("span", { children: node }, index)))] })) : null] }), _jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [_jsx(ErrorText, { message: props.error ?? internalError ?? undefined }), props.showCharCounter ? (_jsxs("span", { className: "text-[11px] text-foreground/50", children: [valueLength, props.maxLength ? `/${props.maxLength}` : ""] })) : null] })] }));
|
|
338
343
|
if (labelPosition === "left") {
|
|
339
344
|
return (_jsx("div", { style: { width: props.width ?? "100%" }, children: _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-[var(--sg-input-label-width)_minmax(0,1fr)] sm:items-start sm:gap-3", style: outerLayoutStyle, children: [showExternalLabel ? (_jsxs("label", { htmlFor: props.id, className: externalLabelClass, children: [_jsx("span", { children: labelText }), props.required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { children: fieldNode })] }) }));
|
|
340
345
|
}
|