@spesia/ui 1.0.4 → 1.8.17

package/README.md

@@ -25,7 +25,7 @@ Create your own provider file, i.e. SpesiaThemeProvider in your app:
 
 import { theme } from '@spesia/ui';
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 import { ReactNode } from 'react';
@@ -122,7 +122,7 @@ Example:
 ```javascript
 import { color } from "@spesia/ui";
 
-const chartColor = colors.primary.blue[400];
+const chartColor = colors.primary.brown[70];
 ```
 
 ### CSS

package/dist/components/Logo/Logo.d.ts

@@ -3,7 +3,7 @@ export type LogoProps = {
     alt?: string;
     height?: number;
     width?: number;
-    color?: "blue" | "black" | "white";
+    color?: "brown" | "coral" | "black" | "light";
 };
 declare const Logo: ({ withText, color, height, width, ...rest }: LogoProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Logo;

package/dist/components/Logo3d/Logo3d.d.ts

@@ -0,0 +1,7 @@
+export type LogoProps = {
+    alt?: string;
+    height?: number;
+    width?: number;
+};
+declare const Logo3d: ({ height, width }: LogoProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Logo3d;

package/dist/components/TrendingChip/TrendingChip.d.ts

@@ -1,7 +1,8 @@
 export type TrendingChipProps = {
     value: number;
+    iconOnly?: boolean;
     size?: "small" | "medium";
     className?: string;
 };
-declare const TrendingChip: ({ value, size, className, }: TrendingChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TrendingChip: ({ value, size, iconOnly, className, }: TrendingChipProps) => import("react/jsx-runtime").JSX.Element;
 export default TrendingChip;

package/dist/components/checkbox/Checked.d.ts

@@ -0,0 +1,2 @@
+declare const Checked: () => import("react/jsx-runtime").JSX.Element;
+export default Checked;

package/dist/components/checkbox/Unchecked.d.ts

@@ -0,0 +1,2 @@
+declare const Unchecked: () => import("react/jsx-runtime").JSX.Element;
+export default Unchecked;

package/dist/components/chip-list/ChipList.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement, ReactNode } from 'react';
+export type PeriodPickerDate = Date | string | null | undefined;
+type Props = {
+    options: {
+        value: string;
+        label?: ReactNode;
+        tooltip?: ReactNode;
+        icon?: ReactElement;
+    }[];
+    onSelect: (value: any) => void;
+    initialValue?: string;
+    disabled?: boolean;
+    dataTestId?: string;
+    size?: "small";
+    className?: string;
+};
+export declare const ChipList: ({ options, onSelect, initialValue, disabled, dataTestId, size, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ChipList;

package/dist/components/container-grid/ContainerGrid.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { GridSpacing, SxProps } from '@mui/material';
+type ContainerGridSize = {
+    xs?: number | string;
+    sm?: number | string;
+    md?: number | string;
+    lg?: number | string;
+};
+type ContainerBreakpointSize = {
+    sm?: number | string;
+    md?: number | string;
+    lg?: number | string;
+};
+type ContainerGridProps = {
+    container?: boolean;
+    spacing?: GridSpacing;
+    size?: ContainerGridSize;
+    breakpoints?: ContainerBreakpointSize;
+    className?: string;
+    children: ReactNode;
+    sx?: SxProps;
+};
+/**
+ * Custom Container Grid system, using MUI components, which is responsive within a parent container, instead of within a window/viewport
+ * Author: Tinna Karen
+ *
+ * @param param0
+ * @returns
+ */
+export declare function ContainerGrid({ container, spacing, size, breakpoints, className, children, sx, }: ContainerGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/date-picker/DatePicker/DatePicker.d.ts

@@ -0,0 +1,33 @@
+import { SxProps } from '@mui/material/styles';
+export interface IDatePickerProps {
+    /**
+     * Modifiers
+     */
+    disabled?: boolean;
+    /**
+     * DatePicker label
+     */
+    label?: string;
+    className?: string;
+    /**
+     * MUI system (https://mui.com/system/getting-started/the-sx-prop/)
+     */
+    sx?: SxProps;
+    dataTestId?: string;
+    /**
+     * Error to show when using 'minDate' and the user types in a date before that
+     */
+    minDateErrorText?: string;
+    /**
+     * Error to show when using 'maxDate' and the user types in a date after that
+     */
+    maxDateErrorText?: string;
+    /**
+     * Default error text to show when the date is invalid
+     */
+    errorText?: string;
+    value?: Date;
+    size?: "small";
+}
+export declare const DatePicker: ({ label, disabled, dataTestId, className, value, minDateErrorText, maxDateErrorText, errorText, size, sx, ...rest }: IDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default DatePicker;

package/dist/components/date-picker/PeriodPicker/PeriodPicker.d.ts

@@ -0,0 +1,36 @@
+import { ReactElement } from 'react';
+export type PeriodPickerDate = Date | string | null | undefined;
+type Props = {
+    inline?: boolean;
+    format?: string;
+    yearFormat?: string;
+    options: {
+        value: string;
+        key: string;
+        label?: string;
+        tooltip?: string;
+        icon?: ReactElement;
+    }[];
+    onSelect: (item: any) => void;
+    initialFromDate?: PeriodPickerDate;
+    initialToDate?: PeriodPickerDate;
+    initialPeriod?: string;
+    maxDate?: Date | string | number | null;
+    minDate?: Date | string | number | null;
+    onClose?: any;
+    id?: string;
+    block?: boolean;
+    size?: "small";
+    required?: boolean;
+    disabled?: boolean;
+    label?: string;
+    dataTestId?: string;
+    className?: string;
+    placeholder?: string;
+    cancelButtonText?: string;
+    saveButtonText?: string;
+    invalidPeriodHelperText?: string;
+    validation?: (item: any) => boolean;
+};
+export declare const PeriodPicker: ({ inline, format, yearFormat, options, onSelect, initialFromDate, initialToDate, initialPeriod, required, onClose, disabled, block, maxDate, size, minDate, id, dataTestId, placeholder, cancelButtonText, saveButtonText, invalidPeriodHelperText, validation, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default PeriodPicker;

package/dist/components/date-picker/utils.d.ts

@@ -0,0 +1,2 @@
+import { PeriodPickerDate } from './PeriodPicker/PeriodPicker';
+export declare const setInitialValue: (period: any, fromDate: PeriodPickerDate, toDate: PeriodPickerDate, format: string, yearFormat: string) => string;

package/dist/components/filters/Checked.d.ts

@@ -0,0 +1,2 @@
+declare const Checked: () => import("react/jsx-runtime").JSX.Element;
+export default Checked;

package/dist/components/filters/FilterList.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+type Props = {
+    options: {
+        value: string;
+        label?: ReactNode;
+        tooltip?: ReactNode;
+    }[];
+    initialValues?: string | string[];
+    onSelect: (value: string[]) => void;
+    disabled?: boolean;
+    dataTestId?: string;
+    className?: string;
+};
+export declare const FilterList: ({ options, onSelect, disabled, initialValues, dataTestId, className, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default FilterList;

package/dist/components/filters/Unchecked.d.ts

@@ -0,0 +1,3 @@
+import { ComponentType, HTMLAttributes } from 'react';
+declare const Unchecked: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+export default Unchecked;

package/dist/components/index.d.ts

@@ -1,2 +1,9 @@
 export { default as Logo } from './Logo/Logo';
+export { default as Logo3d } from './Logo3d/Logo3d';
 export { type LogoProps } from './Logo/Logo';
+export { ContainerGrid } from './container-grid/ContainerGrid';
+export { PeriodPicker } from './date-picker/PeriodPicker/PeriodPicker';
+export { DatePicker } from './date-picker/DatePicker/DatePicker';
+export { ChipList } from './chip-list/ChipList';
+export { FilterList } from './filters/FilterList';
+export { TrendingChip } from './TrendingChip/TrendingChip';

package/dist/components/radio/Checked.d.ts

@@ -0,0 +1,3 @@
+import { ComponentType, HTMLAttributes } from 'react';
+declare const Checked: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+export default Checked;

package/dist/components/radio/Unchecked.d.ts

@@ -0,0 +1,3 @@
+import { ComponentType, HTMLAttributes } from 'react';
+declare const Unchecked: ComponentType<HTMLAttributes<HTMLSpanElement>>;
+export default Unchecked;

package/dist/fonts.scss

@@ -1,33 +1,59 @@
 @font-face {
-  font-family: "Montserrat";
-  src: url("/fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
-    format("truetype");
+  font-family: "GT Pressura";
+  src: url("/fonts/GTPressura/GT-Pressura-Mono-Regular.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Montserrat";
-  src: url("/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
-    format("truetype");
-  font-weight: normal;
-  font-style: italic;
+  font-family: "GT Pressura";
+  src: url("/fonts/GTPressura/GT-Pressura-Mono-Bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "F37 August";
+  src: url("/fonts/F37August/F37August-SemiBold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "F37 August";
+  src: url("/fonts/F37August/F37August-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
 }
 
 @font-face {
-  font-family: "Montserrat Fallback";
-  src: local("Arial");
-  ascent-override: 85.79%;
-  descent-override: 22.25%;
-  line-gap-override: 0%;
-  size-adjust: 112.83%;
+  font-family: "F37 August";
+  src: url("/fonts/F37August/F37August-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Feature Deck Web";
+  src: url("/fonts/FeatureDeck/FeatureDeck-Bold-Web.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
 }
 
-.montserrat-font {
-  font-family: "Montserrat", "Montserrat Fallback";
+.spesia-serif {
+  font-family: "Feature Deck Web";
+  font-weight: 700;
   font-style: normal;
 }
 
-.montserrat-font-variable {
-  --font-spesia: "Montserrat", "Montserrat Fallback";
+.spesia-sans {
+  font-family: "F37 August";
+  font-weight: 400;
+  font-style: normal;
+}
+
+.spesia-mono {
+  font-family: "GT Pressura";
+  font-weight: normal;
+  font-style: normal;
 }

package/dist/helpers/__tests__/suitCx.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useContainerDimension.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type ContainerDimensions = {
+    width: number | undefined;
+    height: number | undefined;
+};
+export declare const useContainerDimensions: <_T = unknown>(ref: RefObject<HTMLFormElement | null>) => ContainerDimensions;
+export {};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { theme } from './styles';
-export { colors } from './styles/colors';
+export { colors, tokens, primitives } from './styles/colors';
 export { themes, defaultTheme } from './themes';
 export { suitCx } from './helpers/suitCx';
 export * from './components';