@paubox/ui - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

package.json

@@ -5,3 +5,3 @@ {
   "description": "Paubox Component Library",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "type": "module",
@@ -8,0 +8,0 @@ "peerDependencies": {

src/hooks/useClickOutside.d.ts

 import { RefObject } from 'react';
-export declare const useClickOutside: (ref: RefObject<HTMLElement | undefined>, callback: () => void, addEventListener?: boolean) => void;
+export declare const useClickOutside: (ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], callback: () => void, addEventListener?: boolean) => void;

src/index.d.ts

@@ -11,2 +11,4 @@ export * from './lib/AlertBar/AlertBar';
 export * from './lib/Popper/Popper';
+export * from './lib/RadioButton/RadioButton';
+export * from './lib/RadioGroup/RadioGroup';
 export * from './lib/Table/Table';
@@ -13,0 +15,0 @@ export * from './lib/Tooltip/Tooltip';

src/lib/Button/BaseButton.d.ts

@@ -10,2 +10,3 @@ import { CSSProperties, MouseEventHandler } from 'react';
     style?: CSSProperties;
+    className?: string;
 }
@@ -12,0 +13,0 @@ export declare const BaseButton: import("@emotion/styled").StyledComponent<{

src/lib/Calendar/Calendar.d.ts

 import { FC, KeyboardEvent, MouseEvent } from 'react';
-import 'react-datepicker/dist/react-datepicker.min.css';
 export type CalendarProps = {
@@ -4,0 +3,0 @@ rangeSelect?: boolean;

src/lib/Calendar/CalendarContainer.d.ts

 import { PropsWithChildren } from 'react';
-import 'react-datepicker/dist/react-datepicker.min.css';
 export declare const CalendarContainer: ({ children }: PropsWithChildren) => import("@emotion/react/jsx-runtime").JSX.Element;

src/lib/DatePicker/DatePicker.d.ts

@@ -1,2 +0,3 @@
-import { FC } from 'react';
+import { FC, MutableRefObject } from 'react';
+import { AnchorAlign, AnchorSide } from '../Popper/Popper';
 export interface DatePickerProps {
@@ -8,3 +9,6 @@ rangeSelect?: boolean;
     onChange: ((date: Date | null) => void) | ((dates: [Date, Date | null]) => void);
+    side?: AnchorSide;
+    align?: AnchorAlign;
+    containerRefOverride?: MutableRefObject<HTMLDivElement | null>;
 }
 export declare const DatePicker: FC<DatePickerProps>;

src/lib/Popper/Popper.d.ts

@@ -1,2 +0,4 @@
-import { FC, MutableRefObject, ReactNode } from 'react';
+import { FC, MutableRefObject, ReactNode, RefObject } from 'react';
+export type AnchorSide = 'top' | 'right' | 'bottom' | 'left';
+export type AnchorAlign = 'start' | 'middle' | 'end';
 export interface PopperProps {
@@ -6,4 +8,13 @@ anchorRef: MutableRefObject<HTMLElement | null>;
     onClose: () => void;
+    side?: AnchorSide;
+    align?: AnchorAlign;
+    offset?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
     children: ReactNode;
+    containerRefOverride?: RefObject<HTMLDivElement>;
+    childContainerRefs?: RefObject<HTMLElement>[];
 }
 export declare const Popper: FC<PopperProps>;

src/lib/Typography/Typography.d.ts

 import { SerializedStyles } from '@emotion/react';
 import React from 'react';
 export type TypographyProps = {
-    variant: 'headline100Regular' | 'headline100Semibold' | 'headline200Regular' | 'headline200Semibold' | 'headline300Regular' | 'headline300Semibold' | 'paragraph100Regular' | 'paragraph100Semibold' | 'paragraph200Regular' | 'paragraph200Semibold' | 'paragraph300Regular' | 'paragraph300Medium' | 'paragraph300Semibold' | 'paragraph300Bold' | 'button100Medium' | 'button200Medium' | 'label100Regular' | 'label100Medium' | 'label100Semibold' | 'label200Regular' | 'label200Medium' | 'label200Semibold';
+    variant: 'headline100Regular' | 'headline100Semibold' | 'headline200Regular' | 'headline200Semibold' | 'headline300Regular' | 'headline300Semibold' | 'paragraph100Regular' | 'paragraph100Semibold' | 'paragraph200Regular' | 'paragraph200Semibold' | 'paragraph300Regular' | 'paragraph300Medium' | 'paragraph300Semibold' | 'paragraph300Bold' | 'button100Medium' | 'button200Medium' | 'label100Regular' | 'label100Medium' | 'label100Semibold' | 'label200Regular' | 'label200Medium' | 'label200Semibold' | 'label300Regular' | 'label300Medium' | 'label300Semibold';
     /**
@@ -13,3 +13,4 @@ * The color of the text. This can be any css color string or one of the following:
     as?: keyof React.JSX.IntrinsicElements;
+    htmlFor?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 export declare const Typography: React.FC<TypographyProps>;

src/theme/baseTypography.d.ts

@@ -32,1 +32,4 @@ export declare const BASE_FONT_SIZE = 16;
 export declare const label200LetterSpacing: number;
+export declare const label300FontSize = 12;
+export declare const label300LineHeight = 12;
+export declare const label300LetterSpacing: number;

src/theme/typography.d.ts

@@ -23,1 +23,4 @@ export declare const $headline100Regular: import("@emotion/react").SerializedStyles;
 export declare const $label200Semibold: import("@emotion/react").SerializedStyles;
+export declare const $label300Regular: import("@emotion/react").SerializedStyles;
+export declare const $label300Medium: import("@emotion/react").SerializedStyles;
+export declare const $label300Semibold: import("@emotion/react").SerializedStyles;

No alert changes

Improved metrics

Total package byte prevSize

1211733

increased by1.49%

Number of package files

57

increased by1.79%

Lines of code

28992

increased by1.61%

No dependency changes