@seedgrid/fe-components 2026.3.3-9 → 2026.3.4

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.
Files changed (28) hide show
  1. package/dist/buttons/SgButton.d.ts.map +1 -1
  2. package/dist/buttons/SgButton.js +5 -4
  3. package/dist/buttons/SgFloatActionButton.d.ts.map +1 -1
  4. package/dist/buttons/SgFloatActionButton.js +1 -0
  5. package/dist/buttons/SgSplitButton.d.ts.map +1 -1
  6. package/dist/buttons/SgSplitButton.js +3 -29
  7. package/dist/inputs/SgInputDate.d.ts.map +1 -1
  8. package/dist/inputs/SgInputDate.js +9 -2
  9. package/dist/inputs/SgInputNumber.d.ts +4 -0
  10. package/dist/inputs/SgInputNumber.d.ts.map +1 -1
  11. package/dist/inputs/SgInputNumber.js +46 -8
  12. package/dist/inputs/SgInputText.d.ts +4 -0
  13. package/dist/inputs/SgInputText.d.ts.map +1 -1
  14. package/dist/inputs/SgInputText.js +46 -8
  15. package/dist/inputs/SgInputTextArea.d.ts +4 -0
  16. package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
  17. package/dist/inputs/SgInputTextArea.js +45 -7
  18. package/dist/inputs/SgTextEditor.d.ts.map +1 -1
  19. package/dist/inputs/SgTextEditor.js +1 -0
  20. package/dist/layout/SgMenu.js +3 -5
  21. package/dist/layout/SgToolBar.d.ts.map +1 -1
  22. package/dist/layout/SgToolBar.js +10 -5
  23. package/dist/menus/SgDockMenu.d.ts.map +1 -1
  24. package/dist/menus/SgDockMenu.js +1 -0
  25. package/dist/others/SgPlayground.d.ts.map +1 -1
  26. package/dist/others/SgPlayground.js +348 -127
  27. package/dist/sandbox.cjs +82 -64
  28. package/package.json +1 -1
package/dist/buttons/SgButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;eAnJR,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;eACV,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CA8MpC,CAAC"}
1
+ {"version":3,"file":"SgButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC,GAAG;IACzF,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAsEF,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,oBAAoB,GAC5B,QAAQ,CAAC,oBAAoB,CAAC,CAYhC;AAoDD,eAAO,MAAM,QAAQ;eAnJR,QAAQ;iBACN,UAAU;WAChB,IAAI;YACH,KAAK;gBACD,SAAS;eACV,OAAO;eACP,KAAK,CAAC,SAAS;gBACd,KAAK,CAAC,SAAS;cACjB,OAAO;mBACF,oBAAoB;2CAiNpC,CAAC"}
package/dist/buttons/SgButton.js CHANGED
@@ -56,9 +56,9 @@ const PRESET = {
56
56
  },
57
57
  };
58
58
  const SIZE = {
59
- sm: { h: "h-8", px: "px-3", text: "text-sm", gap: "gap-2", icon: "size-4", radius: "rounded-md" },
60
- md: { h: "h-10", px: "px-4", text: "text-sm", gap: "gap-2", icon: "size-4", radius: "rounded-lg" },
61
- lg: { h: "h-12", px: "px-5", text: "text-base", gap: "gap-2.5", icon: "size-5", radius: "rounded-xl" }
59
+ sm: { h: "h-8", minH: "min-h-8", py: "py-1.5", px: "px-3", text: "text-sm", gap: "gap-2", icon: "size-4", radius: "rounded-md" },
60
+ md: { h: "h-10", minH: "min-h-10", py: "py-2", px: "px-4", text: "text-sm", gap: "gap-2", icon: "size-4", radius: "rounded-lg" },
61
+ lg: { h: "h-12", minH: "min-h-12", py: "py-2.5", px: "px-5", text: "text-base", gap: "gap-2.5", icon: "size-5", radius: "rounded-xl" }
62
62
  };
63
63
  export function resolveButtonColors(severity, custom) {
64
64
  const base = PRESET[severity];
@@ -115,7 +115,8 @@ export const SgButton = React.forwardRef(({ severity = "primary", appearance = "
115
115
  const resolvedSize = size ?? (isIconOnly ? "sm" : "md");
116
116
  const resolvedShape = shape ?? (isIconOnly ? "circle" : "default");
117
117
  const s = SIZE[resolvedSize];
118
- return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex items-center justify-center select-none whitespace-nowrap", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", s.h, isIconOnly ? "aspect-square" : s.px, s.text, s.gap, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: cn("inline-flex items-center", s.gap), children: [_jsx(Spinner, { className: s.icon }), children ? _jsx("span", { children: children }) : null] })) : (_jsxs("span", { className: cn("inline-flex items-center", s.gap), children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, children ? _jsx("span", { children: children }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
118
+ const contentClass = cn("inline-flex min-w-0 items-center justify-center", !isIconOnly ? "w-full" : undefined, s.gap);
119
+ return (_jsx("button", { ref: ref, type: type, disabled: isDisabled, style: { ...buildVars(severity, customColors), ...style }, className: cn("inline-flex min-w-0 max-w-full items-center justify-center select-none whitespace-normal break-words text-center", "font-medium", "transition-[background-color,color,border-color,box-shadow,transform] duration-150", "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--sg-btn-ring)]", "disabled:opacity-60 disabled:cursor-not-allowed", isIconOnly ? cn("aspect-square", s.h) : cn(s.minH, s.py, s.px), s.text, resolvedShape === "rounded" ? "rounded-full" : resolvedShape === "circle" ? "rounded-full" : resolvedShape === "square" ? "rounded-none" : s.radius, appearanceClass(appearance), elevationClass(elevation), !isDisabled ? "active:translate-y-[0.5px]" : false, className), ...rest, children: loading ? (_jsxs("span", { className: contentClass, children: [_jsx(Spinner, { className: s.icon }), children ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: children }) : null] })) : (_jsxs("span", { className: contentClass, children: [leftIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: leftIcon }) : null, children ? _jsx("span", { className: "min-w-0 whitespace-normal break-words", children: children }) : null, rightIcon ? _jsx("span", { className: cn("shrink-0", s.icon), children: rightIcon }) : null] })) }));
119
120
  });
120
121
  SgButton.displayName = "SgButton";
121
122
  function Spinner({ className }) {
package/dist/buttons/SgFloatActionButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgFloatActionButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgFloatActionButton.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SgFloatActionButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgFloatActionButton.tsx"],"names":[],"mappings":"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"}
package/dist/buttons/SgFloatActionButton.js CHANGED
@@ -645,6 +645,7 @@ export function SgFloatActionButton(props) {
645
645
  width: wh, height: wh,
646
646
  backgroundColor: bg, color: fg,
647
647
  ["--tw-ring-color"]: ring,
648
+ ...(enableDragDrop ? { touchAction: "none" } : {}),
648
649
  ...anim,
649
650
  }, onClick: handleClick, onPointerDown: handlePointerDown, onContextMenu: handleContextMenu, onMouseEnter: onEnter, onMouseLeave: onLeave, "aria-label": hint ?? (open ? "Close" : "Open"), "aria-expanded": actions ? open : undefined, children: [loading ? (_jsx(Spinner, { size: iconSz })) : (_jsx("span", { className: "inline-flex items-center justify-center transition-transform duration-300", style: { transform: open && actions ? "rotate(45deg)" : "rotate(0deg)" }, children: open && activeIcon ? activeIcon : (icon ?? _jsx(PlusIcon, { size: iconSz })) })), hint && !open ? (_jsx("span", { className: cn("absolute whitespace-nowrap rounded bg-foreground/90 px-2.5 py-1.5 text-xs font-medium text-background", "transition-opacity duration-200 pointer-events-none", hintShow ? "opacity-100" : "opacity-0", TIP_CLS[hintPos]), children: hint })) : null] }), _jsx(SgPopup, { title: t(i18n, "components.fab.resetPosition"), open: menuOpen, onOpenChange: setMenuOpen, anchorRef: fabBtnRef, placement: "auto", preferPlacement: "left", align: "start", offset: 8, actions: [
650
651
  {
package/dist/buttons/SgSplitButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgSplitButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgSplitButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmBF,eAAO,MAAM,aAAa,2FAkKzB,CAAC"}
1
+ {"version":3,"file":"SgSplitButton.d.ts","sourceRoot":"","sources":["../../src/buttons/SgSplitButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAEvD,KAAK,QAAQ,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,CAAC;AAEb,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,KAAK,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmBF,eAAO,MAAM,aAAa,2FAiIzB,CAAC"}
package/dist/buttons/SgSplitButton.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import * as React from "react";
4
- import { SgButton, resolveButtonColors } from "./SgButton";
4
+ import { SgButton } from "./SgButton";
5
5
  function ChevronDown({ className }) {
6
6
  return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
7
7
  }
@@ -39,21 +39,8 @@ export const SgSplitButton = React.forwardRef(({ label, leftIcon, severity = "pr
39
39
  item.onClick?.();
40
40
  setOpen(false);
41
41
  };
42
- const colors = resolveButtonColors(severity, customColors);
43
- const toneKey = severity === "danger"
44
- ? "error"
45
- : severity === "help"
46
- ? "tertiary"
47
- : severity;
48
- const tone100 = `var(--sg-${toneKey}-100, var(--sg-primary-100))`;
49
- const tone200 = `var(--sg-${toneKey}-200, ${tone100})`;
50
- const tone300 = `var(--sg-${toneKey}-300, ${tone200})`;
51
- const menuBg = `rgb(${tone100})`;
52
- const menuFg = colors.bg;
53
- const menuHoverBg = `rgb(${tone200})`;
54
- const menuBorder = `rgb(${tone200})`;
55
42
  const dividerBorderClass = appearance === "solid"
56
- ? "border-l border-[rgb(var(--sg-border))]"
43
+ ? "border-l border-white/40"
57
44
  : appearance === "outline"
58
45
  ? "border-l border-[var(--sg-btn-border,currentColor)]"
59
46
  : "border-l border-current/20";
@@ -63,19 +50,6 @@ export const SgSplitButton = React.forwardRef(({ label, leftIcon, severity = "pr
63
50
  lg: { menu: "min-w-[180px]", item: "px-5 py-2.5", text: "text-base", iconSize: "size-5" }
64
51
  };
65
52
  const s = sizeClasses[size];
66
- return (_jsxs("div", { ref: containerRef, className: `relative inline-flex ${className ?? ""}`, children: [_jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: shape, elevation: elevation, disabled: disabled, loading: loading, leftIcon: leftIcon, onClick: onClick, customColors: customColors, className: "rounded-r-none", children: label }), _jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: shape, elevation: elevation, disabled: disabled || loading, leftIcon: _jsx(ChevronDown, { className: "size-4" }), onClick: toggle, customColors: customColors, className: `rounded-l-none ${dividerBorderClass}`, "aria-haspopup": "true", "aria-expanded": open }), open && (_jsx("div", { ref: menuRef, role: "menu", className: `absolute right-0 top-full z-50 mt-1 ${s.menu} overflow-hidden rounded-lg shadow-lg`, style: {
67
- backgroundColor: menuBg,
68
- color: menuFg,
69
- border: `1px solid ${menuBorder}`
70
- }, children: items.map((item, i) => (_jsxs(React.Fragment, { children: [item.separator && i > 0 ? (_jsx("div", { className: "my-0.5", style: {
71
- borderTop: `1px solid ${appearance === "solid" ? `rgb(${tone300})` : "rgb(var(--sg-text)/0.2)"}`
72
- } })) : null, _jsxs("button", { role: "menuitem", type: "button", disabled: item.disabled, className: `flex w-full items-center gap-2 ${s.item} ${s.text} transition-colors disabled:opacity-50 disabled:cursor-not-allowed`, style: {
73
- backgroundColor: "transparent"
74
- }, onMouseEnter: (e) => {
75
- if (!item.disabled)
76
- (e.currentTarget.style.backgroundColor = menuHoverBg);
77
- }, onMouseLeave: (e) => {
78
- e.currentTarget.style.backgroundColor = "transparent";
79
- }, onClick: () => handleItemClick(item), children: [item.icon ? _jsx("span", { className: `shrink-0 ${s.iconSize}`, children: item.icon }) : null, _jsx("span", { children: item.label })] })] }, i))) }))] }));
53
+ return (_jsxs("div", { ref: containerRef, className: `relative inline-flex ${className ?? ""}`, children: [_jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: shape, elevation: elevation, disabled: disabled, loading: loading, leftIcon: leftIcon, onClick: onClick, customColors: customColors, className: "rounded-r-none", children: label }), _jsx(SgButton, { severity: severity, appearance: appearance, size: size, shape: shape, elevation: elevation, disabled: disabled || loading, leftIcon: _jsx(ChevronDown, { className: "size-4" }), onClick: toggle, customColors: customColors, className: `rounded-l-none ${dividerBorderClass}`, "aria-haspopup": "true", "aria-expanded": open }), open && (_jsx("div", { ref: menuRef, role: "menu", className: `absolute left-0 top-full z-50 mt-1 ${s.menu} overflow-hidden rounded-lg shadow-lg bg-background text-foreground border border-border`, children: items.map((item, i) => (_jsxs(React.Fragment, { children: [item.separator && i > 0 ? (_jsx("div", { className: "my-0.5 border-t border-border" })) : null, _jsxs("button", { role: "menuitem", type: "button", disabled: item.disabled, className: `flex w-full items-center gap-2 ${s.item} ${s.text} transition-colors hover:bg-muted/60 disabled:opacity-50 disabled:cursor-not-allowed`, onClick: () => handleItemClick(item), children: [item.icon ? _jsx("span", { className: `shrink-0 ${s.iconSize}`, children: item.icon }) : null, _jsx("span", { children: item.label })] })] }, i))) }))] }));
80
54
  });
81
55
  SgSplitButton.displayName = "SgSplitButton";
package/dist/inputs/SgInputDate.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgInputDate.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAC9D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAuBF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAkIlD"}
1
+ {"version":3,"file":"SgInputDate.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IAC9D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAuBF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyIlD"}
package/dist/inputs/SgInputDate.js CHANGED
@@ -103,11 +103,18 @@ export function SgInputDate(props) {
103
103
  if (mergedInputProps.className)
104
104
  return mergedInputProps.className;
105
105
  const hasError = Boolean(error ?? internalError);
106
- const baseClass = "peer h-11 w-full rounded-md bg-white pl-3 pr-7 py-2.5 text-sm shadow-sm placeholder-transparent focus:outline-none";
106
+ const elevationClass = props.elevation === "none"
107
+ ? ""
108
+ : props.elevation === "md"
109
+ ? "shadow-md"
110
+ : props.elevation === "lg"
111
+ ? "shadow-lg"
112
+ : "shadow-sm";
113
+ const baseClass = "peer h-11 w-full rounded-md bg-white pl-3 pr-7 py-2.5 text-sm placeholder-transparent focus:outline-none";
107
114
  const borderClass = hasError
108
115
  ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
109
116
  : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]";
110
- return [baseClass, borderClass].join(" ");
117
+ return [baseClass, borderClass, elevationClass].filter(Boolean).join(" ");
111
118
  })();
112
119
  return (_jsxs("div", { className: showStaticLabel ? "relative" : undefined, children: [_jsx("style", { children: `
113
120
  input[type="date"]::-webkit-calendar-picker-indicator {
package/dist/inputs/SgInputNumber.d.ts CHANGED
@@ -5,6 +5,10 @@ export type SgInputNumberProps = {
5
5
  id: string;
6
6
  label?: string;
7
7
  labelText?: string;
8
+ labelPosition?: "float" | "top" | "left";
9
+ labelWidth?: number | string;
10
+ labelAlign?: "start" | "center" | "end";
11
+ elevation?: "none" | "sm" | "md" | "lg";
8
12
  hintText?: string;
9
13
  prefixText?: string;
10
14
  suffixText?: string;
package/dist/inputs/SgInputNumber.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgInputNumber.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.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,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,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,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,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;AA4gBlB,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAuDtD"}
1
+ {"version":3,"file":"SgInputNumber.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.tsx"],"names":[],"mappings":"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"}
package/dist/inputs/SgInputNumber.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { X } from "lucide-react";
5
5
  import { Controller } from "react-hook-form";
@@ -118,8 +118,14 @@ function SgInputNumberBase(props) {
118
118
  const { decimal: decimalSep, group: groupSep } = getSeparators(i18n.locale);
119
119
  const inputProps = props.inputProps ?? {};
120
120
  const { value: _ignoredValue, defaultValue: _ignoredDefault, onChange: inputOnChange, ...restInputProps } = inputProps;
121
+ const labelPosition = props.labelPosition ?? "float";
122
+ const isFloatLabel = labelPosition === "float";
123
+ const showExternalLabel = !isFloatLabel;
124
+ const labelAlign = props.labelAlign ?? "start";
121
125
  const labelText = props.labelText ?? props.label ?? "";
122
- const placeholder = props.placeholder ?? props.hintText ?? labelText;
126
+ const placeholder = isFloatLabel
127
+ ? props.placeholder ?? props.hintText ?? labelText
128
+ : props.placeholder ?? props.hintText ?? "";
123
129
  const inputRef = React.useRef(null);
124
130
  const prefixRef = React.useRef(null);
125
131
  const suffixRef = React.useRef(null);
@@ -349,17 +355,26 @@ function SgInputNumberBase(props) {
349
355
  const hasSuffix = canShowClear || iconButtonsCount > 0;
350
356
  const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
351
357
  const paddingRight = hasSuffix ? "pr-10" : "pr-3";
352
- const baseClass = "peer h-11 w-full rounded-md text-sm placeholder-transparent focus:outline-none text-right";
358
+ const placeholderClass = isFloatLabel ? "placeholder-transparent" : "placeholder:text-foreground/50";
359
+ const baseClass = `peer h-11 w-full rounded-md text-sm focus:outline-none text-right ${placeholderClass}`;
353
360
  const hasError = Boolean(props.error ?? internalError);
361
+ const elevationClass = props.elevation === "none"
362
+ ? ""
363
+ : props.elevation === "md"
364
+ ? "shadow-md"
365
+ : props.elevation === "lg"
366
+ ? "shadow-lg"
367
+ : "shadow-sm";
354
368
  const borderClass = (props.withBorder ?? true) || hasError
355
369
  ? hasError
356
- ? "border border-[hsl(var(--destructive))] shadow-sm focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
357
- : "border border-border shadow-sm focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
370
+ ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
371
+ : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
358
372
  : "border border-transparent";
359
373
  const bgClass = props.filled ? "bg-muted/40" : "bg-white";
360
374
  const finalClass = [
361
375
  baseClass,
362
376
  borderClass,
377
+ elevationClass,
363
378
  bgClass,
364
379
  paddingLeft,
365
380
  paddingRight,
@@ -386,14 +401,33 @@ function SgInputNumberBase(props) {
386
401
  const clearRightStyle = props.suffixText && suffixWidth
387
402
  ? `${suffixWidth}px`
388
403
  : undefined;
389
- return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [_jsxs("div", { className: "relative", children: [props.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: props.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: {
404
+ const resolvedLabelWidth = props.labelWidth !== undefined
405
+ ? typeof props.labelWidth === "number"
406
+ ? `${props.labelWidth}px`
407
+ : props.labelWidth
408
+ : "11rem";
409
+ const labelAlignClass = labelAlign === "center"
410
+ ? "text-center"
411
+ : labelAlign === "end"
412
+ ? "text-right"
413
+ : "text-left";
414
+ const externalLabelClass = [
415
+ "block text-sm font-medium",
416
+ hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70",
417
+ labelPosition === "left" ? `pt-2 ${labelAlignClass}` : "",
418
+ props.labelClassName ?? ""
419
+ ].join(" ");
420
+ const outerLayoutStyle = labelPosition === "left"
421
+ ? { ["--sg-input-label-width"]: resolvedLabelWidth }
422
+ : undefined;
423
+ const fieldNode = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [props.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: props.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: {
390
424
  borderRadius: resolvedBorderRadius,
391
425
  paddingLeft: prefixPaddingStyle,
392
426
  paddingRight: suffixPaddingStyle,
393
427
  ...(props.prefixText ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeftWidth: 0 } : {}),
394
428
  ...(props.suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
395
429
  ...(inputProps.style ?? {})
396
- }, 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, _jsxs("label", { htmlFor: props.id, className: [
430
+ }, 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: [
397
431
  "absolute bg-white px-1 transition-all",
398
432
  isFilled
399
433
  ? "-top-2 left-3 text-xs"
@@ -407,7 +441,11 @@ function SgInputNumberBase(props) {
407
441
  ? "peer-focus:-top-2 peer-focus:left-3 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
408
442
  : "peer-focus:-top-2 peer-focus:left-3 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
409
443
  props.labelClassName ?? ""
410
- ].join(" "), style: prefixPaddingStyle ? { left: prefixPaddingStyle } : undefined, 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 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", 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 }) })] }));
444
+ ].join(" "), style: prefixPaddingStyle ? { left: prefixPaddingStyle } : undefined, 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 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", 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 }) })] }));
445
+ if (labelPosition === "left") {
446
+ 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 })] }) }));
447
+ }
448
+ return (_jsxs("div", { style: { width: props.width ?? "100%" }, 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", { className: showExternalLabel ? "mt-1" : undefined, children: fieldNode })] }));
411
449
  }
412
450
  export function SgInputNumber(props) {
413
451
  const { control, name, register, rules, ...rest } = props;
package/dist/inputs/SgInputText.d.ts CHANGED
@@ -5,6 +5,10 @@ export type SgInputTextProps = {
5
5
  id: string;
6
6
  label?: string;
7
7
  labelText?: string;
8
+ labelPosition?: "float" | "top" | "left";
9
+ labelWidth?: number | string;
10
+ labelAlign?: "start" | "center" | "end";
11
+ elevation?: "none" | "sm" | "md" | "lg";
8
12
  hintText?: string;
9
13
  prefixText?: string;
10
14
  suffixText?: string;
package/dist/inputs/SgInputText.d.ts.map CHANGED
@@ -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,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;AAyYlB,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8DlD"}
1
+ {"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"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"}
package/dist/inputs/SgInputText.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { X } from "lucide-react";
5
5
  import { Controller } from "react-hook-form";
@@ -96,8 +96,14 @@ function SgInputTextBase(props) {
96
96
  }
97
97
  return next;
98
98
  }, [inputProps, stripAffixes]);
99
+ const labelPosition = props.labelPosition ?? "float";
100
+ const isFloatLabel = labelPosition === "float";
101
+ const showExternalLabel = !isFloatLabel;
102
+ const labelAlign = props.labelAlign ?? "start";
99
103
  const labelText = props.labelText ?? props.label ?? "";
100
- const placeholder = props.placeholder ?? props.hintText ?? labelText;
104
+ const placeholder = isFloatLabel
105
+ ? props.placeholder ?? props.hintText ?? labelText
106
+ : props.placeholder ?? props.hintText ?? "";
101
107
  const inputRef = React.useRef(null);
102
108
  const prefixRef = React.useRef(null);
103
109
  const suffixRef = React.useRef(null);
@@ -236,17 +242,26 @@ function SgInputTextBase(props) {
236
242
  const hasSuffix = canShowClear || (props.iconButtons?.length ?? 0) > 0;
237
243
  const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
238
244
  const paddingRight = hasSuffix ? "pr-10" : "pr-3";
239
- const baseClass = "peer h-11 w-full rounded-md text-sm placeholder-transparent focus:outline-none";
245
+ const placeholderClass = isFloatLabel ? "placeholder-transparent" : "placeholder:text-foreground/50";
246
+ const baseClass = `peer h-11 w-full rounded-md text-sm focus:outline-none ${placeholderClass}`;
240
247
  const hasError = Boolean(props.error ?? internalError);
248
+ const elevationClass = props.elevation === "none"
249
+ ? ""
250
+ : props.elevation === "md"
251
+ ? "shadow-md"
252
+ : props.elevation === "lg"
253
+ ? "shadow-lg"
254
+ : "shadow-sm";
241
255
  const borderClass = (props.withBorder ?? true) || hasError
242
256
  ? hasError
243
- ? "border border-[hsl(var(--destructive))] shadow-sm focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
244
- : "border border-border shadow-sm focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
257
+ ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
258
+ : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
245
259
  : "border border-transparent";
246
260
  const bgClass = props.filled ? "bg-muted/40" : "bg-white";
247
261
  const finalClass = [
248
262
  baseClass,
249
263
  borderClass,
264
+ elevationClass,
250
265
  bgClass,
251
266
  paddingLeft,
252
267
  paddingRight,
@@ -270,14 +285,33 @@ function SgInputTextBase(props) {
270
285
  const clearRightStyle = suffixText && suffixWidth
271
286
  ? `${suffixWidth}px`
272
287
  : undefined;
273
- 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: {
288
+ const resolvedLabelWidth = props.labelWidth !== undefined
289
+ ? typeof props.labelWidth === "number"
290
+ ? `${props.labelWidth}px`
291
+ : props.labelWidth
292
+ : "11rem";
293
+ const labelAlignClass = labelAlign === "center"
294
+ ? "text-center"
295
+ : labelAlign === "end"
296
+ ? "text-right"
297
+ : "text-left";
298
+ const externalLabelClass = [
299
+ "block text-sm font-medium",
300
+ hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70",
301
+ labelPosition === "left" ? `pt-2 ${labelAlignClass}` : "",
302
+ props.labelClassName ?? ""
303
+ ].join(" ");
304
+ const outerLayoutStyle = labelPosition === "left"
305
+ ? { ["--sg-input-label-width"]: resolvedLabelWidth }
306
+ : undefined;
307
+ const fieldNode = (_jsxs(_Fragment, { 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: {
274
308
  borderRadius: resolvedBorderRadius,
275
309
  paddingLeft: prefixPaddingStyle,
276
310
  paddingRight: suffixPaddingStyle,
277
311
  ...(prefixText ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeftWidth: 0 } : {}),
278
312
  ...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
279
313
  ...(resolvedInputProps.style ?? {})
280
- }, 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, _jsxs("label", { htmlFor: props.id, className: [
314
+ }, 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: [
281
315
  "absolute bg-white px-1 transition-all",
282
316
  isFilled
283
317
  ? "-top-2 left-3 text-xs"
@@ -287,7 +321,11 @@ function SgInputTextBase(props) {
287
321
  ? "peer-focus:-top-2 peer-focus:left-3 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
288
322
  : "peer-focus:-top-2 peer-focus:left-3 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
289
323
  props.labelClassName ?? ""
290
- ].join(" "), style: prefixPaddingStyle ? { left: prefixPaddingStyle } : undefined, 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 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", 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] })] }));
324
+ ].join(" "), style: prefixPaddingStyle ? { left: prefixPaddingStyle } : undefined, 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 flex -translate-y-1/2 items-center gap-1", style: clearRightStyle ? { right: clearRightStyle } : undefined, children: [canShowClear ? (_jsx("button", { type: "button", 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] })] }));
325
+ if (labelPosition === "left") {
326
+ 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 })] }) }));
327
+ }
328
+ return (_jsxs("div", { style: { width: props.width ?? "100%" }, 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", { className: showExternalLabel ? "mt-1" : undefined, children: fieldNode })] }));
291
329
  }
292
330
  export function SgInputText(props) {
293
331
  const { control, name, register, rules, ...rest } = props;
package/dist/inputs/SgInputTextArea.d.ts CHANGED
@@ -4,6 +4,10 @@ export type SgInputTextAreaProps = {
4
4
  id: string;
5
5
  label?: string;
6
6
  labelText?: string;
7
+ labelPosition?: "float" | "top" | "left";
8
+ labelWidth?: number | string;
9
+ labelAlign?: "start" | "center" | "end";
10
+ elevation?: "none" | "sm" | "md" | "lg";
7
11
  hintText?: string;
8
12
  error?: string;
9
13
  className?: string;
package/dist/inputs/SgInputTextArea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,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,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;CACjD,GAAG,aAAa,CAAC;AA+QlB,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAwBpE"}
1
+ {"version":3,"file":"SgInputTextArea.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG;IACjC,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,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,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,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;CACjD,GAAG,aAAa,CAAC;AAiVlB,wBAAgB,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,2CAwBpE"}
package/dist/inputs/SgInputTextArea.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import { X } from "lucide-react";
5
5
  import { Controller } from "react-hook-form";
@@ -39,8 +39,14 @@ function mergeTextareaPropsWithField(textareaProps, field) {
39
39
  function SgInputTextAreaBase(props) {
40
40
  const i18n = useComponentsI18n();
41
41
  const textareaProps = props.textareaProps ?? {};
42
+ const labelPosition = props.labelPosition ?? "float";
43
+ const isFloatLabel = labelPosition === "float";
44
+ const showExternalLabel = !isFloatLabel;
45
+ const labelAlign = props.labelAlign ?? "start";
42
46
  const labelText = props.labelText ?? props.label ?? "";
43
- const placeholder = props.hintText ?? labelText;
47
+ const placeholder = isFloatLabel
48
+ ? props.hintText ?? labelText
49
+ : props.hintText ?? "";
44
50
  const textareaRef = React.useRef(null);
45
51
  const [internalError, setInternalError] = React.useState(null);
46
52
  const [hasInteracted, setHasInteracted] = React.useState(false);
@@ -158,17 +164,26 @@ function SgInputTextAreaBase(props) {
158
164
  const hasSuffix = canShowClear;
159
165
  const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
160
166
  const paddingRight = hasSuffix ? "pr-10" : "pr-3";
161
- const baseClass = "peer w-full rounded-md text-sm placeholder-transparent focus:outline-none";
167
+ const placeholderClass = isFloatLabel ? "placeholder-transparent" : "placeholder:text-foreground/50";
168
+ const baseClass = `peer w-full rounded-md text-sm focus:outline-none ${placeholderClass}`;
162
169
  const hasError = Boolean(props.error ?? internalError);
170
+ const elevationClass = props.elevation === "none"
171
+ ? ""
172
+ : props.elevation === "md"
173
+ ? "shadow-md"
174
+ : props.elevation === "lg"
175
+ ? "shadow-lg"
176
+ : "shadow-sm";
163
177
  const borderClass = (props.withBorder ?? true) || hasError
164
178
  ? hasError
165
- ? "border border-[hsl(var(--destructive))] shadow-sm focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
166
- : "border border-border shadow-sm focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
179
+ ? "border border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
180
+ : "border border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
167
181
  : "border border-transparent";
168
182
  const bgClass = props.filled ? "bg-muted/40" : "bg-white";
169
183
  const finalClass = [
170
184
  baseClass,
171
185
  borderClass,
186
+ elevationClass,
172
187
  bgClass,
173
188
  paddingLeft,
174
189
  paddingRight,
@@ -191,7 +206,26 @@ function SgInputTextAreaBase(props) {
191
206
  textareaStyle.height =
192
207
  typeof resolvedHeight === "number" ? `${resolvedHeight}px` : resolvedHeight;
193
208
  }
194
- return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [_jsxs("div", { className: "relative", children: [props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-3 text-foreground/60", children: props.prefixIcon })) : null, _jsx("textarea", { id: props.id, placeholder: placeholder, className: props.className ?? finalClass, style: textareaStyle, maxLength: props.maxLength, rows: props.maxLines ?? 2, readOnly: props.enabled === false ? true : textareaProps.readOnly, disabled: props.enabled === false, ...textareaProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), _jsx("label", { htmlFor: props.id, className: [
209
+ const resolvedLabelWidth = props.labelWidth !== undefined
210
+ ? typeof props.labelWidth === "number"
211
+ ? `${props.labelWidth}px`
212
+ : props.labelWidth
213
+ : "11rem";
214
+ const labelAlignClass = labelAlign === "center"
215
+ ? "text-center"
216
+ : labelAlign === "end"
217
+ ? "text-right"
218
+ : "text-left";
219
+ const externalLabelClass = [
220
+ "block text-sm font-medium",
221
+ hasError ? "text-[hsl(var(--destructive))]" : "text-foreground/70",
222
+ labelPosition === "left" ? `pt-2 ${labelAlignClass}` : "",
223
+ props.labelClassName ?? ""
224
+ ].join(" ");
225
+ const outerLayoutStyle = labelPosition === "left"
226
+ ? { ["--sg-input-label-width"]: resolvedLabelWidth }
227
+ : undefined;
228
+ const fieldNode = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative", children: [props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-3 text-foreground/60", children: props.prefixIcon })) : null, _jsx("textarea", { id: props.id, placeholder: placeholder, className: props.className ?? finalClass, style: textareaStyle, maxLength: props.maxLength, rows: props.maxLines ?? 2, readOnly: props.enabled === false ? true : textareaProps.readOnly, disabled: props.enabled === false, ...textareaProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), isFloatLabel ? (_jsx("label", { htmlFor: props.id, className: [
195
229
  "absolute left-3 bg-white px-1 transition-all",
196
230
  isFilled ? "-top-2 text-xs" : "top-3 text-sm",
197
231
  hasError ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
@@ -199,7 +233,11 @@ function SgInputTextAreaBase(props) {
199
233
  ? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
200
234
  : "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
201
235
  props.labelClassName ?? ""
202
- ].join(" "), children: labelText }), canShowClear ? (_jsx("button", { type: "button", onClick: handleClear, className: "absolute right-2 top-3 rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null] }), _jsxs("div", { className: "mt-0 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] })] }));
236
+ ].join(" "), children: labelText })) : null, canShowClear ? (_jsx("button", { type: "button", onClick: handleClear, className: "absolute right-2 top-3 rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null] }), _jsxs("div", { className: "mt-0 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] })] }));
237
+ if (labelPosition === "left") {
238
+ 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 ? (_jsx("label", { htmlFor: props.id, className: externalLabelClass, children: labelText })) : null, _jsx("div", { children: fieldNode })] }) }));
239
+ }
240
+ return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [showExternalLabel ? (_jsx("label", { htmlFor: props.id, className: externalLabelClass, children: labelText })) : null, _jsx("div", { className: showExternalLabel ? "mt-1" : undefined, children: fieldNode })] }));
203
241
  }
204
242
  export function SgInputTextArea(props) {
205
243
  const { control, name, ...rest } = props;
package/dist/inputs/SgTextEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoZ9D;yBApZe,YAAY"}
1
+ {"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqZ9D;yBArZe,YAAY"}
package/dist/inputs/SgTextEditor.js CHANGED
@@ -76,6 +76,7 @@ export function SgTextEditor(props) {
76
76
  }, [borderRadius]);
77
77
  const isControlled = typeof valueHtml === "string";
78
78
  const editor = useEditor({
79
+ immediatelyRender: false,
79
80
  editable: !disabled,
80
81
  extensions: [
81
82
  StarterKit.configure({ codeBlock: {} }),