@seedgrid/fe-components 2026.3.3 → 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 (49) hide show
  1. package/dist/blocked-email-domains.d.ts +5 -0
  2. package/dist/blocked-email-domains.d.ts.map +1 -0
  3. package/dist/{blocked-email-domains.json → blocked-email-domains.js} +4 -3
  4. package/dist/buttons/SgButton.d.ts.map +1 -1
  5. package/dist/buttons/SgButton.js +5 -4
  6. package/dist/buttons/SgFloatActionButton.d.ts.map +1 -1
  7. package/dist/buttons/SgFloatActionButton.js +1 -0
  8. package/dist/buttons/SgSplitButton.d.ts.map +1 -1
  9. package/dist/buttons/SgSplitButton.js +3 -29
  10. package/dist/i18n/en-US.d.ts +3 -0
  11. package/dist/i18n/en-US.d.ts.map +1 -0
  12. package/dist/i18n/{en-US.json → en-US.js} +3 -2
  13. package/dist/i18n/es.d.ts +3 -0
  14. package/dist/i18n/es.d.ts.map +1 -0
  15. package/dist/i18n/es.js +85 -0
  16. package/dist/i18n/index.d.ts +4 -336
  17. package/dist/i18n/index.d.ts.map +1 -1
  18. package/dist/i18n/index.js +4 -4
  19. package/dist/i18n/pt-BR.d.ts +3 -0
  20. package/dist/i18n/pt-BR.d.ts.map +1 -0
  21. package/dist/i18n/{pt-BR.json → pt-BR.js} +13 -12
  22. package/dist/i18n/pt-PT.d.ts +3 -0
  23. package/dist/i18n/pt-PT.d.ts.map +1 -0
  24. package/dist/i18n/{pt-PT.json → pt-PT.js} +13 -12
  25. package/dist/inputs/SgInputDate.d.ts.map +1 -1
  26. package/dist/inputs/SgInputDate.js +9 -2
  27. package/dist/inputs/SgInputNumber.d.ts +4 -0
  28. package/dist/inputs/SgInputNumber.d.ts.map +1 -1
  29. package/dist/inputs/SgInputNumber.js +46 -8
  30. package/dist/inputs/SgInputText.d.ts +4 -0
  31. package/dist/inputs/SgInputText.d.ts.map +1 -1
  32. package/dist/inputs/SgInputText.js +46 -8
  33. package/dist/inputs/SgInputTextArea.d.ts +4 -0
  34. package/dist/inputs/SgInputTextArea.d.ts.map +1 -1
  35. package/dist/inputs/SgInputTextArea.js +45 -7
  36. package/dist/inputs/SgTextEditor.d.ts.map +1 -1
  37. package/dist/inputs/SgTextEditor.js +1 -0
  38. package/dist/layout/SgMenu.js +3 -5
  39. package/dist/layout/SgToolBar.d.ts.map +1 -1
  40. package/dist/layout/SgToolBar.js +10 -5
  41. package/dist/manifest.js +2 -2
  42. package/dist/menus/SgDockMenu.d.ts.map +1 -1
  43. package/dist/menus/SgDockMenu.js +1 -0
  44. package/dist/others/SgPlayground.d.ts.map +1 -1
  45. package/dist/others/SgPlayground.js +641 -121
  46. package/dist/sandbox.cjs +453 -0
  47. package/dist/validators.js +1 -1
  48. package/package.json +5 -2
  49. package/dist/i18n/es.json +0 -84
package/dist/i18n/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import React from "react";
3
- import ptBr from "./pt-BR.json";
4
- import ptPt from "./pt-PT.json";
5
- import enUs from "./en-US.json";
6
- import es from "./es.json";
3
+ import ptBr from "./pt-BR.js";
4
+ import ptPt from "./pt-PT.js";
5
+ import enUs from "./en-US.js";
6
+ import es from "./es.js";
7
7
  const DEFAULT_I18N = {
8
8
  locale: "pt-BR",
9
9
  messages: ptBr
package/dist/i18n/pt-BR.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const ptBR: Record<string, string>;
2
+ export default ptBR;
3
+ //# sourceMappingURL=pt-BR.d.ts.map
package/dist/i18n/pt-BR.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pt-BR.d.ts","sourceRoot":"","sources":["../../src/i18n/pt-BR.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmFhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
package/dist/i18n/{pt-BR.json → pt-BR.js} RENAMED
@@ -1,4 +1,4 @@
1
- {
1
+ const ptBR = {
2
2
  "components.actions.clear": "Limpar",
3
3
  "components.wizard.next": "Próximo",
4
4
  "components.wizard.previous": "Anterior",
@@ -67,18 +67,19 @@
67
67
  "components.validators.birthdate.ageMax": "A idade deve ser de no máximo {max} anos.",
68
68
  "components.autocomplete.empty": "Nenhum registro encontrado.",
69
69
  "components.autocomplete.loading": "Carregando...",
70
- "components.inputs.number.min": "Valor deve ser no m\u00ednimo {min}.",
71
- "components.inputs.number.max": "Valor deve ser no m\u00e1ximo {max}.",
72
- "components.fab.resetConfirm": "Resetar posi\u00e7\u00e3o do bot\u00e3o?",
73
- "components.fab.resetPosition": "Resetar posi\u00e7\u00e3o",
70
+ "components.inputs.number.min": "Valor deve ser no mínimo {min}.",
71
+ "components.inputs.number.max": "Valor deve ser no máximo {max}.",
72
+ "components.fab.resetConfirm": "Resetar posição do botão?",
73
+ "components.fab.resetPosition": "Resetar posição",
74
74
  "components.fab.yes": "Sim",
75
- "components.fab.no": "N\u00e3o",
76
- "components.dock.resetPosition": "Resetar posi\u00e7\u00e3o",
77
- "components.dock.resetConfirm": "Tem certeza que deseja resetar a posi\u00e7\u00e3o do dock para o padr\u00e3o?",
75
+ "components.fab.no": "Não",
76
+ "components.dock.resetPosition": "Resetar posição",
77
+ "components.dock.resetConfirm": "Tem certeza que deseja resetar a posição do dock para o padrão?",
78
78
  "components.dock.dropHere": "Solte aqui",
79
79
  "components.actions.cancel": "Cancelar",
80
80
  "components.actions.confirm": "Confirmar",
81
- "components.rating.required": "Por favor, forne\u00e7a uma avalia\u00e7\u00e3o",
82
- "components.rating.cancel": "Cancelar avalia\u00e7\u00e3o",
83
- "components.radiogroup.cancel": "Nenhuma op\u00e7\u00e3o"
84
- }
81
+ "components.rating.required": "Por favor, forneça uma avaliação",
82
+ "components.rating.cancel": "Cancelar avaliação",
83
+ "components.radiogroup.cancel": "Nenhuma opção"
84
+ };
85
+ export default ptBR;
package/dist/i18n/pt-PT.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare const ptPT: Record<string, string>;
2
+ export default ptPT;
3
+ //# sourceMappingURL=pt-PT.d.ts.map
package/dist/i18n/pt-PT.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pt-PT.d.ts","sourceRoot":"","sources":["../../src/i18n/pt-PT.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAmFhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
package/dist/i18n/{pt-PT.json → pt-PT.js} RENAMED
@@ -1,4 +1,4 @@
1
- {
1
+ const ptPT = {
2
2
  "components.actions.clear": "Limpar",
3
3
  "components.wizard.next": "Próximo",
4
4
  "components.wizard.previous": "Anterior",
@@ -67,18 +67,19 @@
67
67
  "components.validators.birthdate.ageMax": "A idade deve ser de no máximo {max} anos.",
68
68
  "components.autocomplete.empty": "Nenhum registo encontrado.",
69
69
  "components.autocomplete.loading": "A carregar...",
70
- "components.inputs.number.min": "O valor deve ser no m\u00ednimo {min}.",
71
- "components.inputs.number.max": "O valor deve ser no m\u00e1ximo {max}.",
72
- "components.fab.resetConfirm": "Repor a posi\u00e7\u00e3o do bot\u00e3o?",
73
- "components.fab.resetPosition": "Repor posi\u00e7\u00e3o",
70
+ "components.inputs.number.min": "O valor deve ser no mínimo {min}.",
71
+ "components.inputs.number.max": "O valor deve ser no máximo {max}.",
72
+ "components.fab.resetConfirm": "Repor a posição do botão?",
73
+ "components.fab.resetPosition": "Repor posição",
74
74
  "components.fab.yes": "Sim",
75
- "components.fab.no": "N\u00e3o",
76
- "components.dock.resetPosition": "Repor posi\u00e7\u00e3o",
77
- "components.dock.resetConfirm": "Tem a certeza de que deseja repor a posi\u00e7\u00e3o do dock para o padr\u00e3o?",
75
+ "components.fab.no": "Não",
76
+ "components.dock.resetPosition": "Repor posição",
77
+ "components.dock.resetConfirm": "Tem a certeza de que deseja repor a posição do dock para o padrão?",
78
78
  "components.dock.dropHere": "Largue aqui",
79
79
  "components.actions.cancel": "Cancelar",
80
80
  "components.actions.confirm": "Confirmar",
81
- "components.rating.required": "Por favor, forne\u00e7a uma avalia\u00e7\u00e3o",
82
- "components.rating.cancel": "Cancelar avalia\u00e7\u00e3o",
83
- "components.radiogroup.cancel": "Nenhuma op\u00e7\u00e3o"
84
- }
81
+ "components.rating.required": "Por favor, forneça uma avaliação",
82
+ "components.rating.cancel": "Cancelar avaliação",
83
+ "components.radiogroup.cancel": "Nenhuma opção"
84
+ };
85
+ export default ptPT;
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: {} }),
package/dist/layout/SgMenu.js CHANGED
@@ -918,7 +918,7 @@ export function SgMenu(props) {
918
918
  const collapseOnLeft = isHorizontalDockZone
919
919
  ? horizontalDockAlign !== "right"
920
920
  : resolvedPosition === "right";
921
- const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 flex-1 rounded-md", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? "brand", className: "h-7 w-auto max-w-[120px]" })) : null, _jsx("span", { className: "truncate text-sm font-semibold", children: brand.title ?? "Menu" })] })) : showBrandSpacer ? (_jsx("div", { className: "flex-1" })) : null, showDockDragHandle ? (_jsx("button", { type: "button", onPointerDown: handleDockDragPointerDown, "aria-label": "Drag menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", dockDragActive ? "cursor-grabbing" : "cursor-grab"), children: _jsxs("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "16", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "1.25", fill: "currentColor" })] }) })) : null, showPinButton ? (_jsx("button", { type: "button", onClick: () => {
921
+ const shellHeaderRow = (brand || showCollapseButton || showPinButton || showDockDragHandle) ? (_jsxs("div", { className: cn("flex items-center gap-2 border-b border-border", densityCfg.section), children: [collapseOnLeft ? collapseButton : null, showBrandContent && brand ? (_jsxs("button", { type: "button", onClick: brand.onClick, className: cn("min-w-0 rounded-md", isHorizontalDockZone ? "flex-none" : "flex-1", "flex items-center gap-2", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"), children: [brand.image ? (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center", children: brand.image })) : brand.imageSrc ? (_jsx("img", { src: brand.imageSrc, alt: brand.title ?? "brand", className: cn("w-auto", isHorizontalDockZone ? "h-7 max-w-[120px]" : "h-12 max-w-[160px]") })) : null, brand.title ? (_jsx("span", { className: "truncate text-sm font-semibold", children: brand.title })) : null] })) : showBrandSpacer ? (_jsx("div", { className: "flex-1" })) : null, showDockDragHandle ? (_jsx("button", { type: "button", onPointerDown: handleDockDragPointerDown, "aria-label": "Drag menu", className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border", "bg-background hover:bg-muted/60", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35", dockDragActive ? "cursor-grabbing" : "cursor-grab"), children: _jsxs("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "16", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "8", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "12", r: "1.25", fill: "currentColor" }), _jsx("circle", { cx: "16", cy: "16", r: "1.25", fill: "currentColor" })] }) })) : null, showPinButton ? (_jsx("button", { type: "button", onClick: () => {
922
922
  const next = !pinnedState;
923
923
  setPinnedState(next);
924
924
  if (variant === "hybrid" && next)
@@ -990,10 +990,8 @@ export function SgMenu(props) {
990
990
  const shellForRender = dockMode && effectiveDockZone === "right" && isCollapsed ? (_jsx("div", { style: { width: "100%", height: "100%", display: "flex", justifyContent: "flex-end" }, children: sidebarShell })) : dockMode && isHorizontalDockZone ? (_jsxs("aside", { ref: (node) => {
991
991
  menuRootRef.current = node;
992
992
  sidebarShellRef.current = node;
993
- }, className: cn("relative flex flex-col bg-background text-foreground", !dockDragActive && horizontalDockAlign === null ? "w-full" : "", !dockDragActive ? "self-stretch" : "", !dockDragActive && horizontalDockAlign === "right" ? "ml-auto" : "", border ? "border border-border" : "", elevationClass(elevation), className), style: {
994
- width: dockDragActive || horizontalDockAlign !== null
995
- ? expandedWidthCss
996
- : undefined,
993
+ }, className: cn("relative flex flex-col bg-background text-foreground", !dockDragActive ? "self-stretch" : "", !dockDragActive && horizontalDockAlign === "right" ? "ml-auto" : "", border ? "border border-border" : "", elevationClass(elevation), className), style: {
994
+ width: !isHorizontalDockZone && isCollapsed ? collapsedWidthCss : expandedWidthCss,
997
995
  ...style
998
996
  }, children: [shellHeaderRow, !isCollapsed ? (_jsx("div", { className: cn("absolute z-50 flex flex-col bg-background text-foreground", effectiveMenuStyle === "tiered" ? "overflow-visible" : "overflow-auto", effectiveDockZone === "bottom" ? "bottom-full" : "top-full", horizontalDockAlign === "right" ? "right-0" : "left-0", "min-w-[240px]", effectiveMenuStyle !== "tiered" ? "max-h-[60vh]" : "", "border border-border", elevationClass(elevation === "none" ? "sm" : elevation)), children: shellContentArea })) : null] })) : (sidebarShell);
999
997
  const menuHintNode = menuHint && typeof document !== "undefined"
package/dist/layout/SgToolBar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAwIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA8iBxD;yBA9iBe,SAAS;;;AAgjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CA8HpE;yBA/He,mBAAmB"}
1
+ {"version":3,"file":"SgToolBar.d.ts","sourceRoot":"","sources":["../../src/layout/SgToolBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,6BAA6B,GACrC,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,kBAAkB,CAAC;AACvB,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IAExD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAwIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,2CA8iBxD;yBA9iBe,SAAS;;;AAgjBzB,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAmIpE;yBApIe,mBAAmB"}