@uni-design-system/uni-react 1.0.0 → 2.0.1

package/dist/tools/color-picker/color-picker.component.d.ts

@@ -4,5 +4,5 @@ export interface ColorPickerProps {
     imageHeight: number;
     sampleSize: number;
 }
-export declare const ColorPicker: ({ imageUrl, imageWidth, imageHeight, sampleSize }: ColorPickerProps) => JSX.Element;
+export declare const ColorPicker: ({ imageUrl, imageWidth, imageHeight, sampleSize, }: ColorPickerProps) => JSX.Element;
 //# sourceMappingURL=color-picker.component.d.ts.map

package/dist/tools/color-picker/color-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,mDAAwD,gBAAgB,KAAG,GAAG,CAAC,OAsI1G,CAAC"}
+{"version":3,"file":"color-picker.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-picker/color-picker.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,oDAKzB,gBAAgB,KAAG,GAAG,CAAC,OAsIzB,CAAC"}

package/dist/tools/color-picker/color-picker.stories.d.ts

@@ -1,7 +1,7 @@
 import { ColorPickerProps } from './color-picker.component';
 declare const _default: {
     title: string;
-    component: ({ imageUrl, imageWidth, imageHeight, sampleSize }: ColorPickerProps) => JSX.Element;
+    component: ({ imageUrl, imageWidth, imageHeight, sampleSize, }: ColorPickerProps) => JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/tools/color-swatch/color-swatch.component.d.ts

@@ -9,5 +9,5 @@ export interface ColorSwatchProps {
     width?: string | number;
     height?: string | number;
 }
-export declare function ColorSwatch({ rgba, children, cardType, elevation, width, height }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorSwatch({ rgba, children, cardType, elevation, width, height, }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=color-swatch.component.d.ts.map

package/dist/tools/color-swatch/color-swatch.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-swatch/color-swatch.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAgB,GAAG,EAAY,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG3F,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAqB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CA6ChH"}
+{"version":3,"file":"color-swatch.component.d.ts","sourceRoot":"","sources":["../../../src/tools/color-swatch/color-swatch.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAgB,GAAG,EAAY,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG3F,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAqB,EACrB,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,2CA6ClB"}

package/dist/utils/storage-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storage-manager.d.ts","sourceRoot":"","sources":["../../src/utils/storage-manager.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,QAAQ,GAAG,cAAc,CAAC;IAChC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IAC7B,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,yBAAyB,GAAI,CAAC,EAAE,KAAK,MAAM,KAAG,cAAc,CAAC,CAAC,CAoBzE,CAAC;AASH,eAAO,MAAM,0BAA0B,GAAI,KAAK,MAAM,EAAE,SAAS,MAAM,KAAG,cAAc,CAAC,MAAM,CAU7F,CAAC"}
+{"version":3,"file":"storage-manager.d.ts","sourceRoot":"","sources":["../../src/utils/storage-manager.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,IAAI,EAAE,QAAQ,GAAG,cAAc,CAAC;IAChC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IAC7B,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,yBAAyB,GAAI,CAAC,EAAE,KAAK,MAAM,KAAG,cAAc,CAAC,CAAC,CAoBzE,CAAC;AASH,eAAO,MAAM,0BAA0B,GACrC,KAAK,MAAM,EACX,SAAS,MAAM,KACd,cAAc,CAAC,MAAM,CAUtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/uni-design-system/uni",
@@ -16,8 +16,8 @@
     ".": "./src/index.ts"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "@uni-design-system/uni-core": ">=1.0.0"
+    "@uni-design-system/uni-core": ">=2.0.1",
+    "react": ">=18"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -31,11 +31,11 @@
     "use-ripple-hook": "^2.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.1.2",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/react-vite": "^10.3.6",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/react-vite": "^10.4.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.2.0",
@@ -43,13 +43,13 @@
     "@vitest/coverage-v8": "^4.1.5",
     "csstype": "^3.2.3",
     "playwright": "^1.59.1",
-    "storybook": "^10.3.6",
+    "storybook": "^10.4.0",
     "typescript": "^5.0.0",
     "unplugin-dts": "^1.0.0",
     "vite": "^7.0.0",
     "vitest": "^4.1.5",
-    "@uni-design-system/uni-core": "1.0.1",
-    "@uni-design-system/tsconfig": "0.0.0"
+    "@uni-design-system/tsconfig": "0.0.0",
+    "@uni-design-system/uni-core": "2.0.1"
   },
   "scripts": {
     "dev": "vite",

package/src/components/button/button.component.tsx

@@ -1,6 +1,12 @@
 import React, { CSSProperties, ReactNode, useEffect, useState } from 'react';
 import { BoxShadow, Text, useLayout, useTheme } from '../../core';
-import { Theme, ButtonType, ColorToken, Size, ContentColorToken } from '@uni-design-system/uni-core';
+import {
+  UniTheme,
+  ButtonType,
+  ColorToken,
+  Size,
+  ContentColorToken,
+} from '@uni-design-system/uni-core';
 import { IconTextRow } from '../icon-text-row';
 import { IconName } from '../../core/icon';
 import { useRipple } from 'use-ripple-hook';
@@ -79,15 +85,22 @@ export const Button = ({
 };
 
 function Style(
-  theme: Theme,
+  theme: UniTheme,
   buttonType: ButtonType,
   size: Size = 'md',
   hover: boolean,
   disabled: boolean,
-  click: boolean,
+  click: boolean
 ): CSSProperties {
-  const { color, horizontalPadding, verticalPadding, borderColor, borderWidth, borderRadius, contentColor } =
-    theme.buttons[buttonType];
+  const {
+    color,
+    horizontalPadding,
+    verticalPadding,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    contentColor,
+  } = theme.buttons[buttonType];
 
   const styles: CSSProperties = {
     overflow: 'hidden',

package/src/components/card/card.component.tsx

@@ -1,5 +1,10 @@
 import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-import { ColorToken, ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
+import {
+  ColorToken,
+  ContainerColorToken,
+  ShadowElevation,
+  Size,
+} from '@uni-design-system/uni-core';
 import { BoxShadow, Padding, useTheme } from '../../core';
 import { Property } from 'csstype';
 import Container from '../../core/container/container.component';

package/src/components/draggable/SortableList/components/SortableItem/sortableItem.component.tsx

@@ -17,7 +17,15 @@ export const SortableItem = ({
   style: userStyle,
   onRemove,
 }: PropsWithChildren<SortableItemProps>): JSX.Element => {
-  const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef, transform, transition } = useSortable({
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+  } = useSortable({
     id,
   });
   const context = useMemo(
@@ -26,7 +34,7 @@ export const SortableItem = ({
       listeners,
       ref: setActivatorNodeRef,
     }),
-    [attributes, listeners, setActivatorNodeRef],
+    [attributes, listeners, setActivatorNodeRef]
   );
   const style: CSSProperties = {
     opacity: isDragging ? 0.4 : undefined,

package/src/components/draggable/SortableList/sortableList.component.tsx

@@ -29,7 +29,7 @@ export const SortableList = <T extends SortableItemProps>({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    }),
+    })
   );
 
   const style: CSSProperties = {

package/src/components/draggable/SortableList/sortableList.stories.tsx

@@ -7,8 +7,7 @@ import { findManyChannelStatus } from './mockData';
 
 import { Button } from '../../button';
 import { UniqueIdentifier } from '@dnd-kit/core';
-import { Text } from '../../../core';
-import { Flex } from '../../../core/flex/flex.component';
+import { Flex, Text } from '../../../core';
 
 export default {
   title: 'Components/Draggable/Sortable List',
@@ -41,7 +40,8 @@ export const BasicList = (): JSX.Element => {
 export const SortableRows = (): JSX.Element => {
   const [items, setItems] = useState(findManyChannelStatus);
 
-  const handleRemove = (id: UniqueIdentifier): void => setItems((items) => items.filter((item) => item.id !== id));
+  const handleRemove = (id: UniqueIdentifier): void =>
+    setItems((items) => items.filter((item) => item.id !== id));
 
   return (
     <SortableList
@@ -58,7 +58,11 @@ export const SortableRows = (): JSX.Element => {
           <Flex align="center">
             <DragHandle />
             <Text role="paragraph">{name}</Text>
-            <Button buttonType="icon" onClick={(): void => handleRemove(id)} iconName="trashCanRegular" />
+            <Button
+              buttonType="icon"
+              onClick={(): void => handleRemove(id)}
+              iconName="trashCanRegular"
+            />
           </Flex>
         </SortableItem>
       )}

package/src/components/draggable/utilities/index.ts

@@ -1 +1 @@
-export {createRange} from './createRange';
+export { createRange } from './createRange';

package/src/components/forms/utils/validations.ts

@@ -9,7 +9,8 @@ export type ValidationRule =
 
 export const validations: Record<ValidationRule, unknown> = {
   email: {
-    rule: () => /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
+    rule: () =>
+      /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
     formatter(fieldName: string) {
       return `${fieldName} is not valid email`;
     },

package/src/components/grainy-gradient-background/grainy-gradient-background.component.stories.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import { GrainyGradientBackground, GrainyGradientProps } from './grainy-gradient-background.component';
+import {
+  GrainyGradientBackground,
+  GrainyGradientProps,
+} from './grainy-gradient-background.component';
 
 export default {
   title: 'Components/Background',

package/src/components/icon-text-row/icon-text-row.component.tsx

@@ -1,5 +1,10 @@
 import React, { ReactNode } from 'react';
-import { ContentColorToken, getValue, HorizontalAlign, TextRole } from '@uni-design-system/uni-core';
+import {
+  ContentColorToken,
+  getValue,
+  HorizontalAlign,
+  TextRole,
+} from '@uni-design-system/uni-core';
 
 import { alignCenter, expand, fix, row, Text, Icon, useTheme } from '../../core';
 import { IconName } from '../../core/icon';

package/src/components/modal/modal.component.tsx

@@ -33,7 +33,12 @@ export const Modal = ({ children, isOpen, size = 'lg' }: ModalProps) => {
           exit={{ y: 36, opacity: 0 }}
           transition={{ duration: 0.2 }}
         >
-          <Card colorToken="background" width={ModalSizes[size]} cardType="elevated" elevation="modal">
+          <Card
+            colorToken="background"
+            width={ModalSizes[size]}
+            cardType="elevated"
+            elevation="modal"
+          >
             {children}
           </Card>
         </motion.div>

package/src/components/switch/switch.component.tsx

@@ -25,7 +25,10 @@ export const Switch = ({ size = 'sm', on = false, onChange }: SwitchProps) => {
     damping: 30,
   };
 
-  const config = SwitchConfigs[size];
+  const config = SwitchConfigs[size] || {
+    radius: 8,
+    padding: 2,
+  };
 
   const handleDiameter = config.radius * 2;
   const switchWidth = config.radius * 4;

package/src/components/switch/switch.config.ts

@@ -1,6 +1,6 @@
 import { Size } from '@uni-design-system/uni-core';
 
-export const SwitchConfigs: Record<Size, { radius: number; padding: number }> = {
+export const SwitchConfigs: Partial<Record<Size, { radius: number; padding: number }>> = {
   xs: {
     radius: 6,
     padding: 2,

package/src/core/border/border.style.ts

@@ -1,7 +1,7 @@
-import { Border, ColorToken, getValue, Theme } from '@uni-design-system/uni-core';
+import { Border, ColorToken, getValue, UniTheme } from '@uni-design-system/uni-core';
 import { CSSProperties } from 'react';
 
-export function BorderStyle(border: Border | undefined, theme: Theme): CSSProperties {
+export function BorderStyle(border: Border | undefined, theme: UniTheme): CSSProperties {
   if (!border) return {};
 
   const borderTopColor = extractColor(theme, border, 'colorTop');
@@ -25,6 +25,7 @@ export function BorderStyle(border: Border | undefined, theme: Theme): CSSProper
   };
 }
 
-function extractColor(theme: Theme, border: Border, key: string): string {
-  return theme.colors[getValue(border, key, 'color') as ColorToken];
+function extractColor(theme: UniTheme, border: Border, key: string): string | undefined {
+  const colorToken = getValue(border, key, 'color') as ColorToken;
+  return colorToken ? theme.colors[colorToken] : undefined;
 }

package/src/core/flex/flex.style.ts

@@ -6,12 +6,12 @@ export const flex: CSSProperties = { flex: 1 };
 export const row: CSSProperties = {
   display: 'flex',
   flex: 1,
-  flexDirection: 'row'
+  flexDirection: 'row',
 };
 
 export const column: CSSProperties = {
   flex: 1,
-  flexDirection: 'column'
+  flexDirection: 'column',
 };
 
 export const alignTop: CSSProperties = { alignItems: 'flex-start' };
@@ -21,7 +21,7 @@ export const alignBottom: CSSProperties = { alignItems: 'flex-end' };
 export const FlexVerticalAlignments: Record<VerticalAlign, CSSProperties> = {
   top: alignTop,
   middle: alignCenter,
-  bottom: alignBottom
+  bottom: alignBottom,
 };
 
 export const justifyLeft: CSSProperties = { justifyContent: 'flex-start' };
@@ -31,76 +31,76 @@ export const justifyRight: CSSProperties = { justifyContent: 'flex-end' };
 export const FlexHorizontalAlignments: Record<HorizontalAlign, CSSProperties> = {
   left: justifyLeft,
   center: justifyCenter,
-  right: justifyRight
+  right: justifyRight,
 };
 
 export const expand: CSSProperties = { flexGrow: 1 };
 export const fix: CSSProperties = { flex: 0, flexGrow: 0 };
 
 export const rowFlexItem: CSSProperties = {
-  flexGrow: 1
+  flexGrow: 1,
 };
 
 export const rowFixedItem: CSSProperties = {
-  flexGrow: 0
+  flexGrow: 0,
 };
 
 export const flexRowStart: CSSProperties = {
   flexDirection: 'row',
   justifyContent: 'flex-start',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const flexRowCenter: CSSProperties = {
   flexDirection: 'row',
   justifyContent: 'center',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const flexRowEnd: CSSProperties = {
   flexDirection: 'row',
   justifyContent: 'flex-end',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const spaceBetween: CSSProperties = {
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
 };
 
 export const flexRowSpaceBetween: CSSProperties = {
   flexDirection: 'row',
   justifyContent: 'space-between',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const flexRowSpaceAround: CSSProperties = {
   flexDirection: 'row',
   justifyContent: 'space-around',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const spaceEvenly: CSSProperties = {
-  justifyContent: 'space-evenly'
+  justifyContent: 'space-evenly',
 };
 
 export const flexRowSpaceEvenly: CSSProperties = {
   flexDirection: 'row',
   justifyContent: 'space-evenly',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const flexColumnCenter: CSSProperties = {
   flexDirection: 'column',
   justifyContent: 'center',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const flexColumnSpaceAround: CSSProperties = {
   flexDirection: 'column',
   justifyContent: 'space-around',
-  alignItems: 'center'
+  alignItems: 'center',
 };
 
 export const flexOff: CSSProperties = {
-  position: 'relative'
+  position: 'relative',
 };

package/src/core/hooks/use-media.ts

@@ -23,7 +23,7 @@ export const useMedia = <T>(queries: string[], values: T[], defaultValue: T) =>
       // Remove listeners on cleanup
       return () => mediaQueryLists.forEach((mql) => mql.removeListener(handler));
     },
-    [], // Empty array ensures effect is only run on mount and unmount
+    [] // Empty array ensures effect is only run on mount and unmount
   );
   return value;
 };

package/src/core/hooks/use-toggle.tsx

@@ -17,7 +17,7 @@ export function useToggle(initialState: InitialState = false) {
       off: () => setValue(false),
       toggle: () => setValue((prev) => !prev),
     }),
-    [],
+    []
   );
   return [value, callbacks] as const;
 }

package/src/core/icon/icon.component.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ContentColorToken } from '@uni-design-system/uni-core';
 
 import { useTheme } from '../theme';
-import {IconDictionary, type IconName} from "@uni-design-system/uni-react-icons/dist/cjs/src";
+import { IconDictionary, type IconName } from '@uni-design-system/uni-react-icons/dist/cjs/src';
 
 export interface IconProps {
   name?: IconName;

package/src/core/icon/icon.stories.tsx

@@ -30,7 +30,10 @@ export const IconManifest = (): JSX.Element => {
 
   return (
     <div>
-      <input onChange={(e): void => setFilteredIcons(Filter(e.target.value))} placeholder="Filter Icons by Name" />
+      <input
+        onChange={(e): void => setFilteredIcons(Filter(e.target.value))}
+        placeholder="Filter Icons by Name"
+      />
       <div>
         {filteredIcons.map((iconName) => {
           return (

package/src/core/icon/index.ts

@@ -1,2 +1,6 @@
-export { IconDictionary, type IconName, IconKeys } from '@uni-design-system/uni-react-icons/dist/cjs/src';
+export {
+  IconDictionary,
+  type IconName,
+  IconKeys,
+} from '@uni-design-system/uni-react-icons/dist/cjs/src';
 export * from './icon.component';

package/src/core/image/image.component.tsx

@@ -2,6 +2,16 @@ import React from 'react';
 import { ImageProps } from './image.model';
 import { ImageStyle } from './image.style';
 
-export const Image = ({ url, alt, height, width, opacity, fit = 'cover', ...rest }: ImageProps): JSX.Element | null => {
-  return url ? <img src={url} alt={alt} style={ImageStyle({ fit, opacity, height, width, ...rest })} /> : null;
+export const Image = ({
+  url,
+  alt,
+  height,
+  width,
+  opacity,
+  fit = 'cover',
+  ...rest
+}: ImageProps): JSX.Element | null => {
+  return url ? (
+    <img src={url} alt={alt} style={ImageStyle({ fit, opacity, height, width, ...rest })} />
+  ) : null;
 };

package/src/core/layout/layout.provider.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import LayoutContext from './layout.context';
 
 // @ts-ignore
-export const LayoutProvider = ({children}) => {
-
+export const LayoutProvider = ({ children }) => {
   const getWidth = () => document.documentElement.clientWidth;
   const getHeight = () => document.documentElement.clientHeight;
 
@@ -16,13 +15,9 @@ export const LayoutProvider = ({children}) => {
   };
 
   React.useEffect(() => {
-    window.addEventListener("resize", handleWindowResize);
-    return () => window.removeEventListener("resize", handleWindowResize);
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
   }, []);
 
-  return (
-    <LayoutContext.Provider value={{ height, width }}>
-      { children }
-    </LayoutContext.Provider>
-  )
-}
+  return <LayoutContext.Provider value={{ height, width }}>{children}</LayoutContext.Provider>;
+};

package/src/core/overlay/overlay.config.ts

@@ -1,10 +1,17 @@
-import { Theme, HSLAToString } from '@uni-design-system/uni-core';
+import { UniTheme, HSLAToString } from '@uni-design-system/uni-core';
 import { CSSProperties } from 'react';
 import { OverlayProps } from './overlay.model';
 
 export const OverlayStyle = (
-  theme: Theme,
-  { hueRotateDeg = 0, hueDeg = 0, saturation = 0, lightness = 0, transparency = 0.5, blurPx = 0 }: OverlayProps,
+  theme: UniTheme,
+  {
+    hueRotateDeg = 0,
+    hueDeg = 0,
+    saturation = 0,
+    lightness = 0,
+    transparency = 0.5,
+    blurPx = 0,
+  }: OverlayProps
 ): CSSProperties => {
   const backgroundColor = HSLAToString({ hue: hueDeg, saturation, lightness, alpha: transparency });
 

package/src/core/padding/padding.style.ts

@@ -2,35 +2,34 @@ import { CSSProperties } from 'react';
 import { Apply, Size } from '@uni-design-system/uni-core';
 
 export function Padding(size: Size, apply: Apply): CSSProperties {
-
   const amount: number = 16;
   const unit: string = 'px';
 
   const PaddingMap: Record<Apply, CSSProperties> = {
     top: {
-      paddingTop: amount + unit
+      paddingTop: amount + unit,
     },
     bottom: {
-      paddingBottom: amount + unit
+      paddingBottom: amount + unit,
     },
     left: {
-      paddingLeft: amount + unit
+      paddingLeft: amount + unit,
     },
     right: {
-      paddingRight: amount + unit
+      paddingRight: amount + unit,
     },
     vertical: {
       paddingTop: amount + unit,
-      paddingBottom: amount + unit
+      paddingBottom: amount + unit,
     },
     horizontal: {
       paddingLeft: amount + unit,
-      paddingRight: amount + unit
+      paddingRight: amount + unit,
     },
     all: {
-      padding: amount + unit
-    }
-  }
+      padding: amount + unit,
+    },
+  };
 
   return PaddingMap[apply];
 }

package/src/core/text/text.component.tsx

@@ -29,7 +29,8 @@ export function Text(props: TextProps) {
 
   const colorToken = containerColorToken ? (`on-${containerColorToken}` as ColorToken) : undefined;
 
-  const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } = typography[role];
+  const { fontSize, letterSpacing, lineHeight, fontWeight, fontFamily, fontStyle, textTransform } =
+    typography[role];
 
   const style = {
     color: colors[overridingColorToken || colorToken || 'on-surface'],