@kroo-web/design-system 1.7.0 → 1.9.0

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

@@ -9,3 +9,15 @@ export type TCheckboxProps<T extends FieldValues> = {
     variant?: 'checkbox' | 'radio';
 };
 export declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React.JSX.Element;
+export type TNativeCheckboxProps = {
+    disabled?: boolean;
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    id: string;
+    label: ReactNode | string;
+} & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare const NativeCheckbox: React.ForwardRefExoticComponent<Omit<TNativeCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { ComboBoxProps } from 'react-aria-components';
 import { ControllerRenderProps, FieldValues } from 'react-hook-form';
 export type TComboBoxItem = {
     img?: string;
@@ -15,3 +16,36 @@ export type TComboBoxProps = {
 };
 export declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => React.JSX.Element;
 export declare const Field: ({ alwaysOpen, field: { onBlur, ...restField }, label, onSelect, options }: TComboBoxProps) => React.JSX.Element;
+export type TNativeComboBoxRootProps = {
+    children: ReactNode;
+    disabled?: boolean;
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    hideLabel?: boolean;
+    id: string;
+    label: string;
+    missing?: boolean;
+    placeholder?: string;
+} & Omit<ComboBoxProps<TComboBoxItem>, 'children' | 'isDisabled' | 'label' | 'onOpenChange' | 'placeholder'>;
+export declare const Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React.JSX.Element;
+export declare const Options: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;
+export declare const Item: ({ children, img }: {
+    children: ReactNode;
+    img?: string;
+}) => React.JSX.Element;
+export declare const NativeComboBox: {
+    Item: ({ children, img }: {
+        children: ReactNode;
+        img?: string;
+    }) => React.JSX.Element;
+    Options: ({ children }: {
+        children: ReactNode;
+    }) => React.JSX.Element;
+    Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React.JSX.Element;
+};

package/dist/esm/src/components/shared/FieldError/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type TFieldErrorProps = {
+    error: {
+        message: string;
+    };
+};
+export declare const FieldError: ({ error }: TFieldErrorProps) => React.JSX.Element;

package/dist/esm/src/components/shared/FieldHelper/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type TFieldHelperProps = {
+    helper: {
+        message: string;
+    };
+    /**
+     * The id of the field helper this is required and expected to be used in conjunction with describeBy on the input field
+     * so they are associated..
+     */
+    id: string;
+};
+export declare const FieldHelper: ({ helper, id }: TFieldHelperProps) => React.JSX.Element;

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 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 { ComboBoxProps } from 'react-aria-components';
 import * as zustand from 'zustand';
 import { OTPInputProps } from 'input-otp';
 import * as RadixPopover from '@radix-ui/react-popover';
@@ -123,6 +124,18 @@ type TCheckboxProps<T extends FieldValues> = {
     variant?: 'checkbox' | 'radio';
 };
 declare const Checkbox: <T extends FieldValues>(props: TCheckboxProps<T>) => React$1.JSX.Element;
+type TNativeCheckboxProps = {
+    disabled?: boolean;
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    id: string;
+    label: ReactNode | string;
+} & React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare const NativeCheckbox: React$1.ForwardRefExoticComponent<Omit<TNativeCheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 type TColumnsProps = {
     children: React$1.ReactNode;
@@ -145,6 +158,39 @@ type TComboBoxProps = {
 };
 declare const ComboBox: (props: Omit<TComboBoxProps, "field">) => React$1.JSX.Element;
 declare const Field: ({ alwaysOpen, field: { onBlur, ...restField }, label, onSelect, options }: TComboBoxProps) => React$1.JSX.Element;
+type TNativeComboBoxRootProps = {
+    children: ReactNode;
+    disabled?: boolean;
+    error?: {
+        message: string;
+    };
+    helper?: {
+        message: string;
+    };
+    hideLabel?: boolean;
+    id: string;
+    label: string;
+    missing?: boolean;
+    placeholder?: string;
+} & Omit<ComboBoxProps<TComboBoxItem>, 'children' | 'isDisabled' | 'label' | 'onOpenChange' | 'placeholder'>;
+declare const Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React$1.JSX.Element;
+declare const Options: ({ children }: {
+    children: ReactNode;
+}) => React$1.JSX.Element;
+declare const Item: ({ children, img }: {
+    children: ReactNode;
+    img?: string;
+}) => React$1.JSX.Element;
+declare const NativeComboBox: {
+    Item: ({ children, img }: {
+        children: ReactNode;
+        img?: string;
+    }) => React$1.JSX.Element;
+    Options: ({ children }: {
+        children: ReactNode;
+    }) => React$1.JSX.Element;
+    Root: ({ children, disabled, error, helper, hideLabel, id, label, missing, placeholder, ...rest }: TNativeComboBoxRootProps) => React$1.JSX.Element;
+};
 
 type TDatePicker<T extends FieldValues> = {
     disabled?: boolean;
@@ -524,4 +570,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, 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 };
+export { Accordion, Button, Buttons, Callout, Card, Cards, type CardsVariants, Checkbox, Columns, ComboBox, DatePicker, Disclosure, Field, Form, type ICardOwnProps, type ICardProps, type ICardsProps, Icon, Item, Link, Loading, Modal, NativeCheckbox, NativeComboBox, NativeDatePicker, NativeNumberField, NativePhoneField, NativeSelect, NativeTextField, NumberField, OTPInput, Options, PhoneField, PinInput, Popover, ProgressIndicator, RadioGroup, Range, Root, 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 TNativeCheckboxProps, type TNativeComboBoxRootProps, 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.7.0",
+  "version": "1.9.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",
@@ -110,6 +110,7 @@
     "framer-motion": "^11.0.8",
     "input-otp": "^1.4.1",
     "postcss": "^8.4.35",
+    "react-aria-components": "^1.6.0",
     "react-hook-form": "^7.51.0",
     "react-material-symbols": "^4.4.0",
     "zustand": "^4.5.2"