react-science 19.5.1 → 19.6.0

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.d.ts

@@ -1,8 +1,11 @@
 import type { PopoverProps } from '@blueprintjs/core';
 import type { ColorPickerProps } from '../react-color/ColorPicker.js';
-interface ColorPickerDropdownProps extends Pick<ColorPickerProps, 'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'> {
+export interface ColorPickerDropdownProps extends Pick<ColorPickerProps, 'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'> {
     popoverProps?: Omit<PopoverProps, 'content'>;
+    /**
+     * To link with label
+     */
+    id?: string;
 }
 export declare function ColorPickerDropdown(props: ColorPickerDropdownProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=ColorPickerDropdown.d.ts.map

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAItE,UAAU,wBAAyB,SAAQ,IAAI,CAC7C,gBAAgB,EAChB,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,kBAAkB,CAC5E;IACC,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;CAC9C;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAmBlE"}
+{"version":3,"file":"ColorPickerDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAItE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,gBAAgB,EAChB,OAAO,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,GAAG,kBAAkB,CAC5E;IACC,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;IAE7C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAmBlE"}

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js

@@ -18,8 +18,8 @@ const ColorPickerPreview = styled.div `
   border-radius: 0.125rem;
 `;
 export function ColorPickerDropdown(props) {
-    const { color, popoverProps, ...otherProps } = props;
+    const { color, popoverProps, id, ...otherProps } = props;
     const { hex } = colorHelper.toState(color || 'white');
-    return (_jsx(Popover, { targetProps: { style: { width: '100%' } }, content: _jsx(ColorPicker, { color: color, ...otherProps }), minimal: true, ...popoverProps, children: _jsx(ColorPickerRoot, { type: "button", children: _jsx(ColorPickerPreview, { children: _jsx(FixedColorPreview, { color: hex }) }) }) }));
+    return (_jsx(Popover, { targetProps: { style: { width: '100%' } }, content: _jsx(ColorPicker, { color: color, ...otherProps }), minimal: true, ...popoverProps, children: _jsx(ColorPickerRoot, { type: "button", id: id, children: _jsx(ColorPickerPreview, { children: _jsx(FixedColorPreview, { color: hex }) }) }) }));
 }
 //# sourceMappingURL=ColorPickerDropdown.js.map

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,KAAK,WAAW,MAAM,iCAAiC,CAAC;AAS/D,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAErD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,OAAO,CACL,KAAC,OAAO,IACN,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EACzC,OAAO,EAAE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,EACtD,OAAO,WACH,YAAY,YAEhB,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,YAC5B,KAAC,kBAAkB,cACjB,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GACd,GACL,GACV,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ColorPickerDropdown.js","sourceRoot":"","sources":["../../../../src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,iBAAiB,MAAM,iCAAiC,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,KAAK,WAAW,MAAM,iCAAiC,CAAC;AAc/D,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;CAOpC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAEzD,MAAM,EAAE,GAAG,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC;IAEtD,OAAO,CACL,KAAC,OAAO,IACN,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EACzC,OAAO,EAAE,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,KAAM,UAAU,GAAI,EACtD,OAAO,WACH,YAAY,YAEhB,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,YACnC,KAAC,kBAAkB,cACjB,KAAC,iBAAiB,IAAC,KAAK,EAAE,GAAG,GAAI,GACd,GACL,GACV,CACX,CAAC;AACJ,CAAC"}

package/lib/components/form/components/field_groups/fieldset.d.ts

@@ -0,0 +1,9 @@
+export declare const Fieldset: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, {}>;
+export declare const Legend: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLLegendElement>, HTMLLegendElement>, {}>;
+//# sourceMappingURL=fieldset.d.ts.map

package/lib/components/form/components/field_groups/fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/fieldset.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ;;;2HAIpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAGlB,CAAC"}

package/lib/components/form/components/field_groups/fieldset.js

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+export const Fieldset = styled.fieldset `
+  display: block;
+  border-top: 1px lightgrey groove;
+  min-inline-size: min-content;
+`;
+export const Legend = styled.legend `
+  display: block;
+  padding-inline-end: 5px;
+`;
+//# sourceMappingURL=fieldset.js.map

package/lib/components/form/components/field_groups/fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA;;;;CAItC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;CAGlC,CAAC"}

package/lib/components/form/components/field_groups/index.d.ts

@@ -0,0 +1,7 @@
+export { FieldGroupSVGTextStyleFields } from './svg_text_style.js';
+export type { SVGTextStyleFieldsProps } from './svg_text_style.js';
+export { svgTextStyleFieldsSchema } from './svg_text_style.schema.js';
+export { FieldGroupSVGLineStyleFields } from './svg_line_style.js';
+export type { SVGLineStyleFieldsProps } from './svg_line_style.js';
+export { svgLineStyleFieldsSchema } from './svg_line_style.schema.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/components/field_groups/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/form/components/field_groups/index.js

@@ -0,0 +1,5 @@
+export { FieldGroupSVGTextStyleFields } from './svg_text_style.js';
+export { svgTextStyleFieldsSchema } from './svg_text_style.schema.js';
+export { FieldGroupSVGLineStyleFields } from './svg_line_style.js';
+export { svgLineStyleFieldsSchema } from './svg_line_style.schema.js';
+//# sourceMappingURL=index.js.map

package/lib/components/form/components/field_groups/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,4BAA4B,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/components/form/components/field_groups/svg_line_style.d.ts

@@ -0,0 +1,40 @@
+export interface SVGLineStyleFieldsProps {
+    label: string;
+}
+export declare const FieldGroupSVGLineStyleFields: <TFormData, TFields extends import("@tanstack/form-core").DeepKeysOfType<TFormData, {
+    stroke: string;
+    strokeOpacity: string;
+    strokeWidth: string;
+    strokeDasharray: "solid" | "dashed" | "dotted" | "dashed-dot";
+} | null | undefined> | {
+    stroke: import("@tanstack/form-core").DeepKeysOfType<TFormData, string>;
+    strokeOpacity: import("@tanstack/form-core").DeepKeysOfType<TFormData, string>;
+    strokeWidth: import("@tanstack/form-core").DeepKeysOfType<TFormData, string>;
+    strokeDasharray: import("@tanstack/form-core").DeepKeysOfType<TFormData, "solid" | "dashed" | "dotted" | "dashed-dot">;
+}, TOnMount extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<SVGLineStyleFieldsProps> & {
+    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta, {
+        readonly Input: typeof import("../input/input.tsx").Input;
+        readonly NumericInput: typeof import("../input/numeric_input.tsx").NumericInput;
+        readonly Checkbox: typeof import("../input/checkbox.tsx").Checkbox;
+        readonly Select: typeof import("../input/select.tsx").Select;
+        readonly Switch: typeof import("../input/switch.tsx").Switch;
+        readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
+    }, {
+        readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
+        readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
+        readonly Section: typeof import("../layout/Section.tsx").Section;
+    }> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/form-core").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, TFormSubmitMeta, {
+        readonly Input: typeof import("../input/input.tsx").Input;
+        readonly NumericInput: typeof import("../input/numeric_input.tsx").NumericInput;
+        readonly Checkbox: typeof import("../input/checkbox.tsx").Checkbox;
+        readonly Select: typeof import("../input/select.tsx").Select;
+        readonly Switch: typeof import("../input/switch.tsx").Switch;
+        readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
+    }, {
+        readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
+        readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
+        readonly Section: typeof import("../layout/Section.tsx").Section;
+    }>;
+    fields: TFields;
+}>) => ReturnType<import("react").FunctionComponent>;
+//# sourceMappingURL=svg_line_style.d.ts.map

package/lib/components/form/components/field_groups/svg_line_style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_line_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_line_style.tsx"],"names":[],"mappings":"AA4BA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;CACf;AAaD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAqCvC,CAAC"}

package/lib/components/form/components/field_groups/svg_line_style.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { memo } from 'react';
+import { SVGStyledLine } from '../../../svg/index.js';
+import { withFieldGroup } from '../../context/use_ts_form.js';
+import { FormGroup } from '../input_groups/form_group.js';
+import { Fieldset, Legend } from './fieldset.js';
+import { svgLineStyleFieldsSchema } from './svg_line_style.schema.js';
+// https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#reusing-groups-of-fields-in-multiple-forms
+// Default values are not used at runtime (same for props).
+const defaultValues = {
+    stroke: '#000000',
+    strokeOpacity: '1',
+    strokeWidth: '1',
+    strokeDasharray: 'solid',
+};
+const inferSVGLineStyleFieldsProps = {
+    label: '',
+};
+const patternsOptions = [
+    { label: 'Solid', value: 'solid' },
+    { label: 'Dotted', value: 'dotted' },
+    { label: 'Dashed', value: 'dashed' },
+    { label: 'Dashed Dot', value: 'dashed-dot' },
+];
+export const FieldGroupSVGLineStyleFields = withFieldGroup({
+    defaultValues,
+    props: inferSVGLineStyleFieldsProps,
+    render({ group, label }) {
+        return (_jsxs(Fieldset, { children: [_jsx(Legend, { children: label }), _jsx(group.AppField, { name: "stroke", children: (field) => _jsx(field.ColorPicker, { label: "Color", disableAlpha: true }) }), _jsx(group.AppField, { name: "strokeOpacity", children: (field) => (_jsx(field.NumericInput, { label: "Opacity", min: 0, max: 1, minorStepSize: 0.01, step: 0.05, majorStepSize: 0.1 })) }), _jsx(group.AppField, { name: "strokeWidth", children: (field) => _jsx(field.NumericInput, { label: "Width" }) }), _jsx(group.AppField, { name: "strokeDasharray", children: (field) => _jsx(field.Select, { label: "Style", items: patternsOptions }) }), _jsx(FormGroup, { label: "Preview", children: _jsx(group.Subscribe, { selector: (state) => state.values, children: (values) => _jsx(LineStyleFieldPreview, { ...values }) }) })] }));
+    },
+});
+const LineStyleFieldPreviewContainer = styled.div `
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+`;
+const LineStyleFieldPreview = memo(function TextStyleFieldPreview(props) {
+    const parsedValues = svgLineStyleFieldsSchema.parse(props);
+    return (_jsx(LineStyleFieldPreviewContainer, { children: _jsx("svg", { viewBox: "0 0 180 30", children: _jsx(SVGStyledLine, { x1: 0, x2: 180, y1: 15, y2: 15, ...parsedValues, opacity: 1 }) }) }));
+});
+//# sourceMappingURL=svg_line_style.js.map

package/lib/components/form/components/field_groups/svg_line_style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_line_style.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_line_style.tsx"],"names":[],"mappings":"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"}

package/lib/components/form/components/field_groups/svg_line_style.schema.d.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+export declare const svgLineStyleFieldsSchema: z.ZodObject<{
+    stroke: z.ZodString;
+    strokeOpacity: z.ZodCoercedNumber<string>;
+    strokeWidth: z.ZodCoercedNumber<string>;
+    strokeDasharray: z.ZodEnum<{
+        readonly solid: "solid";
+        readonly dashed: "dashed";
+        readonly dotted: "dotted";
+        readonly 'dashed-dot': "dashed-dot";
+    }>;
+}, z.core.$strip>;
+//# sourceMappingURL=svg_line_style.schema.d.ts.map

package/lib/components/form/components/field_groups/svg_line_style.schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_line_style.schema.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_line_style.schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,wBAAwB;;;;;;;;;;iBAUnC,CAAC"}

package/lib/components/form/components/field_groups/svg_line_style.schema.js

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+import { SVGStyledLineStrokePattern } from '../../../svg/index.js';
+export const svgLineStyleFieldsSchema = z.object({
+    stroke: z
+        .string()
+        .trim()
+        .regex(/^#[0-9a-fA-F]{6}$/, {
+        message: 'Color must be hexadecimal and should not contain alpha',
+    }),
+    strokeOpacity: z.coerce.number().min(0).max(1),
+    strokeWidth: z.coerce.number(),
+    strokeDasharray: z.enum(SVGStyledLineStrokePattern),
+});
+//# sourceMappingURL=svg_line_style.schema.js.map

package/lib/components/form/components/field_groups/svg_line_style.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_line_style.schema.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_line_style.schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC/C,MAAM,EAAE,CAAC;SACN,MAAM,EAAE;SACR,IAAI,EAAE;SACN,KAAK,CAAC,mBAAmB,EAAE;QAC1B,OAAO,EAAE,wDAAwD;KAClE,CAAC;IACJ,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,EAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACtD,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,EAAU;IACtC,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,0BAA0B,CAAC;CACpD,CAAC,CAAC"}

package/lib/components/form/components/field_groups/svg_text_style.d.ts

@@ -0,0 +1,41 @@
+export interface SVGTextStyleFieldsProps {
+    label: string;
+    previewText?: string;
+}
+export declare const FieldGroupSVGTextStyleFields: <TFormData, TFields extends import("@tanstack/form-core").DeepKeysOfType<TFormData, {
+    fill: string;
+    fontSize: string;
+    fontStyle: "italic" | "normal";
+    fontWeight: "bold" | "normal";
+} | null | undefined> | {
+    fill: import("@tanstack/form-core").DeepKeysOfType<TFormData, string>;
+    fontSize: import("@tanstack/form-core").DeepKeysOfType<TFormData, string>;
+    fontStyle: import("@tanstack/form-core").DeepKeysOfType<TFormData, "italic" | "normal">;
+    fontWeight: import("@tanstack/form-core").DeepKeysOfType<TFormData, "bold" | "normal">;
+}, TOnMount extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/form-core").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/form-core").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<SVGTextStyleFieldsProps> & {
+    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TFormSubmitMeta, {
+        readonly Input: typeof import("../input/input.tsx").Input;
+        readonly NumericInput: typeof import("../input/numeric_input.tsx").NumericInput;
+        readonly Checkbox: typeof import("../input/checkbox.tsx").Checkbox;
+        readonly Select: typeof import("../input/select.tsx").Select;
+        readonly Switch: typeof import("../input/switch.tsx").Switch;
+        readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
+    }, {
+        readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
+        readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
+        readonly Section: typeof import("../layout/Section.tsx").Section;
+    }> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/form-core").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, TFormSubmitMeta, {
+        readonly Input: typeof import("../input/input.tsx").Input;
+        readonly NumericInput: typeof import("../input/numeric_input.tsx").NumericInput;
+        readonly Checkbox: typeof import("../input/checkbox.tsx").Checkbox;
+        readonly Select: typeof import("../input/select.tsx").Select;
+        readonly Switch: typeof import("../input/switch.tsx").Switch;
+        readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
+    }, {
+        readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
+        readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
+        readonly Section: typeof import("../layout/Section.tsx").Section;
+    }>;
+    fields: TFields;
+}>) => ReturnType<import("react").FunctionComponent>;
+//# sourceMappingURL=svg_text_style.d.ts.map

package/lib/components/form/components/field_groups/svg_text_style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_text_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA4DvC,CAAC"}

package/lib/components/form/components/field_groups/svg_text_style.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { memo } from 'react';
+import { SVGStyledText } from '../../../svg/index.js';
+import { withFieldGroup } from '../../context/use_ts_form.js';
+import { FormGroup } from '../input_groups/form_group.js';
+import { Fieldset, Legend } from './fieldset.js';
+import { svgTextStyleFieldsSchema } from './svg_text_style.schema.js';
+const TextStyleSwitchContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+`;
+// https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#reusing-groups-of-fields-in-multiple-forms
+// Default values are not used at runtime (same for props).
+const defaultValues = {
+    fill: '#000000',
+    fontSize: '16',
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+};
+const inferSVGTextStyleFieldsProps = {
+    label: '',
+};
+export const FieldGroupSVGTextStyleFields = withFieldGroup({
+    defaultValues,
+    props: inferSVGTextStyleFieldsProps,
+    render: function SVGTextStyleFields({ group, label, previewText = 'Placeholder', }) {
+        return (_jsxs(Fieldset, { children: [_jsx(Legend, { children: label }), _jsx(group.AppField, { name: "fill", children: (field) => _jsx(field.ColorPicker, { label: "Color" }) }), _jsx(group.AppField, { name: "fontSize", children: (field) => _jsx(field.NumericInput, { label: "Font size" }) }), _jsx(FormGroup, { label: "Font style", children: _jsxs(TextStyleSwitchContainer, { children: [_jsx(group.Field, { name: "fontWeight", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(BoldLabel, { children: "Bold" }), name: field.name, checked: fontWeightToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontWeight(e.target.checked)), onBlur: field.handleBlur })) }), _jsx(group.Field, { name: "fontStyle", children: (field) => (_jsx(Checkbox, { labelElement: _jsx(ItalicLabel, { children: "Italic" }), name: field.name, checked: fontStyleToBoolean(field.state.value), onChange: (e) => field.handleChange(booleanToFontStyle(e.target.checked)), onBlur: field.handleBlur })) })] }) }), _jsx(FormGroup, { label: "Preview", children: _jsx(group.Subscribe, { selector: (state) => state.values, children: (values) => (_jsx(TextStyleFieldPreview, { ...values, children: previewText })) }) })] }));
+    },
+});
+const TextStyleFieldPreviewContainer = styled.div `
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+`;
+const TextStyleFieldPreview = memo(function TextStyleFieldPreview(props) {
+    const parsedValues = svgTextStyleFieldsSchema.parse(props);
+    const svgHeight = Math.round(parsedValues.fontSize * 1.5);
+    const textY = Math.round(svgHeight / 4);
+    return (_jsx(TextStyleFieldPreviewContainer, { children: _jsx("svg", { height: svgHeight, width: "auto", children: _jsx(SVGStyledText, { dominantBaseline: "hanging", x: 0, y: textY, ...parsedValues, children: props.children }) }) }));
+});
+const BoldLabel = styled.span `
+  font-weight: bold;
+`;
+const ItalicLabel = styled.span `
+  font-style: italic;
+`;
+function fontWeightToBoolean(weight) {
+    return weight === 'bold';
+}
+function booleanToFontWeight(weight) {
+    return weight ? 'bold' : 'normal';
+}
+function fontStyleToBoolean(weight) {
+    return weight === 'italic';
+}
+function booleanToFontStyle(weight) {
+    return weight ? 'italic' : 'normal';
+}
+//# sourceMappingURL=svg_text_style.js.map

package/lib/components/form/components/field_groups/svg_text_style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_text_style.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"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"}

package/lib/components/form/components/field_groups/svg_text_style.schema.d.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+export declare const svgTextStyleFieldsSchema: z.ZodObject<{
+    fill: z.ZodString;
+    fontSize: z.ZodCoercedNumber<string>;
+    fontStyle: z.ZodEnum<{
+        italic: "italic";
+        normal: "normal";
+    }>;
+    fontWeight: z.ZodEnum<{
+        bold: "bold";
+        normal: "normal";
+    }>;
+}, z.core.$strip>;
+//# sourceMappingURL=svg_text_style.schema.d.ts.map

package/lib/components/form/components/field_groups/svg_text_style.schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_text_style.schema.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,wBAAwB;;;;;;;;;;;iBAKnC,CAAC"}

package/lib/components/form/components/field_groups/svg_text_style.schema.js

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+export const svgTextStyleFieldsSchema = z.object({
+    fill: z.string(),
+    fontSize: z.coerce.number(),
+    fontStyle: z.enum(['normal', 'italic']),
+    fontWeight: z.enum(['normal', 'bold']),
+});
+//# sourceMappingURL=svg_text_style.schema.js.map

package/lib/components/form/components/field_groups/svg_text_style.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_text_style.schema.js","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC/C,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE;IAChB,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,EAAU;IACnC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACvC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;CACvC,CAAC,CAAC"}

package/lib/components/form/components/input/color_picker.d.ts

@@ -1,5 +1,6 @@
+import type { ColorPickerDropdownProps } from '../../../color-picker/index.js';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
-type ColorPickerProps = Omit<FormGroupInputProps, 'placeholder'>;
+type ColorPickerProps = Omit<FormGroupInputProps, 'placeholder'> & Pick<ColorPickerDropdownProps, 'presetColors' | 'disableAlpha' | 'popoverProps'>;
 export declare function ColorPicker(props: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=color_picker.d.ts.map

package/lib/components/form/components/input/color_picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color_picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/color_picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,KAAK,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA6BlD"}
+{"version":3,"file":"color_picker.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/color_picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAI/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAGzE,KAAK,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,GAC9D,IAAI,CACF,wBAAwB,EACxB,cAAc,GAAG,cAAc,GAAG,cAAc,CACjD,CAAC;AAEJ,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmClD"}

package/lib/components/form/components/input/color_picker.js

@@ -4,6 +4,7 @@ import { useFieldContext } from '../../context/use_ts_form.js';
 import { FormGroup } from '../input_groups/form_group.js';
 export function ColorPicker(props) {
     const { label, helpText, layout, fullWidth, required } = props;
+    const { presetColors, disableAlpha, popoverProps } = props;
     const field = useFieldContext();
     const error = field
         .getMeta()
@@ -12,6 +13,6 @@ export function ColorPicker(props) {
     function onChange(color) {
         field.setValue(color.hex);
     }
-    return (_jsx(FormGroup, { name: field.name, label: label, helpText: helpText, error: error, layout: layout, fullWidth: fullWidth, required: required, intent: error ? 'danger' : 'none', children: _jsx(ColorPickerDropdown, { color: { hex: field.state.value }, onChange: onChange }) }));
+    return (_jsx(FormGroup, { name: field.name, label: label, helpText: helpText, error: error, layout: layout, fullWidth: fullWidth, required: required, intent: error ? 'danger' : 'none', children: _jsx(ColorPickerDropdown, { id: field.name, color: { hex: field.state.value }, onChange: onChange, presetColors: presetColors, disableAlpha: disableAlpha, popoverProps: popoverProps }) }));
 }
 //# sourceMappingURL=color_picker.js.map

package/lib/components/form/components/input/color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color_picker.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/color_picker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAI1D,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,SAAS,QAAQ,CAAC,KAAmC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YAEjC,KAAC,mBAAmB,IAClB,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,QAAQ,EAAE,QAAQ,GAClB,GACQ,CACb,CAAC;AACJ,CAAC"}
+{"version":3,"file":"color_picker.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/color_picker.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAQ1D,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC/D,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,SAAS,QAAQ,CAAC,KAAmC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YAEjC,KAAC,mBAAmB,IAClB,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EACjC,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC1B,GACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/components/form/components/input_groups/form_group.d.ts

@@ -12,7 +12,7 @@ export interface FormGroupInputProps {
 interface FormGroupProps {
     label?: string;
     intent?: Intent;
-    name: string;
+    name?: string;
     required?: boolean;
     helpText?: string;
     children?: ReactNode;

package/lib/components/form/components/input_groups/form_group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form_group.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AA+DhD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}
+{"version":3,"file":"form_group.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input_groups/form_group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AA+DhD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkD9C"}

package/lib/components/form/context/use_ts_form.d.ts

@@ -32,7 +32,43 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
         readonly ResetButton: typeof ResetButton;
         readonly Section: typeof Section;
     }>;
-}>>;
+}>>, withFieldGroup: <TFieldGroupData, TSubmitMeta, TRenderProps extends object = {}>({ render, props, defaultValues, }: import("@tanstack/react-form").WithFieldGroupProps<TFieldGroupData, {
+    readonly Input: typeof Input;
+    readonly NumericInput: typeof NumericInput;
+    readonly Checkbox: typeof Checkbox;
+    readonly Select: typeof Select;
+    readonly Switch: typeof Switch;
+    readonly ColorPicker: typeof ColorPicker;
+}, {
+    readonly SubmitButton: typeof SubmitButton;
+    readonly ResetButton: typeof ResetButton;
+    readonly Section: typeof Section;
+}, TSubmitMeta, TRenderProps>) => <TFormData, TFields extends import("@tanstack/react-form").DeepKeysOfType<TFormData, TFieldGroupData | null | undefined> | import("@tanstack/react-form").FieldsMap<TFormData, TFieldGroupData>, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TFormSubmitMeta>(params: import("react").PropsWithChildren<NoInfer<TRenderProps> & {
+    form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
+        readonly Input: typeof Input;
+        readonly NumericInput: typeof NumericInput;
+        readonly Checkbox: typeof Checkbox;
+        readonly Select: typeof Select;
+        readonly Switch: typeof Switch;
+        readonly ColorPicker: typeof ColorPicker;
+    }, {
+        readonly SubmitButton: typeof SubmitButton;
+        readonly ResetButton: typeof ResetButton;
+        readonly Section: typeof Section;
+    }> | import("@tanstack/react-form").AppFieldExtendedReactFieldGroupApi<unknown, TFormData, string | import("@tanstack/react-form").FieldsMap<unknown, TFormData>, any, any, any, any, any, any, any, any, any, any, unknown extends TSubmitMeta ? TFormSubmitMeta : TSubmitMeta, {
+        readonly Input: typeof Input;
+        readonly NumericInput: typeof NumericInput;
+        readonly Checkbox: typeof Checkbox;
+        readonly Select: typeof Select;
+        readonly Switch: typeof Switch;
+        readonly ColorPicker: typeof ColorPicker;
+    }, {
+        readonly SubmitButton: typeof SubmitButton;
+        readonly ResetButton: typeof ResetButton;
+        readonly Section: typeof Section;
+    }>;
+    fields: TFields;
+}>) => ReturnType<import("react").FunctionComponent>;
 export declare const useForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
     readonly Input: typeof Input;
     readonly NumericInput: typeof NumericInput;
@@ -45,5 +81,5 @@ export declare const useForm: <TFormData, TOnMount extends import("@tanstack/rea
     readonly ResetButton: typeof ResetButton;
     readonly Section: typeof Section;
 }>;
-export { useFieldContext, useFormContext, withForm };
+export { useFieldContext, useFormContext, withFieldGroup, withForm };
 //# sourceMappingURL=use_ts_form.d.ts.map

package/lib/components/form/context/use_ts_form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_ts_form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,QAAA,MAAQ,cAAc,2IAAE,eAAe,8KACb,CAAC;AAE3B,QAAA,MAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;GAgB1B,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;EAAa,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"use_ts_form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,QAAA,MAAQ,cAAc,2IAAE,eAAe,8KACb,CAAC;AAE3B,QAAA,MAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;KAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAgB1C,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;EAAa,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/form/context/use_ts_form.js

@@ -9,7 +9,7 @@ import { SubmitButton } from '../components/input/submit_button.js';
 import { Switch } from '../components/input/switch.js';
 import { Section } from '../components/layout/Section.js';
 const { useFormContext, useFieldContext, formContext, fieldContext } = createFormHookContexts();
-const { useAppForm, withForm } = createFormHook({
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
     fieldContext,
     formContext,
     formComponents: {
@@ -27,5 +27,5 @@ const { useAppForm, withForm } = createFormHook({
     },
 });
 export const useForm = useAppForm;
-export { useFieldContext, useFormContext, withForm };
+export { useFieldContext, useFormContext, withFieldGroup, withForm };
 //# sourceMappingURL=use_ts_form.js.map

package/lib/components/form/context/use_ts_form.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_ts_form.js","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAsC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,sBAAsB,EAAE,CAAC;AAE3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC;IAC9C,YAAY;IACZ,WAAW;IACX,cAAc,EAAE;QACd,YAAY;QACZ,WAAW;QACX,OAAO;KACR;IACD,eAAe,EAAE;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,MAAM;QACN,WAAW;KACZ;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"use_ts_form.js","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAsC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,sBAAsB,EAAE,CAAC;AAE3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC;IAC9D,YAAY;IACZ,WAAW;IACX,cAAc,EAAE;QACd,YAAY;QACZ,WAAW;QACX,OAAO;KACR;IACD,eAAe,EAAE;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,MAAM;QACN,WAAW;KACZ;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './split_pane/index.js';
 export * from './table/index.js';
 export * from './toolbar/index.js';
 export * from './form/context/use_ts_form.js';
+export * from './form/components/field_groups/index.js';
 export * from './activity_bar/index.js';
 export * from './activity_panel/index.js';
 export * from './utils/index.js';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/index.js

@@ -15,6 +15,7 @@ export * from './split_pane/index.js';
 export * from './table/index.js';
 export * from './toolbar/index.js';
 export * from './form/context/use_ts_form.js';
+export * from './form/components/field_groups/index.js';
 export * from './activity_bar/index.js';
 export * from './activity_panel/index.js';
 export * from './utils/index.js';

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,gBAAgB,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/svg/styled/svg_styled_types.d.ts

@@ -1,4 +1,10 @@
-export type SVGStyledLineStrokePattern = 'solid' | 'dashed' | 'dotted' | 'dashed-dot';
+export declare const SVGStyledLineStrokePattern: {
+    readonly solid: "solid";
+    readonly dashed: "dashed";
+    readonly dotted: "dotted";
+    readonly 'dashed-dot': "dashed-dot";
+};
+export type SVGStyledLineStrokePattern = (typeof SVGStyledLineStrokePattern)[keyof typeof SVGStyledLineStrokePattern];
 /**
  * SVG line styles that can be controlled by the user.
  */

package/lib/components/svg/styled/svg_styled_types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svg_styled_types.d.ts","sourceRoot":"","sources":["../../../../src/components/svg/styled/svg_styled_types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,0BAA0B,GAClC,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,0BAA0B,CAAC;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE/B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACjC"}
+{"version":3,"file":"svg_styled_types.d.ts","sourceRoot":"","sources":["../../../../src/components/svg/styled/svg_styled_types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,0BAA0B;;;;;CAK7B,CAAC;AAEX,MAAM,MAAM,0BAA0B,GACpC,CAAC,OAAO,0BAA0B,CAAC,CAAC,MAAM,OAAO,0BAA0B,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,0BAA0B,CAAC;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE/B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CACjC"}

package/lib/components/svg/styled/svg_styled_types.js

@@ -1,2 +1,7 @@
-export {};
+export const SVGStyledLineStrokePattern = {
+    solid: 'solid',
+    dashed: 'dashed',
+    dotted: 'dotted',
+    'dashed-dot': 'dashed-dot',
+};
 //# sourceMappingURL=svg_styled_types.js.map

package/lib/components/svg/styled/svg_styled_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"svg_styled_types.js","sourceRoot":"","sources":["../../../../src/components/svg/styled/svg_styled_types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"svg_styled_types.js","sourceRoot":"","sources":["../../../../src/components/svg/styled/svg_styled_types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,0BAA0B,GAAG;IACxC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAClB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "19.5.1",
+  "version": "19.6.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {
@@ -130,7 +130,7 @@
     "wdf-parser": "^0.3.0"
   },
   "volta": {
-    "node": "24.12.0"
+    "node": "24.13.0"
   },
   "overrides": {
     "storybook": "$storybook"

package/src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -7,11 +7,16 @@ import type { ColorPickerProps } from '../react-color/ColorPicker.js';
 import { ColorPicker } from '../react-color/ColorPicker.js';
 import * as colorHelper from '../react-color/helpers/color.js';
 
-interface ColorPickerDropdownProps extends Pick<
+export interface ColorPickerDropdownProps extends Pick<
   ColorPickerProps,
   'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
 > {
   popoverProps?: Omit<PopoverProps, 'content'>;
+
+  /**
+   * To link with label
+   */
+  id?: string;
 }
 
 const ColorPickerRoot = styled.button`
@@ -30,7 +35,7 @@ const ColorPickerPreview = styled.div`
 `;
 
 export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
-  const { color, popoverProps, ...otherProps } = props;
+  const { color, popoverProps, id, ...otherProps } = props;
 
   const { hex } = colorHelper.toState(color || 'white');
 
@@ -41,7 +46,7 @@ export function ColorPickerDropdown(props: ColorPickerDropdownProps) {
       minimal
       {...popoverProps}
     >
-      <ColorPickerRoot type="button">
+      <ColorPickerRoot type="button" id={id}>
         <ColorPickerPreview>
           <FixedColorPreview color={hex} />
         </ColorPickerPreview>

package/src/components/form/components/field_groups/fieldset.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const Fieldset = styled.fieldset`
+  display: block;
+  border-top: 1px lightgrey groove;
+  min-inline-size: min-content;
+`;
+
+export const Legend = styled.legend`
+  display: block;
+  padding-inline-end: 5px;
+`;

package/src/components/form/components/field_groups/index.ts

@@ -0,0 +1,7 @@
+export { FieldGroupSVGTextStyleFields } from './svg_text_style.js';
+export type { SVGTextStyleFieldsProps } from './svg_text_style.js';
+export { svgTextStyleFieldsSchema } from './svg_text_style.schema.js';
+
+export { FieldGroupSVGLineStyleFields } from './svg_line_style.js';
+export type { SVGLineStyleFieldsProps } from './svg_line_style.js';
+export { svgLineStyleFieldsSchema } from './svg_line_style.schema.js';

package/src/components/form/components/field_groups/svg_line_style.schema.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+import { SVGStyledLineStrokePattern } from '../../../svg/index.js';
+
+export const svgLineStyleFieldsSchema = z.object({
+  stroke: z
+    .string()
+    .trim()
+    .regex(/^#[0-9a-fA-F]{6}$/, {
+      message: 'Color must be hexadecimal and should not contain alpha',
+    }),
+  strokeOpacity: z.coerce.number<string>().min(0).max(1),
+  strokeWidth: z.coerce.number<string>(),
+  strokeDasharray: z.enum(SVGStyledLineStrokePattern),
+});

package/src/components/form/components/field_groups/svg_line_style.tsx

@@ -0,0 +1,108 @@
+import styled from '@emotion/styled';
+import { memo } from 'react';
+import type { z } from 'zod';
+
+import type { SVGStyledLineStrokePattern } from '../../../svg/index.js';
+import { SVGStyledLine } from '../../../svg/index.js';
+import { withFieldGroup } from '../../context/use_ts_form.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+import { Fieldset, Legend } from './fieldset.js';
+import { svgLineStyleFieldsSchema } from './svg_line_style.schema.js';
+
+type SvgLineStyleFields = z.input<typeof svgLineStyleFieldsSchema>;
+
+// https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#reusing-groups-of-fields-in-multiple-forms
+// Default values are not used at runtime (same for props).
+const defaultValues: SvgLineStyleFields = {
+  stroke: '#000000',
+  strokeOpacity: '1',
+  strokeWidth: '1',
+  strokeDasharray: 'solid',
+};
+
+interface PatternsOptionType {
+  label: string;
+  value: SVGStyledLineStrokePattern;
+}
+
+export interface SVGLineStyleFieldsProps {
+  label: string;
+}
+
+const inferSVGLineStyleFieldsProps: SVGLineStyleFieldsProps = {
+  label: '',
+};
+
+const patternsOptions: PatternsOptionType[] = [
+  { label: 'Solid', value: 'solid' },
+  { label: 'Dotted', value: 'dotted' },
+  { label: 'Dashed', value: 'dashed' },
+  { label: 'Dashed Dot', value: 'dashed-dot' },
+];
+
+export const FieldGroupSVGLineStyleFields = withFieldGroup({
+  defaultValues,
+  props: inferSVGLineStyleFieldsProps,
+  render({ group, label }) {
+    return (
+      <Fieldset>
+        <Legend>{label}</Legend>
+        <group.AppField name="stroke">
+          {(field) => <field.ColorPicker label="Color" disableAlpha />}
+        </group.AppField>
+        <group.AppField name="strokeOpacity">
+          {(field) => (
+            <field.NumericInput
+              label="Opacity"
+              min={0}
+              max={1}
+              minorStepSize={0.01}
+              step={0.05}
+              majorStepSize={0.1}
+            />
+          )}
+        </group.AppField>
+        <group.AppField name="strokeWidth">
+          {(field) => <field.NumericInput label="Width" />}
+        </group.AppField>
+        <group.AppField name="strokeDasharray">
+          {(field) => <field.Select label="Style" items={patternsOptions} />}
+        </group.AppField>
+
+        <FormGroup label="Preview">
+          <group.Subscribe selector={(state) => state.values}>
+            {(values) => <LineStyleFieldPreview {...values} />}
+          </group.Subscribe>
+        </FormGroup>
+      </Fieldset>
+    );
+  },
+});
+
+const LineStyleFieldPreviewContainer = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+`;
+
+const LineStyleFieldPreview = memo(function TextStyleFieldPreview(
+  props: SvgLineStyleFields,
+) {
+  const parsedValues = svgLineStyleFieldsSchema.parse(props);
+
+  return (
+    <LineStyleFieldPreviewContainer>
+      <svg viewBox="0 0 180 30">
+        <SVGStyledLine
+          x1={0}
+          x2={180}
+          y1={15}
+          y2={15}
+          {...parsedValues}
+          opacity={1}
+        />
+      </svg>
+    </LineStyleFieldPreviewContainer>
+  );
+});

package/src/components/form/components/field_groups/svg_text_style.schema.ts

@@ -0,0 +1,8 @@
+import { z } from 'zod';
+
+export const svgTextStyleFieldsSchema = z.object({
+  fill: z.string(),
+  fontSize: z.coerce.number<string>(),
+  fontStyle: z.enum(['normal', 'italic']),
+  fontWeight: z.enum(['normal', 'bold']),
+});

package/src/components/form/components/field_groups/svg_text_style.tsx

@@ -0,0 +1,160 @@
+import { Checkbox } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import type { z } from 'zod';
+
+import { SVGStyledText } from '../../../svg/index.js';
+import { withFieldGroup } from '../../context/use_ts_form.js';
+import { FormGroup } from '../input_groups/form_group.js';
+
+import { Fieldset, Legend } from './fieldset.js';
+import { svgTextStyleFieldsSchema } from './svg_text_style.schema.js';
+
+const TextStyleSwitchContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+`;
+
+type SvgTextStyleFields = z.input<typeof svgTextStyleFieldsSchema>;
+
+// https://tanstack.com/form/latest/docs/framework/react/guides/form-composition#reusing-groups-of-fields-in-multiple-forms
+// Default values are not used at runtime (same for props).
+const defaultValues: SvgTextStyleFields = {
+  fill: '#000000',
+  fontSize: '16',
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+};
+
+export interface SVGTextStyleFieldsProps {
+  label: string;
+  previewText?: string;
+}
+
+const inferSVGTextStyleFieldsProps: SVGTextStyleFieldsProps = {
+  label: '',
+};
+
+export const FieldGroupSVGTextStyleFields = withFieldGroup({
+  defaultValues,
+  props: inferSVGTextStyleFieldsProps,
+  render: function SVGTextStyleFields({
+    group,
+    label,
+    previewText = 'Placeholder',
+  }) {
+    return (
+      <Fieldset>
+        <Legend>{label}</Legend>
+        <group.AppField name="fill">
+          {(field) => <field.ColorPicker label="Color" />}
+        </group.AppField>
+        <group.AppField name="fontSize">
+          {(field) => <field.NumericInput label="Font size" />}
+        </group.AppField>
+        <FormGroup label="Font style">
+          <TextStyleSwitchContainer>
+            <group.Field name="fontWeight">
+              {(field) => (
+                <Checkbox
+                  labelElement={<BoldLabel>Bold</BoldLabel>}
+                  name={field.name}
+                  checked={fontWeightToBoolean(field.state.value)}
+                  onChange={(e) =>
+                    field.handleChange(booleanToFontWeight(e.target.checked))
+                  }
+                  onBlur={field.handleBlur}
+                />
+              )}
+            </group.Field>
+            <group.Field name="fontStyle">
+              {(field) => (
+                <Checkbox
+                  labelElement={<ItalicLabel>Italic</ItalicLabel>}
+                  name={field.name}
+                  checked={fontStyleToBoolean(field.state.value)}
+                  onChange={(e) =>
+                    field.handleChange(booleanToFontStyle(e.target.checked))
+                  }
+                  onBlur={field.handleBlur}
+                />
+              )}
+            </group.Field>
+          </TextStyleSwitchContainer>
+        </FormGroup>
+
+        <FormGroup label="Preview">
+          <group.Subscribe selector={(state) => state.values}>
+            {(values) => (
+              <TextStyleFieldPreview {...values}>
+                {previewText}
+              </TextStyleFieldPreview>
+            )}
+          </group.Subscribe>
+        </FormGroup>
+      </Fieldset>
+    );
+  },
+});
+
+const TextStyleFieldPreviewContainer = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 30px;
+`;
+
+interface TextStyleFieldPreviewProps extends SvgTextStyleFields {
+  children?: ReactNode;
+}
+
+const TextStyleFieldPreview = memo(function TextStyleFieldPreview(
+  props: TextStyleFieldPreviewProps,
+) {
+  const parsedValues = svgTextStyleFieldsSchema.parse(props);
+  const svgHeight = Math.round(parsedValues.fontSize * 1.5);
+  const textY = Math.round(svgHeight / 4);
+
+  return (
+    <TextStyleFieldPreviewContainer>
+      <svg height={svgHeight} width="auto">
+        <SVGStyledText
+          dominantBaseline="hanging"
+          x={0}
+          y={textY}
+          {...parsedValues}
+        >
+          {props.children}
+        </SVGStyledText>
+      </svg>
+    </TextStyleFieldPreviewContainer>
+  );
+});
+
+const BoldLabel = styled.span`
+  font-weight: bold;
+`;
+const ItalicLabel = styled.span`
+  font-style: italic;
+`;
+
+function fontWeightToBoolean(
+  weight: SvgTextStyleFields['fontWeight'],
+): boolean {
+  return weight === 'bold';
+}
+
+function booleanToFontWeight(
+  weight: boolean,
+): SvgTextStyleFields['fontWeight'] {
+  return weight ? 'bold' : 'normal';
+}
+
+function fontStyleToBoolean(weight: SvgTextStyleFields['fontStyle']): boolean {
+  return weight === 'italic';
+}
+
+function booleanToFontStyle(weight: boolean): SvgTextStyleFields['fontStyle'] {
+  return weight ? 'italic' : 'normal';
+}

package/src/components/form/components/input/color_picker.tsx

@@ -1,13 +1,20 @@
+import type { ColorPickerDropdownProps } from '../../../color-picker/index.js';
 import { ColorPickerDropdown } from '../../../color-picker/index.js';
 import type { ChangeCallbackProps as ChangeCallbackComponentProps } from '../../../color-picker/react-color/ColorPicker.js';
 import { useFieldContext } from '../../context/use_ts_form.js';
 import type { FormGroupInputProps } from '../input_groups/form_group.js';
 import { FormGroup } from '../input_groups/form_group.js';
 
-type ColorPickerProps = Omit<FormGroupInputProps, 'placeholder'>;
+type ColorPickerProps = Omit<FormGroupInputProps, 'placeholder'> &
+  Pick<
+    ColorPickerDropdownProps,
+    'presetColors' | 'disableAlpha' | 'popoverProps'
+  >;
 
 export function ColorPicker(props: ColorPickerProps) {
   const { label, helpText, layout, fullWidth, required } = props;
+  const { presetColors, disableAlpha, popoverProps } = props;
+
   const field = useFieldContext<string>();
   const error = field
     .getMeta()
@@ -30,8 +37,12 @@ export function ColorPicker(props: ColorPickerProps) {
       intent={error ? 'danger' : 'none'}
     >
       <ColorPickerDropdown
+        id={field.name}
         color={{ hex: field.state.value }}
         onChange={onChange}
+        presetColors={presetColors}
+        disableAlpha={disableAlpha}
+        popoverProps={popoverProps}
       />
     </FormGroup>
   );

package/src/components/form/components/input_groups/form_group.tsx

@@ -78,7 +78,7 @@ export interface FormGroupInputProps {
 interface FormGroupProps {
   label?: string;
   intent?: Intent;
-  name: string;
+  name?: string;
   required?: boolean;
   helpText?: string;
   children?: ReactNode;

package/src/components/form/context/use_ts_form.ts

@@ -13,7 +13,7 @@ import { Section } from '../components/layout/Section.js';
 const { useFormContext, useFieldContext, formContext, fieldContext } =
   createFormHookContexts();
 
-const { useAppForm, withForm } = createFormHook({
+const { useAppForm, withForm, withFieldGroup } = createFormHook({
   fieldContext,
   formContext,
   formComponents: {
@@ -32,4 +32,4 @@ const { useAppForm, withForm } = createFormHook({
 });
 
 export const useForm = useAppForm;
-export { useFieldContext, useFormContext, withForm };
+export { useFieldContext, useFormContext, withFieldGroup, withForm };

package/src/components/index.ts

@@ -15,6 +15,7 @@ export * from './split_pane/index.js';
 export * from './table/index.js';
 export * from './toolbar/index.js';
 export * from './form/context/use_ts_form.js';
+export * from './form/components/field_groups/index.js';
 export * from './activity_bar/index.js';
 export * from './activity_panel/index.js';
 export * from './utils/index.js';

package/src/components/svg/styled/svg_styled_types.ts

@@ -1,8 +1,12 @@
+export const SVGStyledLineStrokePattern = {
+  solid: 'solid',
+  dashed: 'dashed',
+  dotted: 'dotted',
+  'dashed-dot': 'dashed-dot',
+} as const;
+
 export type SVGStyledLineStrokePattern =
-  | 'solid'
-  | 'dashed'
-  | 'dotted'
-  | 'dashed-dot';
+  (typeof SVGStyledLineStrokePattern)[keyof typeof SVGStyledLineStrokePattern];
 
 /**
  * SVG line styles that can be controlled by the user.