@sio-group/form-react 0.4.2 → 0.4.3

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
+import { ButtonProps, LinkProps } from '@sio-group/ui-core';
 import { Properties } from 'csstype';
 import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
 
@@ -9,38 +10,6 @@ interface FormLayout {
   layout?: LayoutType;
 }
 
-type ButtonType = 'button' | 'submit' | 'reset';
-type Variant = 'primary' | 'secondary' | 'link';
-type Color = 'default' | 'error' | 'success' | 'warning' | 'info';
-type Size = 'sm' | 'md' | 'lg';
-
-type BaseUiProps = {
-  variant?: Variant;
-  label?: string | React.ReactNode;
-  color?: Color;
-  size?: Size;
-  block?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  className?: string;
-  ariaLabel?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
-type ButtonProps = BaseUiProps & {
-  type?: ButtonType;
-  onClick: (e: React.MouseEvent) => void;
-};
-
-type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'color'> &
-  BaseUiProps & {
-  to: string;
-  navigate?: () => void;
-  external?: boolean;
-  onClick?: (e: React.MouseEvent) => void;
-};
-
 type FormContainerProps = ComponentPropsWithoutRef<'form'>;
 type ButtonContainerProps = HTMLAttributes<HTMLDivElement>;
 
@@ -196,71 +165,6 @@ declare const useForm: ({ disableWhenOffline }?: UseFormOptions) => {
     getField: (name: string) => FieldState | undefined;
 };
 
-/**
- * Button component for user interaction.
- *
- * @component
- * @example
- * // Primaire button
- * <Button label="Save" onClick={handleSave} />
- *
- * @example
- * // Submit button with loading state
- * <Button
- *   type="submit"
- *   label="Send"
- *   variant="primary"
- *   loading
- * />
- *
- * @example
- * // Button with icon and tekst
- * <Button type="button" onClick={handleClick}>
- *   <Icon name="plus" />
- *   <span>Add</span>
- * </Button>
- *
- * @example
- * // Error variant
- * <Button
- *   type="button"
- *   label="Delete"
- *   variant="secondary"
- *   color="error"
- *   onClick={handleDelete}
- * />
- */
-declare const Button: React.FC<ButtonProps>;
-
-/**
- * Custom Link component for internal or external navigation
- *
- * @component
- * @example
- * // Internal link
- * <Link to="/dashboard" label="Dashboard" />
- *
- * @example
- * // External link
- * // external property is optional
- * // http(s), ftp, email and tel with automatically render as external
- * <Link to="https://example.com" label="Visit website" external />
- *
- * @example
- * // Link with loading state
- * <Link to="/profile" label="Profile" loading />
- *
- * @example
- * // Link with custom click handler en navigation
- * <Link
- *   to="/settings"
- *   label="Settings"
- *   onClick={() => console.log('clicked')}
- *   navigate={customNavigate}
- * />
- */
-declare const Link: React.FC<LinkProps>;
-
 declare const Checkbox: ({ value, onChange, name, id, label, required, setTouched, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FieldProps) => react_jsx_runtime.JSX.Element;
 
 declare const Input: React.MemoExoticComponent<(props: FieldProps) => react_jsx_runtime.JSX.Element>;
@@ -281,4 +185,4 @@ declare const Select: ({ value, onChange, options, multiple, name, id, placehold
 
 declare const Textarea: ({ value, onChange, rows, cols, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: TextareaFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, Checkbox, DateInput, type FieldProps, FileInput, Form, type FormConfig, type FormLayout, Input, Link, type LinkProps, NumberInput, Radio, RangeInput, Select, TextInput, Textarea, useForm };
+export { Checkbox, DateInput, type FieldProps, FileInput, Form, type FormConfig, type FormLayout, Input, NumberInput, Radio, RangeInput, Select, TextInput, Textarea, useForm };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
+import { ButtonProps, LinkProps } from '@sio-group/ui-core';
 import { Properties } from 'csstype';
 import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
 
@@ -9,38 +10,6 @@ interface FormLayout {
   layout?: LayoutType;
 }
 
-type ButtonType = 'button' | 'submit' | 'reset';
-type Variant = 'primary' | 'secondary' | 'link';
-type Color = 'default' | 'error' | 'success' | 'warning' | 'info';
-type Size = 'sm' | 'md' | 'lg';
-
-type BaseUiProps = {
-  variant?: Variant;
-  label?: string | React.ReactNode;
-  color?: Color;
-  size?: Size;
-  block?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  className?: string;
-  ariaLabel?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
-type ButtonProps = BaseUiProps & {
-  type?: ButtonType;
-  onClick: (e: React.MouseEvent) => void;
-};
-
-type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'color'> &
-  BaseUiProps & {
-  to: string;
-  navigate?: () => void;
-  external?: boolean;
-  onClick?: (e: React.MouseEvent) => void;
-};
-
 type FormContainerProps = ComponentPropsWithoutRef<'form'>;
 type ButtonContainerProps = HTMLAttributes<HTMLDivElement>;
 
@@ -196,71 +165,6 @@ declare const useForm: ({ disableWhenOffline }?: UseFormOptions) => {
     getField: (name: string) => FieldState | undefined;
 };
 
-/**
- * Button component for user interaction.
- *
- * @component
- * @example
- * // Primaire button
- * <Button label="Save" onClick={handleSave} />
- *
- * @example
- * // Submit button with loading state
- * <Button
- *   type="submit"
- *   label="Send"
- *   variant="primary"
- *   loading
- * />
- *
- * @example
- * // Button with icon and tekst
- * <Button type="button" onClick={handleClick}>
- *   <Icon name="plus" />
- *   <span>Add</span>
- * </Button>
- *
- * @example
- * // Error variant
- * <Button
- *   type="button"
- *   label="Delete"
- *   variant="secondary"
- *   color="error"
- *   onClick={handleDelete}
- * />
- */
-declare const Button: React.FC<ButtonProps>;
-
-/**
- * Custom Link component for internal or external navigation
- *
- * @component
- * @example
- * // Internal link
- * <Link to="/dashboard" label="Dashboard" />
- *
- * @example
- * // External link
- * // external property is optional
- * // http(s), ftp, email and tel with automatically render as external
- * <Link to="https://example.com" label="Visit website" external />
- *
- * @example
- * // Link with loading state
- * <Link to="/profile" label="Profile" loading />
- *
- * @example
- * // Link with custom click handler en navigation
- * <Link
- *   to="/settings"
- *   label="Settings"
- *   onClick={() => console.log('clicked')}
- *   navigate={customNavigate}
- * />
- */
-declare const Link: React.FC<LinkProps>;
-
 declare const Checkbox: ({ value, onChange, name, id, label, required, setTouched, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: FieldProps) => react_jsx_runtime.JSX.Element;
 
 declare const Input: React.MemoExoticComponent<(props: FieldProps) => react_jsx_runtime.JSX.Element>;
@@ -281,4 +185,4 @@ declare const Select: ({ value, onChange, options, multiple, name, id, placehold
 
 declare const Textarea: ({ value, onChange, rows, cols, name, id, placeholder, label, required, autocomplete, setTouched, setFocused, readOnly, disabled, icon, description, focused, errors, touched, type, className, style, }: TextareaFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { Button, type ButtonProps, Checkbox, DateInput, type FieldProps, FileInput, Form, type FormConfig, type FormLayout, Input, Link, type LinkProps, NumberInput, Radio, RangeInput, Select, TextInput, Textarea, useForm };
+export { Checkbox, DateInput, type FieldProps, FileInput, Form, type FormConfig, type FormLayout, Input, NumberInput, Radio, RangeInput, Select, TextInput, Textarea, useForm };