@newtonschool/grauity 3.2.0-beta.1 → 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;
     /**
@@ -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 {
@@ -6622,7 +6625,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 +6682,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 +6703,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 +6732,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 +6752,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