@yourdash/uikit 0.1.11 → 0.1.13

package/lib/components/image/UKImage.tsx

@@ -8,6 +8,7 @@ import styles from "./image.module.scss";
 import React, { FC, useEffect, useRef, useState } from "react";
 import clippy from "../../core/clippy.ts";
 import UKIcon from "../icon/UKIcon.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
 
 const UKImage: FC<{
   src: string;
@@ -20,8 +21,10 @@ const UKImage: FC<{
   height?: number;
   style?: React.CSSProperties;
   onClick?: () => void;
+
 }> = (props) => {
   const ref = useRef<HTMLDivElement>(null);
+  const level= useLevel()
   const [src, setSrc] = useState<string>(props.src);
   const [loaded, setLoaded] = useState<boolean>(false);
   const [hasFailed, setHasFailed] = useState<boolean>(false);
@@ -67,7 +70,7 @@ const UKImage: FC<{
     >
       {!hasFailed ? (
         <img
-          className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
+          className={clippy(styles.component, useLevelClass(level), props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
           draggable={false}
           width={props.width}
           height={props.height}

package/lib/components/image/image.module.scss

@@ -10,7 +10,7 @@
 }
 
 .component {
-  border-radius: var(#{$theme}#{$radius});
+  border-radius: $UKRadius;
   opacity: 0;
   width: 100%;
   height: 100%;
@@ -28,7 +28,7 @@
 }
 
 .loaded {
-  transition: opacity 750ms linear;
+  transition: opacity 250ms ease-out;
   opacity: 1;
 }
 

package/lib/core/decrementLevel.tsx

@@ -7,7 +7,9 @@ import LevelContext, { useLevel } from "./level.tsx";
 import { FC } from "react";
 
 const DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
-  return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
+  const level = useLevel()
+
+  return <LevelContext.Provider value={level - 1}>{props.children}</LevelContext.Provider>;
 };
 
 export default DecrementLevel;

package/lib/core/incrementLevel.tsx

@@ -7,7 +7,9 @@ import LevelContext, { useLevel } from "./level.tsx";
 import { FC } from "react";
 
 const IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
-  return <LevelContext.Provider value={useLevel() + 1}>{props.children}</LevelContext.Provider>;
+  const level = useLevel()
+
+  return <LevelContext.Provider value={level + 1}>{props.children}</LevelContext.Provider>;
 };
 
 export default IncrementLevel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourdash/uikit",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "The YourDash ReactJS UI library",
   "scripts": {
     "dev-compile": "vite build --watch",