@ttoss/forms 0.36.6 → 0.37.0

package/README.md

@@ -398,6 +398,25 @@ const options = [
 />
 ```
 
+### FormFieldSegmentedControl
+
+Segmented control field wrapping the `SegmentedControl` from `@ttoss/ui`. Use this field when you want a compact set of mutually-exclusive options presented as segmented buttons.
+
+Props are the common form field props plus any `SegmentedControl` props (except `value` and `className`). Notably, the `variant` prop is supported and defaults to `"secondary"` if not provided.
+
+```tsx
+<FormFieldSegmentedControl
+  name="viewMode"
+  label="View"
+  options={[
+    { value: 'list', label: 'List' },
+    { value: 'grid', label: 'Grid' },
+  ]}
+  variant="primary" // optional, defaults to "secondary"
+  defaultValue="list"
+/>
+```
+
 When using a `placeholder`, an empty option is automatically added if not present:
 
 ```tsx

package/dist/esm/MultistepForm/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-2ZLGQ7EE.js";
+import { Form, useForm, yupResolver } from "../chunk-7SI2CKE4.js";
 import { __name } from "../chunk-QJQFXN4B.js";
 
 // src/MultistepForm/MultistepForm.tsx

package/dist/esm/{chunk-2ZLGQ7EE.js → chunk-7SI2CKE4.js}

@@ -626,6 +626,59 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
   });
 }, "FormFieldRadioCardIcony");
 
+// src/FormFieldSegmentedControl.tsx
+import { SegmentedControl } from "@ttoss/ui";
+var FormFieldSegmentedControl = /* @__PURE__ */__name(({
+  defaultValue = "",
+  disabled,
+  ...props
+}) => {
+  const {
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx: fieldSx,
+    css,
+    rules,
+    id,
+    auxiliaryCheckbox,
+    onChange,
+    variant = "secondary",
+    ...segmentedProps
+  } = props;
+  return /* @__PURE__ */React.createElement(FormField, {
+    id,
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx: fieldSx,
+    css,
+    defaultValue,
+    rules,
+    disabled,
+    auxiliaryCheckbox,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(SegmentedControl, {
+        ...segmentedProps,
+        ...field,
+        variant,
+        value: field.value,
+        onChange: /* @__PURE__ */__name(v => {
+          field.onChange(v);
+          onChange?.(v);
+        }, "onChange"),
+        disabled: disabled ?? field.disabled,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }, "render")
+  });
+}, "FormFieldSegmentedControl");
+
 // src/FormFieldSelect.tsx
 import { Select } from "@ttoss/ui";
 var FormFieldSelect = /* @__PURE__ */__name(({
@@ -970,4 +1023,4 @@ import * as yup2 from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Controller, FormProvider as FormProvider2, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-2ZLGQ7EE.js";
+import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-7SI2CKE4.js";
 import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-QJQFXN4B.js";
-export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
+export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
+import { BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SegmentedControlProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
 import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
 export * from 'react-hook-form';
@@ -97,6 +97,9 @@ type FormFieldRadioCardIconyProps<TFieldValues extends FieldValues = FieldValues
 };
 declare const FormFieldRadioCardIcony: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldRadioCardIconyProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
+type FormFieldSegmentedControlProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<SegmentedControlProps, 'value' | 'className'>;
+declare const FormFieldSegmentedControl: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldSegmentedControlProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
 type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<SelectProps, 'name' | 'defaultValue'>;
 declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
@@ -117,4 +120,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { type DateRangePreset, Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };
+export { type DateRangePreset, Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.36.6",
+  "version": "0.37.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,9 +39,9 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.11.5",
+    "@ttoss/components": "^2.11.6",
     "@ttoss/react-i18n": "^2.0.25",
-    "@ttoss/ui": "^6.3.2"
+    "@ttoss/ui": "^6.4.0"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -51,13 +51,13 @@
     "react-error-boundary": "^6.0.0",
     "tsup": "^8.5.1",
     "yup": "^1.7.1",
-    "@ttoss/components": "^2.11.5",
-    "@ttoss/config": "^1.35.12",
-    "@ttoss/i18n-cli": "^0.7.38",
-    "@ttoss/react-i18n": "^2.0.25",
+    "@ttoss/components": "^2.11.6",
     "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/ui": "^6.3.2",
-    "@ttoss/test-utils": "^4.0.2"
+    "@ttoss/react-i18n": "^2.0.25",
+    "@ttoss/test-utils": "^4.0.2",
+    "@ttoss/ui": "^6.4.0",
+    "@ttoss/config": "^1.35.12",
+    "@ttoss/i18n-cli": "^0.7.38"
   },
   "publishConfig": {
     "access": "public",