@newtonschool/grauity 3.2.0-beta.0 → 3.2.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;
     /**
@@ -4968,7 +4968,7 @@ export interface MonthlyCalendarProps<T = {}> {
     className?: string;
 }
 export function NSMonthlyCalendar<T>(props: MonthlyCalendarProps<T>): JSX.Element;
-export interface TabProps {
+export interface TabsProps {
     /**
      * An array of tab items to be rendered.
      * Each item can be a React node.
@@ -5006,7 +5006,7 @@ export interface TabProps {
      */
     className?: string;
 }
-export function NSTab(props: TabProps): JSX.Element;
+export function NSTabs(props: TabsProps): JSX.Element;
 export function NSCalendar(props: CalendarProps<any>): JSX.Element;
 type RangeInputValue = {
     min: number;
@@ -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;
     /**
@@ -5896,9 +5896,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 +5910,7 @@ export type NSDropdownMenuBaseItemOptionProps = {
     leftIcon?: grauityIconName;
     rightIcon?: grauityIconName;
     disabled?: boolean;
+    scrollToOnOpen?: boolean;
 };
 export type NSDropdownMenuBaseItemProps = NSDropdownMenuBaseItemSubHeaderProps | NSDropdownMenuBaseItemDividerProps | NSDropdownMenuBaseItemOptionProps;
 export interface NSDropdownMenuProps {
@@ -6609,5 +6612,200 @@ interface FormFieldProps {
  * - Allows updating form data and handling individual field changes.
  */
 export const useNSForm: ({ formConfig, rowStyles, whenToValidate, isMobileView, shouldFocusOnFirstError, shouldSubmitOnEnter, shouldShowSubmitButton, submitButtonProps, onSubmit, }: NSUseFormProps) => NSUseFormReturnProps;
+export enum TAB_SIZES_ENUM {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    EXTRA_LARGE = "extra-large"
+}
+export enum TAB_ICON_POSITIONS_ENUM {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export enum TAB_VARIANT_ENUM {
+    BORDERED = "bordered",
+    ROUNDED = "rounded"
+}
+type TabIconPosition = `${TAB_ICON_POSITIONS_ENUM}`;
+type TabSize = `${TAB_SIZES_ENUM}`;
+type TabVariant = `${TAB_VARIANT_ENUM}`;
+export interface TabProps {
+    /**
+     * Unique identifier for the tab, useful for testing or tracking.
+     * @default ''
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Size of the tab, can be 'small', 'medium', 'large' or 'extra-large'.
+     * @default 'medium'
+     */
+    size?: TabSize;
+    /**
+     * Additional CSS class names to apply to the tab.
+     * @default ''
+     */
+    className?: string;
+    /**
+     * Inline styles to apply to the tab.
+     * @default {}
+     */
+    style?: React.CSSProperties;
+    /**
+     * Content to display inside the tab.
+     * Can be a string, number, or ReactNode.
+     * @default null
+     */
+    children?: React.ReactNode;
+    /**
+     * Subtext to display below the main content of the tab.
+     * Can be a string or ReactNode.
+     * @default ''
+     */
+    subText?: React.ReactNode;
+    /**
+     * Icon to display in the tab.
+     * Can be a string representing the icon name.
+     * @default ''
+     */
+    icon?: grauityIconName;
+    /**
+     * Size of the icon
+     * @default '20'
+     */
+    iconSize?: grauityIconSizeName;
+    /**
+     * Position of the icon relative to the text, can be 'left', 'right', 'top', or 'bottom'.
+     * @default 'left'
+     */
+    iconPosition?: TabIconPosition;
+    /**
+     * Variant of the tab, can be 'rounded', or 'bordered'.
+     * @default 'bordered'
+     */
+    variant?: TabVariant;
+    /**
+     * Whether the tab is currently active.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Whether the tab is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler for the tab.
+     * @default () => {}
+     */
+    onClick?: () => void;
+    /**
+     * Tab index for keyboard navigation.
+     * @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 {
+    BORDERED = "bordered",
+    ROUNDED = "rounded"
+}
+export interface TabListProps {
+    /**
+     * Children elements to be rendered inside the TabList.
+     */
+    children?: ReactNode;
+    /**
+     * Index of the currently active tab.
+     */
+    activeIndex?: number;
+    /**
+     * Callback function to handle tab change.
+     * @param index - Index of the tab that was clicked.
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Variant of the TabList, can be 'bordered' or 'rounded'.
+     * @default 'bordered'
+     */
+    variant?: TabVariant;
+    /**
+     * Additional CSS class names to apply to the TabList.
+     */
+    className?: string;
+    /**
+     * ARIA label for the TabList.
+     * @default 'Tab list'
+     */
+    ariaLabel?: string;
+    /**
+     * Size of the tab, can be 'small', 'medium', 'large' or 'extra-large'.
+     * @default 'medium'
+     */
+    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