@kroo-web/design-system 1.5.0 → 1.7.0

package/dist/esm/src/components/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 export type TDatePicker<T extends FieldValues> = {
     disabled?: boolean;
@@ -12,3 +12,17 @@ export type TDatePicker<T extends FieldValues> = {
     name: Path<T>;
 };
 export declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => React.JSX.Element;
+export type TNativeDatePickerProps = {
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    id: string;
+    label: string;
+    max?: number | string;
+    min?: number | string;
+    missing?: boolean;
+} & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'max' | 'min' | 'type'>;
+export declare const NativeDatePicker: React.ForwardRefExoticComponent<Omit<TNativeDatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/src/components/NumberField/index.d.ts

@@ -13,6 +13,7 @@ export type TNumberFieldProps<T extends FieldValues> = {
 export declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React.JSX.Element;
 export type TNativeNumberFieldProps = {
     defaultValue?: number;
+    disabled?: boolean;
     error?: {
         message: string;
     };

package/dist/esm/src/components/PhoneField/index.d.ts

@@ -13,6 +13,7 @@ export type TPhoneFieldProps<T extends FieldValues> = {
 export declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React.JSX.Element;
 export type TNativeCountrySelectProps = {
     id: string;
+    missing?: boolean;
     onChange?: ChangeEventHandler<HTMLSelectElement>;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
 export type TNativeInputProps = {
@@ -21,6 +22,7 @@ export type TNativeInputProps = {
         message: string;
     };
     id: string;
+    missing?: boolean;
     placeholder: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 export declare const NativePhoneField: {

package/dist/esm/src/components/Select/index.d.ts

@@ -1,4 +1,4 @@
-import React, { OptionHTMLAttributes, ReactNode } from 'react';
+import React, { DetailedHTMLProps, OptionHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
 import { FieldValues, Path } from 'react-hook-form';
 export type TItem = {
     id: string;
@@ -23,3 +23,20 @@ export type TSelectProps<T extends FieldValues> = {
     placeholder?: string;
 };
 export declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => React.JSX.Element;
+export type TNativeSelectProps = {
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    id: string;
+    items: Array<{
+        id: string;
+        title: string;
+    }>;
+    label: string;
+    missing?: boolean;
+    placeholder?: string;
+} & Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'children'>;
+export declare const NativeSelect: React.ForwardRefExoticComponent<Omit<TNativeSelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import React$1, { PropsWithChildren, ReactNode, HTMLProps, ElementType, ButtonHTMLAttributes, DetailedHTMLProps, InputHTMLAttributes, ChangeEventHandler, OptionHTMLAttributes } from 'react';
+import React$1, { PropsWithChildren, ReactNode, DetailedHTMLProps, InputHTMLAttributes, HTMLProps, ElementType, ButtonHTMLAttributes, ChangeEventHandler, OptionHTMLAttributes, SelectHTMLAttributes } from 'react';
 import { MaterialSymbolProps } from 'react-material-symbols';
 import { FieldValues, Path, ControllerRenderProps, UseFormReturn, FieldError } from 'react-hook-form';
 import * as zustand from 'zustand';
@@ -158,6 +158,20 @@ type TDatePicker<T extends FieldValues> = {
     name: Path<T>;
 };
 declare const DatePicker: <T extends FieldValues>(props: TDatePicker<T>) => React$1.JSX.Element;
+type TNativeDatePickerProps = {
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    id: string;
+    label: string;
+    max?: number | string;
+    min?: number | string;
+    missing?: boolean;
+} & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'max' | 'min' | 'type'>;
+declare const NativeDatePicker: React$1.ForwardRefExoticComponent<Omit<TNativeDatePickerProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type TDisclosureProps = {
     children: React$1.ReactNode;
@@ -237,6 +251,7 @@ type TNumberFieldProps<T extends FieldValues> = {
 declare const NumberField: <T extends FieldValues>(props: TNumberFieldProps<T>) => React$1.JSX.Element;
 type TNativeNumberFieldProps = {
     defaultValue?: number;
+    disabled?: boolean;
     error?: {
         message: string;
     };
@@ -265,6 +280,7 @@ type TPhoneFieldProps<T extends FieldValues> = {
 declare const PhoneField: <T extends FieldValues>(props: TPhoneFieldProps<T>) => React$1.JSX.Element;
 type TNativeCountrySelectProps = {
     id: string;
+    missing?: boolean;
     onChange?: ChangeEventHandler<HTMLSelectElement>;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
 type TNativeInputProps = {
@@ -273,6 +289,7 @@ type TNativeInputProps = {
         message: string;
     };
     id: string;
+    missing?: boolean;
     placeholder: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 declare const NativePhoneField: {
@@ -362,6 +379,23 @@ type TSelectProps<T extends FieldValues> = {
     placeholder?: string;
 };
 declare const Select: <T extends FieldValues>(props: TSelectProps<T>) => React$1.JSX.Element;
+type TNativeSelectProps = {
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    id: string;
+    items: Array<{
+        id: string;
+        title: string;
+    }>;
+    label: string;
+    missing?: boolean;
+    placeholder?: string;
+} & Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, 'children'>;
+declare const NativeSelect: React$1.ForwardRefExoticComponent<Omit<TNativeSelectProps, "ref"> & React$1.RefAttributes<HTMLSelectElement>>;
 
 type TSkeletonProps = {
     height?: string;
@@ -490,4 +524,4 @@ interface WrapperProps extends PropsWithChildren {
 }
 declare const Wrapper: ({ as, children, className, variants }: WrapperProps) => React$1.JSX.Element;
 
-export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Field, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Link, Loading, Modal, NativeNumberField, NativePhoneField, NativeTextField, NumberField, OTPInput, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Select, Skeleton, type TAccordionRootProps, type TAccordionTriggerProps, type TButtonProps, type TCalloutRootProps, type TCalloutTextProps, type TCardVariants, type TCheckboxProps, type TColumnsProps, type TComboBoxItem, type TComboBoxProps, type TDatePicker, type TDisclosureProps, type TIconProps, type TItem, type TLegacyMarketingFooter, type TLegacyMarketingHeading, type TLegacyMarketingText, type TLink, type TLoadingProps, type TModalButtonProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNativeCountrySelectProps, type TNativeInputProps, type TNativeNumberFieldProps, type TNativeTextFieldProps, type TNumberFieldProps, type TPhoneFieldProps, type TPinInputProps, type TPopoverContentProps, type TPopoverRootProps, type TPopoverTriggerProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TSkeletonProps, type TTabsContent, type TTabsList, type TTabsRoot, type TTabsTrigger, type TTagProps, type TTextFieldProps, type TToastDescriptionProps, type TToastIconProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypography, type TTypographyProps, type TTypographyVariants, type TUseModalProps, Table, TableBody, TableData, TableFooter, TableHead, TableHeader, TableRoot, TableRow, Tabs, Tag, TextField, Toast, Tooltip, Typography, Wrapper, type WrapperProps, type WrapperVariants, useModal };
+export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Field, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Link, Loading, Modal, NativeDatePicker, NativeNumberField, NativePhoneField, NativeSelect, NativeTextField, NumberField, OTPInput, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Select, Skeleton, type TAccordionRootProps, type TAccordionTriggerProps, type TButtonProps, type TCalloutRootProps, type TCalloutTextProps, type TCardVariants, type TCheckboxProps, type TColumnsProps, type TComboBoxItem, type TComboBoxProps, type TDatePicker, type TDisclosureProps, type TIconProps, type TItem, type TLegacyMarketingFooter, type TLegacyMarketingHeading, type TLegacyMarketingText, type TLink, type TLoadingProps, type TModalButtonProps, type TModalContentProps, type TModalControlProps, type TModalHeaderProps, type TNativeCountrySelectProps, type TNativeDatePickerProps, type TNativeInputProps, type TNativeNumberFieldProps, type TNativeSelectProps, type TNativeTextFieldProps, type TNumberFieldProps, type TPhoneFieldProps, type TPinInputProps, type TPopoverContentProps, type TPopoverRootProps, type TPopoverTriggerProps, type TProgressIndicatorProps, type TRadioGroupProps, type TRangeProps, type TSelectProps, type TSkeletonProps, type TTabsContent, type TTabsList, type TTabsRoot, type TTabsTrigger, type TTagProps, type TTextFieldProps, type TToastDescriptionProps, type TToastIconProps, type TToastRootProps, type TToastTitleProps, type TTooltipContentProps, type TTooltipRootProps, type TTooltipTriggerProps, type TTypography, type TTypographyProps, type TTypographyVariants, type TUseModalProps, Table, TableBody, TableData, TableFooter, TableHead, TableHeader, TableRoot, TableRow, Tabs, Tag, TextField, Toast, Tooltip, Typography, Wrapper, type WrapperProps, type WrapperVariants, useModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kroo-web/design-system",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Web design system for Kroo including the components for the marketing site and the product side.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",