@newtonschool/grauity 3.2.0-beta.1 → 3.2.1-beta.0

package/dist/common/types.d.ts

@@ -11,10 +11,10 @@ export interface StyledDivProps extends React.HTMLAttributes<HTMLDivElement> {
     'data-testid'?: string;
 }
 /**
- * Interface representing the properties for a styled div component.
+ * Interface representing the properties for a styled span component.
  *
  * @extends React.HTMLAttributes<HTMLSpanElement>
- * @property {React.Ref<HTMLSpanElement>} [ref] - Optional ref for the div element.
+ * @property {React.Ref<HTMLSpanElement>} [ref] - Optional ref for the span element.
  */
 export interface StyledSpanProps extends React.HTMLAttributes<HTMLSpanElement> {
     ref?: React.Ref<HTMLSpanElement>;

package/dist/index.d.ts

@@ -3162,7 +3162,7 @@ export interface AlertBannerProps {
     /**
      * Alert banner padding
      *
-     * Default: `'var(--spacing-8px, 8px)'`
+     * Default: `'var(--spacing-4px, 4px) var(--spacing-8px, 8px)'` if action buttons/close button are present else `'var(--spacing-8px, 8px)'`
      * */
     padding?: string;
     /**
@@ -3571,7 +3571,7 @@ export interface OverlayProps {
     shouldBlurOverlay?: boolean;
     /**
      * Color of the overlay
-     * @default 'var(--alpha-overlay, rgba(22, 25, 29, 0.8))'
+     * @default 'var(--bg-subtle-alpha-overlay, #16191dcc)'
      */
     overlayColor?: string;
     /**
@@ -3793,7 +3793,7 @@ export interface ModalProps {
      */
     overflow?: string;
     /**
-     * Border for the modal. By default, it is `1px solid var(--border, #e1e5ea)`
+     * Border for the modal. By default, it is `1px solid var(--border-subtle-primary-default, #e1e5ea)`
      * */
     border?: string;
     /**
@@ -4508,17 +4508,17 @@ export interface AccordionProps {
     suffix?: React.ReactNode;
     /**
      * Background color of the accordion header.
-     * @default var(--bg-secondary, #F6F7F9)
+     * @default var(--bg-subtle-secondary-default, #f6f7f9)
      */
     headerBackgroundColor?: string;
     /**
      * Background color of the accordion content.
-     * @default var(--bg-secondary, #F6F7F9)
+     * @default var(--bg-subtle-secondary-default, #f6f7f9)
      */
     contentBackgroundColor?: string;
     /**
      * Color of the accordion toggle icon.
-     * @default var(--text-primary, #16191D)
+     * @default var(--text-emphasis-primary-default, #16191d)
      */
     iconColor?: string;
     /**
@@ -4641,22 +4641,22 @@ export interface CalendarEventProps {
     minDurationToDisplayTime?: number;
     /**
      * Text color of the event.
-     * @default 'var(--text-action2)'
+     * @default 'var(--text-emphasis-invert-primary-default, #ffffff)'
      */
     textColor?: string;
     /**
      * Background color of the event.
-     * @default 'var(--bg-action-brand)'
+     * @default 'var(--bg-emphasis-brand-default, #0673f9)'
      */
     backgroundColor?: string;
     /**
      * Border color of the event.
-     * @default 'var(--border)'
+     * @default 'var(--border-subtle-primary-default, #e1e5ea)'
      */
     borderColor?: string;
     /**
      * Text color of the chip content.
-     * @default 'var(--text-action2)'
+     * @default 'var(--text-emphasis-invert-primary-default, #ffffff)'
      */
     chipTextColor?: string;
     /**
@@ -4669,7 +4669,7 @@ export const NSCalendarEvent: React.ForwardRefExoticComponent<CalendarEventProps
 export interface MonthlyCalendarEventProps extends StyledDivProps {
     /**
      * The background color of the calendar event.
-     * @default 'var(--bg-action-brand)'
+     * @default 'var(--bg-emphasis-brand-default, #0673f9)'
      */
     backgroundColor?: string;
     /**
@@ -4697,12 +4697,12 @@ export interface MonthlyCalendarEventProps extends StyledDivProps {
     eventTitle: string;
     /**
      * The color of the event time text.
-     * @default 'var(--text-action2)'
+     * @default 'var(--text-emphasis-invert-primary-default, #ffffff)'
      */
     eventTimeColor?: string;
     /**
      * The color of the event title text.
-     * @default 'var(--text-action2)'
+     * @default 'var(--text-emphasis-invert-primary-default, #ffffff)'
      */
     eventTitleColor?: string;
     /**
@@ -4820,7 +4820,7 @@ export interface PlaceholderProps {
     margin?: string;
     /**
      * Background color of the placeholder.
-     * @default 'var(--bg-tertiary, #EDEFF3)'
+     * @default 'var(--bg-subtle-tertiary-default, #edeff3)'
      */
     backgroundColor?: string;
     /**
@@ -5156,12 +5156,12 @@ export interface TooltipProps {
     isOpen?: boolean | null;
     /**
      * The text color of the tooltip
-     * @default 'var(--text-emphasis-invert-primary-default)'
+     * @default 'var(--text-emphasis-invert-primary-default, #ffffff)'
      * */
     color?: string;
     /**
      * The background color of the tooltip
-     * @default 'var(--bg-subtle-invert-primary-default)'
+     * @default 'var(--bg-subtle-invert-primary-default, #0b0c0e)'
      * */
     backgroundColor?: string;
     /**
@@ -5458,6 +5458,10 @@ export interface TextFieldProps {
      * The function to call when the input field is blurred (unfocused/clicked away).
      */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * The function to call when a key is pressed while the input field is focused.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * The error message to display when the input field is invalid.
      */
@@ -5493,6 +5497,10 @@ export interface TextFieldProps {
      * The color of the input field.
      */
     color?: TextFieldColors;
+    /**
+     * className to be passed to the TextField container.
+     */
+    className?: string;
 }
 export const NSTextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 type VARIANTS = `${VARIANTS_SIZES}`;
@@ -5896,9 +5904,11 @@ type OptionValue = string | number;
 export type NSDropdownMenuBaseItemSubHeaderProps = {
     type: NSDropdownMenuBaseItemType.SUB_HEADER;
     title: string;
+    scrollToOnOpen?: boolean;
 };
 export type NSDropdownMenuBaseItemDividerProps = {
     type: NSDropdownMenuBaseItemType.DIVIDER;
+    scrollToOnOpen?: boolean;
 };
 export type NSDropdownMenuBaseItemOptionProps = {
     type: NSDropdownMenuBaseItemType.OPTION;
@@ -5908,6 +5918,7 @@ export type NSDropdownMenuBaseItemOptionProps = {
     leftIcon?: grauityIconName;
     rightIcon?: grauityIconName;
     disabled?: boolean;
+    scrollToOnOpen?: boolean;
 };
 export type NSDropdownMenuBaseItemProps = NSDropdownMenuBaseItemSubHeaderProps | NSDropdownMenuBaseItemDividerProps | NSDropdownMenuBaseItemOptionProps;
 export interface NSDropdownMenuProps {
@@ -6403,7 +6414,8 @@ export enum NSFormFieldType {
     DROPDOWN_MENU = "dropdown-menu",
     CHECKBOX_GROUP = "checkbox-group",
     RADIOBUTTON_GROUP = "radio-button-group",
-    CUSTOM = "custom"
+    CUSTOM = "custom",
+    COMBOBOX = "combobox"
 }
 export interface NSConditionalProp {
     prop: string;
@@ -6426,6 +6438,10 @@ export interface NSFormFieldDropdownProps extends NSFormFieldBaseProps {
     type: NSFormFieldType.DROPDOWN;
     rendererProps: DropdownProps;
 }
+interface FormFieldComboboxProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.COMBOBOX;
+    rendererProps: ComboboxProps;
+}
 export interface NSFormFieldDropdownMenuProps extends NSFormFieldBaseProps {
     type: NSFormFieldType.DROPDOWN_MENU;
     rendererProps: DropdownProps;
@@ -6442,7 +6458,7 @@ export interface NSFormFieldCustomProps extends NSFormFieldBaseProps {
     type: NSFormFieldType.CUSTOM;
     rendererProps: any;
 }
-export type NSFormField = NSFormFieldTextFieldProps | NSFormFieldDropdownProps | NSFormFieldDropdownMenuProps | NSFormFieldCheckboxGroupProps | FormFieldRadioButtonGroupProps | NSFormFieldCustomProps;
+export type NSFormField = NSFormFieldTextFieldProps | NSFormFieldDropdownProps | FormFieldComboboxProps | NSFormFieldDropdownMenuProps | NSFormFieldCheckboxGroupProps | FormFieldRadioButtonGroupProps | NSFormFieldCustomProps;
 export interface NSFormFields {
     [key: NSFieldName]: NSFormField;
 }
@@ -6622,7 +6638,7 @@ export enum TAB_ICON_POSITIONS_ENUM {
     BOTTOM = "bottom"
 }
 export enum TAB_VARIANT_ENUM {
-    BORDER = "border",
+    BORDERED = "bordered",
     ROUNDED = "rounded"
 }
 type TabIconPosition = `${TAB_ICON_POSITIONS_ENUM}`;
@@ -6679,8 +6695,8 @@ export interface TabProps {
      */
     iconPosition?: TabIconPosition;
     /**
-     * Variant of the tab, can be 'rounded', 'default', or 'bordered'.
-     * @default 'rounded'
+     * Variant of the tab, can be 'rounded', or 'bordered'.
+     * @default 'bordered'
      */
     variant?: TabVariant;
     /**
@@ -6700,13 +6716,18 @@ export interface TabProps {
     onClick?: () => void;
     /**
      * Tab index for keyboard navigation.
-     * @default '-1'
+     * @default 0
      */
     tabIndex?: number;
+    /**
+     * ID of the tabpanel associated with the tab.
+     * @default ''
+     */
+    ariaControls?: string;
 }
 export function NSTab(props: TabProps): JSX.Element;
 export enum TAB_LIST_VARIANT_ENUM {
-    BORDER = "border",
+    BORDERED = "bordered",
     ROUNDED = "rounded"
 }
 export interface TabListProps {
@@ -6724,8 +6745,8 @@ export interface TabListProps {
      */
     onChange?: (index: number) => void;
     /**
-     * Variant of the TabList, can be 'border' or 'rounded'.
-     * @default 'default'
+     * Variant of the TabList, can be 'bordered' or 'rounded'.
+     * @default 'bordered'
      */
     variant?: TabVariant;
     /**
@@ -6744,5 +6765,60 @@ export interface TabListProps {
     size?: TabSize;
 }
 export function NSTabList(props: TabListProps): JSX.Element;
+export interface DrawerProps {
+    /**
+     * The content to be displayed inside the Drawer.
+     */
+    children?: React.ReactNode;
+    /**
+     * Determines whether the Drawer is open or closed.
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Callback function to be called when the Drawer is requested to be closed.
+     * @default () => {}
+     */
+    onClose?: () => void;
+    /**
+     * If true, the Drawer will take up the full screen.
+     * @default false
+     */
+    fullScreen?: boolean;
+    /**
+     * If true, the Drawer will close when the backdrop is clicked.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * The width of the Drawer.
+     * @default '30%'
+     */
+    width?: string;
+    /**
+     * The side from which the Drawer opens.
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /**
+     * Additional class name to be passed to the Drawer.
+     */
+    className?: string;
+    /**
+     * Should focus on the first element in the drawer
+     * @default true
+     */
+    shouldFocusOnFirstElement?: boolean;
+    /**
+     * Flag to determine if the background scroll should be disabled.
+     * @default true
+     */
+    shouldDisableScroll?: boolean;
+    /**
+     * Custom styles to override drawer styling
+     */
+    styles?: React.CSSProperties;
+}
+export const NSDrawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
 
 //# sourceMappingURL=index.d.ts.map