@wellingtonhlc/shared-ui 0.25.6 → 0.25.8

package/README.md

@@ -205,6 +205,40 @@ para declarar o formato esperado pelo campo:
 
 `enableTime` permanece suportado como alias legado para `mode="dateTime"`.
 
+## FieldGroup
+
+`FieldGroup` renderiza um grupo visual de campos com legenda. A borda vem ativa por
+padrao; use `bordered={false}` quando o consumidor precisar manter a semantica de
+grupo sem adicionar contorno visual.
+
+```tsx
+import { FieldGroup, TextField } from '@wellingtonhlc/shared-ui';
+
+<FieldGroup title="Endereco" bordered={false}>
+  <TextField label="CEP" />
+  <TextField label="Cidade" />
+</FieldGroup>;
+```
+
+## RadioGroup
+
+`RadioGroup` segue a mesma escala de altura dos campos base (`xs`, `sm`, `md`,
+`lg`) para alinhar visualmente com `TextField`, `SelectField` e demais controles
+na mesma linha de formulario.
+
+O padrao `boxed` renderiza um `fieldset` com legenda, fazendo a borda contornar
+o grupo a partir da label. Use `variant="plain"` quando precisar do grupo sem
+borda.
+
+```tsx
+import { RadioGroup } from '@wellingtonhlc/shared-ui';
+
+<RadioGroup label="Tipo Pessoa" value={1} onChange={setType}>
+  <RadioGroup.Item value={1} label="Fisica" />
+  <RadioGroup.Item value={2} label="Juridica" />
+</RadioGroup>;
+```
+
 ## AppShell.Topbar.Button
 
 Use `AppShell.Topbar.Button` para acoes de icone na barra superior, como notificacoes,

package/dist/components/Button.js

@@ -6,10 +6,10 @@ const variantClasses = {
     secondary: 'border-[color-mix(in_srgb,var(--brand)_34%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_12%,var(--surface))] text-[color-mix(in_srgb,var(--brand)_88%,var(--foreground))] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_8%,transparent)] hover:border-[color-mix(in_srgb,var(--brand)_48%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:border-[color-mix(in_srgb,var(--brand)_42%,var(--app-border))] dark:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:text-[color-mix(in_srgb,var(--brand)_42%,#fff)] dark:hover:bg-[color-mix(in_srgb,var(--brand)_24%,var(--surface))] dark:hover:text-[color-mix(in_srgb,var(--brand)_30%,#fff)]',
     ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_14%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
     outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:border-[color-mix(in_srgb,var(--brand)_54%,var(--app-border))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
-    information: 'border-transparent bg-[var(--status-info-text,#1d4ed8)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-info-text,#1d4ed8)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-info-text,#1d4ed8)_88%,#000)]',
-    success: 'border-transparent bg-[var(--status-success-text,#15803d)] text-white hover:bg-[color-mix(in_srgb,var(--status-success-text,#15803d)_88%,#000)]',
-    warning: 'border-transparent bg-[var(--status-warning-text,#92400e)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-warning-text,#92400e)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-warning-text,#92400e)_88%,#000)]',
-    danger: 'border-transparent bg-[var(--status-danger-text,#b91c1c)] text-white hover:bg-[color-mix(in_srgb,var(--status-danger-text,#b91c1c)_88%,#000)]',
+    information: 'border-[var(--status-info-border,#93c5fd)] bg-[var(--status-info-bg,rgba(219,234,254,0.8))] text-[var(--status-info-text,#1d4ed8)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-info-border,#93c5fd)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-info-bg,rgba(219,234,254,0.8))_78%,var(--status-info-border,#93c5fd))]',
+    success: 'border-[var(--status-success-border,#86efac)] bg-[var(--status-success-bg,rgba(220,252,231,0.8))] text-[var(--status-success-text,#15803d)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-success-border,#86efac)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-success-bg,rgba(220,252,231,0.8))_78%,var(--status-success-border,#86efac))]',
+    warning: 'border-[var(--status-warning-border,#fcd34d)] bg-[var(--status-warning-bg,rgba(254,243,199,0.8))] text-[var(--status-warning-text,#92400e)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-warning-border,#fcd34d)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-warning-bg,rgba(254,243,199,0.8))_78%,var(--status-warning-border,#fcd34d))]',
+    danger: 'border-[var(--status-danger-border,#fca5a5)] bg-[var(--status-danger-bg,rgba(254,202,202,0.8))] text-[var(--status-danger-text,#b91c1c)] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--status-danger-border,#fca5a5)_18%,transparent)] hover:bg-[color-mix(in_srgb,var(--status-danger-bg,rgba(254,202,202,0.8))_78%,var(--status-danger-border,#fca5a5))]',
     destructive: 'border-transparent bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_88%,#000)]',
     sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[var(--brand)]',
 };

package/dist/components/FieldControl.js

@@ -12,7 +12,7 @@ export const FieldControl = ({ label, id, wrapperClassName, labelClassName = '',
     const roundedClass = roundedFull ? 'fc-rounded-full' : '';
     const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
     const labelSizeClassMap = {
-        xs: 'text-[10px] mb-0.5',
+        xs: 'text-[10px]',
         sm: 'text-xs',
         md: 'text-sm',
         lg: 'text-base',

package/dist/components/FieldGroup.d.ts

@@ -3,8 +3,9 @@ export interface FieldGroupProps {
     title: string;
     children: ReactNode;
     className?: string;
+    bordered?: boolean;
     titleAlign?: 'left' | 'center' | 'right';
 }
-export declare function FieldGroup({ children, className, title, titleAlign }: FieldGroupProps): import("react").JSX.Element;
+export declare function FieldGroup({ bordered, children, className, title, titleAlign }: FieldGroupProps): import("react").JSX.Element;
 export declare const FormSection: typeof FieldGroup;
 //# sourceMappingURL=FieldGroup.d.ts.map

package/dist/components/FieldGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C;AAQD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,UAAmB,EAAE,EAAE,eAAe,+BAS9F;AAED,eAAO,MAAM,WAAW,mBAAa,CAAC"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC1C;AAQD,wBAAgB,UAAU,CAAC,EAAE,QAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,UAAmB,EAAE,EAAE,eAAe,+BAS/G;AAED,eAAO,MAAM,WAAW,mBAAa,CAAC"}

package/dist/components/FieldGroup.js

@@ -5,7 +5,7 @@ const titleAlignClass = {
     center: 'mx-auto',
     right: 'ml-auto',
 };
-export function FieldGroup({ children, className, title, titleAlign = 'left' }) {
-    return (_jsxs("fieldset", { className: cn('border-app-border rounded-xl border px-4 pb-4 pt-2', className), children: [_jsx("legend", { className: cn('text-foreground-muted px-2 text-xs font-medium', titleAlignClass[titleAlign]), children: title }), children] }));
+export function FieldGroup({ bordered = true, children, className, title, titleAlign = 'left' }) {
+    return (_jsxs("fieldset", { className: cn('rounded-xl px-4 pb-4 pt-2', bordered && 'border-app-border border', className), children: [_jsx("legend", { className: cn('text-foreground-muted px-2 text-xs font-medium', titleAlignClass[titleAlign]), children: title }), children] }));
 }
 export const FormSection = FieldGroup;

package/dist/components/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type FieldValues } from 'react-hook-form';
-import type { FormControlSize } from './form-control-helpers';
+import { type FormControlSize } from './form-control-helpers';
 export interface RadioGroupProps<TFieldValues extends FieldValues = FieldValues> {
     value?: string | number | null;
     onChange?: (value: string | number) => void;
@@ -12,6 +12,7 @@ export interface RadioGroupProps<TFieldValues extends FieldValues = FieldValues>
     disabled?: boolean;
     size?: FormControlSize;
     direction?: 'row' | 'column';
+    variant?: 'plain' | 'boxed';
     children?: React.ReactNode;
     control?: unknown;
     rules?: unknown;

package/dist/components/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAe9D,MAAM,WAAW,eAAe,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0DD,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBA6BrF;AAaD,iBAAS,cAAc,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,qBAM3G;AAED,eAAO,MAAM,UAAU;;CAA0C,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAAgB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAe5E,MAAM,WAAW,eAAe,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2JD,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,qBA6BrF;AAaD,iBAAS,cAAc,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,eAAe,CAAC,YAAY,CAAC,qBAM3G;AAED,eAAO,MAAM,UAAU;;CAA0C,CAAC"}

package/dist/components/RadioGroup.js

@@ -3,6 +3,8 @@ import React from 'react';
 import { useController, } from 'react-hook-form';
 import { cn } from '../utils/cn';
 import { FieldControl } from './FieldControl';
+import { FieldValidationError } from './FieldValidationError';
+import { fieldWrapper } from './form-control-helpers';
 const RadioGroupContext = React.createContext({
     size: 'sm',
     onChange: () => { },
@@ -13,15 +15,48 @@ const sizeStyles = {
     md: { outer: 'h-5 w-5', dot: 'h-2.5 w-2.5', text: 'text-sm' },
     lg: { outer: 'h-6 w-6', dot: 'h-3 w-3', text: 'text-base' },
 };
-function RadioGroupBase({ children, direction = 'row', disabled = false, errorMessage, inputDisabled, inputName, inputOnBlur, inputValue, label, labelClassName = '', name, onChange, onValueChange, size = 'sm', value, wrapperClassName, }) {
+const groupHeightStyles = {
+    xs: 'h-7',
+    sm: 'h-9',
+    md: 'h-12',
+    lg: 'h-14',
+};
+const groupMinHeightStyles = {
+    xs: 'min-h-7',
+    sm: 'min-h-9',
+    md: 'min-h-12',
+    lg: 'min-h-14',
+};
+const groupPaddingStyles = {
+    xs: 'px-2',
+    sm: 'px-3',
+    md: 'px-4',
+    lg: 'px-6',
+};
+const boxedFieldsetHeightStyles = {
+    xs: 'min-h-12',
+    sm: 'min-h-14',
+    md: 'min-h-[4.25rem]',
+    lg: 'min-h-[4.75rem]',
+};
+function RadioGroupBase({ children, direction = 'row', disabled = false, errorMessage, inputDisabled, inputName, inputOnBlur, inputValue, label, labelClassName = '', name, onChange, onValueChange, size = 'sm', value, variant = 'boxed', wrapperClassName, }) {
+    const generatedId = React.useId().replace(/:/g, '');
     const resolvedValue = inputValue ?? value;
     const resolvedName = inputName ?? name;
     const resolvedDisabled = inputDisabled ?? disabled;
+    const legendId = `rg-${generatedId}-legend`;
+    const errorId = `rg-${generatedId}-error`;
+    const describedBy = errorMessage ? errorId : undefined;
     function handleChange(nextValue) {
         onValueChange?.(nextValue);
         onChange?.(nextValue);
     }
-    return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsx(FieldControl, { label: label, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: () => (_jsx("div", { role: "radiogroup", "aria-label": label, onBlur: inputOnBlur, className: cn('flex gap-3', direction === 'column' ? 'flex-col' : 'flex-row flex-wrap'), children: children })) }) }));
+    const groupClassName = cn('flex gap-3', direction === 'column' ? groupMinHeightStyles[size] : groupHeightStyles[size], direction === 'column' ? 'flex-col items-start justify-center' : 'flex-row flex-wrap items-center');
+    const boxedGroupClassName = cn(groupClassName, direction === 'row' && 'justify-around', groupPaddingStyles[size]);
+    if (variant === 'plain') {
+        return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsx(FieldControl, { label: label, wrapperClassName: wrapperClassName, labelClassName: labelClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: () => (_jsx("div", { role: "radiogroup", "aria-label": label, "aria-describedby": describedBy, onBlur: inputOnBlur, className: groupClassName, children: children })) }) }));
+    }
+    return (_jsx(RadioGroupContext.Provider, { value: { name: resolvedName, value: resolvedValue, disabled: resolvedDisabled, size, onChange: handleChange }, children: _jsxs("div", { className: cn(fieldWrapper, wrapperClassName), "data-disabled": resolvedDisabled || undefined, "data-invalid": !!errorMessage || undefined, children: [_jsxs("fieldset", { className: cn('border-app-border flex h-full flex-1 flex-col justify-center rounded-xl border px-3 pb-2 pt-0 transition-[background-color,border-color,box-shadow,color] duration-200', boxedFieldsetHeightStyles[size], resolvedDisabled && 'cursor-not-allowed opacity-60', errorMessage && 'border-red-500 dark:border-red-400'), children: [label ? (_jsx("legend", { id: legendId, className: cn('text-foreground-muted px-2 text-xs font-medium transition-colors', resolvedDisabled && 'cursor-not-allowed opacity-70', errorMessage && 'text-red-600 dark:text-red-400', labelClassName), children: label })) : null, _jsx("div", { role: "radiogroup", "aria-label": label ? undefined : resolvedName, "aria-labelledby": label ? legendId : undefined, "aria-describedby": describedBy, onBlur: inputOnBlur, className: boxedGroupClassName, children: children })] }), _jsx(FieldValidationError, { id: errorId, message: errorMessage })] }) }));
 }
 function Item({ className, disabled: itemDisabled, label, value }) {
     const { value: groupValue, disabled: groupDisabled, size, onChange } = React.useContext(RadioGroupContext);

package/dist/components/form-control-helpers.d.ts

@@ -1,5 +1,5 @@
 export declare const fieldWrapper = "flex w-full flex-col space-y-1";
-export declare const labelBase = "mb-1 text-md font-medium";
+export declare const labelBase = "text-md font-medium";
 export type FormControlVariant = 'default' | 'filled' | 'ghost' | 'neutral';
 interface ControlClassOptions {
     errorMessage?: string;

package/dist/components/form-control-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-control-helpers.d.ts","sourceRoot":"","sources":["../../src/components/form-control-helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mCAAmC,CAAC;AAE7D,eAAO,MAAM,SAAS,6BAA6B,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAgC5E,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;AAClG,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC"}
+{"version":3,"file":"form-control-helpers.d.ts","sourceRoot":"","sources":["../../src/components/form-control-helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mCAAmC,CAAC;AAE7D,eAAO,MAAM,SAAS,wBAAwB,CAAC;AAE/C,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAgC5E,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;AAClG,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC"}

package/dist/components/form-control-helpers.js

@@ -1,6 +1,6 @@
 import { cn } from '../utils/cn';
 export const fieldWrapper = 'flex w-full flex-col space-y-1';
-export const labelBase = 'mb-1 text-md font-medium';
+export const labelBase = 'text-md font-medium';
 const controlShared = cn('text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 font-medium border', 'transition-[background-color,border-color,box-shadow,color] duration-200', 'disabled:cursor-not-allowed disabled:opacity-60');
 const controlDefault = cn(controlShared, 'bg-surface border-app-border', 'enabled:hover:border-brand', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');
 const controlFilled = cn(controlShared, 'bg-input-bg border-app-border', 'enabled:hover:border-brand enabled:hover:bg-[color-mix(in_srgb,var(--input-bg)_75%,var(--surface))]', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');

package/dist/styles.css

@@ -956,6 +956,9 @@ h2.react-datepicker__current-month {
   .order-3 {
     order: 3;
   }
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
   .col-span-12 {
     grid-column: span 12 / span 12;
   }
@@ -1019,9 +1022,6 @@ h2.react-datepicker__current-month {
   .mb-0 {
     margin-bottom: calc(var(--spacing) * 0);
   }
-  .mb-0\.5 {
-    margin-bottom: calc(var(--spacing) * 0.5);
-  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1289,6 +1289,12 @@ h2.react-datepicker__current-month {
   .min-h-\[2rem\] {
     min-height: 2rem;
   }
+  .min-h-\[4\.25rem\] {
+    min-height: 4.25rem;
+  }
+  .min-h-\[4\.75rem\] {
+    min-height: 4.75rem;
+  }
   .min-h-\[10rem\] {
     min-height: 10rem;
   }
@@ -1591,6 +1597,9 @@ h2.react-datepicker__current-month {
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .grid-cols-\[8rem_minmax\(0\,1fr\)\] {
     grid-template-columns: 8rem minmax(0,1fr);
   }
@@ -1642,6 +1651,9 @@ h2.react-datepicker__current-month {
   .items-stretch {
     align-items: stretch;
   }
+  .justify-around {
+    justify-content: space-around;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -1989,27 +2001,15 @@ h2.react-datepicker__current-month {
   .bg-\[var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)\] {
     background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
   }
-  .bg-\[var\(--status-danger-text\,\#b91c1c\)\] {
-    background-color: var(--status-danger-text,#b91c1c);
-  }
   .bg-\[var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)\] {
     background-color: var(--status-info-bg,rgba(219,234,254,0.8));
   }
-  .bg-\[var\(--status-info-text\,\#1d4ed8\)\] {
-    background-color: var(--status-info-text,#1d4ed8);
-  }
   .bg-\[var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)\] {
     background-color: var(--status-success-bg,rgba(220,252,231,0.8));
   }
-  .bg-\[var\(--status-success-text\,\#15803d\)\] {
-    background-color: var(--status-success-text,#15803d);
-  }
   .bg-\[var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)\] {
     background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
   }
-  .bg-\[var\(--status-warning-text\,\#92400e\)\] {
-    background-color: var(--status-warning-text,#92400e);
-  }
   .bg-app-border {
     background-color: var(--color-app-border);
   }
@@ -2181,6 +2181,9 @@ h2.react-datepicker__current-month {
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2618,20 +2621,6 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--status-info-text\,\#1d4ed8\)_70\%\,\#000\)\] {
-    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--status-info-text,#1d4ed8));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-text,#1d4ed8) 70%,#000));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--status-warning-text\,\#92400e\)_70\%\,\#000\)\] {
-    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--status-warning-text,#92400e));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-text,#92400e) 70%,#000));
-    }
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-\[0_12px_32px_rgba\(15\,23\,42\,0\.06\)\] {
     --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(15,23,42,0.06));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2658,6 +2647,34 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-danger-border\,\#fca5a5\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-danger-border,#fca5a5));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-danger-border,#fca5a5) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-info-border\,\#93c5fd\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-info-border,#93c5fd));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-border,#93c5fd) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-success-border\,\#86efac\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-success-border,#86efac));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-success-border,#86efac) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-warning-border\,\#fcd34d\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-warning-border,#fcd34d));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-border,#fcd34d) 18%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.10\)\] {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3077,42 +3094,42 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-text\,\#b91c1c\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)_78\%\,var\(--status-danger-border\,\#fca5a5\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-danger-text,#b91c1c);
+        background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-danger-text,#b91c1c) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-danger-bg,rgba(254,202,202,0.8)) 78%,var(--status-danger-border,#fca5a5));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-text\,\#1d4ed8\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)_78\%\,var\(--status-info-border\,\#93c5fd\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-info-text,#1d4ed8);
+        background-color: var(--status-info-bg,rgba(219,234,254,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-info-text,#1d4ed8) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-info-bg,rgba(219,234,254,0.8)) 78%,var(--status-info-border,#93c5fd));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-text\,\#15803d\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)_78\%\,var\(--status-success-border\,\#86efac\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-success-text,#15803d);
+        background-color: var(--status-success-bg,rgba(220,252,231,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-success-text,#15803d) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-success-bg,rgba(220,252,231,0.8)) 78%,var(--status-success-border,#86efac));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-text\,\#92400e\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)_78\%\,var\(--status-warning-border\,\#fcd34d\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-warning-text,#92400e);
+        background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-warning-text,#92400e) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-warning-bg,rgba(254,243,199,0.8)) 78%,var(--status-warning-border,#fcd34d));
         }
       }
     }
@@ -3839,6 +3856,11 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .dark\:border-red-400 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-red-400);
+    }
+  }
   .dark\:\!bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
     @media (prefers-color-scheme: dark) {
       background-color: rgb(var(--color-brand)/0.13) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.25.6",
+    "version": "0.25.8",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",